@akccakcctw/vue-grab 1.0.0 → 1.3.0

package/dist/core/widget.js

@@ -0,0 +1,251 @@
+const CURSOR_ICON = `<svg data-v-6fdbd1c9="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="height: 1.2em; width: 1.2em; pointer-events: none;"><g data-v-6fdbd1c9="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle data-v-6fdbd1c9="" cx="12" cy="12" r=".5" fill="currentColor"></circle><path data-v-6fdbd1c9="" d="M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2"></path></g></svg>`;
+const CHEVRON_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" style="transform: rotate(180deg); pointer-events: none;"><path d="m18 15-6-6-6 6"></path></svg>`;
+function createToolbar(targetWindow) {
+    const doc = targetWindow.document;
+    const container = doc.createElement('div');
+    // Outer Container Styles
+    Object.assign(container.style, {
+        position: 'fixed',
+        left: '16px',
+        top: '16px',
+        zIndex: '2147483647',
+        fontFamily: 'sans-serif',
+        fontSize: '13px',
+        userSelect: 'none',
+        cursor: 'grab',
+        filter: 'drop-shadow(0px 0px 4px rgba(81, 81, 81, 0.5))',
+        transition: 'opacity 300ms ease-out, padding 0.2s ease',
+        opacity: '1',
+    });
+    container.setAttribute('data-vue-grab-toolbar', '');
+    container.setAttribute('data-vue-grab-ignore-events', '');
+    const inner = doc.createElement('div');
+    Object.assign(inner.style, {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '4px',
+        backgroundColor: 'white',
+        gap: '6px',
+        padding: '6px 8px',
+        transition: 'gap 0.2s ease, padding 0.2s ease',
+    });
+    // Toggle Button Wrapper
+    const toggleWrapper = doc.createElement('div');
+    Object.assign(toggleWrapper.style, {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        overflow: 'hidden',
+        maxWidth: '200px',
+        transition: 'max-width 0.2s ease, opacity 0.2s ease'
+    });
+    // Toggle Button
+    const toggleBtn = doc.createElement('button');
+    toggleBtn.setAttribute('data-vue-grab-toggle', '');
+    Object.assign(toggleBtn.style, {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        border: 'none',
+        background: 'transparent',
+        padding: '0',
+        transition: 'transform 0.1s',
+        color: 'rgba(0, 0, 0, 0.7)'
+    });
+    toggleBtn.innerHTML = CURSOR_ICON;
+    toggleBtn.onmouseenter = () => toggleBtn.style.transform = 'scale(1.05)';
+    toggleBtn.onmouseleave = () => toggleBtn.style.transform = 'scale(1)';
+    toggleWrapper.appendChild(toggleBtn);
+    // Collapse Button
+    const collapseBtn = doc.createElement('button');
+    collapseBtn.setAttribute('data-vue-grab-collapse', '');
+    Object.assign(collapseBtn.style, {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        border: 'none',
+        background: 'transparent',
+        padding: '0',
+        transition: 'transform 0.1s',
+        color: '#B3B3B3'
+    });
+    collapseBtn.innerHTML = CHEVRON_ICON;
+    collapseBtn.onmouseenter = () => collapseBtn.style.transform = 'scale(1.05)';
+    collapseBtn.onmouseleave = () => collapseBtn.style.transform = 'scale(1)';
+    inner.appendChild(toggleWrapper);
+    inner.appendChild(collapseBtn);
+    container.appendChild(inner);
+    return { container, toggleBtn, collapseBtn, toggleWrapper };
+}
+function setButtonState(toggleBtn, active) {
+    // Use color to indicate state: Blue for active, Gray for inactive
+    toggleBtn.style.color = active ? '#3b82f6' : 'rgba(0, 0, 0, 0.7)';
+}
+export function createToggleWidget(targetWindow, options) {
+    let elements = null;
+    let mounted = false;
+    let isActive = false;
+    let isCollapsed = false;
+    let lastPosition = {
+        left: '',
+        top: '',
+        right: '',
+        bottom: ''
+    };
+    const defaultInnerGap = '6px';
+    const defaultInnerPadding = '6px 8px';
+    const dragState = {
+        dragging: false,
+        offsetX: 0,
+        offsetY: 0,
+        moved: false
+    };
+    const startDrag = (event) => {
+        if (!elements)
+            return;
+        // Don't drag if clicking buttons directly might be better handled by stopPropagation, 
+        // but here we allow dragging from anywhere on the container.
+        // However, if we click a button, we might want to prevent drag start or ensure click works?
+        // Usually standard behavior: mousedown + mouseup without move = click. mousedown + move = drag.
+        dragState.dragging = true;
+        dragState.moved = false;
+        const rect = elements.container.getBoundingClientRect();
+        dragState.offsetX = event.clientX - rect.left;
+        dragState.offsetY = event.clientY - rect.top;
+        // Switch to explicit coords for dragging
+        elements.container.style.right = 'auto';
+        elements.container.style.bottom = 'auto';
+        elements.container.style.left = `${rect.left}px`;
+        elements.container.style.top = `${rect.top}px`;
+        elements.container.style.cursor = 'grabbing';
+    };
+    const onDrag = (event) => {
+        if (!elements || !dragState.dragging)
+            return;
+        dragState.moved = true;
+        const nextLeft = event.clientX - dragState.offsetX;
+        const nextTop = event.clientY - dragState.offsetY;
+        const maxLeft = targetWindow.innerWidth - elements.container.offsetWidth;
+        const maxTop = targetWindow.innerHeight - elements.container.offsetHeight;
+        const clampedLeft = Math.max(0, Math.min(maxLeft, nextLeft));
+        const clampedTop = Math.max(0, Math.min(maxTop, nextTop));
+        elements.container.style.left = `${clampedLeft}px`;
+        elements.container.style.top = `${clampedTop}px`;
+    };
+    const endDrag = () => {
+        if (!elements)
+            return;
+        dragState.dragging = false;
+        elements.container.style.cursor = 'grab';
+    };
+    const toggleCollapse = () => {
+        if (!elements)
+            return;
+        const { container, toggleWrapper, collapseBtn } = elements;
+        const inner = container.firstElementChild;
+        const svg = collapseBtn.querySelector('svg');
+        if (!isCollapsed) {
+            const rect = container.getBoundingClientRect();
+            lastPosition = {
+                left: container.style.left,
+                top: container.style.top,
+                right: container.style.right,
+                bottom: container.style.bottom
+            };
+            const stickLeft = rect.left + rect.width / 2 < targetWindow.innerWidth / 2;
+            container.style.top = `${rect.top}px`;
+            if (stickLeft) {
+                container.style.left = '0px';
+                container.style.right = 'auto';
+            }
+            else {
+                container.style.left = 'auto';
+                container.style.right = '0px';
+            }
+            container.style.bottom = 'auto';
+            container.style.transform = 'scale(0.8)';
+            container.style.padding = '0';
+            toggleWrapper.style.maxWidth = '0px';
+            toggleWrapper.style.opacity = '0';
+            toggleWrapper.style.pointerEvents = 'none';
+            if (inner) {
+                inner.style.gap = '0';
+                inner.style.padding = '6px';
+            }
+            if (svg)
+                svg.style.transform = 'rotate(0deg)';
+            isCollapsed = true;
+        }
+        else {
+            container.style.left = lastPosition.left;
+            container.style.top = lastPosition.top;
+            container.style.right = lastPosition.right;
+            container.style.bottom = lastPosition.bottom;
+            container.style.transform = 'scale(1)';
+            container.style.padding = '';
+            toggleWrapper.style.maxWidth = '200px';
+            toggleWrapper.style.opacity = '1';
+            toggleWrapper.style.pointerEvents = 'auto';
+            if (inner) {
+                inner.style.gap = defaultInnerGap;
+                inner.style.padding = defaultInnerPadding;
+            }
+            if (svg)
+                svg.style.transform = 'rotate(180deg)';
+            isCollapsed = false;
+        }
+    };
+    return {
+        mount() {
+            if (mounted)
+                return;
+            mounted = true;
+            elements = createToolbar(targetWindow);
+            if (!elements)
+                return;
+            setButtonState(elements.toggleBtn, isActive);
+            // Drag listeners on the container
+            elements.container.addEventListener('mousedown', startDrag);
+            // Toggle logic
+            elements.toggleBtn.addEventListener('click', (event) => {
+                event.preventDefault();
+                event.stopPropagation(); // Prevent affecting container?
+                if (dragState.moved)
+                    return; // Prevent toggle if it was a drag
+                isActive = !isActive;
+                setButtonState(elements.toggleBtn, isActive);
+                options.onToggle(isActive);
+            });
+            // Collapse logic (Placeholder)
+            elements.collapseBtn.addEventListener('click', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                if (dragState.moved)
+                    return;
+                toggleCollapse();
+            });
+            targetWindow.addEventListener('mousemove', onDrag);
+            targetWindow.addEventListener('mouseup', endDrag);
+            targetWindow.document.body.appendChild(elements.container);
+        },
+        unmount() {
+            if (!mounted || !elements)
+                return;
+            mounted = false;
+            elements.container.removeEventListener('mousedown', startDrag);
+            elements.container.remove();
+            elements = null;
+            targetWindow.removeEventListener('mousemove', onDrag);
+            targetWindow.removeEventListener('mouseup', endDrag);
+        },
+        setActive(active) {
+            isActive = active;
+            if (!elements)
+                return;
+            setButtonState(elements.toggleBtn, active);
+        }
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { createVueGrabAPI, installVueGrab } from './core/api.js';
+export type { VueGrabOptions } from './core/api.js';
+export type { OverlayOptions, OverlayStyle } from './core/overlay.js';
+export { createToggleWidget } from './core/widget.js';
+export { identifyComponent, extractMetadata } from './core/identifier.js';
+export { createOverlayController } from './core/overlay.js';
+export { createVueGrabPlugin } from './plugin.js';
+export { default } from './plugin.js';
+export { createVueGrabVitePlugin } from './vite.js';
+export type { VueGrabVitePluginOptions } from './vite.js';

package/dist/index.js

@@ -0,0 +1,7 @@
+export { createVueGrabAPI, installVueGrab } from './core/api.js';
+export { createToggleWidget } from './core/widget.js';
+export { identifyComponent, extractMetadata } from './core/identifier.js';
+export { createOverlayController } from './core/overlay.js';
+export { createVueGrabPlugin } from './plugin.js';
+export { default } from './plugin.js';
+export { createVueGrabVitePlugin } from './vite.js';

package/dist/nuxt/module.d.ts

@@ -0,0 +1,8 @@
+export type VueGrabNuxtModuleOptions = {
+    enabled?: boolean;
+    overlayStyle?: Record<string, string>;
+    copyOnClick?: boolean;
+    rootDir?: string;
+};
+declare const _default: NuxtModule<TOptions, TOptions, false>;
+export default _default;

package/dist/nuxt/module.js

@@ -0,0 +1,40 @@
+import { addPlugin, createResolver, defineNuxtModule, addVitePlugin } from '@nuxt/kit';
+import { createVueGrabVitePlugin } from '../vite.js';
+export default defineNuxtModule({
+    meta: {
+        name: 'vue-grab',
+        configKey: 'vueGrab'
+    },
+    defaults: {
+        enabled: true
+    },
+    setup(options, nuxt) {
+        if (options.enabled === false)
+            return;
+        const shouldEnable = nuxt.options.dev || options.enabled === true;
+        if (!shouldEnable)
+            return;
+        const publicConfig = (nuxt.options.runtimeConfig.public ||= {});
+        const { enabled, overlayStyle, copyOnClick, rootDir } = options;
+        publicConfig.vueGrab = {
+            ...publicConfig.vueGrab,
+            enabled,
+            overlayStyle,
+            copyOnClick,
+            rootDir: rootDir || nuxt.options.rootDir
+        };
+        nuxt.options.build.transpile = nuxt.options.build.transpile || [];
+        if (!nuxt.options.build.transpile.includes('vue-grab')) {
+            nuxt.options.build.transpile.push('vue-grab');
+        }
+        const resolver = createResolver(import.meta.url);
+        addPlugin({
+            src: resolver.resolve('./runtime/plugin'),
+            mode: 'client'
+        });
+        addVitePlugin(createVueGrabVitePlugin({
+            enabled: true,
+            rootDir: rootDir || nuxt.options.rootDir
+        }));
+    }
+});

package/dist/nuxt/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/nuxt/runtime/plugin.js

@@ -0,0 +1,14 @@
+import { defineNuxtPlugin, useRuntimeConfig } from '#app';
+import { installVueGrab } from '../../core/api.js';
+export default defineNuxtPlugin(() => {
+    const config = useRuntimeConfig().public?.vueGrab ?? {};
+    if (config.enabled === false)
+        return;
+    if (typeof window === 'undefined')
+        return;
+    installVueGrab(window, {
+        overlayStyle: config.overlayStyle,
+        copyOnClick: config.copyOnClick,
+        rootDir: config.rootDir
+    });
+});

package/dist/plugin.d.ts

@@ -0,0 +1,11 @@
+import type { VueGrabOptions } from './core/api.js';
+export type VueGrabPluginOptions = VueGrabOptions & {
+    enabled?: boolean;
+};
+export declare function createVueGrabPlugin(options?: VueGrabPluginOptions): {
+    install(): void;
+};
+declare const _default: {
+    install(): void;
+};
+export default _default;

package/dist/plugin.js

@@ -0,0 +1,47 @@
+import { installVueGrab } from './core/api.js';
+function isDevEnvironment() {
+    if (typeof import.meta !== 'undefined' && import.meta.env) {
+        return Boolean(import.meta.env.DEV);
+    }
+    try {
+        const globalScope = typeof globalThis !== 'undefined' ? globalThis :
+            typeof window !== 'undefined' ? window :
+                typeof self !== 'undefined' ? self :
+                    typeof global !== 'undefined' ? global : {};
+        const proc = globalScope.process;
+        if (proc && proc.env) {
+            return proc.env.NODE_ENV !== 'production';
+        }
+    }
+    catch {
+        // ignore
+    }
+    return false;
+}
+export function createVueGrabPlugin(options = {}) {
+    return {
+        install() {
+            const enabled = typeof options.enabled === 'boolean' ? options.enabled : isDevEnvironment();
+            if (enabled && typeof window !== 'undefined') {
+                const overlayOptions = {};
+                if (options.overlayStyle !== undefined) {
+                    overlayOptions.overlayStyle = options.overlayStyle;
+                }
+                if (options.onCopy !== undefined) {
+                    overlayOptions.onCopy = options.onCopy;
+                }
+                if (options.copyOnClick !== undefined) {
+                    overlayOptions.copyOnClick = options.copyOnClick;
+                }
+                if (options.rootDir !== undefined) {
+                    overlayOptions.rootDir = options.rootDir;
+                }
+                if (options.domFileResolver !== undefined) {
+                    overlayOptions.domFileResolver = options.domFileResolver;
+                }
+                installVueGrab(window, overlayOptions);
+            }
+        }
+    };
+}
+export default createVueGrabPlugin();

package/dist/vite.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from 'vite';
+export type VueGrabVitePluginOptions = {
+    enabled?: boolean;
+    rootDir?: string;
+    include?: RegExp;
+    exclude?: RegExp;
+};
+export declare function createVueGrabVitePlugin(options?: VueGrabVitePluginOptions): Plugin;

package/dist/vite.js

@@ -0,0 +1,198 @@
+import fs from 'node:fs';
+import path from 'node:path';
+const LOC_ATTR = 'data-vue-grab-loc';
+function createLocAttributeTransform() {
+    const transform = (node) => {
+        if (node?.type !== 1 || node?.tagType !== 0)
+            return;
+        const loc = node.loc?.start;
+        if (!loc)
+            return;
+        if (!Array.isArray(node.props))
+            node.props = [];
+        const hasLoc = node.props.some((prop) => prop?.type === 6 && prop?.name === LOC_ATTR);
+        if (hasLoc)
+            return;
+        node.props.push({
+            type: 6,
+            name: LOC_ATTR,
+            value: {
+                type: 2,
+                content: `${loc.line}:${loc.column}`,
+                loc: node.loc
+            },
+            loc: node.loc
+        });
+    };
+    transform.__vueGrabLocTransform = true;
+    return transform;
+}
+function normalizePath(value) {
+    return value.split(path.sep).join('/');
+}
+function resolveFilePath(filename, rootDir) {
+    if (!rootDir)
+        return filename;
+    const resolvedRoot = path.resolve(rootDir);
+    const resolvedFile = path.resolve(filename);
+    const relative = path.relative(resolvedRoot, resolvedFile);
+    if (!relative || relative.startsWith('..') || path.isAbsolute(relative)) {
+        return filename;
+    }
+    return `/${normalizePath(relative)}`;
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function getLineCol(code, index) {
+    const pre = code.slice(0, index);
+    const lines = pre.split('\n');
+    const line = lines.length;
+    const lastLine = lines[lines.length - 1] ?? '';
+    const column = lastLine.length + 1;
+    return { line, column };
+}
+function normalizeScriptStart(source, index) {
+    if (source[index] === '\r' && source[index + 1] === '\n')
+        return index + 2;
+    if (source[index] === '\n')
+        return index + 1;
+    return index;
+}
+function getComponentLocationFromSource(source) {
+    const scriptSetupMatch = source.match(/<script\b[^>]*\bsetup\b[^>]*>/i);
+    if (scriptSetupMatch && scriptSetupMatch.index !== undefined) {
+        const scriptStart = normalizeScriptStart(source, scriptSetupMatch.index + scriptSetupMatch[0].length);
+        return getLineCol(source, scriptStart);
+    }
+    const scriptMatch = source.match(/<script\b[^>]*>/i);
+    if (scriptMatch && scriptMatch.index !== undefined) {
+        const scriptStart = normalizeScriptStart(source, scriptMatch.index + scriptMatch[0].length);
+        const scriptEnd = source.indexOf('</script>', scriptStart);
+        const scriptContent = scriptEnd === -1 ? source.slice(scriptStart) : source.slice(scriptStart, scriptEnd);
+        const exportMatch = scriptContent.match(/export default/);
+        if (exportMatch && exportMatch.index !== undefined) {
+            return getLineCol(source, scriptStart + exportMatch.index);
+        }
+        const defineMatch = scriptContent.match(/defineComponent\s*\(/);
+        if (defineMatch && defineMatch.index !== undefined) {
+            return getLineCol(source, scriptStart + defineMatch.index);
+        }
+        return getLineCol(source, scriptStart);
+    }
+    return { line: 1, column: 1 };
+}
+function createInjectedCode(name, file, line, column) {
+    return `\n${name}.__file = ${JSON.stringify(file)};\n${name}.__line = ${line};\n${name}.__column = ${column};\n`;
+}
+function injectComponentMetadata(code, file, source) {
+    const sourceLocation = source ? getComponentLocationFromSource(source) : null;
+    const matchExportSfc = code.match(/export default\s+(?:\/\*.*?\*\/\s*)*_export_sfc\s*\(\s*([a-zA-Z0-9_$]+)\s*,/);
+    if (matchExportSfc && matchExportSfc.index !== undefined) {
+        const name = matchExportSfc[1];
+        if (!name)
+            return null;
+        const location = sourceLocation ?? getLineCol(code, matchExportSfc.index);
+        const inject = createInjectedCode(name, file, location.line, location.column);
+        return {
+            code: code.replace(matchExportSfc[0], inject + matchExportSfc[0]),
+            map: null
+        };
+    }
+    const matchVar = code.match(/export default\s+([a-zA-Z0-9_$]+)/);
+    if (matchVar && matchVar.index !== undefined) {
+        const name = matchVar[1];
+        if (!name)
+            return null;
+        const varMatch = code.match(new RegExp(`(?:const|let|var)\\s+${escapeRegExp(name)}\\s*=`));
+        const location = sourceLocation ??
+            (varMatch?.index !== undefined ? getLineCol(code, varMatch.index) : { line: 1, column: 1 });
+        const inject = createInjectedCode(name, file, location.line, location.column);
+        return {
+            code: code.replace(matchVar[0], inject + matchVar[0]),
+            map: null
+        };
+    }
+    const matchObj = code.match(/export default\s*\{/);
+    if (matchObj && matchObj.index !== undefined) {
+        const { line, column } = sourceLocation ?? getLineCol(code, matchObj.index);
+        return {
+            code: code.replace(/export default\s*\{/, `export default { __file: ${JSON.stringify(file)}, __line: ${line}, __column: ${column},`),
+            map: null
+        };
+    }
+    const matchDef = code.match(/export default\s+defineComponent\s*\(\s*\{/);
+    if (matchDef && matchDef.index !== undefined) {
+        const { line, column } = sourceLocation ?? getLineCol(code, matchDef.index);
+        return {
+            code: code.replace(/export default\s+defineComponent\s*\(\s*\{/, `export default defineComponent({ __file: ${JSON.stringify(file)}, __line: ${line}, __column: ${column},`),
+            map: null
+        };
+    }
+    return null;
+}
+function shouldTransform(id, include, exclude) {
+    if (!id.match(/\.vue($|\?)/))
+        return false;
+    if (id.includes('node_modules'))
+        return false;
+    if (exclude?.test(id))
+        return false;
+    if (include && !include.test(id))
+        return false;
+    return true;
+}
+export function createVueGrabVitePlugin(options = {}) {
+    let enabled = false;
+    let resolvedRoot;
+    let resolvedInclude = options.include;
+    let resolvedExclude = options.exclude;
+    return {
+        name: 'vite-plugin-vue-grab-injector',
+        enforce: 'post',
+        configResolved(config) {
+            enabled = options.enabled ?? config.command === 'serve';
+            resolvedRoot = options.rootDir ?? config.root;
+            if (!enabled)
+                return;
+            const vuePlugin = config.plugins.find((plugin) => plugin.name === 'vite:vue' && plugin.api?.options);
+            if (!vuePlugin)
+                return;
+            const vueOptions = vuePlugin.api.options;
+            const templateOptions = vueOptions.template ?? {};
+            const compilerOptions = templateOptions.compilerOptions ?? {};
+            const nodeTransforms = compilerOptions.nodeTransforms ?? [];
+            const hasTransform = nodeTransforms.some((transform) => transform?.__vueGrabLocTransform);
+            if (hasTransform)
+                return;
+            vuePlugin.api.options = {
+                ...vueOptions,
+                template: {
+                    ...templateOptions,
+                    compilerOptions: {
+                        ...compilerOptions,
+                        nodeTransforms: [...nodeTransforms, createLocAttributeTransform()]
+                    }
+                }
+            };
+        },
+        transform(code, id) {
+            if (!enabled)
+                return;
+            if (!shouldTransform(id, resolvedInclude, resolvedExclude))
+                return;
+            const [filename] = id.split('?');
+            if (!filename)
+                return;
+            const file = resolveFilePath(filename, resolvedRoot);
+            let source;
+            try {
+                source = fs.readFileSync(filename, 'utf8');
+            }
+            catch {
+                source = undefined;
+            }
+            return injectComponentMetadata(code, file, source);
+        }
+    };
+}

package/package.json

@@ -1,15 +1,38 @@
 {
   "name": "@akccakcctw/vue-grab",
-  "version": "1.0.0",
-  "description": "",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
+  "version": "1.3.0",
+  "description": "Developer-only bridge for inspecting Vue/Nuxt component context from the DOM.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/akccakcctw/vue-grab.git"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./module": "./src/nuxt/module.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./module": {
+      "types": "./dist/nuxt/module.d.ts",
+      "default": "./dist/nuxt/module.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
+    }
   },
-  "nuxt": "src/nuxt/module.ts",
-  "keywords": [],
+  "files": [
+    "dist"
+  ],
+  "nuxt": "./dist/nuxt/module.js",
+  "keywords": [
+    "vue",
+    "nuxt",
+    "devtools"
+  ],
   "author": "",
   "license": "MIT",
   "publishConfig": {
@@ -17,6 +40,7 @@
   },
   "devDependencies": {
     "@nuxt/kit": "^4.2.2",
+    "@types/node": "^20.19.11",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/test-utils": "^2.4.6",
     "jsdom": "^27.4.0",
@@ -26,6 +50,7 @@
     "vue": "^3.5.26"
   },
   "scripts": {
+    "build": "tsc -p tsconfig.build.json",
     "test": "vitest run"
   }
 }