@tanstack/devtools 0.10.13 → 0.11.0

package/bin/intent.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+// Auto-generated by @tanstack/intent setup
+// Exposes the intent end-user CLI for consumers of this library.
+// Commit this file, then add to your package.json:
+//   "bin": { "intent": "./bin/intent.js" }
+try {
+  await import('@tanstack/intent/intent-library')
+} catch (e) {
+  if (e?.code === 'ERR_MODULE_NOT_FOUND' || e?.code === 'MODULE_NOT_FOUND') {
+    console.error('@tanstack/intent is not installed.')
+    console.error('')
+    console.error('Install it as a dev dependency:')
+    console.error('  npm add -D @tanstack/intent')
+    console.error('')
+    console.error('Or run directly:')
+    console.error('  npx @tanstack/intent@latest list')
+    process.exit(1)
+  }
+  throw e
+}

package/dist/dev.js

@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
     }
     this.#isMounting = true;
     this.#abortMount = false;
-    import('./mount-impl/Z6LKUI5N.js').then(({ mountDevtools }) => {
+    import('./mount-impl/YYPMJI4G.js').then(({ mountDevtools }) => {
       if (this.#abortMount) {
         this.#isMounting = false;
         return;

package/dist/devtools/{W6LG6674.js → AKRRB3KC.js}

@@ -979,7 +979,6 @@ var stylesFactory = (theme) => {
     pluginsTabContent: css2`
       width: 100%;
       height: 100%;
-      overflow-y: auto;
 
       &:not(:last-child) {
         border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
@@ -2941,6 +2940,22 @@ var PLUGIN_REGISTRY = {
     // New plugin banner
     tags: ["TanStack"]
   },
+  // TanStack A11y Devtools
+  "@tanstack/devtools-a11y": {
+    packageName: "@tanstack/devtools-a11y",
+    title: "Accessibility Devtools",
+    description: "Audit accessibility issues in real-time with axe-core. Supports WCAG 2.1/2.2, live monitoring, and visual overlays.",
+    pluginImport: {
+      importName: "createA11yPlugin",
+      type: "function"
+    },
+    pluginId: "devtools-a11y",
+    docsUrl: "https://tanstack.com/devtools/latest/docs/plugins/a11y",
+    author: "TanStack",
+    framework: "react",
+    isNew: true,
+    tags: ["TanStack", "a11y"]
+  },
   // ==========================================
   // THIRD-PARTY PLUGINS - Examples
   // ==========================================
@@ -3441,7 +3456,7 @@ var PluginMarketplace = () => {
 var _tmpl$15 = /* @__PURE__ */ template(`<div><div><div><div></div><div><h3>Add More`);
 var _tmpl$27 = /* @__PURE__ */ template(`<div><h3>`);
 var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
-var PluginsTab = () => {
+var PluginsTab = (props) => {
   const {
     plugins,
     activePlugins,
@@ -3468,7 +3483,10 @@ var PluginsTab = () => {
     currentActivePlugins?.forEach((plugin) => {
       const ref = pluginRefs().get(plugin.id);
       if (ref) {
-        plugin.render(ref, theme());
+        plugin.render(ref, {
+          theme: theme(),
+          devtoolsOpen: props.isOpen
+        });
       }
     });
   });
@@ -3502,7 +3520,10 @@ var PluginsTab = () => {
           let pluginHeading;
           createEffect(() => {
             if (pluginHeading) {
-              typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading, theme());
+              typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading, {
+                theme: theme(),
+                devtoolsOpen: props.isOpen
+              });
             }
           });
           const isActive = createMemo(() => activePlugins().includes(plugin.id));
@@ -3928,7 +3949,7 @@ var SeoTab = () => {
 var tabs = [{
   name: "Plugins",
   id: "plugins",
-  component: () => createComponent(PluginsTab, {}),
+  component: (props) => createComponent(PluginsTab, props),
   icon: () => createComponent(List, {})
 }, {
   name: "SEO",
@@ -4007,7 +4028,7 @@ var Tabs = (props) => {
 };
 delegateEvents(["click"]);
 var _tmpl$18 = /* @__PURE__ */ template(`<div>`);
-var TabContent = () => {
+var TabContent = (props) => {
   const {
     state
   } = useDevtoolsState();
@@ -4015,7 +4036,9 @@ var TabContent = () => {
   const component = createMemo(() => tabs.find((t) => t.id === state().activeTab)?.component || null);
   return (() => {
     var _el$ = _tmpl$18();
-    insert(_el$, () => component()?.());
+    insert(_el$, () => component()?.({
+      isOpen: props.isOpen
+    }));
     effect(() => className(_el$, styles().tabContent));
     return _el$;
   })();
@@ -4307,6 +4330,12 @@ function DevTools() {
   const {
     theme
   } = useTheme();
+  createEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    document.documentElement.dataset.tanstackDevtoolsTheme = theme();
+  });
   return createComponent(ThemeContextProvider, {
     get theme() {
       return theme();
@@ -4338,7 +4367,11 @@ function DevTools() {
                     get children() {
                       return [createComponent(Tabs, {
                         toggleOpen
-                      }), createComponent(TabContent, {})];
+                      }), createComponent(TabContent, {
+                        get isOpen() {
+                          return isOpen();
+                        }
+                      })];
                     }
                   });
                 }

package/dist/devtools/{7Z2ESJHO.js → UZDPUP5E.js}

@@ -979,7 +979,6 @@ var stylesFactory = (theme) => {
     pluginsTabContent: css2`
       width: 100%;
       height: 100%;
-      overflow-y: auto;
 
       &:not(:last-child) {
         border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
@@ -2613,6 +2612,22 @@ var PLUGIN_REGISTRY = {
     // New plugin banner
     tags: ["TanStack"]
   },
+  // TanStack A11y Devtools
+  "@tanstack/devtools-a11y": {
+    packageName: "@tanstack/devtools-a11y",
+    title: "Accessibility Devtools",
+    description: "Audit accessibility issues in real-time with axe-core. Supports WCAG 2.1/2.2, live monitoring, and visual overlays.",
+    pluginImport: {
+      importName: "createA11yPlugin",
+      type: "function"
+    },
+    pluginId: "devtools-a11y",
+    docsUrl: "https://tanstack.com/devtools/latest/docs/plugins/a11y",
+    author: "TanStack",
+    framework: "react",
+    isNew: true,
+    tags: ["TanStack", "a11y"]
+  },
   // ==========================================
   // THIRD-PARTY PLUGINS - Examples
   // ==========================================
@@ -3091,7 +3106,7 @@ var PluginMarketplace = () => {
 var _tmpl$17 = ["<div", "><div", "><div", "><div", ">", "</div><div", "><h3>Add More</h3></div></div></div>", "</div>"];
 var _tmpl$28 = ["<div", '><h3 id="', '"></h3></div>'];
 var _tmpl$35 = ['<div id="', '"', "></div>"];
-var PluginsTab = () => {
+var PluginsTab = (props) => {
   const {
     plugins,
     activePlugins,
@@ -3118,7 +3133,10 @@ var PluginsTab = () => {
     currentActivePlugins?.forEach((plugin) => {
       const ref = pluginRefs().get(plugin.id);
       if (ref) {
-        plugin.render(ref, theme());
+        plugin.render(ref, {
+          theme: theme(),
+          devtoolsOpen: props.isOpen
+        });
       }
     });
   });
@@ -3437,7 +3455,7 @@ var SeoTab = () => {
 var tabs = [{
   name: "Plugins",
   id: "plugins",
-  component: () => createComponent(PluginsTab, {}),
+  component: (props) => createComponent(PluginsTab, props),
   icon: () => createComponent(List, {})
 }, {
   name: "SEO",
@@ -3473,13 +3491,15 @@ var Tabs = (props) => {
   })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$37, ssrStyleProperty("margin-top:", "auto") + ssrStyleProperty(";width:", "100%"), ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
 };
 var _tmpl$20 = ["<div", ">", "</div>"];
-var TabContent = () => {
+var TabContent = (props) => {
   const {
     state
   } = useDevtoolsState();
   const styles = useStyles();
   const component = createMemo(() => tabs.find((t) => t.id === state().activeTab)?.component || null);
-  return ssr(_tmpl$20, ssrAttribute("class", escape(styles().tabContent, true), false), escape(component()?.()));
+  return ssr(_tmpl$20, ssrAttribute("class", escape(styles().tabContent, true), false), escape(component()?.({
+    isOpen: props.isOpen
+  })));
 };
 var _tmpl$21 = ['<div style="', '">', "</div>"];
 var _tmpl$211 = ['<div style="', '"></div>'];
@@ -3732,6 +3752,12 @@ function DevTools() {
   const {
     theme
   } = useTheme();
+  createEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    document.documentElement.dataset.tanstackDevtoolsTheme = theme();
+  });
   return createComponent(ThemeContextProvider, {
     get theme() {
       return theme();
@@ -3759,7 +3785,11 @@ function DevTools() {
                     get children() {
                       return [createComponent(Tabs, {
                         toggleOpen
-                      }), createComponent(TabContent, {})];
+                      }), createComponent(TabContent, {
+                        get isOpen() {
+                          return isOpen();
+                        }
+                      })];
                     }
                   });
                 }

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import * as solid_js from 'solid-js';
+import { TanStackDevtoolsTheme } from '@tanstack/devtools-ui';
+export { TanStackDevtoolsTheme } from '@tanstack/devtools-ui';
 import { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
 export { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
 
@@ -8,7 +10,9 @@ declare const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
 declare const tabs: readonly [{
     readonly name: "Plugins";
     readonly id: "plugins";
-    readonly component: () => solid_js.JSX.Element;
+    readonly component: (props: {
+        isOpen: boolean;
+    }) => solid_js.JSX.Element;
     readonly icon: () => solid_js.JSX.Element;
 }, {
     readonly name: "SEO";
@@ -28,7 +32,7 @@ type KeyboardKey = ModifierKey | (string & {});
 
 type TriggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right';
 type TriggerProps = {
-    theme: 'light' | 'dark';
+    theme: TanStackDevtoolsTheme;
 };
 type DevtoolsStore = {
     settings: {
@@ -76,7 +80,7 @@ type DevtoolsStore = {
          * The theme of the dev tools
          * @default "dark"
          */
-        theme: 'light' | 'dark';
+        theme: TanStackDevtoolsTheme;
         /**
          * Whether the trigger should be completely hidden or not (you can still open with the hotkey)
          */
@@ -97,6 +101,10 @@ type DevtoolsStore = {
     plugins?: Array<TanStackDevtoolsPlugin>;
 };
 
+interface TanStackDevtoolsPluginProps {
+    theme: TanStackDevtoolsTheme;
+    devtoolsOpen: boolean;
+}
 interface TanStackDevtoolsPlugin {
     /**
      * Name to be displayed in the devtools UI.
@@ -124,7 +132,7 @@ interface TanStackDevtoolsPlugin {
      *   }
      * ```
      */
-    name: string | ((el: HTMLHeadingElement, theme: DevtoolsStore['settings']['theme']) => void);
+    name: string | ((el: HTMLHeadingElement, props: TanStackDevtoolsPluginProps) => void);
     /**
      * Unique identifier for the plugin.
      * If not provided, it will be generated based on the name.
@@ -149,7 +157,7 @@ interface TanStackDevtoolsPlugin {
      *   }
      * ```
      */
-    render: (el: HTMLDivElement, theme: DevtoolsStore['settings']['theme']) => void;
+    render: (el: HTMLDivElement, props: TanStackDevtoolsPluginProps) => void;
     destroy?: (pluginId: string) => void;
 }
 type TanStackDevtoolsConfig = DevtoolsStore['settings'];
@@ -191,4 +199,4 @@ declare class TanStackDevtoolsCore {
     setConfig(config: Partial<TanStackDevtoolsInit>): void;
 }
 
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, type TanStackDevtoolsConfig, TanStackDevtoolsCore, type TanStackDevtoolsInit, type TanStackDevtoolsPlugin };
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, type TanStackDevtoolsConfig, TanStackDevtoolsCore, type TanStackDevtoolsInit, type TanStackDevtoolsPlugin, type TanStackDevtoolsPluginProps };

package/dist/index.js

@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
     }
     this.#isMounting = true;
     this.#abortMount = false;
-    import('./mount-impl/Z6LKUI5N.js').then(({ mountDevtools }) => {
+    import('./mount-impl/YYPMJI4G.js').then(({ mountDevtools }) => {
       if (this.#abortMount) {
         this.#isMounting = false;
         return;

package/dist/mount-impl/{EMNOPRXX.js → IGHTIX6Y.js}

@@ -14,7 +14,7 @@ function mountDevtools(options) {
   } = options;
   const eventBus = new ClientEventBus(eventBusConfig);
   eventBus.start();
-  const Devtools = lazy(() => import('../devtools/7Z2ESJHO.js'));
+  const Devtools = lazy(() => import('../devtools/UZDPUP5E.js'));
   const dispose = render(() => createComponent(DevtoolsProvider, {
     plugins,
     config,

package/dist/mount-impl/{Z6LKUI5N.js → YYPMJI4G.js}

@@ -14,7 +14,7 @@ function mountDevtools(options) {
   } = options;
   const eventBus = new ClientEventBus(eventBusConfig);
   eventBus.start();
-  const Devtools = lazy(() => import('../devtools/W6LG6674.js'));
+  const Devtools = lazy(() => import('../devtools/AKRRB3KC.js'));
   const dispose = render(() => createComponent(DevtoolsProvider, {
     plugins,
     config,

package/dist/server.js

@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
     }
     this.#isMounting = true;
     this.#abortMount = false;
-    import('./mount-impl/EMNOPRXX.js').then(({ mountDevtools }) => {
+    import('./mount-impl/IGHTIX6Y.js').then(({ mountDevtools }) => {
       if (this.#abortMount) {
         this.#isMounting = false;
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.10.13",
+  "version": "0.11.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -40,13 +40,18 @@
     "types": "./dist/index.d.ts",
     "import": "./dist/index.js"
   },
+  "bin": {
+    "intent": "./bin/intent.js"
+  },
   "sideEffects": false,
   "engines": {
     "node": ">=18"
   },
   "files": [
     "dist/",
-    "src"
+    "src",
+    "skills",
+    "bin"
   ],
   "dependencies": {
     "@solid-primitives/event-listener": "^2.4.3",
@@ -57,7 +62,7 @@
     "solid-js": "^1.9.9",
     "@tanstack/devtools-client": "0.0.6",
     "@tanstack/devtools-event-bus": "0.4.1",
-    "@tanstack/devtools-ui": "0.5.0"
+    "@tanstack/devtools-ui": "0.5.1"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"
@@ -65,7 +70,7 @@
   "devDependencies": {
     "tsup": "^8.5.0",
     "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.8"
+    "vite-plugin-solid": "^2.11.11"
   },
   "scripts": {
     "clean": "premove ./build ./dist",