🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

claudebuttons

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

claudebuttons - npm Package Compare versions

Comparing version
1.1.0
 to
1.2.0
+563
dist/chunk-76XIGRJQ.mjs
var w=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Ears -->
<rect x="3.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>
<rect x="15.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>
<!-- Body -->
<rect x="2.5" y="5.5" width="19" height="13" rx="3" fill="currentColor"/>
<!-- Eyes -->
<ellipse cx="9" cy="11.5" rx="2" ry="2.5" fill="white" opacity="0.95"/>
<ellipse cx="15" cy="11.5" rx="2" ry="2.5" fill="white" opacity="0.95"/>
<!-- Pupils -->
<ellipse cx="9.6" cy="12" rx="1" ry="1.2" fill="#1C1917"/>
<ellipse cx="15.6" cy="12" rx="1" ry="1.2" fill="#1C1917"/>
<!-- Legs -->
<rect x="6.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
<rect x="13.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
</svg>`,k=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Lightning bolt -->
<path d="M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z" fill="currentColor"/>
<!-- Circuit path -->
<path d="M12.8 7.2L10.2 11.5l2.2 4" stroke="var(--cb-icon-accent, white)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- Circuit nodes -->
<circle cx="12.8" cy="7.2" r="1.3" fill="var(--cb-icon-accent, white)"/>
<circle cx="10.2" cy="11.5" r="1.3" fill="var(--cb-icon-accent, white)"/>
<circle cx="12.4" cy="15.5" r="1.3" fill="var(--cb-icon-accent, white)"/>
</svg>`,c=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-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>`,C=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;var T=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;var u=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="3" y="4" width="18" height="16" rx="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M3 9h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 13l2.5 2L7 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 17h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,b=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="4" y="5" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M4 8.5h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="6.5" cy="7" r="0.65" fill="currentColor"/>
<circle cx="8.5" cy="7" r="0.65" fill="currentColor"/>
<path d="M9 19.5h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8 16.5h8v3H8v-3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
</svg>`;var d="#D4795C",h="#C06A4E",R="#B35E43",l={branded:{bg:d,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:d,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:d,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:d,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function s(n){return n!=="system"?l[n]:typeof window>"u"?l.light:window.matchMedia("(prefers-color-scheme: dark)").matches?l.dark:l.light}function F(n){return`
--cb-bg: ${n.bg};
--cb-text: ${n.text};
--cb-border: ${n.border};
--cb-surface: ${n.surface};
--cb-surface-text: ${n.surfaceText};
--cb-muted: ${n.muted};
--cb-primary: ${n.primary};
--cb-primary-text: ${n.primaryText};
--cb-code-bg: ${n.codeBg};
--cb-code-text: ${n.codeText};
`}var z={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},q={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"}};function O(){if(typeof navigator>"u")return!0;let n=navigator.userAgent||"";return!!(!n.trim()||/\bFBAN\b|\bFBAV\b|FB_IAB|Instagram|Line\/|MicroMessenger|Snapchat|TikTok|LinkedInApp|Pinterest/i.test(n)||/Twitter for (iPhone|Android)/i.test(n)||/; wv\)/.test(n)||/Opera Mini|OPiOS/i.test(n))}function $(){if(typeof navigator>"u")return!1;let n=navigator.userAgent||"",i=typeof navigator.maxTouchPoints=="number"?navigator.maxTouchPoints:0,e=navigator.platform||"";return!!(/iPhone|iPod/i.test(n)||/iPad/i.test(n)||/Android/i.test(n)&&/Mobile/i.test(n)||/Android/i.test(n)&&!/Mobile/i.test(n)||(e==="MacIntel"||e==="MacARM")&&i>1||/webOS|BlackBerry|IEMobile|Opera Mini/i.test(n))}function D(){if($()||typeof navigator>"u")return!1;let n=navigator.userAgent||"",i=navigator.platform||"";return!!(/Win|Mac|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(i)||/Windows NT|Macintosh|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(n))}function H(){if(typeof window>"u"||typeof navigator>"u")return!1;if(window.isSecureContext&&navigator.clipboard&&typeof navigator.clipboard.writeText=="function")return!0;try{if(typeof document<"u"&&typeof document.queryCommandSupported=="function")return document.queryCommandSupported("copy")===!0}catch{}return!1}function E(){return typeof window<"u"&&typeof document<"u"&&typeof document.createElement=="function"}function L(){return!(!E()||O())}function A(){return!(!E()||O()||!D()||!H())}var I=`
: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; }
.cb-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: cb-fade-in 0.15s ease-out;
}
.cb-dialog {
position: relative;
width: 90%;
max-width: 460px;
background: var(--cb-surface);
color: var(--cb-surface-text);
border-radius: 16px;
box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--cb-border);
overflow: hidden;
animation: cb-scale-in 0.2s ease-out;
}
.cb-dialog-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--cb-border);
}
.cb-dialog-header-icon {
width: 36px;
height: 36px;
color: var(--cb-primary);
flex-shrink: 0;
}
.cb-dialog-header-text {
flex: 1;
min-width: 0;
}
.cb-dialog-title {
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: var(--cb-surface-text);
}
.cb-dialog-description {
font-size: 13px;
color: var(--cb-muted);
margin-top: 2px;
line-height: 1.4;
}
.cb-dialog-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--cb-muted);
cursor: pointer;
border-radius: 8px;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.cb-dialog-close:hover {
background: var(--cb-border);
color: var(--cb-surface-text);
}
.cb-dialog-close svg { width: 14px; height: 14px; }
.cb-dialog-body { padding: 20px 24px; }
.cb-step {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.cb-step:last-child { margin-bottom: 0; }
.cb-step-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--cb-primary);
color: var(--cb-primary-text);
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.cb-step-content {
flex: 1;
min-width: 0;
}
.cb-step-label {
font-size: 13px;
font-weight: 500;
color: var(--cb-surface-text);
margin-bottom: 8px;
line-height: 1.4;
}
.cb-code-block {
display: flex;
align-items: center;
background: var(--cb-code-bg);
color: var(--cb-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;
}
.cb-code-text {
flex: 1;
overflow-x: auto;
white-space: nowrap;
padding: 10px 0;
scrollbar-width: none;
}
.cb-code-text::-webkit-scrollbar { display: none; }
.cb-code-prefix {
color: var(--cb-muted);
user-select: none;
margin-right: 6px;
}
.cb-copy-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
min-width: 36px;
padding: 0 12px;
border: none;
background: var(--cb-primary);
color: var(--cb-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;
}
.cb-copy-btn:hover { background: ${h}; }
.cb-copy-btn:active { transform: scale(0.96); }
.cb-copy-btn svg { width: 14px; height: 14px; }
.cb-copy-btn[data-copied="true"] {
background: #16a34a;
}
.cb-dialog-footer {
padding: 16px 24px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.cb-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 44px;
border: none;
background: var(--cb-primary);
color: var(--cb-primary-text);
cursor: pointer;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
transition: background 0.15s, transform 0.1s;
}
.cb-action-btn:hover { background: ${h}; }
.cb-action-btn:active { transform: scale(0.98); }
.cb-action-btn svg { width: 16px; height: 16px; }
.cb-hint {
font-size: 12px;
color: var(--cb-muted);
text-align: center;
line-height: 1.4;
}
.cb-hint kbd {
display: inline-block;
padding: 1px 5px;
font-family: inherit;
font-size: 11px;
background: var(--cb-border);
border-radius: 4px;
border: 1px solid var(--cb-border);
}
.cb-launch-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.cb-launch-btn:active:not(:disabled) { transform: scale(0.99); }
.cb-launch-btn .cb-launch-svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.cb-launch-btn--desktop {
color: var(--cb-surface-text);
background: linear-gradient(
165deg,
color-mix(in srgb, var(--cb-primary) 14%, var(--cb-surface)) 0%,
var(--cb-surface) 55%
);
border: 1.5px solid color-mix(in srgb, var(--cb-primary) 38%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 55%, transparent) inset,
0 4px 14px -4px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}
.cb-launch-btn--desktop:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--cb-primary) 72%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 45%, transparent) inset,
0 8px 24px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}
.cb-launch-btn--desktop:focus-visible {
outline: 2px solid var(--cb-primary);
outline-offset: 2px;
}
.cb-launch-btn--terminal {
color: var(--cb-code-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--cb-code-text) 8%, var(--cb-code-bg)) 0%, var(--cb-code-bg) 100%);
border: 1px solid color-mix(in srgb, var(--cb-code-text) 22%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, black 25%, transparent) inset,
0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
.cb-launch-btn--terminal:hover:not(:disabled) {
border-color: color-mix(in srgb, #34d399 55%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, #34d399 20%, transparent) inset,
0 8px 28px -8px color-mix(in srgb, #34d399 28%, transparent);
}
.cb-launch-btn--terminal:focus-visible {
outline: 2px solid #34d399;
outline-offset: 2px;
}
.cb-launch-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: saturate(0.7);
box-shadow: none;
}
.cb-launch-btn--desktop:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn--terminal:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn:disabled .cb-launch-svg {
opacity: 0.75;
}
.cb-launch-sub {
display: block;
margin-top: 6px;
font-size: 11px;
font-weight: 500;
color: var(--cb-muted);
line-height: 1.35;
text-align: center;
}
@keyframes cb-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes cb-scale-in {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 480px) {
.cb-dialog {
width: 96%;
max-width: none;
border-radius: 14px;
max-height: 90dvh;
overflow-y: auto;
overscroll-behavior: contain;
}
.cb-dialog-header { padding: 16px 16px 12px; gap: 10px; }
.cb-dialog-header-icon { width: 28px; height: 28px; }
.cb-dialog-body { padding: 16px; }
.cb-dialog-footer { padding: 12px 16px 16px; }
.cb-step { gap: 10px; margin-bottom: 14px; }
.cb-step-num { width: 22px; height: 22px; font-size: 11px; }
.cb-step-label { font-size: 12px; margin-bottom: 6px; }
.cb-code-block { font-size: 12px; padding: 2px 2px 2px 10px; border-radius: 8px; }
.cb-copy-btn { height: 32px; padding: 0 10px; font-size: 11px; border-radius: 6px; }
.cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
.cb-launch-btn { min-height: 46px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.cb-launch-btn .cb-launch-svg { width: 20px; height: 20px; }
.cb-launch-sub { font-size: 10px; }
.cb-hint { font-size: 11px; }
}
@media (max-width: 360px) {
.cb-dialog { width: 100%; border-radius: 12px 12px 0 0; align-self: flex-end; }
.cb-copy-btn span { display: none; }
.cb-copy-btn { min-width: 32px; padding: 0 8px; }
}
@supports (padding: env(safe-area-inset-bottom)) {
.cb-dialog-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
`,m=class n extends HTMLElement{constructor(){super();this._mqCleanup=null;this._autoLaunchConsumed=!1;this.attachShadow({mode:"open"})}set options(e){this._autoLaunchConsumed=!1,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"),r=s(e);return{...o,primary:r.primary,primaryText:r.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:e,title:t,description:o,command:r,fullCommand:a,skillUrl:M,desktopLaunchUrl:P,autoLaunch:S}=this._options,_=this.resolvePopupTokens(),B=e==="claude-code"?w:k,x=e==="claude-code",p=a||r,g=P??"claude://",f=L(),v=A();if(this.shadowRoot.innerHTML=`
<style>${I}</style>
<div style="${F(_)}">
<div class="cb-backdrop" data-action="close"></div>
<div class="cb-dialog" role="dialog" aria-modal="true" aria-labelledby="cb-dialog-title">
<div class="cb-dialog-header">
<div class="cb-dialog-header-icon">${B}</div>
<div class="cb-dialog-header-text">
<div class="cb-dialog-title" id="cb-dialog-title">${t}</div>
${o?`<div class="cb-dialog-description">${o}</div>`:""}
</div>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${T}</button>
</div>
<div class="cb-dialog-body">
${x?this.renderClaudeCodeBody(p):this.renderCoworkBody(r,M)}
</div>
<div class="cb-dialog-footer">
${x?this.renderClaudeCodeFooter(p,v):this.renderCoworkFooter(this.escapeHref(g),f)}
</div>
</div>
</div>
`,this.setupListeners(),this.setupSystemThemeWatch(),S&&!this._autoLaunchConsumed){if(this._autoLaunchConsumed=!0,e==="cowork"&&f)this.openDesktopAppLink(g);else if(e==="claude-code"&&v){let y=this.shadowRoot?.querySelector('[data-action="launch-terminal"]');y&&this.launchTerminal(y,p)}}}openDesktopAppLink(e){if(this.dispatchEvent(new CustomEvent("cb-launch-desktop",{bubbles:!0,composed:!0,detail:{href:e}})),typeof document>"u")return;let t=document.createElement("a");t.href=e,t.rel="noopener noreferrer",t.style.cssText="position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none",document.body.appendChild(t),t.click(),requestAnimationFrame(()=>t.remove())}renderClaudeCodeBody(e){return`
<div class="cb-step">
<div class="cb-step-num">1</div>
<div class="cb-step-content">
<div class="cb-step-label">Copy this command to your clipboard</div>
<div class="cb-code-block">
<div class="cb-code-text"><span class="cb-code-prefix">$</span>${this.escapeHtml(e)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(e)}">${c}<span>Copy</span></button>
</div>
</div>
</div>
<div class="cb-step">
<div class="cb-step-num">2</div>
<div class="cb-step-content">
<div class="cb-step-label">Paste and run in your terminal</div>
</div>
</div>
`}renderCoworkBody(e,t){let o="";if(t){let r=`Install the skill from ${t} and run ${e}`;o+=`
<div class="cb-step">
<div class="cb-step-num">1</div>
<div class="cb-step-content">
<div class="cb-step-label">Copy this prompt to your clipboard</div>
<div class="cb-code-block">
<div class="cb-code-text">${this.escapeHtml(r)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(r)}">${c}<span>Copy</span></button>
</div>
</div>
</div>
<div class="cb-step">
<div class="cb-step-num">2</div>
<div class="cb-step-content">
<div class="cb-step-label">Paste into a Cowork session \u2014 Claude will fetch the skill and set it up for you</div>
</div>
</div>
`}else o+=`
<div class="cb-step">
<div class="cb-step-num">1</div>
<div class="cb-step-content">
<div class="cb-step-label">Copy this command to your clipboard</div>
<div class="cb-code-block">
<div class="cb-code-text">${this.escapeHtml(e)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(e)}">${c}<span>Copy</span></button>
</div>
</div>
</div>
<div class="cb-step">
<div class="cb-step-num">2</div>
<div class="cb-step-content">
<div class="cb-step-label">Paste and send in your Cowork session</div>
</div>
</div>
`;return o}renderCoworkFooter(e,t){let o="Open this page in Safari, Chrome, Firefox, or Edge. In-app browsers usually block opening apps.",r=t?"Opens the Claude app through your system link handler\u2014then paste the prompt below into Cowork.":"App links aren\u2019t supported in your current browser (common inside social or chat apps). Open this page in a full browser, or launch Claude Desktop manually and paste below.";return`
${t?`
<a
class="cb-launch-btn cb-launch-btn--desktop"
href="${e}"
data-action="launch-desktop"
rel="noopener noreferrer"
>
${b}
<span>Open Claude Desktop</span>
</a>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--desktop"
disabled
aria-disabled="true"
aria-label="Open Claude Desktop (unavailable in this browser)"
title="${this.escapeAttr(o)}"
>
${b}
<span>Open Claude Desktop</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(r)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}renderClaudeCodeFooter(e,t){let o="Available on desktop in a normal browser with clipboard access. Use Copy above, then paste into your terminal.",r=this.getTerminalLaunchSubcopy(t);return`
${t?`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
data-action="launch-terminal"
data-command="${this.escapeAttr(e)}"
aria-label="Copy command and open a terminal app"
>
${u}
<span>Open Terminal</span>
</button>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
disabled
aria-disabled="true"
aria-label="Open Terminal (unavailable in this environment)"
title="${this.escapeAttr(o)}"
>
${u}
<span>Open Terminal</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(r)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`}static isDesktopMac(){if(typeof navigator>"u")return!1;let e=navigator.platform||"",t=navigator.userAgent||"";return/iPhone|iPad|iPod/i.test(t)?!1:/Mac/.test(e)||/Mac OS X/.test(t)}getTerminalLaunchSubcopy(e){if(!e)return"Use the Copy button above, then paste into Terminal, PowerShell, or your preferred shell on a desktop computer.";if(typeof navigator>"u")return"Copies the command to your clipboard first.";let t=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(t)?"Copies the command to your clipboard. Open a terminal or SSH client on your device to run it.":n.isDesktopMac()?"Copies the command, then tries to open iTerm if you have it\u2014otherwise open Terminal and paste.":"Copies the command, then tries to open VS Code if installed\u2014paste into its terminal, or use any shell."}getTerminalProtocolUrl(){if(typeof navigator>"u")return null;let e=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(e)?null:n.isDesktopMac()?"iterm2://":"vscode://"}tryOpenCustomProtocol(e){if(typeof document>"u")return;let t=document.createElement("iframe");t.style.cssText="position:fixed;width:0;height:0;border:none;opacity:0;pointer-events:none",t.setAttribute("tabindex","-1"),t.setAttribute("aria-hidden","true"),t.src=e,document.body.appendChild(t),window.setTimeout(()=>t.remove(),1200)}escapeHref(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}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 r=t.dataset.command||"";this.copyToClipboard(r,t)}else if(o==="launch-desktop"){e.preventDefault();let r=t.getAttribute("href")||"";this.openDesktopAppLink(r||t.href)}else if(o==="launch-terminal"){let r=t.dataset.command||"";this.launchTerminal(t,r)}}),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)"),r=()=>this.render();o.addEventListener("change",r),this._mqCleanup=()=>o.removeEventListener("change",r)}async launchTerminal(e,t){let o=e.querySelector("span");try{await navigator.clipboard.writeText(t),this._options.onCopy?.(t);let r=this.getTerminalProtocolUrl();r&&this.tryOpenCustomProtocol(r),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:t}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}catch{let r=document.createElement("textarea");r.value=t,r.style.position="fixed",r.style.opacity="0",document.body.appendChild(r),r.select(),document.execCommand("copy"),document.body.removeChild(r),this._options.onCopy?.(t);let a=this.getTerminalProtocolUrl();a&&this.tryOpenCustomProtocol(a),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:t}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}}async copyToClipboard(e,t){try{await navigator.clipboard.writeText(e);let o=t.querySelector("span"),r=t,a=r.querySelector(".cb-icon-sm")?.outerHTML||"";t.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),r.innerHTML=`${C}<span>Copied!</span>`,this._options.onCopy?.(e),setTimeout(()=>{t.setAttribute("data-copied","false"),r.innerHTML=`${c}<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(".cb-dialog"),t=this.shadowRoot?.querySelector(".cb-backdrop");e&&(e.style.animation="cb-scale-in 0.15s ease-in reverse"),t&&(t.style.animation="cb-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("claude-popup-dialog")&&customElements.define("claude-popup-dialog",m);function X(n){let i=document.createElement("claude-popup-dialog");return i.options=n,document.body.appendChild(i),i}export{w as a,k as b,d as c,h as d,R as e,s as f,F as g,z as h,q as i,X as j};
//# sourceMappingURL=chunk-76XIGRJQ.mjs.map
+1
dist/chunk-76XIGRJQ.mjs.map
{"version":3,"sources":["../src/icons.ts","../src/themes.ts","../src/launch-capabilities.ts","../src/popup-dialog.ts"],"sourcesContent":["export const CLAUDE_CODE_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cb-icon\">\n <!-- Ears -->\n <rect x=\"3.5\" y=\"1.5\" width=\"5\" height=\"5\" rx=\"1.5\" fill=\"currentColor\"/>\n <rect x=\"15.5\" y=\"1.5\" width=\"5\" height=\"5\" rx=\"1.5\" fill=\"currentColor\"/>\n <!-- Body -->\n <rect x=\"2.5\" y=\"5.5\" width=\"19\" height=\"13\" rx=\"3\" fill=\"currentColor\"/>\n <!-- Eyes -->\n <ellipse cx=\"9\" cy=\"11.5\" rx=\"2\" ry=\"2.5\" fill=\"white\" opacity=\"0.95\"/>\n <ellipse cx=\"15\" cy=\"11.5\" rx=\"2\" ry=\"2.5\" fill=\"white\" opacity=\"0.95\"/>\n <!-- Pupils -->\n <ellipse cx=\"9.6\" cy=\"12\" rx=\"1\" ry=\"1.2\" fill=\"#1C1917\"/>\n <ellipse cx=\"15.6\" cy=\"12\" rx=\"1\" ry=\"1.2\" fill=\"#1C1917\"/>\n <!-- Legs -->\n <rect x=\"6.5\" y=\"18.5\" width=\"4\" height=\"3.5\" rx=\"1.5\" fill=\"currentColor\"/>\n <rect x=\"13.5\" y=\"18.5\" width=\"4\" height=\"3.5\" rx=\"1.5\" fill=\"currentColor\"/>\n</svg>`;\n\nexport const COWORK_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cb-icon\">\n <!-- Lightning bolt -->\n <path d=\"M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z\" fill=\"currentColor\"/>\n <!-- Circuit path -->\n <path d=\"M12.8 7.2L10.2 11.5l2.2 4\" stroke=\"var(--cb-icon-accent, white)\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n <!-- Circuit nodes -->\n <circle cx=\"12.8\" cy=\"7.2\" r=\"1.3\" fill=\"var(--cb-icon-accent, white)\"/>\n <circle cx=\"10.2\" cy=\"11.5\" r=\"1.3\" fill=\"var(--cb-icon-accent, white)\"/>\n <circle cx=\"12.4\" cy=\"15.5\" r=\"1.3\" fill=\"var(--cb-icon-accent, white)\"/>\n</svg>`;\n\nexport const COPY_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cb-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=\"cb-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=\"cb-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=\"cb-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=\"cb-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\n/** Larger terminal glyph for launch row (sized via CSS). */\nexport const TERMINAL_LAUNCH_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cb-launch-svg\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M3 9h18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M7 13l2.5 2L7 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.5 17h4.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>`;\n\nexport const DESKTOP_APP_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cb-launch-svg\">\n <rect x=\"4\" y=\"5\" width=\"16\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M4 8.5h16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <circle cx=\"6.5\" cy=\"7\" r=\"0.65\" fill=\"currentColor\"/>\n <circle cx=\"8.5\" cy=\"7\" r=\"0.65\" fill=\"currentColor\"/>\n <path d=\"M9 19.5h6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 16.5h8v3H8v-3z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"/>\n</svg>`;\n","import type { ThemeTokens, Theme } from './types';\n\nexport const BRAND_COLOR = '#D4795C';\nexport const BRAND_COLOR_HOVER = '#C06A4E';\nexport const BRAND_COLOR_ACTIVE = '#B35E43';\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: '#1C1917',\n muted: '#78716C',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#1C1917',\n codeText: '#F5F0EB',\n },\n 'branded-alt': {\n bg: '#6B5CE7',\n text: '#FFFFFF',\n border: 'transparent',\n surface: '#FFFFFF',\n surfaceText: '#1C1917',\n muted: '#78716C',\n primary: '#6B5CE7',\n primaryText: '#FFFFFF',\n codeBg: '#1C1917',\n codeText: '#F5F0EB',\n },\n dark: {\n bg: '#1C1917',\n text: '#F5F0EB',\n border: '#3D3530',\n surface: '#292524',\n surfaceText: '#F5F0EB',\n muted: '#A8A29E',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0C0A09',\n codeText: '#F5F0EB',\n },\n light: {\n bg: '#FFFFFF',\n text: '#1C1917',\n border: '#E7E5E4',\n surface: '#FAFAF9',\n surfaceText: '#1C1917',\n muted: '#78716C',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#1C1917',\n codeText: '#F5F0EB',\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 --cb-bg: ${tokens.bg};\n --cb-text: ${tokens.text};\n --cb-border: ${tokens.border};\n --cb-surface: ${tokens.surface};\n --cb-surface-text: ${tokens.surfaceText};\n --cb-muted: ${tokens.muted};\n --cb-primary: ${tokens.primary};\n --cb-primary-text: ${tokens.primaryText};\n --cb-code-bg: ${tokens.codeBg};\n --cb-code-text: ${tokens.codeText};\n `;\n}\n\nexport const ALT_BRAND_COLOR = '#6B5CE7';\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","/**\n * Heuristics for whether launch shortcuts are likely to work in the current\n * browser/OS. Custom schemes and clipboard APIs are unreliable in embedded\n * WebViews and on mobile for the terminal flow.\n */\n\n/** In-app / embedded browsers where custom URL schemes often fail or are blocked. */\nexport function isRestrictedEmbeddedBrowser(): boolean {\n if (typeof navigator === 'undefined') return true;\n const ua = navigator.userAgent || '';\n if (!ua.trim()) return true;\n\n if (\n /\\bFBAN\\b|\\bFBAV\\b|FB_IAB|Instagram|Line\\/|MicroMessenger|Snapchat|TikTok|LinkedInApp|Pinterest/i.test(ua)\n ) {\n return true;\n }\n\n if (/Twitter for (iPhone|Android)/i.test(ua)) return true;\n\n // Android WebView (not standalone Chrome)\n if (/; wv\\)/.test(ua)) return true;\n\n // Opera Mini / extreme proxies — clipboard and schemes are unreliable\n if (/Opera Mini|OPiOS/i.test(ua)) return true;\n\n return false;\n}\n\n/** Phones and tablets (including iPad with desktop UA). */\nexport function isMobileOrTabletDevice(): boolean {\n if (typeof navigator === 'undefined') return false;\n const ua = navigator.userAgent || '';\n const maxTouch = typeof navigator.maxTouchPoints === 'number' ? navigator.maxTouchPoints : 0;\n const platform = navigator.platform || '';\n\n if (/iPhone|iPod/i.test(ua)) return true;\n if (/iPad/i.test(ua)) return true;\n if (/Android/i.test(ua) && /Mobile/i.test(ua)) return true;\n if (/Android/i.test(ua) && !/Mobile/i.test(ua)) return true; // tablet-style Android UA\n if ((platform === 'MacIntel' || platform === 'MacARM') && maxTouch > 1) return true; // iPadOS\n\n if (/webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)) return true;\n\n return false;\n}\n\n/** Laptop / desktop class OS (excludes phones & tablets). */\nexport function isDesktopComputerOs(): boolean {\n if (isMobileOrTabletDevice()) return false;\n if (typeof navigator === 'undefined') return false;\n\n const ua = navigator.userAgent || '';\n const p = navigator.platform || '';\n\n if (/Win|Mac|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(p)) return true;\n if (/Windows NT|Macintosh|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(ua)) return true;\n\n return false;\n}\n\n/** Clipboard write likely to succeed from a user gesture (secure context API or legacy copy). */\nexport function canUseClipboardWithGesture(): boolean {\n if (typeof window === 'undefined' || typeof navigator === 'undefined') return false;\n\n if (window.isSecureContext && navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {\n return true;\n }\n\n try {\n if (typeof document !== 'undefined' && typeof document.queryCommandSupported === 'function') {\n return document.queryCommandSupported('copy') === true;\n }\n } catch {\n /* ignore */\n }\n\n return false;\n}\n\n/** Baseline APIs needed to show the dialog and attach an iframe for protocols. */\nexport function hasLaunchBaselineApis(): boolean {\n return typeof window !== 'undefined'\n && typeof document !== 'undefined'\n && typeof document.createElement === 'function';\n}\n\n/**\n * \"Open Claude Desktop\" via claude:// — works in most standalone desktop & mobile browsers,\n * not in typical in-app WebViews.\n */\nexport function isDesktopAppLinkSupported(): boolean {\n if (!hasLaunchBaselineApis()) return false;\n if (isRestrictedEmbeddedBrowser()) return false;\n return true;\n}\n\n/**\n * Terminal shortcut: desktop OS + clipboard + non-embedded browser.\n * (iTerm / VS Code handoff is desktop-only.)\n */\nexport function isTerminalLaunchSupported(): boolean {\n if (!hasLaunchBaselineApis()) return false;\n if (isRestrictedEmbeddedBrowser()) return false;\n if (!isDesktopComputerOs()) return false;\n if (!canUseClipboardWithGesture()) return false;\n return true;\n}\n","import type { PopupOptions, ThemeTokens } from './types';\nimport {\n CLAUDE_CODE_ICON,\n COWORK_ICON,\n COPY_ICON,\n CHECK_ICON,\n CLOSE_ICON,\n TERMINAL_LAUNCH_ICON,\n DESKTOP_APP_ICON,\n} from './icons';\nimport { resolveTheme, themeToCSS, BRAND_COLOR, BRAND_COLOR_HOVER } from './themes';\nimport {\n isDesktopAppLinkSupported,\n isTerminalLaunchSupported,\n} from './launch-capabilities';\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 .cb-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: cb-fade-in 0.15s ease-out;\n }\n\n .cb-dialog {\n position: relative;\n width: 90%;\n max-width: 460px;\n background: var(--cb-surface);\n color: var(--cb-surface-text);\n border-radius: 16px;\n box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--cb-border);\n overflow: hidden;\n animation: cb-scale-in 0.2s ease-out;\n }\n\n .cb-dialog-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--cb-border);\n }\n\n .cb-dialog-header-icon {\n width: 36px;\n height: 36px;\n color: var(--cb-primary);\n flex-shrink: 0;\n }\n\n .cb-dialog-header-text {\n flex: 1;\n min-width: 0;\n }\n\n .cb-dialog-title {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--cb-surface-text);\n }\n\n .cb-dialog-description {\n font-size: 13px;\n color: var(--cb-muted);\n margin-top: 2px;\n line-height: 1.4;\n }\n\n .cb-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(--cb-muted);\n cursor: pointer;\n border-radius: 8px;\n flex-shrink: 0;\n transition: background 0.15s, color 0.15s;\n }\n\n .cb-dialog-close:hover {\n background: var(--cb-border);\n color: var(--cb-surface-text);\n }\n\n .cb-dialog-close svg { width: 14px; height: 14px; }\n\n .cb-dialog-body { padding: 20px 24px; }\n\n .cb-step {\n display: flex;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .cb-step:last-child { margin-bottom: 0; }\n\n .cb-step-num {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: var(--cb-primary);\n color: var(--cb-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 .cb-step-content {\n flex: 1;\n min-width: 0;\n }\n\n .cb-step-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--cb-surface-text);\n margin-bottom: 8px;\n line-height: 1.4;\n }\n\n .cb-code-block {\n display: flex;\n align-items: center;\n background: var(--cb-code-bg);\n color: var(--cb-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 .cb-code-text {\n flex: 1;\n overflow-x: auto;\n white-space: nowrap;\n padding: 10px 0;\n scrollbar-width: none;\n }\n\n .cb-code-text::-webkit-scrollbar { display: none; }\n\n .cb-code-prefix {\n color: var(--cb-muted);\n user-select: none;\n margin-right: 6px;\n }\n\n .cb-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(--cb-primary);\n color: var(--cb-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 .cb-copy-btn:hover { background: ${BRAND_COLOR_HOVER}; }\n .cb-copy-btn:active { transform: scale(0.96); }\n .cb-copy-btn svg { width: 14px; height: 14px; }\n\n .cb-copy-btn[data-copied=\"true\"] {\n background: #16a34a;\n }\n\n .cb-dialog-footer {\n padding: 16px 24px 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .cb-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(--cb-primary);\n color: var(--cb-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 .cb-action-btn:hover { background: ${BRAND_COLOR_HOVER}; }\n .cb-action-btn:active { transform: scale(0.98); }\n .cb-action-btn svg { width: 16px; height: 16px; }\n\n .cb-hint {\n font-size: 12px;\n color: var(--cb-muted);\n text-align: center;\n line-height: 1.4;\n }\n\n .cb-hint kbd {\n display: inline-block;\n padding: 1px 5px;\n font-family: inherit;\n font-size: 11px;\n background: var(--cb-border);\n border-radius: 4px;\n border: 1px solid var(--cb-border);\n }\n\n .cb-launch-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 100%;\n min-height: 48px;\n padding: 12px 18px;\n border-radius: 12px;\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.02em;\n text-decoration: none;\n cursor: pointer;\n transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;\n -webkit-tap-highlight-color: transparent;\n }\n\n .cb-launch-btn:active:not(:disabled) { transform: scale(0.99); }\n\n .cb-launch-btn .cb-launch-svg {\n width: 22px;\n height: 22px;\n flex-shrink: 0;\n }\n\n .cb-launch-btn--desktop {\n color: var(--cb-surface-text);\n background: linear-gradient(\n 165deg,\n color-mix(in srgb, var(--cb-primary) 14%, var(--cb-surface)) 0%,\n var(--cb-surface) 55%\n );\n border: 1.5px solid color-mix(in srgb, var(--cb-primary) 38%, var(--cb-border));\n box-shadow:\n 0 1px 0 color-mix(in srgb, white 55%, transparent) inset,\n 0 4px 14px -4px color-mix(in srgb, var(--cb-primary) 35%, transparent);\n }\n\n .cb-launch-btn--desktop:hover:not(:disabled) {\n border-color: color-mix(in srgb, var(--cb-primary) 72%, var(--cb-border));\n box-shadow:\n 0 1px 0 color-mix(in srgb, white 45%, transparent) inset,\n 0 8px 24px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);\n }\n\n .cb-launch-btn--desktop:focus-visible {\n outline: 2px solid var(--cb-primary);\n outline-offset: 2px;\n }\n\n .cb-launch-btn--terminal {\n color: var(--cb-code-text);\n background: linear-gradient(180deg, color-mix(in srgb, var(--cb-code-text) 8%, var(--cb-code-bg)) 0%, var(--cb-code-bg) 100%);\n border: 1px solid color-mix(in srgb, var(--cb-code-text) 22%, var(--cb-code-bg));\n box-shadow:\n 0 0 0 1px color-mix(in srgb, black 25%, transparent) inset,\n 0 6px 20px -8px rgba(0, 0, 0, 0.45);\n }\n\n .cb-launch-btn--terminal:hover:not(:disabled) {\n border-color: color-mix(in srgb, #34d399 55%, var(--cb-code-bg));\n box-shadow:\n 0 0 0 1px color-mix(in srgb, #34d399 20%, transparent) inset,\n 0 8px 28px -8px color-mix(in srgb, #34d399 28%, transparent);\n }\n\n .cb-launch-btn--terminal:focus-visible {\n outline: 2px solid #34d399;\n outline-offset: 2px;\n }\n\n .cb-launch-btn:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n filter: saturate(0.7);\n box-shadow: none;\n }\n\n .cb-launch-btn--desktop:disabled {\n background: var(--cb-border);\n border-color: var(--cb-border);\n color: var(--cb-muted);\n }\n\n .cb-launch-btn--terminal:disabled {\n background: var(--cb-border);\n border-color: var(--cb-border);\n color: var(--cb-muted);\n }\n\n .cb-launch-btn:disabled .cb-launch-svg {\n opacity: 0.75;\n }\n\n .cb-launch-sub {\n display: block;\n margin-top: 6px;\n font-size: 11px;\n font-weight: 500;\n color: var(--cb-muted);\n line-height: 1.35;\n text-align: center;\n }\n\n @keyframes cb-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes cb-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 .cb-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 .cb-dialog-header { padding: 16px 16px 12px; gap: 10px; }\n .cb-dialog-header-icon { width: 28px; height: 28px; }\n .cb-dialog-body { padding: 16px; }\n .cb-dialog-footer { padding: 12px 16px 16px; }\n\n .cb-step { gap: 10px; margin-bottom: 14px; }\n .cb-step-num { width: 22px; height: 22px; font-size: 11px; }\n .cb-step-label { font-size: 12px; margin-bottom: 6px; }\n\n .cb-code-block { font-size: 12px; padding: 2px 2px 2px 10px; border-radius: 8px; }\n .cb-copy-btn { height: 32px; padding: 0 10px; font-size: 11px; border-radius: 6px; }\n .cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }\n .cb-launch-btn { min-height: 46px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }\n .cb-launch-btn .cb-launch-svg { width: 20px; height: 20px; }\n .cb-launch-sub { font-size: 10px; }\n .cb-hint { font-size: 11px; }\n }\n\n @media (max-width: 360px) {\n .cb-dialog { width: 100%; border-radius: 12px 12px 0 0; align-self: flex-end; }\n .cb-copy-btn span { display: none; }\n .cb-copy-btn { min-width: 32px; padding: 0 8px; }\n }\n\n @supports (padding: env(safe-area-inset-bottom)) {\n .cb-dialog-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }\n }\n`;\n\nexport class ClaudePopupDialog extends HTMLElement {\n private _options!: PopupOptions;\n private _mqCleanup: (() => void) | null = null;\n /** Prevents auto-launch from firing on every theme re-render; reset when `options` is set. */\n private _autoLaunchConsumed = false;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n set options(opts: PopupOptions) {\n this._autoLaunchConsumed = false;\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, desktopLaunchUrl, autoLaunch } = this._options;\n const tokens = this.resolvePopupTokens();\n const icon = variant === 'claude-code' ? CLAUDE_CODE_ICON : COWORK_ICON;\n\n const isClaudeCode = variant === 'claude-code';\n const displayCommand = fullCommand || command;\n const desktopHref = desktopLaunchUrl ?? 'claude://';\n const desktopLaunchOk = isDesktopAppLinkSupported();\n const terminalLaunchOk = isTerminalLaunchSupported();\n\n this.shadowRoot.innerHTML = `\n <style>${POPUP_STYLES}</style>\n <div style=\"${themeToCSS(tokens)}\">\n <div class=\"cb-backdrop\" data-action=\"close\"></div>\n <div class=\"cb-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"cb-dialog-title\">\n <div class=\"cb-dialog-header\">\n <div class=\"cb-dialog-header-icon\">${icon}</div>\n <div class=\"cb-dialog-header-text\">\n <div class=\"cb-dialog-title\" id=\"cb-dialog-title\">${title}</div>\n ${description ? `<div class=\"cb-dialog-description\">${description}</div>` : ''}\n </div>\n <button class=\"cb-dialog-close\" data-action=\"close\" aria-label=\"Close\">${CLOSE_ICON}</button>\n </div>\n <div class=\"cb-dialog-body\">\n ${isClaudeCode ? this.renderClaudeCodeBody(displayCommand) : this.renderCoworkBody(command, skillUrl)}\n </div>\n <div class=\"cb-dialog-footer\">\n ${isClaudeCode\n ? this.renderClaudeCodeFooter(displayCommand, terminalLaunchOk)\n : this.renderCoworkFooter(this.escapeHref(desktopHref), desktopLaunchOk)}\n </div>\n </div>\n </div>\n `;\n\n this.setupListeners();\n this.setupSystemThemeWatch();\n\n if (autoLaunch && !this._autoLaunchConsumed) {\n this._autoLaunchConsumed = true;\n if (variant === 'cowork' && desktopLaunchOk) {\n this.openDesktopAppLink(desktopHref);\n } else if (variant === 'claude-code' && terminalLaunchOk) {\n const termBtn = this.shadowRoot?.querySelector('[data-action=\"launch-terminal\"]') as HTMLElement | null;\n if (termBtn) void this.launchTerminal(termBtn, displayCommand);\n }\n }\n }\n\n /** Programmatic open (same as clicking the desktop launch control). */\n private openDesktopAppLink(href: string) {\n this.dispatchEvent(new CustomEvent('cb-launch-desktop', {\n bubbles: true,\n composed: true,\n detail: { href },\n }));\n if (typeof document === 'undefined') return;\n const a = document.createElement('a');\n a.href = href;\n a.rel = 'noopener noreferrer';\n a.style.cssText = 'position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none';\n document.body.appendChild(a);\n a.click();\n requestAnimationFrame(() => a.remove());\n }\n\n private renderClaudeCodeBody(command: string): string {\n return `\n <div class=\"cb-step\">\n <div class=\"cb-step-num\">1</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Copy this command to your clipboard</div>\n <div class=\"cb-code-block\">\n <div class=\"cb-code-text\"><span class=\"cb-code-prefix\">$</span>${this.escapeHtml(command)}</div>\n <button class=\"cb-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=\"cb-step\">\n <div class=\"cb-step-num\">2</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Paste and run in your terminal</div>\n </div>\n </div>\n `;\n }\n\n private renderCoworkBody(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=\"cb-step\">\n <div class=\"cb-step-num\">1</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Copy this prompt to your clipboard</div>\n <div class=\"cb-code-block\">\n <div class=\"cb-code-text\">${this.escapeHtml(fullPrompt)}</div>\n <button class=\"cb-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=\"cb-step\">\n <div class=\"cb-step-num\">2</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Paste into a Cowork session — Claude will fetch the skill and set it up for you</div>\n </div>\n </div>\n `;\n } else {\n steps += `\n <div class=\"cb-step\">\n <div class=\"cb-step-num\">1</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Copy this command to your clipboard</div>\n <div class=\"cb-code-block\">\n <div class=\"cb-code-text\">${this.escapeHtml(command)}</div>\n <button class=\"cb-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=\"cb-step\">\n <div class=\"cb-step-num\">2</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Paste and send in your Cowork session</div>\n </div>\n </div>\n `;\n }\n\n return steps;\n }\n\n private renderCoworkFooter(desktopHrefEscaped: string, enabled: boolean): string {\n const disabledTitle = 'Open this page in Safari, Chrome, Firefox, or Edge. In-app browsers usually block opening apps.';\n const sub = enabled\n ? 'Opens the Claude app through your system link handler—then paste the prompt below into Cowork.'\n : 'App links aren’t supported in your current browser (common inside social or chat apps). Open this page in a full browser, or launch Claude Desktop manually and paste below.';\n\n const control = enabled\n ? `\n <a\n class=\"cb-launch-btn cb-launch-btn--desktop\"\n href=\"${desktopHrefEscaped}\"\n data-action=\"launch-desktop\"\n rel=\"noopener noreferrer\"\n >\n ${DESKTOP_APP_ICON}\n <span>Open Claude Desktop</span>\n </a>`\n : `\n <button\n type=\"button\"\n class=\"cb-launch-btn cb-launch-btn--desktop\"\n disabled\n aria-disabled=\"true\"\n aria-label=\"Open Claude Desktop (unavailable in this browser)\"\n title=\"${this.escapeAttr(disabledTitle)}\"\n >\n ${DESKTOP_APP_ICON}\n <span>Open Claude Desktop</span>\n </button>`;\n\n return `\n ${control}\n <span class=\"cb-launch-sub\">${this.escapeHtml(sub)}</span>\n <div class=\"cb-hint\">Press <kbd>⌘</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>\n `;\n }\n\n private renderClaudeCodeFooter(displayCommand: string, enabled: boolean): string {\n const disabledTitle = 'Available on desktop in a normal browser with clipboard access. Use Copy above, then paste into your terminal.';\n const sub = this.getTerminalLaunchSubcopy(enabled);\n\n const control = enabled\n ? `\n <button\n type=\"button\"\n class=\"cb-launch-btn cb-launch-btn--terminal\"\n data-action=\"launch-terminal\"\n data-command=\"${this.escapeAttr(displayCommand)}\"\n aria-label=\"Copy command and open a terminal app\"\n >\n ${TERMINAL_LAUNCH_ICON}\n <span>Open Terminal</span>\n </button>`\n : `\n <button\n type=\"button\"\n class=\"cb-launch-btn cb-launch-btn--terminal\"\n disabled\n aria-disabled=\"true\"\n aria-label=\"Open Terminal (unavailable in this environment)\"\n title=\"${this.escapeAttr(disabledTitle)}\"\n >\n ${TERMINAL_LAUNCH_ICON}\n <span>Open Terminal</span>\n </button>`;\n\n return `\n ${control}\n <span class=\"cb-launch-sub\">${this.escapeHtml(sub)}</span>\n <div class=\"cb-hint\">Press <kbd>⌘</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>\n `;\n }\n\n private static isDesktopMac(): boolean {\n if (typeof navigator === 'undefined') return false;\n const p = navigator.platform || '';\n const ua = navigator.userAgent || '';\n const isIOS = /iPhone|iPad|iPod/i.test(ua);\n if (isIOS) return false;\n return /Mac/.test(p) || /Mac OS X/.test(ua);\n }\n\n private getTerminalLaunchSubcopy(enabled: boolean): string {\n if (!enabled) {\n return 'Use the Copy button above, then paste into Terminal, PowerShell, or your preferred shell on a desktop computer.';\n }\n if (typeof navigator === 'undefined') {\n return 'Copies the command to your clipboard first.';\n }\n const ua = navigator.userAgent || '';\n if (/iPhone|iPad|iPod|Android/i.test(ua)) {\n return 'Copies the command to your clipboard. Open a terminal or SSH client on your device to run it.';\n }\n if (ClaudePopupDialog.isDesktopMac()) {\n return 'Copies the command, then tries to open iTerm if you have it—otherwise open Terminal and paste.';\n }\n return 'Copies the command, then tries to open VS Code if installed—paste into its terminal, or use any shell.';\n }\n\n private getTerminalProtocolUrl(): string | null {\n if (typeof navigator === 'undefined') return null;\n const ua = navigator.userAgent || '';\n if (/iPhone|iPad|iPod|Android/i.test(ua)) return null;\n if (ClaudePopupDialog.isDesktopMac()) return 'iterm2://';\n return 'vscode://';\n }\n\n private tryOpenCustomProtocol(url: string) {\n if (typeof document === 'undefined') return;\n const iframe = document.createElement('iframe');\n iframe.style.cssText = 'position:fixed;width:0;height:0;border:none;opacity:0;pointer-events:none';\n iframe.setAttribute('tabindex', '-1');\n iframe.setAttribute('aria-hidden', 'true');\n iframe.src = url;\n document.body.appendChild(iframe);\n window.setTimeout(() => iframe.remove(), 1200);\n }\n\n private escapeHref(str: string): string {\n return str\n .replace(/&/g, '&amp;')\n .replace(/\"/g, '&quot;')\n .replace(/'/g, '&#39;')\n .replace(/</g, '&lt;')\n .replace(/>/g, '&gt;');\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 } else if (action === 'launch-desktop') {\n e.preventDefault();\n const raw = (target as HTMLAnchorElement).getAttribute('href') || '';\n this.openDesktopAppLink(raw || (target as HTMLAnchorElement).href);\n } else if (action === 'launch-terminal') {\n const cmd = target.dataset.command || '';\n void this.launchTerminal(target, cmd);\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 launchTerminal(button: HTMLElement, fullCommand: string) {\n const label = button.querySelector('span');\n\n try {\n await navigator.clipboard.writeText(fullCommand);\n this._options.onCopy?.(fullCommand);\n\n const proto = this.getTerminalProtocolUrl();\n if (proto) this.tryOpenCustomProtocol(proto);\n\n if (label) label.textContent = 'Copied!';\n\n this.dispatchEvent(new CustomEvent('cb-launch-terminal', {\n bubbles: true,\n composed: true,\n detail: { command: fullCommand },\n }));\n\n window.setTimeout(() => {\n if (label) label.textContent = 'Open Terminal';\n }, 2000);\n } catch {\n const textarea = document.createElement('textarea');\n textarea.value = fullCommand;\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?.(fullCommand);\n const proto = this.getTerminalProtocolUrl();\n if (proto) this.tryOpenCustomProtocol(proto);\n\n if (label) label.textContent = 'Copied!';\n this.dispatchEvent(new CustomEvent('cb-launch-terminal', {\n bubbles: true,\n composed: true,\n detail: { command: fullCommand },\n }));\n\n window.setTimeout(() => {\n if (label) label.textContent = 'Open Terminal';\n }, 2000);\n }\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 const originalIcon = iconContainer.querySelector('.cb-icon-sm')?.outerHTML || '';\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('.cb-dialog') as HTMLElement;\n const backdrop = this.shadowRoot?.querySelector('.cb-backdrop') as HTMLElement;\n\n if (dialog) {\n dialog.style.animation = 'cb-scale-in 0.15s ease-in reverse';\n }\n if (backdrop) {\n backdrop.style.animation = 'cb-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('claude-popup-dialog')) {\n customElements.define('claude-popup-dialog', ClaudePopupDialog);\n}\n\nexport function showPopup(options: PopupOptions): ClaudePopupDialog {\n const popup = document.createElement('claude-popup-dialog') as ClaudePopupDialog;\n popup.options = options;\n document.body.appendChild(popup);\n return popup;\n}\n"],"mappings":"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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAmLgBC,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAiCfA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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","names":["CLAUDE_CODE_ICON","COWORK_ICON","COPY_ICON","CHECK_ICON","CLOSE_ICON","TERMINAL_LAUNCH_ICON","DESKTOP_APP_ICON","BRAND_COLOR","BRAND_COLOR_HOVER","BRAND_COLOR_ACTIVE","themes","resolveTheme","theme","themeToCSS","tokens","SHAPE_MAP","SIZE_MAP","isRestrictedEmbeddedBrowser","ua","isMobileOrTabletDevice","maxTouch","platform","isDesktopComputerOs","p","canUseClipboardWithGesture","hasLaunchBaselineApis","isDesktopAppLinkSupported","isTerminalLaunchSupported","POPUP_STYLES","BRAND_COLOR_HOVER","ClaudePopupDialog","_ClaudePopupDialog","opts","theme","resolveTheme","prefersDark","base","brand","variant","title","description","command","fullCommand","skillUrl","desktopLaunchUrl","autoLaunch","tokens","icon","CLAUDE_CODE_ICON","COWORK_ICON","isClaudeCode","displayCommand","desktopHref","desktopLaunchOk","isDesktopAppLinkSupported","terminalLaunchOk","isTerminalLaunchSupported","themeToCSS","CLOSE_ICON","termBtn","href","a","COPY_ICON","steps","fullPrompt","desktopHrefEscaped","enabled","disabledTitle","sub","DESKTOP_APP_ICON","TERMINAL_LAUNCH_ICON","p","ua","url","iframe","str","target","action","cmd","raw","mq","handler","button","label","proto","textarea","iconContainer","originalIcon","CHECK_ICON","dialog","backdrop","div","showPopup","options","popup"]}
+263
dist/claude-code-button-OF7DCY4G.mjs
import{a as g,c as i,d as v,e as f,f as C,g as k,h as x,i as _,j as w}from"./chunk-76XIGRJQ.mjs";var A=`
: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; }
.cb-btn {
display: inline-flex;
align-items: center;
gap: var(--cb-gap);
height: var(--cb-height);
min-height: 44px;
padding: var(--cb-padding);
border: 1.5px solid var(--cb-border);
background: var(--cb-bg);
color: var(--cb-text);
font-family: inherit;
font-size: var(--cb-font-size);
font-weight: 600;
line-height: 1;
border-radius: var(--cb-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) {
.cb-btn { min-height: unset; }
}
/* \u2500\u2500\u2500 FILLED \u2500\u2500\u2500 */
:host([data-variant="filled"][data-theme="branded"]) .cb-btn,
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${v};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${f};
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn:hover {
background: #5A4BD6;
box-shadow: 0 2px 8px rgba(107, 92, 231, 0.35);
}
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn:active {
background: #4F41C8;
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-btn {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-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"]) .cb-btn:active {
background: #1C1917;
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="light"]) .cb-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"]) .cb-btn:hover {
border-color: #D6D3D1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn:active {
background: #FAFAF9;
transform: scale(0.98);
}
/* \u2500\u2500\u2500 OUTLINE \u2500\u2500\u2500 */
:host([data-variant="outline"][data-theme="branded"]) .cb-btn {
background: transparent;
border-color: ${i};
color: ${i};
}
:host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {
background: rgba(212, 121, 92, 0.08);
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.15);
}
:host([data-variant="outline"][data-theme="branded"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn {
background: transparent;
border-color: #6B5CE7;
color: #6B5CE7;
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn:hover {
background: rgba(107, 92, 231, 0.08);
box-shadow: 0 2px 8px rgba(107, 92, 231, 0.15);
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn:active {
background: rgba(107, 92, 231, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn {
background: transparent;
border-color: #57534E;
color: #F5F0EB;
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${i};
background: rgba(212, 121, 92, 0.08);
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn {
background: transparent;
border-color: #D6D3D1;
color: #1C1917;
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${i};
background: rgba(212, 121, 92, 0.05);
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.1);
transform: scale(0.98);
}
/* \u2500\u2500\u2500 GHOST \u2500\u2500\u2500 */
:host([data-variant="ghost"]) .cb-btn {
background: transparent;
border-color: transparent;
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${i};
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {
background: rgba(212, 121, 92, 0.1);
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.16);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn {
color: #6B5CE7;
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn:hover {
background: rgba(107, 92, 231, 0.1);
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn:active {
background: rgba(107, 92, 231, 0.16);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn {
color: #F5F0EB;
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn:hover {
background: rgba(255, 255, 255, 0.06);
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn:active {
background: rgba(255, 255, 255, 0.1);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn {
color: #1C1917;
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn:active {
background: rgba(0, 0, 0, 0.08);
transform: scale(0.98);
}
/* \u2500\u2500\u2500 FOCUS \u2500\u2500\u2500 */
.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${i});
outline-offset: 2px;
}
/* \u2500\u2500\u2500 ICON \u2500\u2500\u2500 */
.cb-btn-icon {
width: var(--cb-icon-size);
height: var(--cb-icon-size);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cb-btn-icon svg { width: 100%; height: 100%; }
:host([data-variant="filled"][data-theme="branded"]) .cb-btn-icon,
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn-icon {
color: #FFFFFF;
--cb-icon-accent: rgba(255,255,255,0.2);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${i});
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${i});
}
:host([data-variant="outline"]) .cb-btn-icon,
:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${i});
}
/* \u2500\u2500\u2500 LABEL \u2500\u2500\u2500 */
.cb-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"),s=this.getAttribute("shape"),r=this.getAttribute("popup"),n=this.getAttribute("prompt-flag"),c=this.getAttribute("popup-title"),h=this.getAttribute("popup-description"),b=this.getAttribute("auto-launch");e!==null&&(this._options.command=e),a&&(this._options.theme=a),t&&(this._options.size=t),o&&(this._options.variant=o),s&&(this._options.shape=s),r!==null&&(this._options.popup=r!=="false"),n!==null&&(this._options.promptFlag=n!=="false"),c!==null&&(this._options.popupTitle=c),h!==null&&(this._options.popupDescription=h),b===null?delete this._options.autoLaunch:this._options.autoLaunch=b!=="false"}updateLightDOM(){let{command:e}=this._options,a=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${e}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let t=this.querySelector("a[data-cb-crawl]");t||(t=document.createElement("a"),t.setAttribute("data-cb-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://claude.ai/code?command=${encodeURIComponent(a)}`,t.textContent=`Run on Claude Code: ${e}`,t.setAttribute("data-platform","claude-code"),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:`claude -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=C(e),s=this._options.size||"md",r=this._options.shape||"rounded",n=_[s],c=x[r][s];this.setAttribute("data-theme",a),this.setAttribute("data-variant",t);let h=t!=="filled"?"transparent":o.bg,b=t==="ghost"?"transparent":t==="outline"?o.primary:o.border,y=t!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${A}</style>
<button
class="cb-btn"
type="button"
style="
${k(o)}
--cb-bg: ${h};
--cb-border: ${b};
--cb-text: ${y};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${n.height};
--cb-font-size: ${n.fontSize};
--cb-icon-size: ${n.iconSize};
--cb-padding: ${n.ccPadding};
--cb-gap: ${n.gap};
--cb-radius: ${c};
"
aria-label="Run on Claude Code: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${g}</span>
<span class="cb-btn-label">Run on Claude Code</span>
</button>
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:e,command:a,popupTitle:t,popupDescription:o,autoLaunch:s}=this._options,r=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:a,fullCommand:r}})),e===!1){navigator.clipboard.writeText(r).then(()=>{this._options.onCopy?.(r),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:r}}))});return}w({variant:"claude-code",theme:this.getResolvedTheme(),title:t||"Run on Claude Code",description:o||"Execute this command in your terminal to get started.",command:a,fullCommand:r,autoLaunch:s===!0,onCopy:n=>{this._options.onCopy?.(n),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-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","auto-launch"];function E(d="claude-code-button"){typeof customElements>"u"||customElements.get(d)||customElements.define(d,l)}E();function L(d){let p=document.createElement("claude-code-button");return p.options=d,p}export{l as ClaudeCodeButton,L as createClaudeCodeButton,E as registerClaudeCodeButton};
//# sourceMappingURL=claude-code-button-OF7DCY4G.mjs.map
+1
dist/claude-code-button-OF7DCY4G.mjs.map
{"version":3,"sources":["../src/claude-code-button.ts"],"sourcesContent":["import type { ClaudeCodeButtonOptions, Theme, Size, Variant, Shape } from './types';\nimport { CLAUDE_CODE_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 .cb-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--cb-gap);\n height: var(--cb-height);\n min-height: 44px;\n padding: var(--cb-padding);\n border: 1.5px solid var(--cb-border);\n background: var(--cb-bg);\n color: var(--cb-text);\n font-family: inherit;\n font-size: var(--cb-font-size);\n font-weight: 600;\n line-height: 1;\n border-radius: var(--cb-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 .cb-btn { min-height: unset; }\n }\n\n /* ─── FILLED ─── */\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: ${BRAND_COLOR_HOVER};\n box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn:active {\n background: ${BRAND_COLOR_ACTIVE};\n transform: scale(0.98);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: #5A4BD6;\n box-shadow: 0 2px 8px rgba(107, 92, 231, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: #4F41C8;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-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\"]) .cb-btn:active {\n background: #1C1917;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .cb-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\"]) .cb-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\"]) .cb-btn:active {\n background: #FAFAF9;\n transform: scale(0.98);\n }\n\n /* ─── OUTLINE ─── */\n\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn {\n background: transparent;\n border-color: ${BRAND_COLOR};\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: rgba(212, 121, 92, 0.08);\n box-shadow: 0 2px 8px rgba(212, 121, 92, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn {\n background: transparent;\n border-color: #6B5CE7;\n color: #6B5CE7;\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: rgba(107, 92, 231, 0.08);\n box-shadow: 0 2px 8px rgba(107, 92, 231, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: rgba(107, 92, 231, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn {\n background: transparent;\n border-color: #57534E;\n color: #F5F0EB;\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(212, 121, 92, 0.08);\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn {\n background: transparent;\n border-color: #D6D3D1;\n color: #1C1917;\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(212, 121, 92, 0.05);\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.1);\n transform: scale(0.98);\n }\n\n /* ─── GHOST ─── */\n\n :host([data-variant=\"ghost\"]) .cb-btn {\n background: transparent;\n border-color: transparent;\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn {\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: rgba(212, 121, 92, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn {\n color: #6B5CE7;\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: rgba(107, 92, 231, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: rgba(107, 92, 231, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-btn {\n color: #F5F0EB;\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-btn:hover {\n background: rgba(255, 255, 255, 0.06);\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-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\"]) .cb-btn {\n color: #1C1917;\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .cb-btn:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .cb-btn:active {\n background: rgba(0, 0, 0, 0.08);\n transform: scale(0.98);\n }\n\n /* ─── FOCUS ─── */\n\n .cb-btn:focus-visible {\n outline: 2px solid var(--cb-focus-color, ${BRAND_COLOR});\n outline-offset: 2px;\n }\n\n /* ─── ICON ─── */\n\n .cb-btn-icon {\n width: var(--cb-icon-size);\n height: var(--cb-icon-size);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .cb-btn-icon svg { width: 100%; height: 100%; }\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn-icon,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn-icon {\n color: #FFFFFF;\n --cb-icon-accent: rgba(255,255,255,0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n }\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n }\n\n :host([data-variant=\"outline\"]) .cb-btn-icon,\n :host([data-variant=\"ghost\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n }\n\n /* ─── LABEL ─── */\n\n .cb-btn-label {\n letter-spacing: -0.01em;\n }\n`;\n\nexport class ClaudeCodeButton extends HTMLElement {\n static observedAttributes = ['command', 'theme', 'size', 'variant', 'shape', 'popup', 'prompt-flag', 'popup-title', 'popup-description', 'auto-launch'];\n\n private _options: ClaudeCodeButtonOptions = {\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<ClaudeCodeButtonOptions>) {\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 const autoLaunch = this.getAttribute('auto-launch');\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 if (autoLaunch === null) {\n delete this._options.autoLaunch;\n } else {\n this._options.autoLaunch = autoLaunch !== 'false';\n }\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 Claude Code: ${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-cb-crawl]') as HTMLAnchorElement | null;\n if (!link) {\n link = document.createElement('a');\n link.setAttribute('data-cb-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://claude.ai/code?command=${encodeURIComponent(fullCommand)}`;\n link.textContent = `Run on Claude Code: ${command}`;\n link.setAttribute('data-platform', 'claude-code');\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 `claude -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=\"cb-btn\"\n type=\"button\"\n style=\"\n ${themeToCSS(tokens)}\n --cb-bg: ${bgOverride};\n --cb-border: ${borderOverride};\n --cb-text: ${textOverride};\n --cb-accent-color: ${tokens.primary};\n --cb-focus-color: ${tokens.primary};\n --cb-height: ${sizeTokens.height};\n --cb-font-size: ${sizeTokens.fontSize};\n --cb-icon-size: ${sizeTokens.iconSize};\n --cb-padding: ${sizeTokens.ccPadding};\n --cb-gap: ${sizeTokens.gap};\n --cb-radius: ${radius};\n \"\n aria-label=\"Run on Claude Code: ${this._options.command.replace(/\"/g, '&quot;')}\"\n >\n <span class=\"cb-btn-icon\" aria-hidden=\"true\">${CLAUDE_CODE_ICON}</span>\n <span class=\"cb-btn-label\">Run on Claude Code</span>\n </button>\n `;\n\n const btn = this.shadowRoot.querySelector('.cb-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, autoLaunch } = this._options;\n const fullCommand = this.getFullCommand();\n\n this.dispatchEvent(new CustomEvent('cb-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('cb-copy', {\n bubbles: true,\n composed: true,\n detail: { command: fullCommand },\n }));\n });\n return;\n }\n\n showPopup({\n variant: 'claude-code',\n theme: this.getResolvedTheme(),\n title: popupTitle || 'Run on Claude Code',\n description: popupDescription || 'Execute this command in your terminal to get started.',\n command,\n fullCommand,\n autoLaunch: autoLaunch === true,\n onCopy: (cmd) => {\n this._options.onCopy?.(cmd);\n this.dispatchEvent(new CustomEvent('cb-copy', {\n bubbles: true,\n composed: true,\n detail: { command: cmd },\n }));\n },\n onClose: () => {\n this.dispatchEvent(new CustomEvent('cb-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 registerClaudeCodeButton(tagName = 'claude-code-button') {\n if (typeof customElements === 'undefined') return;\n if (!customElements.get(tagName)) {\n customElements.define(tagName, ClaudeCodeButton);\n }\n}\n\nregisterClaudeCodeButton();\n\nexport function createClaudeCodeButton(options: ClaudeCodeButtonOptions): ClaudeCodeButton {\n const el = document.createElement('claude-code-button') as ClaudeCodeButton;\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","ClaudeCodeButton","opts","command","theme","size","variant","shape","popup","promptFlag","popupTitle","popupDescription","autoLaunch","fullCommand","link","resolvedTheme","tokens","resolveTheme","sizeTokens","SIZE_MAP","radius","SHAPE_MAP","bgOverride","borderOverride","textOverride","themeToCSS","CLAUDE_CODE_ICON","btn","e","showPopup","cmd","mq","handler","registerClaudeCodeButton","tagName","createClaudeCodeButton","options","el"]}
+265
dist/cowork-button-5X3LZCJA.mjs
import{b as g,c as r,d as v,e as f,f as k,g as w,h as C,i as x,j as _}from"./chunk-76XIGRJQ.mjs";var A=`
: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; }
.cb-btn {
display: inline-flex;
align-items: center;
gap: var(--cb-gap);
height: var(--cb-height);
min-height: 44px;
padding: var(--cb-padding);
border: 1.5px solid var(--cb-border);
background: var(--cb-bg);
color: var(--cb-text);
font-family: inherit;
font-size: var(--cb-font-size);
font-weight: 600;
line-height: 1;
border-radius: var(--cb-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) {
.cb-btn { min-height: unset; }
}
/* \u2500\u2500\u2500 FILLED \u2500\u2500\u2500 */
:host([data-variant="filled"][data-theme="branded"]) .cb-btn,
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${v};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${f};
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn:hover {
background: #5A4BD6;
box-shadow: 0 2px 8px rgba(107, 92, 231, 0.35);
}
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn:active {
background: #4F41C8;
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-btn {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-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"]) .cb-btn:active {
background: #1C1917;
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="light"]) .cb-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"]) .cb-btn:hover {
border-color: #D6D3D1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn:active {
background: #FAFAF9;
transform: scale(0.98);
}
/* \u2500\u2500\u2500 OUTLINE \u2500\u2500\u2500 */
:host([data-variant="outline"][data-theme="branded"]) .cb-btn {
background: transparent;
border-color: ${r};
color: ${r};
}
:host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {
background: rgba(212, 121, 92, 0.08);
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.15);
}
:host([data-variant="outline"][data-theme="branded"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn {
background: transparent;
border-color: #6B5CE7;
color: #6B5CE7;
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn:hover {
background: rgba(107, 92, 231, 0.08);
box-shadow: 0 2px 8px rgba(107, 92, 231, 0.15);
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn:active {
background: rgba(107, 92, 231, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn {
background: transparent;
border-color: #57534E;
color: #F5F0EB;
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${r};
background: rgba(212, 121, 92, 0.08);
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn {
background: transparent;
border-color: #D6D3D1;
color: #1C1917;
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${r};
background: rgba(212, 121, 92, 0.05);
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.1);
transform: scale(0.98);
}
/* \u2500\u2500\u2500 GHOST \u2500\u2500\u2500 */
:host([data-variant="ghost"]) .cb-btn {
background: transparent;
border-color: transparent;
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${r};
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {
background: rgba(212, 121, 92, 0.1);
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.16);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn {
color: #6B5CE7;
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn:hover {
background: rgba(107, 92, 231, 0.1);
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn:active {
background: rgba(107, 92, 231, 0.16);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn {
color: #F5F0EB;
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn:hover {
background: rgba(255, 255, 255, 0.06);
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn:active {
background: rgba(255, 255, 255, 0.1);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn {
color: #1C1917;
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn:active {
background: rgba(0, 0, 0, 0.08);
transform: scale(0.98);
}
/* \u2500\u2500\u2500 FOCUS \u2500\u2500\u2500 */
.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${r});
outline-offset: 2px;
}
/* \u2500\u2500\u2500 ICON \u2500\u2500\u2500 */
.cb-btn-icon {
width: var(--cb-icon-size);
height: var(--cb-icon-size);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cb-btn-icon svg { width: 100%; height: 100%; }
:host([data-variant="filled"][data-theme="branded"]) .cb-btn-icon,
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn-icon {
color: #FFFFFF;
--cb-icon-accent: rgba(255,255,255,0.2);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${r});
--cb-icon-accent: #1C1917;
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${r});
--cb-icon-accent: #FFFFFF;
}
:host([data-variant="outline"]) .cb-btn-icon,
:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${r});
}
/* \u2500\u2500\u2500 LABEL \u2500\u2500\u2500 */
.cb-btn-label {
letter-spacing: -0.01em;
}
`,l=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"),n=this.getAttribute("popup"),c=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),h=this.getAttribute("auto-launch");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),n!==null&&(this._options.popup=n!=="false"),c!==null&&(this._options.popupTitle=c),b!==null&&(this._options.popupDescription=b),h===null?delete this._options.autoLaunch:this._options.autoLaunch=h!=="false"}updateLightDOM(){let{command:e,skillUrl:a}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${e}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let t=this.querySelector("a[data-cb-crawl]");t||(t=document.createElement("a"),t.setAttribute("data-cb-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 Cowork: ${e}`,t.setAttribute("data-platform","cowork"),t.setAttribute("data-command",e),a?(t.href=a,t.setAttribute("data-skill-url",a)):(t.href=`https://claude.ai/cowork?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=k(e),i=this._options.size||"md",s=this._options.shape||"rounded",n=x[i],c=C[s][i];this.setAttribute("data-theme",a),this.setAttribute("data-variant",t);let b=t!=="filled"?"transparent":o.bg,h=t==="ghost"?"transparent":t==="outline"?o.primary:o.border,y=t!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${A}</style>
<button
class="cb-btn"
type="button"
style="
${w(o)}
--cb-bg: ${b};
--cb-border: ${h};
--cb-text: ${y};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${n.height};
--cb-font-size: ${n.fontSize};
--cb-icon-size: ${n.iconSize};
--cb-padding: ${n.padding};
--cb-gap: ${n.gap};
--cb-radius: ${c};
"
aria-label="Run on Cowork: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${g}</span>
<span class="cb-btn-label">Run on Cowork</span>
</button>
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:e,command:a,skillUrl:t,popupTitle:o,popupDescription:i,autoLaunch:s}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:a}})),e===!1){navigator.clipboard.writeText(a).then(()=>{this._options.onCopy?.(a),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:a}}))});return}_({variant:"cowork",theme:this.getResolvedTheme(),title:o||"Run on Cowork",description:i||"Copy and paste into a Cowork session to get started.",command:a,skillUrl:t,autoLaunch:s===!0,onCopy:n=>{this._options.onCopy?.(n),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-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","skill-url","theme","size","variant","shape","popup","popup-title","popup-description","auto-launch"];function E(d="cowork-button"){typeof customElements>"u"||customElements.get(d)||customElements.define(d,l)}E();function O(d){let p=document.createElement("cowork-button");return p.options=d,p}export{l as CoworkButton,O as createCoworkButton,E as registerCoworkButton};
//# sourceMappingURL=cowork-button-5X3LZCJA.mjs.map
+1
dist/cowork-button-5X3LZCJA.mjs.map
{"version":3,"sources":["../src/cowork-button.ts"],"sourcesContent":["import type { CoworkButtonOptions, Theme, Size, Variant, Shape } from './types';\nimport { COWORK_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 .cb-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--cb-gap);\n height: var(--cb-height);\n min-height: 44px;\n padding: var(--cb-padding);\n border: 1.5px solid var(--cb-border);\n background: var(--cb-bg);\n color: var(--cb-text);\n font-family: inherit;\n font-size: var(--cb-font-size);\n font-weight: 600;\n line-height: 1;\n border-radius: var(--cb-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 .cb-btn { min-height: unset; }\n }\n\n /* ─── FILLED ─── */\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: ${BRAND_COLOR_HOVER};\n box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn:active {\n background: ${BRAND_COLOR_ACTIVE};\n transform: scale(0.98);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: #5A4BD6;\n box-shadow: 0 2px 8px rgba(107, 92, 231, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: #4F41C8;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-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\"]) .cb-btn:active {\n background: #1C1917;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .cb-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\"]) .cb-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\"]) .cb-btn:active {\n background: #FAFAF9;\n transform: scale(0.98);\n }\n\n /* ─── OUTLINE ─── */\n\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn {\n background: transparent;\n border-color: ${BRAND_COLOR};\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: rgba(212, 121, 92, 0.08);\n box-shadow: 0 2px 8px rgba(212, 121, 92, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn {\n background: transparent;\n border-color: #6B5CE7;\n color: #6B5CE7;\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: rgba(107, 92, 231, 0.08);\n box-shadow: 0 2px 8px rgba(107, 92, 231, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: rgba(107, 92, 231, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn {\n background: transparent;\n border-color: #57534E;\n color: #F5F0EB;\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(212, 121, 92, 0.08);\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn {\n background: transparent;\n border-color: #D6D3D1;\n color: #1C1917;\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(212, 121, 92, 0.05);\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.1);\n transform: scale(0.98);\n }\n\n /* ─── GHOST ─── */\n\n :host([data-variant=\"ghost\"]) .cb-btn {\n background: transparent;\n border-color: transparent;\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn {\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: rgba(212, 121, 92, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn {\n color: #6B5CE7;\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: rgba(107, 92, 231, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: rgba(107, 92, 231, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-btn {\n color: #F5F0EB;\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-btn:hover {\n background: rgba(255, 255, 255, 0.06);\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-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\"]) .cb-btn {\n color: #1C1917;\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .cb-btn:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .cb-btn:active {\n background: rgba(0, 0, 0, 0.08);\n transform: scale(0.98);\n }\n\n /* ─── FOCUS ─── */\n\n .cb-btn:focus-visible {\n outline: 2px solid var(--cb-focus-color, ${BRAND_COLOR});\n outline-offset: 2px;\n }\n\n /* ─── ICON ─── */\n\n .cb-btn-icon {\n width: var(--cb-icon-size);\n height: var(--cb-icon-size);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .cb-btn-icon svg { width: 100%; height: 100%; }\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn-icon,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn-icon {\n color: #FFFFFF;\n --cb-icon-accent: rgba(255,255,255,0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n --cb-icon-accent: #1C1917;\n }\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n --cb-icon-accent: #FFFFFF;\n }\n\n :host([data-variant=\"outline\"]) .cb-btn-icon,\n :host([data-variant=\"ghost\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n }\n\n /* ─── LABEL ─── */\n\n .cb-btn-label {\n letter-spacing: -0.01em;\n }\n`;\n\nexport class CoworkButton extends HTMLElement {\n static observedAttributes = ['command', 'skill-url', 'theme', 'size', 'variant', 'shape', 'popup', 'popup-title', 'popup-description', 'auto-launch'];\n\n private _options: CoworkButtonOptions = {\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<CoworkButtonOptions>) {\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 const autoLaunch = this.getAttribute('auto-launch');\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 if (autoLaunch === null) {\n delete this._options.autoLaunch;\n } else {\n this._options.autoLaunch = autoLaunch !== 'false';\n }\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 Cowork: ${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-cb-crawl]') as HTMLAnchorElement | null;\n if (!link) {\n link = document.createElement('a');\n link.setAttribute('data-cb-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 Cowork: ${command}`;\n link.setAttribute('data-platform', 'cowork');\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://claude.ai/cowork?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=\"cb-btn\"\n type=\"button\"\n style=\"\n ${themeToCSS(tokens)}\n --cb-bg: ${bgOverride};\n --cb-border: ${borderOverride};\n --cb-text: ${textOverride};\n --cb-accent-color: ${tokens.primary};\n --cb-focus-color: ${tokens.primary};\n --cb-height: ${sizeTokens.height};\n --cb-font-size: ${sizeTokens.fontSize};\n --cb-icon-size: ${sizeTokens.iconSize};\n --cb-padding: ${sizeTokens.padding};\n --cb-gap: ${sizeTokens.gap};\n --cb-radius: ${radius};\n \"\n aria-label=\"Run on Cowork: ${this._options.command.replace(/\"/g, '&quot;')}\"\n >\n <span class=\"cb-btn-icon\" aria-hidden=\"true\">${COWORK_ICON}</span>\n <span class=\"cb-btn-label\">Run on Cowork</span>\n </button>\n `;\n\n const btn = this.shadowRoot.querySelector('.cb-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, autoLaunch } = this._options;\n\n this.dispatchEvent(new CustomEvent('cb-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('cb-copy', {\n bubbles: true,\n composed: true,\n detail: { command },\n }));\n });\n return;\n }\n\n showPopup({\n variant: 'cowork',\n theme: this.getResolvedTheme(),\n title: popupTitle || 'Run on Cowork',\n description: popupDescription || 'Copy and paste into a Cowork session to get started.',\n command,\n skillUrl,\n autoLaunch: autoLaunch === true,\n onCopy: (cmd) => {\n this._options.onCopy?.(cmd);\n this.dispatchEvent(new CustomEvent('cb-copy', {\n bubbles: true,\n composed: true,\n detail: { command: cmd },\n }));\n },\n onClose: () => {\n this.dispatchEvent(new CustomEvent('cb-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 registerCoworkButton(tagName = 'cowork-button') {\n if (typeof customElements === 'undefined') return;\n if (!customElements.get(tagName)) {\n customElements.define(tagName, CoworkButton);\n }\n}\n\nregisterCoworkButton();\n\nexport function createCoworkButton(options: CoworkButtonOptions): CoworkButton {\n const el = document.createElement('cowork-button') as CoworkButton;\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","CoworkButton","opts","command","skillUrl","theme","size","variant","shape","popup","popupTitle","popupDescription","autoLaunch","link","resolvedTheme","tokens","resolveTheme","sizeTokens","SIZE_MAP","radius","SHAPE_MAP","bgOverride","borderOverride","textOverride","themeToCSS","COWORK_ICON","btn","e","showPopup","cmd","mq","handler","registerCoworkButton","tagName","createCoworkButton","options","el"]}
+57
-1
dist/index.d.mts

@@ -26,2 +26,8 @@ type Theme = 'branded' | 'branded-alt' | 'dark' | 'light' | 'system';

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Terminal / Open Claude Desktop) if supported.
* Launch controls stay visible for manual retry.
*/
autoLaunch?: boolean;
}

@@ -51,2 +57,7 @@ interface CoworkButtonOptions {

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Claude Desktop) if supported.
*/
autoLaunch?: boolean;
}

@@ -61,2 +72,9 @@ interface PopupOptions {

skillUrl?: string;
/** Custom URL to open Claude Desktop from the Cowork popup. Default: `claude://` */
desktopLaunchUrl?: string;
/**
* When true, after the dialog opens, immediately triggers the same action as the
* launch button once (if that environment supports it). Buttons remain for manual use.
*/
autoLaunch?: boolean;
onCopy?: (command: string) => void;

@@ -78,2 +96,26 @@ onClose?: () => void;

/**
* Heuristics for whether launch shortcuts are likely to work in the current
* browser/OS. Custom schemes and clipboard APIs are unreliable in embedded
* WebViews and on mobile for the terminal flow.
*/
/** In-app / embedded browsers where custom URL schemes often fail or are blocked. */
declare function isRestrictedEmbeddedBrowser(): boolean;
/** Phones and tablets (including iPad with desktop UA). */
declare function isMobileOrTabletDevice(): boolean;
/** Laptop / desktop class OS (excludes phones & tablets). */
declare function isDesktopComputerOs(): boolean;
/** Clipboard write likely to succeed from a user gesture (secure context API or legacy copy). */
declare function canUseClipboardWithGesture(): boolean;
/**
* "Open Claude Desktop" via claude:// — works in most standalone desktop & mobile browsers,
* not in typical in-app WebViews.
*/
declare function isDesktopAppLinkSupported(): boolean;
/**
* Terminal shortcut: desktop OS + clipboard + non-embedded browser.
* (iTerm / VS Code handoff is desktop-only.)
*/
declare function isTerminalLaunchSupported(): boolean;
declare class ClaudeCodeButton extends HTMLElement {

@@ -125,2 +167,4 @@ static observedAttributes: string[];

private _mqCleanup;
/** Prevents auto-launch from firing on every theme re-render; reset when `options` is set. */
private _autoLaunchConsumed;
constructor();

@@ -132,6 +176,16 @@ set options(opts: PopupOptions);

private render;
/** Programmatic open (same as clicking the desktop launch control). */
private openDesktopAppLink;
private renderClaudeCodeBody;
private renderCoworkBody;
private renderCoworkFooter;
private renderClaudeCodeFooter;
private static isDesktopMac;
private getTerminalLaunchSubcopy;
private getTerminalProtocolUrl;
private tryOpenCustomProtocol;
private escapeHref;
private setupListeners;
private setupSystemThemeWatch;
private launchTerminal;
private copyToClipboard;

@@ -185,2 +239,3 @@ close(): void;

'popup-description'?: string;
'auto-launch'?: string | boolean;
class?: string;

@@ -200,2 +255,3 @@ style?: string | Record<string, string>;

'popup-description'?: string;
'auto-launch'?: string | boolean;
class?: string;

@@ -253,2 +309,2 @@ style?: string | Record<string, string>;

export { ALT_BRAND_COLOR, BRAND_COLOR, type ButtonMetadata, CLAUDE_CODE_ICON, COWORK_ICON, ClaudeCodeButton, type ClaudeCodeButtonOptions, ClaudePopupDialog, CoworkButton, type CoworkButtonOptions, type PopupOptions, type Shape, type Size, type Theme, type ThemeTokens, type Variant, createClaudeCodeButton, createCoworkButton, discoverButtons, generateStructuredData, injectStructuredData, register, registerClaudeCodeButton, registerCoworkButton, resolveTheme, showPopup, themes };
export { ALT_BRAND_COLOR, BRAND_COLOR, type ButtonMetadata, CLAUDE_CODE_ICON, COWORK_ICON, ClaudeCodeButton, type ClaudeCodeButtonOptions, ClaudePopupDialog, CoworkButton, type CoworkButtonOptions, type PopupOptions, type Shape, type Size, type Theme, type ThemeTokens, type Variant, canUseClipboardWithGesture, createClaudeCodeButton, createCoworkButton, discoverButtons, generateStructuredData, injectStructuredData, isDesktopAppLinkSupported, isDesktopComputerOs, isMobileOrTabletDevice, isRestrictedEmbeddedBrowser, isTerminalLaunchSupported, register, registerClaudeCodeButton, registerCoworkButton, resolveTheme, showPopup, themes };
+57
-1
dist/index.d.ts

@@ -26,2 +26,8 @@ type Theme = 'branded' | 'branded-alt' | 'dark' | 'light' | 'system';

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Terminal / Open Claude Desktop) if supported.
* Launch controls stay visible for manual retry.
*/
autoLaunch?: boolean;
}

@@ -51,2 +57,7 @@ interface CoworkButtonOptions {

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Claude Desktop) if supported.
*/
autoLaunch?: boolean;
}

@@ -61,2 +72,9 @@ interface PopupOptions {

skillUrl?: string;
/** Custom URL to open Claude Desktop from the Cowork popup. Default: `claude://` */
desktopLaunchUrl?: string;
/**
* When true, after the dialog opens, immediately triggers the same action as the
* launch button once (if that environment supports it). Buttons remain for manual use.
*/
autoLaunch?: boolean;
onCopy?: (command: string) => void;

@@ -78,2 +96,26 @@ onClose?: () => void;

/**
* Heuristics for whether launch shortcuts are likely to work in the current
* browser/OS. Custom schemes and clipboard APIs are unreliable in embedded
* WebViews and on mobile for the terminal flow.
*/
/** In-app / embedded browsers where custom URL schemes often fail or are blocked. */
declare function isRestrictedEmbeddedBrowser(): boolean;
/** Phones and tablets (including iPad with desktop UA). */
declare function isMobileOrTabletDevice(): boolean;
/** Laptop / desktop class OS (excludes phones & tablets). */
declare function isDesktopComputerOs(): boolean;
/** Clipboard write likely to succeed from a user gesture (secure context API or legacy copy). */
declare function canUseClipboardWithGesture(): boolean;
/**
* "Open Claude Desktop" via claude:// — works in most standalone desktop & mobile browsers,
* not in typical in-app WebViews.
*/
declare function isDesktopAppLinkSupported(): boolean;
/**
* Terminal shortcut: desktop OS + clipboard + non-embedded browser.
* (iTerm / VS Code handoff is desktop-only.)
*/
declare function isTerminalLaunchSupported(): boolean;
declare class ClaudeCodeButton extends HTMLElement {

@@ -125,2 +167,4 @@ static observedAttributes: string[];

private _mqCleanup;
/** Prevents auto-launch from firing on every theme re-render; reset when `options` is set. */
private _autoLaunchConsumed;
constructor();

@@ -132,6 +176,16 @@ set options(opts: PopupOptions);

private render;
/** Programmatic open (same as clicking the desktop launch control). */
private openDesktopAppLink;
private renderClaudeCodeBody;
private renderCoworkBody;
private renderCoworkFooter;
private renderClaudeCodeFooter;
private static isDesktopMac;
private getTerminalLaunchSubcopy;
private getTerminalProtocolUrl;
private tryOpenCustomProtocol;
private escapeHref;
private setupListeners;
private setupSystemThemeWatch;
private launchTerminal;
private copyToClipboard;

@@ -185,2 +239,3 @@ close(): void;

'popup-description'?: string;
'auto-launch'?: string | boolean;
class?: string;

@@ -200,2 +255,3 @@ style?: string | Record<string, string>;

'popup-description'?: string;
'auto-launch'?: string | boolean;
class?: string;

@@ -253,2 +309,2 @@ style?: string | Record<string, string>;

export { ALT_BRAND_COLOR, BRAND_COLOR, type ButtonMetadata, CLAUDE_CODE_ICON, COWORK_ICON, ClaudeCodeButton, type ClaudeCodeButtonOptions, ClaudePopupDialog, CoworkButton, type CoworkButtonOptions, type PopupOptions, type Shape, type Size, type Theme, type ThemeTokens, type Variant, createClaudeCodeButton, createCoworkButton, discoverButtons, generateStructuredData, injectStructuredData, register, registerClaudeCodeButton, registerCoworkButton, resolveTheme, showPopup, themes };
export { ALT_BRAND_COLOR, BRAND_COLOR, type ButtonMetadata, CLAUDE_CODE_ICON, COWORK_ICON, ClaudeCodeButton, type ClaudeCodeButtonOptions, ClaudePopupDialog, CoworkButton, type CoworkButtonOptions, type PopupOptions, type Shape, type Size, type Theme, type ThemeTokens, type Variant, canUseClipboardWithGesture, createClaudeCodeButton, createCoworkButton, discoverButtons, generateStructuredData, injectStructuredData, isDesktopAppLinkSupported, isDesktopComputerOs, isMobileOrTabletDevice, isRestrictedEmbeddedBrowser, isTerminalLaunchSupported, register, registerClaudeCodeButton, registerCoworkButton, resolveTheme, showPopup, themes };
+227
-61
dist/index.global.js

@@ -1,2 +0,2 @@

"use strict";var ClaudeButtons=(()=>{var L=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var j=(r,n)=>{for(var t in n)L(r,t,{get:n[t],enumerable:!0})},V=(r,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of H(n))!U.call(r,e)&&e!==t&&L(r,e,{get:()=>n[e],enumerable:!(o=q(n,e))||o.enumerable});return r};var W=r=>V(L({},"__esModule",{value:!0}),r);var J={};j(J,{ALT_BRAND_COLOR:()=>M,BRAND_COLOR:()=>i,CLAUDE_CODE_ICON:()=>m,COWORK_ICON:()=>g,ClaudeCodeButton:()=>C,ClaudePopupDialog:()=>_,CoworkButton:()=>k,createClaudeCodeButton:()=>P,createCoworkButton:()=>N,discoverButtons:()=>S,generateStructuredData:()=>R,injectStructuredData:()=>I,register:()=>G,registerClaudeCodeButton:()=>F,registerCoworkButton:()=>A,resolveTheme:()=>l,showPopup:()=>x,themes:()=>v});var m=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
"use strict";var ClaudeButtons=(()=>{var M=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var tt=Object.getOwnPropertyNames;var et=Object.prototype.hasOwnProperty;var ot=(r,n)=>{for(var t in n)M(r,t,{get:n[t],enumerable:!0})},at=(r,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of tt(n))!et.call(r,o)&&o!==t&&M(r,o,{get:()=>n[o],enumerable:!(e=Q(n,o))||e.enumerable});return r};var rt=r=>at(M({},"__esModule",{value:!0}),r);var dt={};ot(dt,{ALT_BRAND_COLOR:()=>G,BRAND_COLOR:()=>i,CLAUDE_CODE_ICON:()=>v,COWORK_ICON:()=>x,ClaudeCodeButton:()=>w,ClaudePopupDialog:()=>E,CoworkButton:()=>T,canUseClipboardWithGesture:()=>z,createClaudeCodeButton:()=>X,createCoworkButton:()=>Z,discoverButtons:()=>H,generateStructuredData:()=>q,injectStructuredData:()=>J,isDesktopAppLinkSupported:()=>L,isDesktopComputerOs:()=>P,isMobileOrTabletDevice:()=>R,isRestrictedEmbeddedBrowser:()=>F,isTerminalLaunchSupported:()=>S,register:()=>ct,registerClaudeCodeButton:()=>_,registerCoworkButton:()=>O,resolveTheme:()=>l,showPopup:()=>y,themes:()=>k});function F(){if(typeof navigator>"u")return!0;let r=navigator.userAgent||"";return!!(!r.trim()||/\bFBAN\b|\bFBAV\b|FB_IAB|Instagram|Line\/|MicroMessenger|Snapchat|TikTok|LinkedInApp|Pinterest/i.test(r)||/Twitter for (iPhone|Android)/i.test(r)||/; wv\)/.test(r)||/Opera Mini|OPiOS/i.test(r))}function R(){if(typeof navigator>"u")return!1;let r=navigator.userAgent||"",n=typeof navigator.maxTouchPoints=="number"?navigator.maxTouchPoints:0,t=navigator.platform||"";return!!(/iPhone|iPod/i.test(r)||/iPad/i.test(r)||/Android/i.test(r)&&/Mobile/i.test(r)||/Android/i.test(r)&&!/Mobile/i.test(r)||(t==="MacIntel"||t==="MacARM")&&n>1||/webOS|BlackBerry|IEMobile|Opera Mini/i.test(r))}function P(){if(R()||typeof navigator>"u")return!1;let r=navigator.userAgent||"",n=navigator.platform||"";return!!(/Win|Mac|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(n)||/Windows NT|Macintosh|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(r))}function z(){if(typeof window>"u"||typeof navigator>"u")return!1;if(window.isSecureContext&&navigator.clipboard&&typeof navigator.clipboard.writeText=="function")return!0;try{if(typeof document<"u"&&typeof document.queryCommandSupported=="function")return document.queryCommandSupported("copy")===!0}catch{}return!1}function W(){return typeof window<"u"&&typeof document<"u"&&typeof document.createElement=="function"}function L(){return!(!W()||F())}function S(){return!(!W()||F()||!P()||!z())}var v=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Ears -->

@@ -16,3 +16,3 @@ <rect x="3.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>

<rect x="13.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
</svg>`,g=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
</svg>`,x=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Lightning bolt -->

@@ -26,10 +26,22 @@ <path d="M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z" fill="currentColor"/>

<circle cx="12.4" cy="15.5" r="1.3" fill="var(--cb-icon-accent, white)"/>
</svg>`,E=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,A=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-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>`,D=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,K=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;var z=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`;var Y=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;var i="#D4795C",u="#C06A4E",T="#B35E43",v={branded:{bg:i,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:i,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function l(r){return r!=="system"?v[r]:typeof window>"u"?v.light:window.matchMedia("(prefers-color-scheme: dark)").matches?v.dark:v.light}function f(r){return`
</svg>`;var I=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="3" y="4" width="18" height="16" rx="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M3 9h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 13l2.5 2L7 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 17h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,N=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="4" y="5" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M4 8.5h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="6.5" cy="7" r="0.65" fill="currentColor"/>
<circle cx="8.5" cy="7" r="0.65" fill="currentColor"/>
<path d="M9 19.5h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8 16.5h8v3H8v-3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
</svg>`;var i="#D4795C",g="#C06A4E",$="#B35E43",k={branded:{bg:i,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:i,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function l(r){return r!=="system"?k[r]:typeof window>"u"?k.light:window.matchMedia("(prefers-color-scheme: dark)").matches?k.dark:k.light}function C(r){return`
--cb-bg: ${r.bg};

@@ -45,3 +57,3 @@ --cb-text: ${r.text};

--cb-code-text: ${r.codeText};
`}var M="#6B5CE7",O={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 K=`
`}var G="#6B5CE7",B={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},D={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 nt=`
:host {

@@ -225,3 +237,3 @@ position: fixed;

.cb-copy-btn:hover { background: ${u}; }
.cb-copy-btn:hover { background: ${g}; }
.cb-copy-btn:active { transform: scale(0.96); }

@@ -259,3 +271,3 @@ .cb-copy-btn svg { width: 14px; height: 14px; }

.cb-action-btn:hover { background: ${u}; }
.cb-action-btn:hover { background: ${g}; }
.cb-action-btn:active { transform: scale(0.98); }

@@ -281,2 +293,108 @@ .cb-action-btn svg { width: 16px; height: 16px; }

.cb-launch-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.cb-launch-btn:active:not(:disabled) { transform: scale(0.99); }
.cb-launch-btn .cb-launch-svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.cb-launch-btn--desktop {
color: var(--cb-surface-text);
background: linear-gradient(
165deg,
color-mix(in srgb, var(--cb-primary) 14%, var(--cb-surface)) 0%,
var(--cb-surface) 55%
);
border: 1.5px solid color-mix(in srgb, var(--cb-primary) 38%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 55%, transparent) inset,
0 4px 14px -4px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}
.cb-launch-btn--desktop:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--cb-primary) 72%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 45%, transparent) inset,
0 8px 24px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}
.cb-launch-btn--desktop:focus-visible {
outline: 2px solid var(--cb-primary);
outline-offset: 2px;
}
.cb-launch-btn--terminal {
color: var(--cb-code-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--cb-code-text) 8%, var(--cb-code-bg)) 0%, var(--cb-code-bg) 100%);
border: 1px solid color-mix(in srgb, var(--cb-code-text) 22%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, black 25%, transparent) inset,
0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
.cb-launch-btn--terminal:hover:not(:disabled) {
border-color: color-mix(in srgb, #34d399 55%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, #34d399 20%, transparent) inset,
0 8px 28px -8px color-mix(in srgb, #34d399 28%, transparent);
}
.cb-launch-btn--terminal:focus-visible {
outline: 2px solid #34d399;
outline-offset: 2px;
}
.cb-launch-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: saturate(0.7);
box-shadow: none;
}
.cb-launch-btn--desktop:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn--terminal:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn:disabled .cb-launch-svg {
opacity: 0.75;
}
.cb-launch-sub {
display: block;
margin-top: 6px;
font-size: 11px;
font-weight: 500;
color: var(--cb-muted);
line-height: 1.35;
text-align: center;
}
@keyframes cb-fade-in {

@@ -314,2 +432,5 @@ from { opacity: 0; }

.cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
.cb-launch-btn { min-height: 46px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.cb-launch-btn .cb-launch-svg { width: 20px; height: 20px; }
.cb-launch-sub { font-size: 10px; }
.cb-hint { font-size: 11px; }

@@ -327,28 +448,24 @@ }

}
`,_=class extends HTMLElement{constructor(){super();this._mqCleanup=null;this.attachShadow({mode:"open"})}set options(t){this._options=t,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return l(t);let o=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return o?l("dark"):l("light");let e=o?l("dark"):l("light"),a=l(t);return{...e,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:o,description:e,command:a,fullCommand:s,skillUrl:c}=this._options,d=this.resolvePopupTokens(),b=t==="claude-code"?m:g,p=t==="claude-code",y=s||a;this.shadowRoot.innerHTML=`
<style>${K}</style>
<div style="${f(d)}">
`,E=class r extends HTMLElement{constructor(){super();this._mqCleanup=null;this._autoLaunchConsumed=!1;this.attachShadow({mode:"open"})}set options(t){this._autoLaunchConsumed=!1,this._options=t,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return l(t);let e=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return e?l("dark"):l("light");let o=e?l("dark"):l("light"),a=l(t);return{...o,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:e,description:o,command:a,fullCommand:c,skillUrl:d,desktopLaunchUrl:s,autoLaunch:p}=this._options,b=this.resolvePopupTokens(),u=t==="claude-code"?v:x,f=t==="claude-code",m=c||a,h=s??"claude://",U=L(),j=S();if(this.shadowRoot.innerHTML=`
<style>${nt}</style>
<div style="${C(b)}">
<div class="cb-backdrop" data-action="close"></div>
<div class="cb-dialog" role="dialog" aria-modal="true" aria-labelledby="cb-dialog-title">
<div class="cb-dialog-header">
<div class="cb-dialog-header-icon">${b}</div>
<div class="cb-dialog-header-icon">${u}</div>
<div class="cb-dialog-header-text">
<div class="cb-dialog-title" id="cb-dialog-title">${o}</div>
${e?`<div class="cb-dialog-description">${e}</div>`:""}
<div class="cb-dialog-title" id="cb-dialog-title">${e}</div>
${o?`<div class="cb-dialog-description">${o}</div>`:""}
</div>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${z}</button>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${Y}</button>
</div>
<div class="cb-dialog-body">
${p?this.renderClaudeCodeBody(y):this.renderCoworkBody(a,c)}
${f?this.renderClaudeCodeBody(m):this.renderCoworkBody(a,d)}
</div>
<div class="cb-dialog-footer">
${p?`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`:`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}
${f?this.renderClaudeCodeFooter(m,j):this.renderCoworkFooter(this.escapeHref(h),U)}
</div>
</div>
</div>
`,this.setupListeners(),this.setupSystemThemeWatch()}renderClaudeCodeBody(t){return`
`,this.setupListeners(),this.setupSystemThemeWatch(),p&&!this._autoLaunchConsumed){if(this._autoLaunchConsumed=!0,t==="cowork"&&U)this.openDesktopAppLink(h);else if(t==="claude-code"&&j){let V=this.shadowRoot?.querySelector('[data-action="launch-terminal"]');V&&this.launchTerminal(V,m)}}}openDesktopAppLink(t){if(this.dispatchEvent(new CustomEvent("cb-launch-desktop",{bubbles:!0,composed:!0,detail:{href:t}})),typeof document>"u")return;let e=document.createElement("a");e.href=t,e.rel="noopener noreferrer",e.style.cssText="position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none",document.body.appendChild(e),e.click(),requestAnimationFrame(()=>e.remove())}renderClaudeCodeBody(t){return`
<div class="cb-step">

@@ -360,3 +477,3 @@ <div class="cb-step-num">1</div>

<div class="cb-code-text"><span class="cb-code-prefix">$</span>${this.escapeHtml(t)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${E}<span>Copy</span></button>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${A}<span>Copy</span></button>
</div>

@@ -371,3 +488,3 @@ </div>

</div>
`}renderCoworkBody(t,o){let e="";if(o){let a=`Install the skill from ${o} and run ${t}`;e+=`
`}renderCoworkBody(t,e){let o="";if(e){let a=`Install the skill from ${e} and run ${t}`;o+=`
<div class="cb-step">

@@ -379,3 +496,3 @@ <div class="cb-step-num">1</div>

<div class="cb-code-text">${this.escapeHtml(a)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(a)}">${E}<span>Copy</span></button>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(a)}">${A}<span>Copy</span></button>
</div>

@@ -390,3 +507,3 @@ </div>

</div>
`}else e+=`
`}else o+=`
<div class="cb-step">

@@ -398,3 +515,3 @@ <div class="cb-step-num">1</div>

<div class="cb-code-text">${this.escapeHtml(t)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${E}<span>Copy</span></button>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${A}<span>Copy</span></button>
</div>

@@ -409,3 +526,52 @@ </div>

</div>
`;return e}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let o=t.target.closest("[data-action]");if(!o)return;let e=o.dataset.action;if(e==="close")this.close();else if(e==="copy"){let a=o.dataset.command||"";this.copyToClipboard(a,o)}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||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)}async copyToClipboard(t,o){try{await navigator.clipboard.writeText(t);let e=o.querySelector("span"),a=o,s=a.querySelector(".cb-icon-sm")?.outerHTML||"";o.setAttribute("data-copied","true"),e&&(e.textContent="Copied!"),a.innerHTML=`${D}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{o.setAttribute("data-copied","false"),a.innerHTML=`${E}<span>Copy</span>`},2e3)}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),this._options.onCopy?.(t)}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),o=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),o&&(o.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(t){let o=document.createElement("div");return o.textContent=t,o.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",_);function x(r){let n=document.createElement("claude-popup-dialog");return n.options=r,document.body.appendChild(n),n}var Y=`
`;return o}renderCoworkFooter(t,e){let o="Open this page in Safari, Chrome, Firefox, or Edge. In-app browsers usually block opening apps.",a=e?"Opens the Claude app through your system link handler\u2014then paste the prompt below into Cowork.":"App links aren\u2019t supported in your current browser (common inside social or chat apps). Open this page in a full browser, or launch Claude Desktop manually and paste below.";return`
${e?`
<a
class="cb-launch-btn cb-launch-btn--desktop"
href="${t}"
data-action="launch-desktop"
rel="noopener noreferrer"
>
${N}
<span>Open Claude Desktop</span>
</a>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--desktop"
disabled
aria-disabled="true"
aria-label="Open Claude Desktop (unavailable in this browser)"
title="${this.escapeAttr(o)}"
>
${N}
<span>Open Claude Desktop</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}renderClaudeCodeFooter(t,e){let o="Available on desktop in a normal browser with clipboard access. Use Copy above, then paste into your terminal.",a=this.getTerminalLaunchSubcopy(e);return`
${e?`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
data-action="launch-terminal"
data-command="${this.escapeAttr(t)}"
aria-label="Copy command and open a terminal app"
>
${I}
<span>Open Terminal</span>
</button>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
disabled
aria-disabled="true"
aria-label="Open Terminal (unavailable in this environment)"
title="${this.escapeAttr(o)}"
>
${I}
<span>Open Terminal</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`}static isDesktopMac(){if(typeof navigator>"u")return!1;let t=navigator.platform||"",e=navigator.userAgent||"";return/iPhone|iPad|iPod/i.test(e)?!1:/Mac/.test(t)||/Mac OS X/.test(e)}getTerminalLaunchSubcopy(t){if(!t)return"Use the Copy button above, then paste into Terminal, PowerShell, or your preferred shell on a desktop computer.";if(typeof navigator>"u")return"Copies the command to your clipboard first.";let e=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(e)?"Copies the command to your clipboard. Open a terminal or SSH client on your device to run it.":r.isDesktopMac()?"Copies the command, then tries to open iTerm if you have it\u2014otherwise open Terminal and paste.":"Copies the command, then tries to open VS Code if installed\u2014paste into its terminal, or use any shell."}getTerminalProtocolUrl(){if(typeof navigator>"u")return null;let t=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(t)?null:r.isDesktopMac()?"iterm2://":"vscode://"}tryOpenCustomProtocol(t){if(typeof document>"u")return;let e=document.createElement("iframe");e.style.cssText="position:fixed;width:0;height:0;border:none;opacity:0;pointer-events:none",e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.src=t,document.body.appendChild(e),window.setTimeout(()=>e.remove(),1200)}escapeHref(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let e=t.target.closest("[data-action]");if(!e)return;let o=e.dataset.action;if(o==="close")this.close();else if(o==="copy"){let a=e.dataset.command||"";this.copyToClipboard(a,e)}else if(o==="launch-desktop"){t.preventDefault();let a=e.getAttribute("href")||"";this.openDesktopAppLink(a||e.href)}else if(o==="launch-terminal"){let a=e.dataset.command||"";this.launchTerminal(e,a)}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();o.addEventListener("change",a),this._mqCleanup=()=>o.removeEventListener("change",a)}async launchTerminal(t,e){let o=t.querySelector("span");try{await navigator.clipboard.writeText(e),this._options.onCopy?.(e);let a=this.getTerminalProtocolUrl();a&&this.tryOpenCustomProtocol(a),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}catch{let a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),this._options.onCopy?.(e);let c=this.getTerminalProtocolUrl();c&&this.tryOpenCustomProtocol(c),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}}async copyToClipboard(t,e){try{await navigator.clipboard.writeText(t);let o=e.querySelector("span"),a=e,c=a.querySelector(".cb-icon-sm")?.outerHTML||"";e.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),a.innerHTML=`${K}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{e.setAttribute("data-copied","false"),a.innerHTML=`${A}<span>Copy</span>`},2e3)}catch{let o=document.createElement("textarea");o.value=t,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o),this._options.onCopy?.(t)}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),e=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),e&&(e.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",E);function y(r){let n=document.createElement("claude-popup-dialog");return n.options=r,document.body.appendChild(n),n}var it=`
:host {

@@ -455,7 +621,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${T};
background: ${$};
transform: scale(0.98);

@@ -648,4 +814,4 @@ }

}
`,C=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),o=this.getAttribute("theme"),e=this.getAttribute("size"),a=this.getAttribute("variant"),s=this.getAttribute("shape"),c=this.getAttribute("popup"),d=this.getAttribute("prompt-flag"),b=this.getAttribute("popup-title"),p=this.getAttribute("popup-description");t!==null&&(this._options.command=t),o&&(this._options.theme=o),e&&(this._options.size=e),a&&(this._options.variant=a),s&&(this._options.shape=s),c!==null&&(this._options.popup=c!=="false"),d!==null&&(this._options.promptFlag=d!=="false"),b!==null&&(this._options.popupTitle=b),p!==null&&(this._options.popupDescription=p)}updateLightDOM(){let{command:t}=this._options,o=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.href=`https://claude.ai/code?command=${encodeURIComponent(o)}`,e.textContent=`Run on Claude Code: ${t}`,e.setAttribute("data-platform","claude-code"),e.setAttribute("data-command",t),e.setAttribute("data-full-command",o)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:o}=this._options;return o===!1?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),o=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",a=l(t),s=this._options.size||"md",c=this._options.shape||"rounded",d=$[s],b=O[c][s];this.setAttribute("data-theme",o),this.setAttribute("data-variant",e);let p=e!=="filled"?"transparent":a.bg,y=e==="ghost"?"transparent":e==="outline"?a.primary:a.border,B=e!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${Y}</style>
`,w=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("theme"),o=this.getAttribute("size"),a=this.getAttribute("variant"),c=this.getAttribute("shape"),d=this.getAttribute("popup"),s=this.getAttribute("prompt-flag"),p=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),u=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e&&(this._options.theme=e),o&&(this._options.size=o),a&&(this._options.variant=a),c&&(this._options.shape=c),d!==null&&(this._options.popup=d!=="false"),s!==null&&(this._options.promptFlag=s!=="false"),p!==null&&(this._options.popupTitle=p),b!==null&&(this._options.popupDescription=b),u===null?delete this._options.autoLaunch:this._options.autoLaunch=u!=="false"}updateLightDOM(){let{command:t}=this._options,e=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.href=`https://claude.ai/code?command=${encodeURIComponent(e)}`,o.textContent=`Run on Claude Code: ${t}`,o.setAttribute("data-platform","claude-code"),o.setAttribute("data-command",t),o.setAttribute("data-full-command",e)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:e}=this._options;return e===!1?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=l(t),c=this._options.size||"md",d=this._options.shape||"rounded",s=D[c],p=B[d][c];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let b=o!=="filled"?"transparent":a.bg,u=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,f=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${it}</style>
<button

@@ -655,21 +821,21 @@ class="cb-btn"

style="
${f(a)}
--cb-bg: ${p};
--cb-border: ${y};
--cb-text: ${B};
${C(a)}
--cb-bg: ${b};
--cb-border: ${u};
--cb-text: ${f};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${d.height};
--cb-font-size: ${d.fontSize};
--cb-icon-size: ${d.iconSize};
--cb-padding: ${d.ccPadding};
--cb-gap: ${d.gap};
--cb-radius: ${b};
--cb-height: ${s.height};
--cb-font-size: ${s.fontSize};
--cb-icon-size: ${s.iconSize};
--cb-padding: ${s.ccPadding};
--cb-gap: ${s.gap};
--cb-radius: ${p};
"
aria-label="Run on Claude Code: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${m}</span>
<span class="cb-btn-icon" aria-hidden="true">${v}</span>
<span class="cb-btn-label">Run on Claude Code</span>
</button>
`;let w=this.shadowRoot.querySelector(".cb-btn");w.addEventListener("click",()=>this.handleClick()),w.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:o,popupTitle:e,popupDescription:a}=this._options,s=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:o,fullCommand:s}})),t===!1){navigator.clipboard.writeText(s).then(()=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:s}}))});return}x({variant:"claude-code",theme:this.getResolvedTheme(),title:e||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:o,fullCommand:s,onCopy:c=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:c}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();t.addEventListener("change",o),this._mqCleanup=()=>t.removeEventListener("change",o)}};C.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];function F(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,C)}F();function P(r){let n=document.createElement("claude-code-button");return n.options=r,n}var Z=`
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:e,popupTitle:o,popupDescription:a,autoLaunch:c}=this._options,d=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:e,fullCommand:d}})),t===!1){navigator.clipboard.writeText(d).then(()=>{this._options.onCopy?.(d),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:d}}))});return}y({variant:"claude-code",theme:this.getResolvedTheme(),title:o||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:e,fullCommand:d,autoLaunch:c===!0,onCopy:s=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:s}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e)}};w.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description","auto-launch"];function _(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,w)}_();function X(r){let n=document.createElement("claude-code-button");return n.options=r,n}var st=`
:host {

@@ -719,7 +885,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${T};
background: ${$};
transform: scale(0.98);

@@ -914,4 +1080,4 @@ }

}
`,k=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),o=this.getAttribute("skill-url"),e=this.getAttribute("theme"),a=this.getAttribute("size"),s=this.getAttribute("variant"),c=this.getAttribute("shape"),d=this.getAttribute("popup"),b=this.getAttribute("popup-title"),p=this.getAttribute("popup-description");t!==null&&(this._options.command=t),o!==null&&(this._options.skillUrl=o),e&&(this._options.theme=e),a&&(this._options.size=a),s&&(this._options.variant=s),c&&(this._options.shape=c),d!==null&&(this._options.popup=d!=="false"),b!==null&&(this._options.popupTitle=b),p!==null&&(this._options.popupDescription=p)}updateLightDOM(){let{command:t,skillUrl:o}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.textContent=`Run on Cowork: ${t}`,e.setAttribute("data-platform","cowork"),e.setAttribute("data-command",t),o?(e.href=o,e.setAttribute("data-skill-url",o)):(e.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,e.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),o=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",a=l(t),s=this._options.size||"md",c=this._options.shape||"rounded",d=$[s],b=O[c][s];this.setAttribute("data-theme",o),this.setAttribute("data-variant",e);let p=e!=="filled"?"transparent":a.bg,y=e==="ghost"?"transparent":e==="outline"?a.primary:a.border,B=e!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${Z}</style>
`,T=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("skill-url"),o=this.getAttribute("theme"),a=this.getAttribute("size"),c=this.getAttribute("variant"),d=this.getAttribute("shape"),s=this.getAttribute("popup"),p=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),u=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e!==null&&(this._options.skillUrl=e),o&&(this._options.theme=o),a&&(this._options.size=a),c&&(this._options.variant=c),d&&(this._options.shape=d),s!==null&&(this._options.popup=s!=="false"),p!==null&&(this._options.popupTitle=p),b!==null&&(this._options.popupDescription=b),u===null?delete this._options.autoLaunch:this._options.autoLaunch=u!=="false"}updateLightDOM(){let{command:t,skillUrl:e}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.textContent=`Run on Cowork: ${t}`,o.setAttribute("data-platform","cowork"),o.setAttribute("data-command",t),e?(o.href=e,o.setAttribute("data-skill-url",e)):(o.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,o.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=l(t),c=this._options.size||"md",d=this._options.shape||"rounded",s=D[c],p=B[d][c];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let b=o!=="filled"?"transparent":a.bg,u=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,f=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${st}</style>
<button

@@ -921,21 +1087,21 @@ class="cb-btn"

style="
${f(a)}
--cb-bg: ${p};
--cb-border: ${y};
--cb-text: ${B};
${C(a)}
--cb-bg: ${b};
--cb-border: ${u};
--cb-text: ${f};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${d.height};
--cb-font-size: ${d.fontSize};
--cb-icon-size: ${d.iconSize};
--cb-padding: ${d.padding};
--cb-gap: ${d.gap};
--cb-radius: ${b};
--cb-height: ${s.height};
--cb-font-size: ${s.fontSize};
--cb-icon-size: ${s.iconSize};
--cb-padding: ${s.padding};
--cb-gap: ${s.gap};
--cb-radius: ${p};
"
aria-label="Run on Cowork: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${g}</span>
<span class="cb-btn-icon" aria-hidden="true">${x}</span>
<span class="cb-btn-label">Run on Cowork</span>
</button>
`;let w=this.shadowRoot.querySelector(".cb-btn");w.addEventListener("click",()=>this.handleClick()),w.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:o,skillUrl:e,popupTitle:a,popupDescription:s}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:o}})),t===!1){navigator.clipboard.writeText(o).then(()=>{this._options.onCopy?.(o),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:o}}))});return}x({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:s||"Copy and paste into a Cowork session to get started.",command:o,skillUrl:e,onCopy:c=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:c}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();t.addEventListener("change",o),this._mqCleanup=()=>t.removeEventListener("change",o)}};k.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];function A(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,k)}A();function N(r){let n=document.createElement("cowork-button");return n.options=r,n}function S(){if(typeof document>"u")return[];let r=[];return document.querySelectorAll("claude-code-button").forEach(n=>{let t=n.getAttribute("command")||"",a=n.getAttribute("prompt-flag")!=="false"?`claude -p "${t}"`:t;r.push({platform:"claude-code",command:t,fullCommand:a})}),document.querySelectorAll("cowork-button").forEach(n=>{let t=n.getAttribute("command")||"",o=n.getAttribute("skill-url")||void 0;r.push({platform:"cowork",command:t,...o&&{skillUrl:o}})}),r}function R(){let r=S();return r.length===0?{}:{"@context":"https://schema.org","@type":"WebPage",potentialAction:r.map(t=>{if(t.platform==="claude-code")return{"@type":"Action",name:`Run on Claude Code: ${t.command}`,description:t.command,target:{"@type":"EntryPoint",urlTemplate:`https://claude.ai/code?command=${encodeURIComponent(t.fullCommand||t.command)}`,actionPlatform:"https://claude.ai/code"},object:{"@type":"SoftwareSourceCode",runtimePlatform:"Claude Code",text:t.fullCommand||t.command}};let o={"@type":"EntryPoint",actionPlatform:"https://claude.ai/cowork"};t.skillUrl?o.urlTemplate=t.skillUrl:o.urlTemplate=`https://claude.ai/cowork?command=${encodeURIComponent(t.command)}`;let e={"@type":"Action",name:`Run on Cowork: ${t.command}`,description:t.command,target:o};return t.skillUrl&&(e.object={"@type":"SoftwareApplication",name:t.command,downloadUrl:t.skillUrl,applicationCategory:"AI Skill",operatingSystem:"Claude Cowork"}),e})}}function I(){if(typeof document>"u")return;let r=document.querySelector("script[data-claudebuttons-jsonld]");r&&r.remove();let n=R();if(!n||!("potentialAction"in n))return;let t=document.createElement("script");t.type="application/ld+json",t.setAttribute("data-claudebuttons-jsonld",""),t.textContent=JSON.stringify(n,null,2),document.head.appendChild(t)}function G(){F(),A()}return W(J);})();
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:e,skillUrl:o,popupTitle:a,popupDescription:c,autoLaunch:d}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:e}})),t===!1){navigator.clipboard.writeText(e).then(()=>{this._options.onCopy?.(e),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:e}}))});return}y({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:c||"Copy and paste into a Cowork session to get started.",command:e,skillUrl:o,autoLaunch:d===!0,onCopy:s=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:s}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e)}};T.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description","auto-launch"];function O(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,T)}O();function Z(r){let n=document.createElement("cowork-button");return n.options=r,n}function H(){if(typeof document>"u")return[];let r=[];return document.querySelectorAll("claude-code-button").forEach(n=>{let t=n.getAttribute("command")||"",a=n.getAttribute("prompt-flag")!=="false"?`claude -p "${t}"`:t;r.push({platform:"claude-code",command:t,fullCommand:a})}),document.querySelectorAll("cowork-button").forEach(n=>{let t=n.getAttribute("command")||"",e=n.getAttribute("skill-url")||void 0;r.push({platform:"cowork",command:t,...e&&{skillUrl:e}})}),r}function q(){let r=H();return r.length===0?{}:{"@context":"https://schema.org","@type":"WebPage",potentialAction:r.map(t=>{if(t.platform==="claude-code")return{"@type":"Action",name:`Run on Claude Code: ${t.command}`,description:t.command,target:{"@type":"EntryPoint",urlTemplate:`https://claude.ai/code?command=${encodeURIComponent(t.fullCommand||t.command)}`,actionPlatform:"https://claude.ai/code"},object:{"@type":"SoftwareSourceCode",runtimePlatform:"Claude Code",text:t.fullCommand||t.command}};let e={"@type":"EntryPoint",actionPlatform:"https://claude.ai/cowork"};t.skillUrl?e.urlTemplate=t.skillUrl:e.urlTemplate=`https://claude.ai/cowork?command=${encodeURIComponent(t.command)}`;let o={"@type":"Action",name:`Run on Cowork: ${t.command}`,description:t.command,target:e};return t.skillUrl&&(o.object={"@type":"SoftwareApplication",name:t.command,downloadUrl:t.skillUrl,applicationCategory:"AI Skill",operatingSystem:"Claude Cowork"}),o})}}function J(){if(typeof document>"u")return;let r=document.querySelector("script[data-claudebuttons-jsonld]");r&&r.remove();let n=q();if(!n||!("potentialAction"in n))return;let t=document.createElement("script");t.type="application/ld+json",t.setAttribute("data-claudebuttons-jsonld",""),t.textContent=JSON.stringify(n,null,2),document.head.appendChild(t)}function ct(){_(),O()}return rt(dt);})();
//# sourceMappingURL=index.global.js.map
+242
-76
dist/index.js

@@ -1,2 +0,2 @@

'use strict';var f=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
'use strict';function $(){if(typeof navigator>"u")return true;let r=navigator.userAgent||"";return !!(!r.trim()||/\bFBAN\b|\bFBAV\b|FB_IAB|Instagram|Line\/|MicroMessenger|Snapchat|TikTok|LinkedInApp|Pinterest/i.test(r)||/Twitter for (iPhone|Android)/i.test(r)||/; wv\)/.test(r)||/Opera Mini|OPiOS/i.test(r))}function N(){if(typeof navigator>"u")return false;let r=navigator.userAgent||"",n=typeof navigator.maxTouchPoints=="number"?navigator.maxTouchPoints:0,t=navigator.platform||"";return !!(/iPhone|iPod/i.test(r)||/iPad/i.test(r)||/Android/i.test(r)&&/Mobile/i.test(r)||/Android/i.test(r)&&!/Mobile/i.test(r)||(t==="MacIntel"||t==="MacARM")&&n>1||/webOS|BlackBerry|IEMobile|Opera Mini/i.test(r))}function H(){if(N()||typeof navigator>"u")return false;let r=navigator.userAgent||"",n=navigator.platform||"";return !!(/Win|Mac|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(n)||/Windows NT|Macintosh|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(r))}function q(){if(typeof window>"u"||typeof navigator>"u")return false;if(window.isSecureContext&&navigator.clipboard&&typeof navigator.clipboard.writeText=="function")return true;try{if(typeof document<"u"&&typeof document.queryCommandSupported=="function")return document.queryCommandSupported("copy")===!0}catch{}return false}function U(){return typeof window<"u"&&typeof document<"u"&&typeof document.createElement=="function"}function B(){return !(!U()||$())}function D(){return !(!U()||$()||!H()||!q())}var x=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Ears -->

@@ -16,3 +16,3 @@ <rect x="3.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>

<rect x="13.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
</svg>`,x=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
</svg>`,k=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Lightning bolt -->

@@ -29,7 +29,19 @@ <path d="M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z" fill="currentColor"/>

<path d="M3 10V3.5A1.5 1.5 0 014.5 2H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,L=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,j=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;var S=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`;var V=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;var n="#D4795C",u="#C06A4E",_="#B35E43",k={branded:{bg:n,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:n,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:n,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:n,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function p(r){return r!=="system"?k[r]:typeof window>"u"?k.light:window.matchMedia("(prefers-color-scheme: dark)").matches?k.dark:k.light}function m(r){return `
</svg>`;var M=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="3" y="4" width="18" height="16" rx="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M3 9h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 13l2.5 2L7 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 17h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,R=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="4" y="5" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M4 8.5h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="6.5" cy="7" r="0.65" fill="currentColor"/>
<circle cx="8.5" cy="7" r="0.65" fill="currentColor"/>
<path d="M9 19.5h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8 16.5h8v3H8v-3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
</svg>`;var s="#D4795C",g="#C06A4E",E="#B35E43",y={branded:{bg:s,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:s,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:s,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:s,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function l(r){return r!=="system"?y[r]:typeof window>"u"?y.light:window.matchMedia("(prefers-color-scheme: dark)").matches?y.dark:y.light}function v(r){return `
--cb-bg: ${r.bg};

@@ -45,3 +57,3 @@ --cb-text: ${r.text};

--cb-code-text: ${r.codeText};
`}var z="#6B5CE7",F={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},A={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 M=`
`}var Y="#6B5CE7",_={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},O={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 G=`
:host {

@@ -225,3 +237,3 @@ position: fixed;

.cb-copy-btn:hover { background: ${u}; }
.cb-copy-btn:hover { background: ${g}; }
.cb-copy-btn:active { transform: scale(0.96); }

@@ -259,3 +271,3 @@ .cb-copy-btn svg { width: 14px; height: 14px; }

.cb-action-btn:hover { background: ${u}; }
.cb-action-btn:hover { background: ${g}; }
.cb-action-btn:active { transform: scale(0.98); }

@@ -281,2 +293,108 @@ .cb-action-btn svg { width: 16px; height: 16px; }

.cb-launch-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.cb-launch-btn:active:not(:disabled) { transform: scale(0.99); }
.cb-launch-btn .cb-launch-svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.cb-launch-btn--desktop {
color: var(--cb-surface-text);
background: linear-gradient(
165deg,
color-mix(in srgb, var(--cb-primary) 14%, var(--cb-surface)) 0%,
var(--cb-surface) 55%
);
border: 1.5px solid color-mix(in srgb, var(--cb-primary) 38%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 55%, transparent) inset,
0 4px 14px -4px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}
.cb-launch-btn--desktop:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--cb-primary) 72%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 45%, transparent) inset,
0 8px 24px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}
.cb-launch-btn--desktop:focus-visible {
outline: 2px solid var(--cb-primary);
outline-offset: 2px;
}
.cb-launch-btn--terminal {
color: var(--cb-code-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--cb-code-text) 8%, var(--cb-code-bg)) 0%, var(--cb-code-bg) 100%);
border: 1px solid color-mix(in srgb, var(--cb-code-text) 22%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, black 25%, transparent) inset,
0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
.cb-launch-btn--terminal:hover:not(:disabled) {
border-color: color-mix(in srgb, #34d399 55%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, #34d399 20%, transparent) inset,
0 8px 28px -8px color-mix(in srgb, #34d399 28%, transparent);
}
.cb-launch-btn--terminal:focus-visible {
outline: 2px solid #34d399;
outline-offset: 2px;
}
.cb-launch-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: saturate(0.7);
box-shadow: none;
}
.cb-launch-btn--desktop:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn--terminal:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn:disabled .cb-launch-svg {
opacity: 0.75;
}
.cb-launch-sub {
display: block;
margin-top: 6px;
font-size: 11px;
font-weight: 500;
color: var(--cb-muted);
line-height: 1.35;
text-align: center;
}
@keyframes cb-fade-in {

@@ -314,2 +432,5 @@ from { opacity: 0; }

.cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
.cb-launch-btn { min-height: 46px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.cb-launch-btn .cb-launch-svg { width: 20px; height: 20px; }
.cb-launch-sub { font-size: 10px; }
.cb-hint { font-size: 11px; }

@@ -327,28 +448,24 @@ }

}
`,T=class extends HTMLElement{constructor(){super();this._mqCleanup=null;this.attachShadow({mode:"open"});}set options(t){this._options=t,this.render();}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null;}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return p(t);let o=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return o?p("dark"):p("light");let e=o?p("dark"):p("light"),a=p(t);return {...e,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:o,description:e,command:a,fullCommand:s,skillUrl:c}=this._options,d=this.resolvePopupTokens(),b=t==="claude-code"?f:x,l=t==="claude-code",g=s||a;this.shadowRoot.innerHTML=`
<style>${M}</style>
<div style="${m(d)}">
`,F=class r extends HTMLElement{constructor(){super();this._mqCleanup=null;this._autoLaunchConsumed=false;this.attachShadow({mode:"open"});}set options(t){this._autoLaunchConsumed=false,this._options=t,this.render();}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null;}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return l(t);let e=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return e?l("dark"):l("light");let o=e?l("dark"):l("light"),a=l(t);return {...o,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:e,description:o,command:a,fullCommand:c,skillUrl:d,desktopLaunchUrl:i,autoLaunch:p}=this._options,b=this.resolvePopupTokens(),u=t==="claude-code"?x:k,f=t==="claude-code",m=c||a,h=i??"claude://",P=B(),z=D();if(this.shadowRoot.innerHTML=`
<style>${G}</style>
<div style="${v(b)}">
<div class="cb-backdrop" data-action="close"></div>
<div class="cb-dialog" role="dialog" aria-modal="true" aria-labelledby="cb-dialog-title">
<div class="cb-dialog-header">
<div class="cb-dialog-header-icon">${b}</div>
<div class="cb-dialog-header-icon">${u}</div>
<div class="cb-dialog-header-text">
<div class="cb-dialog-title" id="cb-dialog-title">${o}</div>
${e?`<div class="cb-dialog-description">${e}</div>`:""}
<div class="cb-dialog-title" id="cb-dialog-title">${e}</div>
${o?`<div class="cb-dialog-description">${o}</div>`:""}
</div>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${S}</button>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${V}</button>
</div>
<div class="cb-dialog-body">
${l?this.renderClaudeCodeBody(g):this.renderCoworkBody(a,c)}
${f?this.renderClaudeCodeBody(m):this.renderCoworkBody(a,d)}
</div>
<div class="cb-dialog-footer">
${l?`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`:`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}
${f?this.renderClaudeCodeFooter(m,z):this.renderCoworkFooter(this.escapeHref(h),P)}
</div>
</div>
</div>
`,this.setupListeners(),this.setupSystemThemeWatch();}renderClaudeCodeBody(t){return `
`,this.setupListeners(),this.setupSystemThemeWatch(),p&&!this._autoLaunchConsumed){if(this._autoLaunchConsumed=true,t==="cowork"&&P)this.openDesktopAppLink(h);else if(t==="claude-code"&&z){let I=this.shadowRoot?.querySelector('[data-action="launch-terminal"]');I&&this.launchTerminal(I,m);}}}openDesktopAppLink(t){if(this.dispatchEvent(new CustomEvent("cb-launch-desktop",{bubbles:true,composed:true,detail:{href:t}})),typeof document>"u")return;let e=document.createElement("a");e.href=t,e.rel="noopener noreferrer",e.style.cssText="position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none",document.body.appendChild(e),e.click(),requestAnimationFrame(()=>e.remove());}renderClaudeCodeBody(t){return `
<div class="cb-step">

@@ -370,3 +487,3 @@ <div class="cb-step-num">1</div>

</div>
`}renderCoworkBody(t,o){let e="";if(o){let a=`Install the skill from ${o} and run ${t}`;e+=`
`}renderCoworkBody(t,e){let o="";if(e){let a=`Install the skill from ${e} and run ${t}`;o+=`
<div class="cb-step">

@@ -388,3 +505,3 @@ <div class="cb-step-num">1</div>

</div>
`;}else e+=`
`;}else o+=`
<div class="cb-step">

@@ -406,3 +523,52 @@ <div class="cb-step-num">1</div>

</div>
`;return e}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let o=t.target.closest("[data-action]");if(!o)return;let e=o.dataset.action;if(e==="close")this.close();else if(e==="copy"){let a=o.dataset.command||"";this.copyToClipboard(a,o);}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close();}));}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||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);}async copyToClipboard(t,o){try{await navigator.clipboard.writeText(t);let e=o.querySelector("span"),a=o,s=a.querySelector(".cb-icon-sm")?.outerHTML||"";o.setAttribute("data-copied","true"),e&&(e.textContent="Copied!"),a.innerHTML=`${L}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{o.setAttribute("data-copied","false"),a.innerHTML=`${C}<span>Copy</span>`;},2e3);}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),this._options.onCopy?.(t);}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),o=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),o&&(o.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove();},140);}escapeHtml(t){let o=document.createElement("div");return o.textContent=t,o.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",T);function y(r){let i=document.createElement("claude-popup-dialog");return i.options=r,document.body.appendChild(i),i}var P=`
`;return o}renderCoworkFooter(t,e){let o="Open this page in Safari, Chrome, Firefox, or Edge. In-app browsers usually block opening apps.",a=e?"Opens the Claude app through your system link handler\u2014then paste the prompt below into Cowork.":"App links aren\u2019t supported in your current browser (common inside social or chat apps). Open this page in a full browser, or launch Claude Desktop manually and paste below.";return `
${e?`
<a
class="cb-launch-btn cb-launch-btn--desktop"
href="${t}"
data-action="launch-desktop"
rel="noopener noreferrer"
>
${R}
<span>Open Claude Desktop</span>
</a>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--desktop"
disabled
aria-disabled="true"
aria-label="Open Claude Desktop (unavailable in this browser)"
title="${this.escapeAttr(o)}"
>
${R}
<span>Open Claude Desktop</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}renderClaudeCodeFooter(t,e){let o="Available on desktop in a normal browser with clipboard access. Use Copy above, then paste into your terminal.",a=this.getTerminalLaunchSubcopy(e);return `
${e?`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
data-action="launch-terminal"
data-command="${this.escapeAttr(t)}"
aria-label="Copy command and open a terminal app"
>
${M}
<span>Open Terminal</span>
</button>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
disabled
aria-disabled="true"
aria-label="Open Terminal (unavailable in this environment)"
title="${this.escapeAttr(o)}"
>
${M}
<span>Open Terminal</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`}static isDesktopMac(){if(typeof navigator>"u")return false;let t=navigator.platform||"",e=navigator.userAgent||"";return /iPhone|iPad|iPod/i.test(e)?false:/Mac/.test(t)||/Mac OS X/.test(e)}getTerminalLaunchSubcopy(t){if(!t)return "Use the Copy button above, then paste into Terminal, PowerShell, or your preferred shell on a desktop computer.";if(typeof navigator>"u")return "Copies the command to your clipboard first.";let e=navigator.userAgent||"";return /iPhone|iPad|iPod|Android/i.test(e)?"Copies the command to your clipboard. Open a terminal or SSH client on your device to run it.":r.isDesktopMac()?"Copies the command, then tries to open iTerm if you have it\u2014otherwise open Terminal and paste.":"Copies the command, then tries to open VS Code if installed\u2014paste into its terminal, or use any shell."}getTerminalProtocolUrl(){if(typeof navigator>"u")return null;let t=navigator.userAgent||"";return /iPhone|iPad|iPod|Android/i.test(t)?null:r.isDesktopMac()?"iterm2://":"vscode://"}tryOpenCustomProtocol(t){if(typeof document>"u")return;let e=document.createElement("iframe");e.style.cssText="position:fixed;width:0;height:0;border:none;opacity:0;pointer-events:none",e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.src=t,document.body.appendChild(e),window.setTimeout(()=>e.remove(),1200);}escapeHref(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let e=t.target.closest("[data-action]");if(!e)return;let o=e.dataset.action;if(o==="close")this.close();else if(o==="copy"){let a=e.dataset.command||"";this.copyToClipboard(a,e);}else if(o==="launch-desktop"){t.preventDefault();let a=e.getAttribute("href")||"";this.openDesktopAppLink(a||e.href);}else if(o==="launch-terminal"){let a=e.dataset.command||"";this.launchTerminal(e,a);}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close();}));}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();o.addEventListener("change",a),this._mqCleanup=()=>o.removeEventListener("change",a);}async launchTerminal(t,e){let o=t.querySelector("span");try{await navigator.clipboard.writeText(e),this._options.onCopy?.(e);let a=this.getTerminalProtocolUrl();a&&this.tryOpenCustomProtocol(a),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal");},2e3);}catch{let a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),this._options.onCopy?.(e);let c=this.getTerminalProtocolUrl();c&&this.tryOpenCustomProtocol(c),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:true,composed:true,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal");},2e3);}}async copyToClipboard(t,e){try{await navigator.clipboard.writeText(t);let o=e.querySelector("span"),a=e,c=a.querySelector(".cb-icon-sm")?.outerHTML||"";e.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),a.innerHTML=`${j}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{e.setAttribute("data-copied","false"),a.innerHTML=`${C}<span>Copy</span>`;},2e3);}catch{let o=document.createElement("textarea");o.value=t,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o),this._options.onCopy?.(t);}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),e=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),e&&(e.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove();},140);}escapeHtml(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",F);function w(r){let n=document.createElement("claude-popup-dialog");return n.options=r,document.body.appendChild(n),n}var X=`
:host {

@@ -452,7 +618,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${_};
background: ${E};
transform: scale(0.98);

@@ -498,4 +664,4 @@ }

background: transparent;
border-color: ${n};
color: ${n};
border-color: ${s};
color: ${s};
}

@@ -531,3 +697,3 @@ :host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {

:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${n};
border-color: ${s};
background: rgba(212, 121, 92, 0.08);

@@ -546,3 +712,3 @@ }

:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${n};
border-color: ${s};
background: rgba(212, 121, 92, 0.05);

@@ -563,3 +729,3 @@ }

:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${n};
color: ${s};
}

@@ -610,3 +776,3 @@ :host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {

.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${n});
outline: 2px solid var(--cb-focus-color, ${s});
outline-offset: 2px;

@@ -634,6 +800,6 @@ }

:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
}

@@ -643,3 +809,3 @@

:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
}

@@ -652,4 +818,4 @@

}
`,w=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:true,promptFlag:true};this._mqCleanup=null;this._rendered=false;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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM();}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),o=this.getAttribute("theme"),e=this.getAttribute("size"),a=this.getAttribute("variant"),s=this.getAttribute("shape"),c=this.getAttribute("popup"),d=this.getAttribute("prompt-flag"),b=this.getAttribute("popup-title"),l=this.getAttribute("popup-description");t!==null&&(this._options.command=t),o&&(this._options.theme=o),e&&(this._options.size=e),a&&(this._options.variant=a),s&&(this._options.shape=s),c!==null&&(this._options.popup=c!=="false"),d!==null&&(this._options.promptFlag=d!=="false"),b!==null&&(this._options.popupTitle=b),l!==null&&(this._options.popupDescription=l);}updateLightDOM(){let{command:t}=this._options,o=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==false?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.href=`https://claude.ai/code?command=${encodeURIComponent(o)}`,e.textContent=`Run on Claude Code: ${t}`,e.setAttribute("data-platform","claude-code"),e.setAttribute("data-command",t),e.setAttribute("data-full-command",o);}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:o}=this._options;return o===false?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),o=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",a=p(t),s=this._options.size||"md",c=this._options.shape||"rounded",d=A[s],b=F[c][s];this.setAttribute("data-theme",o),this.setAttribute("data-variant",e);let l=e!=="filled"?"transparent":a.bg,g=e==="ghost"?"transparent":e==="outline"?a.primary:a.border,B=e!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${P}</style>
`,T=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:true,promptFlag:true};this._mqCleanup=null;this._rendered=false;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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM();}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("theme"),o=this.getAttribute("size"),a=this.getAttribute("variant"),c=this.getAttribute("shape"),d=this.getAttribute("popup"),i=this.getAttribute("prompt-flag"),p=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),u=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e&&(this._options.theme=e),o&&(this._options.size=o),a&&(this._options.variant=a),c&&(this._options.shape=c),d!==null&&(this._options.popup=d!=="false"),i!==null&&(this._options.promptFlag=i!=="false"),p!==null&&(this._options.popupTitle=p),b!==null&&(this._options.popupDescription=b),u===null?delete this._options.autoLaunch:this._options.autoLaunch=u!=="false";}updateLightDOM(){let{command:t}=this._options,e=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==false?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.href=`https://claude.ai/code?command=${encodeURIComponent(e)}`,o.textContent=`Run on Claude Code: ${t}`,o.setAttribute("data-platform","claude-code"),o.setAttribute("data-command",t),o.setAttribute("data-full-command",e);}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:e}=this._options;return e===false?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=l(t),c=this._options.size||"md",d=this._options.shape||"rounded",i=O[c],p=_[d][c];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let b=o!=="filled"?"transparent":a.bg,u=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,f=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${X}</style>
<button

@@ -659,21 +825,21 @@ class="cb-btn"

style="
${m(a)}
--cb-bg: ${l};
--cb-border: ${g};
--cb-text: ${B};
${v(a)}
--cb-bg: ${b};
--cb-border: ${u};
--cb-text: ${f};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${d.height};
--cb-font-size: ${d.fontSize};
--cb-icon-size: ${d.iconSize};
--cb-padding: ${d.ccPadding};
--cb-gap: ${d.gap};
--cb-radius: ${b};
--cb-height: ${i.height};
--cb-font-size: ${i.fontSize};
--cb-icon-size: ${i.iconSize};
--cb-padding: ${i.ccPadding};
--cb-gap: ${i.gap};
--cb-radius: ${p};
"
aria-label="Run on Claude Code: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${f}</span>
<span class="cb-btn-icon" aria-hidden="true">${x}</span>
<span class="cb-btn-label">Run on Claude Code</span>
</button>
`;let v=this.shadowRoot.querySelector(".cb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick());}),this._rendered=true,this.setupSystemThemeWatch();}handleClick(){let{popup:t,command:o,popupTitle:e,popupDescription:a}=this._options,s=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:true,composed:true,detail:{command:o,fullCommand:s}})),t===false){navigator.clipboard.writeText(s).then(()=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:s}}));});return}y({variant:"claude-code",theme:this.getResolvedTheme(),title:e||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:o,fullCommand:s,onCopy:c=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:c}}));},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:true,composed:true}));}});}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();t.addEventListener("change",o),this._mqCleanup=()=>t.removeEventListener("change",o);}};w.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];function O(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,w);}O();function N(r){let i=document.createElement("claude-code-button");return i.options=r,i}var I=`
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick());}),this._rendered=true,this.setupSystemThemeWatch();}handleClick(){let{popup:t,command:e,popupTitle:o,popupDescription:a,autoLaunch:c}=this._options,d=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:true,composed:true,detail:{command:e,fullCommand:d}})),t===false){navigator.clipboard.writeText(d).then(()=>{this._options.onCopy?.(d),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:d}}));});return}w({variant:"claude-code",theme:this.getResolvedTheme(),title:o||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:e,fullCommand:d,autoLaunch:c===true,onCopy:i=>{this._options.onCopy?.(i),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:i}}));},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:true,composed:true}));}});}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e);}};T.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description","auto-launch"];function L(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,T);}L();function Z(r){let n=document.createElement("claude-code-button");return n.options=r,n}var J=`
:host {

@@ -723,7 +889,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${_};
background: ${E};
transform: scale(0.98);

@@ -769,4 +935,4 @@ }

background: transparent;
border-color: ${n};
color: ${n};
border-color: ${s};
color: ${s};
}

@@ -802,3 +968,3 @@ :host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {

:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${n};
border-color: ${s};
background: rgba(212, 121, 92, 0.08);

@@ -817,3 +983,3 @@ }

:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${n};
border-color: ${s};
background: rgba(212, 121, 92, 0.05);

@@ -834,3 +1000,3 @@ }

:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${n};
color: ${s};
}

@@ -881,3 +1047,3 @@ :host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {

.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${n});
outline: 2px solid var(--cb-focus-color, ${s});
outline-offset: 2px;

@@ -905,7 +1071,7 @@ }

:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
--cb-icon-accent: #1C1917;
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
--cb-icon-accent: #FFFFFF;

@@ -916,3 +1082,3 @@ }

:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
}

@@ -925,4 +1091,4 @@

}
`,E=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:true};this._mqCleanup=null;this._rendered=false;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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM();}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),o=this.getAttribute("skill-url"),e=this.getAttribute("theme"),a=this.getAttribute("size"),s=this.getAttribute("variant"),c=this.getAttribute("shape"),d=this.getAttribute("popup"),b=this.getAttribute("popup-title"),l=this.getAttribute("popup-description");t!==null&&(this._options.command=t),o!==null&&(this._options.skillUrl=o),e&&(this._options.theme=e),a&&(this._options.size=a),s&&(this._options.variant=s),c&&(this._options.shape=c),d!==null&&(this._options.popup=d!=="false"),b!==null&&(this._options.popupTitle=b),l!==null&&(this._options.popupDescription=l);}updateLightDOM(){let{command:t,skillUrl:o}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==false?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.textContent=`Run on Cowork: ${t}`,e.setAttribute("data-platform","cowork"),e.setAttribute("data-command",t),o?(e.href=o,e.setAttribute("data-skill-url",o)):(e.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,e.removeAttribute("data-skill-url"));}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),o=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",a=p(t),s=this._options.size||"md",c=this._options.shape||"rounded",d=A[s],b=F[c][s];this.setAttribute("data-theme",o),this.setAttribute("data-variant",e);let l=e!=="filled"?"transparent":a.bg,g=e==="ghost"?"transparent":e==="outline"?a.primary:a.border,B=e!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${I}</style>
`,A=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:true};this._mqCleanup=null;this._rendered=false;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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM();}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("skill-url"),o=this.getAttribute("theme"),a=this.getAttribute("size"),c=this.getAttribute("variant"),d=this.getAttribute("shape"),i=this.getAttribute("popup"),p=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),u=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e!==null&&(this._options.skillUrl=e),o&&(this._options.theme=o),a&&(this._options.size=a),c&&(this._options.variant=c),d&&(this._options.shape=d),i!==null&&(this._options.popup=i!=="false"),p!==null&&(this._options.popupTitle=p),b!==null&&(this._options.popupDescription=b),u===null?delete this._options.autoLaunch:this._options.autoLaunch=u!=="false";}updateLightDOM(){let{command:t,skillUrl:e}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==false?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.textContent=`Run on Cowork: ${t}`,o.setAttribute("data-platform","cowork"),o.setAttribute("data-command",t),e?(o.href=e,o.setAttribute("data-skill-url",e)):(o.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,o.removeAttribute("data-skill-url"));}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=l(t),c=this._options.size||"md",d=this._options.shape||"rounded",i=O[c],p=_[d][c];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let b=o!=="filled"?"transparent":a.bg,u=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,f=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${J}</style>
<button

@@ -932,22 +1098,22 @@ class="cb-btn"

style="
${m(a)}
--cb-bg: ${l};
--cb-border: ${g};
--cb-text: ${B};
${v(a)}
--cb-bg: ${b};
--cb-border: ${u};
--cb-text: ${f};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${d.height};
--cb-font-size: ${d.fontSize};
--cb-icon-size: ${d.iconSize};
--cb-padding: ${d.padding};
--cb-gap: ${d.gap};
--cb-radius: ${b};
--cb-height: ${i.height};
--cb-font-size: ${i.fontSize};
--cb-icon-size: ${i.iconSize};
--cb-padding: ${i.padding};
--cb-gap: ${i.gap};
--cb-radius: ${p};
"
aria-label="Run on Cowork: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${x}</span>
<span class="cb-btn-icon" aria-hidden="true">${k}</span>
<span class="cb-btn-label">Run on Cowork</span>
</button>
`;let v=this.shadowRoot.querySelector(".cb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick());}),this._rendered=true,this.setupSystemThemeWatch();}handleClick(){let{popup:t,command:o,skillUrl:e,popupTitle:a,popupDescription:s}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:true,composed:true,detail:{command:o}})),t===false){navigator.clipboard.writeText(o).then(()=>{this._options.onCopy?.(o),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:o}}));});return}y({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:s||"Copy and paste into a Cowork session to get started.",command:o,skillUrl:e,onCopy:c=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:c}}));},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:true,composed:true}));}});}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();t.addEventListener("change",o),this._mqCleanup=()=>t.removeEventListener("change",o);}};E.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];function $(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,E);}$();function q(r){let i=document.createElement("cowork-button");return i.options=r,i}function R(){if(typeof document>"u")return [];let r=[];return document.querySelectorAll("claude-code-button").forEach(i=>{let t=i.getAttribute("command")||"",a=i.getAttribute("prompt-flag")!=="false"?`claude -p "${t}"`:t;r.push({platform:"claude-code",command:t,fullCommand:a});}),document.querySelectorAll("cowork-button").forEach(i=>{let t=i.getAttribute("command")||"",o=i.getAttribute("skill-url")||void 0;r.push({platform:"cowork",command:t,...o&&{skillUrl:o}});}),r}function D(){let r=R();return r.length===0?{}:{"@context":"https://schema.org","@type":"WebPage",potentialAction:r.map(t=>{if(t.platform==="claude-code")return {"@type":"Action",name:`Run on Claude Code: ${t.command}`,description:t.command,target:{"@type":"EntryPoint",urlTemplate:`https://claude.ai/code?command=${encodeURIComponent(t.fullCommand||t.command)}`,actionPlatform:"https://claude.ai/code"},object:{"@type":"SoftwareSourceCode",runtimePlatform:"Claude Code",text:t.fullCommand||t.command}};let o={"@type":"EntryPoint",actionPlatform:"https://claude.ai/cowork"};t.skillUrl?o.urlTemplate=t.skillUrl:o.urlTemplate=`https://claude.ai/cowork?command=${encodeURIComponent(t.command)}`;let e={"@type":"Action",name:`Run on Cowork: ${t.command}`,description:t.command,target:o};return t.skillUrl&&(e.object={"@type":"SoftwareApplication",name:t.command,downloadUrl:t.skillUrl,applicationCategory:"AI Skill",operatingSystem:"Claude Cowork"}),e})}}function H(){if(typeof document>"u")return;let r=document.querySelector("script[data-claudebuttons-jsonld]");r&&r.remove();let i=D();if(!i||!("potentialAction"in i))return;let t=document.createElement("script");t.type="application/ld+json",t.setAttribute("data-claudebuttons-jsonld",""),t.textContent=JSON.stringify(i,null,2),document.head.appendChild(t);}function it(){O(),$();}
exports.ALT_BRAND_COLOR=z;exports.BRAND_COLOR=n;exports.CLAUDE_CODE_ICON=f;exports.COWORK_ICON=x;exports.ClaudeCodeButton=w;exports.ClaudePopupDialog=T;exports.CoworkButton=E;exports.createClaudeCodeButton=N;exports.createCoworkButton=q;exports.discoverButtons=R;exports.generateStructuredData=D;exports.injectStructuredData=H;exports.register=it;exports.registerClaudeCodeButton=O;exports.registerCoworkButton=$;exports.resolveTheme=p;exports.showPopup=y;exports.themes=k;//# sourceMappingURL=index.js.map
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick());}),this._rendered=true,this.setupSystemThemeWatch();}handleClick(){let{popup:t,command:e,skillUrl:o,popupTitle:a,popupDescription:c,autoLaunch:d}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:true,composed:true,detail:{command:e}})),t===false){navigator.clipboard.writeText(e).then(()=>{this._options.onCopy?.(e),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:e}}));});return}w({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:c||"Copy and paste into a Cowork session to get started.",command:e,skillUrl:o,autoLaunch:d===true,onCopy:i=>{this._options.onCopy?.(i),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:i}}));},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:true,composed:true}));}});}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e);}};A.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description","auto-launch"];function S(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,A);}S();function Q(r){let n=document.createElement("cowork-button");return n.options=r,n}function W(){if(typeof document>"u")return [];let r=[];return document.querySelectorAll("claude-code-button").forEach(n=>{let t=n.getAttribute("command")||"",a=n.getAttribute("prompt-flag")!=="false"?`claude -p "${t}"`:t;r.push({platform:"claude-code",command:t,fullCommand:a});}),document.querySelectorAll("cowork-button").forEach(n=>{let t=n.getAttribute("command")||"",e=n.getAttribute("skill-url")||void 0;r.push({platform:"cowork",command:t,...e&&{skillUrl:e}});}),r}function K(){let r=W();return r.length===0?{}:{"@context":"https://schema.org","@type":"WebPage",potentialAction:r.map(t=>{if(t.platform==="claude-code")return {"@type":"Action",name:`Run on Claude Code: ${t.command}`,description:t.command,target:{"@type":"EntryPoint",urlTemplate:`https://claude.ai/code?command=${encodeURIComponent(t.fullCommand||t.command)}`,actionPlatform:"https://claude.ai/code"},object:{"@type":"SoftwareSourceCode",runtimePlatform:"Claude Code",text:t.fullCommand||t.command}};let e={"@type":"EntryPoint",actionPlatform:"https://claude.ai/cowork"};t.skillUrl?e.urlTemplate=t.skillUrl:e.urlTemplate=`https://claude.ai/cowork?command=${encodeURIComponent(t.command)}`;let o={"@type":"Action",name:`Run on Cowork: ${t.command}`,description:t.command,target:e};return t.skillUrl&&(o.object={"@type":"SoftwareApplication",name:t.command,downloadUrl:t.skillUrl,applicationCategory:"AI Skill",operatingSystem:"Claude Cowork"}),o})}}function tt(){if(typeof document>"u")return;let r=document.querySelector("script[data-claudebuttons-jsonld]");r&&r.remove();let n=K();if(!n||!("potentialAction"in n))return;let t=document.createElement("script");t.type="application/ld+json",t.setAttribute("data-claudebuttons-jsonld",""),t.textContent=JSON.stringify(n,null,2),document.head.appendChild(t);}function kt(){L(),S();}
exports.ALT_BRAND_COLOR=Y;exports.BRAND_COLOR=s;exports.CLAUDE_CODE_ICON=x;exports.COWORK_ICON=k;exports.ClaudeCodeButton=T;exports.ClaudePopupDialog=F;exports.CoworkButton=A;exports.canUseClipboardWithGesture=q;exports.createClaudeCodeButton=Z;exports.createCoworkButton=Q;exports.discoverButtons=W;exports.generateStructuredData=K;exports.injectStructuredData=tt;exports.isDesktopAppLinkSupported=B;exports.isDesktopComputerOs=H;exports.isMobileOrTabletDevice=N;exports.isRestrictedEmbeddedBrowser=$;exports.isTerminalLaunchSupported=D;exports.register=kt;exports.registerClaudeCodeButton=L;exports.registerCoworkButton=S;exports.resolveTheme=l;exports.showPopup=w;exports.themes=y;//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map
+242
-76
dist/index.mjs

@@ -1,2 +0,2 @@

var f=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
function $(){if(typeof navigator>"u")return true;let r=navigator.userAgent||"";return !!(!r.trim()||/\bFBAN\b|\bFBAV\b|FB_IAB|Instagram|Line\/|MicroMessenger|Snapchat|TikTok|LinkedInApp|Pinterest/i.test(r)||/Twitter for (iPhone|Android)/i.test(r)||/; wv\)/.test(r)||/Opera Mini|OPiOS/i.test(r))}function N(){if(typeof navigator>"u")return false;let r=navigator.userAgent||"",n=typeof navigator.maxTouchPoints=="number"?navigator.maxTouchPoints:0,t=navigator.platform||"";return !!(/iPhone|iPod/i.test(r)||/iPad/i.test(r)||/Android/i.test(r)&&/Mobile/i.test(r)||/Android/i.test(r)&&!/Mobile/i.test(r)||(t==="MacIntel"||t==="MacARM")&&n>1||/webOS|BlackBerry|IEMobile|Opera Mini/i.test(r))}function H(){if(N()||typeof navigator>"u")return false;let r=navigator.userAgent||"",n=navigator.platform||"";return !!(/Win|Mac|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(n)||/Windows NT|Macintosh|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(r))}function q(){if(typeof window>"u"||typeof navigator>"u")return false;if(window.isSecureContext&&navigator.clipboard&&typeof navigator.clipboard.writeText=="function")return true;try{if(typeof document<"u"&&typeof document.queryCommandSupported=="function")return document.queryCommandSupported("copy")===!0}catch{}return false}function U(){return typeof window<"u"&&typeof document<"u"&&typeof document.createElement=="function"}function B(){return !(!U()||$())}function D(){return !(!U()||$()||!H()||!q())}var x=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Ears -->

@@ -16,3 +16,3 @@ <rect x="3.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>

<rect x="13.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
</svg>`,x=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
</svg>`,k=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Lightning bolt -->

@@ -29,7 +29,19 @@ <path d="M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z" fill="currentColor"/>

<path d="M3 10V3.5A1.5 1.5 0 014.5 2H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,L=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,j=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;var S=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`;var V=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;var n="#D4795C",u="#C06A4E",_="#B35E43",k={branded:{bg:n,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:n,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:n,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:n,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function p(r){return r!=="system"?k[r]:typeof window>"u"?k.light:window.matchMedia("(prefers-color-scheme: dark)").matches?k.dark:k.light}function m(r){return `
</svg>`;var M=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="3" y="4" width="18" height="16" rx="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M3 9h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 13l2.5 2L7 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 17h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,R=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="4" y="5" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M4 8.5h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="6.5" cy="7" r="0.65" fill="currentColor"/>
<circle cx="8.5" cy="7" r="0.65" fill="currentColor"/>
<path d="M9 19.5h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8 16.5h8v3H8v-3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
</svg>`;var s="#D4795C",g="#C06A4E",E="#B35E43",y={branded:{bg:s,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:s,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:s,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:s,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function l(r){return r!=="system"?y[r]:typeof window>"u"?y.light:window.matchMedia("(prefers-color-scheme: dark)").matches?y.dark:y.light}function v(r){return `
--cb-bg: ${r.bg};

@@ -45,3 +57,3 @@ --cb-text: ${r.text};

--cb-code-text: ${r.codeText};
`}var z="#6B5CE7",F={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},A={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 M=`
`}var Y="#6B5CE7",_={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},O={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 G=`
:host {

@@ -225,3 +237,3 @@ position: fixed;

.cb-copy-btn:hover { background: ${u}; }
.cb-copy-btn:hover { background: ${g}; }
.cb-copy-btn:active { transform: scale(0.96); }

@@ -259,3 +271,3 @@ .cb-copy-btn svg { width: 14px; height: 14px; }

.cb-action-btn:hover { background: ${u}; }
.cb-action-btn:hover { background: ${g}; }
.cb-action-btn:active { transform: scale(0.98); }

@@ -281,2 +293,108 @@ .cb-action-btn svg { width: 16px; height: 16px; }

.cb-launch-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.cb-launch-btn:active:not(:disabled) { transform: scale(0.99); }
.cb-launch-btn .cb-launch-svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.cb-launch-btn--desktop {
color: var(--cb-surface-text);
background: linear-gradient(
165deg,
color-mix(in srgb, var(--cb-primary) 14%, var(--cb-surface)) 0%,
var(--cb-surface) 55%
);
border: 1.5px solid color-mix(in srgb, var(--cb-primary) 38%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 55%, transparent) inset,
0 4px 14px -4px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}
.cb-launch-btn--desktop:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--cb-primary) 72%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 45%, transparent) inset,
0 8px 24px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}
.cb-launch-btn--desktop:focus-visible {
outline: 2px solid var(--cb-primary);
outline-offset: 2px;
}
.cb-launch-btn--terminal {
color: var(--cb-code-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--cb-code-text) 8%, var(--cb-code-bg)) 0%, var(--cb-code-bg) 100%);
border: 1px solid color-mix(in srgb, var(--cb-code-text) 22%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, black 25%, transparent) inset,
0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
.cb-launch-btn--terminal:hover:not(:disabled) {
border-color: color-mix(in srgb, #34d399 55%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, #34d399 20%, transparent) inset,
0 8px 28px -8px color-mix(in srgb, #34d399 28%, transparent);
}
.cb-launch-btn--terminal:focus-visible {
outline: 2px solid #34d399;
outline-offset: 2px;
}
.cb-launch-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: saturate(0.7);
box-shadow: none;
}
.cb-launch-btn--desktop:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn--terminal:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn:disabled .cb-launch-svg {
opacity: 0.75;
}
.cb-launch-sub {
display: block;
margin-top: 6px;
font-size: 11px;
font-weight: 500;
color: var(--cb-muted);
line-height: 1.35;
text-align: center;
}
@keyframes cb-fade-in {

@@ -314,2 +432,5 @@ from { opacity: 0; }

.cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
.cb-launch-btn { min-height: 46px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.cb-launch-btn .cb-launch-svg { width: 20px; height: 20px; }
.cb-launch-sub { font-size: 10px; }
.cb-hint { font-size: 11px; }

@@ -327,28 +448,24 @@ }

}
`,T=class extends HTMLElement{constructor(){super();this._mqCleanup=null;this.attachShadow({mode:"open"});}set options(t){this._options=t,this.render();}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null;}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return p(t);let o=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return o?p("dark"):p("light");let e=o?p("dark"):p("light"),a=p(t);return {...e,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:o,description:e,command:a,fullCommand:s,skillUrl:c}=this._options,d=this.resolvePopupTokens(),b=t==="claude-code"?f:x,l=t==="claude-code",g=s||a;this.shadowRoot.innerHTML=`
<style>${M}</style>
<div style="${m(d)}">
`,F=class r extends HTMLElement{constructor(){super();this._mqCleanup=null;this._autoLaunchConsumed=false;this.attachShadow({mode:"open"});}set options(t){this._autoLaunchConsumed=false,this._options=t,this.render();}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null;}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return l(t);let e=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return e?l("dark"):l("light");let o=e?l("dark"):l("light"),a=l(t);return {...o,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:e,description:o,command:a,fullCommand:c,skillUrl:d,desktopLaunchUrl:i,autoLaunch:p}=this._options,b=this.resolvePopupTokens(),u=t==="claude-code"?x:k,f=t==="claude-code",m=c||a,h=i??"claude://",P=B(),z=D();if(this.shadowRoot.innerHTML=`
<style>${G}</style>
<div style="${v(b)}">
<div class="cb-backdrop" data-action="close"></div>
<div class="cb-dialog" role="dialog" aria-modal="true" aria-labelledby="cb-dialog-title">
<div class="cb-dialog-header">
<div class="cb-dialog-header-icon">${b}</div>
<div class="cb-dialog-header-icon">${u}</div>
<div class="cb-dialog-header-text">
<div class="cb-dialog-title" id="cb-dialog-title">${o}</div>
${e?`<div class="cb-dialog-description">${e}</div>`:""}
<div class="cb-dialog-title" id="cb-dialog-title">${e}</div>
${o?`<div class="cb-dialog-description">${o}</div>`:""}
</div>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${S}</button>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${V}</button>
</div>
<div class="cb-dialog-body">
${l?this.renderClaudeCodeBody(g):this.renderCoworkBody(a,c)}
${f?this.renderClaudeCodeBody(m):this.renderCoworkBody(a,d)}
</div>
<div class="cb-dialog-footer">
${l?`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`:`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}
${f?this.renderClaudeCodeFooter(m,z):this.renderCoworkFooter(this.escapeHref(h),P)}
</div>
</div>
</div>
`,this.setupListeners(),this.setupSystemThemeWatch();}renderClaudeCodeBody(t){return `
`,this.setupListeners(),this.setupSystemThemeWatch(),p&&!this._autoLaunchConsumed){if(this._autoLaunchConsumed=true,t==="cowork"&&P)this.openDesktopAppLink(h);else if(t==="claude-code"&&z){let I=this.shadowRoot?.querySelector('[data-action="launch-terminal"]');I&&this.launchTerminal(I,m);}}}openDesktopAppLink(t){if(this.dispatchEvent(new CustomEvent("cb-launch-desktop",{bubbles:true,composed:true,detail:{href:t}})),typeof document>"u")return;let e=document.createElement("a");e.href=t,e.rel="noopener noreferrer",e.style.cssText="position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none",document.body.appendChild(e),e.click(),requestAnimationFrame(()=>e.remove());}renderClaudeCodeBody(t){return `
<div class="cb-step">

@@ -370,3 +487,3 @@ <div class="cb-step-num">1</div>

</div>
`}renderCoworkBody(t,o){let e="";if(o){let a=`Install the skill from ${o} and run ${t}`;e+=`
`}renderCoworkBody(t,e){let o="";if(e){let a=`Install the skill from ${e} and run ${t}`;o+=`
<div class="cb-step">

@@ -388,3 +505,3 @@ <div class="cb-step-num">1</div>

</div>
`;}else e+=`
`;}else o+=`
<div class="cb-step">

@@ -406,3 +523,52 @@ <div class="cb-step-num">1</div>

</div>
`;return e}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let o=t.target.closest("[data-action]");if(!o)return;let e=o.dataset.action;if(e==="close")this.close();else if(e==="copy"){let a=o.dataset.command||"";this.copyToClipboard(a,o);}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close();}));}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||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);}async copyToClipboard(t,o){try{await navigator.clipboard.writeText(t);let e=o.querySelector("span"),a=o,s=a.querySelector(".cb-icon-sm")?.outerHTML||"";o.setAttribute("data-copied","true"),e&&(e.textContent="Copied!"),a.innerHTML=`${L}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{o.setAttribute("data-copied","false"),a.innerHTML=`${C}<span>Copy</span>`;},2e3);}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),this._options.onCopy?.(t);}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),o=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),o&&(o.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove();},140);}escapeHtml(t){let o=document.createElement("div");return o.textContent=t,o.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",T);function y(r){let i=document.createElement("claude-popup-dialog");return i.options=r,document.body.appendChild(i),i}var P=`
`;return o}renderCoworkFooter(t,e){let o="Open this page in Safari, Chrome, Firefox, or Edge. In-app browsers usually block opening apps.",a=e?"Opens the Claude app through your system link handler\u2014then paste the prompt below into Cowork.":"App links aren\u2019t supported in your current browser (common inside social or chat apps). Open this page in a full browser, or launch Claude Desktop manually and paste below.";return `
${e?`
<a
class="cb-launch-btn cb-launch-btn--desktop"
href="${t}"
data-action="launch-desktop"
rel="noopener noreferrer"
>
${R}
<span>Open Claude Desktop</span>
</a>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--desktop"
disabled
aria-disabled="true"
aria-label="Open Claude Desktop (unavailable in this browser)"
title="${this.escapeAttr(o)}"
>
${R}
<span>Open Claude Desktop</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}renderClaudeCodeFooter(t,e){let o="Available on desktop in a normal browser with clipboard access. Use Copy above, then paste into your terminal.",a=this.getTerminalLaunchSubcopy(e);return `
${e?`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
data-action="launch-terminal"
data-command="${this.escapeAttr(t)}"
aria-label="Copy command and open a terminal app"
>
${M}
<span>Open Terminal</span>
</button>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
disabled
aria-disabled="true"
aria-label="Open Terminal (unavailable in this environment)"
title="${this.escapeAttr(o)}"
>
${M}
<span>Open Terminal</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`}static isDesktopMac(){if(typeof navigator>"u")return false;let t=navigator.platform||"",e=navigator.userAgent||"";return /iPhone|iPad|iPod/i.test(e)?false:/Mac/.test(t)||/Mac OS X/.test(e)}getTerminalLaunchSubcopy(t){if(!t)return "Use the Copy button above, then paste into Terminal, PowerShell, or your preferred shell on a desktop computer.";if(typeof navigator>"u")return "Copies the command to your clipboard first.";let e=navigator.userAgent||"";return /iPhone|iPad|iPod|Android/i.test(e)?"Copies the command to your clipboard. Open a terminal or SSH client on your device to run it.":r.isDesktopMac()?"Copies the command, then tries to open iTerm if you have it\u2014otherwise open Terminal and paste.":"Copies the command, then tries to open VS Code if installed\u2014paste into its terminal, or use any shell."}getTerminalProtocolUrl(){if(typeof navigator>"u")return null;let t=navigator.userAgent||"";return /iPhone|iPad|iPod|Android/i.test(t)?null:r.isDesktopMac()?"iterm2://":"vscode://"}tryOpenCustomProtocol(t){if(typeof document>"u")return;let e=document.createElement("iframe");e.style.cssText="position:fixed;width:0;height:0;border:none;opacity:0;pointer-events:none",e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.src=t,document.body.appendChild(e),window.setTimeout(()=>e.remove(),1200);}escapeHref(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let e=t.target.closest("[data-action]");if(!e)return;let o=e.dataset.action;if(o==="close")this.close();else if(o==="copy"){let a=e.dataset.command||"";this.copyToClipboard(a,e);}else if(o==="launch-desktop"){t.preventDefault();let a=e.getAttribute("href")||"";this.openDesktopAppLink(a||e.href);}else if(o==="launch-terminal"){let a=e.dataset.command||"";this.launchTerminal(e,a);}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close();}));}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();o.addEventListener("change",a),this._mqCleanup=()=>o.removeEventListener("change",a);}async launchTerminal(t,e){let o=t.querySelector("span");try{await navigator.clipboard.writeText(e),this._options.onCopy?.(e);let a=this.getTerminalProtocolUrl();a&&this.tryOpenCustomProtocol(a),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal");},2e3);}catch{let a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),this._options.onCopy?.(e);let c=this.getTerminalProtocolUrl();c&&this.tryOpenCustomProtocol(c),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:true,composed:true,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal");},2e3);}}async copyToClipboard(t,e){try{await navigator.clipboard.writeText(t);let o=e.querySelector("span"),a=e,c=a.querySelector(".cb-icon-sm")?.outerHTML||"";e.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),a.innerHTML=`${j}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{e.setAttribute("data-copied","false"),a.innerHTML=`${C}<span>Copy</span>`;},2e3);}catch{let o=document.createElement("textarea");o.value=t,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o),this._options.onCopy?.(t);}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),e=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),e&&(e.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove();},140);}escapeHtml(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",F);function w(r){let n=document.createElement("claude-popup-dialog");return n.options=r,document.body.appendChild(n),n}var X=`
:host {

@@ -452,7 +618,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${_};
background: ${E};
transform: scale(0.98);

@@ -498,4 +664,4 @@ }

background: transparent;
border-color: ${n};
color: ${n};
border-color: ${s};
color: ${s};
}

@@ -531,3 +697,3 @@ :host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {

:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${n};
border-color: ${s};
background: rgba(212, 121, 92, 0.08);

@@ -546,3 +712,3 @@ }

:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${n};
border-color: ${s};
background: rgba(212, 121, 92, 0.05);

@@ -563,3 +729,3 @@ }

:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${n};
color: ${s};
}

@@ -610,3 +776,3 @@ :host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {

.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${n});
outline: 2px solid var(--cb-focus-color, ${s});
outline-offset: 2px;

@@ -634,6 +800,6 @@ }

:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
}

@@ -643,3 +809,3 @@

:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
}

@@ -652,4 +818,4 @@

}
`,w=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:true,promptFlag:true};this._mqCleanup=null;this._rendered=false;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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM();}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),o=this.getAttribute("theme"),e=this.getAttribute("size"),a=this.getAttribute("variant"),s=this.getAttribute("shape"),c=this.getAttribute("popup"),d=this.getAttribute("prompt-flag"),b=this.getAttribute("popup-title"),l=this.getAttribute("popup-description");t!==null&&(this._options.command=t),o&&(this._options.theme=o),e&&(this._options.size=e),a&&(this._options.variant=a),s&&(this._options.shape=s),c!==null&&(this._options.popup=c!=="false"),d!==null&&(this._options.promptFlag=d!=="false"),b!==null&&(this._options.popupTitle=b),l!==null&&(this._options.popupDescription=l);}updateLightDOM(){let{command:t}=this._options,o=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==false?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.href=`https://claude.ai/code?command=${encodeURIComponent(o)}`,e.textContent=`Run on Claude Code: ${t}`,e.setAttribute("data-platform","claude-code"),e.setAttribute("data-command",t),e.setAttribute("data-full-command",o);}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:o}=this._options;return o===false?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),o=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",a=p(t),s=this._options.size||"md",c=this._options.shape||"rounded",d=A[s],b=F[c][s];this.setAttribute("data-theme",o),this.setAttribute("data-variant",e);let l=e!=="filled"?"transparent":a.bg,g=e==="ghost"?"transparent":e==="outline"?a.primary:a.border,B=e!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${P}</style>
`,T=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:true,promptFlag:true};this._mqCleanup=null;this._rendered=false;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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM();}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("theme"),o=this.getAttribute("size"),a=this.getAttribute("variant"),c=this.getAttribute("shape"),d=this.getAttribute("popup"),i=this.getAttribute("prompt-flag"),p=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),u=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e&&(this._options.theme=e),o&&(this._options.size=o),a&&(this._options.variant=a),c&&(this._options.shape=c),d!==null&&(this._options.popup=d!=="false"),i!==null&&(this._options.promptFlag=i!=="false"),p!==null&&(this._options.popupTitle=p),b!==null&&(this._options.popupDescription=b),u===null?delete this._options.autoLaunch:this._options.autoLaunch=u!=="false";}updateLightDOM(){let{command:t}=this._options,e=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==false?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.href=`https://claude.ai/code?command=${encodeURIComponent(e)}`,o.textContent=`Run on Claude Code: ${t}`,o.setAttribute("data-platform","claude-code"),o.setAttribute("data-command",t),o.setAttribute("data-full-command",e);}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:e}=this._options;return e===false?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=l(t),c=this._options.size||"md",d=this._options.shape||"rounded",i=O[c],p=_[d][c];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let b=o!=="filled"?"transparent":a.bg,u=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,f=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${X}</style>
<button

@@ -659,21 +825,21 @@ class="cb-btn"

style="
${m(a)}
--cb-bg: ${l};
--cb-border: ${g};
--cb-text: ${B};
${v(a)}
--cb-bg: ${b};
--cb-border: ${u};
--cb-text: ${f};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${d.height};
--cb-font-size: ${d.fontSize};
--cb-icon-size: ${d.iconSize};
--cb-padding: ${d.ccPadding};
--cb-gap: ${d.gap};
--cb-radius: ${b};
--cb-height: ${i.height};
--cb-font-size: ${i.fontSize};
--cb-icon-size: ${i.iconSize};
--cb-padding: ${i.ccPadding};
--cb-gap: ${i.gap};
--cb-radius: ${p};
"
aria-label="Run on Claude Code: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${f}</span>
<span class="cb-btn-icon" aria-hidden="true">${x}</span>
<span class="cb-btn-label">Run on Claude Code</span>
</button>
`;let v=this.shadowRoot.querySelector(".cb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick());}),this._rendered=true,this.setupSystemThemeWatch();}handleClick(){let{popup:t,command:o,popupTitle:e,popupDescription:a}=this._options,s=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:true,composed:true,detail:{command:o,fullCommand:s}})),t===false){navigator.clipboard.writeText(s).then(()=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:s}}));});return}y({variant:"claude-code",theme:this.getResolvedTheme(),title:e||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:o,fullCommand:s,onCopy:c=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:c}}));},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:true,composed:true}));}});}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();t.addEventListener("change",o),this._mqCleanup=()=>t.removeEventListener("change",o);}};w.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];function O(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,w);}O();function N(r){let i=document.createElement("claude-code-button");return i.options=r,i}var I=`
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick());}),this._rendered=true,this.setupSystemThemeWatch();}handleClick(){let{popup:t,command:e,popupTitle:o,popupDescription:a,autoLaunch:c}=this._options,d=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:true,composed:true,detail:{command:e,fullCommand:d}})),t===false){navigator.clipboard.writeText(d).then(()=>{this._options.onCopy?.(d),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:d}}));});return}w({variant:"claude-code",theme:this.getResolvedTheme(),title:o||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:e,fullCommand:d,autoLaunch:c===true,onCopy:i=>{this._options.onCopy?.(i),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:i}}));},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:true,composed:true}));}});}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e);}};T.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description","auto-launch"];function L(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,T);}L();function Z(r){let n=document.createElement("claude-code-button");return n.options=r,n}var J=`
:host {

@@ -723,7 +889,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${_};
background: ${E};
transform: scale(0.98);

@@ -769,4 +935,4 @@ }

background: transparent;
border-color: ${n};
color: ${n};
border-color: ${s};
color: ${s};
}

@@ -802,3 +968,3 @@ :host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {

:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${n};
border-color: ${s};
background: rgba(212, 121, 92, 0.08);

@@ -817,3 +983,3 @@ }

:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${n};
border-color: ${s};
background: rgba(212, 121, 92, 0.05);

@@ -834,3 +1000,3 @@ }

:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${n};
color: ${s};
}

@@ -881,3 +1047,3 @@ :host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {

.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${n});
outline: 2px solid var(--cb-focus-color, ${s});
outline-offset: 2px;

@@ -905,7 +1071,7 @@ }

:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
--cb-icon-accent: #1C1917;
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
--cb-icon-accent: #FFFFFF;

@@ -916,3 +1082,3 @@ }

:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
color: var(--cb-accent-color, ${s});
}

@@ -925,4 +1091,4 @@

}
`,E=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:true};this._mqCleanup=null;this._rendered=false;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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM();}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),o=this.getAttribute("skill-url"),e=this.getAttribute("theme"),a=this.getAttribute("size"),s=this.getAttribute("variant"),c=this.getAttribute("shape"),d=this.getAttribute("popup"),b=this.getAttribute("popup-title"),l=this.getAttribute("popup-description");t!==null&&(this._options.command=t),o!==null&&(this._options.skillUrl=o),e&&(this._options.theme=e),a&&(this._options.size=a),s&&(this._options.variant=s),c&&(this._options.shape=c),d!==null&&(this._options.popup=d!=="false"),b!==null&&(this._options.popupTitle=b),l!==null&&(this._options.popupDescription=l);}updateLightDOM(){let{command:t,skillUrl:o}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==false?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.textContent=`Run on Cowork: ${t}`,e.setAttribute("data-platform","cowork"),e.setAttribute("data-command",t),o?(e.href=o,e.setAttribute("data-skill-url",o)):(e.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,e.removeAttribute("data-skill-url"));}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),o=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",a=p(t),s=this._options.size||"md",c=this._options.shape||"rounded",d=A[s],b=F[c][s];this.setAttribute("data-theme",o),this.setAttribute("data-variant",e);let l=e!=="filled"?"transparent":a.bg,g=e==="ghost"?"transparent":e==="outline"?a.primary:a.border,B=e!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${I}</style>
`,A=class extends HTMLElement{constructor(){super();this._options={command:"",theme:"branded",size:"md",variant:"filled",popup:true};this._mqCleanup=null;this._rendered=false;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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM();}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("skill-url"),o=this.getAttribute("theme"),a=this.getAttribute("size"),c=this.getAttribute("variant"),d=this.getAttribute("shape"),i=this.getAttribute("popup"),p=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),u=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e!==null&&(this._options.skillUrl=e),o&&(this._options.theme=o),a&&(this._options.size=a),c&&(this._options.variant=c),d&&(this._options.shape=d),i!==null&&(this._options.popup=i!=="false"),p!==null&&(this._options.popupTitle=p),b!==null&&(this._options.popupDescription=b),u===null?delete this._options.autoLaunch:this._options.autoLaunch=u!=="false";}updateLightDOM(){let{command:t,skillUrl:e}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==false?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.textContent=`Run on Cowork: ${t}`,o.setAttribute("data-platform","cowork"),o.setAttribute("data-command",t),e?(o.href=e,o.setAttribute("data-skill-url",e)):(o.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,o.removeAttribute("data-skill-url"));}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=l(t),c=this._options.size||"md",d=this._options.shape||"rounded",i=O[c],p=_[d][c];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let b=o!=="filled"?"transparent":a.bg,u=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,f=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${J}</style>
<button

@@ -932,22 +1098,22 @@ class="cb-btn"

style="
${m(a)}
--cb-bg: ${l};
--cb-border: ${g};
--cb-text: ${B};
${v(a)}
--cb-bg: ${b};
--cb-border: ${u};
--cb-text: ${f};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${d.height};
--cb-font-size: ${d.fontSize};
--cb-icon-size: ${d.iconSize};
--cb-padding: ${d.padding};
--cb-gap: ${d.gap};
--cb-radius: ${b};
--cb-height: ${i.height};
--cb-font-size: ${i.fontSize};
--cb-icon-size: ${i.iconSize};
--cb-padding: ${i.padding};
--cb-gap: ${i.gap};
--cb-radius: ${p};
"
aria-label="Run on Cowork: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${x}</span>
<span class="cb-btn-icon" aria-hidden="true">${k}</span>
<span class="cb-btn-label">Run on Cowork</span>
</button>
`;let v=this.shadowRoot.querySelector(".cb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick());}),this._rendered=true,this.setupSystemThemeWatch();}handleClick(){let{popup:t,command:o,skillUrl:e,popupTitle:a,popupDescription:s}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:true,composed:true,detail:{command:o}})),t===false){navigator.clipboard.writeText(o).then(()=>{this._options.onCopy?.(o),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:o}}));});return}y({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:s||"Copy and paste into a Cowork session to get started.",command:o,skillUrl:e,onCopy:c=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:c}}));},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:true,composed:true}));}});}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();t.addEventListener("change",o),this._mqCleanup=()=>t.removeEventListener("change",o);}};E.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];function $(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,E);}$();function q(r){let i=document.createElement("cowork-button");return i.options=r,i}function R(){if(typeof document>"u")return [];let r=[];return document.querySelectorAll("claude-code-button").forEach(i=>{let t=i.getAttribute("command")||"",a=i.getAttribute("prompt-flag")!=="false"?`claude -p "${t}"`:t;r.push({platform:"claude-code",command:t,fullCommand:a});}),document.querySelectorAll("cowork-button").forEach(i=>{let t=i.getAttribute("command")||"",o=i.getAttribute("skill-url")||void 0;r.push({platform:"cowork",command:t,...o&&{skillUrl:o}});}),r}function D(){let r=R();return r.length===0?{}:{"@context":"https://schema.org","@type":"WebPage",potentialAction:r.map(t=>{if(t.platform==="claude-code")return {"@type":"Action",name:`Run on Claude Code: ${t.command}`,description:t.command,target:{"@type":"EntryPoint",urlTemplate:`https://claude.ai/code?command=${encodeURIComponent(t.fullCommand||t.command)}`,actionPlatform:"https://claude.ai/code"},object:{"@type":"SoftwareSourceCode",runtimePlatform:"Claude Code",text:t.fullCommand||t.command}};let o={"@type":"EntryPoint",actionPlatform:"https://claude.ai/cowork"};t.skillUrl?o.urlTemplate=t.skillUrl:o.urlTemplate=`https://claude.ai/cowork?command=${encodeURIComponent(t.command)}`;let e={"@type":"Action",name:`Run on Cowork: ${t.command}`,description:t.command,target:o};return t.skillUrl&&(e.object={"@type":"SoftwareApplication",name:t.command,downloadUrl:t.skillUrl,applicationCategory:"AI Skill",operatingSystem:"Claude Cowork"}),e})}}function H(){if(typeof document>"u")return;let r=document.querySelector("script[data-claudebuttons-jsonld]");r&&r.remove();let i=D();if(!i||!("potentialAction"in i))return;let t=document.createElement("script");t.type="application/ld+json",t.setAttribute("data-claudebuttons-jsonld",""),t.textContent=JSON.stringify(i,null,2),document.head.appendChild(t);}function it(){O(),$();}
export{z as ALT_BRAND_COLOR,n as BRAND_COLOR,f as CLAUDE_CODE_ICON,x as COWORK_ICON,w as ClaudeCodeButton,T as ClaudePopupDialog,E as CoworkButton,N as createClaudeCodeButton,q as createCoworkButton,R as discoverButtons,D as generateStructuredData,H as injectStructuredData,it as register,O as registerClaudeCodeButton,$ as registerCoworkButton,p as resolveTheme,y as showPopup,k as themes};//# sourceMappingURL=index.mjs.map
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick());}),this._rendered=true,this.setupSystemThemeWatch();}handleClick(){let{popup:t,command:e,skillUrl:o,popupTitle:a,popupDescription:c,autoLaunch:d}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:true,composed:true,detail:{command:e}})),t===false){navigator.clipboard.writeText(e).then(()=>{this._options.onCopy?.(e),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:e}}));});return}w({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:c||"Copy and paste into a Cowork session to get started.",command:e,skillUrl:o,autoLaunch:d===true,onCopy:i=>{this._options.onCopy?.(i),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:true,composed:true,detail:{command:i}}));},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:true,composed:true}));}});}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e);}};A.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description","auto-launch"];function S(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,A);}S();function Q(r){let n=document.createElement("cowork-button");return n.options=r,n}function W(){if(typeof document>"u")return [];let r=[];return document.querySelectorAll("claude-code-button").forEach(n=>{let t=n.getAttribute("command")||"",a=n.getAttribute("prompt-flag")!=="false"?`claude -p "${t}"`:t;r.push({platform:"claude-code",command:t,fullCommand:a});}),document.querySelectorAll("cowork-button").forEach(n=>{let t=n.getAttribute("command")||"",e=n.getAttribute("skill-url")||void 0;r.push({platform:"cowork",command:t,...e&&{skillUrl:e}});}),r}function K(){let r=W();return r.length===0?{}:{"@context":"https://schema.org","@type":"WebPage",potentialAction:r.map(t=>{if(t.platform==="claude-code")return {"@type":"Action",name:`Run on Claude Code: ${t.command}`,description:t.command,target:{"@type":"EntryPoint",urlTemplate:`https://claude.ai/code?command=${encodeURIComponent(t.fullCommand||t.command)}`,actionPlatform:"https://claude.ai/code"},object:{"@type":"SoftwareSourceCode",runtimePlatform:"Claude Code",text:t.fullCommand||t.command}};let e={"@type":"EntryPoint",actionPlatform:"https://claude.ai/cowork"};t.skillUrl?e.urlTemplate=t.skillUrl:e.urlTemplate=`https://claude.ai/cowork?command=${encodeURIComponent(t.command)}`;let o={"@type":"Action",name:`Run on Cowork: ${t.command}`,description:t.command,target:e};return t.skillUrl&&(o.object={"@type":"SoftwareApplication",name:t.command,downloadUrl:t.skillUrl,applicationCategory:"AI Skill",operatingSystem:"Claude Cowork"}),o})}}function tt(){if(typeof document>"u")return;let r=document.querySelector("script[data-claudebuttons-jsonld]");r&&r.remove();let n=K();if(!n||!("potentialAction"in n))return;let t=document.createElement("script");t.type="application/ld+json",t.setAttribute("data-claudebuttons-jsonld",""),t.textContent=JSON.stringify(n,null,2),document.head.appendChild(t);}function kt(){L(),S();}
export{Y as ALT_BRAND_COLOR,s as BRAND_COLOR,x as CLAUDE_CODE_ICON,k as COWORK_ICON,T as ClaudeCodeButton,F as ClaudePopupDialog,A as CoworkButton,q as canUseClipboardWithGesture,Z as createClaudeCodeButton,Q as createCoworkButton,W as discoverButtons,K as generateStructuredData,tt as injectStructuredData,B as isDesktopAppLinkSupported,H as isDesktopComputerOs,N as isMobileOrTabletDevice,$ as isRestrictedEmbeddedBrowser,D as isTerminalLaunchSupported,kt as register,L as registerClaudeCodeButton,S as registerCoworkButton,l as resolveTheme,w as showPopup,y as themes};//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map
+11
-0
dist/react.d.mts

@@ -28,2 +28,8 @@ import { FC } from 'react';

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Terminal / Open Claude Desktop) if supported.
* Launch controls stay visible for manual retry.
*/
autoLaunch?: boolean;
}

@@ -53,2 +59,7 @@ interface CoworkButtonOptions {

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Claude Desktop) if supported.
*/
autoLaunch?: boolean;
}

@@ -55,0 +66,0 @@ 

+11
-0
dist/react.d.ts

@@ -28,2 +28,8 @@ import { FC } from 'react';

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Terminal / Open Claude Desktop) if supported.
* Launch controls stay visible for manual retry.
*/
autoLaunch?: boolean;
}

@@ -53,2 +59,7 @@ interface CoworkButtonOptions {

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Claude Desktop) if supported.
*/
autoLaunch?: boolean;
}

@@ -55,0 +66,0 @@ 

+243
-77
dist/react.js

@@ -1,2 +0,2 @@

"use strict";"use client";var V=Object.defineProperty;var at=Object.getOwnPropertyDescriptor;var ot=Object.getOwnPropertyNames;var nt=Object.prototype.hasOwnProperty;var $=(n,r)=>()=>(n&&(r=n(n=0)),r);var W=(n,r)=>{for(var t in r)V(n,t,{get:r[t],enumerable:!0})},rt=(n,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of ot(r))!nt.call(n,e)&&e!==t&&V(n,e,{get:()=>r[e],enumerable:!(a=at(r,e))||a.enumerable});return n};var it=n=>rt(V({},"__esModule",{value:!0}),n);var z,M,B,Y,Z,D=$(()=>{"use strict";z=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
"use strict";"use client";var W=Object.defineProperty;var lt=Object.getOwnPropertyDescriptor;var pt=Object.getOwnPropertyNames;var bt=Object.prototype.hasOwnProperty;var F=(n,r)=>()=>(n&&(r=n(n=0)),r);var j=(n,r)=>{for(var t in r)W(n,t,{get:r[t],enumerable:!0})},ut=(n,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of pt(r))!bt.call(n,o)&&o!==t&&W(n,o,{get:()=>r[o],enumerable:!(e=lt(r,o))||e.enumerable});return n};var ht=n=>ut(W({},"__esModule",{value:!0}),n);var D,P,B,Z,J,K,Y,z=F(()=>{"use strict";D=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Ears -->

@@ -16,3 +16,3 @@ <rect x="3.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>

<rect x="13.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
</svg>`,M=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
</svg>`,P=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Lightning bolt -->

@@ -29,7 +29,19 @@ <path d="M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z" fill="currentColor"/>

<path d="M3 10V3.5A1.5 1.5 0 014.5 2H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,Y=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,Z=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`,Z=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,J=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`});function f(n){return n!=="system"?P[n]:typeof window>"u"?P.light:window.matchMedia("(prefers-color-scheme: dark)").matches?P.dark:P.light}function A(n){return`
</svg>`,K=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="3" y="4" width="18" height="16" rx="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M3 9h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 13l2.5 2L7 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 17h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,Y=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="4" y="5" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M4 8.5h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="6.5" cy="7" r="0.65" fill="currentColor"/>
<circle cx="8.5" cy="7" r="0.65" fill="currentColor"/>
<path d="M9 19.5h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8 16.5h8v3H8v-3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
</svg>`});function k(n){return n!=="system"?H[n]:typeof window>"u"?H.light:window.matchMedia("(prefers-color-scheme: dark)").matches?H.dark:H.light}function L(n){return`
--cb-bg: ${n.bg};

@@ -45,3 +57,3 @@ --cb-text: ${n.text};

--cb-code-text: ${n.codeText};
`}var c,_,H,P,N,I,q=$(()=>{"use strict";c="#D4795C",_="#C06A4E",H="#B35E43",P={branded:{bg:c,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:c,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:c,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:c,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};N={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},I={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"}}});function U(n){let r=document.createElement("claude-popup-dialog");return r.options=n,document.body.appendChild(r),r}var st,j,K=$(()=>{"use strict";D();q();st=`
`}var d,_,I,H,N,q,U=F(()=>{"use strict";d="#D4795C",_="#C06A4E",I="#B35E43",H={branded:{bg:d,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:d,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:d,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:d,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};N={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},q={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"}}});function Q(){if(typeof navigator>"u")return!0;let n=navigator.userAgent||"";return!!(!n.trim()||/\bFBAN\b|\bFBAV\b|FB_IAB|Instagram|Line\/|MicroMessenger|Snapchat|TikTok|LinkedInApp|Pinterest/i.test(n)||/Twitter for (iPhone|Android)/i.test(n)||/; wv\)/.test(n)||/Opera Mini|OPiOS/i.test(n))}function mt(){if(typeof navigator>"u")return!1;let n=navigator.userAgent||"",r=typeof navigator.maxTouchPoints=="number"?navigator.maxTouchPoints:0,t=navigator.platform||"";return!!(/iPhone|iPod/i.test(n)||/iPad/i.test(n)||/Android/i.test(n)&&/Mobile/i.test(n)||/Android/i.test(n)&&!/Mobile/i.test(n)||(t==="MacIntel"||t==="MacARM")&&r>1||/webOS|BlackBerry|IEMobile|Opera Mini/i.test(n))}function gt(){if(mt()||typeof navigator>"u")return!1;let n=navigator.userAgent||"",r=navigator.platform||"";return!!(/Win|Mac|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(r)||/Windows NT|Macintosh|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(n))}function vt(){if(typeof window>"u"||typeof navigator>"u")return!1;if(window.isSecureContext&&navigator.clipboard&&typeof navigator.clipboard.writeText=="function")return!0;try{if(typeof document<"u"&&typeof document.queryCommandSupported=="function")return document.queryCommandSupported("copy")===!0}catch{}return!1}function tt(){return typeof window<"u"&&typeof document<"u"&&typeof document.createElement=="function"}function et(){return!(!tt()||Q())}function ot(){return!(!tt()||Q()||!gt()||!vt())}var at=F(()=>{"use strict"});function V(n){let r=document.createElement("claude-popup-dialog");return r.options=n,document.body.appendChild(r),r}var ft,G,X=F(()=>{"use strict";z();U();at();ft=`
:host {

@@ -279,2 +291,108 @@ position: fixed;

.cb-launch-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.cb-launch-btn:active:not(:disabled) { transform: scale(0.99); }
.cb-launch-btn .cb-launch-svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.cb-launch-btn--desktop {
color: var(--cb-surface-text);
background: linear-gradient(
165deg,
color-mix(in srgb, var(--cb-primary) 14%, var(--cb-surface)) 0%,
var(--cb-surface) 55%
);
border: 1.5px solid color-mix(in srgb, var(--cb-primary) 38%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 55%, transparent) inset,
0 4px 14px -4px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}
.cb-launch-btn--desktop:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--cb-primary) 72%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 45%, transparent) inset,
0 8px 24px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}
.cb-launch-btn--desktop:focus-visible {
outline: 2px solid var(--cb-primary);
outline-offset: 2px;
}
.cb-launch-btn--terminal {
color: var(--cb-code-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--cb-code-text) 8%, var(--cb-code-bg)) 0%, var(--cb-code-bg) 100%);
border: 1px solid color-mix(in srgb, var(--cb-code-text) 22%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, black 25%, transparent) inset,
0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
.cb-launch-btn--terminal:hover:not(:disabled) {
border-color: color-mix(in srgb, #34d399 55%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, #34d399 20%, transparent) inset,
0 8px 28px -8px color-mix(in srgb, #34d399 28%, transparent);
}
.cb-launch-btn--terminal:focus-visible {
outline: 2px solid #34d399;
outline-offset: 2px;
}
.cb-launch-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: saturate(0.7);
box-shadow: none;
}
.cb-launch-btn--desktop:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn--terminal:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn:disabled .cb-launch-svg {
opacity: 0.75;
}
.cb-launch-sub {
display: block;
margin-top: 6px;
font-size: 11px;
font-weight: 500;
color: var(--cb-muted);
line-height: 1.35;
text-align: center;
}
@keyframes cb-fade-in {

@@ -312,2 +430,5 @@ from { opacity: 0; }

.cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
.cb-launch-btn { min-height: 46px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.cb-launch-btn .cb-launch-svg { width: 20px; height: 20px; }
.cb-launch-sub { font-size: 10px; }
.cb-hint { font-size: 11px; }

@@ -325,28 +446,24 @@ }

}
`,j=class extends HTMLElement{constructor(){super();this._mqCleanup=null;this.attachShadow({mode:"open"})}set options(t){this._options=t,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return f(t);let a=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return a?f("dark"):f("light");let e=a?f("dark"):f("light"),o=f(t);return{...e,primary:o.primary,primaryText:o.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:a,description:e,command:o,fullCommand:i,skillUrl:d}=this._options,s=this.resolvePopupTokens(),b=t==="claude-code"?z:M,p=t==="claude-code",x=i||o;this.shadowRoot.innerHTML=`
<style>${st}</style>
<div style="${A(s)}">
`,G=class n extends HTMLElement{constructor(){super();this._mqCleanup=null;this._autoLaunchConsumed=!1;this.attachShadow({mode:"open"})}set options(t){this._autoLaunchConsumed=!1,this._options=t,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return k(t);let e=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return e?k("dark"):k("light");let o=e?k("dark"):k("light"),a=k(t);return{...o,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:e,description:o,command:a,fullCommand:s,skillUrl:c,desktopLaunchUrl:i,autoLaunch:p}=this._options,b=this.resolvePopupTokens(),u=t==="claude-code"?D:P,y=t==="claude-code",m=s||a,h=i??"claude://",E=et(),v=ot();if(this.shadowRoot.innerHTML=`
<style>${ft}</style>
<div style="${L(b)}">
<div class="cb-backdrop" data-action="close"></div>
<div class="cb-dialog" role="dialog" aria-modal="true" aria-labelledby="cb-dialog-title">
<div class="cb-dialog-header">
<div class="cb-dialog-header-icon">${b}</div>
<div class="cb-dialog-header-icon">${u}</div>
<div class="cb-dialog-header-text">
<div class="cb-dialog-title" id="cb-dialog-title">${a}</div>
${e?`<div class="cb-dialog-description">${e}</div>`:""}
<div class="cb-dialog-title" id="cb-dialog-title">${e}</div>
${o?`<div class="cb-dialog-description">${o}</div>`:""}
</div>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${Z}</button>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${J}</button>
</div>
<div class="cb-dialog-body">
${p?this.renderClaudeCodeBody(x):this.renderCoworkBody(o,d)}
${y?this.renderClaudeCodeBody(m):this.renderCoworkBody(a,c)}
</div>
<div class="cb-dialog-footer">
${p?`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`:`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}
${y?this.renderClaudeCodeFooter(m,v):this.renderCoworkFooter(this.escapeHref(h),E)}
</div>
</div>
</div>
`,this.setupListeners(),this.setupSystemThemeWatch()}renderClaudeCodeBody(t){return`
`,this.setupListeners(),this.setupSystemThemeWatch(),p&&!this._autoLaunchConsumed){if(this._autoLaunchConsumed=!0,t==="cowork"&&E)this.openDesktopAppLink(h);else if(t==="claude-code"&&v){let f=this.shadowRoot?.querySelector('[data-action="launch-terminal"]');f&&this.launchTerminal(f,m)}}}openDesktopAppLink(t){if(this.dispatchEvent(new CustomEvent("cb-launch-desktop",{bubbles:!0,composed:!0,detail:{href:t}})),typeof document>"u")return;let e=document.createElement("a");e.href=t,e.rel="noopener noreferrer",e.style.cssText="position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none",document.body.appendChild(e),e.click(),requestAnimationFrame(()=>e.remove())}renderClaudeCodeBody(t){return`
<div class="cb-step">

@@ -368,3 +485,3 @@ <div class="cb-step-num">1</div>

</div>
`}renderCoworkBody(t,a){let e="";if(a){let o=`Install the skill from ${a} and run ${t}`;e+=`
`}renderCoworkBody(t,e){let o="";if(e){let a=`Install the skill from ${e} and run ${t}`;o+=`
<div class="cb-step">

@@ -375,4 +492,4 @@ <div class="cb-step-num">1</div>

<div class="cb-code-block">
<div class="cb-code-text">${this.escapeHtml(o)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(o)}">${B}<span>Copy</span></button>
<div class="cb-code-text">${this.escapeHtml(a)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(a)}">${B}<span>Copy</span></button>
</div>

@@ -387,3 +504,3 @@ </div>

</div>
`}else e+=`
`}else o+=`
<div class="cb-step">

@@ -405,3 +522,52 @@ <div class="cb-step-num">1</div>

</div>
`;return e}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let a=t.target.closest("[data-action]");if(!a)return;let e=a.dataset.action;if(e==="close")this.close();else if(e==="copy"){let o=a.dataset.command||"";this.copyToClipboard(o,a)}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let e=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();e.addEventListener("change",o),this._mqCleanup=()=>e.removeEventListener("change",o)}async copyToClipboard(t,a){try{await navigator.clipboard.writeText(t);let e=a.querySelector("span"),o=a,i=o.querySelector(".cb-icon-sm")?.outerHTML||"";a.setAttribute("data-copied","true"),e&&(e.textContent="Copied!"),o.innerHTML=`${Y}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{a.setAttribute("data-copied","false"),o.innerHTML=`${B}<span>Copy</span>`},2e3)}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),this._options.onCopy?.(t)}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),a=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),a&&(a.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(t){let a=document.createElement("div");return a.textContent=t,a.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",j)});var J={};W(J,{ClaudeCodeButton:()=>R,createClaudeCodeButton:()=>dt,registerClaudeCodeButton:()=>G});function G(n="claude-code-button"){typeof customElements>"u"||customElements.get(n)||customElements.define(n,R)}function dt(n){let r=document.createElement("claude-code-button");return r.options=n,r}var ct,R,Q=$(()=>{"use strict";D();q();K();ct=`
`;return o}renderCoworkFooter(t,e){let o="Open this page in Safari, Chrome, Firefox, or Edge. In-app browsers usually block opening apps.",a=e?"Opens the Claude app through your system link handler\u2014then paste the prompt below into Cowork.":"App links aren\u2019t supported in your current browser (common inside social or chat apps). Open this page in a full browser, or launch Claude Desktop manually and paste below.";return`
${e?`
<a
class="cb-launch-btn cb-launch-btn--desktop"
href="${t}"
data-action="launch-desktop"
rel="noopener noreferrer"
>
${Y}
<span>Open Claude Desktop</span>
</a>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--desktop"
disabled
aria-disabled="true"
aria-label="Open Claude Desktop (unavailable in this browser)"
title="${this.escapeAttr(o)}"
>
${Y}
<span>Open Claude Desktop</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}renderClaudeCodeFooter(t,e){let o="Available on desktop in a normal browser with clipboard access. Use Copy above, then paste into your terminal.",a=this.getTerminalLaunchSubcopy(e);return`
${e?`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
data-action="launch-terminal"
data-command="${this.escapeAttr(t)}"
aria-label="Copy command and open a terminal app"
>
${K}
<span>Open Terminal</span>
</button>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
disabled
aria-disabled="true"
aria-label="Open Terminal (unavailable in this environment)"
title="${this.escapeAttr(o)}"
>
${K}
<span>Open Terminal</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`}static isDesktopMac(){if(typeof navigator>"u")return!1;let t=navigator.platform||"",e=navigator.userAgent||"";return/iPhone|iPad|iPod/i.test(e)?!1:/Mac/.test(t)||/Mac OS X/.test(e)}getTerminalLaunchSubcopy(t){if(!t)return"Use the Copy button above, then paste into Terminal, PowerShell, or your preferred shell on a desktop computer.";if(typeof navigator>"u")return"Copies the command to your clipboard first.";let e=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(e)?"Copies the command to your clipboard. Open a terminal or SSH client on your device to run it.":n.isDesktopMac()?"Copies the command, then tries to open iTerm if you have it\u2014otherwise open Terminal and paste.":"Copies the command, then tries to open VS Code if installed\u2014paste into its terminal, or use any shell."}getTerminalProtocolUrl(){if(typeof navigator>"u")return null;let t=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(t)?null:n.isDesktopMac()?"iterm2://":"vscode://"}tryOpenCustomProtocol(t){if(typeof document>"u")return;let e=document.createElement("iframe");e.style.cssText="position:fixed;width:0;height:0;border:none;opacity:0;pointer-events:none",e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.src=t,document.body.appendChild(e),window.setTimeout(()=>e.remove(),1200)}escapeHref(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let e=t.target.closest("[data-action]");if(!e)return;let o=e.dataset.action;if(o==="close")this.close();else if(o==="copy"){let a=e.dataset.command||"";this.copyToClipboard(a,e)}else if(o==="launch-desktop"){t.preventDefault();let a=e.getAttribute("href")||"";this.openDesktopAppLink(a||e.href)}else if(o==="launch-terminal"){let a=e.dataset.command||"";this.launchTerminal(e,a)}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();o.addEventListener("change",a),this._mqCleanup=()=>o.removeEventListener("change",a)}async launchTerminal(t,e){let o=t.querySelector("span");try{await navigator.clipboard.writeText(e),this._options.onCopy?.(e);let a=this.getTerminalProtocolUrl();a&&this.tryOpenCustomProtocol(a),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}catch{let a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),this._options.onCopy?.(e);let s=this.getTerminalProtocolUrl();s&&this.tryOpenCustomProtocol(s),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}}async copyToClipboard(t,e){try{await navigator.clipboard.writeText(t);let o=e.querySelector("span"),a=e,s=a.querySelector(".cb-icon-sm")?.outerHTML||"";e.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),a.innerHTML=`${Z}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{e.setAttribute("data-copied","false"),a.innerHTML=`${B}<span>Copy</span>`},2e3)}catch{let o=document.createElement("textarea");o.value=t,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o),this._options.onCopy?.(t)}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),e=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),e&&(e.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",G)});var rt={};j(rt,{ClaudeCodeButton:()=>M,createClaudeCodeButton:()=>Ct,registerClaudeCodeButton:()=>nt});function nt(n="claude-code-button"){typeof customElements>"u"||customElements.get(n)||customElements.define(n,M)}function Ct(n){let r=document.createElement("claude-code-button");return r.options=n,r}var xt,M,it=F(()=>{"use strict";z();U();X();xt=`
:host {

@@ -455,3 +621,3 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${H};
background: ${I};
transform: scale(0.98);

@@ -497,4 +663,4 @@ }

background: transparent;
border-color: ${c};
color: ${c};
border-color: ${d};
color: ${d};
}

@@ -530,3 +696,3 @@ :host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {

:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${c};
border-color: ${d};
background: rgba(212, 121, 92, 0.08);

@@ -545,3 +711,3 @@ }

:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${c};
border-color: ${d};
background: rgba(212, 121, 92, 0.05);

@@ -562,3 +728,3 @@ }

:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${c};
color: ${d};
}

@@ -609,3 +775,3 @@ :host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {

.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${c});
outline: 2px solid var(--cb-focus-color, ${d});
outline-offset: 2px;

@@ -633,6 +799,6 @@ }

:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${c});
color: var(--cb-accent-color, ${d});
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${c});
color: var(--cb-accent-color, ${d});
}

@@ -642,3 +808,3 @@

:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${c});
color: var(--cb-accent-color, ${d});
}

@@ -651,4 +817,4 @@

}
`,R=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),a=this.getAttribute("theme"),e=this.getAttribute("size"),o=this.getAttribute("variant"),i=this.getAttribute("shape"),d=this.getAttribute("popup"),s=this.getAttribute("prompt-flag"),b=this.getAttribute("popup-title"),p=this.getAttribute("popup-description");t!==null&&(this._options.command=t),a&&(this._options.theme=a),e&&(this._options.size=e),o&&(this._options.variant=o),i&&(this._options.shape=i),d!==null&&(this._options.popup=d!=="false"),s!==null&&(this._options.promptFlag=s!=="false"),b!==null&&(this._options.popupTitle=b),p!==null&&(this._options.popupDescription=p)}updateLightDOM(){let{command:t}=this._options,a=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.href=`https://claude.ai/code?command=${encodeURIComponent(a)}`,e.textContent=`Run on Claude Code: ${t}`,e.setAttribute("data-platform","claude-code"),e.setAttribute("data-command",t),e.setAttribute("data-full-command",a)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:a}=this._options;return a===!1?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),a=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",o=f(t),i=this._options.size||"md",d=this._options.shape||"rounded",s=I[i],b=N[d][i];this.setAttribute("data-theme",a),this.setAttribute("data-variant",e);let p=e!=="filled"?"transparent":o.bg,x=e==="ghost"?"transparent":e==="outline"?o.primary:o.border,k=e!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${ct}</style>
`,M=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("theme"),o=this.getAttribute("size"),a=this.getAttribute("variant"),s=this.getAttribute("shape"),c=this.getAttribute("popup"),i=this.getAttribute("prompt-flag"),p=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),u=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e&&(this._options.theme=e),o&&(this._options.size=o),a&&(this._options.variant=a),s&&(this._options.shape=s),c!==null&&(this._options.popup=c!=="false"),i!==null&&(this._options.promptFlag=i!=="false"),p!==null&&(this._options.popupTitle=p),b!==null&&(this._options.popupDescription=b),u===null?delete this._options.autoLaunch:this._options.autoLaunch=u!=="false"}updateLightDOM(){let{command:t}=this._options,e=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.href=`https://claude.ai/code?command=${encodeURIComponent(e)}`,o.textContent=`Run on Claude Code: ${t}`,o.setAttribute("data-platform","claude-code"),o.setAttribute("data-command",t),o.setAttribute("data-full-command",e)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:e}=this._options;return e===!1?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=k(t),s=this._options.size||"md",c=this._options.shape||"rounded",i=q[s],p=N[c][s];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let b=o!=="filled"?"transparent":a.bg,u=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,y=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${xt}</style>
<button

@@ -658,21 +824,21 @@ class="cb-btn"

style="
${A(o)}
--cb-bg: ${p};
--cb-border: ${x};
--cb-text: ${k};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${s.height};
--cb-font-size: ${s.fontSize};
--cb-icon-size: ${s.iconSize};
--cb-padding: ${s.ccPadding};
--cb-gap: ${s.gap};
--cb-radius: ${b};
${L(a)}
--cb-bg: ${b};
--cb-border: ${u};
--cb-text: ${y};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${i.height};
--cb-font-size: ${i.fontSize};
--cb-icon-size: ${i.iconSize};
--cb-padding: ${i.ccPadding};
--cb-gap: ${i.gap};
--cb-radius: ${p};
"
aria-label="Run on Claude Code: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${z}</span>
<span class="cb-btn-icon" aria-hidden="true">${D}</span>
<span class="cb-btn-label">Run on Claude Code</span>
</button>
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:a,popupTitle:e,popupDescription:o}=this._options,i=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:a,fullCommand:i}})),t===!1){navigator.clipboard.writeText(i).then(()=>{this._options.onCopy?.(i),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:i}}))});return}U({variant:"claude-code",theme:this.getResolvedTheme(),title:e||"Run on Claude Code",description:o||"Execute this command in your terminal to get started.",command:a,fullCommand:i,onCopy:d=>{this._options.onCopy?.(d),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:d}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();t.addEventListener("change",a),this._mqCleanup=()=>t.removeEventListener("change",a)}};R.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];G()});var tt={};W(tt,{CoworkButton:()=>S,createCoworkButton:()=>bt,registerCoworkButton:()=>X});function X(n="cowork-button"){typeof customElements>"u"||customElements.get(n)||customElements.define(n,S)}function bt(n){let r=document.createElement("cowork-button");return r.options=n,r}var lt,S,et=$(()=>{"use strict";D();q();K();lt=`
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:e,popupTitle:o,popupDescription:a,autoLaunch:s}=this._options,c=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:e,fullCommand:c}})),t===!1){navigator.clipboard.writeText(c).then(()=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:c}}))});return}V({variant:"claude-code",theme:this.getResolvedTheme(),title:o||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:e,fullCommand:c,autoLaunch:s===!0,onCopy:i=>{this._options.onCopy?.(i),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:i}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e)}};M.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description","auto-launch"];nt()});var ct={};j(ct,{CoworkButton:()=>R,createCoworkButton:()=>yt,registerCoworkButton:()=>st});function st(n="cowork-button"){typeof customElements>"u"||customElements.get(n)||customElements.define(n,R)}function yt(n){let r=document.createElement("cowork-button");return r.options=n,r}var kt,R,dt=F(()=>{"use strict";z();U();X();kt=`
:host {

@@ -726,3 +892,3 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${H};
background: ${I};
transform: scale(0.98);

@@ -768,4 +934,4 @@ }

background: transparent;
border-color: ${c};
color: ${c};
border-color: ${d};
color: ${d};
}

@@ -801,3 +967,3 @@ :host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {

:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${c};
border-color: ${d};
background: rgba(212, 121, 92, 0.08);

@@ -816,3 +982,3 @@ }

:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${c};
border-color: ${d};
background: rgba(212, 121, 92, 0.05);

@@ -833,3 +999,3 @@ }

:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${c};
color: ${d};
}

@@ -880,3 +1046,3 @@ :host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {

.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${c});
outline: 2px solid var(--cb-focus-color, ${d});
outline-offset: 2px;

@@ -904,7 +1070,7 @@ }

:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${c});
color: var(--cb-accent-color, ${d});
--cb-icon-accent: #1C1917;
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${c});
color: var(--cb-accent-color, ${d});
--cb-icon-accent: #FFFFFF;

@@ -915,3 +1081,3 @@ }

:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${c});
color: var(--cb-accent-color, ${d});
}

@@ -924,4 +1090,4 @@

}
`,S=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),a=this.getAttribute("skill-url"),e=this.getAttribute("theme"),o=this.getAttribute("size"),i=this.getAttribute("variant"),d=this.getAttribute("shape"),s=this.getAttribute("popup"),b=this.getAttribute("popup-title"),p=this.getAttribute("popup-description");t!==null&&(this._options.command=t),a!==null&&(this._options.skillUrl=a),e&&(this._options.theme=e),o&&(this._options.size=o),i&&(this._options.variant=i),d&&(this._options.shape=d),s!==null&&(this._options.popup=s!=="false"),b!==null&&(this._options.popupTitle=b),p!==null&&(this._options.popupDescription=p)}updateLightDOM(){let{command:t,skillUrl:a}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.textContent=`Run on Cowork: ${t}`,e.setAttribute("data-platform","cowork"),e.setAttribute("data-command",t),a?(e.href=a,e.setAttribute("data-skill-url",a)):(e.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,e.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),a=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",o=f(t),i=this._options.size||"md",d=this._options.shape||"rounded",s=I[i],b=N[d][i];this.setAttribute("data-theme",a),this.setAttribute("data-variant",e);let p=e!=="filled"?"transparent":o.bg,x=e==="ghost"?"transparent":e==="outline"?o.primary:o.border,k=e!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${lt}</style>
`,R=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("skill-url"),o=this.getAttribute("theme"),a=this.getAttribute("size"),s=this.getAttribute("variant"),c=this.getAttribute("shape"),i=this.getAttribute("popup"),p=this.getAttribute("popup-title"),b=this.getAttribute("popup-description"),u=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e!==null&&(this._options.skillUrl=e),o&&(this._options.theme=o),a&&(this._options.size=a),s&&(this._options.variant=s),c&&(this._options.shape=c),i!==null&&(this._options.popup=i!=="false"),p!==null&&(this._options.popupTitle=p),b!==null&&(this._options.popupDescription=b),u===null?delete this._options.autoLaunch:this._options.autoLaunch=u!=="false"}updateLightDOM(){let{command:t,skillUrl:e}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.textContent=`Run on Cowork: ${t}`,o.setAttribute("data-platform","cowork"),o.setAttribute("data-command",t),e?(o.href=e,o.setAttribute("data-skill-url",e)):(o.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,o.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=k(t),s=this._options.size||"md",c=this._options.shape||"rounded",i=q[s],p=N[c][s];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let b=o!=="filled"?"transparent":a.bg,u=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,y=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${kt}</style>
<button

@@ -931,21 +1097,21 @@ class="cb-btn"

style="
${A(o)}
--cb-bg: ${p};
--cb-border: ${x};
--cb-text: ${k};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${s.height};
--cb-font-size: ${s.fontSize};
--cb-icon-size: ${s.iconSize};
--cb-padding: ${s.padding};
--cb-gap: ${s.gap};
--cb-radius: ${b};
${L(a)}
--cb-bg: ${b};
--cb-border: ${u};
--cb-text: ${y};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${i.height};
--cb-font-size: ${i.fontSize};
--cb-icon-size: ${i.iconSize};
--cb-padding: ${i.padding};
--cb-gap: ${i.gap};
--cb-radius: ${p};
"
aria-label="Run on Cowork: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${M}</span>
<span class="cb-btn-icon" aria-hidden="true">${P}</span>
<span class="cb-btn-label">Run on Cowork</span>
</button>
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:a,skillUrl:e,popupTitle:o,popupDescription:i}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:a}})),t===!1){navigator.clipboard.writeText(a).then(()=>{this._options.onCopy?.(a),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:a}}))});return}U({variant:"cowork",theme:this.getResolvedTheme(),title:o||"Run on Cowork",description:i||"Copy and paste into a Cowork session to get started.",command:a,skillUrl:e,onCopy:d=>{this._options.onCopy?.(d),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:d}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();t.addEventListener("change",a),this._mqCleanup=()=>t.removeEventListener("change",a)}};S.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];X()});var mt={};W(mt,{ClaudeCodeButton:()=>ht,CoworkButton:()=>ut});module.exports=it(mt);var l=require("react");function pt(){let n=(0,l.useRef)(!1);return(0,l.useEffect)(()=>{n.current=!0},[]),n}var ht=({command:n,theme:r="branded",size:t="md",variant:a="filled",shape:e="rounded",popup:o=!0,promptFlag:i=!0,onCopy:d,popupTitle:s,popupDescription:b,className:p,style:x,onCbCopy:k,onCbOpen:m,onCbClose:u})=>{let y=(0,l.useRef)(null),w=(0,l.useRef)(null),T=pt(),E=(0,l.useRef)(k);E.current=k;let O=(0,l.useRef)(m);O.current=m;let L=(0,l.useRef)(u);return L.current=u,(0,l.useEffect)(()=>{if(y.current)return Promise.resolve().then(()=>(Q(),J)).then(({ClaudeCodeButton:g})=>{if(!y.current||w.current)return;let v=document.createElement("claude-code-button");w.current=v,v.addEventListener("cb-copy",(h=>E.current?.(h))),v.addEventListener("cb-open",(h=>O.current?.(h))),v.addEventListener("cb-close",(h=>L.current?.(h))),y.current.appendChild(v)}),()=>{let g=w.current,v=y.current;g&&v?.contains(g)&&v.removeChild(g),w.current=null}},[]),(0,l.useEffect)(()=>{let g=w.current;!g||!("options"in g)||(g.options={command:n,theme:r,size:t,variant:a,shape:e,popup:o,promptFlag:i,onCopy:d,popupTitle:s,popupDescription:b})},[n,r,t,a,e,o,i,d,s,b]),(0,l.createElement)("div",{ref:y,className:p,style:{display:"inline-block",...x},suppressHydrationWarning:!0})},ut=({command:n,skillUrl:r,theme:t="branded",size:a="md",variant:e="filled",shape:o="rounded",popup:i=!0,onCopy:d,onDownload:s,popupTitle:b,popupDescription:p,className:x,style:k,onCbCopy:m,onCbDownload:u,onCbOpen:y,onCbClose:w})=>{let T=(0,l.useRef)(null),E=(0,l.useRef)(null),O=(0,l.useRef)(m);O.current=m;let L=(0,l.useRef)(u);L.current=u;let g=(0,l.useRef)(y);g.current=y;let v=(0,l.useRef)(w);return v.current=w,(0,l.useEffect)(()=>{if(T.current)return Promise.resolve().then(()=>(et(),tt)).then(({CoworkButton:h})=>{if(!T.current||E.current)return;let C=document.createElement("cowork-button");E.current=C,C.addEventListener("cb-copy",(F=>O.current?.(F))),C.addEventListener("cb-download",(F=>L.current?.(F))),C.addEventListener("cb-open",(F=>g.current?.(F))),C.addEventListener("cb-close",(F=>v.current?.(F))),T.current.appendChild(C)}),()=>{let h=E.current,C=T.current;h&&C?.contains(h)&&C.removeChild(h),E.current=null}},[]),(0,l.useEffect)(()=>{let h=E.current;!h||!("options"in h)||(h.options={command:n,skillUrl:r,theme:t,size:a,variant:e,shape:o,popup:i,onCopy:d,onDownload:s,popupTitle:b,popupDescription:p})},[n,r,t,a,e,o,i,d,s,b,p]),(0,l.createElement)("div",{ref:T,className:x,style:{display:"inline-block",...k},suppressHydrationWarning:!0})};0&&(module.exports={ClaudeCodeButton,CoworkButton});
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:e,skillUrl:o,popupTitle:a,popupDescription:s,autoLaunch:c}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:e}})),t===!1){navigator.clipboard.writeText(e).then(()=>{this._options.onCopy?.(e),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:e}}))});return}V({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:s||"Copy and paste into a Cowork session to get started.",command:e,skillUrl:o,autoLaunch:c===!0,onCopy:i=>{this._options.onCopy?.(i),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:i}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e)}};R.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description","auto-launch"];st()});var At={};j(At,{ClaudeCodeButton:()=>Et,CoworkButton:()=>Tt});module.exports=ht(At);var l=require("react");function wt(){let n=(0,l.useRef)(!1);return(0,l.useEffect)(()=>{n.current=!0},[]),n}var Et=({command:n,theme:r="branded",size:t="md",variant:e="filled",shape:o="rounded",popup:a=!0,promptFlag:s=!0,autoLaunch:c,onCopy:i,popupTitle:p,popupDescription:b,className:u,style:y,onCbCopy:m,onCbOpen:h,onCbClose:E})=>{let v=(0,l.useRef)(null),f=(0,l.useRef)(null),O=wt(),T=(0,l.useRef)(m);T.current=m;let $=(0,l.useRef)(h);$.current=h;let S=(0,l.useRef)(E);return S.current=E,(0,l.useEffect)(()=>{if(v.current)return Promise.resolve().then(()=>(it(),rt)).then(({ClaudeCodeButton:x})=>{if(!v.current||f.current)return;let C=document.createElement("claude-code-button");f.current=C,C.addEventListener("cb-copy",(g=>T.current?.(g))),C.addEventListener("cb-open",(g=>$.current?.(g))),C.addEventListener("cb-close",(g=>S.current?.(g))),v.current.appendChild(C)}),()=>{let x=f.current,C=v.current;x&&C?.contains(x)&&C.removeChild(x),f.current=null}},[]),(0,l.useEffect)(()=>{let x=f.current;!x||!("options"in x)||(x.options={command:n,theme:r,size:t,variant:e,shape:o,popup:a,promptFlag:s,autoLaunch:c,onCopy:i,popupTitle:p,popupDescription:b})},[n,r,t,e,o,a,s,c,i,p,b]),(0,l.createElement)("div",{ref:v,className:u,style:{display:"inline-block",...y},suppressHydrationWarning:!0})},Tt=({command:n,skillUrl:r,theme:t="branded",size:e="md",variant:o="filled",shape:a="rounded",popup:s=!0,autoLaunch:c,onCopy:i,onDownload:p,popupTitle:b,popupDescription:u,className:y,style:m,onCbCopy:h,onCbDownload:E,onCbOpen:v,onCbClose:f})=>{let O=(0,l.useRef)(null),T=(0,l.useRef)(null),$=(0,l.useRef)(h);$.current=h;let S=(0,l.useRef)(E);S.current=E;let x=(0,l.useRef)(v);x.current=v;let C=(0,l.useRef)(f);return C.current=f,(0,l.useEffect)(()=>{if(O.current)return Promise.resolve().then(()=>(dt(),ct)).then(({CoworkButton:g})=>{if(!O.current||T.current)return;let w=document.createElement("cowork-button");T.current=w,w.addEventListener("cb-copy",(A=>$.current?.(A))),w.addEventListener("cb-download",(A=>S.current?.(A))),w.addEventListener("cb-open",(A=>x.current?.(A))),w.addEventListener("cb-close",(A=>C.current?.(A))),O.current.appendChild(w)}),()=>{let g=T.current,w=O.current;g&&w?.contains(g)&&w.removeChild(g),T.current=null}},[]),(0,l.useEffect)(()=>{let g=T.current;!g||!("options"in g)||(g.options={command:n,skillUrl:r,theme:t,size:e,variant:o,shape:a,popup:s,autoLaunch:c,onCopy:i,onDownload:p,popupTitle:b,popupDescription:u})},[n,r,t,e,o,a,s,c,i,p,b,u]),(0,l.createElement)("div",{ref:O,className:y,style:{display:"inline-block",...m},suppressHydrationWarning:!0})};0&&(module.exports={ClaudeCodeButton,CoworkButton});
//# sourceMappingURL=react.js.map
+1
-1
dist/react.mjs

@@ -1,2 +0,2 @@

"use client";import{useRef as t,useEffect as g,createElement as H}from"react";function P(){let s=t(!1);return g(()=>{s.current=!0},[]),s}var h=({command:s,theme:a="branded",size:C="md",variant:v="filled",shape:E="rounded",popup:m=!0,promptFlag:f=!0,onCopy:b,popupTitle:p,popupDescription:L,className:w,style:x,onCbCopy:O,onCbOpen:y,onCbClose:B})=>{let u=t(null),c=t(null),l=P(),i=t(O);i.current=O;let R=t(y);R.current=y;let k=t(B);return k.current=B,g(()=>{if(u.current)return import("./claude-code-button-R5QHJTGG.mjs").then(({ClaudeCodeButton:n})=>{if(!u.current||c.current)return;let r=document.createElement("claude-code-button");c.current=r,r.addEventListener("cb-copy",(e=>i.current?.(e))),r.addEventListener("cb-open",(e=>R.current?.(e))),r.addEventListener("cb-close",(e=>k.current?.(e))),u.current.appendChild(r)}),()=>{let n=c.current,r=u.current;n&&r?.contains(n)&&r.removeChild(n),c.current=null}},[]),g(()=>{let n=c.current;!n||!("options"in n)||(n.options={command:s,theme:a,size:C,variant:v,shape:E,popup:m,promptFlag:f,onCopy:b,popupTitle:p,popupDescription:L})},[s,a,C,v,E,m,f,b,p,L]),H("div",{ref:u,className:w,style:{display:"inline-block",...x},suppressHydrationWarning:!0})},F=({command:s,skillUrl:a,theme:C="branded",size:v="md",variant:E="filled",shape:m="rounded",popup:f=!0,onCopy:b,onDownload:p,popupTitle:L,popupDescription:w,className:x,style:O,onCbCopy:y,onCbDownload:B,onCbOpen:u,onCbClose:c})=>{let l=t(null),i=t(null),R=t(y);R.current=y;let k=t(B);k.current=B;let n=t(u);n.current=u;let r=t(c);return r.current=c,g(()=>{if(l.current)return import("./cowork-button-TYGZL33F.mjs").then(({CoworkButton:e})=>{if(!l.current||i.current)return;let o=document.createElement("cowork-button");i.current=o,o.addEventListener("cb-copy",(d=>R.current?.(d))),o.addEventListener("cb-download",(d=>k.current?.(d))),o.addEventListener("cb-open",(d=>n.current?.(d))),o.addEventListener("cb-close",(d=>r.current?.(d))),l.current.appendChild(o)}),()=>{let e=i.current,o=l.current;e&&o?.contains(e)&&o.removeChild(e),i.current=null}},[]),g(()=>{let e=i.current;!e||!("options"in e)||(e.options={command:s,skillUrl:a,theme:C,size:v,variant:E,shape:m,popup:f,onCopy:b,onDownload:p,popupTitle:L,popupDescription:w})},[s,a,C,v,E,m,f,b,p,L,w]),H("div",{ref:l,className:x,style:{display:"inline-block",...O},suppressHydrationWarning:!0})};export{h as ClaudeCodeButton,F as CoworkButton};
"use client";import{useRef as t,useEffect as w,createElement as P}from"react";function M(){let s=t(!1);return w(()=>{s.current=!0},[]),s}var N=({command:s,theme:a="branded",size:C="md",variant:v="filled",shape:E="rounded",popup:m=!0,promptFlag:f=!0,autoLaunch:b,onCopy:p,popupTitle:y,popupDescription:L,className:O,style:H,onCbCopy:x,onCbOpen:B,onCbClose:R})=>{let u=t(null),c=t(null),l=M(),i=t(x);i.current=x;let k=t(B);k.current=B;let g=t(R);return g.current=R,w(()=>{if(u.current)return import("./claude-code-button-OF7DCY4G.mjs").then(({ClaudeCodeButton:n})=>{if(!u.current||c.current)return;let r=document.createElement("claude-code-button");c.current=r,r.addEventListener("cb-copy",(e=>i.current?.(e))),r.addEventListener("cb-open",(e=>k.current?.(e))),r.addEventListener("cb-close",(e=>g.current?.(e))),u.current.appendChild(r)}),()=>{let n=c.current,r=u.current;n&&r?.contains(n)&&r.removeChild(n),c.current=null}},[]),w(()=>{let n=c.current;!n||!("options"in n)||(n.options={command:s,theme:a,size:C,variant:v,shape:E,popup:m,promptFlag:f,autoLaunch:b,onCopy:p,popupTitle:y,popupDescription:L})},[s,a,C,v,E,m,f,b,p,y,L]),P("div",{ref:u,className:O,style:{display:"inline-block",...H},suppressHydrationWarning:!0})},T=({command:s,skillUrl:a,theme:C="branded",size:v="md",variant:E="filled",shape:m="rounded",popup:f=!0,autoLaunch:b,onCopy:p,onDownload:y,popupTitle:L,popupDescription:O,className:H,style:x,onCbCopy:B,onCbDownload:R,onCbOpen:u,onCbClose:c})=>{let l=t(null),i=t(null),k=t(B);k.current=B;let g=t(R);g.current=R;let n=t(u);n.current=u;let r=t(c);return r.current=c,w(()=>{if(l.current)return import("./cowork-button-5X3LZCJA.mjs").then(({CoworkButton:e})=>{if(!l.current||i.current)return;let o=document.createElement("cowork-button");i.current=o,o.addEventListener("cb-copy",(d=>k.current?.(d))),o.addEventListener("cb-download",(d=>g.current?.(d))),o.addEventListener("cb-open",(d=>n.current?.(d))),o.addEventListener("cb-close",(d=>r.current?.(d))),l.current.appendChild(o)}),()=>{let e=i.current,o=l.current;e&&o?.contains(e)&&o.removeChild(e),i.current=null}},[]),w(()=>{let e=i.current;!e||!("options"in e)||(e.options={command:s,skillUrl:a,theme:C,size:v,variant:E,shape:m,popup:f,autoLaunch:b,onCopy:p,onDownload:y,popupTitle:L,popupDescription:O})},[s,a,C,v,E,m,f,b,p,y,L,O]),P("div",{ref:l,className:H,style:{display:"inline-block",...x},suppressHydrationWarning:!0})};export{N as ClaudeCodeButton,T as CoworkButton};
//# sourceMappingURL=react.mjs.map
+1
-1
dist/react.mjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../src/react.ts"],"sourcesContent":["'use client';\n\nimport {\n useRef,\n useEffect,\n useCallback,\n createElement,\n type FC,\n} from 'react';\nimport type { ClaudeCodeButtonOptions, CoworkButtonOptions } from './types';\n\nexport type { ClaudeCodeButtonOptions, CoworkButtonOptions };\n\nexport interface ClaudeCodeButtonProps extends ClaudeCodeButtonOptions {\n className?: string;\n style?: React.CSSProperties;\n /** Fired when command is copied. Also available via onCopy prop. */\n onCbCopy?: (e: CustomEvent<{ command: string }>) => void;\n onCbOpen?: (e: CustomEvent<{ command: string; fullCommand: string }>) => void;\n onCbClose?: (e: CustomEvent) => void;\n}\n\nexport interface CoworkButtonProps extends CoworkButtonOptions {\n className?: string;\n style?: React.CSSProperties;\n onCbCopy?: (e: CustomEvent<{ command: string }>) => void;\n onCbDownload?: (e: CustomEvent<{ url: string }>) => void;\n onCbOpen?: (e: CustomEvent<{ command: string }>) => void;\n onCbClose?: (e: CustomEvent) => void;\n}\n\nfunction useIsClient() {\n const ref = useRef(false);\n useEffect(() => { ref.current = true; }, []);\n return ref;\n}\n\nexport const ClaudeCodeButton: FC<ClaudeCodeButtonProps> = ({\n command,\n theme = 'branded',\n size = 'md',\n variant = 'filled',\n shape = 'rounded',\n popup = true,\n promptFlag = true,\n onCopy,\n popupTitle,\n popupDescription,\n className,\n style,\n onCbCopy,\n onCbOpen,\n onCbClose,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const elRef = useRef<HTMLElement | null>(null);\n const isClient = useIsClient();\n\n const cbCopyRef = useRef(onCbCopy);\n cbCopyRef.current = onCbCopy;\n const cbOpenRef = useRef(onCbOpen);\n cbOpenRef.current = onCbOpen;\n const cbCloseRef = useRef(onCbClose);\n cbCloseRef.current = onCbClose;\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n import('./claude-code-button').then(({ ClaudeCodeButton: Cls }) => {\n if (!containerRef.current || elRef.current) return;\n\n const el = document.createElement('claude-code-button');\n elRef.current = el;\n\n el.addEventListener('cb-copy', ((e: Event) => cbCopyRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-open', ((e: Event) => cbOpenRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-close', ((e: Event) => cbCloseRef.current?.(e as CustomEvent)) as EventListener);\n\n containerRef.current.appendChild(el);\n });\n\n return () => {\n const el = elRef.current;\n const container = containerRef.current;\n if (el && container?.contains(el)) {\n container.removeChild(el);\n }\n elRef.current = null;\n };\n }, []);\n\n useEffect(() => {\n const el = elRef.current;\n if (!el || !('options' in el)) return;\n\n (el as any).options = {\n command,\n theme,\n size,\n variant,\n shape,\n popup,\n promptFlag,\n onCopy,\n popupTitle,\n popupDescription,\n };\n }, [command, theme, size, variant, shape, popup, promptFlag, onCopy, popupTitle, popupDescription]);\n\n return createElement('div', {\n ref: containerRef,\n className,\n style: { display: 'inline-block', ...style },\n suppressHydrationWarning: true,\n });\n};\n\nexport const CoworkButton: FC<CoworkButtonProps> = ({\n command,\n skillUrl,\n theme = 'branded',\n size = 'md',\n variant = 'filled',\n shape = 'rounded',\n popup = true,\n onCopy,\n onDownload,\n popupTitle,\n popupDescription,\n className,\n style,\n onCbCopy,\n onCbDownload,\n onCbOpen,\n onCbClose,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const elRef = useRef<HTMLElement | null>(null);\n\n const cbCopyRef = useRef(onCbCopy);\n cbCopyRef.current = onCbCopy;\n const cbDownloadRef = useRef(onCbDownload);\n cbDownloadRef.current = onCbDownload;\n const cbOpenRef = useRef(onCbOpen);\n cbOpenRef.current = onCbOpen;\n const cbCloseRef = useRef(onCbClose);\n cbCloseRef.current = onCbClose;\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n import('./cowork-button').then(({ CoworkButton: Cls }) => {\n if (!containerRef.current || elRef.current) return;\n\n const el = document.createElement('cowork-button');\n elRef.current = el;\n\n el.addEventListener('cb-copy', ((e: Event) => cbCopyRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-download', ((e: Event) => cbDownloadRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-open', ((e: Event) => cbOpenRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-close', ((e: Event) => cbCloseRef.current?.(e as CustomEvent)) as EventListener);\n\n containerRef.current.appendChild(el);\n });\n\n return () => {\n const el = elRef.current;\n const container = containerRef.current;\n if (el && container?.contains(el)) {\n container.removeChild(el);\n }\n elRef.current = null;\n };\n }, []);\n\n useEffect(() => {\n const el = elRef.current;\n if (!el || !('options' in el)) return;\n\n (el as any).options = {\n command,\n skillUrl,\n theme,\n size,\n variant,\n shape,\n popup,\n onCopy,\n onDownload,\n popupTitle,\n popupDescription,\n };\n }, [command, skillUrl, theme, size, variant, shape, popup, onCopy, onDownload, popupTitle, popupDescription]);\n\n return createElement('div', {\n ref: containerRef,\n className,\n style: { display: 'inline-block', ...style },\n suppressHydrationWarning: true,\n });\n};\n"],"mappings":"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","names":["useRef","useEffect","createElement","useIsClient","ref","ClaudeCodeButton","command","theme","size","variant","shape","popup","promptFlag","onCopy","popupTitle","popupDescription","className","style","onCbCopy","onCbOpen","onCbClose","containerRef","elRef","isClient","cbCopyRef","cbOpenRef","cbCloseRef","Cls","el","container","CoworkButton","skillUrl","onDownload","onCbDownload","cbDownloadRef","e"]}
{"version":3,"sources":["../src/react.ts"],"sourcesContent":["'use client';\n\nimport {\n useRef,\n useEffect,\n useCallback,\n createElement,\n type FC,\n} from 'react';\nimport type { ClaudeCodeButtonOptions, CoworkButtonOptions } from './types';\n\nexport type { ClaudeCodeButtonOptions, CoworkButtonOptions };\n\nexport interface ClaudeCodeButtonProps extends ClaudeCodeButtonOptions {\n className?: string;\n style?: React.CSSProperties;\n /** Fired when command is copied. Also available via onCopy prop. */\n onCbCopy?: (e: CustomEvent<{ command: string }>) => void;\n onCbOpen?: (e: CustomEvent<{ command: string; fullCommand: string }>) => void;\n onCbClose?: (e: CustomEvent) => void;\n}\n\nexport interface CoworkButtonProps extends CoworkButtonOptions {\n className?: string;\n style?: React.CSSProperties;\n onCbCopy?: (e: CustomEvent<{ command: string }>) => void;\n onCbDownload?: (e: CustomEvent<{ url: string }>) => void;\n onCbOpen?: (e: CustomEvent<{ command: string }>) => void;\n onCbClose?: (e: CustomEvent) => void;\n}\n\nfunction useIsClient() {\n const ref = useRef(false);\n useEffect(() => { ref.current = true; }, []);\n return ref;\n}\n\nexport const ClaudeCodeButton: FC<ClaudeCodeButtonProps> = ({\n command,\n theme = 'branded',\n size = 'md',\n variant = 'filled',\n shape = 'rounded',\n popup = true,\n promptFlag = true,\n autoLaunch,\n onCopy,\n popupTitle,\n popupDescription,\n className,\n style,\n onCbCopy,\n onCbOpen,\n onCbClose,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const elRef = useRef<HTMLElement | null>(null);\n const isClient = useIsClient();\n\n const cbCopyRef = useRef(onCbCopy);\n cbCopyRef.current = onCbCopy;\n const cbOpenRef = useRef(onCbOpen);\n cbOpenRef.current = onCbOpen;\n const cbCloseRef = useRef(onCbClose);\n cbCloseRef.current = onCbClose;\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n import('./claude-code-button').then(({ ClaudeCodeButton: Cls }) => {\n if (!containerRef.current || elRef.current) return;\n\n const el = document.createElement('claude-code-button');\n elRef.current = el;\n\n el.addEventListener('cb-copy', ((e: Event) => cbCopyRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-open', ((e: Event) => cbOpenRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-close', ((e: Event) => cbCloseRef.current?.(e as CustomEvent)) as EventListener);\n\n containerRef.current.appendChild(el);\n });\n\n return () => {\n const el = elRef.current;\n const container = containerRef.current;\n if (el && container?.contains(el)) {\n container.removeChild(el);\n }\n elRef.current = null;\n };\n }, []);\n\n useEffect(() => {\n const el = elRef.current;\n if (!el || !('options' in el)) return;\n\n (el as any).options = {\n command,\n theme,\n size,\n variant,\n shape,\n popup,\n promptFlag,\n autoLaunch,\n onCopy,\n popupTitle,\n popupDescription,\n };\n }, [command, theme, size, variant, shape, popup, promptFlag, autoLaunch, onCopy, popupTitle, popupDescription]);\n\n return createElement('div', {\n ref: containerRef,\n className,\n style: { display: 'inline-block', ...style },\n suppressHydrationWarning: true,\n });\n};\n\nexport const CoworkButton: FC<CoworkButtonProps> = ({\n command,\n skillUrl,\n theme = 'branded',\n size = 'md',\n variant = 'filled',\n shape = 'rounded',\n popup = true,\n autoLaunch,\n onCopy,\n onDownload,\n popupTitle,\n popupDescription,\n className,\n style,\n onCbCopy,\n onCbDownload,\n onCbOpen,\n onCbClose,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const elRef = useRef<HTMLElement | null>(null);\n\n const cbCopyRef = useRef(onCbCopy);\n cbCopyRef.current = onCbCopy;\n const cbDownloadRef = useRef(onCbDownload);\n cbDownloadRef.current = onCbDownload;\n const cbOpenRef = useRef(onCbOpen);\n cbOpenRef.current = onCbOpen;\n const cbCloseRef = useRef(onCbClose);\n cbCloseRef.current = onCbClose;\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n import('./cowork-button').then(({ CoworkButton: Cls }) => {\n if (!containerRef.current || elRef.current) return;\n\n const el = document.createElement('cowork-button');\n elRef.current = el;\n\n el.addEventListener('cb-copy', ((e: Event) => cbCopyRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-download', ((e: Event) => cbDownloadRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-open', ((e: Event) => cbOpenRef.current?.(e as CustomEvent)) as EventListener);\n el.addEventListener('cb-close', ((e: Event) => cbCloseRef.current?.(e as CustomEvent)) as EventListener);\n\n containerRef.current.appendChild(el);\n });\n\n return () => {\n const el = elRef.current;\n const container = containerRef.current;\n if (el && container?.contains(el)) {\n container.removeChild(el);\n }\n elRef.current = null;\n };\n }, []);\n\n useEffect(() => {\n const el = elRef.current;\n if (!el || !('options' in el)) return;\n\n (el as any).options = {\n command,\n skillUrl,\n theme,\n size,\n variant,\n shape,\n popup,\n autoLaunch,\n onCopy,\n onDownload,\n popupTitle,\n popupDescription,\n };\n }, [command, skillUrl, theme, size, variant, shape, popup, autoLaunch, onCopy, onDownload, popupTitle, popupDescription]);\n\n return createElement('div', {\n ref: containerRef,\n className,\n style: { display: 'inline-block', ...style },\n suppressHydrationWarning: true,\n });\n};\n"],"mappings":"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","names":["useRef","useEffect","createElement","useIsClient","ref","ClaudeCodeButton","command","theme","size","variant","shape","popup","promptFlag","autoLaunch","onCopy","popupTitle","popupDescription","className","style","onCbCopy","onCbOpen","onCbClose","containerRef","elRef","isClient","cbCopyRef","cbOpenRef","cbCloseRef","Cls","el","container","CoworkButton","skillUrl","onDownload","onCbDownload","cbDownloadRef","e"]}
+11
-0
dist/vue.d.mts

@@ -26,2 +26,8 @@ type Theme = 'branded' | 'branded-alt' | 'dark' | 'light' | 'system';

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Terminal / Open Claude Desktop) if supported.
* Launch controls stay visible for manual retry.
*/
autoLaunch?: boolean;
}

@@ -51,2 +57,7 @@ interface CoworkButtonOptions {

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Claude Desktop) if supported.
*/
autoLaunch?: boolean;
}

@@ -53,0 +64,0 @@ 

+11
-0
dist/vue.d.ts

@@ -26,2 +26,8 @@ type Theme = 'branded' | 'branded-alt' | 'dark' | 'light' | 'system';

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Terminal / Open Claude Desktop) if supported.
* Launch controls stay visible for manual retry.
*/
autoLaunch?: boolean;
}

@@ -51,2 +57,7 @@ interface CoworkButtonOptions {

popupDescription?: string;
/**
* When true (with popup), opening the dialog also triggers the launch shortcut once
* in the same user gesture (Open Claude Desktop) if supported.
*/
autoLaunch?: boolean;
}

@@ -53,0 +64,0 @@ 

+232
-66
dist/vue.js

@@ -1,2 +0,2 @@

"use strict";var O=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var H=(r,d)=>{for(var t in d)O(r,t,{get:d[t],enumerable:!0})},N=(r,d,t,a)=>{if(d&&typeof d=="object"||typeof d=="function")for(let e of M(d))!P.call(r,e)&&e!==t&&O(r,e,{get:()=>d[e],enumerable:!(a=D(d,e))||a.enumerable});return r};var I=r=>N(O({},"__esModule",{value:!0}),r);var j={};H(j,{ClaudeButtonsPlugin:()=>z,default:()=>W});module.exports=I(j);var x=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
"use strict";var O=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var Y=(r,c)=>{for(var t in c)O(r,t,{get:c[t],enumerable:!0})},G=(r,c,t,e)=>{if(c&&typeof c=="object"||typeof c=="function")for(let o of j(c))!K.call(r,o)&&o!==t&&O(r,o,{get:()=>c[o],enumerable:!(e=W(c,o))||e.enumerable});return r};var X=r=>G(O({},"__esModule",{value:!0}),r);var rt={};Y(rt,{ClaudeButtonsPlugin:()=>V,default:()=>at});module.exports=X(rt);var k=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Ears -->

@@ -16,3 +16,3 @@ <rect x="3.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>

<rect x="13.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
</svg>`,k=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
</svg>`,y=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Lightning bolt -->

@@ -26,10 +26,22 @@ <path d="M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z" fill="currentColor"/>

<circle cx="12.4" cy="15.5" r="1.3" fill="var(--cb-icon-accent, white)"/>
</svg>`,f=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,x=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-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>`,R=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,P=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;var S=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`;var H=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;var i="#D4795C",u="#C06A4E",y="#B35E43",C={branded:{bg:i,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:i,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function b(r){return r!=="system"?C[r]:typeof window>"u"?C.light:window.matchMedia("(prefers-color-scheme: dark)").matches?C.dark:C.light}function m(r){return`
</svg>`;var L=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="3" y="4" width="18" height="16" rx="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M3 9h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 13l2.5 2L7 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 17h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,$=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="4" y="5" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M4 8.5h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="6.5" cy="7" r="0.65" fill="currentColor"/>
<circle cx="8.5" cy="7" r="0.65" fill="currentColor"/>
<path d="M9 19.5h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8 16.5h8v3H8v-3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
</svg>`;var i="#D4795C",g="#C06A4E",w="#B35E43",C={branded:{bg:i,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:i,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function h(r){return r!=="system"?C[r]:typeof window>"u"?C.light:window.matchMedia("(prefers-color-scheme: dark)").matches?C.dark:C.light}function f(r){return`
--cb-bg: ${r.bg};

@@ -45,3 +57,3 @@ --cb-text: ${r.text};

--cb-code-text: ${r.codeText};
`}var w={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},E={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 q=`
`}var T={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},E={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"}};function I(){if(typeof navigator>"u")return!0;let r=navigator.userAgent||"";return!!(!r.trim()||/\bFBAN\b|\bFBAV\b|FB_IAB|Instagram|Line\/|MicroMessenger|Snapchat|TikTok|LinkedInApp|Pinterest/i.test(r)||/Twitter for (iPhone|Android)/i.test(r)||/; wv\)/.test(r)||/Opera Mini|OPiOS/i.test(r))}function Z(){if(typeof navigator>"u")return!1;let r=navigator.userAgent||"",c=typeof navigator.maxTouchPoints=="number"?navigator.maxTouchPoints:0,t=navigator.platform||"";return!!(/iPhone|iPod/i.test(r)||/iPad/i.test(r)||/Android/i.test(r)&&/Mobile/i.test(r)||/Android/i.test(r)&&!/Mobile/i.test(r)||(t==="MacIntel"||t==="MacARM")&&c>1||/webOS|BlackBerry|IEMobile|Opera Mini/i.test(r))}function J(){if(Z()||typeof navigator>"u")return!1;let r=navigator.userAgent||"",c=navigator.platform||"";return!!(/Win|Mac|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(c)||/Windows NT|Macintosh|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(r))}function Q(){if(typeof window>"u"||typeof navigator>"u")return!1;if(window.isSecureContext&&navigator.clipboard&&typeof navigator.clipboard.writeText=="function")return!0;try{if(typeof document<"u"&&typeof document.queryCommandSupported=="function")return document.queryCommandSupported("copy")===!0}catch{}return!1}function N(){return typeof window<"u"&&typeof document<"u"&&typeof document.createElement=="function"}function q(){return!(!N()||I())}function U(){return!(!N()||I()||!J()||!Q())}var tt=`
:host {

@@ -225,3 +237,3 @@ position: fixed;

.cb-copy-btn:hover { background: ${u}; }
.cb-copy-btn:hover { background: ${g}; }
.cb-copy-btn:active { transform: scale(0.96); }

@@ -259,3 +271,3 @@ .cb-copy-btn svg { width: 14px; height: 14px; }

.cb-action-btn:hover { background: ${u}; }
.cb-action-btn:hover { background: ${g}; }
.cb-action-btn:active { transform: scale(0.98); }

@@ -281,2 +293,108 @@ .cb-action-btn svg { width: 16px; height: 16px; }

.cb-launch-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.cb-launch-btn:active:not(:disabled) { transform: scale(0.99); }
.cb-launch-btn .cb-launch-svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.cb-launch-btn--desktop {
color: var(--cb-surface-text);
background: linear-gradient(
165deg,
color-mix(in srgb, var(--cb-primary) 14%, var(--cb-surface)) 0%,
var(--cb-surface) 55%
);
border: 1.5px solid color-mix(in srgb, var(--cb-primary) 38%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 55%, transparent) inset,
0 4px 14px -4px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}
.cb-launch-btn--desktop:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--cb-primary) 72%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 45%, transparent) inset,
0 8px 24px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}
.cb-launch-btn--desktop:focus-visible {
outline: 2px solid var(--cb-primary);
outline-offset: 2px;
}
.cb-launch-btn--terminal {
color: var(--cb-code-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--cb-code-text) 8%, var(--cb-code-bg)) 0%, var(--cb-code-bg) 100%);
border: 1px solid color-mix(in srgb, var(--cb-code-text) 22%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, black 25%, transparent) inset,
0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
.cb-launch-btn--terminal:hover:not(:disabled) {
border-color: color-mix(in srgb, #34d399 55%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, #34d399 20%, transparent) inset,
0 8px 28px -8px color-mix(in srgb, #34d399 28%, transparent);
}
.cb-launch-btn--terminal:focus-visible {
outline: 2px solid #34d399;
outline-offset: 2px;
}
.cb-launch-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: saturate(0.7);
box-shadow: none;
}
.cb-launch-btn--desktop:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn--terminal:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn:disabled .cb-launch-svg {
opacity: 0.75;
}
.cb-launch-sub {
display: block;
margin-top: 6px;
font-size: 11px;
font-weight: 500;
color: var(--cb-muted);
line-height: 1.35;
text-align: center;
}
@keyframes cb-fade-in {

@@ -314,2 +432,5 @@ from { opacity: 0; }

.cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
.cb-launch-btn { min-height: 46px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.cb-launch-btn .cb-launch-svg { width: 20px; height: 20px; }
.cb-launch-sub { font-size: 10px; }
.cb-hint { font-size: 11px; }

@@ -327,28 +448,24 @@ }

}
`,$=class extends HTMLElement{constructor(){super();this._mqCleanup=null;this.attachShadow({mode:"open"})}set options(t){this._options=t,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return b(t);let a=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return a?b("dark"):b("light");let e=a?b("dark"):b("light"),o=b(t);return{...e,primary:o.primary,primaryText:o.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:a,description:e,command:o,fullCommand:n,skillUrl:c}=this._options,s=this.resolvePopupTokens(),p=t==="claude-code"?x:k,l=t==="claude-code",g=n||o;this.shadowRoot.innerHTML=`
<style>${q}</style>
<div style="${m(s)}">
`,S=class r extends HTMLElement{constructor(){super();this._mqCleanup=null;this._autoLaunchConsumed=!1;this.attachShadow({mode:"open"})}set options(t){this._autoLaunchConsumed=!1,this._options=t,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return h(t);let e=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return e?h("dark"):h("light");let o=e?h("dark"):h("light"),a=h(t);return{...o,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:e,description:o,command:a,fullCommand:s,skillUrl:d,desktopLaunchUrl:n,autoLaunch:l}=this._options,p=this.resolvePopupTokens(),b=t==="claude-code"?k:y,v=t==="claude-code",m=s||a,u=n??"claude://",D=q(),R=U();if(this.shadowRoot.innerHTML=`
<style>${tt}</style>
<div style="${f(p)}">
<div class="cb-backdrop" data-action="close"></div>
<div class="cb-dialog" role="dialog" aria-modal="true" aria-labelledby="cb-dialog-title">
<div class="cb-dialog-header">
<div class="cb-dialog-header-icon">${p}</div>
<div class="cb-dialog-header-icon">${b}</div>
<div class="cb-dialog-header-text">
<div class="cb-dialog-title" id="cb-dialog-title">${a}</div>
${e?`<div class="cb-dialog-description">${e}</div>`:""}
<div class="cb-dialog-title" id="cb-dialog-title">${e}</div>
${o?`<div class="cb-dialog-description">${o}</div>`:""}
</div>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${S}</button>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${H}</button>
</div>
<div class="cb-dialog-body">
${l?this.renderClaudeCodeBody(g):this.renderCoworkBody(o,c)}
${v?this.renderClaudeCodeBody(m):this.renderCoworkBody(a,d)}
</div>
<div class="cb-dialog-footer">
${l?`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`:`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}
${v?this.renderClaudeCodeFooter(m,R):this.renderCoworkFooter(this.escapeHref(u),D)}
</div>
</div>
</div>
`,this.setupListeners(),this.setupSystemThemeWatch()}renderClaudeCodeBody(t){return`
`,this.setupListeners(),this.setupSystemThemeWatch(),l&&!this._autoLaunchConsumed){if(this._autoLaunchConsumed=!0,t==="cowork"&&D)this.openDesktopAppLink(u);else if(t==="claude-code"&&R){let z=this.shadowRoot?.querySelector('[data-action="launch-terminal"]');z&&this.launchTerminal(z,m)}}}openDesktopAppLink(t){if(this.dispatchEvent(new CustomEvent("cb-launch-desktop",{bubbles:!0,composed:!0,detail:{href:t}})),typeof document>"u")return;let e=document.createElement("a");e.href=t,e.rel="noopener noreferrer",e.style.cssText="position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none",document.body.appendChild(e),e.click(),requestAnimationFrame(()=>e.remove())}renderClaudeCodeBody(t){return`
<div class="cb-step">

@@ -360,3 +477,3 @@ <div class="cb-step-num">1</div>

<div class="cb-code-text"><span class="cb-code-prefix">$</span>${this.escapeHtml(t)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${f}<span>Copy</span></button>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${x}<span>Copy</span></button>
</div>

@@ -371,3 +488,3 @@ </div>

</div>
`}renderCoworkBody(t,a){let e="";if(a){let o=`Install the skill from ${a} and run ${t}`;e+=`
`}renderCoworkBody(t,e){let o="";if(e){let a=`Install the skill from ${e} and run ${t}`;o+=`
<div class="cb-step">

@@ -378,4 +495,4 @@ <div class="cb-step-num">1</div>

<div class="cb-code-block">
<div class="cb-code-text">${this.escapeHtml(o)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(o)}">${f}<span>Copy</span></button>
<div class="cb-code-text">${this.escapeHtml(a)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(a)}">${x}<span>Copy</span></button>
</div>

@@ -390,3 +507,3 @@ </div>

</div>
`}else e+=`
`}else o+=`
<div class="cb-step">

@@ -398,3 +515,3 @@ <div class="cb-step-num">1</div>

<div class="cb-code-text">${this.escapeHtml(t)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${f}<span>Copy</span></button>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${x}<span>Copy</span></button>
</div>

@@ -409,3 +526,52 @@ </div>

</div>
`;return e}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let a=t.target.closest("[data-action]");if(!a)return;let e=a.dataset.action;if(e==="close")this.close();else if(e==="copy"){let o=a.dataset.command||"";this.copyToClipboard(o,a)}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let e=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();e.addEventListener("change",o),this._mqCleanup=()=>e.removeEventListener("change",o)}async copyToClipboard(t,a){try{await navigator.clipboard.writeText(t);let e=a.querySelector("span"),o=a,n=o.querySelector(".cb-icon-sm")?.outerHTML||"";a.setAttribute("data-copied","true"),e&&(e.textContent="Copied!"),o.innerHTML=`${R}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{a.setAttribute("data-copied","false"),o.innerHTML=`${f}<span>Copy</span>`},2e3)}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),this._options.onCopy?.(t)}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),a=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),a&&(a.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(t){let a=document.createElement("div");return a.textContent=t,a.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",$);function _(r){let d=document.createElement("claude-popup-dialog");return d.options=r,document.body.appendChild(d),d}var U=`
`;return o}renderCoworkFooter(t,e){let o="Open this page in Safari, Chrome, Firefox, or Edge. In-app browsers usually block opening apps.",a=e?"Opens the Claude app through your system link handler\u2014then paste the prompt below into Cowork.":"App links aren\u2019t supported in your current browser (common inside social or chat apps). Open this page in a full browser, or launch Claude Desktop manually and paste below.";return`
${e?`
<a
class="cb-launch-btn cb-launch-btn--desktop"
href="${t}"
data-action="launch-desktop"
rel="noopener noreferrer"
>
${$}
<span>Open Claude Desktop</span>
</a>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--desktop"
disabled
aria-disabled="true"
aria-label="Open Claude Desktop (unavailable in this browser)"
title="${this.escapeAttr(o)}"
>
${$}
<span>Open Claude Desktop</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}renderClaudeCodeFooter(t,e){let o="Available on desktop in a normal browser with clipboard access. Use Copy above, then paste into your terminal.",a=this.getTerminalLaunchSubcopy(e);return`
${e?`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
data-action="launch-terminal"
data-command="${this.escapeAttr(t)}"
aria-label="Copy command and open a terminal app"
>
${L}
<span>Open Terminal</span>
</button>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
disabled
aria-disabled="true"
aria-label="Open Terminal (unavailable in this environment)"
title="${this.escapeAttr(o)}"
>
${L}
<span>Open Terminal</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`}static isDesktopMac(){if(typeof navigator>"u")return!1;let t=navigator.platform||"",e=navigator.userAgent||"";return/iPhone|iPad|iPod/i.test(e)?!1:/Mac/.test(t)||/Mac OS X/.test(e)}getTerminalLaunchSubcopy(t){if(!t)return"Use the Copy button above, then paste into Terminal, PowerShell, or your preferred shell on a desktop computer.";if(typeof navigator>"u")return"Copies the command to your clipboard first.";let e=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(e)?"Copies the command to your clipboard. Open a terminal or SSH client on your device to run it.":r.isDesktopMac()?"Copies the command, then tries to open iTerm if you have it\u2014otherwise open Terminal and paste.":"Copies the command, then tries to open VS Code if installed\u2014paste into its terminal, or use any shell."}getTerminalProtocolUrl(){if(typeof navigator>"u")return null;let t=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(t)?null:r.isDesktopMac()?"iterm2://":"vscode://"}tryOpenCustomProtocol(t){if(typeof document>"u")return;let e=document.createElement("iframe");e.style.cssText="position:fixed;width:0;height:0;border:none;opacity:0;pointer-events:none",e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.src=t,document.body.appendChild(e),window.setTimeout(()=>e.remove(),1200)}escapeHref(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let e=t.target.closest("[data-action]");if(!e)return;let o=e.dataset.action;if(o==="close")this.close();else if(o==="copy"){let a=e.dataset.command||"";this.copyToClipboard(a,e)}else if(o==="launch-desktop"){t.preventDefault();let a=e.getAttribute("href")||"";this.openDesktopAppLink(a||e.href)}else if(o==="launch-terminal"){let a=e.dataset.command||"";this.launchTerminal(e,a)}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();o.addEventListener("change",a),this._mqCleanup=()=>o.removeEventListener("change",a)}async launchTerminal(t,e){let o=t.querySelector("span");try{await navigator.clipboard.writeText(e),this._options.onCopy?.(e);let a=this.getTerminalProtocolUrl();a&&this.tryOpenCustomProtocol(a),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}catch{let a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),this._options.onCopy?.(e);let s=this.getTerminalProtocolUrl();s&&this.tryOpenCustomProtocol(s),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}}async copyToClipboard(t,e){try{await navigator.clipboard.writeText(t);let o=e.querySelector("span"),a=e,s=a.querySelector(".cb-icon-sm")?.outerHTML||"";e.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),a.innerHTML=`${P}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{e.setAttribute("data-copied","false"),a.innerHTML=`${x}<span>Copy</span>`},2e3)}catch{let o=document.createElement("textarea");o.value=t,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o),this._options.onCopy?.(t)}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),e=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),e&&(e.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",S);function A(r){let c=document.createElement("claude-popup-dialog");return c.options=r,document.body.appendChild(c),c}var et=`
:host {

@@ -455,7 +621,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${y};
background: ${w};
transform: scale(0.98);

@@ -648,4 +814,4 @@ }

}
`,F=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),a=this.getAttribute("theme"),e=this.getAttribute("size"),o=this.getAttribute("variant"),n=this.getAttribute("shape"),c=this.getAttribute("popup"),s=this.getAttribute("prompt-flag"),p=this.getAttribute("popup-title"),l=this.getAttribute("popup-description");t!==null&&(this._options.command=t),a&&(this._options.theme=a),e&&(this._options.size=e),o&&(this._options.variant=o),n&&(this._options.shape=n),c!==null&&(this._options.popup=c!=="false"),s!==null&&(this._options.promptFlag=s!=="false"),p!==null&&(this._options.popupTitle=p),l!==null&&(this._options.popupDescription=l)}updateLightDOM(){let{command:t}=this._options,a=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.href=`https://claude.ai/code?command=${encodeURIComponent(a)}`,e.textContent=`Run on Claude Code: ${t}`,e.setAttribute("data-platform","claude-code"),e.setAttribute("data-command",t),e.setAttribute("data-full-command",a)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:a}=this._options;return a===!1?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),a=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",o=b(t),n=this._options.size||"md",c=this._options.shape||"rounded",s=E[n],p=w[c][n];this.setAttribute("data-theme",a),this.setAttribute("data-variant",e);let l=e!=="filled"?"transparent":o.bg,g=e==="ghost"?"transparent":e==="outline"?o.primary:o.border,A=e!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${U}</style>
`,_=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("theme"),o=this.getAttribute("size"),a=this.getAttribute("variant"),s=this.getAttribute("shape"),d=this.getAttribute("popup"),n=this.getAttribute("prompt-flag"),l=this.getAttribute("popup-title"),p=this.getAttribute("popup-description"),b=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e&&(this._options.theme=e),o&&(this._options.size=o),a&&(this._options.variant=a),s&&(this._options.shape=s),d!==null&&(this._options.popup=d!=="false"),n!==null&&(this._options.promptFlag=n!=="false"),l!==null&&(this._options.popupTitle=l),p!==null&&(this._options.popupDescription=p),b===null?delete this._options.autoLaunch:this._options.autoLaunch=b!=="false"}updateLightDOM(){let{command:t}=this._options,e=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.href=`https://claude.ai/code?command=${encodeURIComponent(e)}`,o.textContent=`Run on Claude Code: ${t}`,o.setAttribute("data-platform","claude-code"),o.setAttribute("data-command",t),o.setAttribute("data-full-command",e)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:e}=this._options;return e===!1?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=h(t),s=this._options.size||"md",d=this._options.shape||"rounded",n=E[s],l=T[d][s];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let p=o!=="filled"?"transparent":a.bg,b=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,v=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${et}</style>
<button

@@ -655,21 +821,21 @@ class="cb-btn"

style="
${m(o)}
--cb-bg: ${l};
--cb-border: ${g};
--cb-text: ${A};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${s.height};
--cb-font-size: ${s.fontSize};
--cb-icon-size: ${s.iconSize};
--cb-padding: ${s.ccPadding};
--cb-gap: ${s.gap};
--cb-radius: ${p};
${f(a)}
--cb-bg: ${p};
--cb-border: ${b};
--cb-text: ${v};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${n.height};
--cb-font-size: ${n.fontSize};
--cb-icon-size: ${n.iconSize};
--cb-padding: ${n.ccPadding};
--cb-gap: ${n.gap};
--cb-radius: ${l};
"
aria-label="Run on Claude Code: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${x}</span>
<span class="cb-btn-icon" aria-hidden="true">${k}</span>
<span class="cb-btn-label">Run on Claude Code</span>
</button>
`;let v=this.shadowRoot.querySelector(".cb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:a,popupTitle:e,popupDescription:o}=this._options,n=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:a,fullCommand:n}})),t===!1){navigator.clipboard.writeText(n).then(()=>{this._options.onCopy?.(n),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))});return}_({variant:"claude-code",theme:this.getResolvedTheme(),title:e||"Run on Claude Code",description:o||"Execute this command in your terminal to get started.",command:a,fullCommand:n,onCopy:c=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:c}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();t.addEventListener("change",a),this._mqCleanup=()=>t.removeEventListener("change",a)}};F.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];function L(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,F)}L();var V=`
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:e,popupTitle:o,popupDescription:a,autoLaunch:s}=this._options,d=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:e,fullCommand:d}})),t===!1){navigator.clipboard.writeText(d).then(()=>{this._options.onCopy?.(d),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:d}}))});return}A({variant:"claude-code",theme:this.getResolvedTheme(),title:o||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:e,fullCommand:d,autoLaunch:s===!0,onCopy:n=>{this._options.onCopy?.(n),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e)}};_.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description","auto-launch"];function B(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,_)}B();var ot=`
:host {

@@ -719,7 +885,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${y};
background: ${w};
transform: scale(0.98);

@@ -914,4 +1080,4 @@ }

}
`,T=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),a=this.getAttribute("skill-url"),e=this.getAttribute("theme"),o=this.getAttribute("size"),n=this.getAttribute("variant"),c=this.getAttribute("shape"),s=this.getAttribute("popup"),p=this.getAttribute("popup-title"),l=this.getAttribute("popup-description");t!==null&&(this._options.command=t),a!==null&&(this._options.skillUrl=a),e&&(this._options.theme=e),o&&(this._options.size=o),n&&(this._options.variant=n),c&&(this._options.shape=c),s!==null&&(this._options.popup=s!=="false"),p!==null&&(this._options.popupTitle=p),l!==null&&(this._options.popupDescription=l)}updateLightDOM(){let{command:t,skillUrl:a}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.textContent=`Run on Cowork: ${t}`,e.setAttribute("data-platform","cowork"),e.setAttribute("data-command",t),a?(e.href=a,e.setAttribute("data-skill-url",a)):(e.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,e.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),a=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",o=b(t),n=this._options.size||"md",c=this._options.shape||"rounded",s=E[n],p=w[c][n];this.setAttribute("data-theme",a),this.setAttribute("data-variant",e);let l=e!=="filled"?"transparent":o.bg,g=e==="ghost"?"transparent":e==="outline"?o.primary:o.border,A=e!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${V}</style>
`,F=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("skill-url"),o=this.getAttribute("theme"),a=this.getAttribute("size"),s=this.getAttribute("variant"),d=this.getAttribute("shape"),n=this.getAttribute("popup"),l=this.getAttribute("popup-title"),p=this.getAttribute("popup-description"),b=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e!==null&&(this._options.skillUrl=e),o&&(this._options.theme=o),a&&(this._options.size=a),s&&(this._options.variant=s),d&&(this._options.shape=d),n!==null&&(this._options.popup=n!=="false"),l!==null&&(this._options.popupTitle=l),p!==null&&(this._options.popupDescription=p),b===null?delete this._options.autoLaunch:this._options.autoLaunch=b!=="false"}updateLightDOM(){let{command:t,skillUrl:e}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.textContent=`Run on Cowork: ${t}`,o.setAttribute("data-platform","cowork"),o.setAttribute("data-command",t),e?(o.href=e,o.setAttribute("data-skill-url",e)):(o.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,o.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=h(t),s=this._options.size||"md",d=this._options.shape||"rounded",n=E[s],l=T[d][s];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let p=o!=="filled"?"transparent":a.bg,b=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,v=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${ot}</style>
<button

@@ -921,21 +1087,21 @@ class="cb-btn"

style="
${m(o)}
--cb-bg: ${l};
--cb-border: ${g};
--cb-text: ${A};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${s.height};
--cb-font-size: ${s.fontSize};
--cb-icon-size: ${s.iconSize};
--cb-padding: ${s.padding};
--cb-gap: ${s.gap};
--cb-radius: ${p};
${f(a)}
--cb-bg: ${p};
--cb-border: ${b};
--cb-text: ${v};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${n.height};
--cb-font-size: ${n.fontSize};
--cb-icon-size: ${n.iconSize};
--cb-padding: ${n.padding};
--cb-gap: ${n.gap};
--cb-radius: ${l};
"
aria-label="Run on Cowork: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${k}</span>
<span class="cb-btn-icon" aria-hidden="true">${y}</span>
<span class="cb-btn-label">Run on Cowork</span>
</button>
`;let v=this.shadowRoot.querySelector(".cb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:a,skillUrl:e,popupTitle:o,popupDescription:n}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:a}})),t===!1){navigator.clipboard.writeText(a).then(()=>{this._options.onCopy?.(a),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:a}}))});return}_({variant:"cowork",theme:this.getResolvedTheme(),title:o||"Run on Cowork",description:n||"Copy and paste into a Cowork session to get started.",command:a,skillUrl:e,onCopy:c=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:c}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();t.addEventListener("change",a),this._mqCleanup=()=>t.removeEventListener("change",a)}};T.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];function B(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,T)}B();var z={install(r){if(L(),B(),r.config?.compilerOptions){let d=r.config.compilerOptions.isCustomElement;r.config.compilerOptions.isCustomElement=t=>t==="claude-code-button"||t==="cowork-button"||t==="claude-popup-dialog"?!0:d?.(t)??!1}}},W=z;0&&(module.exports={ClaudeButtonsPlugin});
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:e,skillUrl:o,popupTitle:a,popupDescription:s,autoLaunch:d}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:e}})),t===!1){navigator.clipboard.writeText(e).then(()=>{this._options.onCopy?.(e),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:e}}))});return}A({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:s||"Copy and paste into a Cowork session to get started.",command:e,skillUrl:o,autoLaunch:d===!0,onCopy:n=>{this._options.onCopy?.(n),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e)}};F.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description","auto-launch"];function M(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,F)}M();var V={install(r){if(B(),M(),r.config?.compilerOptions){let c=r.config.compilerOptions.isCustomElement;r.config.compilerOptions.isCustomElement=t=>t==="claude-code-button"||t==="cowork-button"||t==="claude-popup-dialog"?!0:c?.(t)??!1}}},at=V;0&&(module.exports={ClaudeButtonsPlugin});
//# sourceMappingURL=vue.js.map
+230
-64
dist/vue.mjs

@@ -1,2 +0,2 @@

var x=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
var k=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Ears -->

@@ -16,3 +16,3 @@ <rect x="3.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>

<rect x="13.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
</svg>`,k=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
</svg>`,y=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Lightning bolt -->

@@ -26,10 +26,22 @@ <path d="M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z" fill="currentColor"/>

<circle cx="12.4" cy="15.5" r="1.3" fill="var(--cb-icon-accent, white)"/>
</svg>`,f=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,x=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-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>`,B=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`,z=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;var R=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
</svg>`;var P=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;var i="#D4795C",u="#C06A4E",y="#B35E43",C={branded:{bg:i,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:i,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function p(r){return r!=="system"?C[r]:typeof window>"u"?C.light:window.matchMedia("(prefers-color-scheme: dark)").matches?C.dark:C.light}function m(r){return`
</svg>`;var O=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="3" y="4" width="18" height="16" rx="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M3 9h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 13l2.5 2L7 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 17h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,L=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-launch-svg">
<rect x="4" y="5" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M4 8.5h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="6.5" cy="7" r="0.65" fill="currentColor"/>
<circle cx="8.5" cy="7" r="0.65" fill="currentColor"/>
<path d="M9 19.5h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8 16.5h8v3H8v-3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
</svg>`;var i="#D4795C",g="#C06A4E",w="#B35E43",C={branded:{bg:i,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:i,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:i,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function h(r){return r!=="system"?C[r]:typeof window>"u"?C.light:window.matchMedia("(prefers-color-scheme: dark)").matches?C.dark:C.light}function f(r){return`
--cb-bg: ${r.bg};

@@ -45,3 +57,3 @@ --cb-text: ${r.text};

--cb-code-text: ${r.codeText};
`}var w={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},E={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 S=`
`}var T={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},E={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"}};function H(){if(typeof navigator>"u")return!0;let r=navigator.userAgent||"";return!!(!r.trim()||/\bFBAN\b|\bFBAV\b|FB_IAB|Instagram|Line\/|MicroMessenger|Snapchat|TikTok|LinkedInApp|Pinterest/i.test(r)||/Twitter for (iPhone|Android)/i.test(r)||/; wv\)/.test(r)||/Opera Mini|OPiOS/i.test(r))}function U(){if(typeof navigator>"u")return!1;let r=navigator.userAgent||"",d=typeof navigator.maxTouchPoints=="number"?navigator.maxTouchPoints:0,t=navigator.platform||"";return!!(/iPhone|iPod/i.test(r)||/iPad/i.test(r)||/Android/i.test(r)&&/Mobile/i.test(r)||/Android/i.test(r)&&!/Mobile/i.test(r)||(t==="MacIntel"||t==="MacARM")&&d>1||/webOS|BlackBerry|IEMobile|Opera Mini/i.test(r))}function V(){if(U()||typeof navigator>"u")return!1;let r=navigator.userAgent||"",d=navigator.platform||"";return!!(/Win|Mac|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(d)||/Windows NT|Macintosh|Linux|X11|CrOS|FreeBSD|OpenBSD/i.test(r))}function W(){if(typeof window>"u"||typeof navigator>"u")return!1;if(window.isSecureContext&&navigator.clipboard&&typeof navigator.clipboard.writeText=="function")return!0;try{if(typeof document<"u"&&typeof document.queryCommandSupported=="function")return document.queryCommandSupported("copy")===!0}catch{}return!1}function I(){return typeof window<"u"&&typeof document<"u"&&typeof document.createElement=="function"}function N(){return!(!I()||H())}function q(){return!(!I()||H()||!V()||!W())}var j=`
:host {

@@ -225,3 +237,3 @@ position: fixed;

.cb-copy-btn:hover { background: ${u}; }
.cb-copy-btn:hover { background: ${g}; }
.cb-copy-btn:active { transform: scale(0.96); }

@@ -259,3 +271,3 @@ .cb-copy-btn svg { width: 14px; height: 14px; }

.cb-action-btn:hover { background: ${u}; }
.cb-action-btn:hover { background: ${g}; }
.cb-action-btn:active { transform: scale(0.98); }

@@ -281,2 +293,108 @@ .cb-action-btn svg { width: 16px; height: 16px; }

.cb-launch-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.cb-launch-btn:active:not(:disabled) { transform: scale(0.99); }
.cb-launch-btn .cb-launch-svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.cb-launch-btn--desktop {
color: var(--cb-surface-text);
background: linear-gradient(
165deg,
color-mix(in srgb, var(--cb-primary) 14%, var(--cb-surface)) 0%,
var(--cb-surface) 55%
);
border: 1.5px solid color-mix(in srgb, var(--cb-primary) 38%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 55%, transparent) inset,
0 4px 14px -4px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}
.cb-launch-btn--desktop:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--cb-primary) 72%, var(--cb-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 45%, transparent) inset,
0 8px 24px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}
.cb-launch-btn--desktop:focus-visible {
outline: 2px solid var(--cb-primary);
outline-offset: 2px;
}
.cb-launch-btn--terminal {
color: var(--cb-code-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--cb-code-text) 8%, var(--cb-code-bg)) 0%, var(--cb-code-bg) 100%);
border: 1px solid color-mix(in srgb, var(--cb-code-text) 22%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, black 25%, transparent) inset,
0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
.cb-launch-btn--terminal:hover:not(:disabled) {
border-color: color-mix(in srgb, #34d399 55%, var(--cb-code-bg));
box-shadow:
0 0 0 1px color-mix(in srgb, #34d399 20%, transparent) inset,
0 8px 28px -8px color-mix(in srgb, #34d399 28%, transparent);
}
.cb-launch-btn--terminal:focus-visible {
outline: 2px solid #34d399;
outline-offset: 2px;
}
.cb-launch-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: saturate(0.7);
box-shadow: none;
}
.cb-launch-btn--desktop:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn--terminal:disabled {
background: var(--cb-border);
border-color: var(--cb-border);
color: var(--cb-muted);
}
.cb-launch-btn:disabled .cb-launch-svg {
opacity: 0.75;
}
.cb-launch-sub {
display: block;
margin-top: 6px;
font-size: 11px;
font-weight: 500;
color: var(--cb-muted);
line-height: 1.35;
text-align: center;
}
@keyframes cb-fade-in {

@@ -314,2 +432,5 @@ from { opacity: 0; }

.cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
.cb-launch-btn { min-height: 46px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.cb-launch-btn .cb-launch-svg { width: 20px; height: 20px; }
.cb-launch-sub { font-size: 10px; }
.cb-hint { font-size: 11px; }

@@ -327,28 +448,24 @@ }

}
`,O=class extends HTMLElement{constructor(){super();this._mqCleanup=null;this.attachShadow({mode:"open"})}set options(t){this._options=t,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return p(t);let a=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return a?p("dark"):p("light");let e=a?p("dark"):p("light"),o=p(t);return{...e,primary:o.primary,primaryText:o.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:a,description:e,command:o,fullCommand:n,skillUrl:d}=this._options,s=this.resolvePopupTokens(),l=t==="claude-code"?x:k,c=t==="claude-code",g=n||o;this.shadowRoot.innerHTML=`
<style>${S}</style>
<div style="${m(s)}">
`,$=class r extends HTMLElement{constructor(){super();this._mqCleanup=null;this._autoLaunchConsumed=!1;this.attachShadow({mode:"open"})}set options(t){this._autoLaunchConsumed=!1,this._options=t,this.render()}get options(){return this._options}disconnectedCallback(){this._mqCleanup?.(),this._mqCleanup=null}resolvePopupTokens(){let{theme:t}=this._options;if(t==="dark"||t==="light")return h(t);let e=typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(t==="system")return e?h("dark"):h("light");let o=e?h("dark"):h("light"),a=h(t);return{...o,primary:a.primary,primaryText:a.primaryText}}render(){if(!this.shadowRoot||!this._options)return;let{variant:t,title:e,description:o,command:a,fullCommand:s,skillUrl:c,desktopLaunchUrl:n,autoLaunch:l}=this._options,p=this.resolvePopupTokens(),b=t==="claude-code"?k:y,v=t==="claude-code",m=s||a,u=n??"claude://",M=N(),D=q();if(this.shadowRoot.innerHTML=`
<style>${j}</style>
<div style="${f(p)}">
<div class="cb-backdrop" data-action="close"></div>
<div class="cb-dialog" role="dialog" aria-modal="true" aria-labelledby="cb-dialog-title">
<div class="cb-dialog-header">
<div class="cb-dialog-header-icon">${l}</div>
<div class="cb-dialog-header-icon">${b}</div>
<div class="cb-dialog-header-text">
<div class="cb-dialog-title" id="cb-dialog-title">${a}</div>
${e?`<div class="cb-dialog-description">${e}</div>`:""}
<div class="cb-dialog-title" id="cb-dialog-title">${e}</div>
${o?`<div class="cb-dialog-description">${o}</div>`:""}
</div>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${R}</button>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${P}</button>
</div>
<div class="cb-dialog-body">
${c?this.renderClaudeCodeBody(g):this.renderCoworkBody(o,d)}
${v?this.renderClaudeCodeBody(m):this.renderCoworkBody(a,c)}
</div>
<div class="cb-dialog-footer">
${c?`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`:`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}
${v?this.renderClaudeCodeFooter(m,D):this.renderCoworkFooter(this.escapeHref(u),M)}
</div>
</div>
</div>
`,this.setupListeners(),this.setupSystemThemeWatch()}renderClaudeCodeBody(t){return`
`,this.setupListeners(),this.setupSystemThemeWatch(),l&&!this._autoLaunchConsumed){if(this._autoLaunchConsumed=!0,t==="cowork"&&M)this.openDesktopAppLink(u);else if(t==="claude-code"&&D){let R=this.shadowRoot?.querySelector('[data-action="launch-terminal"]');R&&this.launchTerminal(R,m)}}}openDesktopAppLink(t){if(this.dispatchEvent(new CustomEvent("cb-launch-desktop",{bubbles:!0,composed:!0,detail:{href:t}})),typeof document>"u")return;let e=document.createElement("a");e.href=t,e.rel="noopener noreferrer",e.style.cssText="position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none",document.body.appendChild(e),e.click(),requestAnimationFrame(()=>e.remove())}renderClaudeCodeBody(t){return`
<div class="cb-step">

@@ -360,3 +477,3 @@ <div class="cb-step-num">1</div>

<div class="cb-code-text"><span class="cb-code-prefix">$</span>${this.escapeHtml(t)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${f}<span>Copy</span></button>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${x}<span>Copy</span></button>
</div>

@@ -371,3 +488,3 @@ </div>

</div>
`}renderCoworkBody(t,a){let e="";if(a){let o=`Install the skill from ${a} and run ${t}`;e+=`
`}renderCoworkBody(t,e){let o="";if(e){let a=`Install the skill from ${e} and run ${t}`;o+=`
<div class="cb-step">

@@ -378,4 +495,4 @@ <div class="cb-step-num">1</div>

<div class="cb-code-block">
<div class="cb-code-text">${this.escapeHtml(o)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(o)}">${f}<span>Copy</span></button>
<div class="cb-code-text">${this.escapeHtml(a)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(a)}">${x}<span>Copy</span></button>
</div>

@@ -390,3 +507,3 @@ </div>

</div>
`}else e+=`
`}else o+=`
<div class="cb-step">

@@ -398,3 +515,3 @@ <div class="cb-step-num">1</div>

<div class="cb-code-text">${this.escapeHtml(t)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${f}<span>Copy</span></button>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(t)}">${x}<span>Copy</span></button>
</div>

@@ -409,3 +526,52 @@ </div>

</div>
`;return e}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let a=t.target.closest("[data-action]");if(!a)return;let e=a.dataset.action;if(e==="close")this.close();else if(e==="copy"){let o=a.dataset.command||"";this.copyToClipboard(o,a)}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let e=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>this.render();e.addEventListener("change",o),this._mqCleanup=()=>e.removeEventListener("change",o)}async copyToClipboard(t,a){try{await navigator.clipboard.writeText(t);let e=a.querySelector("span"),o=a,n=o.querySelector(".cb-icon-sm")?.outerHTML||"";a.setAttribute("data-copied","true"),e&&(e.textContent="Copied!"),o.innerHTML=`${B}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{a.setAttribute("data-copied","false"),o.innerHTML=`${f}<span>Copy</span>`},2e3)}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),this._options.onCopy?.(t)}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),a=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),a&&(a.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(t){let a=document.createElement("div");return a.textContent=t,a.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",O);function _(r){let b=document.createElement("claude-popup-dialog");return b.options=r,document.body.appendChild(b),b}var z=`
`;return o}renderCoworkFooter(t,e){let o="Open this page in Safari, Chrome, Firefox, or Edge. In-app browsers usually block opening apps.",a=e?"Opens the Claude app through your system link handler\u2014then paste the prompt below into Cowork.":"App links aren\u2019t supported in your current browser (common inside social or chat apps). Open this page in a full browser, or launch Claude Desktop manually and paste below.";return`
${e?`
<a
class="cb-launch-btn cb-launch-btn--desktop"
href="${t}"
data-action="launch-desktop"
rel="noopener noreferrer"
>
${L}
<span>Open Claude Desktop</span>
</a>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--desktop"
disabled
aria-disabled="true"
aria-label="Open Claude Desktop (unavailable in this browser)"
title="${this.escapeAttr(o)}"
>
${L}
<span>Open Claude Desktop</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}renderClaudeCodeFooter(t,e){let o="Available on desktop in a normal browser with clipboard access. Use Copy above, then paste into your terminal.",a=this.getTerminalLaunchSubcopy(e);return`
${e?`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
data-action="launch-terminal"
data-command="${this.escapeAttr(t)}"
aria-label="Copy command and open a terminal app"
>
${O}
<span>Open Terminal</span>
</button>`:`
<button
type="button"
class="cb-launch-btn cb-launch-btn--terminal"
disabled
aria-disabled="true"
aria-label="Open Terminal (unavailable in this environment)"
title="${this.escapeAttr(o)}"
>
${O}
<span>Open Terminal</span>
</button>`}
<span class="cb-launch-sub">${this.escapeHtml(a)}</span>
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`}static isDesktopMac(){if(typeof navigator>"u")return!1;let t=navigator.platform||"",e=navigator.userAgent||"";return/iPhone|iPad|iPod/i.test(e)?!1:/Mac/.test(t)||/Mac OS X/.test(e)}getTerminalLaunchSubcopy(t){if(!t)return"Use the Copy button above, then paste into Terminal, PowerShell, or your preferred shell on a desktop computer.";if(typeof navigator>"u")return"Copies the command to your clipboard first.";let e=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(e)?"Copies the command to your clipboard. Open a terminal or SSH client on your device to run it.":r.isDesktopMac()?"Copies the command, then tries to open iTerm if you have it\u2014otherwise open Terminal and paste.":"Copies the command, then tries to open VS Code if installed\u2014paste into its terminal, or use any shell."}getTerminalProtocolUrl(){if(typeof navigator>"u")return null;let t=navigator.userAgent||"";return/iPhone|iPad|iPod|Android/i.test(t)?null:r.isDesktopMac()?"iterm2://":"vscode://"}tryOpenCustomProtocol(t){if(typeof document>"u")return;let e=document.createElement("iframe");e.style.cssText="position:fixed;width:0;height:0;border:none;opacity:0;pointer-events:none",e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.src=t,document.body.appendChild(e),window.setTimeout(()=>e.remove(),1200)}escapeHref(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}setupListeners(){this.shadowRoot&&(this.shadowRoot.addEventListener("click",t=>{let e=t.target.closest("[data-action]");if(!e)return;let o=e.dataset.action;if(o==="close")this.close();else if(o==="copy"){let a=e.dataset.command||"";this.copyToClipboard(a,e)}else if(o==="launch-desktop"){t.preventDefault();let a=e.getAttribute("href")||"";this.openDesktopAppLink(a||e.href)}else if(o==="launch-terminal"){let a=e.dataset.command||"";this.launchTerminal(e,a)}}),this.shadowRoot.addEventListener("keydown",t=>{t.key==="Escape"&&this.close()}))}setupSystemThemeWatch(){this._mqCleanup?.(),this._mqCleanup=null;let t=this._options.theme;if(!(t==="system"||t==="branded"||t==="branded-alt")||typeof window>"u")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();o.addEventListener("change",a),this._mqCleanup=()=>o.removeEventListener("change",a)}async launchTerminal(t,e){let o=t.querySelector("span");try{await navigator.clipboard.writeText(e),this._options.onCopy?.(e);let a=this.getTerminalProtocolUrl();a&&this.tryOpenCustomProtocol(a),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}catch{let a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),this._options.onCopy?.(e);let s=this.getTerminalProtocolUrl();s&&this.tryOpenCustomProtocol(s),o&&(o.textContent="Copied!"),this.dispatchEvent(new CustomEvent("cb-launch-terminal",{bubbles:!0,composed:!0,detail:{command:e}})),window.setTimeout(()=>{o&&(o.textContent="Open Terminal")},2e3)}}async copyToClipboard(t,e){try{await navigator.clipboard.writeText(t);let o=e.querySelector("span"),a=e,s=a.querySelector(".cb-icon-sm")?.outerHTML||"";e.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),a.innerHTML=`${z}<span>Copied!</span>`,this._options.onCopy?.(t),setTimeout(()=>{e.setAttribute("data-copied","false"),a.innerHTML=`${x}<span>Copy</span>`},2e3)}catch{let o=document.createElement("textarea");o.value=t,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o),this._options.onCopy?.(t)}}close(){let t=this.shadowRoot?.querySelector(".cb-dialog"),e=this.shadowRoot?.querySelector(".cb-backdrop");t&&(t.style.animation="cb-scale-in 0.15s ease-in reverse"),e&&(e.style.animation="cb-fade-in 0.15s ease-in reverse"),setTimeout(()=>{this._options.onClose?.(),this.remove()},140)}escapeHtml(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}escapeAttr(t){return t.replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}};typeof customElements<"u"&&!customElements.get("claude-popup-dialog")&&customElements.define("claude-popup-dialog",$);function A(r){let d=document.createElement("claude-popup-dialog");return d.options=r,document.body.appendChild(d),d}var K=`
:host {

@@ -455,7 +621,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${y};
background: ${w};
transform: scale(0.98);

@@ -648,4 +814,4 @@ }

}
`,F=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),a=this.getAttribute("theme"),e=this.getAttribute("size"),o=this.getAttribute("variant"),n=this.getAttribute("shape"),d=this.getAttribute("popup"),s=this.getAttribute("prompt-flag"),l=this.getAttribute("popup-title"),c=this.getAttribute("popup-description");t!==null&&(this._options.command=t),a&&(this._options.theme=a),e&&(this._options.size=e),o&&(this._options.variant=o),n&&(this._options.shape=n),d!==null&&(this._options.popup=d!=="false"),s!==null&&(this._options.promptFlag=s!=="false"),l!==null&&(this._options.popupTitle=l),c!==null&&(this._options.popupDescription=c)}updateLightDOM(){let{command:t}=this._options,a=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.href=`https://claude.ai/code?command=${encodeURIComponent(a)}`,e.textContent=`Run on Claude Code: ${t}`,e.setAttribute("data-platform","claude-code"),e.setAttribute("data-command",t),e.setAttribute("data-full-command",a)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:a}=this._options;return a===!1?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),a=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",o=p(t),n=this._options.size||"md",d=this._options.shape||"rounded",s=E[n],l=w[d][n];this.setAttribute("data-theme",a),this.setAttribute("data-variant",e);let c=e!=="filled"?"transparent":o.bg,g=e==="ghost"?"transparent":e==="outline"?o.primary:o.border,A=e!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${z}</style>
`,_=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("theme"),o=this.getAttribute("size"),a=this.getAttribute("variant"),s=this.getAttribute("shape"),c=this.getAttribute("popup"),n=this.getAttribute("prompt-flag"),l=this.getAttribute("popup-title"),p=this.getAttribute("popup-description"),b=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e&&(this._options.theme=e),o&&(this._options.size=o),a&&(this._options.variant=a),s&&(this._options.shape=s),c!==null&&(this._options.popup=c!=="false"),n!==null&&(this._options.promptFlag=n!=="false"),l!==null&&(this._options.popupTitle=l),p!==null&&(this._options.popupDescription=p),b===null?delete this._options.autoLaunch:this._options.autoLaunch=b!=="false"}updateLightDOM(){let{command:t}=this._options,e=this.getFullCommand();this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Claude Code: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.href=`https://claude.ai/code?command=${encodeURIComponent(e)}`,o.textContent=`Run on Claude Code: ${t}`,o.setAttribute("data-platform","claude-code"),o.setAttribute("data-command",t),o.setAttribute("data-full-command",e)}getResolvedTheme(){return this._options.theme||"branded"}getFullCommand(){let{command:t,promptFlag:e}=this._options;return e===!1?t:`claude -p "${t}"`}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=h(t),s=this._options.size||"md",c=this._options.shape||"rounded",n=E[s],l=T[c][s];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let p=o!=="filled"?"transparent":a.bg,b=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,v=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${K}</style>
<button

@@ -655,13 +821,13 @@ class="cb-btn"

style="
${m(o)}
--cb-bg: ${c};
--cb-border: ${g};
--cb-text: ${A};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${s.height};
--cb-font-size: ${s.fontSize};
--cb-icon-size: ${s.iconSize};
--cb-padding: ${s.ccPadding};
--cb-gap: ${s.gap};
${f(a)}
--cb-bg: ${p};
--cb-border: ${b};
--cb-text: ${v};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${n.height};
--cb-font-size: ${n.fontSize};
--cb-icon-size: ${n.iconSize};
--cb-padding: ${n.ccPadding};
--cb-gap: ${n.gap};
--cb-radius: ${l};

@@ -671,6 +837,6 @@ "

>
<span class="cb-btn-icon" aria-hidden="true">${x}</span>
<span class="cb-btn-icon" aria-hidden="true">${k}</span>
<span class="cb-btn-label">Run on Claude Code</span>
</button>
`;let v=this.shadowRoot.querySelector(".cb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:a,popupTitle:e,popupDescription:o}=this._options,n=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:a,fullCommand:n}})),t===!1){navigator.clipboard.writeText(n).then(()=>{this._options.onCopy?.(n),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))});return}_({variant:"claude-code",theme:this.getResolvedTheme(),title:e||"Run on Claude Code",description:o||"Execute this command in your terminal to get started.",command:a,fullCommand:n,onCopy:d=>{this._options.onCopy?.(d),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:d}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();t.addEventListener("change",a),this._mqCleanup=()=>t.removeEventListener("change",a)}};F.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];function $(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,F)}$();var D=`
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:e,popupTitle:o,popupDescription:a,autoLaunch:s}=this._options,c=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:e,fullCommand:c}})),t===!1){navigator.clipboard.writeText(c).then(()=>{this._options.onCopy?.(c),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:c}}))});return}A({variant:"claude-code",theme:this.getResolvedTheme(),title:o||"Run on Claude Code",description:a||"Execute this command in your terminal to get started.",command:e,fullCommand:c,autoLaunch:s===!0,onCopy:n=>{this._options.onCopy?.(n),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e)}};_.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description","auto-launch"];function S(r="claude-code-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,_)}S();var Y=`
:host {

@@ -720,7 +886,7 @@ display: inline-block;

:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${u};
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${y};
background: ${w};
transform: scale(0.98);

@@ -915,4 +1081,4 @@ }

}
`,T=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),a=this.getAttribute("skill-url"),e=this.getAttribute("theme"),o=this.getAttribute("size"),n=this.getAttribute("variant"),d=this.getAttribute("shape"),s=this.getAttribute("popup"),l=this.getAttribute("popup-title"),c=this.getAttribute("popup-description");t!==null&&(this._options.command=t),a!==null&&(this._options.skillUrl=a),e&&(this._options.theme=e),o&&(this._options.size=o),n&&(this._options.variant=n),d&&(this._options.shape=d),s!==null&&(this._options.popup=s!=="false"),l!==null&&(this._options.popupTitle=l),c!==null&&(this._options.popupDescription=c)}updateLightDOM(){let{command:t,skillUrl:a}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let e=this.querySelector("a[data-cb-crawl]");e||(e=document.createElement("a"),e.setAttribute("data-cb-crawl",""),e.setAttribute("aria-hidden","true"),e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(e)),e.textContent=`Run on Cowork: ${t}`,e.setAttribute("data-platform","cowork"),e.setAttribute("data-command",t),a?(e.href=a,e.setAttribute("data-skill-url",a)):(e.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,e.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),a=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,e=this._options.variant||"filled",o=p(t),n=this._options.size||"md",d=this._options.shape||"rounded",s=E[n],l=w[d][n];this.setAttribute("data-theme",a),this.setAttribute("data-variant",e);let c=e!=="filled"?"transparent":o.bg,g=e==="ghost"?"transparent":e==="outline"?o.primary:o.border,A=e!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${D}</style>
`,F=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(t){this._options={...this._options,...t},this.render(),this.updateLightDOM()}get options(){return this._options}syncFromAttributes(){let t=this.getAttribute("command"),e=this.getAttribute("skill-url"),o=this.getAttribute("theme"),a=this.getAttribute("size"),s=this.getAttribute("variant"),c=this.getAttribute("shape"),n=this.getAttribute("popup"),l=this.getAttribute("popup-title"),p=this.getAttribute("popup-description"),b=this.getAttribute("auto-launch");t!==null&&(this._options.command=t),e!==null&&(this._options.skillUrl=e),o&&(this._options.theme=o),a&&(this._options.size=a),s&&(this._options.variant=s),c&&(this._options.shape=c),n!==null&&(this._options.popup=n!=="false"),l!==null&&(this._options.popupTitle=l),p!==null&&(this._options.popupDescription=p),b===null?delete this._options.autoLaunch:this._options.autoLaunch=b!=="false"}updateLightDOM(){let{command:t,skillUrl:e}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${t}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let o=this.querySelector("a[data-cb-crawl]");o||(o=document.createElement("a"),o.setAttribute("data-cb-crawl",""),o.setAttribute("aria-hidden","true"),o.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",this.appendChild(o)),o.textContent=`Run on Cowork: ${t}`,o.setAttribute("data-platform","cowork"),o.setAttribute("data-command",t),e?(o.href=e,o.setAttribute("data-skill-url",e)):(o.href=`https://claude.ai/cowork?command=${encodeURIComponent(t)}`,o.removeAttribute("data-skill-url"))}getResolvedTheme(){return this._options.theme||"branded"}render(){if(!this.shadowRoot)return;let t=this.getResolvedTheme(),e=t==="system"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t,o=this._options.variant||"filled",a=h(t),s=this._options.size||"md",c=this._options.shape||"rounded",n=E[s],l=T[c][s];this.setAttribute("data-theme",e),this.setAttribute("data-variant",o);let p=o!=="filled"?"transparent":a.bg,b=o==="ghost"?"transparent":o==="outline"?a.primary:a.border,v=o!=="filled"?a.primary:a.text;this.shadowRoot.innerHTML=`
<style>${Y}</style>
<button

@@ -922,13 +1088,13 @@ class="cb-btn"

style="
${m(o)}
--cb-bg: ${c};
--cb-border: ${g};
--cb-text: ${A};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${s.height};
--cb-font-size: ${s.fontSize};
--cb-icon-size: ${s.iconSize};
--cb-padding: ${s.padding};
--cb-gap: ${s.gap};
${f(a)}
--cb-bg: ${p};
--cb-border: ${b};
--cb-text: ${v};
--cb-accent-color: ${a.primary};
--cb-focus-color: ${a.primary};
--cb-height: ${n.height};
--cb-font-size: ${n.fontSize};
--cb-icon-size: ${n.iconSize};
--cb-padding: ${n.padding};
--cb-gap: ${n.gap};
--cb-radius: ${l};

@@ -938,6 +1104,6 @@ "

>
<span class="cb-btn-icon" aria-hidden="true">${k}</span>
<span class="cb-btn-icon" aria-hidden="true">${y}</span>
<span class="cb-btn-label">Run on Cowork</span>
</button>
`;let v=this.shadowRoot.querySelector(".cb-btn");v.addEventListener("click",()=>this.handleClick()),v.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:a,skillUrl:e,popupTitle:o,popupDescription:n}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:a}})),t===!1){navigator.clipboard.writeText(a).then(()=>{this._options.onCopy?.(a),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:a}}))});return}_({variant:"cowork",theme:this.getResolvedTheme(),title:o||"Run on Cowork",description:n||"Copy and paste into a Cowork session to get started.",command:a,skillUrl:e,onCopy:d=>{this._options.onCopy?.(d),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:d}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>this.render();t.addEventListener("change",a),this._mqCleanup=()=>t.removeEventListener("change",a)}};T.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];function L(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,T)}L();var M={install(r){if($(),L(),r.config?.compilerOptions){let b=r.config.compilerOptions.isCustomElement;r.config.compilerOptions.isCustomElement=t=>t==="claude-code-button"||t==="cowork-button"||t==="claude-popup-dialog"?!0:b?.(t)??!1}}},tt=M;export{M as ClaudeButtonsPlugin,tt as default};
`;let m=this.shadowRoot.querySelector(".cb-btn");m.addEventListener("click",()=>this.handleClick()),m.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleClick())}),this._rendered=!0,this.setupSystemThemeWatch()}handleClick(){let{popup:t,command:e,skillUrl:o,popupTitle:a,popupDescription:s,autoLaunch:c}=this._options;if(this.dispatchEvent(new CustomEvent("cb-open",{bubbles:!0,composed:!0,detail:{command:e}})),t===!1){navigator.clipboard.writeText(e).then(()=>{this._options.onCopy?.(e),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:e}}))});return}A({variant:"cowork",theme:this.getResolvedTheme(),title:a||"Run on Cowork",description:s||"Copy and paste into a Cowork session to get started.",command:e,skillUrl:o,autoLaunch:c===!0,onCopy:n=>{this._options.onCopy?.(n),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-close",{bubbles:!0,composed:!0}))}})}setupSystemThemeWatch(){if(this._mqCleanup?.(),this._mqCleanup=null,this.getResolvedTheme()!=="system"||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>this.render();t.addEventListener("change",e),this._mqCleanup=()=>t.removeEventListener("change",e)}};F.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description","auto-launch"];function B(r="cowork-button"){typeof customElements>"u"||customElements.get(r)||customElements.define(r,F)}B();var G={install(r){if(S(),B(),r.config?.compilerOptions){let d=r.config.compilerOptions.isCustomElement;r.config.compilerOptions.isCustomElement=t=>t==="claude-code-button"||t==="cowork-button"||t==="claude-popup-dialog"?!0:d?.(t)??!1}}},ut=G;export{G as ClaudeButtonsPlugin,ut as default};
//# sourceMappingURL=vue.mjs.map
+3
-1
package.json
{
"name": "claudebuttons",
"version": "1.1.0",
"version": "1.2.0",
"description": "Drop-in \"Run on Claude Code\" and \"Run on Cowork\" buttons for any website or framework",

@@ -36,2 +36,3 @@ "main": "./dist/index.js",

"typecheck": "tsc --noEmit",
"test": "npm run typecheck && npm run build",
"prepublishOnly": "npm run build"

@@ -50,2 +51,3 @@ },

"license": "MIT",
"homepage": "https://claudebuttons.vercel.app/",
"devDependencies": {

@@ -52,0 +54,0 @@ "@types/react": "^19.2.14",

+14
-0
README.md

@@ -0,1 +1,5 @@

<p align="center">
<img src="assets/image.png" alt="claudebuttons" width="100%">
</p>
# claudebuttons

@@ -6,2 +10,12 @@

<p align="center">
<a href="https://claudebuttons.vercel.app/" title="Open interactive demo">
<img src="https://img.shields.io/static/v1?style=for-the-badge&label=Run+on&message=Claude+Code&color=d4795c&labelColor=d4795c" alt="Try Run on Claude Code — live demo">
</a>
&nbsp;
<a href="https://claudebuttons.vercel.app/" title="Open interactive demo">
<img src="https://img.shields.io/static/v1?style=for-the-badge&label=Run+on&message=Cowork&color=d4795c&labelColor=ffffff" alt="Try Run on Cowork — live demo">
</a>
</p>
<p align="center">
<img src="https://img.shields.io/npm/v/claudebuttons?color=%23D4795C&label=npm" alt="npm version">

@@ -8,0 +22,0 @@ <img src="https://img.shields.io/bundlephobia/minzip/claudebuttons?color=%23D4795C" alt="bundle size">

-397
dist/chunk-OKZ3PPPH.mjs
var x=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Ears -->
<rect x="3.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>
<rect x="15.5" y="1.5" width="5" height="5" rx="1.5" fill="currentColor"/>
<!-- Body -->
<rect x="2.5" y="5.5" width="19" height="13" rx="3" fill="currentColor"/>
<!-- Eyes -->
<ellipse cx="9" cy="11.5" rx="2" ry="2.5" fill="white" opacity="0.95"/>
<ellipse cx="15" cy="11.5" rx="2" ry="2.5" fill="white" opacity="0.95"/>
<!-- Pupils -->
<ellipse cx="9.6" cy="12" rx="1" ry="1.2" fill="#1C1917"/>
<ellipse cx="15.6" cy="12" rx="1" ry="1.2" fill="#1C1917"/>
<!-- Legs -->
<rect x="6.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
<rect x="13.5" y="18.5" width="4" height="3.5" rx="1.5" fill="currentColor"/>
</svg>`,m=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon">
<!-- Lightning bolt -->
<path d="M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z" fill="currentColor"/>
<!-- Circuit path -->
<path d="M12.8 7.2L10.2 11.5l2.2 4" stroke="var(--cb-icon-accent, white)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- Circuit nodes -->
<circle cx="12.8" cy="7.2" r="1.3" fill="var(--cb-icon-accent, white)"/>
<circle cx="10.2" cy="11.5" r="1.3" fill="var(--cb-icon-accent, white)"/>
<circle cx="12.4" cy="15.5" r="1.3" fill="var(--cb-icon-accent, white)"/>
</svg>`,a=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-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>`,u=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;var g=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="cb-icon-sm">
<path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;var c="#D4795C",l="#C06A4E",T="#B35E43",d={branded:{bg:c,text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:c,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},"branded-alt":{bg:"#6B5CE7",text:"#FFFFFF",border:"transparent",surface:"#FFFFFF",surfaceText:"#1C1917",muted:"#78716C",primary:"#6B5CE7",primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"},dark:{bg:"#1C1917",text:"#F5F0EB",border:"#3D3530",surface:"#292524",surfaceText:"#F5F0EB",muted:"#A8A29E",primary:c,primaryText:"#FFFFFF",codeBg:"#0C0A09",codeText:"#F5F0EB"},light:{bg:"#FFFFFF",text:"#1C1917",border:"#E7E5E4",surface:"#FAFAF9",surfaceText:"#1C1917",muted:"#78716C",primary:c,primaryText:"#FFFFFF",codeBg:"#1C1917",codeText:"#F5F0EB"}};function s(r){return r!=="system"?d[r]:typeof window>"u"?d.light:window.matchMedia("(prefers-color-scheme: dark)").matches?d.dark:d.light}function v(r){return`
--cb-bg: ${r.bg};
--cb-text: ${r.text};
--cb-border: ${r.border};
--cb-surface: ${r.surface};
--cb-surface-text: ${r.surfaceText};
--cb-muted: ${r.muted};
--cb-primary: ${r.primary};
--cb-primary-text: ${r.primaryText};
--cb-code-bg: ${r.codeBg};
--cb-code-text: ${r.codeText};
`}var E={rounded:{sm:"0.375rem",md:"0.5rem",lg:"0.625rem"},pill:{sm:"999px",md:"999px",lg:"999px"},square:{sm:"0",md:"0",lg:"0"}},O={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 k=`
: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; }
.cb-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: cb-fade-in 0.15s ease-out;
}
.cb-dialog {
position: relative;
width: 90%;
max-width: 460px;
background: var(--cb-surface);
color: var(--cb-surface-text);
border-radius: 16px;
box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--cb-border);
overflow: hidden;
animation: cb-scale-in 0.2s ease-out;
}
.cb-dialog-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--cb-border);
}
.cb-dialog-header-icon {
width: 36px;
height: 36px;
color: var(--cb-primary);
flex-shrink: 0;
}
.cb-dialog-header-text {
flex: 1;
min-width: 0;
}
.cb-dialog-title {
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: var(--cb-surface-text);
}
.cb-dialog-description {
font-size: 13px;
color: var(--cb-muted);
margin-top: 2px;
line-height: 1.4;
}
.cb-dialog-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--cb-muted);
cursor: pointer;
border-radius: 8px;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.cb-dialog-close:hover {
background: var(--cb-border);
color: var(--cb-surface-text);
}
.cb-dialog-close svg { width: 14px; height: 14px; }
.cb-dialog-body { padding: 20px 24px; }
.cb-step {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.cb-step:last-child { margin-bottom: 0; }
.cb-step-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--cb-primary);
color: var(--cb-primary-text);
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.cb-step-content {
flex: 1;
min-width: 0;
}
.cb-step-label {
font-size: 13px;
font-weight: 500;
color: var(--cb-surface-text);
margin-bottom: 8px;
line-height: 1.4;
}
.cb-code-block {
display: flex;
align-items: center;
background: var(--cb-code-bg);
color: var(--cb-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;
}
.cb-code-text {
flex: 1;
overflow-x: auto;
white-space: nowrap;
padding: 10px 0;
scrollbar-width: none;
}
.cb-code-text::-webkit-scrollbar { display: none; }
.cb-code-prefix {
color: var(--cb-muted);
user-select: none;
margin-right: 6px;
}
.cb-copy-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
min-width: 36px;
padding: 0 12px;
border: none;
background: var(--cb-primary);
color: var(--cb-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;
}
.cb-copy-btn:hover { background: ${l}; }
.cb-copy-btn:active { transform: scale(0.96); }
.cb-copy-btn svg { width: 14px; height: 14px; }
.cb-copy-btn[data-copied="true"] {
background: #16a34a;
}
.cb-dialog-footer {
padding: 16px 24px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.cb-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 44px;
border: none;
background: var(--cb-primary);
color: var(--cb-primary-text);
cursor: pointer;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
transition: background 0.15s, transform 0.1s;
}
.cb-action-btn:hover { background: ${l}; }
.cb-action-btn:active { transform: scale(0.98); }
.cb-action-btn svg { width: 16px; height: 16px; }
.cb-hint {
font-size: 12px;
color: var(--cb-muted);
text-align: center;
line-height: 1.4;
}
.cb-hint kbd {
display: inline-block;
padding: 1px 5px;
font-family: inherit;
font-size: 11px;
background: var(--cb-border);
border-radius: 4px;
border: 1px solid var(--cb-border);
}
@keyframes cb-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes cb-scale-in {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 480px) {
.cb-dialog {
width: 96%;
max-width: none;
border-radius: 14px;
max-height: 90dvh;
overflow-y: auto;
overscroll-behavior: contain;
}
.cb-dialog-header { padding: 16px 16px 12px; gap: 10px; }
.cb-dialog-header-icon { width: 28px; height: 28px; }
.cb-dialog-body { padding: 16px; }
.cb-dialog-footer { padding: 12px 16px 16px; }
.cb-step { gap: 10px; margin-bottom: 14px; }
.cb-step-num { width: 22px; height: 22px; font-size: 11px; }
.cb-step-label { font-size: 12px; margin-bottom: 6px; }
.cb-code-block { font-size: 12px; padding: 2px 2px 2px 10px; border-radius: 8px; }
.cb-copy-btn { height: 32px; padding: 0 10px; font-size: 11px; border-radius: 6px; }
.cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }
.cb-hint { font-size: 11px; }
}
@media (max-width: 360px) {
.cb-dialog { width: 100%; border-radius: 12px 12px 0 0; align-self: flex-end; }
.cb-copy-btn span { display: none; }
.cb-copy-btn { min-width: 32px; padding: 0 8px; }
}
@supports (padding: env(safe-area-inset-bottom)) {
.cb-dialog-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
`,p=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:b,skillUrl:f}=this._options,y=this.resolvePopupTokens(),w=e==="claude-code"?x:m,h=e==="claude-code",C=b||i;this.shadowRoot.innerHTML=`
<style>${k}</style>
<div style="${v(y)}">
<div class="cb-backdrop" data-action="close"></div>
<div class="cb-dialog" role="dialog" aria-modal="true" aria-labelledby="cb-dialog-title">
<div class="cb-dialog-header">
<div class="cb-dialog-header-icon">${w}</div>
<div class="cb-dialog-header-text">
<div class="cb-dialog-title" id="cb-dialog-title">${t}</div>
${o?`<div class="cb-dialog-description">${o}</div>`:""}
</div>
<button class="cb-dialog-close" data-action="close" aria-label="Close">${g}</button>
</div>
<div class="cb-dialog-body">
${h?this.renderClaudeCodeBody(C):this.renderCoworkBody(i,f)}
</div>
<div class="cb-dialog-footer">
${h?`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>
`:`
<div class="cb-hint">Press <kbd>\u2318</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>
`}
</div>
</div>
</div>
`,this.setupListeners(),this.setupSystemThemeWatch()}renderClaudeCodeBody(e){return`
<div class="cb-step">
<div class="cb-step-num">1</div>
<div class="cb-step-content">
<div class="cb-step-label">Copy this command to your clipboard</div>
<div class="cb-code-block">
<div class="cb-code-text"><span class="cb-code-prefix">$</span>${this.escapeHtml(e)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(e)}">${a}<span>Copy</span></button>
</div>
</div>
</div>
<div class="cb-step">
<div class="cb-step-num">2</div>
<div class="cb-step-content">
<div class="cb-step-label">Paste and run in your terminal</div>
</div>
</div>
`}renderCoworkBody(e,t){let o="";if(t){let i=`Install the skill from ${t} and run ${e}`;o+=`
<div class="cb-step">
<div class="cb-step-num">1</div>
<div class="cb-step-content">
<div class="cb-step-label">Copy this prompt to your clipboard</div>
<div class="cb-code-block">
<div class="cb-code-text">${this.escapeHtml(i)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(i)}">${a}<span>Copy</span></button>
</div>
</div>
</div>
<div class="cb-step">
<div class="cb-step-num">2</div>
<div class="cb-step-content">
<div class="cb-step-label">Paste into a Cowork session \u2014 Claude will fetch the skill and set it up for you</div>
</div>
</div>
`}else o+=`
<div class="cb-step">
<div class="cb-step-num">1</div>
<div class="cb-step-content">
<div class="cb-step-label">Copy this command to your clipboard</div>
<div class="cb-code-block">
<div class="cb-code-text">${this.escapeHtml(e)}</div>
<button class="cb-copy-btn" data-action="copy" data-command="${this.escapeAttr(e)}">${a}<span>Copy</span></button>
</div>
</div>
</div>
<div class="cb-step">
<div class="cb-step-num">2</div>
<div class="cb-step-content">
<div class="cb-step-label">Paste and send in your Cowork 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,b=i.querySelector(".cb-icon-sm")?.outerHTML||"";t.setAttribute("data-copied","true"),o&&(o.textContent="Copied!"),i.innerHTML=`${u}<span>Copied!</span>`,this._options.onCopy?.(e),setTimeout(()=>{t.setAttribute("data-copied","false"),i.innerHTML=`${a}<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(".cb-dialog"),t=this.shadowRoot?.querySelector(".cb-backdrop");e&&(e.style.animation="cb-scale-in 0.15s ease-in reverse"),t&&(t.style.animation="cb-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("claude-popup-dialog")&&customElements.define("claude-popup-dialog",p);function M(r){let n=document.createElement("claude-popup-dialog");return n.options=r,document.body.appendChild(n),n}export{x as a,m as b,c,l as d,T as e,s as f,v as g,E as h,O as i,M as j};
//# sourceMappingURL=chunk-OKZ3PPPH.mjs.map
-1
dist/chunk-OKZ3PPPH.mjs.map
{"version":3,"sources":["../src/icons.ts","../src/themes.ts","../src/popup-dialog.ts"],"sourcesContent":["export const CLAUDE_CODE_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cb-icon\">\n <!-- Ears -->\n <rect x=\"3.5\" y=\"1.5\" width=\"5\" height=\"5\" rx=\"1.5\" fill=\"currentColor\"/>\n <rect x=\"15.5\" y=\"1.5\" width=\"5\" height=\"5\" rx=\"1.5\" fill=\"currentColor\"/>\n <!-- Body -->\n <rect x=\"2.5\" y=\"5.5\" width=\"19\" height=\"13\" rx=\"3\" fill=\"currentColor\"/>\n <!-- Eyes -->\n <ellipse cx=\"9\" cy=\"11.5\" rx=\"2\" ry=\"2.5\" fill=\"white\" opacity=\"0.95\"/>\n <ellipse cx=\"15\" cy=\"11.5\" rx=\"2\" ry=\"2.5\" fill=\"white\" opacity=\"0.95\"/>\n <!-- Pupils -->\n <ellipse cx=\"9.6\" cy=\"12\" rx=\"1\" ry=\"1.2\" fill=\"#1C1917\"/>\n <ellipse cx=\"15.6\" cy=\"12\" rx=\"1\" ry=\"1.2\" fill=\"#1C1917\"/>\n <!-- Legs -->\n <rect x=\"6.5\" y=\"18.5\" width=\"4\" height=\"3.5\" rx=\"1.5\" fill=\"currentColor\"/>\n <rect x=\"13.5\" y=\"18.5\" width=\"4\" height=\"3.5\" rx=\"1.5\" fill=\"currentColor\"/>\n</svg>`;\n\nexport const COWORK_ICON = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cb-icon\">\n <!-- Lightning bolt -->\n <path d=\"M13.5 2L5 13.5h5.5L9 22l10-12h-5.5L15.5 2h-2z\" fill=\"currentColor\"/>\n <!-- Circuit path -->\n <path d=\"M12.8 7.2L10.2 11.5l2.2 4\" stroke=\"var(--cb-icon-accent, white)\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n <!-- Circuit nodes -->\n <circle cx=\"12.8\" cy=\"7.2\" r=\"1.3\" fill=\"var(--cb-icon-accent, white)\"/>\n <circle cx=\"10.2\" cy=\"11.5\" r=\"1.3\" fill=\"var(--cb-icon-accent, white)\"/>\n <circle cx=\"12.4\" cy=\"15.5\" r=\"1.3\" fill=\"var(--cb-icon-accent, white)\"/>\n</svg>`;\n\nexport const COPY_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cb-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=\"cb-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=\"cb-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=\"cb-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=\"cb-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 = '#D4795C';\nexport const BRAND_COLOR_HOVER = '#C06A4E';\nexport const BRAND_COLOR_ACTIVE = '#B35E43';\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: '#1C1917',\n muted: '#78716C',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#1C1917',\n codeText: '#F5F0EB',\n },\n 'branded-alt': {\n bg: '#6B5CE7',\n text: '#FFFFFF',\n border: 'transparent',\n surface: '#FFFFFF',\n surfaceText: '#1C1917',\n muted: '#78716C',\n primary: '#6B5CE7',\n primaryText: '#FFFFFF',\n codeBg: '#1C1917',\n codeText: '#F5F0EB',\n },\n dark: {\n bg: '#1C1917',\n text: '#F5F0EB',\n border: '#3D3530',\n surface: '#292524',\n surfaceText: '#F5F0EB',\n muted: '#A8A29E',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#0C0A09',\n codeText: '#F5F0EB',\n },\n light: {\n bg: '#FFFFFF',\n text: '#1C1917',\n border: '#E7E5E4',\n surface: '#FAFAF9',\n surfaceText: '#1C1917',\n muted: '#78716C',\n primary: BRAND_COLOR,\n primaryText: '#FFFFFF',\n codeBg: '#1C1917',\n codeText: '#F5F0EB',\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 --cb-bg: ${tokens.bg};\n --cb-text: ${tokens.text};\n --cb-border: ${tokens.border};\n --cb-surface: ${tokens.surface};\n --cb-surface-text: ${tokens.surfaceText};\n --cb-muted: ${tokens.muted};\n --cb-primary: ${tokens.primary};\n --cb-primary-text: ${tokens.primaryText};\n --cb-code-bg: ${tokens.codeBg};\n --cb-code-text: ${tokens.codeText};\n `;\n}\n\nexport const ALT_BRAND_COLOR = '#6B5CE7';\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 { CLAUDE_CODE_ICON, COWORK_ICON, COPY_ICON, CHECK_ICON, CLOSE_ICON } from './icons';\nimport { resolveTheme, themeToCSS, BRAND_COLOR, 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 .cb-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: cb-fade-in 0.15s ease-out;\n }\n\n .cb-dialog {\n position: relative;\n width: 90%;\n max-width: 460px;\n background: var(--cb-surface);\n color: var(--cb-surface-text);\n border-radius: 16px;\n box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--cb-border);\n overflow: hidden;\n animation: cb-scale-in 0.2s ease-out;\n }\n\n .cb-dialog-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--cb-border);\n }\n\n .cb-dialog-header-icon {\n width: 36px;\n height: 36px;\n color: var(--cb-primary);\n flex-shrink: 0;\n }\n\n .cb-dialog-header-text {\n flex: 1;\n min-width: 0;\n }\n\n .cb-dialog-title {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--cb-surface-text);\n }\n\n .cb-dialog-description {\n font-size: 13px;\n color: var(--cb-muted);\n margin-top: 2px;\n line-height: 1.4;\n }\n\n .cb-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(--cb-muted);\n cursor: pointer;\n border-radius: 8px;\n flex-shrink: 0;\n transition: background 0.15s, color 0.15s;\n }\n\n .cb-dialog-close:hover {\n background: var(--cb-border);\n color: var(--cb-surface-text);\n }\n\n .cb-dialog-close svg { width: 14px; height: 14px; }\n\n .cb-dialog-body { padding: 20px 24px; }\n\n .cb-step {\n display: flex;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .cb-step:last-child { margin-bottom: 0; }\n\n .cb-step-num {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: var(--cb-primary);\n color: var(--cb-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 .cb-step-content {\n flex: 1;\n min-width: 0;\n }\n\n .cb-step-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--cb-surface-text);\n margin-bottom: 8px;\n line-height: 1.4;\n }\n\n .cb-code-block {\n display: flex;\n align-items: center;\n background: var(--cb-code-bg);\n color: var(--cb-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 .cb-code-text {\n flex: 1;\n overflow-x: auto;\n white-space: nowrap;\n padding: 10px 0;\n scrollbar-width: none;\n }\n\n .cb-code-text::-webkit-scrollbar { display: none; }\n\n .cb-code-prefix {\n color: var(--cb-muted);\n user-select: none;\n margin-right: 6px;\n }\n\n .cb-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(--cb-primary);\n color: var(--cb-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 .cb-copy-btn:hover { background: ${BRAND_COLOR_HOVER}; }\n .cb-copy-btn:active { transform: scale(0.96); }\n .cb-copy-btn svg { width: 14px; height: 14px; }\n\n .cb-copy-btn[data-copied=\"true\"] {\n background: #16a34a;\n }\n\n .cb-dialog-footer {\n padding: 16px 24px 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .cb-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(--cb-primary);\n color: var(--cb-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 .cb-action-btn:hover { background: ${BRAND_COLOR_HOVER}; }\n .cb-action-btn:active { transform: scale(0.98); }\n .cb-action-btn svg { width: 16px; height: 16px; }\n\n .cb-hint {\n font-size: 12px;\n color: var(--cb-muted);\n text-align: center;\n line-height: 1.4;\n }\n\n .cb-hint kbd {\n display: inline-block;\n padding: 1px 5px;\n font-family: inherit;\n font-size: 11px;\n background: var(--cb-border);\n border-radius: 4px;\n border: 1px solid var(--cb-border);\n }\n\n @keyframes cb-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes cb-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 .cb-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 .cb-dialog-header { padding: 16px 16px 12px; gap: 10px; }\n .cb-dialog-header-icon { width: 28px; height: 28px; }\n .cb-dialog-body { padding: 16px; }\n .cb-dialog-footer { padding: 12px 16px 16px; }\n\n .cb-step { gap: 10px; margin-bottom: 14px; }\n .cb-step-num { width: 22px; height: 22px; font-size: 11px; }\n .cb-step-label { font-size: 12px; margin-bottom: 6px; }\n\n .cb-code-block { font-size: 12px; padding: 2px 2px 2px 10px; border-radius: 8px; }\n .cb-copy-btn { height: 32px; padding: 0 10px; font-size: 11px; border-radius: 6px; }\n .cb-action-btn { height: 40px; font-size: 13px; border-radius: 8px; }\n .cb-hint { font-size: 11px; }\n }\n\n @media (max-width: 360px) {\n .cb-dialog { width: 100%; border-radius: 12px 12px 0 0; align-self: flex-end; }\n .cb-copy-btn span { display: none; }\n .cb-copy-btn { min-width: 32px; padding: 0 8px; }\n }\n\n @supports (padding: env(safe-area-inset-bottom)) {\n .cb-dialog-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }\n }\n`;\n\nexport class ClaudePopupDialog 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 === 'claude-code' ? CLAUDE_CODE_ICON : COWORK_ICON;\n\n const isClaudeCode = variant === 'claude-code';\n const displayCommand = fullCommand || command;\n\n this.shadowRoot.innerHTML = `\n <style>${POPUP_STYLES}</style>\n <div style=\"${themeToCSS(tokens)}\">\n <div class=\"cb-backdrop\" data-action=\"close\"></div>\n <div class=\"cb-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"cb-dialog-title\">\n <div class=\"cb-dialog-header\">\n <div class=\"cb-dialog-header-icon\">${icon}</div>\n <div class=\"cb-dialog-header-text\">\n <div class=\"cb-dialog-title\" id=\"cb-dialog-title\">${title}</div>\n ${description ? `<div class=\"cb-dialog-description\">${description}</div>` : ''}\n </div>\n <button class=\"cb-dialog-close\" data-action=\"close\" aria-label=\"Close\">${CLOSE_ICON}</button>\n </div>\n <div class=\"cb-dialog-body\">\n ${isClaudeCode ? this.renderClaudeCodeBody(displayCommand) : this.renderCoworkBody(command, skillUrl)}\n </div>\n <div class=\"cb-dialog-footer\">\n ${isClaudeCode ? `\n <div class=\"cb-hint\">Press <kbd>⌘</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your terminal to run</div>\n ` : `\n <div class=\"cb-hint\">Press <kbd>⌘</kbd>+<kbd>V</kbd> or <kbd>Ctrl</kbd>+<kbd>V</kbd> in your Cowork session to run</div>\n `}\n </div>\n </div>\n </div>\n `;\n\n this.setupListeners();\n this.setupSystemThemeWatch();\n }\n\n private renderClaudeCodeBody(command: string): string {\n return `\n <div class=\"cb-step\">\n <div class=\"cb-step-num\">1</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Copy this command to your clipboard</div>\n <div class=\"cb-code-block\">\n <div class=\"cb-code-text\"><span class=\"cb-code-prefix\">$</span>${this.escapeHtml(command)}</div>\n <button class=\"cb-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=\"cb-step\">\n <div class=\"cb-step-num\">2</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Paste and run in your terminal</div>\n </div>\n </div>\n `;\n }\n\n private renderCoworkBody(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=\"cb-step\">\n <div class=\"cb-step-num\">1</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Copy this prompt to your clipboard</div>\n <div class=\"cb-code-block\">\n <div class=\"cb-code-text\">${this.escapeHtml(fullPrompt)}</div>\n <button class=\"cb-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=\"cb-step\">\n <div class=\"cb-step-num\">2</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Paste into a Cowork session — Claude will fetch the skill and set it up for you</div>\n </div>\n </div>\n `;\n } else {\n steps += `\n <div class=\"cb-step\">\n <div class=\"cb-step-num\">1</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Copy this command to your clipboard</div>\n <div class=\"cb-code-block\">\n <div class=\"cb-code-text\">${this.escapeHtml(command)}</div>\n <button class=\"cb-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=\"cb-step\">\n <div class=\"cb-step-num\">2</div>\n <div class=\"cb-step-content\">\n <div class=\"cb-step-label\">Paste and send in your Cowork 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 const originalIcon = iconContainer.querySelector('.cb-icon-sm')?.outerHTML || '';\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('.cb-dialog') as HTMLElement;\n const backdrop = this.shadowRoot?.querySelector('.cb-backdrop') as HTMLElement;\n\n if (dialog) {\n dialog.style.animation = 'cb-scale-in 0.15s ease-in reverse';\n }\n if (backdrop) {\n backdrop.style.animation = 'cb-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('claude-popup-dialog')) {\n customElements.define('claude-popup-dialog', ClaudePopupDialog);\n}\n\nexport function showPopup(options: PopupOptions): ClaudePopupDialog {\n const popup = document.createElement('claude-popup-dialog') as ClaudePopupDialog;\n popup.options = options;\n document.body.appendChild(popup);\n return popup;\n}\n"],"mappings":"AAAO,IAAMA,EAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAiBnBC,EAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWdC,EAAY;AAAA;AAAA;AAAA,QAKZC,EAAa;AAAA;QASnB,IAAMC,EAAa;AAAA;QCxCnB,IAAMC,EAAc,UACdC,EAAoB,UACpBC,EAAqB,UAErBC,EAAwD,CACnE,QAAS,CACP,GAAIH,EACJ,KAAM,UACN,OAAQ,cACR,QAAS,UACT,YAAa,UACb,MAAO,UACP,QAASA,EACT,YAAa,UACb,OAAQ,UACR,SAAU,SACZ,EACA,cAAe,CACb,GAAI,UACJ,KAAM,UACN,OAAQ,cACR,QAAS,UACT,YAAa,UACb,MAAO,UACP,QAAS,UACT,YAAa,UACb,OAAQ,UACR,SAAU,SACZ,EACA,KAAM,CACJ,GAAI,UACJ,KAAM,UACN,OAAQ,UACR,QAAS,UACT,YAAa,UACb,MAAO,UACP,QAASA,EACT,YAAa,UACb,OAAQ,UACR,SAAU,SACZ,EACA,MAAO,CACL,GAAI,UACJ,KAAM,UACN,OAAQ,UACR,QAAS,UACT,YAAa,UACb,MAAO,UACP,QAASA,EACT,YAAa,UACb,OAAQ,UACR,SAAU,SACZ,CACF,EAEO,SAASI,EAAaC,EAA2B,CACtD,OAAIA,IAAU,SAAiBF,EAAOE,CAAK,EACvC,OAAO,OAAW,IAAoBF,EAAO,MAC1C,OAAO,WAAW,8BAA8B,EAAE,QACrDA,EAAO,KACPA,EAAO,KACb,CAEO,SAASG,EAAWC,EAA6B,CACtD,MAAO;AAAA,eACMA,EAAO,EAAE;AAAA,iBACPA,EAAO,IAAI;AAAA,mBACTA,EAAO,MAAM;AAAA,oBACZA,EAAO,OAAO;AAAA,yBACTA,EAAO,WAAW;AAAA,kBACzBA,EAAO,KAAK;AAAA,oBACVA,EAAO,OAAO;AAAA,yBACTA,EAAO,WAAW;AAAA,oBACvBA,EAAO,MAAM;AAAA,sBACXA,EAAO,QAAQ;AAAA,GAErC,CAIO,IAAMC,EAAY,CACvB,QAAS,CAAE,GAAI,WAAY,GAAI,SAAU,GAAI,UAAW,EACxD,KAAS,CAAE,GAAI,QAAY,GAAI,QAAU,GAAI,OAAQ,EACrD,OAAS,CAAE,GAAI,IAAY,GAAI,IAAU,GAAI,GAAI,CACnD,EAEaC,EAAW,CACtB,GAAI,CAAE,OAAQ,OAAQ,SAAU,UAAW,SAAU,WAAY,QAAS,YAAa,UAAW,WAAY,IAAK,WAAY,OAAQ,UAAW,EAClJ,GAAI,CAAE,OAAQ,SAAU,SAAU,WAAY,SAAU,WAAY,QAAS,SAAU,UAAW,YAAa,IAAK,SAAU,OAAQ,QAAS,EAC/I,GAAI,CAAE,OAAQ,OAAQ,SAAU,OAAQ,SAAU,WAAY,QAAS,YAAa,UAAW,SAAU,IAAK,WAAY,OAAQ,UAAW,CAC/I,ECxFA,IAAMC,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAmLgBC,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAiCfA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmE3CC,EAAN,cAAgC,WAAY,CAIjD,aAAc,CACZ,MAAM,EAHR,KAAQ,WAAkC,KAIxC,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,CACpC,CAEA,IAAI,QAAQC,EAAoB,CAC9B,KAAK,SAAWA,EAChB,KAAK,OAAO,CACd,CAEA,IAAI,SAAU,CACZ,OAAO,KAAK,QACd,CAEA,sBAAuB,CACrB,KAAK,aAAa,EAClB,KAAK,WAAa,IACpB,CAEQ,oBAAkC,CACxC,GAAM,CAAE,MAAAC,CAAM,EAAI,KAAK,SAEvB,GAAIA,IAAU,QAAUA,IAAU,QAAS,OAAOC,EAAaD,CAAK,EAEpE,IAAME,EAAc,OAAO,OAAW,KACjC,OAAO,WAAW,8BAA8B,EAAE,QAEvD,GAAIF,IAAU,SACZ,OAAOE,EAAcD,EAAa,MAAM,EAAIA,EAAa,OAAO,EAGlE,IAAME,EAAOD,EAAcD,EAAa,MAAM,EAAIA,EAAa,OAAO,EAChEG,EAAQH,EAAaD,CAAK,EAChC,MAAO,CACL,GAAGG,EACH,QAASC,EAAM,QACf,YAAaA,EAAM,WACrB,CACF,CAEQ,QAAS,CACf,GAAI,CAAC,KAAK,YAAc,CAAC,KAAK,SAAU,OAExC,GAAM,CAAE,QAAAC,EAAS,MAAAC,EAAO,YAAAC,EAAa,QAAAC,EAAS,YAAAC,EAAa,SAAAC,CAAS,EAAI,KAAK,SACvEC,EAAS,KAAK,mBAAmB,EACjCC,EAAOP,IAAY,cAAgBQ,EAAmBC,EAEtDC,EAAeV,IAAY,cAC3BW,EAAiBP,GAAeD,EAEtC,KAAK,WAAW,UAAY;AAAA,eACjBZ,CAAY;AAAA,oBACPqB,EAAWN,CAAM,CAAC;AAAA;AAAA;AAAA;AAAA,iDAIWC,CAAI;AAAA;AAAA,kEAEaN,CAAK;AAAA,gBACvDC,EAAc,sCAAsCA,CAAW,SAAW,EAAE;AAAA;AAAA,qFAEPW,CAAU;AAAA;AAAA;AAAA,cAGjFH,EAAe,KAAK,qBAAqBC,CAAc,EAAI,KAAK,iBAAiBR,EAASE,CAAQ,CAAC;AAAA;AAAA;AAAA,cAGnGK,EAAe;AAAA;AAAA,cAEb;AAAA;AAAA,aAEH;AAAA;AAAA;AAAA;AAAA,MAMT,KAAK,eAAe,EACpB,KAAK,sBAAsB,CAC7B,CAEQ,qBAAqBP,EAAyB,CACpD,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6EAMkE,KAAK,WAAWA,CAAO,CAAC;AAAA,2EAC1B,KAAK,WAAWA,CAAO,CAAC,KAAKW,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAW/G,CAEQ,iBAAiBX,EAAiBE,EAA2B,CACnE,IAAIU,EAAQ,GAEZ,GAAIV,EAAU,CACZ,IAAMW,EAAa,0BAA0BX,CAAQ,YAAYF,CAAO,GACxEY,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAM2B,KAAK,WAAWC,CAAU,CAAC;AAAA,6EACQ,KAAK,WAAWA,CAAU,CAAC,KAAKF,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAWlH,MACEC,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAM2B,KAAK,WAAWZ,CAAO,CAAC;AAAA,6EACW,KAAK,WAAWA,CAAO,CAAC,KAAKW,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAa/G,OAAOC,CACT,CAEQ,gBAAiB,CAClB,KAAK,aAEV,KAAK,WAAW,iBAAiB,QAAU,GAAM,CAC/C,IAAME,EAAU,EAAE,OAAuB,QAAQ,eAAe,EAChE,GAAI,CAACA,EAAQ,OAEb,IAAMC,EAASD,EAAO,QAAQ,OAE9B,GAAIC,IAAW,QACb,KAAK,MAAM,UACFA,IAAW,OAAQ,CAC5B,IAAMC,EAAMF,EAAO,QAAQ,SAAW,GACtC,KAAK,gBAAgBE,EAAKF,CAAM,CAClC,CACF,CAAC,EAED,KAAK,WAAW,iBAAiB,UAAY,GAAM,CAC5C,EAAoB,MAAQ,UAAU,KAAK,MAAM,CACxD,CAAC,EACH,CAEQ,uBAAwB,CAC9B,KAAK,aAAa,EAClB,KAAK,WAAa,KAElB,IAAMtB,EAAQ,KAAK,SAAS,MAE5B,GAAI,EADeA,IAAU,UAAYA,IAAU,WAAaA,IAAU,gBACvD,OAAO,OAAW,IAAa,OAElD,IAAMyB,EAAK,OAAO,WAAW,8BAA8B,EACrDC,EAAU,IAAM,KAAK,OAAO,EAClCD,EAAG,iBAAiB,SAAUC,CAAO,EACrC,KAAK,WAAa,IAAMD,EAAG,oBAAoB,SAAUC,CAAO,CAClE,CAEA,MAAc,gBAAgBlB,EAAiBmB,EAAqB,CAClE,GAAI,CACF,MAAM,UAAU,UAAU,UAAUnB,CAAO,EAC3C,IAAMoB,EAAQD,EAAO,cAAc,MAAM,EACnCE,EAAgBF,EAChBG,EAAeD,EAAc,cAAc,aAAa,GAAG,WAAa,GAE9EF,EAAO,aAAa,cAAe,MAAM,EACrCC,IAAOA,EAAM,YAAc,WAC/BC,EAAc,UAAY,GAAGE,CAAU,uBAEvC,KAAK,SAAS,SAASvB,CAAO,EAE9B,WAAW,IAAM,CACfmB,EAAO,aAAa,cAAe,OAAO,EAC1CE,EAAc,UAAY,GAAGV,CAAS,mBACxC,EAAG,GAAI,CACT,MAAQ,CACN,IAAMa,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,MAAQxB,EACjBwB,EAAS,MAAM,SAAW,QAC1BA,EAAS,MAAM,QAAU,IACzB,SAAS,KAAK,YAAYA,CAAQ,EAClCA,EAAS,OAAO,EAChB,SAAS,YAAY,MAAM,EAC3B,SAAS,KAAK,YAAYA,CAAQ,EAElC,KAAK,SAAS,SAASxB,CAAO,CAChC,CACF,CAEA,OAAQ,CACN,IAAMyB,EAAS,KAAK,YAAY,cAAc,YAAY,EACpDC,EAAW,KAAK,YAAY,cAAc,cAAc,EAE1DD,IACFA,EAAO,MAAM,UAAY,qCAEvBC,IACFA,EAAS,MAAM,UAAY,oCAG7B,WAAW,IAAM,CACf,KAAK,SAAS,UAAU,EACxB,KAAK,OAAO,CACd,EAAG,GAAG,CACR,CAEQ,WAAWC,EAAqB,CACtC,IAAMC,EAAM,SAAS,cAAc,KAAK,EACxC,OAAAA,EAAI,YAAcD,EACXC,EAAI,SACb,CAEQ,WAAWD,EAAqB,CACtC,OAAOA,EAAI,QAAQ,KAAM,QAAQ,EAAE,QAAQ,KAAM,OAAO,EAAE,QAAQ,KAAM,MAAM,EAAE,QAAQ,KAAM,MAAM,CACtG,CACF,EAEI,OAAO,eAAmB,KAAe,CAAC,eAAe,IAAI,qBAAqB,GACpF,eAAe,OAAO,sBAAuBrC,CAAiB,EAGzD,SAASuC,EAAUC,EAA0C,CAClE,IAAMC,EAAQ,SAAS,cAAc,qBAAqB,EAC1D,OAAAA,EAAM,QAAUD,EAChB,SAAS,KAAK,YAAYC,CAAK,EACxBA,CACT","names":["CLAUDE_CODE_ICON","COWORK_ICON","COPY_ICON","CHECK_ICON","CLOSE_ICON","BRAND_COLOR","BRAND_COLOR_HOVER","BRAND_COLOR_ACTIVE","themes","resolveTheme","theme","themeToCSS","tokens","SHAPE_MAP","SIZE_MAP","POPUP_STYLES","BRAND_COLOR_HOVER","ClaudePopupDialog","opts","theme","resolveTheme","prefersDark","base","brand","variant","title","description","command","fullCommand","skillUrl","tokens","icon","CLAUDE_CODE_ICON","COWORK_ICON","isClaudeCode","displayCommand","themeToCSS","CLOSE_ICON","COPY_ICON","steps","fullPrompt","target","action","cmd","mq","handler","button","label","iconContainer","originalIcon","CHECK_ICON","textarea","dialog","backdrop","str","div","showPopup","options","popup"]}
-263
dist/claude-code-button-R5QHJTGG.mjs
import{a as m,c as r,d as g,e as v,f,g as C,h as k,i as x,j as _}from"./chunk-OKZ3PPPH.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; }
.cb-btn {
display: inline-flex;
align-items: center;
gap: var(--cb-gap);
height: var(--cb-height);
min-height: 44px;
padding: var(--cb-padding);
border: 1.5px solid var(--cb-border);
background: var(--cb-bg);
color: var(--cb-text);
font-family: inherit;
font-size: var(--cb-font-size);
font-weight: 600;
line-height: 1;
border-radius: var(--cb-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) {
.cb-btn { min-height: unset; }
}
/* \u2500\u2500\u2500 FILLED \u2500\u2500\u2500 */
:host([data-variant="filled"][data-theme="branded"]) .cb-btn,
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${v};
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn:hover {
background: #5A4BD6;
box-shadow: 0 2px 8px rgba(107, 92, 231, 0.35);
}
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn:active {
background: #4F41C8;
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-btn {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-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"]) .cb-btn:active {
background: #1C1917;
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="light"]) .cb-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"]) .cb-btn:hover {
border-color: #D6D3D1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn:active {
background: #FAFAF9;
transform: scale(0.98);
}
/* \u2500\u2500\u2500 OUTLINE \u2500\u2500\u2500 */
:host([data-variant="outline"][data-theme="branded"]) .cb-btn {
background: transparent;
border-color: ${r};
color: ${r};
}
:host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {
background: rgba(212, 121, 92, 0.08);
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.15);
}
:host([data-variant="outline"][data-theme="branded"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn {
background: transparent;
border-color: #6B5CE7;
color: #6B5CE7;
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn:hover {
background: rgba(107, 92, 231, 0.08);
box-shadow: 0 2px 8px rgba(107, 92, 231, 0.15);
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn:active {
background: rgba(107, 92, 231, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn {
background: transparent;
border-color: #57534E;
color: #F5F0EB;
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${r};
background: rgba(212, 121, 92, 0.08);
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn {
background: transparent;
border-color: #D6D3D1;
color: #1C1917;
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${r};
background: rgba(212, 121, 92, 0.05);
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.1);
transform: scale(0.98);
}
/* \u2500\u2500\u2500 GHOST \u2500\u2500\u2500 */
:host([data-variant="ghost"]) .cb-btn {
background: transparent;
border-color: transparent;
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${r};
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {
background: rgba(212, 121, 92, 0.1);
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.16);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn {
color: #6B5CE7;
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn:hover {
background: rgba(107, 92, 231, 0.1);
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn:active {
background: rgba(107, 92, 231, 0.16);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn {
color: #F5F0EB;
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn:hover {
background: rgba(255, 255, 255, 0.06);
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn:active {
background: rgba(255, 255, 255, 0.1);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn {
color: #1C1917;
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn:active {
background: rgba(0, 0, 0, 0.08);
transform: scale(0.98);
}
/* \u2500\u2500\u2500 FOCUS \u2500\u2500\u2500 */
.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${r});
outline-offset: 2px;
}
/* \u2500\u2500\u2500 ICON \u2500\u2500\u2500 */
.cb-btn-icon {
width: var(--cb-icon-size);
height: var(--cb-icon-size);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cb-btn-icon svg { width: 100%; height: 100%; }
:host([data-variant="filled"][data-theme="branded"]) .cb-btn-icon,
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn-icon {
color: #FFFFFF;
--cb-icon-accent: rgba(255,255,255,0.2);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${r});
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${r});
}
:host([data-variant="outline"]) .cb-btn-icon,
:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${r});
}
/* \u2500\u2500\u2500 LABEL \u2500\u2500\u2500 */
.cb-btn-label {
letter-spacing: -0.01em;
}
`,h=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"),c=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"),c!==null&&(this._options.popupTitle=c),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 Claude Code: ${e}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let t=this.querySelector("a[data-cb-crawl]");t||(t=document.createElement("a"),t.setAttribute("data-cb-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://claude.ai/code?command=${encodeURIComponent(a)}`,t.textContent=`Run on Claude Code: ${e}`,t.setAttribute("data-platform","claude-code"),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:`claude -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=x[n],c=k[s][n];this.setAttribute("data-theme",a),this.setAttribute("data-variant",t);let b=t!=="filled"?"transparent":o.bg,w=t==="ghost"?"transparent":t==="outline"?o.primary:o.border,y=t!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${E}</style>
<button
class="cb-btn"
type="button"
style="
${C(o)}
--cb-bg: ${b};
--cb-border: ${w};
--cb-text: ${y};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${i.height};
--cb-font-size: ${i.fontSize};
--cb-icon-size: ${i.iconSize};
--cb-padding: ${i.ccPadding};
--cb-gap: ${i.gap};
--cb-radius: ${c};
"
aria-label="Run on Claude Code: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${m}</span>
<span class="cb-btn-label">Run on Claude Code</span>
</button>
`;let u=this.shadowRoot.querySelector(".cb-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,popupTitle:t,popupDescription:o}=this._options,n=this.getFullCommand();if(this.dispatchEvent(new CustomEvent("cb-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("cb-copy",{bubbles:!0,composed:!0,detail:{command:n}}))});return}_({variant:"claude-code",theme:this.getResolvedTheme(),title:t||"Run on Claude Code",description:o||"Execute this command in your terminal to get started.",command:a,fullCommand:n,onCopy:s=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:s}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-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)}};h.observedAttributes=["command","theme","size","variant","shape","popup","prompt-flag","popup-title","popup-description"];function A(d="claude-code-button"){typeof customElements>"u"||customElements.get(d)||customElements.define(d,h)}A();function O(d){let l=document.createElement("claude-code-button");return l.options=d,l}export{h as ClaudeCodeButton,O as createClaudeCodeButton,A as registerClaudeCodeButton};
//# sourceMappingURL=claude-code-button-R5QHJTGG.mjs.map
-1
dist/claude-code-button-R5QHJTGG.mjs.map
{"version":3,"sources":["../src/claude-code-button.ts"],"sourcesContent":["import type { ClaudeCodeButtonOptions, Theme, Size, Variant, Shape } from './types';\nimport { CLAUDE_CODE_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 .cb-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--cb-gap);\n height: var(--cb-height);\n min-height: 44px;\n padding: var(--cb-padding);\n border: 1.5px solid var(--cb-border);\n background: var(--cb-bg);\n color: var(--cb-text);\n font-family: inherit;\n font-size: var(--cb-font-size);\n font-weight: 600;\n line-height: 1;\n border-radius: var(--cb-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 .cb-btn { min-height: unset; }\n }\n\n /* ─── FILLED ─── */\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: ${BRAND_COLOR_HOVER};\n box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn:active {\n background: ${BRAND_COLOR_ACTIVE};\n transform: scale(0.98);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: #5A4BD6;\n box-shadow: 0 2px 8px rgba(107, 92, 231, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: #4F41C8;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-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\"]) .cb-btn:active {\n background: #1C1917;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .cb-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\"]) .cb-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\"]) .cb-btn:active {\n background: #FAFAF9;\n transform: scale(0.98);\n }\n\n /* ─── OUTLINE ─── */\n\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn {\n background: transparent;\n border-color: ${BRAND_COLOR};\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: rgba(212, 121, 92, 0.08);\n box-shadow: 0 2px 8px rgba(212, 121, 92, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn {\n background: transparent;\n border-color: #6B5CE7;\n color: #6B5CE7;\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: rgba(107, 92, 231, 0.08);\n box-shadow: 0 2px 8px rgba(107, 92, 231, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: rgba(107, 92, 231, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn {\n background: transparent;\n border-color: #57534E;\n color: #F5F0EB;\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(212, 121, 92, 0.08);\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn {\n background: transparent;\n border-color: #D6D3D1;\n color: #1C1917;\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(212, 121, 92, 0.05);\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.1);\n transform: scale(0.98);\n }\n\n /* ─── GHOST ─── */\n\n :host([data-variant=\"ghost\"]) .cb-btn {\n background: transparent;\n border-color: transparent;\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn {\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: rgba(212, 121, 92, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn {\n color: #6B5CE7;\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: rgba(107, 92, 231, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: rgba(107, 92, 231, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-btn {\n color: #F5F0EB;\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-btn:hover {\n background: rgba(255, 255, 255, 0.06);\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-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\"]) .cb-btn {\n color: #1C1917;\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .cb-btn:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .cb-btn:active {\n background: rgba(0, 0, 0, 0.08);\n transform: scale(0.98);\n }\n\n /* ─── FOCUS ─── */\n\n .cb-btn:focus-visible {\n outline: 2px solid var(--cb-focus-color, ${BRAND_COLOR});\n outline-offset: 2px;\n }\n\n /* ─── ICON ─── */\n\n .cb-btn-icon {\n width: var(--cb-icon-size);\n height: var(--cb-icon-size);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .cb-btn-icon svg { width: 100%; height: 100%; }\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn-icon,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn-icon {\n color: #FFFFFF;\n --cb-icon-accent: rgba(255,255,255,0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n }\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n }\n\n :host([data-variant=\"outline\"]) .cb-btn-icon,\n :host([data-variant=\"ghost\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n }\n\n /* ─── LABEL ─── */\n\n .cb-btn-label {\n letter-spacing: -0.01em;\n }\n`;\n\nexport class ClaudeCodeButton extends HTMLElement {\n static observedAttributes = ['command', 'theme', 'size', 'variant', 'shape', 'popup', 'prompt-flag', 'popup-title', 'popup-description'];\n\n private _options: ClaudeCodeButtonOptions = {\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<ClaudeCodeButtonOptions>) {\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 Claude Code: ${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-cb-crawl]') as HTMLAnchorElement | null;\n if (!link) {\n link = document.createElement('a');\n link.setAttribute('data-cb-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://claude.ai/code?command=${encodeURIComponent(fullCommand)}`;\n link.textContent = `Run on Claude Code: ${command}`;\n link.setAttribute('data-platform', 'claude-code');\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 `claude -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=\"cb-btn\"\n type=\"button\"\n style=\"\n ${themeToCSS(tokens)}\n --cb-bg: ${bgOverride};\n --cb-border: ${borderOverride};\n --cb-text: ${textOverride};\n --cb-accent-color: ${tokens.primary};\n --cb-focus-color: ${tokens.primary};\n --cb-height: ${sizeTokens.height};\n --cb-font-size: ${sizeTokens.fontSize};\n --cb-icon-size: ${sizeTokens.iconSize};\n --cb-padding: ${sizeTokens.ccPadding};\n --cb-gap: ${sizeTokens.gap};\n --cb-radius: ${radius};\n \"\n aria-label=\"Run on Claude Code: ${this._options.command.replace(/\"/g, '&quot;')}\"\n >\n <span class=\"cb-btn-icon\" aria-hidden=\"true\">${CLAUDE_CODE_ICON}</span>\n <span class=\"cb-btn-label\">Run on Claude Code</span>\n </button>\n `;\n\n const btn = this.shadowRoot.querySelector('.cb-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('cb-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('cb-copy', {\n bubbles: true,\n composed: true,\n detail: { command: fullCommand },\n }));\n });\n return;\n }\n\n showPopup({\n variant: 'claude-code',\n theme: this.getResolvedTheme(),\n title: popupTitle || 'Run on Claude Code',\n description: popupDescription || 'Execute this command in your terminal to get started.',\n command,\n fullCommand,\n onCopy: (cmd) => {\n this._options.onCopy?.(cmd);\n this.dispatchEvent(new CustomEvent('cb-copy', {\n bubbles: true,\n composed: true,\n detail: { command: cmd },\n }));\n },\n onClose: () => {\n this.dispatchEvent(new CustomEvent('cb-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 registerClaudeCodeButton(tagName = 'claude-code-button') {\n if (typeof customElements === 'undefined') return;\n if (!customElements.get(tagName)) {\n customElements.define(tagName, ClaudeCodeButton);\n }\n}\n\nregisterClaudeCodeButton();\n\nexport function createClaudeCodeButton(options: ClaudeCodeButtonOptions): ClaudeCodeButton {\n const el = document.createElement('claude-code-button') as ClaudeCodeButton;\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","ClaudeCodeButton","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","CLAUDE_CODE_ICON","btn","e","showPopup","cmd","mq","handler","registerClaudeCodeButton","tagName","createClaudeCodeButton","options","el"]}
-265
dist/cowork-button-TYGZL33F.mjs
import{b as m,c as n,d as g,e as v,f,g as k,h as w,i as C,j as x}from"./chunk-OKZ3PPPH.mjs";var A=`
: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; }
.cb-btn {
display: inline-flex;
align-items: center;
gap: var(--cb-gap);
height: var(--cb-height);
min-height: 44px;
padding: var(--cb-padding);
border: 1.5px solid var(--cb-border);
background: var(--cb-bg);
color: var(--cb-text);
font-family: inherit;
font-size: var(--cb-font-size);
font-weight: 600;
line-height: 1;
border-radius: var(--cb-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) {
.cb-btn { min-height: unset; }
}
/* \u2500\u2500\u2500 FILLED \u2500\u2500\u2500 */
:host([data-variant="filled"][data-theme="branded"]) .cb-btn,
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:hover {
background: ${g};
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);
}
:host([data-variant="filled"][data-theme="branded"]) .cb-btn:active {
background: ${v};
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn:hover {
background: #5A4BD6;
box-shadow: 0 2px 8px rgba(107, 92, 231, 0.35);
}
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn:active {
background: #4F41C8;
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-btn {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-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"]) .cb-btn:active {
background: #1C1917;
transform: scale(0.98);
}
:host([data-variant="filled"][data-theme="light"]) .cb-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"]) .cb-btn:hover {
border-color: #D6D3D1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn:active {
background: #FAFAF9;
transform: scale(0.98);
}
/* \u2500\u2500\u2500 OUTLINE \u2500\u2500\u2500 */
:host([data-variant="outline"][data-theme="branded"]) .cb-btn {
background: transparent;
border-color: ${n};
color: ${n};
}
:host([data-variant="outline"][data-theme="branded"]) .cb-btn:hover {
background: rgba(212, 121, 92, 0.08);
box-shadow: 0 2px 8px rgba(212, 121, 92, 0.15);
}
:host([data-variant="outline"][data-theme="branded"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn {
background: transparent;
border-color: #6B5CE7;
color: #6B5CE7;
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn:hover {
background: rgba(107, 92, 231, 0.08);
box-shadow: 0 2px 8px rgba(107, 92, 231, 0.15);
}
:host([data-variant="outline"][data-theme="branded-alt"]) .cb-btn:active {
background: rgba(107, 92, 231, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn {
background: transparent;
border-color: #57534E;
color: #F5F0EB;
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn:hover {
border-color: ${n};
background: rgba(212, 121, 92, 0.08);
}
:host([data-variant="outline"][data-theme="dark"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.14);
transform: scale(0.98);
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn {
background: transparent;
border-color: #D6D3D1;
color: #1C1917;
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn:hover {
border-color: ${n};
background: rgba(212, 121, 92, 0.05);
}
:host([data-variant="outline"][data-theme="light"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.1);
transform: scale(0.98);
}
/* \u2500\u2500\u2500 GHOST \u2500\u2500\u2500 */
:host([data-variant="ghost"]) .cb-btn {
background: transparent;
border-color: transparent;
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn {
color: ${n};
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn:hover {
background: rgba(212, 121, 92, 0.1);
}
:host([data-variant="ghost"][data-theme="branded"]) .cb-btn:active {
background: rgba(212, 121, 92, 0.16);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn {
color: #6B5CE7;
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn:hover {
background: rgba(107, 92, 231, 0.1);
}
:host([data-variant="ghost"][data-theme="branded-alt"]) .cb-btn:active {
background: rgba(107, 92, 231, 0.16);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn {
color: #F5F0EB;
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn:hover {
background: rgba(255, 255, 255, 0.06);
}
:host([data-variant="ghost"][data-theme="dark"]) .cb-btn:active {
background: rgba(255, 255, 255, 0.1);
transform: scale(0.98);
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn {
color: #1C1917;
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
:host([data-variant="ghost"][data-theme="light"]) .cb-btn:active {
background: rgba(0, 0, 0, 0.08);
transform: scale(0.98);
}
/* \u2500\u2500\u2500 FOCUS \u2500\u2500\u2500 */
.cb-btn:focus-visible {
outline: 2px solid var(--cb-focus-color, ${n});
outline-offset: 2px;
}
/* \u2500\u2500\u2500 ICON \u2500\u2500\u2500 */
.cb-btn-icon {
width: var(--cb-icon-size);
height: var(--cb-icon-size);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cb-btn-icon svg { width: 100%; height: 100%; }
:host([data-variant="filled"][data-theme="branded"]) .cb-btn-icon,
:host([data-variant="filled"][data-theme="branded-alt"]) .cb-btn-icon {
color: #FFFFFF;
--cb-icon-accent: rgba(255,255,255,0.2);
}
:host([data-variant="filled"][data-theme="dark"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
--cb-icon-accent: #1C1917;
}
:host([data-variant="filled"][data-theme="light"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
--cb-icon-accent: #FFFFFF;
}
:host([data-variant="outline"]) .cb-btn-icon,
:host([data-variant="ghost"]) .cb-btn-icon {
color: var(--cb-accent-color, ${n});
}
/* \u2500\u2500\u2500 LABEL \u2500\u2500\u2500 */
.cb-btn-label {
letter-spacing: -0.01em;
}
`,h=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"),c=this.getAttribute("popup-title"),b=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"),c!==null&&(this._options.popupTitle=c),b!==null&&(this._options.popupDescription=b)}updateLightDOM(){let{command:e,skillUrl:a}=this._options;this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",`Run on Cowork: ${e}`),this._options.popup!==!1?this.setAttribute("aria-haspopup","dialog"):this.removeAttribute("aria-haspopup");let t=this.querySelector("a[data-cb-crawl]");t||(t=document.createElement("a"),t.setAttribute("data-cb-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 Cowork: ${e}`,t.setAttribute("data-platform","cowork"),t.setAttribute("data-command",e),a?(t.href=a,t.setAttribute("data-skill-url",a)):(t.href=`https://claude.ai/cowork?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=C[i],c=w[s][i];this.setAttribute("data-theme",a),this.setAttribute("data-variant",t);let b=t!=="filled"?"transparent":o.bg,y=t==="ghost"?"transparent":t==="outline"?o.primary:o.border,_=t!=="filled"?o.primary:o.text;this.shadowRoot.innerHTML=`
<style>${A}</style>
<button
class="cb-btn"
type="button"
style="
${k(o)}
--cb-bg: ${b};
--cb-border: ${y};
--cb-text: ${_};
--cb-accent-color: ${o.primary};
--cb-focus-color: ${o.primary};
--cb-height: ${r.height};
--cb-font-size: ${r.fontSize};
--cb-icon-size: ${r.iconSize};
--cb-padding: ${r.padding};
--cb-gap: ${r.gap};
--cb-radius: ${c};
"
aria-label="Run on Cowork: ${this._options.command.replace(/"/g,"&quot;")}"
>
<span class="cb-btn-icon" aria-hidden="true">${m}</span>
<span class="cb-btn-label">Run on Cowork</span>
</button>
`;let u=this.shadowRoot.querySelector(".cb-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("cb-open",{bubbles:!0,composed:!0,detail:{command:a}})),e===!1){navigator.clipboard.writeText(a).then(()=>{this._options.onCopy?.(a),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:a}}))});return}x({variant:"cowork",theme:this.getResolvedTheme(),title:o||"Run on Cowork",description:i||"Copy and paste into a Cowork session to get started.",command:a,skillUrl:t,onCopy:s=>{this._options.onCopy?.(s),this.dispatchEvent(new CustomEvent("cb-copy",{bubbles:!0,composed:!0,detail:{command:s}}))},onClose:()=>{this.dispatchEvent(new CustomEvent("cb-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)}};h.observedAttributes=["command","skill-url","theme","size","variant","shape","popup","popup-title","popup-description"];function E(d="cowork-button"){typeof customElements>"u"||customElements.get(d)||customElements.define(d,h)}E();function O(d){let l=document.createElement("cowork-button");return l.options=d,l}export{h as CoworkButton,O as createCoworkButton,E as registerCoworkButton};
//# sourceMappingURL=cowork-button-TYGZL33F.mjs.map
-1
dist/cowork-button-TYGZL33F.mjs.map
{"version":3,"sources":["../src/cowork-button.ts"],"sourcesContent":["import type { CoworkButtonOptions, Theme, Size, Variant, Shape } from './types';\nimport { COWORK_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 .cb-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--cb-gap);\n height: var(--cb-height);\n min-height: 44px;\n padding: var(--cb-padding);\n border: 1.5px solid var(--cb-border);\n background: var(--cb-bg);\n color: var(--cb-text);\n font-family: inherit;\n font-size: var(--cb-font-size);\n font-weight: 600;\n line-height: 1;\n border-radius: var(--cb-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 .cb-btn { min-height: unset; }\n }\n\n /* ─── FILLED ─── */\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: ${BRAND_COLOR_HOVER};\n box-shadow: 0 2px 8px rgba(212, 121, 92, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn:active {\n background: ${BRAND_COLOR_ACTIVE};\n transform: scale(0.98);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: #5A4BD6;\n box-shadow: 0 2px 8px rgba(107, 92, 231, 0.35);\n }\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: #4F41C8;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-btn {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-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\"]) .cb-btn:active {\n background: #1C1917;\n transform: scale(0.98);\n }\n\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .cb-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\"]) .cb-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\"]) .cb-btn:active {\n background: #FAFAF9;\n transform: scale(0.98);\n }\n\n /* ─── OUTLINE ─── */\n\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn {\n background: transparent;\n border-color: ${BRAND_COLOR};\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: rgba(212, 121, 92, 0.08);\n box-shadow: 0 2px 8px rgba(212, 121, 92, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn {\n background: transparent;\n border-color: #6B5CE7;\n color: #6B5CE7;\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: rgba(107, 92, 231, 0.08);\n box-shadow: 0 2px 8px rgba(107, 92, 231, 0.15);\n }\n :host([data-variant=\"outline\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: rgba(107, 92, 231, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn {\n background: transparent;\n border-color: #57534E;\n color: #F5F0EB;\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(212, 121, 92, 0.08);\n }\n :host([data-variant=\"outline\"][data-theme=\"dark\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.14);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn {\n background: transparent;\n border-color: #D6D3D1;\n color: #1C1917;\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn:hover {\n border-color: ${BRAND_COLOR};\n background: rgba(212, 121, 92, 0.05);\n }\n :host([data-variant=\"outline\"][data-theme=\"light\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.1);\n transform: scale(0.98);\n }\n\n /* ─── GHOST ─── */\n\n :host([data-variant=\"ghost\"]) .cb-btn {\n background: transparent;\n border-color: transparent;\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn {\n color: ${BRAND_COLOR};\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn:hover {\n background: rgba(212, 121, 92, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded\"]) .cb-btn:active {\n background: rgba(212, 121, 92, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn {\n color: #6B5CE7;\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn:hover {\n background: rgba(107, 92, 231, 0.1);\n }\n :host([data-variant=\"ghost\"][data-theme=\"branded-alt\"]) .cb-btn:active {\n background: rgba(107, 92, 231, 0.16);\n transform: scale(0.98);\n }\n\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-btn {\n color: #F5F0EB;\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-btn:hover {\n background: rgba(255, 255, 255, 0.06);\n }\n :host([data-variant=\"ghost\"][data-theme=\"dark\"]) .cb-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\"]) .cb-btn {\n color: #1C1917;\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .cb-btn:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n :host([data-variant=\"ghost\"][data-theme=\"light\"]) .cb-btn:active {\n background: rgba(0, 0, 0, 0.08);\n transform: scale(0.98);\n }\n\n /* ─── FOCUS ─── */\n\n .cb-btn:focus-visible {\n outline: 2px solid var(--cb-focus-color, ${BRAND_COLOR});\n outline-offset: 2px;\n }\n\n /* ─── ICON ─── */\n\n .cb-btn-icon {\n width: var(--cb-icon-size);\n height: var(--cb-icon-size);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .cb-btn-icon svg { width: 100%; height: 100%; }\n\n :host([data-variant=\"filled\"][data-theme=\"branded\"]) .cb-btn-icon,\n :host([data-variant=\"filled\"][data-theme=\"branded-alt\"]) .cb-btn-icon {\n color: #FFFFFF;\n --cb-icon-accent: rgba(255,255,255,0.2);\n }\n :host([data-variant=\"filled\"][data-theme=\"dark\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n --cb-icon-accent: #1C1917;\n }\n :host([data-variant=\"filled\"][data-theme=\"light\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n --cb-icon-accent: #FFFFFF;\n }\n\n :host([data-variant=\"outline\"]) .cb-btn-icon,\n :host([data-variant=\"ghost\"]) .cb-btn-icon {\n color: var(--cb-accent-color, ${BRAND_COLOR});\n }\n\n /* ─── LABEL ─── */\n\n .cb-btn-label {\n letter-spacing: -0.01em;\n }\n`;\n\nexport class CoworkButton extends HTMLElement {\n static observedAttributes = ['command', 'skill-url', 'theme', 'size', 'variant', 'shape', 'popup', 'popup-title', 'popup-description'];\n\n private _options: CoworkButtonOptions = {\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<CoworkButtonOptions>) {\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 Cowork: ${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-cb-crawl]') as HTMLAnchorElement | null;\n if (!link) {\n link = document.createElement('a');\n link.setAttribute('data-cb-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 Cowork: ${command}`;\n link.setAttribute('data-platform', 'cowork');\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://claude.ai/cowork?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=\"cb-btn\"\n type=\"button\"\n style=\"\n ${themeToCSS(tokens)}\n --cb-bg: ${bgOverride};\n --cb-border: ${borderOverride};\n --cb-text: ${textOverride};\n --cb-accent-color: ${tokens.primary};\n --cb-focus-color: ${tokens.primary};\n --cb-height: ${sizeTokens.height};\n --cb-font-size: ${sizeTokens.fontSize};\n --cb-icon-size: ${sizeTokens.iconSize};\n --cb-padding: ${sizeTokens.padding};\n --cb-gap: ${sizeTokens.gap};\n --cb-radius: ${radius};\n \"\n aria-label=\"Run on Cowork: ${this._options.command.replace(/\"/g, '&quot;')}\"\n >\n <span class=\"cb-btn-icon\" aria-hidden=\"true\">${COWORK_ICON}</span>\n <span class=\"cb-btn-label\">Run on Cowork</span>\n </button>\n `;\n\n const btn = this.shadowRoot.querySelector('.cb-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('cb-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('cb-copy', {\n bubbles: true,\n composed: true,\n detail: { command },\n }));\n });\n return;\n }\n\n showPopup({\n variant: 'cowork',\n theme: this.getResolvedTheme(),\n title: popupTitle || 'Run on Cowork',\n description: popupDescription || 'Copy and paste into a Cowork session to get started.',\n command,\n skillUrl,\n onCopy: (cmd) => {\n this._options.onCopy?.(cmd);\n this.dispatchEvent(new CustomEvent('cb-copy', {\n bubbles: true,\n composed: true,\n detail: { command: cmd },\n }));\n },\n onClose: () => {\n this.dispatchEvent(new CustomEvent('cb-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 registerCoworkButton(tagName = 'cowork-button') {\n if (typeof customElements === 'undefined') return;\n if (!customElements.get(tagName)) {\n customElements.define(tagName, CoworkButton);\n }\n}\n\nregisterCoworkButton();\n\nexport function createCoworkButton(options: CoworkButtonOptions): CoworkButton {\n const el = document.createElement('cowork-button') as CoworkButton;\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","CoworkButton","opts","command","skillUrl","theme","size","variant","shape","popup","popupTitle","popupDescription","link","resolvedTheme","tokens","resolveTheme","sizeTokens","SIZE_MAP","radius","SHAPE_MAP","bgOverride","borderOverride","textOverride","themeToCSS","COWORK_ICON","btn","e","showPopup","cmd","mq","handler","registerCoworkButton","tagName","createCoworkButton","options","el"]}
dist/index.global.js.map

Sorry, the diff of this file is too big to display

dist/index.js.map

Sorry, the diff of this file is too big to display

dist/index.mjs.map

Sorry, the diff of this file is too big to display

dist/react.js.map

Sorry, the diff of this file is too big to display

dist/vue.js.map

Sorry, the diff of this file is too big to display

dist/vue.mjs.map

Sorry, the diff of this file is too big to display