hermesbuttons 1.0.0

package/dist/hermes-button-OWZRXNSO.mjs

@@ -0,0 +1,263 @@
+import{a as u,c as r,d as g,e as v,f,g as k,h as x,i as w,j as y}from"./chunk-3CPSZAJ2.mjs";var C=`
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  .hb-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hb-gap);
+    height: var(--hb-height);
+    min-height: 44px;
+    padding: var(--hb-padding);
+    border: 1.5px solid var(--hb-border);
+    background: var(--hb-bg);
+    color: var(--hb-text);
+    font-family: inherit;
+    font-size: var(--hb-font-size);
+    font-weight: 600;
+    line-height: 1;
+    border-radius: var(--hb-radius);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    touch-action: manipulation;
+    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  @media (pointer: fine) {
+    .hb-btn { min-height: unset; }
+  }
+
+  /* \u2500\u2500\u2500 FILLED \u2500\u2500\u2500 */
+
+  :host([data-variant="filled"][data-theme="branded"]) .hb-btn,
+  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  }
+  :host([data-variant="filled"][data-theme="branded"]) .hb-btn:hover {
+    background: ${g};
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
+  }
+  :host([data-variant="filled"][data-theme="branded"]) .hb-btn:active {
+    background: ${v};
+    transform: scale(0.98);
+  }
+  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn:hover {
+    background: #0D9488;
+    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.35);
+  }
+  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn:active {
+    background: #0F766E;
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="filled"][data-theme="dark"]) .hb-btn {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+  :host([data-variant="filled"][data-theme="dark"]) .hb-btn:hover {
+    background: #292524;
+    border-color: #57534E;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+  :host([data-variant="filled"][data-theme="dark"]) .hb-btn:active {
+    background: #1C1917;
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="filled"][data-theme="light"]) .hb-btn {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  }
+  :host([data-variant="filled"][data-theme="light"]) .hb-btn:hover {
+    border-color: #D6D3D1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+  :host([data-variant="filled"][data-theme="light"]) .hb-btn:active {
+    background: #FAFAF9;
+    transform: scale(0.98);
+  }
+
+  /* \u2500\u2500\u2500 OUTLINE \u2500\u2500\u2500 */
+
+  :host([data-variant="outline"][data-theme="branded"]) .hb-btn {
+    background: transparent;
+    border-color: ${r};
+    color: ${r};
+  }
+  :host([data-variant="outline"][data-theme="branded"]) .hb-btn:hover {
+    background: rgba(124, 58, 237, 0.08);
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
+  }
+  :host([data-variant="outline"][data-theme="branded"]) .hb-btn:active {
+    background: rgba(124, 58, 237, 0.14);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn {
+    background: transparent;
+    border-color: #14B8A6;
+    color: #14B8A6;
+  }
+  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn:hover {
+    background: rgba(20, 184, 166, 0.08);
+    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);
+  }
+  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn:active {
+    background: rgba(20, 184, 166, 0.14);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="outline"][data-theme="dark"]) .hb-btn {
+    background: transparent;
+    border-color: #57534E;
+    color: #F5F0EB;
+  }
+  :host([data-variant="outline"][data-theme="dark"]) .hb-btn:hover {
+    border-color: ${r};
+    background: rgba(124, 58, 237, 0.08);
+  }
+  :host([data-variant="outline"][data-theme="dark"]) .hb-btn:active {
+    background: rgba(124, 58, 237, 0.14);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="outline"][data-theme="light"]) .hb-btn {
+    background: transparent;
+    border-color: #D6D3D1;
+    color: #1C1917;
+  }
+  :host([data-variant="outline"][data-theme="light"]) .hb-btn:hover {
+    border-color: ${r};
+    background: rgba(124, 58, 237, 0.05);
+  }
+  :host([data-variant="outline"][data-theme="light"]) .hb-btn:active {
+    background: rgba(124, 58, 237, 0.1);
+    transform: scale(0.98);
+  }
+
+  /* \u2500\u2500\u2500 GHOST \u2500\u2500\u2500 */
+
+  :host([data-variant="ghost"]) .hb-btn {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  :host([data-variant="ghost"][data-theme="branded"]) .hb-btn {
+    color: ${r};
+  }
+  :host([data-variant="ghost"][data-theme="branded"]) .hb-btn:hover {
+    background: rgba(124, 58, 237, 0.1);
+  }
+  :host([data-variant="ghost"][data-theme="branded"]) .hb-btn:active {
+    background: rgba(124, 58, 237, 0.16);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn {
+    color: #14B8A6;
+  }
+  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn:hover {
+    background: rgba(20, 184, 166, 0.1);
+  }
+  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn:active {
+    background: rgba(20, 184, 166, 0.16);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="ghost"][data-theme="dark"]) .hb-btn {
+    color: #F5F0EB;
+  }
+  :host([data-variant="ghost"][data-theme="dark"]) .hb-btn:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+  :host([data-variant="ghost"][data-theme="dark"]) .hb-btn:active {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="ghost"][data-theme="light"]) .hb-btn {
+    color: #1C1917;
+  }
+  :host([data-variant="ghost"][data-theme="light"]) .hb-btn:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  :host([data-variant="ghost"][data-theme="light"]) .hb-btn:active {
+    background: rgba(0, 0, 0, 0.08);
+    transform: scale(0.98);
+  }
+
+  /* \u2500\u2500\u2500 FOCUS \u2500\u2500\u2500 */
+
+  .hb-btn:focus-visible {
+    outline: 2px solid var(--hb-focus-color, ${r});
+    outline-offset: 2px;
+  }
+
+  /* \u2500\u2500\u2500 ICON \u2500\u2500\u2500 */
+
+  .hb-btn-icon {
+    width: var(--hb-icon-size);
+    height: var(--hb-icon-size);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hb-btn-icon svg { width: 100%; height: 100%; }
+
+  :host([data-variant="filled"][data-theme="branded"]) .hb-btn-icon,
+  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn-icon {
+    color: #FFFFFF;
+    --hb-icon-accent: rgba(255,255,255,0.2);
+  }
+  :host([data-variant="filled"][data-theme="dark"]) .hb-btn-icon {
+    color: var(--hb-accent-color, ${r});
+  }
+  :host([data-variant="filled"][data-theme="light"]) .hb-btn-icon {
+    color: var(--hb-accent-color, ${r});
+  }
+
+  :host([data-variant="outline"]) .hb-btn-icon,
+  :host([data-variant="ghost"]) .hb-btn-icon {
+    color: var(--hb-accent-color, ${r});
+  }
+
+  /* \u2500\u2500\u2500 LABEL \u2500\u2500\u2500 */
+
+  .hb-btn-label {
+    letter-spacing: -0.01em;
+  }
+`,l=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:!0,promptFlag:!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("theme"),t=this.getAttribute("size"),o=this.getAttribute("variant"),n=this.getAttribute("shape"),s=this.getAttribute("popup"),i=this.getAttribute("prompt-flag"),d=this.getAttribute("popup-title"),b=this.getAttribute("popup-description");e!==null&&(this._options.command=e),a&&(this._options.theme=a),t&&(this._options.size=t),o&&(this._options.variant=o),n&&(this._options.shape=n),s!==null&&(this._options.popup=s!=="false"),i!==null&&(this._options.promptFlag=i!=="false"),d!==null&&(this._options.popupTitle=d),b!==null&&(this._options.popupDescription=b)}updateLightDOM(){let{command:e}=this._options,a=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Hermes: ${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.href=`https://hermes.ai/run?command=${encodeURIComponent(a)}`,t.textContent=`Run on Hermes: ${e}`,t.setAttribute("data-platform","hermes"),t.setAttribute("data-command",e),t.setAttribute("data-full-command",a)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:e,promptFlag:a}=this._options;return a===!1?e:`hermes -p "${e}"`}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=f(e),n=this._options.size||"md",s=this._options.shape||"rounded",i=w[n],d=x[s][n];this.setAttribute("data-theme",a),this.setAttribute("data-variant",t);let b=t!=="filled"?"transparent":o.bg,_=t==="ghost"?"transparent":t==="outline"?o.primary:o.border,A=t!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
+      <style>${C}</style>
+      <button
+        class="hb-btn"
+        type="button"
+        style="
+          ${k(o)}
+          --hb-bg: ${b};
+          --hb-border: ${_};
+          --hb-text: ${A};
+          --hb-accent-color: ${o.primary};
+          --hb-focus-color: ${o.primary};
+          --hb-height: ${i.height};
+          --hb-font-size: ${i.fontSize};
+          --hb-icon-size: ${i.iconSize};
+          --hb-padding: ${i.ccPadding};
+          --hb-gap: ${i.gap};
+          --hb-radius: ${d};
+        "
+        aria-label="Run on Hermes: ${this._options.command.replace(/"/g,"&quot;")}"
+      >
+        <span class="hb-btn-icon" aria-hidden="true">${u}</span>
+        <span class="hb-btn-label">Run on Hermes</span>
+      </button>
+    `;let m=this.shadowRoot.querySelector(".hb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",p=>{(p.key==="Enter"||p.key===" ")&&(p.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),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))});return}y({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:s=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:s}}))},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)}};l.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];function E(h="hermes-button"){typeof customElements>"u"||customElements.get(h)||customElements.define(h,l)}E();function O(h){let c=document.createElement("hermes-button");return c.options=h,c}export{l as HermesButton,O as createHermesButton,E as registerHermesButton};
+//# sourceMappingURL=hermes-button-OWZRXNSO.mjs.map

package/dist/hermes-button-OWZRXNSO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hermes-button.ts"],"sourcesContent":["import type { HermesButtonOptions, Theme, Size, Variant, Shape } from './types';\nimport { HERMES_ICON } from './icons';\nimport { resolveTheme, themeToCSS, SIZE_MAP, SHAPE_MAP, BRAND_COLOR, BRAND_COLOR_HOVER, BRAND_COLOR_ACTIVE } 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(124, 58, 237, 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: #0D9488;\n    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.35);\n  }\n  :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n    background: #0F766E;\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: #292524;\n    border-color: #57534E;\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: #1C1917;\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: #D6D3D1;\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: #FAFAF9;\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(124, 58, 237, 0.08);\n    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);\n  }\n  :host([data-variant=\"outline\"][data-theme=\"branded\"]) .hb-btn:active {\n    background: rgba(124, 58, 237, 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: #14B8A6;\n    color: #14B8A6;\n  }\n  :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .hb-btn:hover {\n    background: rgba(20, 184, 166, 0.08);\n    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);\n  }\n  :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n    background: rgba(20, 184, 166, 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: #57534E;\n    color: #F5F0EB;\n  }\n  :host([data-variant=\"outline\"][data-theme=\"dark\"]) .hb-btn:hover {\n    border-color: ${BRAND_COLOR};\n    background: rgba(124, 58, 237, 0.08);\n  }\n  :host([data-variant=\"outline\"][data-theme=\"dark\"]) .hb-btn:active {\n    background: rgba(124, 58, 237, 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: #D6D3D1;\n    color: #1C1917;\n  }\n  :host([data-variant=\"outline\"][data-theme=\"light\"]) .hb-btn:hover {\n    border-color: ${BRAND_COLOR};\n    background: rgba(124, 58, 237, 0.05);\n  }\n  :host([data-variant=\"outline\"][data-theme=\"light\"]) .hb-btn:active {\n    background: rgba(124, 58, 237, 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(124, 58, 237, 0.1);\n  }\n  :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .hb-btn:active {\n    background: rgba(124, 58, 237, 0.16);\n    transform: scale(0.98);\n  }\n\n  :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn {\n    color: #14B8A6;\n  }\n  :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn:hover {\n    background: rgba(20, 184, 166, 0.1);\n  }\n  :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n    background: rgba(20, 184, 166, 0.16);\n    transform: scale(0.98);\n  }\n\n  :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .hb-btn {\n    color: #F5F0EB;\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: #1C1917;\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 HermesButton extends HTMLElement {\n  static observedAttributes = ['command', 'theme', 'size', 'variant', 'shape', 'popup', 'prompt-flag', 'popup-title', 'popup-description'];\n\n  private _options: HermesButtonOptions = {\n    command: '',\n    theme: 'branded',\n    size: 'md',\n    variant: 'filled',\n    popup: true,\n    promptFlag: 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<HermesButtonOptions>) {\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 promptFlag = this.getAttribute('prompt-flag');\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 (promptFlag !== null) this._options.promptFlag = promptFlag !== '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    const fullCommand = this.getFullCommand();\n\n    this.setAttribute('role', 'button');\n    this.setAttribute('tabindex', '0');\n    this.setAttribute('aria-label', `Run on Hermes: ${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.href = `https://hermes.ai/run?command=${encodeURIComponent(fullCommand)}`;\n    link.textContent = `Run on Hermes: ${command}`;\n    link.setAttribute('data-platform', 'hermes');\n    link.setAttribute('data-command', command);\n    link.setAttribute('data-full-command', fullCommand);\n  }\n\n  private getResolvedTheme(): Theme {\n    return this._options.theme || 'branded';\n  }\n\n  private getFullCommand(): string {\n    const { command, promptFlag } = this._options;\n    if (promptFlag === false) return command;\n    return `hermes -p \"${command}\"`;\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.ccPadding};\n          --hb-gap: ${sizeTokens.gap};\n          --hb-radius: ${radius};\n        \"\n        aria-label=\"Run on Hermes: ${this._options.command.replace(/\"/g, '&quot;')}\"\n      >\n        <span class=\"hb-btn-icon\" aria-hidden=\"true\">${HERMES_ICON}</span>\n        <span class=\"hb-btn-label\">Run on Hermes</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    const fullCommand = this.getFullCommand();\n\n    this.dispatchEvent(new CustomEvent('hb-open', {\n      bubbles: true,\n      composed: true,\n      detail: { command, fullCommand },\n    }));\n\n    if (popup === false) {\n      navigator.clipboard.writeText(fullCommand).then(() => {\n        this._options.onCopy?.(fullCommand);\n        this.dispatchEvent(new CustomEvent('hb-copy', {\n          bubbles: true,\n          composed: true,\n          detail: { command: fullCommand },\n        }));\n      });\n      return;\n    }\n\n    showPopup({\n      variant: 'hermes',\n      theme: this.getResolvedTheme(),\n      title: popupTitle || 'Run on Hermes',\n      description: popupDescription || 'Execute this command in your terminal to get started with Hermes Agent.',\n      command,\n      fullCommand,\n      onCopy: (cmd: string) => {\n        this._options.onCopy?.(cmd);\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 registerHermesButton(tagName = 'hermes-button') {\n  if (typeof customElements === 'undefined') return;\n  if (!customElements.get(tagName)) {\n    customElements.define(tagName, HermesButton);\n  }\n}\n\nregisterHermesButton();\n\nexport function createHermesButton(options: HermesButtonOptions): HermesButton {\n  const el = document.createElement('hermes-button') as HermesButton;\n  el.options = options;\n  return el;\n}\n"],"mappings":"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","names":["BUTTON_STYLES","BRAND_COLOR_HOVER","BRAND_COLOR_ACTIVE","BRAND_COLOR","HermesButton","opts","command","theme","size","variant","shape","popup","promptFlag","popupTitle","popupDescription","fullCommand","link","resolvedTheme","tokens","resolveTheme","sizeTokens","SIZE_MAP","radius","SHAPE_MAP","bgOverride","borderOverride","textOverride","themeToCSS","HERMES_ICON","btn","e","showPopup","cmd","mq","handler","registerHermesButton","tagName","createHermesButton","options","el"]}

package/dist/hermes-skill-button-5MLIQS4T.mjs

@@ -0,0 +1,263 @@
+import{b as m,c as n,d as g,e as v,f,g as k,h as x,i as w,j as y}from"./chunk-3CPSZAJ2.mjs";var E=`
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  .hb-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hb-gap);
+    height: var(--hb-height);
+    min-height: 44px;
+    padding: var(--hb-padding);
+    border: 1.5px solid var(--hb-border);
+    background: var(--hb-bg);
+    color: var(--hb-text);
+    font-family: inherit;
+    font-size: var(--hb-font-size);
+    font-weight: 600;
+    line-height: 1;
+    border-radius: var(--hb-radius);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    touch-action: manipulation;
+    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  @media (pointer: fine) {
+    .hb-btn { min-height: unset; }
+  }
+
+  /* \u2500\u2500\u2500 FILLED \u2500\u2500\u2500 */
+
+  :host([data-variant="filled"][data-theme="branded"]) .hb-btn,
+  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  }
+  :host([data-variant="filled"][data-theme="branded"]) .hb-btn:hover {
+    background: ${g};
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
+  }
+  :host([data-variant="filled"][data-theme="branded"]) .hb-btn:active {
+    background: ${v};
+    transform: scale(0.98);
+  }
+  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn:hover {
+    background: #0D9488;
+    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.35);
+  }
+  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn:active {
+    background: #0F766E;
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="filled"][data-theme="dark"]) .hb-btn {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+  :host([data-variant="filled"][data-theme="dark"]) .hb-btn:hover {
+    background: #292524;
+    border-color: #57534E;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+  :host([data-variant="filled"][data-theme="dark"]) .hb-btn:active {
+    background: #1C1917;
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="filled"][data-theme="light"]) .hb-btn {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  }
+  :host([data-variant="filled"][data-theme="light"]) .hb-btn:hover {
+    border-color: #D6D3D1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+  :host([data-variant="filled"][data-theme="light"]) .hb-btn:active {
+    background: #FAFAF9;
+    transform: scale(0.98);
+  }
+
+  /* \u2500\u2500\u2500 OUTLINE \u2500\u2500\u2500 */
+
+  :host([data-variant="outline"][data-theme="branded"]) .hb-btn {
+    background: transparent;
+    border-color: ${n};
+    color: ${n};
+  }
+  :host([data-variant="outline"][data-theme="branded"]) .hb-btn:hover {
+    background: rgba(124, 58, 237, 0.08);
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
+  }
+  :host([data-variant="outline"][data-theme="branded"]) .hb-btn:active {
+    background: rgba(124, 58, 237, 0.14);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn {
+    background: transparent;
+    border-color: #14B8A6;
+    color: #14B8A6;
+  }
+  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn:hover {
+    background: rgba(20, 184, 166, 0.08);
+    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);
+  }
+  :host([data-variant="outline"][data-theme="branded-alt"]) .hb-btn:active {
+    background: rgba(20, 184, 166, 0.14);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="outline"][data-theme="dark"]) .hb-btn {
+    background: transparent;
+    border-color: #57534E;
+    color: #F5F0EB;
+  }
+  :host([data-variant="outline"][data-theme="dark"]) .hb-btn:hover {
+    border-color: ${n};
+    background: rgba(124, 58, 237, 0.08);
+  }
+  :host([data-variant="outline"][data-theme="dark"]) .hb-btn:active {
+    background: rgba(124, 58, 237, 0.14);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="outline"][data-theme="light"]) .hb-btn {
+    background: transparent;
+    border-color: #D6D3D1;
+    color: #1C1917;
+  }
+  :host([data-variant="outline"][data-theme="light"]) .hb-btn:hover {
+    border-color: ${n};
+    background: rgba(124, 58, 237, 0.05);
+  }
+  :host([data-variant="outline"][data-theme="light"]) .hb-btn:active {
+    background: rgba(124, 58, 237, 0.1);
+    transform: scale(0.98);
+  }
+
+  /* \u2500\u2500\u2500 GHOST \u2500\u2500\u2500 */
+
+  :host([data-variant="ghost"]) .hb-btn {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  :host([data-variant="ghost"][data-theme="branded"]) .hb-btn {
+    color: ${n};
+  }
+  :host([data-variant="ghost"][data-theme="branded"]) .hb-btn:hover {
+    background: rgba(124, 58, 237, 0.1);
+  }
+  :host([data-variant="ghost"][data-theme="branded"]) .hb-btn:active {
+    background: rgba(124, 58, 237, 0.16);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn {
+    color: #14B8A6;
+  }
+  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn:hover {
+    background: rgba(20, 184, 166, 0.1);
+  }
+  :host([data-variant="ghost"][data-theme="branded-alt"]) .hb-btn:active {
+    background: rgba(20, 184, 166, 0.16);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="ghost"][data-theme="dark"]) .hb-btn {
+    color: #F5F0EB;
+  }
+  :host([data-variant="ghost"][data-theme="dark"]) .hb-btn:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+  :host([data-variant="ghost"][data-theme="dark"]) .hb-btn:active {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(0.98);
+  }
+
+  :host([data-variant="ghost"][data-theme="light"]) .hb-btn {
+    color: #1C1917;
+  }
+  :host([data-variant="ghost"][data-theme="light"]) .hb-btn:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  :host([data-variant="ghost"][data-theme="light"]) .hb-btn:active {
+    background: rgba(0, 0, 0, 0.08);
+    transform: scale(0.98);
+  }
+
+  /* \u2500\u2500\u2500 FOCUS \u2500\u2500\u2500 */
+
+  .hb-btn:focus-visible {
+    outline: 2px solid var(--hb-focus-color, ${n});
+    outline-offset: 2px;
+  }
+
+  /* \u2500\u2500\u2500 ICON \u2500\u2500\u2500 */
+
+  .hb-btn-icon {
+    width: var(--hb-icon-size);
+    height: var(--hb-icon-size);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hb-btn-icon svg { width: 100%; height: 100%; }
+
+  :host([data-variant="filled"][data-theme="branded"]) .hb-btn-icon,
+  :host([data-variant="filled"][data-theme="branded-alt"]) .hb-btn-icon {
+    color: #FFFFFF;
+    --hb-icon-accent: rgba(255,255,255,0.2);
+  }
+  :host([data-variant="filled"][data-theme="dark"]) .hb-btn-icon {
+    color: var(--hb-accent-color, ${n});
+  }
+  :host([data-variant="filled"][data-theme="light"]) .hb-btn-icon {
+    color: var(--hb-accent-color, ${n});
+  }
+
+  :host([data-variant="outline"]) .hb-btn-icon,
+  :host([data-variant="ghost"]) .hb-btn-icon {
+    color: var(--hb-accent-color, ${n});
+  }
+
+  /* \u2500\u2500\u2500 LABEL \u2500\u2500\u2500 */
+
+  .hb-btn-label {
+    letter-spacing: -0.01em;
+  }
+`,b=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"),i=this.getAttribute("variant"),s=this.getAttribute("shape"),r=this.getAttribute("popup"),d=this.getAttribute("popup-title"),l=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),i&&(this._options.variant=i),s&&(this._options.shape=s),r!==null&&(this._options.popup=r!=="false"),d!==null&&(this._options.popupTitle=d),l!==null&&(this._options.popupDescription=l)}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=f(e),i=this._options.size||"md",s=this._options.shape||"rounded",r=w[i],d=x[s][i];this.setAttribute("data-theme",a),this.setAttribute("data-variant",t);let l=t!=="filled"?"transparent":o.bg,_=t==="ghost"?"transparent":t==="outline"?o.primary:o.border,A=t!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
+      <style>${E}</style>
+      <button
+        class="hb-btn"
+        type="button"
+        style="
+          ${k(o)}
+          --hb-bg: ${l};
+          --hb-border: ${_};
+          --hb-text: ${A};
+          --hb-accent-color: ${o.primary};
+          --hb-focus-color: ${o.primary};
+          --hb-height: ${r.height};
+          --hb-font-size: ${r.fontSize};
+          --hb-icon-size: ${r.iconSize};
+          --hb-padding: ${r.padding};
+          --hb-gap: ${r.gap};
+          --hb-radius: ${d};
+        "
+        aria-label="Run on Hermes Skills: ${this._options.command.replace(/"/g,"&quot;")}"
+      >
+        <span class="hb-btn-icon" aria-hidden="true">${m}</span>
+        <span class="hb-btn-label">Run on Hermes Skills</span>
+      </button>
+    `;let u=this.shadowRoot.querySelector(".hb-btn");u.addEventListener("click",()=>this.handleClick()),u.addEventListener("keydown",p=>{(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:e,command:a,skillUrl:t,popupTitle:o,popupDescription:i}=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),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:a}}))});return}y({variant:"hermes-skill",theme:this.getResolvedTheme(),title:o||"Run on Hermes Skills",description:i||"Copy and paste into a Hermes session to get started.",command:a,skillUrl:t,onCopy:s=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("hb-copy",{bubbles:!0,composed:!0,detail:{command:s}}))},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)}};b.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];function C(h="hermes-skill-button"){typeof customElements>"u"||customElements.get(h)||customElements.define(h,b)}C();function O(h){let c=document.createElement("hermes-skill-button");return c.options=h,c}export{b as HermesSkillButton,O as createHermesSkillButton,C as registerHermesSkillButton};
+//# sourceMappingURL=hermes-skill-button-5MLIQS4T.mjs.map

package/dist/hermes-skill-button-5MLIQS4T.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hermes-skill-button.ts"],"sourcesContent":["import type { HermesSkillButtonOptions, Theme, Size, Variant, Shape } from './types';\nimport { HERMES_SKILL_ICON } from './icons';\nimport { resolveTheme, themeToCSS, SIZE_MAP, SHAPE_MAP, BRAND_COLOR, BRAND_COLOR_HOVER, BRAND_COLOR_ACTIVE } 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(124, 58, 237, 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: #0D9488;\n    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.35);\n  }\n  :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n    background: #0F766E;\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: #292524;\n    border-color: #57534E;\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: #1C1917;\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: #D6D3D1;\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: #FAFAF9;\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(124, 58, 237, 0.08);\n    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);\n  }\n  :host([data-variant=\"outline\"][data-theme=\"branded\"]) .hb-btn:active {\n    background: rgba(124, 58, 237, 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: #14B8A6;\n    color: #14B8A6;\n  }\n  :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .hb-btn:hover {\n    background: rgba(20, 184, 166, 0.08);\n    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);\n  }\n  :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n    background: rgba(20, 184, 166, 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: #57534E;\n    color: #F5F0EB;\n  }\n  :host([data-variant=\"outline\"][data-theme=\"dark\"]) .hb-btn:hover {\n    border-color: ${BRAND_COLOR};\n    background: rgba(124, 58, 237, 0.08);\n  }\n  :host([data-variant=\"outline\"][data-theme=\"dark\"]) .hb-btn:active {\n    background: rgba(124, 58, 237, 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: #D6D3D1;\n    color: #1C1917;\n  }\n  :host([data-variant=\"outline\"][data-theme=\"light\"]) .hb-btn:hover {\n    border-color: ${BRAND_COLOR};\n    background: rgba(124, 58, 237, 0.05);\n  }\n  :host([data-variant=\"outline\"][data-theme=\"light\"]) .hb-btn:active {\n    background: rgba(124, 58, 237, 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(124, 58, 237, 0.1);\n  }\n  :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .hb-btn:active {\n    background: rgba(124, 58, 237, 0.16);\n    transform: scale(0.98);\n  }\n\n  :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn {\n    color: #14B8A6;\n  }\n  :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn:hover {\n    background: rgba(20, 184, 166, 0.1);\n  }\n  :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .hb-btn:active {\n    background: rgba(20, 184, 166, 0.16);\n    transform: scale(0.98);\n  }\n\n  :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .hb-btn {\n    color: #F5F0EB;\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: #1C1917;\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', 'skill-url', '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 skillUrl = this.getAttribute('skill-url');\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 (skillUrl !== null) this._options.skillUrl = skillUrl;\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, skillUrl } = 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    if (skillUrl) {\n      link.href = skillUrl;\n      link.setAttribute('data-skill-url', skillUrl);\n    } else {\n      link.href = `https://hermes.ai/skills?command=${encodeURIComponent(command)}`;\n      link.removeAttribute('data-skill-url');\n    }\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, skillUrl, 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        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      skillUrl,\n      onCopy: (cmd) => {\n        this._options.onCopy?.(cmd);\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":"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","names":["BUTTON_STYLES","BRAND_COLOR_HOVER","BRAND_COLOR_ACTIVE","BRAND_COLOR","HermesSkillButton","opts","command","skillUrl","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","showPopup","cmd","mq","handler","registerHermesSkillButton","tagName","createHermesSkillButton","options","el"]}