@visulima/dev-toolbar 1.0.0-alpha.4 → 1.0.0-alpha.40

package/dist/vite-plugin.d.ts

@@ -1,144 +1,186 @@
-import type { Plugin } from "vite";
-import type { DevToolbarApp, ServerFunctions } from "./types/index.d.ts";
-import type { InjectSourceIgnore } from "./vite/inject-source.d.ts";
+import { Plugin } from 'vite';
+import { R as ReadFileOptions } from "./packem_shared/server.d-ZkcY0pge.js";
+import { D as DevToolbarApp, S as ServerFunctions } from "./packem_shared/app.d-SmKEDxsI.js";
+import "./packem_shared/global-api.d-DeaCvII9.js";
+import '@babel/generator';
+import 'preact';
+interface InjectSourceIgnore {
+  /** Component names or patterns to skip. */
+  components?: (RegExp | string)[];
+  /** File paths or patterns to skip. */
+  files?: (RegExp | string)[];
+}
 /**
- * Dev toolbar plugin options
- */
-export interface DevToolbarOptions {
-    /**
-     * append an import to the module id ending with `appendTo` instead of adding a script into body
-     * useful for projects that do not use html file as an entry
-     *
-     * WARNING: only set this if you know exactly what it does.
-     * @default Empty string (disabled).
-     */
-    appendTo?: string | RegExp;
-    /**
-     * Built-in apps to enable
-     */
-    apps?: {
-        [key: string]: boolean | undefined;
-        a11y?: boolean;
-        inspector?: boolean;
-        moduleGraph?: boolean;
-        performance?: boolean;
-        seo?: boolean;
-        settings?: boolean;
-        tailwind?: boolean;
-        timeline?: boolean;
-        viteConfig?: boolean;
-    };
-    /**
-     * Whether clicking outside the DevTools panel closes it.
-     * @default true
-     */
-    closeOnOutsideClick?: boolean;
-    /**
-     * Custom apps to register
-     */
-    customApps?: DevToolbarApp[];
-    /**
-     * Whether toolbar is visible by default
-     */
-    defaultVisible?: boolean;
-    /**
-     * The editor to open when clicking "Open in editor" in the inspector.
-     * Accepts any value supported by `launch-editor` — an editor name/alias
-     * (e.g. `"code"`, `"webstorm"`, `"vim"`, `"atom"`) or the full path to
-     * the editor executable.
-     *
-     * If omitted, `launch-editor` auto-detects the editor from the `EDITOR`
-     * / `VISUAL` environment variables or from the currently running IDE
-     * process detected on the OS process list.
-     * @example "webstorm"
-     * @example "code"
-     */
-    editor?: string;
-    /**
-     * Initial panel height as a percentage of the viewport height (20–95).
-     * @default 60
-     */
-    height?: number;
-    /**
-     * Inject `data-vdt-source="<file>:<line>:<col>"` attributes into every JSX
-     * opening element during development. This lets the inspector jump directly
-     * to the source file when an element is clicked.
-     *
-     * Only active when `mode === 'development'`. Set `enabled: false` to opt out.
-     * Use `ignore.files` / `ignore.components` to exclude specific paths or
-     * component names (strings are treated as glob patterns).
-     * @default { enabled: true }
-     */
-    injectSource?: {
-        enabled?: boolean;
-        ignore?: InjectSourceIgnore;
-    };
-    /**
-     * Keyboard shortcut bindings.
-     * These are project-level defaults; users can still override them via the
-     * Settings app (stored in localStorage).
-     */
-    keybindings?: {
-        /** Close active app / panel. \@default "Escape" */
-        close?: string;
-        /** Toggle the DevTools panel open/closed. \@default "Alt+Shift+D" */
-        toggle?: string;
-    };
-    /**
-     * Auto-hide the toolbar pill after this many milliseconds of inactivity.
-     * Set to -1 to never auto-hide.
-     * @default 5000
-     */
-    minimizePanelInactive?: number;
-    /**
-     * Toolbar placement (coarse shorthand — sets the edge and rough horizontal
-     * alignment of the toolbar pill).
-     * @default "bottom-center"
-     */
-    placement?: "bottom-left" | "bottom-center" | "bottom-right";
-    /**
-     * Which edge of the viewport the toolbar pill is anchored to.
-     * Takes precedence over the edge implied by `placement`.
-     * @default "bottom"
-     */
-    position?: "bottom" | "left" | "right" | "top";
-    /**
-     * Reduce motion for accessibility (disables all CSS animations).
-     * @default false
-     */
-    reduceMotion?: boolean;
-    /**
-     * Strip all \@visulima/dev-toolbar imports and virtual modules when building
-     * for production (i.e. when `command !== 'serve'` or `mode === 'production'`).
-     * This guarantees the toolbar never ends up in a production bundle even if the
-     * user accidentally imports our package in application code.
-     * @default true
-     */
-    removeDevtoolsOnBuild?: boolean;
-    /**
-     * Only activate the toolbar when the URL contains a specific query parameter.
-     * Useful for staging/production environments where you want opt-in debugging.
-     * @example requireUrlFlag: true, urlFlagName: 'debug' → toolbar only shows when URL has ?debug=true
-     * @default false
-     */
-    requireUrlFlag?: boolean;
-    /**
-     * Custom server RPC functions
-     */
-    serverFunctions?: Partial<ServerFunctions>;
-    /**
-     * The URL query parameter name used when requireUrlFlag is true.
-     * @default 'devtools'
-     */
-    urlFlagName?: string;
-    /**
-     * Initial panel width as a percentage of the viewport width (20–95).
-     * Applies when position is "left" or "right".
-     * @default 80
-     */
-    width?: number;
+* Dev toolbar plugin options
+*/
+interface DevToolbarOptions {
+  /**
+  * append an import to the module id ending with `appendTo` instead of adding a script into body
+  * useful for projects that do not use html file as an entry
+  *
+  * WARNING: only set this if you know exactly what it does.
+  * @default Empty string (disabled).
+  */
+  appendTo?: string | RegExp;
+  /**
+  * Built-in apps to enable. All apps are disabled by default — only
+  * `viteConfig`, `settings`, and the "more" drawer are shown out of the box.
+  * Explicitly set an app to `true` to enable it.
+  * @example { inspector: true, seo: true }
+  */
+  apps?: {
+    [key: string]: boolean | undefined;
+    a11y?: boolean;
+    annotations?: boolean;
+    assets?: boolean;
+    inspector?: boolean;
+    moduleGraph?: boolean;
+    performance?: boolean;
+    seo?: boolean;
+    settings?: boolean;
+    tailwind?: boolean;
+    timeline?: boolean;
+    viteConfig?: boolean;
+  };
+  /**
+  * Whether clicking outside the DevTools panel closes it.
+  * @default true
+  */
+  closeOnOutsideClick?: boolean;
+  /**
+  * Custom apps to register
+  */
+  customApps?: DevToolbarApp[];
+  /**
+  * Whether toolbar is visible by default
+  */
+  defaultVisible?: boolean;
+  /**
+  * The editor to open when clicking "Open in editor" in the inspector.
+  * Accepts any value supported by `launch-editor` — an editor name/alias
+  * (e.g. `"code"`, `"webstorm"`, `"vim"`, `"atom"`) or the full path to
+  * the editor executable.
+  *
+  * If omitted, `launch-editor` auto-detects the editor from the `EDITOR`
+  * / `VISUAL` environment variables or from the currently running IDE
+  * process detected on the OS process list.
+  * @example "webstorm"
+  * @example "code"
+  */
+  editor?: string;
+  /**
+  * Master switch for the whole plugin. When `false`, `devToolbar()` returns an
+  * empty plugin array, so no virtual modules, RPC server, or client overlay are
+  * registered — the equivalent of removing the plugin from `vite.config.ts`
+  * without editing the config.
+  *
+  * Handy for CI/preview environments:
+  * `devToolbar({ enabled: !process.env.CI })`.
+  * @default true
+  */
+  enabled?: boolean;
+  /**
+  * Initial panel height as a percentage of the viewport height (20–95).
+  * @default 60
+  */
+  height?: number;
+  /**
+  * Inject `data-vdt-source="&lt;file>:&lt;line>:&lt;col>"` attributes into every JSX
+  * opening element during development. This lets the inspector jump directly
+  * to the source file when an element is clicked.
+  *
+  * Only active when `mode === 'development'`. Set `enabled: false` to opt out.
+  * Use `ignore.files` / `ignore.components` to exclude specific paths or
+  * component names (strings are treated as glob patterns).
+  * @default { enabled: true }
+  */
+  injectSource?: {
+    enabled?: boolean;
+    ignore?: InjectSourceIgnore;
+  };
+  /**
+  * Keyboard shortcut bindings.
+  * These are project-level defaults; users can still override them via the
+  * Settings app (stored in localStorage).
+  */
+  keybindings?: {
+    /** Close active app / panel. \@default "Escape" */
+    close?: string;
+    /** Toggle the DevTools panel open/closed. \@default "Alt+Shift+D" */
+    toggle?: string;
+  };
+  /**
+  * Auto-hide the toolbar pill after this many milliseconds of inactivity.
+  * Set to -1 to never auto-hide.
+  * @default 5000
+  */
+  minimizePanelInactive?: number;
+  /**
+  * Toolbar placement (coarse shorthand — sets the edge and rough horizontal
+  * alignment of the toolbar pill).
+  * @default "bottom-center"
+  */
+  placement?: "bottom-left" | "bottom-center" | "bottom-right";
+  /**
+  * Which edge of the viewport the toolbar pill is anchored to.
+  * Takes precedence over the edge implied by `placement`.
+  * @default "bottom"
+  */
+  position?: "bottom" | "left" | "right" | "top";
+  /**
+  * Policy for the built-in `readFile` RPC endpoint, which lets toolbar apps read
+  * text files under the project root.
+  *
+  * Set to `false` to remove the endpoint entirely — recommended when the dev
+  * server is exposed on the network (`vite --host`), since any device on the LAN
+  * can then call RPC methods. Pass an object to override the allowed extensions.
+  *
+  * By default the endpoint is restricted to a curated allowlist of source/markup/
+  * text extensions, so `.env`, lockfiles, and key material are never served.
+  * @default { extensions: curated source/text list }
+  */
+  readFile?: ReadFileOptions | false;
+  /**
+  * Reduce motion for accessibility (disables all CSS animations).
+  * @default false
+  */
+  reduceMotion?: boolean;
+  /**
+  * Strip all \@visulima/dev-toolbar imports and virtual modules when building
+  * for production (i.e. when `command !== 'serve'` or `mode === 'production'`).
+  * This guarantees the toolbar never ends up in a production bundle even if the
+  * user accidentally imports our package in application code.
+  * @default true
+  */
+  removeDevtoolsOnBuild?: boolean;
+  /**
+  * Only activate the toolbar when the URL contains a specific query parameter.
+  * Useful for staging/production environments where you want opt-in debugging.
+  * @example requireUrlFlag: true, urlFlagName: 'debug' → toolbar only shows when URL has ?debug=true
+  * @default false
+  */
+  requireUrlFlag?: boolean;
+  /**
+  * Custom server RPC functions
+  */
+  serverFunctions?: Partial<ServerFunctions>;
+  /**
+  * The URL query parameter name used when requireUrlFlag is true.
+  * @default 'devtools'
+  */
+  urlFlagName?: string;
+  /**
+  * Initial panel width as a percentage of the viewport width (20–95).
+  * Applies when position is "left" or "right".
+  * @default 80
+  */
+  width?: number;
 }
 /**
- * Returns the Vite plugin array for the dev toolbar.
- */
-export declare const devToolbar: (options?: DevToolbarOptions) => Plugin[];
+* Returns the Vite plugin array for the dev toolbar.
+*
+* Returns an empty array when `options.enabled === false`, so the plugin can be
+* gated for CI/preview builds without removing it from `vite.config.ts`.
+*/
+declare const devToolbar: (options?: DevToolbarOptions) => Plugin[];
+export { DevToolbarOptions, devToolbar };

package/dist/vite-plugin.js

@@ -1,2 +1,5 @@
-var j=Object.defineProperty;var c=(e,o)=>j(e,"name",{value:o,configurable:!0});import{createRequire as $}from"node:module";import{normalizePath as F}from"vite";import{createServerRPCContext as C}from"./packem_shared/createServerRPCContext-CEm1Ymkn.js";const w=$(import.meta.url),n=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,v=c(e=>{if(typeof n<"u"&&n.versions&&n.versions.node){const[o,u]=n.versions.node.split(".").map(Number);if(o>22||o===22&&u>=3||o===20&&u>=16)return n.getBuiltinModule(e)}return w(e)},"__cjs_getBuiltinModule"),T=v("node:fs"),P=v("node:path"),{fileURLToPath:x}=v("node:url");var O=Object.defineProperty,f=c((e,o)=>O(e,"name",{value:o,configurable:!0}),"s");const R=f(()=>F(P.dirname(x(import.meta.url))),"getDevToolbarPath"),I=/\?.+$/,S=/\/dist\/|\/build\//,q=/\.[jt]sx$/,W=f(e=>e.replace(I,""),"removeUrlQuery"),g="?__visulima-dev-toolbar-resource",m="virtual:visulima-dev-toolbar-options",h=`\0${m}`,l="virtual:visulima-dev-toolbar-path:",y="\0__visulima-dev-toolbar-empty",z=f((e={})=>{const o=R(),u=e.removeDevtoolsOnBuild??!0,_=e.injectSource?.enabled??!0;let d;return[{apply:"serve",configResolved(t){d=t},configureServer(t){C(t,e.serverFunctions,{editor:e.editor}),t.ws.on("connection",()=>{t.ws.send({event:"dev-toolbar:init",type:"custom"})})},enforce:"pre",async load(t){if(t===h)return`export default ${JSON.stringify({apps:{a11y:e.apps?.a11y??!0,inspector:e.apps?.inspector??!0,moduleGraph:e.apps?.moduleGraph??!0,performance:e.apps?.performance??!0,seo:e.apps?.seo??!0,settings:e.apps?.settings??!0,tailwind:e.apps?.tailwind??!0,timeline:e.apps?.timeline??!0,viteConfig:e.apps?.viteConfig??!0},base:d.base,closeOnOutsideClick:e.closeOnOutsideClick??!0,defaultVisible:e.defaultVisible??!0,height:e.height??60,keybindings:e.keybindings??{},minimizePanelInactive:e.minimizePanelInactive??5e3,placement:e.placement??"bottom-center",position:e.position??"bottom",reduceMotion:e.reduceMotion??!1,requireUrlFlag:e.requireUrlFlag??!1,urlFlagName:e.urlFlagName??"devtools",width:e.width??80})};`;if(t.endsWith(g)){const r=W(t);return this.addWatchFile(r),await T.promises.readFile(r,"utf8")}},name:"@visulima/dev-toolbar",resolveId(t){if(t===m)return h;if(t.startsWith(l))return`${t.replace(l,`${o}/`)}${g}`},transform(t,r,s){if(s?.ssr)return;const{appendTo:i}=e,a=r.split("?",2)[0];if(i&&a&&(typeof i=="string"&&a.endsWith(i)||i instanceof RegExp&&i.test(a)))return`import '${l}client/overlay.js';
-${t}`},transformIndexHtml(){return e.appendTo?void 0:{html:"",tags:[{attrs:{src:`${d.base||"/"}@id/${l}client/overlay.js`,type:"module"},injectTo:"head-prepend",tag:"script"}]}}},{enforce:"pre",name:"@visulima/dev-toolbar:inject-source",async transform(t,r){if(!_||d.mode!=="development"||r.includes("node_modules")||r.includes("?raw")||S.test(r)||!q.test(r.split("?")[0]??""))return;const{readFile:s}=await import("node:fs/promises");let i;try{const b=await s(r.split("?")[0]??r,"utf8");b!==t&&(i=b)}catch{}const{addSourceToJsx:a}=await import("./packem_chunks/inject-source.js"),p=a(t,r,e.injectSource?.ignore,i);if(p)return{code:p.code??t,map:p.map??void 0}}},{apply(t,{command:r,mode:s}){return u&&(r!=="serve"||s==="production")},load(t){if(t===y)return"export default {};"},name:"@visulima/dev-toolbar:remove-on-build",resolveId(t){if(t===m||t.startsWith(l))return y}}]},"devToolbar");export{z as devToolbar};
+import{createRequire as O}from"node:module";import{normalizePath as R}from"vite";import{createServerRPCContext as N}from"./packem_shared/createServerRPCContext-C30tqEfQ.js";const M=O(import.meta.url),u=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,y=e=>{if(typeof u<"u"&&u.versions&&u.versions.node){const[p,f]=u.versions.node.split(".").map(Number);if(p>22||p===22&&f>=3||p===20&&f>=16)return u.getBuiltinModule(e)}return M(e)},S=y("node:fs"),x=y("node:path"),{fileURLToPath:I}=y("node:url"),P=()=>R(x.dirname(I(import.meta.url))),q=/\?.+$/,D=/\/dist\/|\/build\//,W=/\.[jt]sx$/,B=e=>e.replace(q,""),_="?__visulima-dev-toolbar-resource",b="virtual:visulima-dev-toolbar-options",j=`\0${b}`,m="virtual:visulima-dev-toolbar-path:",$="\0__visulima-dev-toolbar-empty",T=(e,p)=>typeof e!="number"||!Number.isFinite(e)?p:Math.min(95,Math.max(20,e)),U=(e={})=>{if(e.enabled===!1)return[];const p=P(),f=e.removeDevtoolsOnBuild??!0,C=e.injectSource?.enabled??!0;let v;const F={apply:"serve",config(){return{server:{watch:{ignored:["**/.devtoolbar/**"]}}}},configResolved(t){if(v=t,!e.appendTo){const o=new Set(t.plugins.map(i=>i.name));(o.has("tanstack-start-core:config")||o.has("tanstack-react-start:config"))&&(e.appendTo=/router\.tsx$/)}const n=/dev-toolbar[\\/]dist[\\/]|__visulima-dev-toolbar-resource/;for(const o of t.plugins){if(!o.name.includes("babel"))continue;const i=o.transform;if(!i)continue;const a=typeof i=="function"?i:typeof i=="object"&&"handler"in i?i.handler:void 0;if(typeof a!="function")continue;const s=function(c,r,...l){if(!n.test(r))return a.call(this,c,r,...l)};typeof i=="function"?o.transform=s:i.handler=s}},configureServer(t){N(t,e.serverFunctions,{editor:e.editor,readFile:e.readFile}),t.ws.on("connection",()=>{t.ws.send({event:"dev-toolbar:init",type:"custom"})}),t.middlewares.use("/__devtoolbar/events",async(n,o)=>{o.writeHead(200,{"Cache-Control":"no-cache",Connection:"keep-alive","Content-Type":"text/event-stream","X-Accel-Buffering":"no"});const i=(r,l)=>{o.write(`event: ${r}
+data: ${JSON.stringify(l)}
+
+`)};i("connected",{timestamp:Date.now()});const{watch:a}=await import("node:fs"),s=x.join(t.config.root,".devtoolbar","annotations.json");let c;try{c=a(s,{persistent:!1},r=>{r==="change"&&i("annotations.changed",{timestamp:Date.now()})}),c.on("error",()=>{})}catch{const{stat:r}=await import("node:fs/promises");let l=0;const h=setInterval(async()=>{try{const d=(await r(s)).mtimeMs;d!==l&&(l=d,i("annotations.changed",{timestamp:Date.now()}))}catch{}},2e3);n.on("close",()=>{clearInterval(h)});return}n.on("close",()=>{c?.close()})})},enforce:"pre",async load(t){if(t===j){const n=(e.customApps??[]).filter(o=>!o.component&&!o.init&&o.view?.type==="iframe").map(o=>({defaultOpen:o.defaultOpen,icon:o.icon,id:o.id,name:o.name,view:o.view}));return`export default ${JSON.stringify({apps:{a11y:e.apps?.a11y??!1,annotations:e.apps?.annotations??e.apps?.inspector??!1,assets:e.apps?.assets??!1,inspector:e.apps?.inspector??!1,moduleGraph:e.apps?.moduleGraph??!1,performance:e.apps?.performance??!1,seo:e.apps?.seo??!1,settings:e.apps?.settings??!0,tailwind:e.apps?.tailwind??!1,timeline:e.apps?.timeline??!1,viteConfig:e.apps?.viteConfig??!0},base:v.base,closeOnOutsideClick:e.closeOnOutsideClick??!0,customApps:n,defaultVisible:e.defaultVisible??!0,editor:e.editor??"",height:T(e.height,60),keybindings:e.keybindings??{},minimizePanelInactive:e.minimizePanelInactive??5e3,placement:e.placement??"bottom-center",position:e.position??"bottom",reduceMotion:e.reduceMotion??!1,requireUrlFlag:e.requireUrlFlag??!1,urlFlagName:e.urlFlagName??"devtools",width:T(e.width,80)})};`}if(t.endsWith(_)){const n=B(t);return this.addWatchFile(n),await S.promises.readFile(n,"utf8")}},name:"@visulima/dev-toolbar",resolveId(t){if(t===b)return j;if(t.startsWith(m))return`${t.replace(m,`${p}/`)}${_}`},transform(t,n,o){if(o?.ssr)return;const{appendTo:i}=e,a=n.split("?",2)[0];if(i&&a&&(typeof i=="string"&&a.endsWith(i)||i instanceof RegExp&&i.test(a)))return`import '${m}client/overlay.js';
+${t}`},transformIndexHtml(){return e.appendTo?void 0:{html:"",tags:[{attrs:{src:`${v.base||"/"}@id/${m}client/overlay.js`,type:"module"},injectTo:"head-prepend",tag:"script"}]}}},k={apply(t,{command:n,mode:o}){return f&&(n!=="serve"||o==="production")},load(t){if(t===$)return"export default {};"},name:"@visulima/dev-toolbar:remove-on-build",resolveId(t){if(t===b||t.startsWith(m))return $}},w=new Map;return[F,{enforce:"pre",name:"@visulima/dev-toolbar:inject-source",async transform(t,n){if(!C||v.mode!=="development"||n.includes("node_modules")||n.includes("?raw")||D.test(n)||!W.test(n.split("?")[0]??""))return;const o=n.split("?")[0]??n,{readFile:i,stat:a}=await import("node:fs/promises");let s;try{const{mtimeMs:d}=await a(o);s=`${t.length}:${d}`;const g=w.get(n);if(g&&g.key===s)return g.result}catch{}let c;try{const d=await i(o,"utf8");d!==t&&(c=d)}catch{}const{addSourceToJsx:r}=await import("./packem_chunks/inject-source.js"),l=r(t,n,e.injectSource?.ignore,c),h=l?{code:l.code??t,map:l.map??void 0}:void 0;return s!==void 0&&w.set(n,{key:s,result:h}),h}},k]};export{U as devToolbar};

package/package.json

@@ -1,15 +1,13 @@
 {
   "name": "@visulima/dev-toolbar",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.40",
   "description": "Devtools is a set of tools for building advanced devtools for your application",
   "keywords": [
-    "visulima",
-    "dev-toolbar"
+    "dev-toolbar",
+    "visulima"
   ],
   "homepage": "https://visulima.com/packages/dev-toolbar",
-  "bugs": {
-    "url": "https://github.com/visulima/visulima/issues"
-  },
+  "bugs": "https://github.com/visulima/visulima/issues",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/visulima/visulima.git",
@@ -49,6 +47,10 @@
       "types": "./dist/apps/a11y/index.d.ts",
       "default": "./dist/apps/a11y/index.js"
     },
+    "./apps/assets": {
+      "types": "./dist/apps/assets/index.d.ts",
+      "default": "./dist/apps/assets/index.js"
+    },
     "./apps/inspector": {
       "types": "./dist/apps/inspector/index.d.ts",
       "default": "./dist/apps/inspector/index.js"
@@ -61,10 +63,6 @@
       "types": "./dist/apps/module-graph/index.d.ts",
       "default": "./dist/apps/module-graph/index.js"
     },
-    "./apps/more": {
-      "types": "./dist/apps/more/index.d.ts",
-      "default": "./dist/apps/more/index.js"
-    },
     "./apps/performance": {
       "types": "./dist/apps/performance/index.d.ts",
       "default": "./dist/apps/performance/index.js"
@@ -81,10 +79,18 @@
       "types": "./dist/apps/timeline/index.d.ts",
       "default": "./dist/apps/timeline/index.js"
     },
+    "./apps/annotations": {
+      "types": "./dist/apps/annotations/index.d.ts",
+      "default": "./dist/apps/annotations/index.js"
+    },
     "./apps/vite-config": {
       "types": "./dist/apps/vite-config/index.d.ts",
       "default": "./dist/apps/vite-config/index.js"
     },
+    "./mcp": {
+      "types": "./dist/mcp/server.d.ts",
+      "default": "./dist/mcp/server.js"
+    },
     "./toolbar": {
       "types": "./dist/toolbar/index.d.ts",
       "default": "./dist/toolbar/index.js"
@@ -95,29 +101,42 @@
     },
     "./package.json": "./package.json"
   },
+  "bin": {
+    "visulima-dev-toolbar-mcp": "./bin/mcp.js"
+  },
   "files": [
+    "bin",
     "dist",
     "README.md",
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@babel/generator": "^7.29.1",
-    "@babel/parser": "^7.29.0",
-    "@babel/traverse": "^7.29.0",
-    "@babel/types": "^7.29.0",
+    "@babel/generator": "^8.0.0",
+    "@babel/parser": "^8.0.0",
+    "@babel/traverse": "^8.0.0",
     "@floating-ui/dom": "^1.7.6",
-    "axe-core": "^4.11.1",
-    "clsx": "^2.1.1",
-    "launch-editor": "^2.13.1",
-    "lucide-static": "^0.576.0",
-    "preact": "^10.28.4",
-    "tailwind-merge": "^3.5.0"
+    "launch-editor": "2.14.1",
+    "preact": "^10.29.2"
   },
   "peerDependencies": {
-    "vite": "^6 || ^7 || ^8"
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "axe-core": "4.12.1",
+    "vite": "^8.0.11",
+    "zod": "^3.25.0 || ^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@modelcontextprotocol/sdk": {
+      "optional": true
+    },
+    "axe-core": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "engines": {
-    "node": ">=22.21"
+    "node": "^22.14.0 || >=24.10.0"
   },
   "publishConfig": {
     "access": "public",

package/dist/apps/a11y/a11y-app.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const A11yApp: (_props: AppComponentProps) => ComponentChildren;
-export default A11yApp;

package/dist/apps/a11y/a11y-store.d.ts

@@ -1,42 +0,0 @@
-type Severity = "critical" | "minor" | "moderate" | "serious";
-type Standard = "best-practice" | "wcag21aa" | "wcag22aa" | "wcag2a";
-interface A11yNode {
-    html: string;
-    selector: string;
-}
-interface A11yIssue {
-    helpUrl: string;
-    id: string;
-    impact: Severity;
-    message: string;
-    nodes: A11yNode[];
-    wcagTags: string[];
-}
-interface A11yStoreState {
-    isScanning: boolean;
-    issues: A11yIssue[];
-    lastScan: string | undefined;
-    scanError: string | undefined;
-    showOverlays: boolean;
-    standard: Standard;
-}
-declare const SEVERITY_ORDER: Severity[];
-type Listener = () => void;
-declare class A11yStore {
-    private listeners;
-    private state;
-    constructor();
-    clearHighlights(): void;
-    getState(): Readonly<A11yStoreState>;
-    highlightIssue(issue: A11yIssue): void;
-    scan(disabledRules?: string[]): Promise<void>;
-    setShowOverlays(show: boolean): void;
-    setStandard(standard: Standard): void;
-    subscribe(listener: Listener): () => void;
-    private notify;
-    private persist;
-    private update;
-}
-declare const a11yStore: A11yStore;
-export type { A11yIssue, A11yNode, A11yStoreState, Severity, Standard };
-export { a11yStore, SEVERITY_ORDER };

package/dist/apps/a11y/a11y-tooltip.d.ts

@@ -1,11 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppTooltipProps } from "../../types/app.d.ts";
-/**
- * Hover tooltip for the Accessibility app button.
- * Shows a summary of scan results and quick action buttons.
- * @param _props Tooltip props (unused; reads from a11yStore directly)
- * @returns Rendered tooltip component
- */
-declare const A11yTooltip: (_props: AppTooltipProps) => ComponentChildren;
-export default A11yTooltip;

package/dist/apps/inspector/inspector-app.d.ts

@@ -1,12 +0,0 @@
-/**
- * Start element inspection mode.
- * Attaches crosshair cursor, hover highlight overlay, and a floating badge.
- * Survives component unmounts — state lives at module level.
- * @param onComplete Called when the user clicks an element (after cleanup).
- * @param onCancel Called when the user cancels via badge button or Escape.
- */
-export declare const startGlobalInspection: (onComplete: () => void, onCancel: () => void) => void;
-/**
- * Cancel any in-progress inspection and clean up all DOM side-effects.
- */
-export declare const stopGlobalInspection: () => void;

package/dist/apps/module-graph/module-graph-app.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const ModuleGraphApp: ({ helpers }: AppComponentProps) => ComponentChildren;
-export default ModuleGraphApp;

package/dist/apps/more/index.d.ts

@@ -1,3 +0,0 @@
-import type { DevToolbarApp } from "../../types/app.d.ts";
-declare const moreApp: DevToolbarApp;
-export default moreApp;

package/dist/apps/more/index.js

@@ -1,2 +0,0 @@
-var p=Object.defineProperty;var s=(i,t)=>p(i,"name",{value:t,configurable:!0});import m from"lucide-static/icons/more-horizontal.svg?raw";import{addHookName as f}from"preact/devtools";import{useState as u,useEffect as b}from"preact/hooks";import g from"../../packem_shared/cn-DWLJYh3h.js";import{jsxs as o,jsx as r}from"preact/jsx-runtime";var h=Object.defineProperty,n=s((i,t)=>h(i,"name",{value:t,configurable:!0}),"n");const x=n(i=>{const[t,a]=f(u([]),"apps");b(()=>{const e=globalThis.__VISULIMA_DEVTOOLS__;if(!e)return;const l=(e.getApps()??[]).filter(c=>!["dev-toolbar:a11y","dev-toolbar:inspector","dev-toolbar:module-graph","dev-toolbar:more","dev-toolbar:performance","dev-toolbar:seo","dev-toolbar:settings","dev-toolbar:tailwind","dev-toolbar:timeline","dev-toolbar:vite-config"].includes(c.id));a(l)},[]);const d=n(e=>{globalThis.__VISULIMA_DEVTOOLS__?.openApp(e).catch(()=>{})},"openApp");return t.length===0?o("div",{class:"p-8 flex flex-col items-center justify-center min-h-48 gap-5 text-center select-none",children:[r("div",{class:"size-14 bg-primary/5 border border-primary/20 flex items-center justify-center",children:r("svg",{"aria-hidden":"true",class:"size-6 text-primary/40",fill:"none",stroke:"currentColor","stroke-width":"1.5",viewBox:"0 0 24 24",children:r("path",{d:"M12 6v6m0 0v6m0-6h6m-6 0H6","stroke-linecap":"round","stroke-linejoin":"round"})})}),o("div",{class:"space-y-1.5",children:[r("p",{class:"text-[0.8125rem] font-medium text-foreground/70",children:"No additional apps registered"}),r("p",{class:"text-[0.725rem] text-muted-foreground",children:"Register a custom app to see it here"}),r("pre",{class:"mt-3 text-[0.65rem] font-mono text-primary/70 bg-primary/5 border border-primary/15 px-3 py-2 text-left",children:`window.__VISULIMA_DEVTOOLS__
-  .registerApp({ id, name, icon })`})]})]}):o("div",{class:"p-5",children:[o("h2",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground mb-3 flex items-center gap-1.5",children:[r("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"}),"Additional Apps"]}),r("div",{class:"grid grid-cols-2 gap-2",children:t.map(e=>o("button",{class:g("flex items-center gap-3 p-3","border border-border bg-card hover:bg-foreground/4","text-left cursor-pointer transition-colors duration-150"),onClick:n(()=>d(e.id),"onClick"),title:e.name,type:"button",children:[r("span",{class:"size-5 shrink-0 flex items-center justify-center text-[0.65rem] font-bold uppercase bg-foreground/8 text-foreground/70",children:e.name.slice(0,2)}),r("span",{class:"text-[0.8125rem] font-medium text-foreground truncate",children:e.name})]},e.id))})]})},"MoreApp"),O={component:x,icon:m,id:"dev-toolbar:more",name:"More"};export{O as default};

package/dist/apps/more/more-app.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const MoreApp: (_props: AppComponentProps) => ComponentChildren;
-export default MoreApp;

package/dist/apps/performance/performance-app.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const PerformanceApp: (_props: AppComponentProps) => ComponentChildren;
-export default PerformanceApp;

package/dist/apps/performance/performance-tooltip.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppTooltipProps } from "../../types/app.d.ts";
-declare const PerformanceTooltip: (_props: AppTooltipProps) => ComponentChildren;
-export default PerformanceTooltip;

package/dist/apps/seo/seo-app.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const SeoApp: (_props: AppComponentProps) => ComponentChildren;
-export default SeoApp;

package/dist/apps/settings/settings-app.d.ts

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const SettingsApp: (_props: AppComponentProps) => ComponentChildren;
-export default SettingsApp;

package/dist/apps/tailwind/tailwind-app.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const TailwindApp: ({ helpers }: AppComponentProps) => ComponentChildren;
-export default TailwindApp;

package/dist/apps/timeline/timeline-app.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const TimelineApp: (_props: AppComponentProps) => ComponentChildren;
-export default TimelineApp;

package/dist/apps/vite-config/vite-config-app.d.ts

@@ -1,5 +0,0 @@
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const ViteConfigApp: ({ helpers }: AppComponentProps) => ComponentChildren;
-export default ViteConfigApp;