@sakana-y/vue-grab 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sakana
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/composables/index.d.ts

@@ -0,0 +1,12 @@
+import { DeepReadonly, Ref } from 'vue';
+import { GrabConfig, GrabResult } from '@sakana-y/vue-grab-shared';
+export interface UseGrabReturn {
+    config: GrabConfig;
+    isActive: Readonly<Ref<boolean>>;
+    lastResult: DeepReadonly<Ref<GrabResult | null>>;
+    activate: () => void;
+    deactivate: () => void;
+    toggle: () => void;
+}
+export declare function useGrab(): UseGrabReturn;
+//# sourceMappingURL=index.d.ts.map

package/dist/composables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,YAAY,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AACtF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAKxE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACjC,UAAU,EAAE,YAAY,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,OAAO,IAAI,aAAa,CA+BvC"}

package/dist/core/index.d.ts

@@ -0,0 +1,27 @@
+import { GrabConfig, GrabResult } from '@sakana-y/vue-grab-shared';
+export declare class GrabEngine {
+    private config;
+    private overlay;
+    private callbacks;
+    private stateListeners;
+    private _isActive;
+    private prevCursor;
+    private handleMouseMove;
+    private handleClick;
+    private handleKeyDown;
+    constructor(config: GrabConfig);
+    get isActive(): boolean;
+    activate(): void;
+    deactivate(): void;
+    onGrab(cb: (result: GrabResult) => void): () => void;
+    onStateChange(cb: (active: boolean) => void): () => void;
+    toggle(): void;
+    destroy(): void;
+    updateConfig(config: Partial<GrabConfig>): void;
+    private shouldIgnore;
+    private getVueComponent;
+    private getComponentLabelFromInstance;
+    private getComponentStack;
+    private generateSelector;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAevF,qBAAa,UAAU;IACrB,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,SAAS,CAAgD;IACjE,OAAO,CAAC,cAAc,CAA6C;IACnE,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAM;IAGxB,OAAO,CAAC,eAAe,CAA0C;IACjE,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,aAAa,CAA6C;gBAEtD,MAAM,EAAE,UAAU;IAI9B,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,QAAQ,IAAI,IAAI;IAyDhB,UAAU,IAAI,IAAI;IAsBlB,MAAM,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,GAAG,MAAM,IAAI;IAKpD,aAAa,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI;IAKxD,MAAM,IAAI,IAAI;IAKd,OAAO,IAAI,IAAI;IAMf,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IA8BpB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,6BAA6B;IAQrC,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,gBAAgB;CA8BzB"}

package/dist/floating-button/index.d.ts

@@ -0,0 +1,58 @@
+import { FloatingButtonConfig } from '@sakana-y/vue-grab-shared';
+export declare const FAB_HOST_ID = "vue-grab-fab-host";
+export declare class FloatingButton {
+    private host;
+    private shadowRoot;
+    private toolbarEl;
+    private btnEl;
+    private gearEl;
+    private panelEl;
+    private kbdEl;
+    private recordBtn;
+    private config;
+    private posX;
+    private posY;
+    private isDragging;
+    private wasDragged;
+    private dragPointerId;
+    private dragStartX;
+    private dragStartY;
+    private dragOffsetX;
+    private dragOffsetY;
+    private panelOpen;
+    private isRecording;
+    private currentHotkey;
+    private toggleCb;
+    private hotkeyChangeCb;
+    private boundPointerDown;
+    private boundPointerMove;
+    private boundPointerUp;
+    private boundDocClick;
+    private boundDocKeyDown;
+    private boundRecordKeyDown;
+    constructor(config: FloatingButtonConfig);
+    getCurrentHotkey(): string;
+    mount(): void;
+    destroy(): void;
+    setActive(active: boolean): void;
+    setHighlightColor(color: string): void;
+    setCurrentHotkey(combo: string): void;
+    onToggle(cb: () => void): void;
+    onHotkeyChange(cb: (combo: string) => void): void;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private snapToEdge;
+    private applyPosition;
+    private getEdgeFromPosition;
+    private applyOrientation;
+    private togglePanel;
+    private openPanel;
+    private closePanel;
+    private positionPanel;
+    private toggleRecording;
+    private startRecording;
+    private stopRecording;
+    private updateHotkeyDisplay;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/floating-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/floating-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAoO/C,qBAAa,cAAc;IACzB,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,MAAM,CAAuB;IAGrC,OAAO,CAAC,IAAI,CAAM;IAClB,OAAO,CAAC,IAAI,CAAM;IAGlB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAK;IAGxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,aAAa,CAAM;IAG3B,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,cAAc,CAA0C;IAGhE,OAAO,CAAC,gBAAgB,CAA4C;IACpE,OAAO,CAAC,gBAAgB,CAA4C;IACpE,OAAO,CAAC,cAAc,CAA4C;IAClE,OAAO,CAAC,aAAa,CAA0C;IAC/D,OAAO,CAAC,eAAe,CAA6C;IACpE,OAAO,CAAC,kBAAkB,CAA6C;gBAE3D,MAAM,EAAE,oBAAoB;IAiBxC,gBAAgB,IAAI,MAAM;IAI1B,KAAK,IAAI,IAAI;IAoIb,OAAO,IAAI,IAAI;IAuBf,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAShC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAItC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKrC,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAI9B,cAAc,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;IAMjD,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,mBAAmB;CAI5B"}

package/dist/hotkeys/index.d.ts

@@ -0,0 +1,7 @@
+export declare function buildCombo(e: KeyboardEvent): string;
+export declare class HotkeyManager {
+    private cleanups;
+    register(combo: string, callback: () => void): void;
+    destroy(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/hotkeys/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hotkeys/index.ts"],"names":[],"mappings":"AAmBA,wBAAgB,UAAU,CAAC,CAAC,EAAE,aAAa,GAAG,MAAM,CASnD;AAED,qBAAa,aAAa;IACxB,OAAO,CAAC,QAAQ,CAAsB;IAEtC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAoBnD,OAAO,IAAI,IAAI;CAIhB"}

package/dist/index.cjs

@@ -0,0 +1,197 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`);var t=`#4f46e5`,n=`#ffffff`,r=`Alt+Shift+G`,i={highlightColor:t,labelTextColor:n,showTagHint:!0,maxHtmlLength:1e4,filter:{ignoreSelectors:[],ignoreTags:[],skipCommonComponents:!1},floatingButton:{enabled:!1,initialPosition:`top-center`,storageKey:`vue-grab-fab-pos`,hotkeyStorageKey:`vue-grab-hotkey`}};function a(e,t){let{filter:n,floatingButton:r,...i}=t;return{...e,...i,filter:{...e.filter,...n},floatingButton:{...e.floatingButton,...r}}}var o=Symbol(`vue-grab-config`);function s(e={}){let t=a(i,e);return{install(e){e.provide(o,t)}}}var c=`vue-grab-overlay-host`,l=class{host=null;shadowRoot=null;highlightBox=null;labelEl=null;config;constructor(e){this.config=e}mount(){if(this.host)return;this.host=document.createElement(`div`),this.host.id=c,this.host.style.cssText=`position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;`,document.body.appendChild(this.host),this.shadowRoot=this.host.attachShadow({mode:`open`}),this.host.style.setProperty(`--grab-color`,this.config.highlightColor),this.host.style.setProperty(`--grab-label-color`,this.config.labelTextColor);let e=document.createElement(`style`);e.textContent=`
+      .grab-highlight {
+        position: fixed;
+        pointer-events: none;
+        border: 2px solid var(--grab-color);
+        background: color-mix(in srgb, var(--grab-color) 12%, transparent);
+        border-radius: 2px;
+        transition: all 0.05s ease-out;
+        display: none;
+        box-sizing: border-box;
+      }
+      .grab-label {
+        position: fixed;
+        pointer-events: none;
+        background: var(--grab-color);
+        color: var(--grab-label-color);
+        font-size: 11px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        padding: 2px 6px;
+        border-radius: 2px;
+        white-space: nowrap;
+        display: none;
+        line-height: 1.4;
+      }
+    `,this.shadowRoot.appendChild(e),this.highlightBox=document.createElement(`div`),this.highlightBox.className=`grab-highlight`,this.shadowRoot.appendChild(this.highlightBox),this.labelEl=document.createElement(`div`),this.labelEl.className=`grab-label`,this.shadowRoot.appendChild(this.labelEl)}highlight(e,t){if(!this.highlightBox||!this.labelEl)return;let n=e.getBoundingClientRect();this.highlightBox.style.top=`${n.top}px`,this.highlightBox.style.left=`${n.left}px`,this.highlightBox.style.width=`${n.width}px`,this.highlightBox.style.height=`${n.height}px`,this.highlightBox.style.display=`block`,this.config.showTagHint&&t?(this.labelEl.textContent=t,n.top>24?this.labelEl.style.top=`${n.top-20-4}px`:this.labelEl.style.top=`${n.bottom+4}px`,this.labelEl.style.left=`${n.left}px`,this.labelEl.style.display=`block`):this.labelEl.style.display=`none`}clearHighlight(){this.highlightBox&&(this.highlightBox.style.display=`none`),this.labelEl&&(this.labelEl.style.display=`none`)}destroy(){this.host&&(this.host.remove(),this.host=null,this.shadowRoot=null,this.highlightBox=null,this.labelEl=null)}};function u(e){let t=e.split(`+`).map(e=>e.trim().toLowerCase());return{key:t[t.length-1],alt:t.includes(`alt`),ctrl:t.includes(`ctrl`)||t.includes(`control`),shift:t.includes(`shift`),meta:t.includes(`meta`)||t.includes(`cmd`)||t.includes(`command`)}}function d(e){let t=[];e.ctrlKey&&t.push(`Ctrl`),e.altKey&&t.push(`Alt`),e.shiftKey&&t.push(`Shift`),e.metaKey&&t.push(`Meta`);let n=e.key.length===1?e.key.toUpperCase():e.key;return t.push(n),t.join(`+`)}var f=class{cleanups=[];register(e,t){let n=u(e),r=e=>{e.key.toLowerCase()===n.key&&e.altKey===n.alt&&e.ctrlKey===n.ctrl&&e.shiftKey===n.shift&&e.metaKey===n.meta&&(e.preventDefault(),t())};document.addEventListener(`keydown`,r,{capture:!0}),this.cleanups.push(()=>document.removeEventListener(`keydown`,r,{capture:!0}))}destroy(){this.cleanups.forEach(e=>e()),this.cleanups=[]}},p=`vue-grab-fab-host`,m=3,h=`left 0.3s ease, top 0.3s ease`,g=3,_=5;function v(){return g*window.innerHeight/window.innerWidth}var y={"bottom-right":{x:97,y:85},"bottom-left":{x:3,y:85},"top-right":{x:97,y:15},"top-left":{x:3,y:15},"top-center":{x:50,y:3}};function b(e,t,n){return Math.min(Math.max(e,t),n)}function x(e,t){if(!e)return null;try{let n=localStorage.getItem(e);return n?t(n):null}catch{return null}}function S(e,t){if(e)try{localStorage.setItem(e,t)}catch{}}function C(e){return x(e,e=>{let{x:t,y:n}=JSON.parse(e);return typeof t==`number`&&typeof n==`number`?{x:t,y:n}:null})}function w(e,t,n){S(e,JSON.stringify({x:t,y:n}))}function T(e){return x(e,e=>typeof e==`string`?e:null)}function E(e,t){S(e,t)}var D=`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/><line x1="12" y1="15" x2="12" y2="9"/><line x1="9" y1="12" x2="15" y2="12"/></svg>`,O=`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`,k=`
+  :host {
+    all: initial;
+  }
+  .toolbar {
+    display: inline-flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 4px;
+    gap: 2px;
+    border-radius: 8px;
+    border: 1px solid rgba(255,255,255,0.1);
+    background: rgba(30,30,30,0.85);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+    position: relative;
+  }
+  .toolbar.dragging {
+    cursor: grabbing;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+  }
+  .toolbar-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: none;
+    background: transparent;
+    color: #a0a0a0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+  }
+  .toolbar-btn:hover {
+    color: #e0e0e0;
+    background: rgba(255,255,255,0.08);
+  }
+  .grab-btn.active {
+    color: var(--grab-color, #4f46e5);
+    box-shadow: inset 0 0 0 1.5px var(--grab-color, #4f46e5);
+    background: color-mix(in srgb, var(--grab-color, #4f46e5) 12%, transparent);
+  }
+  .toolbar-divider {
+    width: 1px;
+    height: 18px;
+    background: rgba(255,255,255,0.12);
+    margin: 0 2px;
+  }
+
+  .panel {
+    position: absolute;
+    width: 240px;
+    background: rgba(25,25,25,0.94);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 12px;
+    color: #e0e0e0;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 13px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+    padding: 14px;
+    display: none;
+    z-index: 1;
+  }
+  .panel.open {
+    display: block;
+  }
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    font-weight: 600;
+    font-size: 13px;
+    color: #fff;
+  }
+  .panel-close {
+    background: none;
+    border: none;
+    color: #888;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    padding: 0 2px;
+  }
+  .panel-close:hover {
+    color: #fff;
+  }
+  .panel-label {
+    font-size: 11px;
+    color: #888;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .hotkey-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  kbd {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(255,255,255,0.08);
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 12px;
+    color: #ddd;
+    min-width: 80px;
+    justify-content: center;
+    flex: 1;
+  }
+  kbd.recording {
+    border-color: var(--grab-color, #4f46e5);
+    box-shadow: 0 0 0 1px var(--grab-color, #4f46e5);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+  .record-btn {
+    background: rgba(255,255,255,0.08);
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 6px;
+    color: #ccc;
+    padding: 4px 10px;
+    font-size: 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-family: inherit;
+  }
+  .record-btn:hover {
+    background: rgba(255,255,255,0.14);
+    color: #fff;
+  }
+  .panel-hint {
+    margin-top: 12px;
+    font-size: 11px;
+    color: #555;
+    text-align: center;
+  }
+  .toolbar.vertical {
+    flex-direction: column;
+    height: auto;
+    width: 36px;
+    padding: 4px 0;
+  }
+  .toolbar.vertical .toolbar-divider {
+    width: 18px;
+    height: 1px;
+    margin: 2px 0;
+  }
+`,A=class{host=null;shadowRoot=null;toolbarEl=null;btnEl=null;gearEl=null;panelEl=null;kbdEl=null;recordBtn=null;config;posX=97;posY=85;isDragging=!1;wasDragged=!1;dragPointerId=-1;dragStartX=0;dragStartY=0;dragOffsetX=0;dragOffsetY=0;panelOpen=!1;isRecording=!1;currentHotkey=``;toggleCb=null;hotkeyChangeCb=null;boundPointerDown=null;boundPointerMove=null;boundPointerUp=null;boundDocClick=null;boundDocKeyDown=null;boundRecordKeyDown=null;constructor(e){this.config=e;let t=y[e.initialPosition]??y[`bottom-right`],n=C(e.storageKey);n?(this.posX=n.x,this.posY=n.y):(this.posX=t.x,this.posY=t.y,this.posX<=_?this.posX=v():this.posX>=100-_&&(this.posX=100-v())),this.currentHotkey=T(e.hotkeyStorageKey)??``}getCurrentHotkey(){return this.currentHotkey}mount(){if(this.host)return;this.host=document.createElement(`div`),this.host.id=p,this.host.style.cssText=`position:fixed;z-index:2147483646;pointer-events:auto;transform:translate(-50%,-50%);transition:${h};`,this.applyPosition(),document.body.appendChild(this.host),this.shadowRoot=this.host.attachShadow({mode:`open`});let e=document.createElement(`style`);e.textContent=k,this.shadowRoot.appendChild(e),this.toolbarEl=document.createElement(`div`),this.toolbarEl.className=`toolbar`,this.btnEl=document.createElement(`div`),this.btnEl.className=`toolbar-btn grab-btn`,this.btnEl.innerHTML=D,this.toolbarEl.appendChild(this.btnEl);let t=document.createElement(`div`);t.className=`toolbar-divider`,this.toolbarEl.appendChild(t),this.gearEl=document.createElement(`div`),this.gearEl.className=`toolbar-btn gear-btn`,this.gearEl.innerHTML=O,this.toolbarEl.appendChild(this.gearEl),this.panelEl=document.createElement(`div`),this.panelEl.className=`panel`,this.panelEl.innerHTML=`
+      <div class="panel-header">
+        <span>Settings</span>
+        <button class="panel-close" data-action="close">&times;</button>
+      </div>
+      <div class="panel-label">Hotkey</div>
+      <div class="hotkey-row">
+        <kbd></kbd>
+        <button class="record-btn">Record</button>
+      </div>
+      <div class="panel-hint">Drag toolbar to reposition</div>
+    `,this.toolbarEl.appendChild(this.panelEl),this.shadowRoot.appendChild(this.toolbarEl),this.kbdEl=this.panelEl.querySelector(`kbd`),this.recordBtn=this.panelEl.querySelector(`.record-btn`),this.updateHotkeyDisplay(),this.applyOrientation(this.getEdgeFromPosition()),this.boundPointerDown=this.onPointerDown.bind(this),this.boundPointerMove=this.onPointerMove.bind(this),this.boundPointerUp=this.onPointerUp.bind(this),this.toolbarEl.addEventListener(`pointerdown`,this.boundPointerDown),this.toolbarEl.addEventListener(`pointermove`,this.boundPointerMove),this.toolbarEl.addEventListener(`pointerup`,this.boundPointerUp),this.btnEl.addEventListener(`click`,e=>{if(e.stopPropagation(),!this.wasDragged){if(this.panelOpen){this.closePanel();return}this.toggleCb?.()}}),this.gearEl.addEventListener(`click`,e=>{e.stopPropagation(),!this.wasDragged&&this.togglePanel()}),this.panelEl.querySelector(`[data-action=close]`).addEventListener(`click`,e=>{e.stopPropagation(),this.closePanel()}),this.recordBtn.addEventListener(`click`,e=>{e.stopPropagation(),this.toggleRecording()}),this.boundDocClick=e=>{this.panelOpen&&(e.composedPath().includes(this.host)||this.closePanel())},document.addEventListener(`click`,this.boundDocClick,{capture:!0}),this.boundDocKeyDown=e=>{e.key===`Escape`&&(this.isRecording?(this.stopRecording(),e.preventDefault(),e.stopPropagation()):this.panelOpen&&(this.closePanel(),e.preventDefault(),e.stopPropagation()))},document.addEventListener(`keydown`,this.boundDocKeyDown,{capture:!0})}destroy(){this.boundDocClick&&document.removeEventListener(`click`,this.boundDocClick,{capture:!0}),this.boundDocKeyDown&&document.removeEventListener(`keydown`,this.boundDocKeyDown,{capture:!0}),this.boundRecordKeyDown&&document.removeEventListener(`keydown`,this.boundRecordKeyDown,{capture:!0}),this.host&&(this.host.remove(),this.host=null,this.shadowRoot=null,this.toolbarEl=null,this.btnEl=null,this.gearEl=null,this.panelEl=null,this.kbdEl=null,this.recordBtn=null)}setActive(e){this.btnEl&&(e?this.btnEl.classList.add(`active`):this.btnEl.classList.remove(`active`))}setHighlightColor(e){this.host?.style.setProperty(`--grab-color`,e)}setCurrentHotkey(e){this.currentHotkey=e,this.updateHotkeyDisplay()}onToggle(e){this.toggleCb=e}onHotkeyChange(e){this.hotkeyChangeCb=e}onPointerDown(e){if(e.button!==0)return;this.isDragging=!0,this.wasDragged=!1,this.dragPointerId=e.pointerId,this.dragStartX=e.clientX,this.dragStartY=e.clientY;let t=this.toolbarEl.getBoundingClientRect();this.dragOffsetX=e.clientX-t.left-t.width/2,this.dragOffsetY=e.clientY-t.top-t.height/2,this.host.style.transition=`none`}onPointerMove(e){if(!this.isDragging)return;let t=e.clientX-this.dragStartX,n=e.clientY-this.dragStartY;!this.wasDragged&&Math.abs(t)<m&&Math.abs(n)<m||(this.wasDragged||(this.wasDragged=!0,this.toolbarEl.setPointerCapture(this.dragPointerId),this.toolbarEl.classList.add(`dragging`)),this.posX=b((e.clientX-this.dragOffsetX)/window.innerWidth*100,2,98),this.posY=b((e.clientY-this.dragOffsetY)/window.innerHeight*100,2,98),this.applyPosition())}onPointerUp(e){this.isDragging&&(this.isDragging=!1,this.toolbarEl.releasePointerCapture(e.pointerId),this.toolbarEl.classList.remove(`dragging`),this.wasDragged&&(this.host.style.transition=h,this.snapToEdge(),w(this.config.storageKey,this.posX,this.posY)))}snapToEdge(){let e=this.getEdgeFromPosition(),t=v();e===`right`?this.posX=100-t:e===`bottom`?this.posY=100-g:e===`top`?this.posY=g:this.posX=t,this.applyPosition(),this.applyOrientation(e),this.panelOpen&&this.positionPanel()}applyPosition(){this.host&&(this.host.style.left=`${this.posX}%`,this.host.style.top=`${this.posY}%`)}getEdgeFromPosition(){let e=Math.atan2(this.posY-50,this.posX-50)*180/Math.PI;return e>=-45&&e<45?`right`:e>=45&&e<135?`bottom`:e>=-135&&e<-45?`top`:`left`}applyOrientation(e){if(!this.toolbarEl)return;let t=e===`left`||e===`right`;this.toolbarEl.classList.toggle(`vertical`,t)}togglePanel(){this.panelOpen?this.closePanel():this.openPanel()}openPanel(){this.panelEl&&(this.panelOpen=!0,this.positionPanel(),this.panelEl.classList.add(`open`))}closePanel(){this.panelEl&&(this.panelOpen=!1,this.panelEl.classList.remove(`open`),this.isRecording&&this.stopRecording())}positionPanel(){this.panelEl&&(this.posX>50?(this.panelEl.style.right=`calc(100% + 8px)`,this.panelEl.style.left=`auto`):(this.panelEl.style.left=`calc(100% + 8px)`,this.panelEl.style.right=`auto`),this.posY>70?(this.panelEl.style.bottom=`-4px`,this.panelEl.style.top=`auto`):(this.panelEl.style.top=`-4px`,this.panelEl.style.bottom=`auto`))}toggleRecording(){this.isRecording?this.stopRecording():this.startRecording()}startRecording(){this.isRecording=!0,this.kbdEl.textContent=`Press keys…`,this.kbdEl.classList.add(`recording`),this.recordBtn.textContent=`Cancel`,this.boundRecordKeyDown=e=>{if(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),[`Alt`,`Control`,`Shift`,`Meta`].includes(e.key))return;let t=d(e);this.currentHotkey=t,this.stopRecording(),E(this.config.hotkeyStorageKey,t),this.hotkeyChangeCb?.(t)},document.addEventListener(`keydown`,this.boundRecordKeyDown,{capture:!0})}stopRecording(){this.isRecording=!1,this.boundRecordKeyDown&&=(document.removeEventListener(`keydown`,this.boundRecordKeyDown,{capture:!0}),null),this.updateHotkeyDisplay(),this.recordBtn&&(this.recordBtn.textContent=`Record`),this.kbdEl&&this.kbdEl.classList.remove(`recording`)}updateHotkeyDisplay(){this.kbdEl&&(this.kbdEl.textContent=this.currentHotkey||`None`)}},j=new Set([`header`,`nav`,`footer`,`aside`,`main`,`layout`,`sidebar`]),M=class{config;overlay=null;callbacks=new Set;stateListeners=new Set;_isActive=!1;prevCursor=``;handleMouseMove=null;handleClick=null;handleKeyDown=null;constructor(e){this.config=e}get isActive(){return this._isActive}activate(){this._isActive||(this._isActive=!0,this.stateListeners.forEach(e=>e(!0)),this.overlay=new l(this.config),this.overlay.mount(),this.prevCursor=document.body.style.cursor,document.body.style.cursor=`crosshair`,this.handleMouseMove=e=>{let t=document.elementFromPoint(e.clientX,e.clientY);if(!t||this.shouldIgnore(t)){this.overlay?.clearHighlight();return}let n=this.getVueComponent(t);this.overlay?.highlight(t,this.getComponentLabelFromInstance(t,n))},this.handleClick=e=>{e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation();let t=document.elementFromPoint(e.clientX,e.clientY);if(!t||this.shouldIgnore(t))return;let n=t.outerHTML;this.config.maxHtmlLength>0&&n.length>this.config.maxHtmlLength&&(n=n.slice(0,this.config.maxHtmlLength)+`<!-- truncated -->`);let r={element:t,html:n,componentStack:this.getComponentStack(t),selector:this.generateSelector(t)};this.callbacks.forEach(e=>e(r)),this.deactivate()},this.handleKeyDown=e=>{e.key===`Escape`&&(e.preventDefault(),this.deactivate())},document.addEventListener(`mousemove`,this.handleMouseMove,{capture:!0}),document.addEventListener(`click`,this.handleClick,{capture:!0}),document.addEventListener(`keydown`,this.handleKeyDown,{capture:!0}))}deactivate(){this._isActive&&(this._isActive=!1,this.stateListeners.forEach(e=>e(!1)),this.handleMouseMove&&document.removeEventListener(`mousemove`,this.handleMouseMove,{capture:!0}),this.handleClick&&document.removeEventListener(`click`,this.handleClick,{capture:!0}),this.handleKeyDown&&document.removeEventListener(`keydown`,this.handleKeyDown,{capture:!0}),this.handleMouseMove=null,this.handleClick=null,this.handleKeyDown=null,this.overlay?.destroy(),this.overlay=null,document.body.style.cursor=this.prevCursor)}onGrab(e){return this.callbacks.add(e),()=>this.callbacks.delete(e)}onStateChange(e){return this.stateListeners.add(e),()=>this.stateListeners.delete(e)}toggle(){this._isActive?this.deactivate():this.activate()}destroy(){this.deactivate(),this.callbacks.clear(),this.stateListeners.clear()}updateConfig(e){this.config=a(this.config,e)}shouldIgnore(e){if(e.closest(`#vue-grab-overlay-host, #vue-grab-fab-host`))return!0;let t=e.tagName.toLowerCase();if(this.config.filter.ignoreTags.includes(t))return!0;for(let t of this.config.filter.ignoreSelectors)try{if(e.matches(t))return!0}catch{}if(this.config.filter.skipCommonComponents){let t=this.getVueComponent(e);if(t){let e=t.type.name||t.type.__name||``;if(j.has(e.toLowerCase()))return!0}}return!1}getVueComponent(e){let t=e;for(;t;){let e=t.__vueParentComponent||t.__vue_app__?._instance;if(e)return e;t=t.parentElement}return null}getComponentLabelFromInstance(e,t){if(t){let e=t.type?.name||t.type?.__name;if(e)return`<${e}>`}return`<${e.tagName.toLowerCase()}>`}getComponentStack(e){let t=[],n=e;for(;n;){let e=n.__vueParentComponent||n.__vue_app__?._instance;if(e){let n=e.type?.name||e.type?.__name||`Anonymous`,r=e.type?.__file,i={name:n};r&&(i.filePath=r),t.push(i)}n=n.parentElement}return t}generateSelector(e){if(e.id)return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.body&&n!==document.documentElement;){let e=n.tagName.toLowerCase();if(n.id){t.unshift(`#${CSS.escape(n.id)}`);break}if(n.className&&typeof n.className==`string`){let t=n.className.trim().split(/\s+/).filter(Boolean);t.length>0&&(e+=`.${t.slice(0,2).map(e=>CSS.escape(e)).join(`.`)}`)}t.unshift(e),n=n.parentElement}return t.join(` > `)}};function N(e){let t=new M(e),n=new f,i=null;if(e.floatingButton.enabled){let r=new A(e.floatingButton);i=r;let a=r.getCurrentHotkey()||`Alt+Shift+G`;n.register(a,()=>t.toggle()),r.setHighlightColor(e.highlightColor),r.setCurrentHotkey(a),r.onToggle(()=>t.toggle()),r.onHotkeyChange(e=>{n.destroy(),n.register(e,()=>t.toggle()),r.setCurrentHotkey(e)}),t.onStateChange(e=>r.setActive(e)),r.mount()}else n.register(r,()=>t.toggle());return{engine:t,hotkeys:n,fab:i,destroy(){t.destroy(),n.destroy(),i?.destroy()}}}function P(){let t=(0,e.inject)(o,{...i}),n=(0,e.ref)(!1),r=(0,e.ref)(null),a=N(t),{engine:s}=a,c=s.onGrab(e=>{r.value=e}),l=s.onStateChange(e=>{n.value=e});return(0,e.onUnmounted)(()=>{c(),l(),a.destroy()}),{config:t,isActive:(0,e.readonly)(n),lastResult:(0,e.readonly)(r),activate:()=>s.activate(),deactivate:()=>s.deactivate(),toggle:()=>s.toggle()}}function F(e={}){let t=N(a(i,e));return{activate:()=>t.engine.activate(),deactivate:()=>t.engine.deactivate(),onGrab:e=>t.engine.onGrab(e),destroy:()=>t.destroy()}}exports.FAB_HOST_ID=p,exports.FloatingButton=A,exports.VUE_GRAB_CONFIG_KEY=o,exports.createVueGrab=s,exports.init=F,exports.useGrab=P;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { createVueGrab, VUE_GRAB_CONFIG_KEY } from './plugin';
+export { useGrab } from './composables';
+export { init } from './init';
+export { FloatingButton, FAB_HOST_ID } from './floating-button';
+export type { GrabConfig, GrabResult, ComponentInfo, GrabFilterConfig, FloatingButtonConfig, } from '@sakana-y/vue-grab-shared';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,493 @@
+import { inject as e, onUnmounted as t, readonly as n, ref as r } from "vue";
+//#region ../shared/dist/index.mjs
+var i = "#4f46e5", a = "#ffffff", o = "Alt+Shift+G", s = {
+	highlightColor: i,
+	labelTextColor: a,
+	showTagHint: !0,
+	maxHtmlLength: 1e4,
+	filter: {
+		ignoreSelectors: [],
+		ignoreTags: [],
+		skipCommonComponents: !1
+	},
+	floatingButton: {
+		enabled: !1,
+		initialPosition: "top-center",
+		storageKey: "vue-grab-fab-pos",
+		hotkeyStorageKey: "vue-grab-hotkey"
+	}
+};
+function c(e, t) {
+	let { filter: n, floatingButton: r, ...i } = t;
+	return {
+		...e,
+		...i,
+		filter: {
+			...e.filter,
+			...n
+		},
+		floatingButton: {
+			...e.floatingButton,
+			...r
+		}
+	};
+}
+//#endregion
+//#region src/plugin.ts
+var l = Symbol("vue-grab-config");
+function u(e = {}) {
+	let t = c(s, e);
+	return { install(e) {
+		e.provide(l, t);
+	} };
+}
+//#endregion
+//#region src/overlay/index.ts
+var d = "vue-grab-overlay-host", f = class {
+	host = null;
+	shadowRoot = null;
+	highlightBox = null;
+	labelEl = null;
+	config;
+	constructor(e) {
+		this.config = e;
+	}
+	mount() {
+		if (this.host) return;
+		this.host = document.createElement("div"), this.host.id = d, this.host.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;", document.body.appendChild(this.host), this.shadowRoot = this.host.attachShadow({ mode: "open" }), this.host.style.setProperty("--grab-color", this.config.highlightColor), this.host.style.setProperty("--grab-label-color", this.config.labelTextColor);
+		let e = document.createElement("style");
+		e.textContent = "\n      .grab-highlight {\n        position: fixed;\n        pointer-events: none;\n        border: 2px solid var(--grab-color);\n        background: color-mix(in srgb, var(--grab-color) 12%, transparent);\n        border-radius: 2px;\n        transition: all 0.05s ease-out;\n        display: none;\n        box-sizing: border-box;\n      }\n      .grab-label {\n        position: fixed;\n        pointer-events: none;\n        background: var(--grab-color);\n        color: var(--grab-label-color);\n        font-size: 11px;\n        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n        padding: 2px 6px;\n        border-radius: 2px;\n        white-space: nowrap;\n        display: none;\n        line-height: 1.4;\n      }\n    ", this.shadowRoot.appendChild(e), this.highlightBox = document.createElement("div"), this.highlightBox.className = "grab-highlight", this.shadowRoot.appendChild(this.highlightBox), this.labelEl = document.createElement("div"), this.labelEl.className = "grab-label", this.shadowRoot.appendChild(this.labelEl);
+	}
+	highlight(e, t) {
+		if (!this.highlightBox || !this.labelEl) return;
+		let n = e.getBoundingClientRect();
+		this.highlightBox.style.top = `${n.top}px`, this.highlightBox.style.left = `${n.left}px`, this.highlightBox.style.width = `${n.width}px`, this.highlightBox.style.height = `${n.height}px`, this.highlightBox.style.display = "block", this.config.showTagHint && t ? (this.labelEl.textContent = t, n.top > 24 ? this.labelEl.style.top = `${n.top - 20 - 4}px` : this.labelEl.style.top = `${n.bottom + 4}px`, this.labelEl.style.left = `${n.left}px`, this.labelEl.style.display = "block") : this.labelEl.style.display = "none";
+	}
+	clearHighlight() {
+		this.highlightBox && (this.highlightBox.style.display = "none"), this.labelEl && (this.labelEl.style.display = "none");
+	}
+	destroy() {
+		this.host && (this.host.remove(), this.host = null, this.shadowRoot = null, this.highlightBox = null, this.labelEl = null);
+	}
+};
+//#endregion
+//#region src/hotkeys/index.ts
+function p(e) {
+	let t = e.split("+").map((e) => e.trim().toLowerCase());
+	return {
+		key: t[t.length - 1],
+		alt: t.includes("alt"),
+		ctrl: t.includes("ctrl") || t.includes("control"),
+		shift: t.includes("shift"),
+		meta: t.includes("meta") || t.includes("cmd") || t.includes("command")
+	};
+}
+function m(e) {
+	let t = [];
+	e.ctrlKey && t.push("Ctrl"), e.altKey && t.push("Alt"), e.shiftKey && t.push("Shift"), e.metaKey && t.push("Meta");
+	let n = e.key.length === 1 ? e.key.toUpperCase() : e.key;
+	return t.push(n), t.join("+");
+}
+var h = class {
+	cleanups = [];
+	register(e, t) {
+		let n = p(e), r = (e) => {
+			e.key.toLowerCase() === n.key && e.altKey === n.alt && e.ctrlKey === n.ctrl && e.shiftKey === n.shift && e.metaKey === n.meta && (e.preventDefault(), t());
+		};
+		document.addEventListener("keydown", r, { capture: !0 }), this.cleanups.push(() => document.removeEventListener("keydown", r, { capture: !0 }));
+	}
+	destroy() {
+		this.cleanups.forEach((e) => e()), this.cleanups = [];
+	}
+}, g = "vue-grab-fab-host", _ = 3, v = "left 0.3s ease, top 0.3s ease", y = 3, b = 5;
+function x() {
+	return y * window.innerHeight / window.innerWidth;
+}
+var S = {
+	"bottom-right": {
+		x: 97,
+		y: 85
+	},
+	"bottom-left": {
+		x: 3,
+		y: 85
+	},
+	"top-right": {
+		x: 97,
+		y: 15
+	},
+	"top-left": {
+		x: 3,
+		y: 15
+	},
+	"top-center": {
+		x: 50,
+		y: 3
+	}
+};
+function C(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function w(e, t) {
+	if (!e) return null;
+	try {
+		let n = localStorage.getItem(e);
+		return n ? t(n) : null;
+	} catch {
+		return null;
+	}
+}
+function T(e, t) {
+	if (e) try {
+		localStorage.setItem(e, t);
+	} catch {}
+}
+function E(e) {
+	return w(e, (e) => {
+		let { x: t, y: n } = JSON.parse(e);
+		return typeof t == "number" && typeof n == "number" ? {
+			x: t,
+			y: n
+		} : null;
+	});
+}
+function D(e, t, n) {
+	T(e, JSON.stringify({
+		x: t,
+		y: n
+	}));
+}
+function O(e) {
+	return w(e, (e) => typeof e == "string" ? e : null);
+}
+function k(e, t) {
+	T(e, t);
+}
+var A = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"22\" y1=\"12\" x2=\"18\" y2=\"12\"/><line x1=\"6\" y1=\"12\" x2=\"2\" y2=\"12\"/><line x1=\"12\" y1=\"6\" x2=\"12\" y2=\"2\"/><line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"18\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"9\"/><line x1=\"9\" y1=\"12\" x2=\"15\" y2=\"12\"/></svg>", j = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"/></svg>", M = "\n  :host {\n    all: initial;\n  }\n  .toolbar {\n    display: inline-flex;\n    align-items: center;\n    height: 36px;\n    padding: 0 4px;\n    gap: 2px;\n    border-radius: 8px;\n    border: 1px solid rgba(255,255,255,0.1);\n    background: rgba(30,30,30,0.85);\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    box-shadow: 0 2px 10px rgba(0,0,0,0.35);\n    cursor: grab;\n    user-select: none;\n    touch-action: none;\n    position: relative;\n  }\n  .toolbar.dragging {\n    cursor: grabbing;\n    box-shadow: 0 4px 16px rgba(0,0,0,0.5);\n  }\n  .toolbar-btn {\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    border: none;\n    background: transparent;\n    color: #a0a0a0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;\n  }\n  .toolbar-btn:hover {\n    color: #e0e0e0;\n    background: rgba(255,255,255,0.08);\n  }\n  .grab-btn.active {\n    color: var(--grab-color, #4f46e5);\n    box-shadow: inset 0 0 0 1.5px var(--grab-color, #4f46e5);\n    background: color-mix(in srgb, var(--grab-color, #4f46e5) 12%, transparent);\n  }\n  .toolbar-divider {\n    width: 1px;\n    height: 18px;\n    background: rgba(255,255,255,0.12);\n    margin: 0 2px;\n  }\n\n  .panel {\n    position: absolute;\n    width: 240px;\n    background: rgba(25,25,25,0.94);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    border: 1px solid rgba(255,255,255,0.1);\n    border-radius: 12px;\n    color: #e0e0e0;\n    font-family: system-ui, -apple-system, sans-serif;\n    font-size: 13px;\n    box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n    padding: 14px;\n    display: none;\n    z-index: 1;\n  }\n  .panel.open {\n    display: block;\n  }\n  .panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n    font-weight: 600;\n    font-size: 13px;\n    color: #fff;\n  }\n  .panel-close {\n    background: none;\n    border: none;\n    color: #888;\n    cursor: pointer;\n    font-size: 16px;\n    line-height: 1;\n    padding: 0 2px;\n  }\n  .panel-close:hover {\n    color: #fff;\n  }\n  .panel-label {\n    font-size: 11px;\n    color: #888;\n    margin-bottom: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n  .hotkey-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  kbd {\n    display: inline-flex;\n    align-items: center;\n    background: rgba(255,255,255,0.08);\n    border: 1px solid rgba(255,255,255,0.15);\n    border-radius: 6px;\n    padding: 4px 10px;\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 12px;\n    color: #ddd;\n    min-width: 80px;\n    justify-content: center;\n    flex: 1;\n  }\n  kbd.recording {\n    border-color: var(--grab-color, #4f46e5);\n    box-shadow: 0 0 0 1px var(--grab-color, #4f46e5);\n    animation: pulse 1.5s ease-in-out infinite;\n  }\n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.6; }\n  }\n  .record-btn {\n    background: rgba(255,255,255,0.08);\n    border: 1px solid rgba(255,255,255,0.15);\n    border-radius: 6px;\n    color: #ccc;\n    padding: 4px 10px;\n    font-size: 12px;\n    cursor: pointer;\n    white-space: nowrap;\n    font-family: inherit;\n  }\n  .record-btn:hover {\n    background: rgba(255,255,255,0.14);\n    color: #fff;\n  }\n  .panel-hint {\n    margin-top: 12px;\n    font-size: 11px;\n    color: #555;\n    text-align: center;\n  }\n  .toolbar.vertical {\n    flex-direction: column;\n    height: auto;\n    width: 36px;\n    padding: 4px 0;\n  }\n  .toolbar.vertical .toolbar-divider {\n    width: 18px;\n    height: 1px;\n    margin: 2px 0;\n  }\n", N = class {
+	host = null;
+	shadowRoot = null;
+	toolbarEl = null;
+	btnEl = null;
+	gearEl = null;
+	panelEl = null;
+	kbdEl = null;
+	recordBtn = null;
+	config;
+	posX = 97;
+	posY = 85;
+	isDragging = !1;
+	wasDragged = !1;
+	dragPointerId = -1;
+	dragStartX = 0;
+	dragStartY = 0;
+	dragOffsetX = 0;
+	dragOffsetY = 0;
+	panelOpen = !1;
+	isRecording = !1;
+	currentHotkey = "";
+	toggleCb = null;
+	hotkeyChangeCb = null;
+	boundPointerDown = null;
+	boundPointerMove = null;
+	boundPointerUp = null;
+	boundDocClick = null;
+	boundDocKeyDown = null;
+	boundRecordKeyDown = null;
+	constructor(e) {
+		this.config = e;
+		let t = S[e.initialPosition] ?? S["bottom-right"], n = E(e.storageKey);
+		n ? (this.posX = n.x, this.posY = n.y) : (this.posX = t.x, this.posY = t.y, this.posX <= b ? this.posX = x() : this.posX >= 100 - b && (this.posX = 100 - x())), this.currentHotkey = O(e.hotkeyStorageKey) ?? "";
+	}
+	getCurrentHotkey() {
+		return this.currentHotkey;
+	}
+	mount() {
+		if (this.host) return;
+		this.host = document.createElement("div"), this.host.id = g, this.host.style.cssText = `position:fixed;z-index:2147483646;pointer-events:auto;transform:translate(-50%,-50%);transition:${v};`, this.applyPosition(), document.body.appendChild(this.host), this.shadowRoot = this.host.attachShadow({ mode: "open" });
+		let e = document.createElement("style");
+		e.textContent = M, this.shadowRoot.appendChild(e), this.toolbarEl = document.createElement("div"), this.toolbarEl.className = "toolbar", this.btnEl = document.createElement("div"), this.btnEl.className = "toolbar-btn grab-btn", this.btnEl.innerHTML = A, this.toolbarEl.appendChild(this.btnEl);
+		let t = document.createElement("div");
+		t.className = "toolbar-divider", this.toolbarEl.appendChild(t), this.gearEl = document.createElement("div"), this.gearEl.className = "toolbar-btn gear-btn", this.gearEl.innerHTML = j, this.toolbarEl.appendChild(this.gearEl), this.panelEl = document.createElement("div"), this.panelEl.className = "panel", this.panelEl.innerHTML = "\n      <div class=\"panel-header\">\n        <span>Settings</span>\n        <button class=\"panel-close\" data-action=\"close\">&times;</button>\n      </div>\n      <div class=\"panel-label\">Hotkey</div>\n      <div class=\"hotkey-row\">\n        <kbd></kbd>\n        <button class=\"record-btn\">Record</button>\n      </div>\n      <div class=\"panel-hint\">Drag toolbar to reposition</div>\n    ", this.toolbarEl.appendChild(this.panelEl), this.shadowRoot.appendChild(this.toolbarEl), this.kbdEl = this.panelEl.querySelector("kbd"), this.recordBtn = this.panelEl.querySelector(".record-btn"), this.updateHotkeyDisplay(), this.applyOrientation(this.getEdgeFromPosition()), this.boundPointerDown = this.onPointerDown.bind(this), this.boundPointerMove = this.onPointerMove.bind(this), this.boundPointerUp = this.onPointerUp.bind(this), this.toolbarEl.addEventListener("pointerdown", this.boundPointerDown), this.toolbarEl.addEventListener("pointermove", this.boundPointerMove), this.toolbarEl.addEventListener("pointerup", this.boundPointerUp), this.btnEl.addEventListener("click", (e) => {
+			if (e.stopPropagation(), !this.wasDragged) {
+				if (this.panelOpen) {
+					this.closePanel();
+					return;
+				}
+				this.toggleCb?.();
+			}
+		}), this.gearEl.addEventListener("click", (e) => {
+			e.stopPropagation(), !this.wasDragged && this.togglePanel();
+		}), this.panelEl.querySelector("[data-action=close]").addEventListener("click", (e) => {
+			e.stopPropagation(), this.closePanel();
+		}), this.recordBtn.addEventListener("click", (e) => {
+			e.stopPropagation(), this.toggleRecording();
+		}), this.boundDocClick = (e) => {
+			this.panelOpen && (e.composedPath().includes(this.host) || this.closePanel());
+		}, document.addEventListener("click", this.boundDocClick, { capture: !0 }), this.boundDocKeyDown = (e) => {
+			e.key === "Escape" && (this.isRecording ? (this.stopRecording(), e.preventDefault(), e.stopPropagation()) : this.panelOpen && (this.closePanel(), e.preventDefault(), e.stopPropagation()));
+		}, document.addEventListener("keydown", this.boundDocKeyDown, { capture: !0 });
+	}
+	destroy() {
+		this.boundDocClick && document.removeEventListener("click", this.boundDocClick, { capture: !0 }), this.boundDocKeyDown && document.removeEventListener("keydown", this.boundDocKeyDown, { capture: !0 }), this.boundRecordKeyDown && document.removeEventListener("keydown", this.boundRecordKeyDown, { capture: !0 }), this.host && (this.host.remove(), this.host = null, this.shadowRoot = null, this.toolbarEl = null, this.btnEl = null, this.gearEl = null, this.panelEl = null, this.kbdEl = null, this.recordBtn = null);
+	}
+	setActive(e) {
+		this.btnEl && (e ? this.btnEl.classList.add("active") : this.btnEl.classList.remove("active"));
+	}
+	setHighlightColor(e) {
+		this.host?.style.setProperty("--grab-color", e);
+	}
+	setCurrentHotkey(e) {
+		this.currentHotkey = e, this.updateHotkeyDisplay();
+	}
+	onToggle(e) {
+		this.toggleCb = e;
+	}
+	onHotkeyChange(e) {
+		this.hotkeyChangeCb = e;
+	}
+	onPointerDown(e) {
+		if (e.button !== 0) return;
+		this.isDragging = !0, this.wasDragged = !1, this.dragPointerId = e.pointerId, this.dragStartX = e.clientX, this.dragStartY = e.clientY;
+		let t = this.toolbarEl.getBoundingClientRect();
+		this.dragOffsetX = e.clientX - t.left - t.width / 2, this.dragOffsetY = e.clientY - t.top - t.height / 2, this.host.style.transition = "none";
+	}
+	onPointerMove(e) {
+		if (!this.isDragging) return;
+		let t = e.clientX - this.dragStartX, n = e.clientY - this.dragStartY;
+		!this.wasDragged && Math.abs(t) < _ && Math.abs(n) < _ || (this.wasDragged || (this.wasDragged = !0, this.toolbarEl.setPointerCapture(this.dragPointerId), this.toolbarEl.classList.add("dragging")), this.posX = C((e.clientX - this.dragOffsetX) / window.innerWidth * 100, 2, 98), this.posY = C((e.clientY - this.dragOffsetY) / window.innerHeight * 100, 2, 98), this.applyPosition());
+	}
+	onPointerUp(e) {
+		this.isDragging && (this.isDragging = !1, this.toolbarEl.releasePointerCapture(e.pointerId), this.toolbarEl.classList.remove("dragging"), this.wasDragged && (this.host.style.transition = v, this.snapToEdge(), D(this.config.storageKey, this.posX, this.posY)));
+	}
+	snapToEdge() {
+		let e = this.getEdgeFromPosition(), t = x();
+		e === "right" ? this.posX = 100 - t : e === "bottom" ? this.posY = 100 - y : e === "top" ? this.posY = y : this.posX = t, this.applyPosition(), this.applyOrientation(e), this.panelOpen && this.positionPanel();
+	}
+	applyPosition() {
+		this.host && (this.host.style.left = `${this.posX}%`, this.host.style.top = `${this.posY}%`);
+	}
+	getEdgeFromPosition() {
+		let e = Math.atan2(this.posY - 50, this.posX - 50) * 180 / Math.PI;
+		return e >= -45 && e < 45 ? "right" : e >= 45 && e < 135 ? "bottom" : e >= -135 && e < -45 ? "top" : "left";
+	}
+	applyOrientation(e) {
+		if (!this.toolbarEl) return;
+		let t = e === "left" || e === "right";
+		this.toolbarEl.classList.toggle("vertical", t);
+	}
+	togglePanel() {
+		this.panelOpen ? this.closePanel() : this.openPanel();
+	}
+	openPanel() {
+		this.panelEl && (this.panelOpen = !0, this.positionPanel(), this.panelEl.classList.add("open"));
+	}
+	closePanel() {
+		this.panelEl && (this.panelOpen = !1, this.panelEl.classList.remove("open"), this.isRecording && this.stopRecording());
+	}
+	positionPanel() {
+		this.panelEl && (this.posX > 50 ? (this.panelEl.style.right = "calc(100% + 8px)", this.panelEl.style.left = "auto") : (this.panelEl.style.left = "calc(100% + 8px)", this.panelEl.style.right = "auto"), this.posY > 70 ? (this.panelEl.style.bottom = "-4px", this.panelEl.style.top = "auto") : (this.panelEl.style.top = "-4px", this.panelEl.style.bottom = "auto"));
+	}
+	toggleRecording() {
+		this.isRecording ? this.stopRecording() : this.startRecording();
+	}
+	startRecording() {
+		this.isRecording = !0, this.kbdEl.textContent = "Press keys…", this.kbdEl.classList.add("recording"), this.recordBtn.textContent = "Cancel", this.boundRecordKeyDown = (e) => {
+			if (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), [
+				"Alt",
+				"Control",
+				"Shift",
+				"Meta"
+			].includes(e.key)) return;
+			let t = m(e);
+			this.currentHotkey = t, this.stopRecording(), k(this.config.hotkeyStorageKey, t), this.hotkeyChangeCb?.(t);
+		}, document.addEventListener("keydown", this.boundRecordKeyDown, { capture: !0 });
+	}
+	stopRecording() {
+		this.isRecording = !1, this.boundRecordKeyDown &&= (document.removeEventListener("keydown", this.boundRecordKeyDown, { capture: !0 }), null), this.updateHotkeyDisplay(), this.recordBtn && (this.recordBtn.textContent = "Record"), this.kbdEl && this.kbdEl.classList.remove("recording");
+	}
+	updateHotkeyDisplay() {
+		this.kbdEl && (this.kbdEl.textContent = this.currentHotkey || "None");
+	}
+}, P = new Set([
+	"header",
+	"nav",
+	"footer",
+	"aside",
+	"main",
+	"layout",
+	"sidebar"
+]), F = class {
+	config;
+	overlay = null;
+	callbacks = /* @__PURE__ */ new Set();
+	stateListeners = /* @__PURE__ */ new Set();
+	_isActive = !1;
+	prevCursor = "";
+	handleMouseMove = null;
+	handleClick = null;
+	handleKeyDown = null;
+	constructor(e) {
+		this.config = e;
+	}
+	get isActive() {
+		return this._isActive;
+	}
+	activate() {
+		this._isActive || (this._isActive = !0, this.stateListeners.forEach((e) => e(!0)), this.overlay = new f(this.config), this.overlay.mount(), this.prevCursor = document.body.style.cursor, document.body.style.cursor = "crosshair", this.handleMouseMove = (e) => {
+			let t = document.elementFromPoint(e.clientX, e.clientY);
+			if (!t || this.shouldIgnore(t)) {
+				this.overlay?.clearHighlight();
+				return;
+			}
+			let n = this.getVueComponent(t);
+			this.overlay?.highlight(t, this.getComponentLabelFromInstance(t, n));
+		}, this.handleClick = (e) => {
+			e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
+			let t = document.elementFromPoint(e.clientX, e.clientY);
+			if (!t || this.shouldIgnore(t)) return;
+			let n = t.outerHTML;
+			this.config.maxHtmlLength > 0 && n.length > this.config.maxHtmlLength && (n = n.slice(0, this.config.maxHtmlLength) + "<!-- truncated -->");
+			let r = {
+				element: t,
+				html: n,
+				componentStack: this.getComponentStack(t),
+				selector: this.generateSelector(t)
+			};
+			this.callbacks.forEach((e) => e(r)), this.deactivate();
+		}, this.handleKeyDown = (e) => {
+			e.key === "Escape" && (e.preventDefault(), this.deactivate());
+		}, document.addEventListener("mousemove", this.handleMouseMove, { capture: !0 }), document.addEventListener("click", this.handleClick, { capture: !0 }), document.addEventListener("keydown", this.handleKeyDown, { capture: !0 }));
+	}
+	deactivate() {
+		this._isActive && (this._isActive = !1, this.stateListeners.forEach((e) => e(!1)), this.handleMouseMove && document.removeEventListener("mousemove", this.handleMouseMove, { capture: !0 }), this.handleClick && document.removeEventListener("click", this.handleClick, { capture: !0 }), this.handleKeyDown && document.removeEventListener("keydown", this.handleKeyDown, { capture: !0 }), this.handleMouseMove = null, this.handleClick = null, this.handleKeyDown = null, this.overlay?.destroy(), this.overlay = null, document.body.style.cursor = this.prevCursor);
+	}
+	onGrab(e) {
+		return this.callbacks.add(e), () => this.callbacks.delete(e);
+	}
+	onStateChange(e) {
+		return this.stateListeners.add(e), () => this.stateListeners.delete(e);
+	}
+	toggle() {
+		this._isActive ? this.deactivate() : this.activate();
+	}
+	destroy() {
+		this.deactivate(), this.callbacks.clear(), this.stateListeners.clear();
+	}
+	updateConfig(e) {
+		this.config = c(this.config, e);
+	}
+	shouldIgnore(e) {
+		if (e.closest("#vue-grab-overlay-host, #vue-grab-fab-host")) return !0;
+		let t = e.tagName.toLowerCase();
+		if (this.config.filter.ignoreTags.includes(t)) return !0;
+		for (let t of this.config.filter.ignoreSelectors) try {
+			if (e.matches(t)) return !0;
+		} catch {}
+		if (this.config.filter.skipCommonComponents) {
+			let t = this.getVueComponent(e);
+			if (t) {
+				let e = t.type.name || t.type.__name || "";
+				if (P.has(e.toLowerCase())) return !0;
+			}
+		}
+		return !1;
+	}
+	getVueComponent(e) {
+		let t = e;
+		for (; t;) {
+			let e = t.__vueParentComponent || t.__vue_app__?._instance;
+			if (e) return e;
+			t = t.parentElement;
+		}
+		return null;
+	}
+	getComponentLabelFromInstance(e, t) {
+		if (t) {
+			let e = t.type?.name || t.type?.__name;
+			if (e) return `<${e}>`;
+		}
+		return `<${e.tagName.toLowerCase()}>`;
+	}
+	getComponentStack(e) {
+		let t = [], n = e;
+		for (; n;) {
+			let e = n.__vueParentComponent || n.__vue_app__?._instance;
+			if (e) {
+				let n = e.type?.name || e.type?.__name || "Anonymous", r = e.type?.__file, i = { name: n };
+				r && (i.filePath = r), t.push(i);
+			}
+			n = n.parentElement;
+		}
+		return t;
+	}
+	generateSelector(e) {
+		if (e.id) return `#${CSS.escape(e.id)}`;
+		let t = [], n = e;
+		for (; n && n !== document.body && n !== document.documentElement;) {
+			let e = n.tagName.toLowerCase();
+			if (n.id) {
+				t.unshift(`#${CSS.escape(n.id)}`);
+				break;
+			}
+			if (n.className && typeof n.className == "string") {
+				let t = n.className.trim().split(/\s+/).filter(Boolean);
+				t.length > 0 && (e += `.${t.slice(0, 2).map((e) => CSS.escape(e)).join(".")}`);
+			}
+			t.unshift(e), n = n.parentElement;
+		}
+		return t.join(" > ");
+	}
+};
+//#endregion
+//#region src/session.ts
+function I(e) {
+	let t = new F(e), n = new h(), r = null;
+	if (e.floatingButton.enabled) {
+		let i = new N(e.floatingButton);
+		r = i;
+		let a = i.getCurrentHotkey() || "Alt+Shift+G";
+		n.register(a, () => t.toggle()), i.setHighlightColor(e.highlightColor), i.setCurrentHotkey(a), i.onToggle(() => t.toggle()), i.onHotkeyChange((e) => {
+			n.destroy(), n.register(e, () => t.toggle()), i.setCurrentHotkey(e);
+		}), t.onStateChange((e) => i.setActive(e)), i.mount();
+	} else n.register(o, () => t.toggle());
+	return {
+		engine: t,
+		hotkeys: n,
+		fab: r,
+		destroy() {
+			t.destroy(), n.destroy(), r?.destroy();
+		}
+	};
+}
+//#endregion
+//#region src/composables/index.ts
+function L() {
+	let i = e(l, { ...s }), a = r(!1), o = r(null), c = I(i), { engine: u } = c, d = u.onGrab((e) => {
+		o.value = e;
+	}), f = u.onStateChange((e) => {
+		a.value = e;
+	});
+	return t(() => {
+		d(), f(), c.destroy();
+	}), {
+		config: i,
+		isActive: n(a),
+		lastResult: n(o),
+		activate: () => u.activate(),
+		deactivate: () => u.deactivate(),
+		toggle: () => u.toggle()
+	};
+}
+//#endregion
+//#region src/init.ts
+function R(e = {}) {
+	let t = I(c(s, e));
+	return {
+		activate: () => t.engine.activate(),
+		deactivate: () => t.engine.deactivate(),
+		onGrab: (e) => t.engine.onGrab(e),
+		destroy: () => t.destroy()
+	};
+}
+//#endregion
+export { g as FAB_HOST_ID, N as FloatingButton, l as VUE_GRAB_CONFIG_KEY, u as createVueGrab, R as init, L as useGrab };

package/dist/index.umd.js

@@ -0,0 +1,197 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VueGrab={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=`#4f46e5`,r=`#ffffff`,i=`Alt+Shift+G`,a={highlightColor:n,labelTextColor:r,showTagHint:!0,maxHtmlLength:1e4,filter:{ignoreSelectors:[],ignoreTags:[],skipCommonComponents:!1},floatingButton:{enabled:!1,initialPosition:`top-center`,storageKey:`vue-grab-fab-pos`,hotkeyStorageKey:`vue-grab-hotkey`}};function o(e,t){let{filter:n,floatingButton:r,...i}=t;return{...e,...i,filter:{...e.filter,...n},floatingButton:{...e.floatingButton,...r}}}var s=Symbol(`vue-grab-config`);function c(e={}){let t=o(a,e);return{install(e){e.provide(s,t)}}}var l=`vue-grab-overlay-host`,u=class{host=null;shadowRoot=null;highlightBox=null;labelEl=null;config;constructor(e){this.config=e}mount(){if(this.host)return;this.host=document.createElement(`div`),this.host.id=l,this.host.style.cssText=`position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;`,document.body.appendChild(this.host),this.shadowRoot=this.host.attachShadow({mode:`open`}),this.host.style.setProperty(`--grab-color`,this.config.highlightColor),this.host.style.setProperty(`--grab-label-color`,this.config.labelTextColor);let e=document.createElement(`style`);e.textContent=`
+      .grab-highlight {
+        position: fixed;
+        pointer-events: none;
+        border: 2px solid var(--grab-color);
+        background: color-mix(in srgb, var(--grab-color) 12%, transparent);
+        border-radius: 2px;
+        transition: all 0.05s ease-out;
+        display: none;
+        box-sizing: border-box;
+      }
+      .grab-label {
+        position: fixed;
+        pointer-events: none;
+        background: var(--grab-color);
+        color: var(--grab-label-color);
+        font-size: 11px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        padding: 2px 6px;
+        border-radius: 2px;
+        white-space: nowrap;
+        display: none;
+        line-height: 1.4;
+      }
+    `,this.shadowRoot.appendChild(e),this.highlightBox=document.createElement(`div`),this.highlightBox.className=`grab-highlight`,this.shadowRoot.appendChild(this.highlightBox),this.labelEl=document.createElement(`div`),this.labelEl.className=`grab-label`,this.shadowRoot.appendChild(this.labelEl)}highlight(e,t){if(!this.highlightBox||!this.labelEl)return;let n=e.getBoundingClientRect();this.highlightBox.style.top=`${n.top}px`,this.highlightBox.style.left=`${n.left}px`,this.highlightBox.style.width=`${n.width}px`,this.highlightBox.style.height=`${n.height}px`,this.highlightBox.style.display=`block`,this.config.showTagHint&&t?(this.labelEl.textContent=t,n.top>24?this.labelEl.style.top=`${n.top-20-4}px`:this.labelEl.style.top=`${n.bottom+4}px`,this.labelEl.style.left=`${n.left}px`,this.labelEl.style.display=`block`):this.labelEl.style.display=`none`}clearHighlight(){this.highlightBox&&(this.highlightBox.style.display=`none`),this.labelEl&&(this.labelEl.style.display=`none`)}destroy(){this.host&&(this.host.remove(),this.host=null,this.shadowRoot=null,this.highlightBox=null,this.labelEl=null)}};function d(e){let t=e.split(`+`).map(e=>e.trim().toLowerCase());return{key:t[t.length-1],alt:t.includes(`alt`),ctrl:t.includes(`ctrl`)||t.includes(`control`),shift:t.includes(`shift`),meta:t.includes(`meta`)||t.includes(`cmd`)||t.includes(`command`)}}function f(e){let t=[];e.ctrlKey&&t.push(`Ctrl`),e.altKey&&t.push(`Alt`),e.shiftKey&&t.push(`Shift`),e.metaKey&&t.push(`Meta`);let n=e.key.length===1?e.key.toUpperCase():e.key;return t.push(n),t.join(`+`)}var p=class{cleanups=[];register(e,t){let n=d(e),r=e=>{e.key.toLowerCase()===n.key&&e.altKey===n.alt&&e.ctrlKey===n.ctrl&&e.shiftKey===n.shift&&e.metaKey===n.meta&&(e.preventDefault(),t())};document.addEventListener(`keydown`,r,{capture:!0}),this.cleanups.push(()=>document.removeEventListener(`keydown`,r,{capture:!0}))}destroy(){this.cleanups.forEach(e=>e()),this.cleanups=[]}},m=`vue-grab-fab-host`,h=3,g=`left 0.3s ease, top 0.3s ease`,_=3,v=5;function y(){return _*window.innerHeight/window.innerWidth}var b={"bottom-right":{x:97,y:85},"bottom-left":{x:3,y:85},"top-right":{x:97,y:15},"top-left":{x:3,y:15},"top-center":{x:50,y:3}};function x(e,t,n){return Math.min(Math.max(e,t),n)}function S(e,t){if(!e)return null;try{let n=localStorage.getItem(e);return n?t(n):null}catch{return null}}function C(e,t){if(e)try{localStorage.setItem(e,t)}catch{}}function w(e){return S(e,e=>{let{x:t,y:n}=JSON.parse(e);return typeof t==`number`&&typeof n==`number`?{x:t,y:n}:null})}function T(e,t,n){C(e,JSON.stringify({x:t,y:n}))}function E(e){return S(e,e=>typeof e==`string`?e:null)}function D(e,t){C(e,t)}var O=`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/><line x1="12" y1="15" x2="12" y2="9"/><line x1="9" y1="12" x2="15" y2="12"/></svg>`,k=`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`,A=`
+  :host {
+    all: initial;
+  }
+  .toolbar {
+    display: inline-flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 4px;
+    gap: 2px;
+    border-radius: 8px;
+    border: 1px solid rgba(255,255,255,0.1);
+    background: rgba(30,30,30,0.85);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+    position: relative;
+  }
+  .toolbar.dragging {
+    cursor: grabbing;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+  }
+  .toolbar-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: none;
+    background: transparent;
+    color: #a0a0a0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+  }
+  .toolbar-btn:hover {
+    color: #e0e0e0;
+    background: rgba(255,255,255,0.08);
+  }
+  .grab-btn.active {
+    color: var(--grab-color, #4f46e5);
+    box-shadow: inset 0 0 0 1.5px var(--grab-color, #4f46e5);
+    background: color-mix(in srgb, var(--grab-color, #4f46e5) 12%, transparent);
+  }
+  .toolbar-divider {
+    width: 1px;
+    height: 18px;
+    background: rgba(255,255,255,0.12);
+    margin: 0 2px;
+  }
+
+  .panel {
+    position: absolute;
+    width: 240px;
+    background: rgba(25,25,25,0.94);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 12px;
+    color: #e0e0e0;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 13px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+    padding: 14px;
+    display: none;
+    z-index: 1;
+  }
+  .panel.open {
+    display: block;
+  }
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    font-weight: 600;
+    font-size: 13px;
+    color: #fff;
+  }
+  .panel-close {
+    background: none;
+    border: none;
+    color: #888;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    padding: 0 2px;
+  }
+  .panel-close:hover {
+    color: #fff;
+  }
+  .panel-label {
+    font-size: 11px;
+    color: #888;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .hotkey-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  kbd {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(255,255,255,0.08);
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 12px;
+    color: #ddd;
+    min-width: 80px;
+    justify-content: center;
+    flex: 1;
+  }
+  kbd.recording {
+    border-color: var(--grab-color, #4f46e5);
+    box-shadow: 0 0 0 1px var(--grab-color, #4f46e5);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+  .record-btn {
+    background: rgba(255,255,255,0.08);
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 6px;
+    color: #ccc;
+    padding: 4px 10px;
+    font-size: 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-family: inherit;
+  }
+  .record-btn:hover {
+    background: rgba(255,255,255,0.14);
+    color: #fff;
+  }
+  .panel-hint {
+    margin-top: 12px;
+    font-size: 11px;
+    color: #555;
+    text-align: center;
+  }
+  .toolbar.vertical {
+    flex-direction: column;
+    height: auto;
+    width: 36px;
+    padding: 4px 0;
+  }
+  .toolbar.vertical .toolbar-divider {
+    width: 18px;
+    height: 1px;
+    margin: 2px 0;
+  }
+`,j=class{host=null;shadowRoot=null;toolbarEl=null;btnEl=null;gearEl=null;panelEl=null;kbdEl=null;recordBtn=null;config;posX=97;posY=85;isDragging=!1;wasDragged=!1;dragPointerId=-1;dragStartX=0;dragStartY=0;dragOffsetX=0;dragOffsetY=0;panelOpen=!1;isRecording=!1;currentHotkey=``;toggleCb=null;hotkeyChangeCb=null;boundPointerDown=null;boundPointerMove=null;boundPointerUp=null;boundDocClick=null;boundDocKeyDown=null;boundRecordKeyDown=null;constructor(e){this.config=e;let t=b[e.initialPosition]??b[`bottom-right`],n=w(e.storageKey);n?(this.posX=n.x,this.posY=n.y):(this.posX=t.x,this.posY=t.y,this.posX<=v?this.posX=y():this.posX>=100-v&&(this.posX=100-y())),this.currentHotkey=E(e.hotkeyStorageKey)??``}getCurrentHotkey(){return this.currentHotkey}mount(){if(this.host)return;this.host=document.createElement(`div`),this.host.id=m,this.host.style.cssText=`position:fixed;z-index:2147483646;pointer-events:auto;transform:translate(-50%,-50%);transition:${g};`,this.applyPosition(),document.body.appendChild(this.host),this.shadowRoot=this.host.attachShadow({mode:`open`});let e=document.createElement(`style`);e.textContent=A,this.shadowRoot.appendChild(e),this.toolbarEl=document.createElement(`div`),this.toolbarEl.className=`toolbar`,this.btnEl=document.createElement(`div`),this.btnEl.className=`toolbar-btn grab-btn`,this.btnEl.innerHTML=O,this.toolbarEl.appendChild(this.btnEl);let t=document.createElement(`div`);t.className=`toolbar-divider`,this.toolbarEl.appendChild(t),this.gearEl=document.createElement(`div`),this.gearEl.className=`toolbar-btn gear-btn`,this.gearEl.innerHTML=k,this.toolbarEl.appendChild(this.gearEl),this.panelEl=document.createElement(`div`),this.panelEl.className=`panel`,this.panelEl.innerHTML=`
+      <div class="panel-header">
+        <span>Settings</span>
+        <button class="panel-close" data-action="close">&times;</button>
+      </div>
+      <div class="panel-label">Hotkey</div>
+      <div class="hotkey-row">
+        <kbd></kbd>
+        <button class="record-btn">Record</button>
+      </div>
+      <div class="panel-hint">Drag toolbar to reposition</div>
+    `,this.toolbarEl.appendChild(this.panelEl),this.shadowRoot.appendChild(this.toolbarEl),this.kbdEl=this.panelEl.querySelector(`kbd`),this.recordBtn=this.panelEl.querySelector(`.record-btn`),this.updateHotkeyDisplay(),this.applyOrientation(this.getEdgeFromPosition()),this.boundPointerDown=this.onPointerDown.bind(this),this.boundPointerMove=this.onPointerMove.bind(this),this.boundPointerUp=this.onPointerUp.bind(this),this.toolbarEl.addEventListener(`pointerdown`,this.boundPointerDown),this.toolbarEl.addEventListener(`pointermove`,this.boundPointerMove),this.toolbarEl.addEventListener(`pointerup`,this.boundPointerUp),this.btnEl.addEventListener(`click`,e=>{if(e.stopPropagation(),!this.wasDragged){if(this.panelOpen){this.closePanel();return}this.toggleCb?.()}}),this.gearEl.addEventListener(`click`,e=>{e.stopPropagation(),!this.wasDragged&&this.togglePanel()}),this.panelEl.querySelector(`[data-action=close]`).addEventListener(`click`,e=>{e.stopPropagation(),this.closePanel()}),this.recordBtn.addEventListener(`click`,e=>{e.stopPropagation(),this.toggleRecording()}),this.boundDocClick=e=>{this.panelOpen&&(e.composedPath().includes(this.host)||this.closePanel())},document.addEventListener(`click`,this.boundDocClick,{capture:!0}),this.boundDocKeyDown=e=>{e.key===`Escape`&&(this.isRecording?(this.stopRecording(),e.preventDefault(),e.stopPropagation()):this.panelOpen&&(this.closePanel(),e.preventDefault(),e.stopPropagation()))},document.addEventListener(`keydown`,this.boundDocKeyDown,{capture:!0})}destroy(){this.boundDocClick&&document.removeEventListener(`click`,this.boundDocClick,{capture:!0}),this.boundDocKeyDown&&document.removeEventListener(`keydown`,this.boundDocKeyDown,{capture:!0}),this.boundRecordKeyDown&&document.removeEventListener(`keydown`,this.boundRecordKeyDown,{capture:!0}),this.host&&(this.host.remove(),this.host=null,this.shadowRoot=null,this.toolbarEl=null,this.btnEl=null,this.gearEl=null,this.panelEl=null,this.kbdEl=null,this.recordBtn=null)}setActive(e){this.btnEl&&(e?this.btnEl.classList.add(`active`):this.btnEl.classList.remove(`active`))}setHighlightColor(e){this.host?.style.setProperty(`--grab-color`,e)}setCurrentHotkey(e){this.currentHotkey=e,this.updateHotkeyDisplay()}onToggle(e){this.toggleCb=e}onHotkeyChange(e){this.hotkeyChangeCb=e}onPointerDown(e){if(e.button!==0)return;this.isDragging=!0,this.wasDragged=!1,this.dragPointerId=e.pointerId,this.dragStartX=e.clientX,this.dragStartY=e.clientY;let t=this.toolbarEl.getBoundingClientRect();this.dragOffsetX=e.clientX-t.left-t.width/2,this.dragOffsetY=e.clientY-t.top-t.height/2,this.host.style.transition=`none`}onPointerMove(e){if(!this.isDragging)return;let t=e.clientX-this.dragStartX,n=e.clientY-this.dragStartY;!this.wasDragged&&Math.abs(t)<h&&Math.abs(n)<h||(this.wasDragged||(this.wasDragged=!0,this.toolbarEl.setPointerCapture(this.dragPointerId),this.toolbarEl.classList.add(`dragging`)),this.posX=x((e.clientX-this.dragOffsetX)/window.innerWidth*100,2,98),this.posY=x((e.clientY-this.dragOffsetY)/window.innerHeight*100,2,98),this.applyPosition())}onPointerUp(e){this.isDragging&&(this.isDragging=!1,this.toolbarEl.releasePointerCapture(e.pointerId),this.toolbarEl.classList.remove(`dragging`),this.wasDragged&&(this.host.style.transition=g,this.snapToEdge(),T(this.config.storageKey,this.posX,this.posY)))}snapToEdge(){let e=this.getEdgeFromPosition(),t=y();e===`right`?this.posX=100-t:e===`bottom`?this.posY=100-_:e===`top`?this.posY=_:this.posX=t,this.applyPosition(),this.applyOrientation(e),this.panelOpen&&this.positionPanel()}applyPosition(){this.host&&(this.host.style.left=`${this.posX}%`,this.host.style.top=`${this.posY}%`)}getEdgeFromPosition(){let e=Math.atan2(this.posY-50,this.posX-50)*180/Math.PI;return e>=-45&&e<45?`right`:e>=45&&e<135?`bottom`:e>=-135&&e<-45?`top`:`left`}applyOrientation(e){if(!this.toolbarEl)return;let t=e===`left`||e===`right`;this.toolbarEl.classList.toggle(`vertical`,t)}togglePanel(){this.panelOpen?this.closePanel():this.openPanel()}openPanel(){this.panelEl&&(this.panelOpen=!0,this.positionPanel(),this.panelEl.classList.add(`open`))}closePanel(){this.panelEl&&(this.panelOpen=!1,this.panelEl.classList.remove(`open`),this.isRecording&&this.stopRecording())}positionPanel(){this.panelEl&&(this.posX>50?(this.panelEl.style.right=`calc(100% + 8px)`,this.panelEl.style.left=`auto`):(this.panelEl.style.left=`calc(100% + 8px)`,this.panelEl.style.right=`auto`),this.posY>70?(this.panelEl.style.bottom=`-4px`,this.panelEl.style.top=`auto`):(this.panelEl.style.top=`-4px`,this.panelEl.style.bottom=`auto`))}toggleRecording(){this.isRecording?this.stopRecording():this.startRecording()}startRecording(){this.isRecording=!0,this.kbdEl.textContent=`Press keys…`,this.kbdEl.classList.add(`recording`),this.recordBtn.textContent=`Cancel`,this.boundRecordKeyDown=e=>{if(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),[`Alt`,`Control`,`Shift`,`Meta`].includes(e.key))return;let t=f(e);this.currentHotkey=t,this.stopRecording(),D(this.config.hotkeyStorageKey,t),this.hotkeyChangeCb?.(t)},document.addEventListener(`keydown`,this.boundRecordKeyDown,{capture:!0})}stopRecording(){this.isRecording=!1,this.boundRecordKeyDown&&=(document.removeEventListener(`keydown`,this.boundRecordKeyDown,{capture:!0}),null),this.updateHotkeyDisplay(),this.recordBtn&&(this.recordBtn.textContent=`Record`),this.kbdEl&&this.kbdEl.classList.remove(`recording`)}updateHotkeyDisplay(){this.kbdEl&&(this.kbdEl.textContent=this.currentHotkey||`None`)}},M=new Set([`header`,`nav`,`footer`,`aside`,`main`,`layout`,`sidebar`]),N=class{config;overlay=null;callbacks=new Set;stateListeners=new Set;_isActive=!1;prevCursor=``;handleMouseMove=null;handleClick=null;handleKeyDown=null;constructor(e){this.config=e}get isActive(){return this._isActive}activate(){this._isActive||(this._isActive=!0,this.stateListeners.forEach(e=>e(!0)),this.overlay=new u(this.config),this.overlay.mount(),this.prevCursor=document.body.style.cursor,document.body.style.cursor=`crosshair`,this.handleMouseMove=e=>{let t=document.elementFromPoint(e.clientX,e.clientY);if(!t||this.shouldIgnore(t)){this.overlay?.clearHighlight();return}let n=this.getVueComponent(t);this.overlay?.highlight(t,this.getComponentLabelFromInstance(t,n))},this.handleClick=e=>{e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation();let t=document.elementFromPoint(e.clientX,e.clientY);if(!t||this.shouldIgnore(t))return;let n=t.outerHTML;this.config.maxHtmlLength>0&&n.length>this.config.maxHtmlLength&&(n=n.slice(0,this.config.maxHtmlLength)+`<!-- truncated -->`);let r={element:t,html:n,componentStack:this.getComponentStack(t),selector:this.generateSelector(t)};this.callbacks.forEach(e=>e(r)),this.deactivate()},this.handleKeyDown=e=>{e.key===`Escape`&&(e.preventDefault(),this.deactivate())},document.addEventListener(`mousemove`,this.handleMouseMove,{capture:!0}),document.addEventListener(`click`,this.handleClick,{capture:!0}),document.addEventListener(`keydown`,this.handleKeyDown,{capture:!0}))}deactivate(){this._isActive&&(this._isActive=!1,this.stateListeners.forEach(e=>e(!1)),this.handleMouseMove&&document.removeEventListener(`mousemove`,this.handleMouseMove,{capture:!0}),this.handleClick&&document.removeEventListener(`click`,this.handleClick,{capture:!0}),this.handleKeyDown&&document.removeEventListener(`keydown`,this.handleKeyDown,{capture:!0}),this.handleMouseMove=null,this.handleClick=null,this.handleKeyDown=null,this.overlay?.destroy(),this.overlay=null,document.body.style.cursor=this.prevCursor)}onGrab(e){return this.callbacks.add(e),()=>this.callbacks.delete(e)}onStateChange(e){return this.stateListeners.add(e),()=>this.stateListeners.delete(e)}toggle(){this._isActive?this.deactivate():this.activate()}destroy(){this.deactivate(),this.callbacks.clear(),this.stateListeners.clear()}updateConfig(e){this.config=o(this.config,e)}shouldIgnore(e){if(e.closest(`#vue-grab-overlay-host, #vue-grab-fab-host`))return!0;let t=e.tagName.toLowerCase();if(this.config.filter.ignoreTags.includes(t))return!0;for(let t of this.config.filter.ignoreSelectors)try{if(e.matches(t))return!0}catch{}if(this.config.filter.skipCommonComponents){let t=this.getVueComponent(e);if(t){let e=t.type.name||t.type.__name||``;if(M.has(e.toLowerCase()))return!0}}return!1}getVueComponent(e){let t=e;for(;t;){let e=t.__vueParentComponent||t.__vue_app__?._instance;if(e)return e;t=t.parentElement}return null}getComponentLabelFromInstance(e,t){if(t){let e=t.type?.name||t.type?.__name;if(e)return`<${e}>`}return`<${e.tagName.toLowerCase()}>`}getComponentStack(e){let t=[],n=e;for(;n;){let e=n.__vueParentComponent||n.__vue_app__?._instance;if(e){let n=e.type?.name||e.type?.__name||`Anonymous`,r=e.type?.__file,i={name:n};r&&(i.filePath=r),t.push(i)}n=n.parentElement}return t}generateSelector(e){if(e.id)return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.body&&n!==document.documentElement;){let e=n.tagName.toLowerCase();if(n.id){t.unshift(`#${CSS.escape(n.id)}`);break}if(n.className&&typeof n.className==`string`){let t=n.className.trim().split(/\s+/).filter(Boolean);t.length>0&&(e+=`.${t.slice(0,2).map(e=>CSS.escape(e)).join(`.`)}`)}t.unshift(e),n=n.parentElement}return t.join(` > `)}};function P(e){let t=new N(e),n=new p,r=null;if(e.floatingButton.enabled){let i=new j(e.floatingButton);r=i;let a=i.getCurrentHotkey()||`Alt+Shift+G`;n.register(a,()=>t.toggle()),i.setHighlightColor(e.highlightColor),i.setCurrentHotkey(a),i.onToggle(()=>t.toggle()),i.onHotkeyChange(e=>{n.destroy(),n.register(e,()=>t.toggle()),i.setCurrentHotkey(e)}),t.onStateChange(e=>i.setActive(e)),i.mount()}else n.register(i,()=>t.toggle());return{engine:t,hotkeys:n,fab:r,destroy(){t.destroy(),n.destroy(),r?.destroy()}}}function F(){let e=(0,t.inject)(s,{...a}),n=(0,t.ref)(!1),r=(0,t.ref)(null),i=P(e),{engine:o}=i,c=o.onGrab(e=>{r.value=e}),l=o.onStateChange(e=>{n.value=e});return(0,t.onUnmounted)(()=>{c(),l(),i.destroy()}),{config:e,isActive:(0,t.readonly)(n),lastResult:(0,t.readonly)(r),activate:()=>o.activate(),deactivate:()=>o.deactivate(),toggle:()=>o.toggle()}}function I(e={}){let t=P(o(a,e));return{activate:()=>t.engine.activate(),deactivate:()=>t.engine.deactivate(),onGrab:e=>t.engine.onGrab(e),destroy:()=>t.destroy()}}e.FAB_HOST_ID=m,e.FloatingButton=j,e.VUE_GRAB_CONFIG_KEY=s,e.createVueGrab=c,e.init=I,e.useGrab=F});

package/dist/init.d.ts

@@ -0,0 +1,11 @@
+import { GrabConfig, GrabResult } from '@sakana-y/vue-grab-shared';
+/**
+ * Standalone initialization for non-Vue contexts (e.g., script tag usage).
+ */
+export declare function init(options?: Partial<GrabConfig>): {
+    activate: () => void;
+    deactivate: () => void;
+    onGrab: (cb: (result: GrabResult) => void) => () => void;
+    destroy: () => void;
+};
+//# sourceMappingURL=init.d.ts.map

package/dist/init.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../src/init.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIxE;;GAEG;AACH,wBAAgB,IAAI,CAAC,OAAO,GAAE,OAAO,CAAC,UAAU,CAAM;;;iBAOrC,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI;;EAG5C"}

package/dist/overlay/index.d.ts

@@ -0,0 +1,16 @@
+import { GrabConfig } from '@sakana-y/vue-grab-shared';
+declare const OVERLAY_HOST_ID = "vue-grab-overlay-host";
+export declare class GrabOverlay {
+    private host;
+    private shadowRoot;
+    private highlightBox;
+    private labelEl;
+    private config;
+    constructor(config: Pick<GrabConfig, "highlightColor" | "labelTextColor" | "showTagHint">);
+    mount(): void;
+    highlight(el: Element, label?: string): void;
+    clearHighlight(): void;
+    destroy(): void;
+}
+export { OVERLAY_HOST_ID };
+//# sourceMappingURL=index.d.ts.map

package/dist/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,QAAA,MAAM,eAAe,0BAA0B,CAAC;AAEhD,qBAAa,WAAW;IACtB,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,MAAM,CAAwE;gBAE1E,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,aAAa,CAAC;IAIzF,KAAK,IAAI,IAAI;IAoDb,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;IA2B5C,cAAc,IAAI,IAAI;IAKtB,OAAO,IAAI,IAAI;CAShB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/plugin.d.ts

@@ -0,0 +1,7 @@
+import { App, InjectionKey } from 'vue';
+import { GrabConfig } from '@sakana-y/vue-grab-shared';
+export declare const VUE_GRAB_CONFIG_KEY: InjectionKey<GrabConfig>;
+export declare function createVueGrab(options?: Partial<GrabConfig>): {
+    install(app: App): void;
+};
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAG5D,eAAO,MAAM,mBAAmB,EAAE,YAAY,CAAC,UAAU,CAA6B,CAAC;AAEvF,wBAAgB,aAAa,CAAC,OAAO,GAAE,OAAO,CAAC,UAAU,CAAM;iBAI9C,GAAG;EAInB"}

package/dist/session.d.ts

@@ -0,0 +1,17 @@
+import { GrabConfig } from '@sakana-y/vue-grab-shared';
+import { GrabEngine } from './core';
+import { HotkeyManager } from './hotkeys';
+import { FloatingButton } from './floating-button';
+export interface GrabSession {
+    engine: GrabEngine;
+    hotkeys: HotkeyManager;
+    fab: FloatingButton | null;
+    destroy: () => void;
+}
+/**
+ * Creates a GrabEngine + HotkeyManager pair with the default hotkey wired up.
+ * Optionally creates a FloatingButton when config.floatingButton.enabled is true.
+ * Shared setup used by both the Vue composable and the standalone `init()`.
+ */
+export declare function createGrabSession(config: GrabConfig): GrabSession;
+//# sourceMappingURL=session.d.ts.map

package/dist/session.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session.d.ts","sourceRoot":"","sources":["../src/session.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,GAAG,EAAE,cAAc,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,GAAG,WAAW,CAkCjE"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@sakana-y/vue-grab",
+  "version": "0.0.1",
+  "private": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/index.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sakana-y/vue-grab-shared": "0.0.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitest/browser": "^4.1.0",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vue/test-utils": "^2.4.6",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.1.0",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}