hermesbuttons 1.0.0

package/dist/chunk-3CPSZAJ2.mjs

@@ -0,0 +1,398 @@
+var b=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon">
+  <!-- Wing helmet -->
+  <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"/>
+  <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"/>
+  <!-- Wings -->
+  <path d="M6 6.5C4.5 5 2 5 2 7s1.5 3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <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"/>
+  <!-- Caduceus staff -->
+  <line x1="12" y1="14" x2="12" y2="22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  <!-- Snakes -->
+  <path d="M9.5 16c1.5 1 3.5 1 5 0" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" fill="none"/>
+  <path d="M9.5 19c1.5 1 3.5 1 5 0" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" fill="none"/>
+  <!-- Eye -->
+  <circle cx="12" cy="7.5" r="1.5" fill="currentColor"/>
+</svg>`,m=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon">
+  <!-- Brain/memory symbol -->
+  <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"/>
+  <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"/>
+  <!-- Neural connections -->
+  <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"/>
+  <!-- Growing roots -->
+  <path d="M9 18v2M12 18v3M15 18v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <!-- Sparkle -->
+  <circle cx="8" cy="6" r="0.8" fill="currentColor"/>
+  <circle cx="16" cy="6" r="0.8" fill="currentColor"/>
+</svg>`,n=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon-sm">
+  <rect x="5" y="5" width="8" height="8" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
+  <path d="M3 10V3.5A1.5 1.5 0 014.5 2H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>`,x=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon-sm">
+  <path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;var u=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="hb-icon-sm">
+  <path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>`;var d="#7C3AED",l="#6D28D9",E="#5B21B6",g="#14B8A6",p={branded:{bg:d,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1A1025",muted:"#7C7589",primary:d,primaryText:"#FFFFFF",codeBg:"#1A1025",codeText:"#F3EEFF"},"branded-alt":{bg:g,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1A1025",muted:"#7C7589",primary:g,primaryText:"#FFFFFF",codeBg:"#1A1025",codeText:"#F3EEFF"},dark:{bg:"#1A1025",text:"#F3EEFF",border:"#2D2440",surface:"#231A35",surfaceText:"#F3EEFF",muted:"#9F95B0",primary:d,primaryText:"#FFFFFF",codeBg:"#0F0A18",codeText:"#F3EEFF"},light:{bg:"#FFFFFF",text:"#1A1025",border:"#E8E0F0",surface:"#FAF8FF",surfaceText:"#1A1025",muted:"#7C7589",primary:d,primaryText:"#FFFFFF",codeBg:"#1A1025",codeText:"#F3EEFF"}};function s(r){return r!=="system"?p[r]:typeof window>"u"?p.light:window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light}function v(r){return`
+    --hb-bg: ${r.bg};
+    --hb-text: ${r.text};
+    --hb-border: ${r.border};
+    --hb-surface: ${r.surface};
+    --hb-surface-text: ${r.surfaceText};
+    --hb-muted: ${r.muted};
+    --hb-primary: ${r.primary};
+    --hb-primary-text: ${r.primaryText};
+    --hb-code-bg: ${r.codeBg};
+    --hb-code-text: ${r.codeText};
+  `}var M={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 F=`
+  :host {
+    position: fixed;
+    inset: 0;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  .hb-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    animation: hb-fade-in 0.15s ease-out;
+  }
+
+  .hb-dialog {
+    position: relative;
+    width: 90%;
+    max-width: 460px;
+    background: var(--hb-surface);
+    color: var(--hb-surface-text);
+    border-radius: 16px;
+    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--hb-border);
+    overflow: hidden;
+    animation: hb-scale-in 0.2s ease-out;
+  }
+
+  .hb-dialog-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid var(--hb-border);
+  }
+
+  .hb-dialog-header-icon {
+    width: 36px;
+    height: 36px;
+    color: var(--hb-primary);
+    flex-shrink: 0;
+  }
+
+  .hb-dialog-header-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .hb-dialog-title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--hb-surface-text);
+  }
+
+  .hb-dialog-description {
+    font-size: 13px;
+    color: var(--hb-muted);
+    margin-top: 2px;
+    line-height: 1.4;
+  }
+
+  .hb-dialog-close {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--hb-muted);
+    cursor: pointer;
+    border-radius: 8px;
+    flex-shrink: 0;
+    transition: background 0.15s, color 0.15s;
+  }
+
+  .hb-dialog-close:hover {
+    background: var(--hb-border);
+    color: var(--hb-surface-text);
+  }
+
+  .hb-dialog-close svg { width: 14px; height: 14px; }
+
+  .hb-dialog-body { padding: 20px 24px; }
+
+  .hb-step {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .hb-step:last-child { margin-bottom: 0; }
+
+  .hb-step-num {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: var(--hb-primary);
+    color: var(--hb-primary-text);
+    font-size: 12px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  .hb-step-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .hb-step-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--hb-surface-text);
+    margin-bottom: 8px;
+    line-height: 1.4;
+  }
+
+  .hb-code-block {
+    display: flex;
+    align-items: center;
+    background: var(--hb-code-bg);
+    color: var(--hb-code-text);
+    border-radius: 10px;
+    padding: 2px 2px 2px 14px;
+    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  .hb-code-text {
+    flex: 1;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding: 10px 0;
+    scrollbar-width: none;
+  }
+
+  .hb-code-text::-webkit-scrollbar { display: none; }
+
+  .hb-code-prefix {
+    color: var(--hb-muted);
+    user-select: none;
+    margin-right: 6px;
+  }
+
+  .hb-copy-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 36px;
+    min-width: 36px;
+    padding: 0 12px;
+    border: none;
+    background: var(--hb-primary);
+    color: var(--hb-primary-text);
+    cursor: pointer;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    flex-shrink: 0;
+    transition: background 0.15s, transform 0.1s;
+    white-space: nowrap;
+  }
+
+  .hb-copy-btn:hover { background: ${l}; }
+  .hb-copy-btn:active { transform: scale(0.96); }
+  .hb-copy-btn svg { width: 14px; height: 14px; }
+
+  .hb-copy-btn[data-copied="true"] {
+    background: #16a34a;
+  }
+
+  .hb-dialog-footer {
+    padding: 16px 24px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .hb-action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    height: 44px;
+    border: none;
+    background: var(--hb-primary);
+    color: var(--hb-primary-text);
+    cursor: pointer;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    transition: background 0.15s, transform 0.1s;
+  }
+
+  .hb-action-btn:hover { background: ${l}; }
+  .hb-action-btn:active { transform: scale(0.98); }
+  .hb-action-btn svg { width: 16px; height: 16px; }
+
+  .hb-hint {
+    font-size: 12px;
+    color: var(--hb-muted);
+    text-align: center;
+    line-height: 1.4;
+  }
+
+  .hb-hint kbd {
+    display: inline-block;
+    padding: 1px 5px;
+    font-family: inherit;
+    font-size: 11px;
+    background: var(--hb-border);
+    border-radius: 4px;
+    border: 1px solid var(--hb-border);
+  }
+
+  @keyframes hb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes hb-scale-in {
+    from { opacity: 0; transform: scale(0.95) translateY(8px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  @media (max-width: 480px) {
+    .hb-dialog {
+      width: 96%;
+      max-width: none;
+      border-radius: 14px;
+      max-height: 90dvh;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+    .hb-dialog-header { padding: 16px 16px 12px; gap: 10px; }
+    .hb-dialog-header-icon { width: 28px; height: 28px; }
+    .hb-dialog-body { padding: 16px; }
+    .hb-dialog-footer { padding: 12px 16px 16px; }
+
+    .hb-step { gap: 10px; margin-bottom: 14px; }
+    .hb-step-num { width: 22px; height: 22px; font-size: 11px; }
+    .hb-step-label { font-size: 12px; margin-bottom: 6px; }
+
+    .hb-code-block { font-size: 12px; padding: 2px 2px 2px 10px; border-radius: 8px; }
+    .hb-copy-btn { height: 32px; padding: 0 10px; font-size: 11px; border-radius: 6px; }
+    .hb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
+    .hb-hint { font-size: 11px; }
+  }
+
+  @media (max-width: 360px) {
+    .hb-dialog { width: 100%; border-radius: 12px 12px 0 0; align-self: flex-end; }
+    .hb-copy-btn span { display: none; }
+    .hb-copy-btn { min-width: 32px; padding: 0 8px; }
+  }
+
+  @supports (padding: env(safe-area-inset-bottom)) {
+    .hb-dialog-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
+  }
+`,c=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 o=t?s("dark"):s("light"),i=s(e);return{...o,primary:i.primary,primaryText:i.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:e,title:t,description:o,command:i,fullCommand:f,skillUrl:y}=this._options,k=this.resolvePopupTokens(),w=e==="hermes"?b:m,h=e==="hermes",C=f||i;this.shadowRoot.innerHTML=`
+      <style>${F}</style>
+      <div style="${v(k)}">
+        <div class="hb-backdrop" data-action="close"></div>
+        <div class="hb-dialog" role="dialog" aria-modal="true" aria-labelledby="hb-dialog-title">
+          <div class="hb-dialog-header">
+            <div class="hb-dialog-header-icon">${w}</div>
+            <div class="hb-dialog-header-text">
+              <div class="hb-dialog-title" id="hb-dialog-title">${t}</div>
+              ${o?`<div class="hb-dialog-description">${o}</div>`:""}
+            </div>
+            <button class="hb-dialog-close" data-action="close" aria-label="Close">${u}</button>
+          </div>
+          <div class="hb-dialog-body">
+            ${h?this.renderHermesTerminalBody(C):this.renderHermesSkillBody(i,y)}
+          </div>
+          <div class="hb-dialog-footer">
+            ${h?`
+              <div class="hb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
+            `:`
+              <div class="hb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Hermes session to run</div>
+            `}
+          </div>
+        </div>
+      </div>
+    `,this.setupListeners(),this.setupSystemThemeWatch()}renderHermesTerminalBody(e){return`
+      <div class="hb-step">
+        <div class="hb-step-num">1</div>
+        <div class="hb-step-content">
+          <div class="hb-step-label">Copy this command to your clipboard</div>
+          <div class="hb-code-block">
+            <div class="hb-code-text"><span class="hb-code-prefix">$</span>${this.escapeHtml(e)}</div>
+            <button class="hb-copy-btn" data-action="copy" data-command="${this.escapeAttr(e)}">${n}<span>Copy</span></button>
+          </div>
+        </div>
+      </div>
+      <div class="hb-step">
+        <div class="hb-step-num">2</div>
+        <div class="hb-step-content">
+          <div class="hb-step-label">Paste and run in your terminal</div>
+        </div>
+      </div>
+    `}renderHermesSkillBody(e,t){let o="";if(t){let i=`Install the skill from ${t} and run ${e}`;o+=`
+        <div class="hb-step">
+          <div class="hb-step-num">1</div>
+          <div class="hb-step-content">
+            <div class="hb-step-label">Copy this prompt to your clipboard</div>
+            <div class="hb-code-block">
+              <div class="hb-code-text">${this.escapeHtml(i)}</div>
+              <button class="hb-copy-btn" data-action="copy" data-command="${this.escapeAttr(i)}">${n}<span>Copy</span></button>
+            </div>
+          </div>
+        </div>
+        <div class="hb-step">
+          <div class="hb-step-num">2</div>
+          <div class="hb-step-content">
+            <div class="hb-step-label">Paste into a Hermes session \u2014 the agent will fetch the skill and set it up for you</div>
+          </div>
+        </div>
+      `}else o+=`
+        <div class="hb-step">
+          <div class="hb-step-num">1</div>
+          <div class="hb-step-content">
+            <div class="hb-step-label">Copy this command to your clipboard</div>
+            <div class="hb-code-block">
+              <div class="hb-code-text">${this.escapeHtml(e)}</div>
+              <button class="hb-copy-btn" data-action="copy" data-command="${this.escapeAttr(e)}">${n}<span>Copy</span></button>
+            </div>
+          </div>
+        </div>
+        <div class="hb-step">
+          <div class="hb-step-num">2</div>
+          <div class="hb-step-content">
+            <div class="hb-step-label">Paste and send in your Hermes session</div>
+          </div>
+        </div>
+      `;return o}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",e=>{let t=e.target.closest("[data-action]");if(!t)return;let o=t.dataset.action;if(o==="close")this.close();else if(o==="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 o=window.matchMedia("(prefers-color-scheme: dark)"),i=()=>this.render();o.addEventListener("change",i),this._mqCleanup=()=>o.removeEventListener("change",i)}async copyToClipboard(e,t){try{await navigator.clipboard.writeText(e);let o=t.querySelector("span"),i=t;t.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),i.innerHTML=`${x}<span>Copied!</span>`,this._options.onCopy?.(e),setTimeout(()=>{t.setAttribute("data-copied","false"),i.innerHTML=`${n}<span>Copy</span>`},2e3)}catch{let o=document.createElement("textarea");o.value=e,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o),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",c);function $(r){let a=document.createElement("hermes-popup-dialog");return a.options=r,document.body.appendChild(a),a}export{b as a,m as b,d as c,l as d,E as e,s as f,v as g,M as h,_ as i,$ as j};
+//# sourceMappingURL=chunk-3CPSZAJ2.mjs.map

package/dist/chunk-3CPSZAJ2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons.ts","../src/themes.ts","../src/popup-dialog.ts"],"sourcesContent":["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\nexport const BRAND_COLOR = '#7C3AED';\nexport const BRAND_COLOR_HOVER = '#6D28D9';\nexport const BRAND_COLOR_ACTIVE = '#5B21B6';\n\nexport const ALT_BRAND_COLOR = '#14B8A6';\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: '#1A1025',\n    muted: '#7C7589',\n    primary: BRAND_COLOR,\n    primaryText: '#FFFFFF',\n    codeBg: '#1A1025',\n    codeText: '#F3EEFF',\n  },\n  'branded-alt': {\n    bg: ALT_BRAND_COLOR,\n    text: '#FFFFFF',\n    border: 'transparent',\n    surface: '#FFFFFF',\n    surfaceText: '#1A1025',\n    muted: '#7C7589',\n    primary: ALT_BRAND_COLOR,\n    primaryText: '#FFFFFF',\n    codeBg: '#1A1025',\n    codeText: '#F3EEFF',\n  },\n  dark: {\n    bg: '#1A1025',\n    text: '#F3EEFF',\n    border: '#2D2440',\n    surface: '#231A35',\n    surfaceText: '#F3EEFF',\n    muted: '#9F95B0',\n    primary: BRAND_COLOR,\n    primaryText: '#FFFFFF',\n    codeBg: '#0F0A18',\n    codeText: '#F3EEFF',\n  },\n  light: {\n    bg: '#FFFFFF',\n    text: '#1A1025',\n    border: '#E8E0F0',\n    surface: '#FAF8FF',\n    surfaceText: '#1A1025',\n    muted: '#7C7589',\n    primary: BRAND_COLOR,\n    primaryText: '#FFFFFF',\n    codeBg: '#1A1025',\n    codeText: '#F3EEFF',\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":["HERMES_ICON","HERMES_SKILL_ICON","COPY_ICON","CHECK_ICON","CLOSE_ICON","BRAND_COLOR","BRAND_COLOR_HOVER","BRAND_COLOR_ACTIVE","ALT_BRAND_COLOR","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"]}