hermesbuttons 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- var l="agentpreferences";function m(){return typeof document<"u"}function E(){if(!m())return null;let o=document.cookie.split(";").map(e=>e.trim()).find(e=>e.startsWith(`${l}=`));if(!o)return null;let s=o.slice(l.length+1);if(!s)return null;try{let e=decodeURIComponent(s),t=JSON.parse(e);return!t||typeof t!="object"||!Array.isArray(t.order)?null:{order:t.order.filter(i=>typeof i=="string"&&i.length>0)}}catch{return null}}function _(o){if(!m())return;let s=o.order.slice(0,24),e=JSON.stringify({order:s}),t=new Date;t.setFullYear(t.getFullYear()+1),document.cookie=`${l}=${encodeURIComponent(e)}; Path=/; SameSite=Lax; Expires=${t.toUTCString()}`}function M(o){if(!o||typeof o!="string")return;let e=E()?.order.filter(t=>t!==o)??[];_({order:[o,...e]})}var u=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon">
1
+ var p="agentpreferences";function m(){return typeof document<"u"}function T(){if(!m())return null;let o=document.cookie.split(";").map(e=>e.trim()).find(e=>e.startsWith(`${p}=`));if(!o)return null;let n=o.slice(p.length+1);if(!n)return null;try{let e=decodeURIComponent(n),t=JSON.parse(e);return!t||typeof t!="object"||!Array.isArray(t.order)?null:{order:t.order.filter(i=>typeof i=="string"&&i.length>0)}}catch{return null}}function E(o){if(!m())return;let n=o.order.slice(0,24),e=JSON.stringify({order:n}),t=new Date;t.setFullYear(t.getFullYear()+1),document.cookie=`${p}=${encodeURIComponent(e)}; Path=/; SameSite=Lax; Expires=${t.toUTCString()}`}function A(o){if(!o||typeof o!="string")return;let e=T()?.order.filter(t=>t!==o)??[];E({order:[o,...e]})}var u=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon">
2
2
  <!-- Wing helmet -->
3
3
  <path d="M12 2C8.5 2 6 4.5 6 7c0 1.5.5 2.8 1.5 3.8L6 14h12l-1.5-3.2C17.5 9.8 18 8.5 18 7c0-2.5-2.5-5-6-5z" fill="currentColor" opacity="0.2"/>
4
4
  <path d="M12 2C8.5 2 6 4.5 6 7c0 1.5.5 2.8 1.5 3.8L6 14h12l-1.5-3.2C17.5 9.8 18 8.5 18 7c0-2.5-2.5-5-6-5z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
@@ -28,9 +28,9 @@ var l="agentpreferences";function m(){return typeof document<"u"}function E(){if
28
28
  <path d="M3 10V3.5A1.5 1.5 0 014.5 2H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
29
29
  </svg>`,g=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon-sm">
30
30
  <path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
31
- </svg>`;var v=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon-sm">
31
+ </svg>`;var f=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon-sm">
32
32
  <path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
33
- </svg>`;var d="#2B8CFF",p="#1E7AEB",S="#186BD4",L="43, 140, 255",f="#8FA3E8",P="#7B91DC",B="#6B82CC",$="143, 163, 232",c={branded:{bg:d,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#0F172A",muted:"#64748B",primary:d,primaryText:"#FFFFFF",codeBg:"#0F172A",codeText:"#F1F5F9"},"branded-alt":{bg:f,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#0F172A",muted:"#64748B",primary:f,primaryText:"#FFFFFF",codeBg:"#0F172A",codeText:"#F1F5F9"},dark:{bg:"#141C2E",text:"#F1F5F9",border:"#2A3F5C",surface:"#1A2740",surfaceText:"#F1F5F9",muted:"#94A3B8",primary:d,primaryText:"#FFFFFF",codeBg:"#0A0E18",codeText:"#F1F5F9"},light:{bg:"#FFFFFF",text:"#0F172A",border:"#CBD5E1",surface:"#F8FAFC",surfaceText:"#0F172A",muted:"#64748B",primary:d,primaryText:"#FFFFFF",codeBg:"#0F172A",codeText:"#F1F5F9"}};function n(o){return o!=="system"?c[o]:typeof window>"u"?c.light:window.matchMedia("(prefers-color-scheme: dark)").matches?c.dark:c.light}function y(o){return`
33
+ </svg>`;var d="#2B8CFF",l="#1E7AEB",O="#186BD4",S="43, 140, 255",v="#8FA3E8",L="#7B91DC",B="#6B82CC",P="143, 163, 232",c={branded:{bg:d,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#0F172A",muted:"#64748B",primary:d,primaryText:"#FFFFFF",codeBg:"#0F172A",codeText:"#F1F5F9"},"branded-alt":{bg:v,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#0F172A",muted:"#64748B",primary:v,primaryText:"#FFFFFF",codeBg:"#0F172A",codeText:"#F1F5F9"},dark:{bg:"#141C2E",text:"#F1F5F9",border:"#2A3F5C",surface:"#1A2740",surfaceText:"#F1F5F9",muted:"#94A3B8",primary:d,primaryText:"#FFFFFF",codeBg:"#0A0E18",codeText:"#F1F5F9"},light:{bg:"#FFFFFF",text:"#0F172A",border:"#CBD5E1",surface:"#F8FAFC",surfaceText:"#0F172A",muted:"#64748B",primary:d,primaryText:"#FFFFFF",codeBg:"#0F172A",codeText:"#F1F5F9"}};function s(o){return o!=="system"?c[o]:typeof window>"u"?c.light:window.matchMedia("(prefers-color-scheme: dark)").matches?c.dark:c.light}function y(o){return`
34
34
  --hb-bg: ${o.bg};
35
35
  --hb-text: ${o.text};
36
36
  --hb-border: ${o.border};
@@ -41,7 +41,7 @@ var l="agentpreferences";function m(){return typeof document<"u"}function E(){if
41
41
  --hb-primary-text: ${o.primaryText};
42
42
  --hb-code-bg: ${o.codeBg};
43
43
  --hb-code-text: ${o.codeText};
44
- `}var N={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},H={sm:{height:"2rem",fontSize:"0.75rem",iconSize:"0.875rem",padding:"0 0.75rem",ccPadding:"0 0.5rem",gap:"0.375rem",radius:"0.375rem"},md:{height:"2.5rem",fontSize:"0.875rem",iconSize:"1.125rem",padding:"0 1rem",ccPadding:"0 0.75rem",gap:"0.5rem",radius:"0.5rem"},lg:{height:"3rem",fontSize:"1rem",iconSize:"1.375rem",padding:"0 1.25rem",ccPadding:"0 1rem",gap:"0.625rem",radius:"0.625rem"}};var A=`
44
+ `}var N={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},$={sm:{height:"2rem",fontSize:"0.75rem",iconSize:"0.875rem",padding:"0 0.75rem",ccPadding:"0 0.5rem",gap:"0.375rem",radius:"0.375rem"},md:{height:"2.5rem",fontSize:"0.875rem",iconSize:"1.125rem",padding:"0 1rem",ccPadding:"0 0.75rem",gap:"0.5rem",radius:"0.5rem"},lg:{height:"3rem",fontSize:"1rem",iconSize:"1.375rem",padding:"0 1.25rem",ccPadding:"0 1rem",gap:"0.625rem",radius:"0.625rem"}};var _=`
45
45
  :host {
46
46
  position: fixed;
47
47
  inset: 0;
@@ -220,7 +220,7 @@ var l="agentpreferences";function m(){return typeof document<"u"}function E(){if
220
220
  white-space: nowrap;
221
221
  }
222
222
 
223
- .hb-copy-btn:hover { background: ${p}; }
223
+ .hb-copy-btn:hover { background: ${l}; }
224
224
  .hb-copy-btn:active { transform: scale(0.96); }
225
225
  .hb-copy-btn svg { width: 14px; height: 14px; }
226
226
 
@@ -253,7 +253,7 @@ var l="agentpreferences";function m(){return typeof document<"u"}function E(){if
253
253
  transition: background 0.15s, transform 0.1s;
254
254
  }
255
255
 
256
- .hb-action-btn:hover { background: ${p}; }
256
+ .hb-action-btn:hover { background: ${l}; }
257
257
  .hb-action-btn:active { transform: scale(0.98); }
258
258
  .hb-action-btn svg { width: 16px; height: 16px; }
259
259
 
@@ -318,21 +318,21 @@ var l="agentpreferences";function m(){return typeof document<"u"}function E(){if
318
318
  @supports (padding: env(safe-area-inset-bottom)) {
319
319
  .hb-dialog-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
320
320
  }
321
- `,h=class extends HTMLElement{constructor(){super();this._mqCleanup=null;this.attachShadow({mode:"open"})}set options(e){this._options=e,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:e}=this._options;if(e==="dark"||e==="light")return n(e);let t=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(e==="system")return t?n("dark"):n("light");let r=t?n("dark"):n("light"),i=n(e);return{...r,primary:i.primary,primaryText:i.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:e,title:t,description:r,command:i,fullCommand:k,skillUrl:w}=this._options,C=this.resolvePopupTokens(),F=e==="hermes"?u:x,b=e==="hermes",T=k||i;this.shadowRoot.innerHTML=`
322
- <style>${A}</style>
323
- <div style="${y(C)}">
321
+ `,h=class extends HTMLElement{constructor(){super();this._mqCleanup=null;this.attachShadow({mode:"open"})}set options(e){this._options=e,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:e}=this._options;if(e==="dark"||e==="light")return s(e);let t=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(e==="system")return t?s("dark"):s("light");let r=t?s("dark"):s("light"),i=s(e);return{...r,primary:i.primary,primaryText:i.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:e,title:t,description:r,command:i,fullCommand:k}=this._options,w=this.resolvePopupTokens(),C=e==="hermes"?u:x,b=e==="hermes",F=k||i;this.shadowRoot.innerHTML=`
322
+ <style>${_}</style>
323
+ <div style="${y(w)}">
324
324
  <div class="hb-backdrop" data-action="close"></div>
325
325
  <div class="hb-dialog" role="dialog" aria-modal="true" aria-labelledby="hb-dialog-title">
326
326
  <div class="hb-dialog-header">
327
- <div class="hb-dialog-header-icon">${F}</div>
327
+ <div class="hb-dialog-header-icon">${C}</div>
328
328
  <div class="hb-dialog-header-text">
329
329
  <div class="hb-dialog-title" id="hb-dialog-title">${t}</div>
330
330
  ${r?`<div class="hb-dialog-description">${r}</div>`:""}
331
331
  </div>
332
- <button class="hb-dialog-close" data-action="close" aria-label="Close">${v}</button>
332
+ <button class="hb-dialog-close" data-action="close" aria-label="Close">${f}</button>
333
333
  </div>
334
334
  <div class="hb-dialog-body">
335
- ${b?this.renderHermesTerminalBody(T):this.renderHermesSkillBody(i,w)}
335
+ ${b?this.renderHermesTerminalBody(F):this.renderHermesSkillBody(i)}
336
336
  </div>
337
337
  <div class="hb-dialog-footer">
338
338
  ${b?`
@@ -360,39 +360,22 @@ var l="agentpreferences";function m(){return typeof document<"u"}function E(){if
360
360
  <div class="hb-step-label">Paste and run in your terminal</div>
361
361
  </div>
362
362
  </div>
363
- `}renderHermesSkillBody(e,t){let r="";if(t){let i=`Install the skill from ${t} and run ${e}`;r+=`
364
- <div class="hb-step">
365
- <div class="hb-step-num">1</div>
366
- <div class="hb-step-content">
367
- <div class="hb-step-label">Copy this prompt to your clipboard</div>
368
- <div class="hb-code-block">
369
- <div class="hb-code-text">${this.escapeHtml(i)}</div>
370
- <button class="hb-copy-btn" data-action="copy" data-command="${this.escapeAttr(i)}">${a}<span>Copy</span></button>
371
- </div>
372
- </div>
373
- </div>
374
- <div class="hb-step">
375
- <div class="hb-step-num">2</div>
376
- <div class="hb-step-content">
377
- <div class="hb-step-label">Paste into a Hermes session \u2014 the agent will fetch the skill and set it up for you</div>
378
- </div>
379
- </div>
380
- `}else r+=`
381
- <div class="hb-step">
382
- <div class="hb-step-num">1</div>
383
- <div class="hb-step-content">
384
- <div class="hb-step-label">Copy this command to your clipboard</div>
385
- <div class="hb-code-block">
386
- <div class="hb-code-text">${this.escapeHtml(e)}</div>
387
- <button class="hb-copy-btn" data-action="copy" data-command="${this.escapeAttr(e)}">${a}<span>Copy</span></button>
388
- </div>
363
+ `}renderHermesSkillBody(e){return`
364
+ <div class="hb-step">
365
+ <div class="hb-step-num">1</div>
366
+ <div class="hb-step-content">
367
+ <div class="hb-step-label">Copy this command to your clipboard</div>
368
+ <div class="hb-code-block">
369
+ <div class="hb-code-text">${this.escapeHtml(e)}</div>
370
+ <button class="hb-copy-btn" data-action="copy" data-command="${this.escapeAttr(e)}">${a}<span>Copy</span></button>
389
371
  </div>
390
372
  </div>
391
- <div class="hb-step">
392
- <div class="hb-step-num">2</div>
393
- <div class="hb-step-content">
394
- <div class="hb-step-label">Paste and send in your Hermes session</div>
395
- </div>
373
+ </div>
374
+ <div class="hb-step">
375
+ <div class="hb-step-num">2</div>
376
+ <div class="hb-step-content">
377
+ <div class="hb-step-label">Paste and send in your Hermes session</div>
396
378
  </div>
397
- `;return r}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",e=>{let t=e.target.closest("[data-action]");if(!t)return;let r=t.dataset.action;if(r==="close")this.close();else if(r==="copy"){let i=t.dataset.command||"";this.copyToClipboard(i,t)}}),this.shadowRoot.addEventListener("keydown",e=>{e.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let e=this._options.theme;if(!(e==="system"||e==="branded"||e==="branded-alt")||typeof window>"u")return;let r=window.matchMedia("(prefers-color-scheme: dark)"),i=()=>this.render();r.addEventListener("change",i),this._mqCleanup=()=>r.removeEventListener("change",i)}async copyToClipboard(e,t){try{await navigator.clipboard.writeText(e);let r=t.querySelector("span"),i=t;t.setAttribute("data-copied","true"),r&&(r.textContent="Copied!"),i.innerHTML=`${g}<span>Copied!</span>`,this._options.onCopy?.(e),setTimeout(()=>{t.setAttribute("data-copied","false"),i.innerHTML=`${a}<span>Copy</span>`},2e3)}catch{let r=document.createElement("textarea");r.value=e,r.style.position="fixed",r.style.opacity="0",document.body.appendChild(r),r.select(),document.execCommand("copy"),document.body.removeChild(r),this._options.onCopy?.(e)}}close(){let e=this.shadowRoot?.querySelector(".hb-dialog"),t=this.shadowRoot?.querySelector(".hb-backdrop");e&&(e.style.animation="hb-scale-in 0.15s ease-in reverse"),t&&(t.style.animation="hb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}escapeAttr(e){return e.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("hermes-popup-dialog")&&customElements.define("hermes-popup-dialog",h);function V(o){let s=document.createElement("hermes-popup-dialog");return s.options=o,document.body.appendChild(s),s}export{M as a,u as b,x as c,d,p as e,S as f,L as g,f as h,P as i,B as j,$ as k,n as l,y as m,N as n,H as o,V as p};
398
- //# sourceMappingURL=chunk-GK6K44OK.mjs.map
379
+ </div>
380
+ `}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",e=>{let t=e.target.closest("[data-action]");if(!t)return;let r=t.dataset.action;if(r==="close")this.close();else if(r==="copy"){let i=t.dataset.command||"";this.copyToClipboard(i,t)}}),this.shadowRoot.addEventListener("keydown",e=>{e.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let e=this._options.theme;if(!(e==="system"||e==="branded"||e==="branded-alt")||typeof window>"u")return;let r=window.matchMedia("(prefers-color-scheme: dark)"),i=()=>this.render();r.addEventListener("change",i),this._mqCleanup=()=>r.removeEventListener("change",i)}async copyToClipboard(e,t){try{await navigator.clipboard.writeText(e);let r=t.querySelector("span"),i=t;t.setAttribute("data-copied","true"),r&&(r.textContent="Copied!"),i.innerHTML=`${g}<span>Copied!</span>`,this._options.onCopy?.(e),setTimeout(()=>{t.setAttribute("data-copied","false"),i.innerHTML=`${a}<span>Copy</span>`},2e3)}catch{let r=document.createElement("textarea");r.value=e,r.style.position="fixed",r.style.opacity="0",document.body.appendChild(r),r.select(),document.execCommand("copy"),document.body.removeChild(r),this._options.onCopy?.(e)}}close(){let e=this.shadowRoot?.querySelector(".hb-dialog"),t=this.shadowRoot?.querySelector(".hb-backdrop");e&&(e.style.animation="hb-scale-in 0.15s ease-in reverse"),t&&(t.style.animation="hb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}escapeAttr(e){return e.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("hermes-popup-dialog")&&customElements.define("hermes-popup-dialog",h);function D(o){let n=document.createElement("hermes-popup-dialog");return n.options=o,document.body.appendChild(n),n}export{A as a,u as b,x as c,d,l as e,O as f,S as g,v as h,L as i,B as j,P as k,s as l,y as m,N as n,$ as o,D as p};
381
+ //# sourceMappingURL=chunk-5UWHHBVU.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/agent-preferences.ts","../src/icons.ts","../src/themes.ts","../src/popup-dialog.ts"],"sourcesContent":["/**\n * Cross-site preference cookie for the agentbuttons family (same origin).\n * Name and JSON shape must match claudebuttons, clawbuttons, and agentbuttons.\n */\nexport const AGENT_PREFERENCES_COOKIE_NAME = 'agentpreferences';\n\nexport const MAX_AGENT_PREFERENCE_ENTRIES = 24;\n\nexport interface AgentPreferencesPayload {\n /** Most recently used agent ids first. */\n order: string[];\n}\n\nfunction isBrowser(): boolean {\n return typeof document !== 'undefined';\n}\n\nexport function readAgentPreferences(): AgentPreferencesPayload | null {\n if (!isBrowser()) return null;\n const match = document.cookie\n .split(';')\n .map((p) => p.trim())\n .find((p) => p.startsWith(`${AGENT_PREFERENCES_COOKIE_NAME}=`));\n if (!match) return null;\n const value = match.slice(AGENT_PREFERENCES_COOKIE_NAME.length + 1);\n if (!value) return null;\n try {\n const decoded = decodeURIComponent(value);\n const data = JSON.parse(decoded) as unknown;\n if (!data || typeof data !== 'object' || !Array.isArray((data as AgentPreferencesPayload).order)) {\n return null;\n }\n const order = (data as AgentPreferencesPayload).order.filter(\n (x): x is string => typeof x === 'string' && x.length > 0,\n );\n return { order };\n } catch {\n return null;\n }\n}\n\nexport function writeAgentPreferences(payload: AgentPreferencesPayload): void {\n if (!isBrowser()) return;\n const order = payload.order.slice(0, MAX_AGENT_PREFERENCE_ENTRIES);\n const json = JSON.stringify({ order });\n const expires = new Date();\n expires.setFullYear(expires.getFullYear() + 1);\n document.cookie = `${AGENT_PREFERENCES_COOKIE_NAME}=${encodeURIComponent(json)}; Path=/; SameSite=Lax; Expires=${expires.toUTCString()}`;\n}\n\n/** Move agentId to the front of the MRU list (call after a successful copy / engagement). */\nexport function recordAgentPreference(agentId: string): void {\n if (!agentId || typeof agentId !== 'string') return;\n const prev = readAgentPreferences();\n const base = prev?.order.filter((id) => id !== agentId) ?? [];\n writeAgentPreferences({ order: [agentId, ...base] });\n}\n","export const HERMES_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon\">\n <!-- Wing helmet -->\n <path d=\"M12 2C8.5 2 6 4.5 6 7c0 1.5.5 2.8 1.5 3.8L6 14h12l-1.5-3.2C17.5 9.8 18 8.5 18 7c0-2.5-2.5-5-6-5z\" fill=\"currentColor\" opacity=\"0.2\"/>\n <path d=\"M12 2C8.5 2 6 4.5 6 7c0 1.5.5 2.8 1.5 3.8L6 14h12l-1.5-3.2C17.5 9.8 18 8.5 18 7c0-2.5-2.5-5-6-5z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"/>\n <!-- Wings -->\n <path d=\"M6 6.5C4.5 5 2 5 2 7s1.5 3 3 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M18 6.5C19.5 5 22 5 22 7s-1.5 3-3 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Caduceus staff -->\n <line x1=\"12\" y1=\"14\" x2=\"12\" y2=\"22\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n <!-- Snakes -->\n <path d=\"M9.5 16c1.5 1 3.5 1 5 0\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" fill=\"none\"/>\n <path d=\"M9.5 19c1.5 1 3.5 1 5 0\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" fill=\"none\"/>\n <!-- Eye -->\n <circle cx=\"12\" cy=\"7.5\" r=\"1.5\" fill=\"currentColor\"/>\n</svg>`;\n\nexport const HERMES_SKILL_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon\">\n <!-- Brain/memory symbol -->\n <path d=\"M12 3C8 3 5 6 5 9c0 2 1 3.5 2 4.5V16a2 2 0 002 2h6a2 2 0 002-2v-2.5c1-1 2-2.5 2-4.5 0-3-3-6-7-6z\" fill=\"currentColor\" opacity=\"0.15\"/>\n <path d=\"M12 3C8 3 5 6 5 9c0 2 1 3.5 2 4.5V16a2 2 0 002 2h6a2 2 0 002-2v-2.5c1-1 2-2.5 2-4.5 0-3-3-6-7-6z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"/>\n <!-- Neural connections -->\n <path d=\"M9 9.5c0-1 .5-2 1.5-2.5M15 9.5c0-1-.5-2-1.5-2.5M10.5 11c.5.5 1.5 1 3 0\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" fill=\"none\"/>\n <!-- Growing roots -->\n <path d=\"M9 18v2M12 18v3M15 18v2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Sparkle -->\n <circle cx=\"8\" cy=\"6\" r=\"0.8\" fill=\"currentColor\"/>\n <circle cx=\"16\" cy=\"6\" r=\"0.8\" fill=\"currentColor\"/>\n</svg>`;\n\nexport const COPY_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <rect x=\"5\" y=\"5\" width=\"8\" height=\"8\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M3 10V3.5A1.5 1.5 0 014.5 2H10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n\nexport const CHECK_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <path d=\"M3 8.5l3.5 3.5L13 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>`;\n\nexport const DOWNLOAD_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <path d=\"M8 2v8m0 0l-3-3m3 3l3-3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3 12v1.5a1 1 0 001 1h8a1 1 0 001-1V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n\nexport const CLOSE_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <path d=\"M4 4l8 8m0-8l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n\nexport const TERMINAL_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <rect x=\"1\" y=\"2\" width=\"14\" height=\"12\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M4 6l3 2.5L4 11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9 11h3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n","import type { ThemeTokens, Theme } from './types';\n\n/** Electric blue aligned with [Hermes Agent](https://hermes-agent.nousresearch.com/) marketing */\nexport const BRAND_COLOR = '#2B8CFF';\nexport const BRAND_COLOR_HOVER = '#1E7AEB';\nexport const BRAND_COLOR_ACTIVE = '#186BD4';\n/** Comma-separated RGB for `rgba(..., α)` in component styles */\nexport const BRAND_RGB = '43, 140, 255';\n\n/** Periwinkle secondary (Hermes hero title tone) */\nexport const ALT_BRAND_COLOR = '#8FA3E8';\nexport const ALT_BRAND_COLOR_HOVER = '#7B91DC';\nexport const ALT_BRAND_COLOR_ACTIVE = '#6B82CC';\nexport const ALT_BRAND_RGB = '143, 163, 232';\n\nexport const themes: Record<Exclude<Theme, 'system'>, ThemeTokens> = {\n branded: {\n bg: BRAND_COLOR,\n text: '#FFFFFF',\n border: 'transparent',\n surface: '#FFFFFF',\n surfaceText: '#0F172A',\n muted: '#64748B',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0F172A',\n codeText: '#F1F5F9',\n },\n 'branded-alt': {\n bg: ALT_BRAND_COLOR,\n text: '#FFFFFF',\n border: 'transparent',\n surface: '#FFFFFF',\n surfaceText: '#0F172A',\n muted: '#64748B',\n primary: ALT_BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0F172A',\n codeText: '#F1F5F9',\n },\n dark: {\n bg: '#141C2E',\n text: '#F1F5F9',\n border: '#2A3F5C',\n surface: '#1A2740',\n surfaceText: '#F1F5F9',\n muted: '#94A3B8',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0A0E18',\n codeText: '#F1F5F9',\n },\n light: {\n bg: '#FFFFFF',\n text: '#0F172A',\n border: '#CBD5E1',\n surface: '#F8FAFC',\n surfaceText: '#0F172A',\n muted: '#64748B',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0F172A',\n codeText: '#F1F5F9',\n },\n};\n\nexport function resolveTheme(theme: Theme): ThemeTokens {\n if (theme !== 'system') return themes[theme];\n if (typeof window === 'undefined') return themes.light;\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? themes.dark\n : themes.light;\n}\n\nexport function themeToCSS(tokens: ThemeTokens): string {\n return `\n --hb-bg: ${tokens.bg};\n --hb-text: ${tokens.text};\n --hb-border: ${tokens.border};\n --hb-surface: ${tokens.surface};\n --hb-surface-text: ${tokens.surfaceText};\n --hb-muted: ${tokens.muted};\n --hb-primary: ${tokens.primary};\n --hb-primary-text: ${tokens.primaryText};\n --hb-code-bg: ${tokens.codeBg};\n --hb-code-text: ${tokens.codeText};\n `;\n}\n\nexport const SHAPE_MAP = {\n rounded: { sm: '0.375rem', md: '0.5rem', lg: '0.625rem' },\n pill: { sm: '999px', md: '999px', lg: '999px' },\n square: { sm: '0', md: '0', lg: '0' },\n} as const;\n\nexport const SIZE_MAP = {\n sm: { height: '2rem', fontSize: '0.75rem', iconSize: '0.875rem', padding: '0 0.75rem', ccPadding: '0 0.5rem', gap: '0.375rem', radius: '0.375rem' },\n md: { height: '2.5rem', fontSize: '0.875rem', iconSize: '1.125rem', padding: '0 1rem', ccPadding: '0 0.75rem', gap: '0.5rem', radius: '0.5rem' },\n lg: { height: '3rem', fontSize: '1rem', iconSize: '1.375rem', padding: '0 1.25rem', ccPadding: '0 1rem', gap: '0.625rem', radius: '0.625rem' },\n};\n","import type { PopupOptions, ThemeTokens } from './types';\nimport { HERMES_ICON, HERMES_SKILL_ICON, COPY_ICON, CHECK_ICON, CLOSE_ICON } from './icons';\nimport { resolveTheme, themeToCSS, BRAND_COLOR_HOVER } from './themes';\n\nconst POPUP_STYLES = `\n :host {\n position: fixed;\n inset: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n .hb-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n animation: hb-fade-in 0.15s ease-out;\n }\n\n .hb-dialog {\n position: relative;\n width: 90%;\n max-width: 460px;\n background: var(--hb-surface);\n color: var(--hb-surface-text);\n border-radius: 16px;\n box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--hb-border);\n overflow: hidden;\n animation: hb-scale-in 0.2s ease-out;\n }\n\n .hb-dialog-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--hb-border);\n }\n\n .hb-dialog-header-icon {\n width: 36px;\n height: 36px;\n color: var(--hb-primary);\n flex-shrink: 0;\n }\n\n .hb-dialog-header-text {\n flex: 1;\n min-width: 0;\n }\n\n .hb-dialog-title {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hb-surface-text);\n }\n\n .hb-dialog-description {\n font-size: 13px;\n color: var(--hb-muted);\n margin-top: 2px;\n line-height: 1.4;\n }\n\n .hb-dialog-close {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--hb-muted);\n cursor: pointer;\n border-radius: 8px;\n flex-shrink: 0;\n transition: background 0.15s, color 0.15s;\n }\n\n .hb-dialog-close:hover {\n background: var(--hb-border);\n color: var(--hb-surface-text);\n }\n\n .hb-dialog-close svg { width: 14px; height: 14px; }\n\n .hb-dialog-body { padding: 20px 24px; }\n\n .hb-step {\n display: flex;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .hb-step:last-child { margin-bottom: 0; }\n\n .hb-step-num {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: var(--hb-primary);\n color: var(--hb-primary-text);\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .hb-step-content {\n flex: 1;\n min-width: 0;\n }\n\n .hb-step-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--hb-surface-text);\n margin-bottom: 8px;\n line-height: 1.4;\n }\n\n .hb-code-block {\n display: flex;\n align-items: center;\n background: var(--hb-code-bg);\n color: var(--hb-code-text);\n border-radius: 10px;\n padding: 2px 2px 2px 14px;\n font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace;\n font-size: 13px;\n line-height: 1.5;\n gap: 8px;\n overflow: hidden;\n }\n\n .hb-code-text {\n flex: 1;\n overflow-x: auto;\n white-space: nowrap;\n padding: 10px 0;\n scrollbar-width: none;\n }\n\n .hb-code-text::-webkit-scrollbar { display: none; }\n\n .hb-code-prefix {\n color: var(--hb-muted);\n user-select: none;\n margin-right: 6px;\n }\n\n .hb-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 36px;\n min-width: 36px;\n padding: 0 12px;\n border: none;\n background: var(--hb-primary);\n color: var(--hb-primary-text);\n cursor: pointer;\n border-radius: 8px;\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n flex-shrink: 0;\n transition: background 0.15s, transform 0.1s;\n white-space: nowrap;\n }\n\n .hb-copy-btn:hover { background: ${BRAND_COLOR_HOVER}; }\n .hb-copy-btn:active { transform: scale(0.96); }\n .hb-copy-btn svg { width: 14px; height: 14px; }\n\n .hb-copy-btn[data-copied=\"true\"] {\n background: #16a34a;\n }\n\n .hb-dialog-footer {\n padding: 16px 24px 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .hb-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n height: 44px;\n border: none;\n background: var(--hb-primary);\n color: var(--hb-primary-text);\n cursor: pointer;\n border-radius: 10px;\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n transition: background 0.15s, transform 0.1s;\n }\n\n .hb-action-btn:hover { background: ${BRAND_COLOR_HOVER}; }\n .hb-action-btn:active { transform: scale(0.98); }\n .hb-action-btn svg { width: 16px; height: 16px; }\n\n .hb-hint {\n font-size: 12px;\n color: var(--hb-muted);\n text-align: center;\n line-height: 1.4;\n }\n\n .hb-hint kbd {\n display: inline-block;\n padding: 1px 5px;\n font-family: inherit;\n font-size: 11px;\n background: var(--hb-border);\n border-radius: 4px;\n border: 1px solid var(--hb-border);\n }\n\n @keyframes hb-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes hb-scale-in {\n from { opacity: 0; transform: scale(0.95) translateY(8px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n }\n\n @media (max-width: 480px) {\n .hb-dialog {\n width: 96%;\n max-width: none;\n border-radius: 14px;\n max-height: 90dvh;\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n .hb-dialog-header { padding: 16px 16px 12px; gap: 10px; }\n .hb-dialog-header-icon { width: 28px; height: 28px; }\n .hb-dialog-body { padding: 16px; }\n .hb-dialog-footer { padding: 12px 16px 16px; }\n\n .hb-step { gap: 10px; margin-bottom: 14px; }\n .hb-step-num { width: 22px; height: 22px; font-size: 11px; }\n .hb-step-label { font-size: 12px; margin-bottom: 6px; }\n\n .hb-code-block { font-size: 12px; padding: 2px 2px 2px 10px; border-radius: 8px; }\n .hb-copy-btn { height: 32px; padding: 0 10px; font-size: 11px; border-radius: 6px; }\n .hb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }\n .hb-hint { font-size: 11px; }\n }\n\n @media (max-width: 360px) {\n .hb-dialog { width: 100%; border-radius: 12px 12px 0 0; align-self: flex-end; }\n .hb-copy-btn span { display: none; }\n .hb-copy-btn { min-width: 32px; padding: 0 8px; }\n }\n\n @supports (padding: env(safe-area-inset-bottom)) {\n .hb-dialog-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }\n }\n`;\n\nexport class HermesPopupDialog extends HTMLElement {\n private _options!: PopupOptions;\n private _mqCleanup: (() => void) | null = null;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n set options(opts: PopupOptions) {\n this._options = opts;\n this.render();\n }\n\n get options() {\n return this._options;\n }\n\n disconnectedCallback() {\n this._mqCleanup?.();\n this._mqCleanup = null;\n }\n\n private resolvePopupTokens(): ThemeTokens {\n const { theme } = this._options;\n\n if (theme === 'dark' || theme === 'light') return resolveTheme(theme);\n\n const prefersDark = typeof window !== 'undefined'\n && window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n if (theme === 'system') {\n return prefersDark ? resolveTheme('dark') : resolveTheme('light');\n }\n\n const base = prefersDark ? resolveTheme('dark') : resolveTheme('light');\n const brand = resolveTheme(theme);\n return {\n ...base,\n primary: brand.primary,\n primaryText: brand.primaryText,\n };\n }\n\n private render() {\n if (!this.shadowRoot || !this._options) return;\n\n const { variant, title, description, command, fullCommand, skillUrl } = this._options;\n const tokens = this.resolvePopupTokens();\n const icon = variant === 'hermes' ? HERMES_ICON : HERMES_SKILL_ICON;\n\n const isHermesTerminal = variant === 'hermes';\n const displayCommand = fullCommand || command;\n\n this.shadowRoot.innerHTML = `\n <style>${POPUP_STYLES}</style>\n <div style=\"${themeToCSS(tokens)}\">\n <div class=\"hb-backdrop\" data-action=\"close\"></div>\n <div class=\"hb-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"hb-dialog-title\">\n <div class=\"hb-dialog-header\">\n <div class=\"hb-dialog-header-icon\">${icon}</div>\n <div class=\"hb-dialog-header-text\">\n <div class=\"hb-dialog-title\" id=\"hb-dialog-title\">${title}</div>\n ${description ? `<div class=\"hb-dialog-description\">${description}</div>` : ''}\n </div>\n <button class=\"hb-dialog-close\" data-action=\"close\" aria-label=\"Close\">${CLOSE_ICON}</button>\n </div>\n <div class=\"hb-dialog-body\">\n ${isHermesTerminal ? this.renderHermesTerminalBody(displayCommand) : this.renderHermesSkillBody(command, skillUrl)}\n </div>\n <div class=\"hb-dialog-footer\">\n ${isHermesTerminal ? `\n <div class=\"hb-hint\">Press <kbd>⌘</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>\n ` : `\n <div class=\"hb-hint\">Press <kbd>⌘</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Hermes session to run</div>\n `}\n </div>\n </div>\n </div>\n `;\n\n this.setupListeners();\n this.setupSystemThemeWatch();\n }\n\n private renderHermesTerminalBody(command: string): string {\n return `\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">1</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Copy this command to your clipboard</div>\n <div class=\"hb-code-block\">\n <div class=\"hb-code-text\"><span class=\"hb-code-prefix\">$</span>${this.escapeHtml(command)}</div>\n <button class=\"hb-copy-btn\" data-action=\"copy\" data-command=\"${this.escapeAttr(command)}\">${COPY_ICON}<span>Copy</span></button>\n </div>\n </div>\n </div>\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">2</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Paste and run in your terminal</div>\n </div>\n </div>\n `;\n }\n\n private renderHermesSkillBody(command: string, skillUrl?: string): string {\n let steps = '';\n\n if (skillUrl) {\n const fullPrompt = `Install the skill from ${skillUrl} and run ${command}`;\n steps += `\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">1</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Copy this prompt to your clipboard</div>\n <div class=\"hb-code-block\">\n <div class=\"hb-code-text\">${this.escapeHtml(fullPrompt)}</div>\n <button class=\"hb-copy-btn\" data-action=\"copy\" data-command=\"${this.escapeAttr(fullPrompt)}\">${COPY_ICON}<span>Copy</span></button>\n </div>\n </div>\n </div>\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">2</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Paste into a Hermes session — the agent will fetch the skill and set it up for you</div>\n </div>\n </div>\n `;\n } else {\n steps += `\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">1</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Copy this command to your clipboard</div>\n <div class=\"hb-code-block\">\n <div class=\"hb-code-text\">${this.escapeHtml(command)}</div>\n <button class=\"hb-copy-btn\" data-action=\"copy\" data-command=\"${this.escapeAttr(command)}\">${COPY_ICON}<span>Copy</span></button>\n </div>\n </div>\n </div>\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">2</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Paste and send in your Hermes session</div>\n </div>\n </div>\n `;\n }\n\n return steps;\n }\n\n private setupListeners() {\n if (!this.shadowRoot) return;\n\n this.shadowRoot.addEventListener('click', (e) => {\n const target = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;\n if (!target) return;\n\n const action = target.dataset.action;\n\n if (action === 'close') {\n this.close();\n } else if (action === 'copy') {\n const cmd = target.dataset.command || '';\n this.copyToClipboard(cmd, target);\n }\n });\n\n this.shadowRoot.addEventListener('keydown', (e) => {\n if ((e as KeyboardEvent).key === 'Escape') this.close();\n });\n }\n\n private setupSystemThemeWatch() {\n this._mqCleanup?.();\n this._mqCleanup = null;\n\n const theme = this._options.theme;\n const needsWatch = theme === 'system' || theme === 'branded' || theme === 'branded-alt';\n if (!needsWatch || typeof window === 'undefined') return;\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => this.render();\n mq.addEventListener('change', handler);\n this._mqCleanup = () => mq.removeEventListener('change', handler);\n }\n\n private async copyToClipboard(command: string, button: HTMLElement) {\n try {\n await navigator.clipboard.writeText(command);\n const label = button.querySelector('span');\n const iconContainer = button;\n\n button.setAttribute('data-copied', 'true');\n if (label) label.textContent = 'Copied!';\n iconContainer.innerHTML = `${CHECK_ICON}<span>Copied!</span>`;\n\n this._options.onCopy?.(command);\n\n setTimeout(() => {\n button.setAttribute('data-copied', 'false');\n iconContainer.innerHTML = `${COPY_ICON}<span>Copy</span>`;\n }, 2000);\n } catch {\n const textarea = document.createElement('textarea');\n textarea.value = command;\n textarea.style.position = 'fixed';\n textarea.style.opacity = '0';\n document.body.appendChild(textarea);\n textarea.select();\n document.execCommand('copy');\n document.body.removeChild(textarea);\n\n this._options.onCopy?.(command);\n }\n }\n\n close() {\n const dialog = this.shadowRoot?.querySelector('.hb-dialog') as HTMLElement;\n const backdrop = this.shadowRoot?.querySelector('.hb-backdrop') as HTMLElement;\n\n if (dialog) {\n dialog.style.animation = 'hb-scale-in 0.15s ease-in reverse';\n }\n if (backdrop) {\n backdrop.style.animation = 'hb-fade-in 0.15s ease-in reverse';\n }\n\n setTimeout(() => {\n this._options.onClose?.();\n this.remove();\n }, 140);\n }\n\n private escapeHtml(str: string): string {\n const div = document.createElement('div');\n div.textContent = str;\n return div.innerHTML;\n }\n\n private escapeAttr(str: string): string {\n return str.replace(/\"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n }\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hermes-popup-dialog')) {\n customElements.define('hermes-popup-dialog', HermesPopupDialog);\n}\n\nexport function showPopup(options: PopupOptions): HermesPopupDialog {\n const popup = document.createElement('hermes-popup-dialog') as HermesPopupDialog;\n popup.options = options;\n document.body.appendChild(popup);\n return popup;\n}\n"],"mappings":"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","names":["AGENT_PREFERENCES_COOKIE_NAME","isBrowser","readAgentPreferences","match","p","AGENT_PREFERENCES_COOKIE_NAME","value","decoded","data","x","writeAgentPreferences","payload","order","json","expires","recordAgentPreference","agentId","base","id","HERMES_ICON","HERMES_SKILL_ICON","COPY_ICON","CHECK_ICON","CLOSE_ICON","BRAND_COLOR","BRAND_COLOR_HOVER","BRAND_COLOR_ACTIVE","BRAND_RGB","ALT_BRAND_COLOR","ALT_BRAND_COLOR_HOVER","ALT_BRAND_COLOR_ACTIVE","ALT_BRAND_RGB","themes","resolveTheme","theme","themeToCSS","tokens","SHAPE_MAP","SIZE_MAP","POPUP_STYLES","BRAND_COLOR_HOVER","HermesPopupDialog","opts","theme","resolveTheme","prefersDark","base","brand","variant","title","description","command","fullCommand","skillUrl","tokens","icon","HERMES_ICON","HERMES_SKILL_ICON","isHermesTerminal","displayCommand","themeToCSS","CLOSE_ICON","COPY_ICON","steps","fullPrompt","target","action","cmd","mq","handler","button","label","iconContainer","CHECK_ICON","textarea","dialog","backdrop","str","div","showPopup","options","popup"]}
1
+ {"version":3,"sources":["../src/agent-preferences.ts","../src/icons.ts","../src/themes.ts","../src/popup-dialog.ts"],"sourcesContent":["/**\n * Cross-site preference cookie for the agentbuttons family (same origin).\n * Name and JSON shape must match claudebuttons, clawbuttons, and agentbuttons.\n */\nexport const AGENT_PREFERENCES_COOKIE_NAME = 'agentpreferences';\n\nexport const MAX_AGENT_PREFERENCE_ENTRIES = 24;\n\nexport interface AgentPreferencesPayload {\n /** Most recently used agent ids first. */\n order: string[];\n}\n\nfunction isBrowser(): boolean {\n return typeof document !== 'undefined';\n}\n\nexport function readAgentPreferences(): AgentPreferencesPayload | null {\n if (!isBrowser()) return null;\n const match = document.cookie\n .split(';')\n .map((p) => p.trim())\n .find((p) => p.startsWith(`${AGENT_PREFERENCES_COOKIE_NAME}=`));\n if (!match) return null;\n const value = match.slice(AGENT_PREFERENCES_COOKIE_NAME.length + 1);\n if (!value) return null;\n try {\n const decoded = decodeURIComponent(value);\n const data = JSON.parse(decoded) as unknown;\n if (!data || typeof data !== 'object' || !Array.isArray((data as AgentPreferencesPayload).order)) {\n return null;\n }\n const order = (data as AgentPreferencesPayload).order.filter(\n (x): x is string => typeof x === 'string' && x.length > 0,\n );\n return { order };\n } catch {\n return null;\n }\n}\n\nexport function writeAgentPreferences(payload: AgentPreferencesPayload): void {\n if (!isBrowser()) return;\n const order = payload.order.slice(0, MAX_AGENT_PREFERENCE_ENTRIES);\n const json = JSON.stringify({ order });\n const expires = new Date();\n expires.setFullYear(expires.getFullYear() + 1);\n document.cookie = `${AGENT_PREFERENCES_COOKIE_NAME}=${encodeURIComponent(json)}; Path=/; SameSite=Lax; Expires=${expires.toUTCString()}`;\n}\n\n/** Move agentId to the front of the MRU list (call after a successful copy / engagement). */\nexport function recordAgentPreference(agentId: string): void {\n if (!agentId || typeof agentId !== 'string') return;\n const prev = readAgentPreferences();\n const base = prev?.order.filter((id) => id !== agentId) ?? [];\n writeAgentPreferences({ order: [agentId, ...base] });\n}\n","export const HERMES_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon\">\n <!-- Wing helmet -->\n <path d=\"M12 2C8.5 2 6 4.5 6 7c0 1.5.5 2.8 1.5 3.8L6 14h12l-1.5-3.2C17.5 9.8 18 8.5 18 7c0-2.5-2.5-5-6-5z\" fill=\"currentColor\" opacity=\"0.2\"/>\n <path d=\"M12 2C8.5 2 6 4.5 6 7c0 1.5.5 2.8 1.5 3.8L6 14h12l-1.5-3.2C17.5 9.8 18 8.5 18 7c0-2.5-2.5-5-6-5z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"/>\n <!-- Wings -->\n <path d=\"M6 6.5C4.5 5 2 5 2 7s1.5 3 3 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M18 6.5C19.5 5 22 5 22 7s-1.5 3-3 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Caduceus staff -->\n <line x1=\"12\" y1=\"14\" x2=\"12\" y2=\"22\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n <!-- Snakes -->\n <path d=\"M9.5 16c1.5 1 3.5 1 5 0\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" fill=\"none\"/>\n <path d=\"M9.5 19c1.5 1 3.5 1 5 0\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" fill=\"none\"/>\n <!-- Eye -->\n <circle cx=\"12\" cy=\"7.5\" r=\"1.5\" fill=\"currentColor\"/>\n</svg>`;\n\nexport const HERMES_SKILL_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon\">\n <!-- Brain/memory symbol -->\n <path d=\"M12 3C8 3 5 6 5 9c0 2 1 3.5 2 4.5V16a2 2 0 002 2h6a2 2 0 002-2v-2.5c1-1 2-2.5 2-4.5 0-3-3-6-7-6z\" fill=\"currentColor\" opacity=\"0.15\"/>\n <path d=\"M12 3C8 3 5 6 5 9c0 2 1 3.5 2 4.5V16a2 2 0 002 2h6a2 2 0 002-2v-2.5c1-1 2-2.5 2-4.5 0-3-3-6-7-6z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"/>\n <!-- Neural connections -->\n <path d=\"M9 9.5c0-1 .5-2 1.5-2.5M15 9.5c0-1-.5-2-1.5-2.5M10.5 11c.5.5 1.5 1 3 0\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" fill=\"none\"/>\n <!-- Growing roots -->\n <path d=\"M9 18v2M12 18v3M15 18v2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Sparkle -->\n <circle cx=\"8\" cy=\"6\" r=\"0.8\" fill=\"currentColor\"/>\n <circle cx=\"16\" cy=\"6\" r=\"0.8\" fill=\"currentColor\"/>\n</svg>`;\n\nexport const COPY_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <rect x=\"5\" y=\"5\" width=\"8\" height=\"8\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M3 10V3.5A1.5 1.5 0 014.5 2H10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n\nexport const CHECK_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <path d=\"M3 8.5l3.5 3.5L13 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>`;\n\nexport const DOWNLOAD_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <path d=\"M8 2v8m0 0l-3-3m3 3l3-3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3 12v1.5a1 1 0 001 1h8a1 1 0 001-1V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n\nexport const CLOSE_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <path d=\"M4 4l8 8m0-8l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n\nexport const TERMINAL_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"hb-icon-sm\">\n <rect x=\"1\" y=\"2\" width=\"14\" height=\"12\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M4 6l3 2.5L4 11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9 11h3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n","import type { ThemeTokens, Theme } from './types';\n\n/** Electric blue aligned with [Hermes Agent](https://hermes-agent.nousresearch.com/) marketing */\nexport const BRAND_COLOR = '#2B8CFF';\nexport const BRAND_COLOR_HOVER = '#1E7AEB';\nexport const BRAND_COLOR_ACTIVE = '#186BD4';\n/** Comma-separated RGB for `rgba(..., α)` in component styles */\nexport const BRAND_RGB = '43, 140, 255';\n\n/** Periwinkle secondary (Hermes hero title tone) */\nexport const ALT_BRAND_COLOR = '#8FA3E8';\nexport const ALT_BRAND_COLOR_HOVER = '#7B91DC';\nexport const ALT_BRAND_COLOR_ACTIVE = '#6B82CC';\nexport const ALT_BRAND_RGB = '143, 163, 232';\n\nexport const themes: Record<Exclude<Theme, 'system'>, ThemeTokens> = {\n branded: {\n bg: BRAND_COLOR,\n text: '#FFFFFF',\n border: 'transparent',\n surface: '#FFFFFF',\n surfaceText: '#0F172A',\n muted: '#64748B',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0F172A',\n codeText: '#F1F5F9',\n },\n 'branded-alt': {\n bg: ALT_BRAND_COLOR,\n text: '#FFFFFF',\n border: 'transparent',\n surface: '#FFFFFF',\n surfaceText: '#0F172A',\n muted: '#64748B',\n primary: ALT_BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0F172A',\n codeText: '#F1F5F9',\n },\n dark: {\n bg: '#141C2E',\n text: '#F1F5F9',\n border: '#2A3F5C',\n surface: '#1A2740',\n surfaceText: '#F1F5F9',\n muted: '#94A3B8',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0A0E18',\n codeText: '#F1F5F9',\n },\n light: {\n bg: '#FFFFFF',\n text: '#0F172A',\n border: '#CBD5E1',\n surface: '#F8FAFC',\n surfaceText: '#0F172A',\n muted: '#64748B',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0F172A',\n codeText: '#F1F5F9',\n },\n};\n\nexport function resolveTheme(theme: Theme): ThemeTokens {\n if (theme !== 'system') return themes[theme];\n if (typeof window === 'undefined') return themes.light;\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? themes.dark\n : themes.light;\n}\n\nexport function themeToCSS(tokens: ThemeTokens): string {\n return `\n --hb-bg: ${tokens.bg};\n --hb-text: ${tokens.text};\n --hb-border: ${tokens.border};\n --hb-surface: ${tokens.surface};\n --hb-surface-text: ${tokens.surfaceText};\n --hb-muted: ${tokens.muted};\n --hb-primary: ${tokens.primary};\n --hb-primary-text: ${tokens.primaryText};\n --hb-code-bg: ${tokens.codeBg};\n --hb-code-text: ${tokens.codeText};\n `;\n}\n\nexport const SHAPE_MAP = {\n rounded: { sm: '0.375rem', md: '0.5rem', lg: '0.625rem' },\n pill: { sm: '999px', md: '999px', lg: '999px' },\n square: { sm: '0', md: '0', lg: '0' },\n} as const;\n\nexport const SIZE_MAP = {\n sm: { height: '2rem', fontSize: '0.75rem', iconSize: '0.875rem', padding: '0 0.75rem', ccPadding: '0 0.5rem', gap: '0.375rem', radius: '0.375rem' },\n md: { height: '2.5rem', fontSize: '0.875rem', iconSize: '1.125rem', padding: '0 1rem', ccPadding: '0 0.75rem', gap: '0.5rem', radius: '0.5rem' },\n lg: { height: '3rem', fontSize: '1rem', iconSize: '1.375rem', padding: '0 1.25rem', ccPadding: '0 1rem', gap: '0.625rem', radius: '0.625rem' },\n};\n","import type { PopupOptions, ThemeTokens } from './types';\nimport { HERMES_ICON, HERMES_SKILL_ICON, COPY_ICON, CHECK_ICON, CLOSE_ICON } from './icons';\nimport { resolveTheme, themeToCSS, BRAND_COLOR_HOVER } from './themes';\n\nconst POPUP_STYLES = `\n :host {\n position: fixed;\n inset: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n .hb-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n animation: hb-fade-in 0.15s ease-out;\n }\n\n .hb-dialog {\n position: relative;\n width: 90%;\n max-width: 460px;\n background: var(--hb-surface);\n color: var(--hb-surface-text);\n border-radius: 16px;\n box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--hb-border);\n overflow: hidden;\n animation: hb-scale-in 0.2s ease-out;\n }\n\n .hb-dialog-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--hb-border);\n }\n\n .hb-dialog-header-icon {\n width: 36px;\n height: 36px;\n color: var(--hb-primary);\n flex-shrink: 0;\n }\n\n .hb-dialog-header-text {\n flex: 1;\n min-width: 0;\n }\n\n .hb-dialog-title {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hb-surface-text);\n }\n\n .hb-dialog-description {\n font-size: 13px;\n color: var(--hb-muted);\n margin-top: 2px;\n line-height: 1.4;\n }\n\n .hb-dialog-close {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--hb-muted);\n cursor: pointer;\n border-radius: 8px;\n flex-shrink: 0;\n transition: background 0.15s, color 0.15s;\n }\n\n .hb-dialog-close:hover {\n background: var(--hb-border);\n color: var(--hb-surface-text);\n }\n\n .hb-dialog-close svg { width: 14px; height: 14px; }\n\n .hb-dialog-body { padding: 20px 24px; }\n\n .hb-step {\n display: flex;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .hb-step:last-child { margin-bottom: 0; }\n\n .hb-step-num {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: var(--hb-primary);\n color: var(--hb-primary-text);\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .hb-step-content {\n flex: 1;\n min-width: 0;\n }\n\n .hb-step-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--hb-surface-text);\n margin-bottom: 8px;\n line-height: 1.4;\n }\n\n .hb-code-block {\n display: flex;\n align-items: center;\n background: var(--hb-code-bg);\n color: var(--hb-code-text);\n border-radius: 10px;\n padding: 2px 2px 2px 14px;\n font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace;\n font-size: 13px;\n line-height: 1.5;\n gap: 8px;\n overflow: hidden;\n }\n\n .hb-code-text {\n flex: 1;\n overflow-x: auto;\n white-space: nowrap;\n padding: 10px 0;\n scrollbar-width: none;\n }\n\n .hb-code-text::-webkit-scrollbar { display: none; }\n\n .hb-code-prefix {\n color: var(--hb-muted);\n user-select: none;\n margin-right: 6px;\n }\n\n .hb-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 36px;\n min-width: 36px;\n padding: 0 12px;\n border: none;\n background: var(--hb-primary);\n color: var(--hb-primary-text);\n cursor: pointer;\n border-radius: 8px;\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n flex-shrink: 0;\n transition: background 0.15s, transform 0.1s;\n white-space: nowrap;\n }\n\n .hb-copy-btn:hover { background: ${BRAND_COLOR_HOVER}; }\n .hb-copy-btn:active { transform: scale(0.96); }\n .hb-copy-btn svg { width: 14px; height: 14px; }\n\n .hb-copy-btn[data-copied=\"true\"] {\n background: #16a34a;\n }\n\n .hb-dialog-footer {\n padding: 16px 24px 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .hb-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n height: 44px;\n border: none;\n background: var(--hb-primary);\n color: var(--hb-primary-text);\n cursor: pointer;\n border-radius: 10px;\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n transition: background 0.15s, transform 0.1s;\n }\n\n .hb-action-btn:hover { background: ${BRAND_COLOR_HOVER}; }\n .hb-action-btn:active { transform: scale(0.98); }\n .hb-action-btn svg { width: 16px; height: 16px; }\n\n .hb-hint {\n font-size: 12px;\n color: var(--hb-muted);\n text-align: center;\n line-height: 1.4;\n }\n\n .hb-hint kbd {\n display: inline-block;\n padding: 1px 5px;\n font-family: inherit;\n font-size: 11px;\n background: var(--hb-border);\n border-radius: 4px;\n border: 1px solid var(--hb-border);\n }\n\n @keyframes hb-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes hb-scale-in {\n from { opacity: 0; transform: scale(0.95) translateY(8px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n }\n\n @media (max-width: 480px) {\n .hb-dialog {\n width: 96%;\n max-width: none;\n border-radius: 14px;\n max-height: 90dvh;\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n .hb-dialog-header { padding: 16px 16px 12px; gap: 10px; }\n .hb-dialog-header-icon { width: 28px; height: 28px; }\n .hb-dialog-body { padding: 16px; }\n .hb-dialog-footer { padding: 12px 16px 16px; }\n\n .hb-step { gap: 10px; margin-bottom: 14px; }\n .hb-step-num { width: 22px; height: 22px; font-size: 11px; }\n .hb-step-label { font-size: 12px; margin-bottom: 6px; }\n\n .hb-code-block { font-size: 12px; padding: 2px 2px 2px 10px; border-radius: 8px; }\n .hb-copy-btn { height: 32px; padding: 0 10px; font-size: 11px; border-radius: 6px; }\n .hb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }\n .hb-hint { font-size: 11px; }\n }\n\n @media (max-width: 360px) {\n .hb-dialog { width: 100%; border-radius: 12px 12px 0 0; align-self: flex-end; }\n .hb-copy-btn span { display: none; }\n .hb-copy-btn { min-width: 32px; padding: 0 8px; }\n }\n\n @supports (padding: env(safe-area-inset-bottom)) {\n .hb-dialog-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }\n }\n`;\n\nexport class HermesPopupDialog extends HTMLElement {\n private _options!: PopupOptions;\n private _mqCleanup: (() => void) | null = null;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n set options(opts: PopupOptions) {\n this._options = opts;\n this.render();\n }\n\n get options() {\n return this._options;\n }\n\n disconnectedCallback() {\n this._mqCleanup?.();\n this._mqCleanup = null;\n }\n\n private resolvePopupTokens(): ThemeTokens {\n const { theme } = this._options;\n\n if (theme === 'dark' || theme === 'light') return resolveTheme(theme);\n\n const prefersDark = typeof window !== 'undefined'\n && window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n if (theme === 'system') {\n return prefersDark ? resolveTheme('dark') : resolveTheme('light');\n }\n\n const base = prefersDark ? resolveTheme('dark') : resolveTheme('light');\n const brand = resolveTheme(theme);\n return {\n ...base,\n primary: brand.primary,\n primaryText: brand.primaryText,\n };\n }\n\n private render() {\n if (!this.shadowRoot || !this._options) return;\n\n const { variant, title, description, command, fullCommand } = this._options;\n const tokens = this.resolvePopupTokens();\n const icon = variant === 'hermes' ? HERMES_ICON : HERMES_SKILL_ICON;\n\n const isHermesTerminal = variant === 'hermes';\n const displayCommand = fullCommand || command;\n\n this.shadowRoot.innerHTML = `\n <style>${POPUP_STYLES}</style>\n <div style=\"${themeToCSS(tokens)}\">\n <div class=\"hb-backdrop\" data-action=\"close\"></div>\n <div class=\"hb-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"hb-dialog-title\">\n <div class=\"hb-dialog-header\">\n <div class=\"hb-dialog-header-icon\">${icon}</div>\n <div class=\"hb-dialog-header-text\">\n <div class=\"hb-dialog-title\" id=\"hb-dialog-title\">${title}</div>\n ${description ? `<div class=\"hb-dialog-description\">${description}</div>` : ''}\n </div>\n <button class=\"hb-dialog-close\" data-action=\"close\" aria-label=\"Close\">${CLOSE_ICON}</button>\n </div>\n <div class=\"hb-dialog-body\">\n ${isHermesTerminal ? this.renderHermesTerminalBody(displayCommand) : this.renderHermesSkillBody(command)}\n </div>\n <div class=\"hb-dialog-footer\">\n ${isHermesTerminal ? `\n <div class=\"hb-hint\">Press <kbd>⌘</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>\n ` : `\n <div class=\"hb-hint\">Press <kbd>⌘</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Hermes session to run</div>\n `}\n </div>\n </div>\n </div>\n `;\n\n this.setupListeners();\n this.setupSystemThemeWatch();\n }\n\n private renderHermesTerminalBody(command: string): string {\n return `\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">1</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Copy this command to your clipboard</div>\n <div class=\"hb-code-block\">\n <div class=\"hb-code-text\"><span class=\"hb-code-prefix\">$</span>${this.escapeHtml(command)}</div>\n <button class=\"hb-copy-btn\" data-action=\"copy\" data-command=\"${this.escapeAttr(command)}\">${COPY_ICON}<span>Copy</span></button>\n </div>\n </div>\n </div>\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">2</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Paste and run in your terminal</div>\n </div>\n </div>\n `;\n }\n\n private renderHermesSkillBody(command: string): string {\n return `\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">1</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Copy this command to your clipboard</div>\n <div class=\"hb-code-block\">\n <div class=\"hb-code-text\">${this.escapeHtml(command)}</div>\n <button class=\"hb-copy-btn\" data-action=\"copy\" data-command=\"${this.escapeAttr(command)}\">${COPY_ICON}<span>Copy</span></button>\n </div>\n </div>\n </div>\n <div class=\"hb-step\">\n <div class=\"hb-step-num\">2</div>\n <div class=\"hb-step-content\">\n <div class=\"hb-step-label\">Paste and send in your Hermes session</div>\n </div>\n </div>\n `;\n }\n\n private setupListeners() {\n if (!this.shadowRoot) return;\n\n this.shadowRoot.addEventListener('click', (e) => {\n const target = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;\n if (!target) return;\n\n const action = target.dataset.action;\n\n if (action === 'close') {\n this.close();\n } else if (action === 'copy') {\n const cmd = target.dataset.command || '';\n this.copyToClipboard(cmd, target);\n }\n });\n\n this.shadowRoot.addEventListener('keydown', (e) => {\n if ((e as KeyboardEvent).key === 'Escape') this.close();\n });\n }\n\n private setupSystemThemeWatch() {\n this._mqCleanup?.();\n this._mqCleanup = null;\n\n const theme = this._options.theme;\n const needsWatch = theme === 'system' || theme === 'branded' || theme === 'branded-alt';\n if (!needsWatch || typeof window === 'undefined') return;\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => this.render();\n mq.addEventListener('change', handler);\n this._mqCleanup = () => mq.removeEventListener('change', handler);\n }\n\n private async copyToClipboard(command: string, button: HTMLElement) {\n try {\n await navigator.clipboard.writeText(command);\n const label = button.querySelector('span');\n const iconContainer = button;\n\n button.setAttribute('data-copied', 'true');\n if (label) label.textContent = 'Copied!';\n iconContainer.innerHTML = `${CHECK_ICON}<span>Copied!</span>`;\n\n this._options.onCopy?.(command);\n\n setTimeout(() => {\n button.setAttribute('data-copied', 'false');\n iconContainer.innerHTML = `${COPY_ICON}<span>Copy</span>`;\n }, 2000);\n } catch {\n const textarea = document.createElement('textarea');\n textarea.value = command;\n textarea.style.position = 'fixed';\n textarea.style.opacity = '0';\n document.body.appendChild(textarea);\n textarea.select();\n document.execCommand('copy');\n document.body.removeChild(textarea);\n\n this._options.onCopy?.(command);\n }\n }\n\n close() {\n const dialog = this.shadowRoot?.querySelector('.hb-dialog') as HTMLElement;\n const backdrop = this.shadowRoot?.querySelector('.hb-backdrop') as HTMLElement;\n\n if (dialog) {\n dialog.style.animation = 'hb-scale-in 0.15s ease-in reverse';\n }\n if (backdrop) {\n backdrop.style.animation = 'hb-fade-in 0.15s ease-in reverse';\n }\n\n setTimeout(() => {\n this._options.onClose?.();\n this.remove();\n }, 140);\n }\n\n private escapeHtml(str: string): string {\n const div = document.createElement('div');\n div.textContent = str;\n return div.innerHTML;\n }\n\n private escapeAttr(str: string): string {\n return str.replace(/\"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n }\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hermes-popup-dialog')) {\n customElements.define('hermes-popup-dialog', HermesPopupDialog);\n}\n\nexport function showPopup(options: PopupOptions): HermesPopupDialog {\n const popup = document.createElement('hermes-popup-dialog') as HermesPopupDialog;\n popup.options = options;\n document.body.appendChild(popup);\n return popup;\n}\n"],"mappings":"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","names":["AGENT_PREFERENCES_COOKIE_NAME","isBrowser","readAgentPreferences","match","p","AGENT_PREFERENCES_COOKIE_NAME","value","decoded","data","x","writeAgentPreferences","payload","order","json","expires","recordAgentPreference","agentId","base","id","HERMES_ICON","HERMES_SKILL_ICON","COPY_ICON","CHECK_ICON","CLOSE_ICON","BRAND_COLOR","BRAND_COLOR_HOVER","BRAND_COLOR_ACTIVE","BRAND_RGB","ALT_BRAND_COLOR","ALT_BRAND_COLOR_HOVER","ALT_BRAND_COLOR_ACTIVE","ALT_BRAND_RGB","themes","resolveTheme","theme","themeToCSS","tokens","SHAPE_MAP","SIZE_MAP","POPUP_STYLES","BRAND_COLOR_HOVER","HermesPopupDialog","opts","theme","resolveTheme","prefersDark","base","brand","variant","title","description","command","fullCommand","tokens","icon","HERMES_ICON","HERMES_SKILL_ICON","isHermesTerminal","displayCommand","themeToCSS","CLOSE_ICON","COPY_ICON","target","action","cmd","mq","handler","button","label","iconContainer","CHECK_ICON","textarea","dialog","backdrop","str","div","showPopup","options","popup"]}
@@ -1,4 +1,4 @@
1
- import{a as v,b as k,d as i,e as x,f as _,g as r,h as p,i as A,j as $,k as d,l as C,m as w,n as y,o as E,p as R}from"./chunk-GK6K44OK.mjs";var F=`
1
+ import{a as v,b as k,d as i,e as x,f as _,g as r,h as p,i as A,j as $,k as d,l as C,m as w,n as y,o as E,p as R}from"./chunk-5UWHHBVU.mjs";var F=`
2
2
  :host {
3
3
  display: inline-block;
4
4
  vertical-align: middle;
@@ -260,4 +260,4 @@ import{a as v,b as k,d as i,e as x,f as _,g as r,h as p,i as A,j as $,k as d,l a
260
260
  <span class="hb-btn-label">Run on Hermes</span>
261
261
  </button>
262
262
  `;let f=this.shadowRoot.querySelector(".hb-btn");f.addEventListener("click",()=>this.handleClick()),f.addEventListener("keydown",g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:e,command:a,popupTitle:t,popupDescription:o}=this._options,n=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("hb-open",{bubbles:!0,composed:!0,detail:{command:a,fullCommand:n}})),e===!1){navigator.clipboard.writeText(n).then(()=>{this._options.onCopy?.(n),v("hermes"),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))});return}R({variant:"hermes",theme:this.getResolvedTheme(),title:t||"Run on Hermes",description:o||"Execute this command in your terminal to get started with Hermes Agent.",command:a,fullCommand:n,onCopy:h=>{this._options.onCopy?.(h),v("hermes"),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:h}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("hb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let e=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();e.addEventListener("change",a),this._mqCleanup=()=>e.removeEventListener("change",a)}};m.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];function L(b="hermes-button"){typeof customElements>"u"||customElements.get(b)||customElements.define(b,m)}L();function D(b){let u=document.createElement("hermes-button");return u.options=b,u}export{m as HermesButton,D as createHermesButton,L as registerHermesButton};
263
- //# sourceMappingURL=hermes-button-RRJ6D2US.mjs.map
263
+ //# sourceMappingURL=hermes-button-S6YLK72O.mjs.map
@@ -1,4 +1,4 @@
1
- import{a as v,c as k,d as r,e as x,f as _,g as n,h as p,i as A,j as $,k as d,l as w,m as y,n as C,o as E,p as S}from"./chunk-GK6K44OK.mjs";var O=`
1
+ import{a as g,c as f,d as r,e as k,f as x,g as o,h as c,i as _,j as $,k as h,l as A,m as w,n as y,o as C,p as E}from"./chunk-5UWHHBVU.mjs";var O=`
2
2
  :host {
3
3
  display: inline-block;
4
4
  vertical-align: middle;
@@ -43,16 +43,16 @@ import{a as v,c as k,d as r,e as x,f as _,g as n,h as p,i as A,j as $,k as d,l a
43
43
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
44
44
  }
45
45
  :host([data-variant="filled"][data-theme="branded"]) .hb-btn:hover {
46
- background: ${x};
47
- box-shadow: 0 2px 8px rgba(${n}, 0.35);
46
+ background: ${k};
47
+ box-shadow: 0 2px 8px rgba(${o}, 0.35);
48
48
  }
49
49
  :host([data-variant="filled"][data-theme="branded"]) .hb-btn:active {
50
- background: ${_};
50
+ background: ${x};
51
51
  transform: scale(0.98);
52
52
  }
53
53
  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn:hover {
54
- background: ${A};
55
- box-shadow: 0 2px 8px rgba(${d}, 0.35);
54
+ background: ${_};
55
+ box-shadow: 0 2px 8px rgba(${h}, 0.35);
56
56
  }
57
57
  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn:active {
58
58
  background: ${$};
@@ -92,25 +92,25 @@ import{a as v,c as k,d as r,e as x,f as _,g as n,h as p,i as A,j as $,k as d,l a
92
92
  color: ${r};
93
93
  }
94
94
  :host([data-variant="outline"][data-theme="branded"]) .hb-btn:hover {
95
- background: rgba(${n}, 0.08);
96
- box-shadow: 0 2px 8px rgba(${n}, 0.15);
95
+ background: rgba(${o}, 0.08);
96
+ box-shadow: 0 2px 8px rgba(${o}, 0.15);
97
97
  }
98
98
  :host([data-variant="outline"][data-theme="branded"]) .hb-btn:active {
99
- background: rgba(${n}, 0.14);
99
+ background: rgba(${o}, 0.14);
100
100
  transform: scale(0.98);
101
101
  }
102
102
 
103
103
  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn {
104
104
  background: transparent;
105
- border-color: ${p};
106
- color: ${p};
105
+ border-color: ${c};
106
+ color: ${c};
107
107
  }
108
108
  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn:hover {
109
- background: rgba(${d}, 0.08);
110
- box-shadow: 0 2px 8px rgba(${d}, 0.15);
109
+ background: rgba(${h}, 0.08);
110
+ box-shadow: 0 2px 8px rgba(${h}, 0.15);
111
111
  }
112
112
  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn:active {
113
- background: rgba(${d}, 0.14);
113
+ background: rgba(${h}, 0.14);
114
114
  transform: scale(0.98);
115
115
  }
116
116
 
@@ -121,10 +121,10 @@ import{a as v,c as k,d as r,e as x,f as _,g as n,h as p,i as A,j as $,k as d,l a
121
121
  }
122
122
  :host([data-variant="outline"][data-theme="dark"]) .hb-btn:hover {
123
123
  border-color: ${r};
124
- background: rgba(${n}, 0.08);
124
+ background: rgba(${o}, 0.08);
125
125
  }
126
126
  :host([data-variant="outline"][data-theme="dark"]) .hb-btn:active {
127
- background: rgba(${n}, 0.14);
127
+ background: rgba(${o}, 0.14);
128
128
  transform: scale(0.98);
129
129
  }
130
130
 
@@ -135,10 +135,10 @@ import{a as v,c as k,d as r,e as x,f as _,g as n,h as p,i as A,j as $,k as d,l a
135
135
  }
136
136
  :host([data-variant="outline"][data-theme="light"]) .hb-btn:hover {
137
137
  border-color: ${r};
138
- background: rgba(${n}, 0.05);
138
+ background: rgba(${o}, 0.05);
139
139
  }
140
140
  :host([data-variant="outline"][data-theme="light"]) .hb-btn:active {
141
- background: rgba(${n}, 0.1);
141
+ background: rgba(${o}, 0.1);
142
142
  transform: scale(0.98);
143
143
  }
144
144
 
@@ -153,21 +153,21 @@ import{a as v,c as k,d as r,e as x,f as _,g as n,h as p,i as A,j as $,k as d,l a
153
153
  color: ${r};
154
154
  }
155
155
  :host([data-variant="ghost"][data-theme="branded"]) .hb-btn:hover {
156
- background: rgba(${n}, 0.1);
156
+ background: rgba(${o}, 0.1);
157
157
  }
158
158
  :host([data-variant="ghost"][data-theme="branded"]) .hb-btn:active {
159
- background: rgba(${n}, 0.16);
159
+ background: rgba(${o}, 0.16);
160
160
  transform: scale(0.98);
161
161
  }
162
162
 
163
163
  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn {
164
- color: ${p};
164
+ color: ${c};
165
165
  }
166
166
  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn:hover {
167
- background: rgba(${d}, 0.1);
167
+ background: rgba(${h}, 0.1);
168
168
  }
169
169
  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn:active {
170
- background: rgba(${d}, 0.16);
170
+ background: rgba(${h}, 0.16);
171
171
  transform: scale(0.98);
172
172
  }
173
173
 
@@ -235,29 +235,29 @@ import{a as v,c as k,d as r,e as x,f as _,g as n,h as p,i as A,j as $,k as d,l a
235
235
  .hb-btn-label {
236
236
  letter-spacing: -0.01em;
237
237
  }
238
- `,u=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:!0};this._mqCleanup=null;this._rendered=!1;this.attachShadow({mode:"open"})}connectedCallback(){this.syncFromAttributes(),this.render(),this.updateLightDOM()}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}attributeChangedCallback(){this._rendered&&(this.syncFromAttributes(),this.render(),this.updateLightDOM())}set options(e){this._options={...this._options,...e},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let e=this.getAttribute("command"),a=this.getAttribute("skill-url"),t=this.getAttribute("theme"),o=this.getAttribute("size"),s=this.getAttribute("variant"),h=this.getAttribute("shape"),i=this.getAttribute("popup"),b=this.getAttribute("popup-title"),c=this.getAttribute("popup-description");e!==null&&(this._options.command=e),a!==null&&(this._options.skillUrl=a),t&&(this._options.theme=t),o&&(this._options.size=o),s&&(this._options.variant=s),h&&(this._options.shape=h),i!==null&&(this._options.popup=i!=="false"),b!==null&&(this._options.popupTitle=b),c!==null&&(this._options.popupDescription=c)}updateLightDOM(){let{command:e,skillUrl:a}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Hermes Skills: ${e}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let t=this.querySelector("a[data-hb-crawl]");t||(t=document.createElement("a"),t.setAttribute("data-hb-crawl",""),t.setAttribute("aria-hidden","true"),t.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(t)),t.textContent=`Run on Hermes Skills: ${e}`,t.setAttribute("data-platform","hermes-skill"),t.setAttribute("data-command",e),a?(t.href=a,t.setAttribute("data-skill-url",a)):(t.href=`https://hermes.ai/skills?command=${encodeURIComponent(e)}`,t.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let e=this.getResolvedTheme(),a=e==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e,t=this._options.variant||"filled",o=w(e),s=this._options.size||"md",h=this._options.shape||"rounded",i=E[s],b=C[h][s];this.setAttribute("data-theme",a),this.setAttribute("data-variant",t);let c=t!=="filled"?"transparent":o.bg,R=t==="ghost"?"transparent":t==="outline"?o.primary:o.border,T=t!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
238
+ `,p=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:!0};this._mqCleanup=null;this._rendered=!1;this.attachShadow({mode:"open"})}connectedCallback(){this.syncFromAttributes(),this.render(),this.updateLightDOM()}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}attributeChangedCallback(){this._rendered&&(this.syncFromAttributes(),this.render(),this.updateLightDOM())}set options(e){this._options={...this._options,...e},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let e=this.getAttribute("command"),t=this.getAttribute("theme"),n=this.getAttribute("size"),a=this.getAttribute("variant"),i=this.getAttribute("shape"),b=this.getAttribute("popup"),s=this.getAttribute("popup-title"),l=this.getAttribute("popup-description");e!==null&&(this._options.command=e),t&&(this._options.theme=t),n&&(this._options.size=n),a&&(this._options.variant=a),i&&(this._options.shape=i),b!==null&&(this._options.popup=b!=="false"),s!==null&&(this._options.popupTitle=s),l!==null&&(this._options.popupDescription=l)}updateLightDOM(){let{command:e}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Hermes Skills: ${e}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let t=this.querySelector("a[data-hb-crawl]");t||(t=document.createElement("a"),t.setAttribute("data-hb-crawl",""),t.setAttribute("aria-hidden","true"),t.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(t)),t.textContent=`Run on Hermes Skills: ${e}`,t.setAttribute("data-platform","hermes-skill"),t.setAttribute("data-command",e),t.href=`https://hermes.ai/skills?command=${encodeURIComponent(e)}`}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let e=this.getResolvedTheme(),t=e==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e,n=this._options.variant||"filled",a=A(e),i=this._options.size||"md",b=this._options.shape||"rounded",s=C[i],l=y[b][i];this.setAttribute("data-theme",t),this.setAttribute("data-variant",n);let S=n!=="filled"?"transparent":a.bg,R=n==="ghost"?"transparent":n==="outline"?a.primary:a.border,T=n!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
239
239
  <style>${O}</style>
240
240
  <button
241
241
  class="hb-btn"
242
242
  type="button"
243
243
  style="
244
- ${y(o)}
245
- --hb-bg: ${c};
244
+ ${w(a)}
245
+ --hb-bg: ${S};
246
246
  --hb-border: ${R};
247
247
  --hb-text: ${T};
248
- --hb-accent-color: ${o.primary};
249
- --hb-focus-color: ${o.primary};
250
- --hb-height: ${i.height};
251
- --hb-font-size: ${i.fontSize};
252
- --hb-icon-size: ${i.iconSize};
253
- --hb-padding: ${i.padding};
254
- --hb-gap: ${i.gap};
255
- --hb-radius: ${b};
248
+ --hb-accent-color: ${a.primary};
249
+ --hb-focus-color: ${a.primary};
250
+ --hb-height: ${s.height};
251
+ --hb-font-size: ${s.fontSize};
252
+ --hb-icon-size: ${s.iconSize};
253
+ --hb-padding: ${s.padding};
254
+ --hb-gap: ${s.gap};
255
+ --hb-radius: ${l};
256
256
  "
257
257
  aria-label="Run on Hermes Skills: ${this._options.command.replace(/"/g,"&quot;")}"
258
258
  >
259
- <span class="hb-btn-icon" aria-hidden="true">${k}</span>
259
+ <span class="hb-btn-icon" aria-hidden="true">${f}</span>
260
260
  <span class="hb-btn-label">Run on Hermes Skills</span>
261
261
  </button>
262
- `;let f=this.shadowRoot.querySelector(".hb-btn");f.addEventListener("click",()=>this.handleClick()),f.addEventListener("keydown",g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:e,command:a,skillUrl:t,popupTitle:o,popupDescription:s}=this._options;if(this.dispatchEvent(new CustomEvent("hb-open",{bubbles:!0,composed:!0,detail:{command:a}})),e===!1){navigator.clipboard.writeText(a).then(()=>{this._options.onCopy?.(a),v("hermes-skill"),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:a}}))});return}S({variant:"hermes-skill",theme:this.getResolvedTheme(),title:o||"Run on Hermes Skills",description:s||"Copy and paste into a Hermes session to get started.",command:a,skillUrl:t,onCopy:h=>{this._options.onCopy?.(h),v("hermes-skill"),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:h}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("hb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let e=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();e.addEventListener("change",a),this._mqCleanup=()=>e.removeEventListener("change",a)}};u.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];function L(l="hermes-skill-button"){typeof customElements>"u"||customElements.get(l)||customElements.define(l,u)}L();function D(l){let m=document.createElement("hermes-skill-button");return m.options=l,m}export{u as HermesSkillButton,D as createHermesSkillButton,L as registerHermesSkillButton};
263
- //# sourceMappingURL=hermes-skill-button-WZIOOH2O.mjs.map
262
+ `;let v=this.shadowRoot.querySelector(".hb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",m=>{(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:e,command:t,popupTitle:n,popupDescription:a}=this._options;if(this.dispatchEvent(new CustomEvent("hb-open",{bubbles:!0,composed:!0,detail:{command:t}})),e===!1){navigator.clipboard.writeText(t).then(()=>{this._options.onCopy?.(t),g("hermes-skill"),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:t}}))});return}E({variant:"hermes-skill",theme:this.getResolvedTheme(),title:n||"Run on Hermes Skills",description:a||"Copy and paste into a Hermes session to get started.",command:t,onCopy:i=>{this._options.onCopy?.(i),g("hermes-skill"),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:i}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("hb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let e=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>this.render();e.addEventListener("change",t),this._mqCleanup=()=>e.removeEventListener("change",t)}};p.observedAttributes=["command","theme","size","variant","shape","popup","popup-title","popup-description"];function L(d="hermes-skill-button"){typeof customElements>"u"||customElements.get(d)||customElements.define(d,p)}L();function D(d){let u=document.createElement("hermes-skill-button");return u.options=d,u}export{p as HermesSkillButton,D as createHermesSkillButton,L as registerHermesSkillButton};
263
+ //# sourceMappingURL=hermes-skill-button-UHZHZUIU.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hermes-skill-button.ts"],"sourcesContent":["import type { HermesSkillButtonOptions, Theme, Size, Variant, Shape } from './types';\nimport { recordAgentPreference } from './agent-preferences';\nimport { HERMES_SKILL_ICON } from './icons';\nimport {\n resolveTheme,\n themeToCSS,\n SIZE_MAP,\n SHAPE_MAP,\n BRAND_COLOR,\n BRAND_COLOR_HOVER,\n BRAND_COLOR_ACTIVE,\n BRAND_RGB,\n ALT_BRAND_COLOR,\n ALT_BRAND_COLOR_HOVER,\n ALT_BRAND_COLOR_ACTIVE,\n ALT_BRAND_RGB,\n} from './themes';\nimport { showPopup } from './popup-dialog';\n\nconst BUTTON_STYLES = `\n :host {\n display: inline-block;\n vertical-align: middle;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n -webkit-tap-highlight-color: transparent;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n .hb-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--hb-gap);\n height: var(--hb-height);\n min-height: 44px;\n padding: var(--hb-padding);\n border: 1.5px solid var(--hb-border);\n background: var(--hb-bg);\n color: var(--hb-text);\n font-family: inherit;\n font-size: var(--hb-font-size);\n font-weight: 600;\n line-height: 1;\n border-radius: var(--hb-radius);\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n touch-action: manipulation;\n transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;\n text-decoration: none;\n -webkit-font-smoothing: antialiased;\n }\n\n @media (pointer: fine) {\n .hb-btn { min-height: unset; }\n }\n\n /* ─── FILLED ─── */\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .hb-btn,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .hb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .hb-btn:hover {\n background: ${BRAND_COLOR_HOVER};\n box-shadow: 0 2px 8px rgba(${BRAND_RGB}, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .hb-btn:active {\n background: ${BRAND_COLOR_ACTIVE};\n transform: scale(0.98);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .hb-btn:hover {\n background: ${ALT_BRAND_COLOR_HOVER};\n box-shadow: 0 2px 8px rgba(${ALT_BRAND_RGB}, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n background: ${ALT_BRAND_COLOR_ACTIVE};\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .hb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .hb-btn:hover {\n background: #1E2A42;\n border-color: #475569;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .hb-btn:active {\n background: #141C2E;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .hb-btn {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n }\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .hb-btn:hover {\n border-color: #94A3B8;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n }\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .hb-btn:active {\n background: #F8FAFC;\n transform: scale(0.98);\n }\n\n /* ─── OUTLINE ─── */\n\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .hb-btn {\n background: transparent;\n border-color: ${BRAND_COLOR};\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .hb-btn:hover {\n background: rgba(${BRAND_RGB}, 0.08);\n box-shadow: 0 2px 8px rgba(${BRAND_RGB}, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .hb-btn:active {\n background: rgba(${BRAND_RGB}, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .hb-btn {\n background: transparent;\n border-color: ${ALT_BRAND_COLOR};\n color: ${ALT_BRAND_COLOR};\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .hb-btn:hover {\n background: rgba(${ALT_BRAND_RGB}, 0.08);\n box-shadow: 0 2px 8px rgba(${ALT_BRAND_RGB}, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n background: rgba(${ALT_BRAND_RGB}, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .hb-btn {\n background: transparent;\n border-color: #475569;\n color: #F1F5F9;\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .hb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(${BRAND_RGB}, 0.08);\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .hb-btn:active {\n background: rgba(${BRAND_RGB}, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .hb-btn {\n background: transparent;\n border-color: #CBD5E1;\n color: #0F172A;\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .hb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(${BRAND_RGB}, 0.05);\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .hb-btn:active {\n background: rgba(${BRAND_RGB}, 0.1);\n transform: scale(0.98);\n }\n\n /* ─── GHOST ─── */\n\n :host([data-variant=\"ghost\"]) .hb-btn {\n background: transparent;\n border-color: transparent;\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .hb-btn {\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .hb-btn:hover {\n background: rgba(${BRAND_RGB}, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .hb-btn:active {\n background: rgba(${BRAND_RGB}, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn {\n color: ${ALT_BRAND_COLOR};\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn:hover {\n background: rgba(${ALT_BRAND_RGB}, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n background: rgba(${ALT_BRAND_RGB}, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .hb-btn {\n color: #F1F5F9;\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .hb-btn:hover {\n background: rgba(255, 255, 255, 0.06);\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .hb-btn:active {\n background: rgba(255, 255, 255, 0.1);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .hb-btn {\n color: #0F172A;\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .hb-btn:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .hb-btn:active {\n background: rgba(0, 0, 0, 0.08);\n transform: scale(0.98);\n }\n\n /* ─── FOCUS ─── */\n\n .hb-btn:focus-visible {\n outline: 2px solid var(--hb-focus-color, ${BRAND_COLOR});\n outline-offset: 2px;\n }\n\n /* ─── ICON ─── */\n\n .hb-btn-icon {\n width: var(--hb-icon-size);\n height: var(--hb-icon-size);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .hb-btn-icon svg { width: 100%; height: 100%; }\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .hb-btn-icon,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .hb-btn-icon {\n color: #FFFFFF;\n --hb-icon-accent: rgba(255,255,255,0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .hb-btn-icon {\n color: var(--hb-accent-color, ${BRAND_COLOR});\n }\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .hb-btn-icon {\n color: var(--hb-accent-color, ${BRAND_COLOR});\n }\n\n :host([data-variant=\"outline\"]) .hb-btn-icon,\n :host([data-variant=\"ghost\"]) .hb-btn-icon {\n color: var(--hb-accent-color, ${BRAND_COLOR});\n }\n\n /* ─── LABEL ─── */\n\n .hb-btn-label {\n letter-spacing: -0.01em;\n }\n`;\n\nexport class HermesSkillButton extends HTMLElement {\n static observedAttributes = ['command', 'theme', 'size', 'variant', 'shape', 'popup', 'popup-title', 'popup-description'];\n\n private _options: HermesSkillButtonOptions = {\n command: '',\n theme: 'branded',\n size: 'md',\n variant: 'filled',\n popup: true,\n };\n\n private _mqCleanup: (() => void) | null = null;\n private _rendered = false;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n this.syncFromAttributes();\n this.render();\n this.updateLightDOM();\n }\n\n disconnectedCallback() {\n this._mqCleanup?.();\n this._mqCleanup = null;\n }\n\n attributeChangedCallback() {\n if (!this._rendered) return;\n this.syncFromAttributes();\n this.render();\n this.updateLightDOM();\n }\n\n set options(opts: Partial<HermesSkillButtonOptions>) {\n this._options = { ...this._options, ...opts };\n this.render();\n this.updateLightDOM();\n }\n\n get options() {\n return this._options;\n }\n\n private syncFromAttributes() {\n const command = this.getAttribute('command');\n const theme = this.getAttribute('theme') as Theme | null;\n const size = this.getAttribute('size') as Size | null;\n const variant = this.getAttribute('variant') as Variant | null;\n const shape = this.getAttribute('shape') as Shape | null;\n const popup = this.getAttribute('popup');\n const popupTitle = this.getAttribute('popup-title');\n const popupDescription = this.getAttribute('popup-description');\n\n if (command !== null) this._options.command = command;\n if (theme) this._options.theme = theme;\n if (size) this._options.size = size;\n if (variant) this._options.variant = variant;\n if (shape) this._options.shape = shape;\n if (popup !== null) this._options.popup = popup !== 'false';\n if (popupTitle !== null) this._options.popupTitle = popupTitle;\n if (popupDescription !== null) this._options.popupDescription = popupDescription;\n }\n\n private updateLightDOM() {\n const { command } = this._options;\n\n this.setAttribute('role', 'button');\n this.setAttribute('tabindex', '0');\n this.setAttribute('aria-label', `Run on Hermes Skills: ${command}`);\n if (this._options.popup !== false) {\n this.setAttribute('aria-haspopup', 'dialog');\n } else {\n this.removeAttribute('aria-haspopup');\n }\n\n let link = this.querySelector('a[data-hb-crawl]') as HTMLAnchorElement | null;\n if (!link) {\n link = document.createElement('a');\n link.setAttribute('data-hb-crawl', '');\n link.setAttribute('aria-hidden', 'true');\n link.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;';\n this.appendChild(link);\n }\n link.textContent = `Run on Hermes Skills: ${command}`;\n link.setAttribute('data-platform', 'hermes-skill');\n link.setAttribute('data-command', command);\n link.href = `https://hermes.ai/skills?command=${encodeURIComponent(command)}`;\n }\n\n private getResolvedTheme(): Theme {\n return this._options.theme || 'branded';\n }\n\n private render() {\n if (!this.shadowRoot) return;\n\n const theme = this.getResolvedTheme();\n const resolvedTheme = theme === 'system' ? (\n typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n ) : theme;\n const variant = this._options.variant || 'filled';\n\n const tokens = resolveTheme(theme);\n const size = this._options.size || 'md';\n const shape = this._options.shape || 'rounded';\n const sizeTokens = SIZE_MAP[size];\n const radius = SHAPE_MAP[shape][size];\n\n this.setAttribute('data-theme', resolvedTheme);\n this.setAttribute('data-variant', variant);\n\n const bgOverride = variant !== 'filled' ? 'transparent' : tokens.bg;\n const borderOverride = variant === 'ghost' ? 'transparent' :\n variant === 'outline' ? tokens.primary : tokens.border;\n const textOverride = variant !== 'filled' ? tokens.primary : tokens.text;\n\n this.shadowRoot.innerHTML = `\n <style>${BUTTON_STYLES}</style>\n <button\n class=\"hb-btn\"\n type=\"button\"\n style=\"\n ${themeToCSS(tokens)}\n --hb-bg: ${bgOverride};\n --hb-border: ${borderOverride};\n --hb-text: ${textOverride};\n --hb-accent-color: ${tokens.primary};\n --hb-focus-color: ${tokens.primary};\n --hb-height: ${sizeTokens.height};\n --hb-font-size: ${sizeTokens.fontSize};\n --hb-icon-size: ${sizeTokens.iconSize};\n --hb-padding: ${sizeTokens.padding};\n --hb-gap: ${sizeTokens.gap};\n --hb-radius: ${radius};\n \"\n aria-label=\"Run on Hermes Skills: ${this._options.command.replace(/\"/g, '&quot;')}\"\n >\n <span class=\"hb-btn-icon\" aria-hidden=\"true\">${HERMES_SKILL_ICON}</span>\n <span class=\"hb-btn-label\">Run on Hermes Skills</span>\n </button>\n `;\n\n const btn = this.shadowRoot.querySelector('.hb-btn')!;\n btn.addEventListener('click', () => this.handleClick());\n btn.addEventListener('keydown', (e) => {\n if ((e as KeyboardEvent).key === 'Enter' || (e as KeyboardEvent).key === ' ') {\n e.preventDefault();\n this.handleClick();\n }\n });\n this._rendered = true;\n this.setupSystemThemeWatch();\n }\n\n private handleClick() {\n const { popup, command, popupTitle, popupDescription } = this._options;\n\n this.dispatchEvent(new CustomEvent('hb-open', {\n bubbles: true,\n composed: true,\n detail: { command },\n }));\n\n if (popup === false) {\n navigator.clipboard.writeText(command).then(() => {\n this._options.onCopy?.(command);\n recordAgentPreference('hermes-skill');\n this.dispatchEvent(new CustomEvent('hb-copy', {\n bubbles: true,\n composed: true,\n detail: { command },\n }));\n });\n return;\n }\n\n showPopup({\n variant: 'hermes-skill',\n theme: this.getResolvedTheme(),\n title: popupTitle || 'Run on Hermes Skills',\n description: popupDescription || 'Copy and paste into a Hermes session to get started.',\n command,\n onCopy: (cmd) => {\n this._options.onCopy?.(cmd);\n recordAgentPreference('hermes-skill');\n this.dispatchEvent(new CustomEvent('hb-copy', {\n bubbles: true,\n composed: true,\n detail: { command: cmd },\n }));\n },\n onClose: () => {\n this.dispatchEvent(new CustomEvent('hb-close', {\n bubbles: true,\n composed: true,\n }));\n },\n });\n }\n\n private setupSystemThemeWatch() {\n this._mqCleanup?.();\n this._mqCleanup = null;\n\n if (this.getResolvedTheme() !== 'system' || typeof window === 'undefined') return;\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => this.render();\n mq.addEventListener('change', handler);\n this._mqCleanup = () => mq.removeEventListener('change', handler);\n }\n}\n\nexport function registerHermesSkillButton(tagName = 'hermes-skill-button') {\n if (typeof customElements === 'undefined') return;\n if (!customElements.get(tagName)) {\n customElements.define(tagName, HermesSkillButton);\n }\n}\n\nregisterHermesSkillButton();\n\nexport function createHermesSkillButton(options: HermesSkillButtonOptions): HermesSkillButton {\n const el = document.createElement('hermes-skill-button') as HermesSkillButton;\n el.options = options;\n return el;\n}\n"],"mappings":"2IAmBA,IAAMA,EAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBA6CJC,CAAiB;AAAA,iCACFC,CAAS;AAAA;AAAA;AAAA,kBAGxBC,CAAkB;AAAA;AAAA;AAAA;AAAA,kBAIlBC,CAAqB;AAAA,iCACNC,CAAa;AAAA;AAAA;AAAA,kBAG5BC,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiCpBC,CAAW;AAAA,aAClBA,CAAW;AAAA;AAAA;AAAA,uBAGDL,CAAS;AAAA,iCACCA,CAAS;AAAA;AAAA;AAAA,uBAGnBA,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMZM,CAAe;AAAA,aACtBA,CAAe;AAAA;AAAA;AAAA,uBAGLH,CAAa;AAAA,iCACHA,CAAa;AAAA;AAAA;AAAA,uBAGvBA,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAUhBE,CAAW;AAAA,uBACRL,CAAS;AAAA;AAAA;AAAA,uBAGTA,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAUZK,CAAW;AAAA,uBACRL,CAAS;AAAA;AAAA;AAAA,uBAGTA,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAYnBK,CAAW;AAAA;AAAA;AAAA,uBAGDL,CAAS;AAAA;AAAA;AAAA,uBAGTA,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA,aAKnBM,CAAe;AAAA;AAAA;AAAA,uBAGLH,CAAa;AAAA;AAAA;AAAA,uBAGbA,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+CA6BWE,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAuBtBA,CAAW;AAAA;AAAA;AAAA,oCAGXA,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA,oCAKXA,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUlCE,EAAN,cAAgC,WAAY,CAcjD,aAAc,CACZ,MAAM,EAZR,KAAQ,SAAqC,CAC3C,QAAS,GACT,MAAO,UACP,KAAM,KACN,QAAS,SACT,MAAO,EACT,EAEA,KAAQ,WAAkC,KAC1C,KAAQ,UAAY,GAIlB,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,CACpC,CAEA,mBAAoB,CAClB,KAAK,mBAAmB,EACxB,KAAK,OAAO,EACZ,KAAK,eAAe,CACtB,CAEA,sBAAuB,CACrB,KAAK,aAAa,EAClB,KAAK,WAAa,IACpB,CAEA,0BAA2B,CACpB,KAAK,YACV,KAAK,mBAAmB,EACxB,KAAK,OAAO,EACZ,KAAK,eAAe,EACtB,CAEA,IAAI,QAAQC,EAAyC,CACnD,KAAK,SAAW,CAAE,GAAG,KAAK,SAAU,GAAGA,CAAK,EAC5C,KAAK,OAAO,EACZ,KAAK,eAAe,CACtB,CAEA,IAAI,SAAU,CACZ,OAAO,KAAK,QACd,CAEQ,oBAAqB,CAC3B,IAAMC,EAAU,KAAK,aAAa,SAAS,EACrCC,EAAQ,KAAK,aAAa,OAAO,EACjCC,EAAO,KAAK,aAAa,MAAM,EAC/BC,EAAU,KAAK,aAAa,SAAS,EACrCC,EAAQ,KAAK,aAAa,OAAO,EACjCC,EAAQ,KAAK,aAAa,OAAO,EACjCC,EAAa,KAAK,aAAa,aAAa,EAC5CC,EAAmB,KAAK,aAAa,mBAAmB,EAE1DP,IAAY,OAAM,KAAK,SAAS,QAAUA,GAC1CC,IAAO,KAAK,SAAS,MAAQA,GAC7BC,IAAM,KAAK,SAAS,KAAOA,GAC3BC,IAAS,KAAK,SAAS,QAAUA,GACjCC,IAAO,KAAK,SAAS,MAAQA,GAC7BC,IAAU,OAAM,KAAK,SAAS,MAAQA,IAAU,SAChDC,IAAe,OAAM,KAAK,SAAS,WAAaA,GAChDC,IAAqB,OAAM,KAAK,SAAS,iBAAmBA,EAClE,CAEQ,gBAAiB,CACvB,GAAM,CAAE,QAAAP,CAAQ,EAAI,KAAK,SAEzB,KAAK,aAAa,OAAQ,QAAQ,EAClC,KAAK,aAAa,WAAY,GAAG,EACjC,KAAK,aAAa,aAAc,yBAAyBA,CAAO,EAAE,EAC9D,KAAK,SAAS,QAAU,GAC1B,KAAK,aAAa,gBAAiB,QAAQ,EAE3C,KAAK,gBAAgB,eAAe,EAGtC,IAAIQ,EAAO,KAAK,cAAc,kBAAkB,EAC3CA,IACHA,EAAO,SAAS,cAAc,GAAG,EACjCA,EAAK,aAAa,gBAAiB,EAAE,EACrCA,EAAK,aAAa,cAAe,MAAM,EACvCA,EAAK,MAAM,QAAU,gGACrB,KAAK,YAAYA,CAAI,GAEvBA,EAAK,YAAc,yBAAyBR,CAAO,GACnDQ,EAAK,aAAa,gBAAiB,cAAc,EACjDA,EAAK,aAAa,eAAgBR,CAAO,EACzCQ,EAAK,KAAO,oCAAoC,mBAAmBR,CAAO,CAAC,EAC7E,CAEQ,kBAA0B,CAChC,OAAO,KAAK,SAAS,OAAS,SAChC,CAEQ,QAAS,CACf,GAAI,CAAC,KAAK,WAAY,OAEtB,IAAMC,EAAQ,KAAK,iBAAiB,EAC9BQ,EAAgBR,IAAU,SAC9B,OAAO,OAAW,KAAe,OAAO,WAAW,8BAA8B,EAAE,QAAU,OAAS,QACpGA,EACEE,EAAU,KAAK,SAAS,SAAW,SAEnCO,EAASC,EAAaV,CAAK,EAC3BC,EAAO,KAAK,SAAS,MAAQ,KAC7BE,EAAQ,KAAK,SAAS,OAAS,UAC/BQ,EAAaC,EAASX,CAAI,EAC1BY,EAASC,EAAUX,CAAK,EAAEF,CAAI,EAEpC,KAAK,aAAa,aAAcO,CAAa,EAC7C,KAAK,aAAa,eAAgBN,CAAO,EAEzC,IAAMa,EAAab,IAAY,SAAW,cAAgBO,EAAO,GAC3DO,EAAiBd,IAAY,QAAU,cAC3CA,IAAY,UAAYO,EAAO,QAAUA,EAAO,OAC5CQ,EAAef,IAAY,SAAWO,EAAO,QAAUA,EAAO,KAEpE,KAAK,WAAW,UAAY;AAAA,eACjBrB,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA,YAKhB8B,EAAWT,CAAM,CAAC;AAAA,qBACTM,CAAU;AAAA,yBACNC,CAAc;AAAA,uBAChBC,CAAY;AAAA,+BACJR,EAAO,OAAO;AAAA,8BACfA,EAAO,OAAO;AAAA,yBACnBE,EAAW,MAAM;AAAA,4BACdA,EAAW,QAAQ;AAAA,4BACnBA,EAAW,QAAQ;AAAA,0BACrBA,EAAW,OAAO;AAAA,sBACtBA,EAAW,GAAG;AAAA,yBACXE,CAAM;AAAA;AAAA,4CAEa,KAAK,SAAS,QAAQ,QAAQ,KAAM,QAAQ,CAAC;AAAA;AAAA,uDAElCM,CAAiB;AAAA;AAAA;AAAA,MAKpE,IAAMC,EAAM,KAAK,WAAW,cAAc,SAAS,EACnDA,EAAI,iBAAiB,QAAS,IAAM,KAAK,YAAY,CAAC,EACtDA,EAAI,iBAAiB,UAAYC,GAAM,EAChCA,EAAoB,MAAQ,SAAYA,EAAoB,MAAQ,OACvEA,EAAE,eAAe,EACjB,KAAK,YAAY,EAErB,CAAC,EACD,KAAK,UAAY,GACjB,KAAK,sBAAsB,CAC7B,CAEQ,aAAc,CACpB,GAAM,CAAE,MAAAjB,EAAO,QAAAL,EAAS,WAAAM,EAAY,iBAAAC,CAAiB,EAAI,KAAK,SAQ9D,GANA,KAAK,cAAc,IAAI,YAAY,UAAW,CAC5C,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,QAAAP,CAAQ,CACpB,CAAC,CAAC,EAEEK,IAAU,GAAO,CACnB,UAAU,UAAU,UAAUL,CAAO,EAAE,KAAK,IAAM,CAChD,KAAK,SAAS,SAASA,CAAO,EAC9BuB,EAAsB,cAAc,EACpC,KAAK,cAAc,IAAI,YAAY,UAAW,CAC5C,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,QAAAvB,CAAQ,CACpB,CAAC,CAAC,CACJ,CAAC,EACD,MACF,CAEAwB,EAAU,CACR,QAAS,eACT,MAAO,KAAK,iBAAiB,EAC7B,MAAOlB,GAAc,uBACrB,YAAaC,GAAoB,uDACjC,QAAAP,EACA,OAASyB,GAAQ,CACf,KAAK,SAAS,SAASA,CAAG,EAC1BF,EAAsB,cAAc,EACpC,KAAK,cAAc,IAAI,YAAY,UAAW,CAC5C,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,QAASE,CAAI,CACzB,CAAC,CAAC,CACJ,EACA,QAAS,IAAM,CACb,KAAK,cAAc,IAAI,YAAY,WAAY,CAC7C,QAAS,GACT,SAAU,EACZ,CAAC,CAAC,CACJ,CACF,CAAC,CACH,CAEQ,uBAAwB,CAI9B,GAHA,KAAK,aAAa,EAClB,KAAK,WAAa,KAEd,KAAK,iBAAiB,IAAM,UAAY,OAAO,OAAW,IAAa,OAE3E,IAAMC,EAAK,OAAO,WAAW,8BAA8B,EACrDC,EAAU,IAAM,KAAK,OAAO,EAClCD,EAAG,iBAAiB,SAAUC,CAAO,EACrC,KAAK,WAAa,IAAMD,EAAG,oBAAoB,SAAUC,CAAO,CAClE,CACF,EAvNa7B,EACJ,mBAAqB,CAAC,UAAW,QAAS,OAAQ,UAAW,QAAS,QAAS,cAAe,mBAAmB,EAwNnH,SAAS8B,EAA0BC,EAAU,sBAAuB,CACrE,OAAO,eAAmB,KACzB,eAAe,IAAIA,CAAO,GAC7B,eAAe,OAAOA,EAAS/B,CAAiB,CAEpD,CAEA8B,EAA0B,EAEnB,SAASE,EAAwBC,EAAsD,CAC5F,IAAMC,EAAK,SAAS,cAAc,qBAAqB,EACvD,OAAAA,EAAG,QAAUD,EACNC,CACT","names":["BUTTON_STYLES","BRAND_COLOR_HOVER","BRAND_RGB","BRAND_COLOR_ACTIVE","ALT_BRAND_COLOR_HOVER","ALT_BRAND_RGB","ALT_BRAND_COLOR_ACTIVE","BRAND_COLOR","ALT_BRAND_COLOR","HermesSkillButton","opts","command","theme","size","variant","shape","popup","popupTitle","popupDescription","link","resolvedTheme","tokens","resolveTheme","sizeTokens","SIZE_MAP","radius","SHAPE_MAP","bgOverride","borderOverride","textOverride","themeToCSS","HERMES_SKILL_ICON","btn","e","recordAgentPreference","showPopup","cmd","mq","handler","registerHermesSkillButton","tagName","createHermesSkillButton","options","el"]}