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

package/CHANGELOG.md

@@ -1,3 +1,52 @@
+## @visulima/dev-toolbar [1.0.0-alpha.4](https://github.com/visulima/visulima/compare/@visulima/dev-toolbar@1.0.0-alpha.3...@visulima/dev-toolbar@1.0.0-alpha.4) (2026-03-04)
+
+### Bug Fixes
+
+* allowed vite 8 ([807071e](https://github.com/visulima/visulima/commit/807071ea041e1beaf7e773ac6bbd23efa9f33b32))
+* **dev-toolbar:** exclude inspector and tailwind from More "Additional Apps" ([812252a](https://github.com/visulima/visulima/commit/812252a96916ac346765631a0997ff2150e54e40))
+
+### Miscellaneous Chores
+
+* deps update ([9be09e9](https://github.com/visulima/visulima/commit/9be09e95e2bce8fe52e88b186c43b8cc6bae865c))
+* **dev-toolbar:** fix all ESLint errors and warnings across src and tests ([a14d2ed](https://github.com/visulima/visulima/commit/a14d2ed116b23ff1c61db28324b76aa55931919c))
+* **dev-toolbar:** remove external Google Fonts dependency ([2e81646](https://github.com/visulima/visulima/commit/2e81646f49a886d8ef9df7f9c951c87363f9b50d))
+
+## @visulima/dev-toolbar [1.0.0-alpha.3](https://github.com/visulima/visulima/compare/@visulima/dev-toolbar@1.0.0-alpha.2...@visulima/dev-toolbar@1.0.0-alpha.3) (2026-03-03)
+
+### Features
+
+* **dev-toolbar:** add editor option to configure launch-editor per project ([2003693](https://github.com/visulima/visulima/commit/200369383470a835c5312b8af7b11e4d4183c369))
+* **dev-toolbar:** add JSX source injection Vite plugin for inspector click-to-source ([2c5c5a6](https://github.com/visulima/visulima/commit/2c5c5a65399cd8cb14b10c83a9346364e7ca3ecd))
+* **dev-toolbar:** add light/dark theme awareness to inspector overlays ([2bd30ee](https://github.com/visulima/visulima/commit/2bd30eeb9e7047894d8287a63b4719873df22375))
+* **dev-toolbar:** add open-in-editor, copy HTML, and copy path to inspector ([f88e9b0](https://github.com/visulima/visulima/commit/f88e9b0d21979dd1214c511a9474b0204bb16191))
+* **dev-toolbar:** add Preact-native UI kit and migrate apps to use it ([2fced8e](https://github.com/visulima/visulima/commit/2fced8e8547409ad9d39fd9af2a81010a5fd1999))
+* **dev-toolbar:** add removeDevtoolsOnBuild option to Vite plugin ([d8d1d67](https://github.com/visulima/visulima/commit/d8d1d67a20747df23da60e4d81a2acd89516dc48))
+* **dev-toolbar:** implement timeline event capture for HMR, network and JS errors ([9851ac7](https://github.com/visulima/visulima/commit/9851ac7a12a3b72d52b4f705c2afa7ecbfdf3cc0))
+
+### Bug Fixes
+
+* **dev-toolbar:** add suppressHydrationWarning to prevent SSR hydration mismatch ([3c5d8e0](https://github.com/visulima/visulima/commit/3c5d8e0eb7eaf786dbe029598f50dfb2b5ce68a6))
+* **dev-toolbar:** align UI components and inspector with design system ([93ff58b](https://github.com/visulima/visulima/commit/93ff58b88e61d2eab8b3289cf3ad76028380a45f))
+* **dev-toolbar:** correct broken test assertions for settings, button, input, and textarea ([770100f](https://github.com/visulima/visulima/commit/770100f5a73b634e65373fb2b2e344a353a0978c))
+* **dev-toolbar:** fix inspector by closing panel during inspection and move settings to bottom ([575e79c](https://github.com/visulima/visulima/commit/575e79ce2c581c0f48eae55589c83d9dbb30b6f1))
+* **dev-toolbar:** hide action-only apps (e.g. Inspector) from canvas sidebar ([9fcf7e1](https://github.com/visulima/visulima/commit/9fcf7e1786ec4b7c1666da6500f011eff13a2fd2))
+* **dev-toolbar:** prevent action buttons from opening the canvas panel ([113e540](https://github.com/visulima/visulima/commit/113e540bb19d5dbedc6fbef9138bf04d2434b7f1))
+* **dev-toolbar:** prevent hydration mismatch from data-vdt-source in SSR apps ([231ecc7](https://github.com/visulima/visulima/commit/231ecc73f70a49da4a6cd0b584760d12369bd8f0))
+* **dev-toolbar:** remove redundant server arg from RPC function dispatch ([a941dc7](https://github.com/visulima/visulima/commit/a941dc7e593d3681bed61b374262abb8a476392b))
+* **dev-toolbar:** replace require() with dynamic import() in openInEditor ([3fede74](https://github.com/visulima/visulima/commit/3fede740db2c431c6bb62897d13a0d9afb8cc65a))
+* **dev-toolbar:** split RPC barrel and fix open-in-editor with launch-editor ([28e079a](https://github.com/visulima/visulima/commit/28e079afa10ac4ed2e729205f8bdf9405d33c1c2))
+* **dev-toolbar:** use HMR WebSocket RPC to open files in editor ([a63cdab](https://github.com/visulima/visulima/commit/a63cdab1c30f9f73eb6b5f59f7c1ee4143135eba))
+* **dev-toolbar:** use original file positions to prevent SSR hydration mismatch ([a40edd5](https://github.com/visulima/visulima/commit/a40edd5fb1a11a5208182dd71627b472f64db6c5))
+
+### Documentation
+
+* **dev-toolbar:** document removeDevtoolsOnBuild option ([00955b2](https://github.com/visulima/visulima/commit/00955b2a484df78f66b4c58babbeb514d4943285))
+* **dev-toolbar:** update docs for all recent feature additions ([b204e0f](https://github.com/visulima/visulima/commit/b204e0f8956cafb6967363fa0cc2b01c435cdedc))
+
+### Code Refactoring
+
+* **dev-toolbar:** convert inspector to toolbar action button ([0d0b682](https://github.com/visulima/visulima/commit/0d0b682e65511c158baa29134a8c50e7db459284))
+
 ## @visulima/dev-toolbar [1.0.0-alpha.2](https://github.com/visulima/visulima/compare/@visulima/dev-toolbar@1.0.0-alpha.1...@visulima/dev-toolbar@1.0.0-alpha.2) (2026-03-01)
 
 ### Bug Fixes

package/README.md

@@ -28,7 +28,7 @@
 
 `@visulima/dev-toolbar` is a framework-agnostic development toolbar for **any Vite project** — React, Vue, Svelte, SolidJS, or plain HTML. Inspired by Astro DevToolbar, Vue DevTools, and Nuxt DevTools, it provides a consistent developer experience regardless of your framework.
 
-The toolbar renders inside a Shadow DOM custom element (zero style leakage), communicates with the Vite dev server over type-safe RPC, and ships **seven built-in apps** covering the most common development workflows.
+The toolbar renders inside a Shadow DOM custom element (zero style leakage), communicates with the Vite dev server over type-safe RPC, and ships **nine built-in apps** covering the most common development workflows.
 
 ## Install
 
@@ -53,9 +53,7 @@ import { defineConfig } from "vite";
 import { devToolbar } from "@visulima/dev-toolbar/vite";
 
 export default defineConfig({
-    plugins: [
-        devToolbar(),
-    ],
+    plugins: [devToolbar()],
 });
 ```
 
@@ -63,15 +61,17 @@ Start your dev server and press **`Alt`+`Shift`+`D`** to open the toolbar.
 
 ## Built-in Apps
 
-| App | What it does |
-|---|---|
+| App               | What it does                                                                  |
+| ----------------- | ----------------------------------------------------------------------------- |
 | **Accessibility** | axe-core WCAG audit with live element overlays and sessionStorage persistence |
-| **Performance** | Web Vitals (LCP, INP, CLS, FCP, TTFB), resource timing, navigation waterfall |
-| **SEO** | Social preview cards for 7 platforms + full meta tag audit |
-| **Timeline** | Chronological event log from your app and integrated libraries |
-| **Module Graph** | Browse and filter Vite's live module dependency graph |
-| **Vite Config** | Inspect the fully resolved Vite configuration |
-| **Settings** | Theme, toolbar behaviour, panel sizing, and custom keyboard shortcuts |
+| **Performance**   | Web Vitals (LCP, INP, CLS, FCP, TTFB), resource timing, navigation waterfall  |
+| **SEO**           | Social preview cards for 7 platforms + full meta tag audit                    |
+| **Timeline**      | Chronological event log from your app and integrated libraries                |
+| **Module Graph**  | Browse and filter Vite's live module dependency graph                         |
+| **Vite Config**   | Inspect the fully resolved Vite configuration                                 |
+| **Inspector**     | Click any element to jump to its JSX source in your editor                    |
+| **Tailwind**      | Browse all resolved Tailwind CSS design tokens and their values               |
+| **Settings**      | Theme, toolbar behaviour, panel sizing, and custom keyboard shortcuts         |
 
 All apps are enabled by default. Disable individual apps via plugin options:
 
@@ -81,7 +81,7 @@ devToolbar({
         performance: false,
         seo: false,
     },
-})
+});
 ```
 
 ## Plugin Options
@@ -97,19 +97,21 @@ devToolbar({
         settings: true,
         timeline: true,
         viteConfig: true,
+        inspector: true,
+        tailwind: true,
     },
 
     // Register custom apps
     customApps: [],
 
     // Toolbar pill placement
-    placement: "bottom-center",     // "bottom-left" | "bottom-center" | "bottom-right"
-    position: "bottom",             // "bottom" | "top" | "left" | "right"
+    placement: "bottom-center", // "bottom-left" | "bottom-center" | "bottom-right"
+    position: "bottom", // "bottom" | "top" | "left" | "right"
 
     // Panel defaults (users can override via Settings app)
-    height: 60,                     // % of viewport height
-    width: 80,                      // % of viewport width
-    minimizePanelInactive: 5000,    // ms; -1 = never auto-hide
+    height: 60, // % of viewport height
+    width: 80, // % of viewport width
+    minimizePanelInactive: 5000, // ms; -1 = never auto-hide
     closeOnOutsideClick: true,
 
     // Keyboard shortcuts (project-level defaults)
@@ -117,17 +119,32 @@ devToolbar({
         toggle: "Alt+Shift+D",
         close: "Escape",
     },
-})
+
+    // Strip toolbar from production builds (default: true)
+    removeDevtoolsOnBuild: true,
+
+    // Force a specific editor for "Open in editor" (auto-detected if omitted)
+    editor: "webstorm",
+
+    // JSX source injection for click-to-source in the inspector
+    injectSource: {
+        enabled: true, // set false to opt out
+        ignore: {
+            files: ["**/generated/**"], // glob patterns
+            components: ["StrictMode"], // component names
+        },
+    },
+});
 ```
 
 See the [full configuration reference](./docs/configuration.mdx) for all options.
 
 ## Keyboard Shortcuts
 
-| Action | Default |
-|---|---|
+| Action                    | Default           |
+| ------------------------- | ----------------- |
 | Toggle toolbar open/close | `Alt`+`Shift`+`D` |
-| Close active app / panel | `Escape` |
+| Close active app / panel  | `Escape`          |
 
 Both shortcuts are configurable in the Settings app or via plugin options.
 
@@ -152,12 +169,12 @@ devToolbar({
         {
             id: "my-package:my-app",
             name: "My App",
-            icon: myIconSvg,        // raw SVG string
+            icon: myIconSvg, // raw SVG string
             component: MyApp,
-            tooltip: MyTooltip,     // optional hover summary
+            tooltip: MyTooltip, // optional hover summary
         },
     ],
-})
+});
 ```
 
 See the [custom apps guide](./docs/custom-apps/creating-apps.mdx) for a step-by-step walkthrough including RPC, tooltips, and styling.
@@ -175,7 +192,7 @@ devToolbar({
             return files.map((f) => `/${f.replace(/\.(tsx?|jsx?)$/, "")}`);
         },
     },
-})
+});
 
 // Call from your app component
 const routes = await helpers.rpc.getRoutes();
@@ -237,22 +254,22 @@ See the [library integration guide](./docs/integrations/library-integration.mdx)
 
 All docs are in the [`docs/`](./docs/) folder in Fumadocs MDX format:
 
-| Page | Contents |
-|---|---|
-| [Getting Started](./docs/getting-started.mdx) | Install, framework examples, first steps |
-| [Configuration](./docs/configuration.mdx) | Full plugin options reference |
-| [Accessibility](./docs/built-in-apps/accessibility.mdx) | axe-core, overlays, WCAG standards |
-| [Performance](./docs/built-in-apps/performance.mdx) | Web Vitals thresholds, timing APIs |
-| [SEO](./docs/built-in-apps/seo.mdx) | Social previews, meta tag audit |
-| [Timeline](./docs/built-in-apps/timeline.mdx) | Event structure, emitting events |
-| [Module Graph](./docs/built-in-apps/module-graph.mdx) | Search, ext badges, importer view |
-| [Vite Config](./docs/built-in-apps/vite-config.mdx) | Resolved config sections |
-| [Settings](./docs/built-in-apps/settings.mdx) | All settings, localStorage schema |
-| [Creating Apps](./docs/custom-apps/creating-apps.mdx) | Step-by-step custom app guide |
-| [App API](./docs/custom-apps/app-api.mdx) | TypeScript interface reference |
-| [RPC](./docs/custom-apps/rpc.mdx) | Server functions, type-safe pattern |
-| [Global API](./docs/custom-apps/global-api.mdx) | `__VISULIMA_DEVTOOLS__` reference |
-| [Library Integration](./docs/integrations/library-integration.mdx) | Zero-dependency hook pattern |
+| Page                                                               | Contents                                 |
+| ------------------------------------------------------------------ | ---------------------------------------- |
+| [Getting Started](./docs/getting-started.mdx)                      | Install, framework examples, first steps |
+| [Configuration](./docs/configuration.mdx)                          | Full plugin options reference            |
+| [Accessibility](./docs/built-in-apps/accessibility.mdx)            | axe-core, overlays, WCAG standards       |
+| [Performance](./docs/built-in-apps/performance.mdx)                | Web Vitals thresholds, timing APIs       |
+| [SEO](./docs/built-in-apps/seo.mdx)                                | Social previews, meta tag audit          |
+| [Timeline](./docs/built-in-apps/timeline.mdx)                      | Event structure, emitting events         |
+| [Module Graph](./docs/built-in-apps/module-graph.mdx)              | Search, ext badges, importer view        |
+| [Vite Config](./docs/built-in-apps/vite-config.mdx)                | Resolved config sections                 |
+| [Settings](./docs/built-in-apps/settings.mdx)                      | All settings, localStorage schema        |
+| [Creating Apps](./docs/custom-apps/creating-apps.mdx)              | Step-by-step custom app guide            |
+| [App API](./docs/custom-apps/app-api.mdx)                          | TypeScript interface reference           |
+| [RPC](./docs/custom-apps/rpc.mdx)                                  | Server functions, type-safe pattern      |
+| [Global API](./docs/custom-apps/global-api.mdx)                    | `__VISULIMA_DEVTOOLS__` reference        |
+| [Library Integration](./docs/integrations/library-integration.mdx) | Zero-dependency hook pattern             |
 
 ## Supported Node.js Versions
 

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

@@ -1,10 +1,10 @@
-export type Severity = "critical" | "minor" | "moderate" | "serious";
-export type Standard = "best-practice" | "wcag21aa" | "wcag22aa" | "wcag2a";
-export interface A11yNode {
+type Severity = "critical" | "minor" | "moderate" | "serious";
+type Standard = "best-practice" | "wcag21aa" | "wcag22aa" | "wcag2a";
+interface A11yNode {
     html: string;
     selector: string;
 }
-export interface A11yIssue {
+interface A11yIssue {
     helpUrl: string;
     id: string;
     impact: Severity;
@@ -12,35 +12,31 @@ export interface A11yIssue {
     nodes: A11yNode[];
     wcagTags: string[];
 }
-export interface A11yStoreState {
+interface A11yStoreState {
     isScanning: boolean;
     issues: A11yIssue[];
-    lastScan: null | string;
-    scanError: null | string;
+    lastScan: string | undefined;
+    scanError: string | undefined;
     showOverlays: boolean;
     standard: Standard;
 }
-export declare const SEVERITY_ORDER: Severity[];
+declare const SEVERITY_ORDER: Severity[];
 type Listener = () => void;
 declare class A11yStore {
     private listeners;
     private state;
     constructor();
-    /** Remove all outline highlights from the page */
     clearHighlights(): void;
     getState(): Readonly<A11yStoreState>;
-    /** Scroll to and outline a single issue's elements */
     highlightIssue(issue: A11yIssue): void;
-    /** Run an axe-core scan and persist results */
     scan(disabledRules?: string[]): Promise<void>;
-    /** Toggle overlay highlights on all affected elements */
     setShowOverlays(show: boolean): void;
-    /** Change the WCAG standard used for future scans */
     setStandard(standard: Standard): void;
-    subscribe(fn: Listener): () => void;
+    subscribe(listener: Listener): () => void;
     private notify;
     private persist;
     private update;
 }
-export declare const a11yStore: A11yStore;
-export {};
+declare const a11yStore: A11yStore;
+export type { A11yIssue, A11yNode, A11yStoreState, Severity, Standard };
+export { a11yStore, SEVERITY_ORDER };

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

@@ -4,7 +4,7 @@ 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)
+ * @param _props Tooltip props (unused; reads from a11yStore directly)
  * @returns Rendered tooltip component
  */
 declare const A11yTooltip: (_props: AppTooltipProps) => ComponentChildren;

package/dist/apps/a11y/index.js

@@ -1,21 +1,2 @@
-var K=Object.defineProperty;var C=(o,e)=>K(o,"name",{value:e,configurable:!0});import{addHookName as v}from"preact/devtools";import{useState as S,useEffect as U}from"preact/hooks";import{m as u}from"../../packem_shared/cn-BEsR6GkP.js";import{jsxs as a,jsx as t,Fragment as G}from"preact/jsx-runtime";const Q=`<!-- @license lucide-static v0.575.0 - ISC -->
-<svg
-  class="lucide lucide-accessibility"
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <circle cx="16" cy="4" r="1" />
-  <path d="m18 19 1-7-6 1" />
-  <path d="m5 8 3-3 5.5 3-2.36 3.5" />
-  <path d="M4.24 14.5a5 5 0 0 0 6.88 6" />
-  <path d="M13.76 17.5a5 5 0 0 0-6.88-6" />
-</svg>
-`;var X=Object.defineProperty,b=C((o,e)=>X(o,"name",{value:e,configurable:!0}),"i$2");const M=["critical","serious","moderate","minor"],Z={critical:"rgb(239,68,68)",minor:"rgb(100,116,139)",moderate:"rgb(249,115,22)",serious:"rgb(234,179,8)"},ee={"best-practice":["best-practice"],wcag21aa:["wcag2a","wcag2aa","wcag21a","wcag21aa"],wcag22aa:["wcag2a","wcag2aa","wcag21a","wcag21aa","wcag22a","wcag22aa"],wcag2a:["wcag2a"]},H="__vdt_a11y__",te=b(()=>{try{const o=sessionStorage.getItem(H);if(o){const e=JSON.parse(o);if(Array.isArray(e.issues))return{issues:e.issues,lastScan:e.lastScan??null}}}catch{}return{issues:[],lastScan:null}},"loadFromSession"),_=b((o,e)=>{const s=o;s.dataset.vdtA11y=e,s.style.setProperty("outline",`2px solid ${Z[e]}`,"important"),s.style.setProperty("outline-offset","2px","important")},"setHighlight"),E=b(()=>{for(const o of document.querySelectorAll("[data-vdt-a11y]")){const e=o;delete e.dataset.vdtA11y,e.style.removeProperty("outline"),e.style.removeProperty("outline-offset")}},"clearHighlightsDOM"),B=b(o=>{E();for(const e of o)for(const s of e.nodes)try{const r=document.querySelector(s.selector);r&&_(r,e.impact)}catch{}},"applyOverlaysDOM"),re=b(o=>{const e=o[o.length-1];return Array.isArray(e)?e.join(" "):String(e??"")},"nodeSelector"),ne=b((o,e)=>{const s=[];for(const r of o)e.includes(r.id)||s.push({helpUrl:r.helpUrl,id:r.id,impact:r.impact??"minor",message:r.help,nodes:r.nodes.map(i=>({html:i.html,selector:re(i.target)})),wcagTags:r.tags.filter(i=>i.startsWith("wcag")||i==="best-practice")});return s},"convertViolations"),se=b(async o=>{const e=await import("axe-core"),s=typeof e.default?.run=="function"?e.default:e;if(typeof s.run!="function")throw new Error("axe-core could not be loaded — .run is not available");return s.run(document,{exclude:[["dev-toolbar"]],runOnly:{type:"tag",values:ee[o]}})},"runAxeScan");class oe{static{C(this,"f")}static{b(this,"A11yStore")}listeners=new Set;state;constructor(){const{issues:e,lastScan:s}=te();this.state={isScanning:!1,issues:e,lastScan:s,scanError:null,showOverlays:!1,standard:"wcag21aa"}}clearHighlights(){E()}getState(){return this.state}highlightIssue(e){E();let s=!1;for(const r of e.nodes)try{const i=document.querySelector(r.selector);i&&(_(i,e.impact),s||(i.scrollIntoView({behavior:"smooth",block:"center"}),s=!0))}catch{}}async scan(e=[]){if(!this.state.isScanning){this.update({isScanning:!0,scanError:null});try{const s=await se(this.state.standard),r=ne(s.violations,e);this.update({isScanning:!1,issues:r,lastScan:new Date().toISOString()}),this.persist(),this.state.showOverlays&&B(r)}catch(s){this.update({isScanning:!1,scanError:s instanceof Error?s.message:String(s)})}}}setShowOverlays(e){this.update({showOverlays:e}),e?B(this.state.issues):E()}setStandard(e){this.update({standard:e})}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){for(const e of this.listeners)e()}persist(){try{sessionStorage.setItem(H,JSON.stringify({issues:this.state.issues,lastScan:this.state.lastScan}))}catch{}}update(e){this.state={...this.state,...e},this.notify()}}const c=new oe;var ae=Object.defineProperty,l=C((o,e)=>ae(o,"name",{value:e,configurable:!0}),"n");const $={critical:"Critical",minor:"Minor",moderate:"Moderate",serious:"Serious"},W={critical:"text-destructive",minor:"text-muted-foreground",moderate:"text-warning-foreground",serious:"text-warning-foreground"},ie={critical:"bg-destructive/10 border-destructive/30",minor:"bg-foreground/4 border-border",moderate:"bg-warning/10 border-warning/30",serious:"bg-warning/10 border-warning/30"},le={critical:"bg-destructive",minor:"bg-muted-foreground/50",moderate:"bg-warning",serious:"bg-warning"},ce=l(({count:o,isActive:e,onClick:s,severity:r})=>a("button",{class:u("flex flex-col items-center gap-1 px-3 py-2.5 border cursor-pointer transition-colors",e?"ring-1 ring-inset ring-primary/40":"hover:bg-foreground/6",ie[r]),onClick:s,title:`${e?"Clear":"Filter by"} ${$[r]}`,type:"button",children:[t("span",{class:u("text-xl font-bold tabular-nums leading-none",W[r]),children:o}),t("span",{class:"text-[0.6rem] font-semibold uppercase tracking-wider text-muted-foreground",children:$[r]})]}),"SeverityBucket"),de=l(({isSelected:o,issue:e,onClick:s,onDisable:r})=>a("div",{class:u("p-3 border cursor-pointer transition-colors",o?"bg-foreground/6 border-primary/30":"border-border hover:bg-foreground/3"),onClick:s,children:[a("div",{class:"flex items-start gap-2 mb-1.5",children:[t("span",{class:u("mt-1 size-2 rounded-full shrink-0",le[e.impact])}),t("span",{class:"text-[0.75rem] font-semibold text-foreground flex-1 leading-snug",children:e.id}),t("span",{class:u("text-[0.6rem] font-bold uppercase tracking-wide shrink-0",W[e.impact]),children:$[e.impact]})]}),t("p",{class:"text-[0.7rem] text-muted-foreground leading-relaxed mb-2 ml-4",children:e.message}),e.nodes.length>0&&a("div",{class:"mb-2 ml-4 space-y-0.5",children:[e.nodes.slice(0,3).map((i,p)=>t("code",{class:"block text-[0.65rem] text-foreground/70 font-mono bg-foreground/5 px-2 py-1 truncate",children:i.selector},p)),e.nodes.length>3&&a("span",{class:"text-[0.62rem] text-muted-foreground/60",children:["+",e.nodes.length-3," more element",e.nodes.length>4?"s":""]})]}),a("div",{class:"flex items-center gap-2 flex-wrap ml-4",children:[e.wcagTags.slice(0,3).map(i=>t("span",{class:"text-[0.58rem] font-mono uppercase bg-primary/8 text-primary/70 border border-primary/20 px-1.5 py-0.5",children:i},i)),t("span",{class:"flex-1"}),t("a",{class:"text-[0.62rem] text-primary/70 hover:text-primary transition-colors",href:e.helpUrl,onClick:l(i=>i.stopPropagation(),"onClick"),rel:"noopener noreferrer",target:"_blank",children:"Learn more ↗"}),t("button",{class:"text-[0.62rem] text-muted-foreground/60 hover:text-muted-foreground transition-colors cursor-pointer bg-transparent border-0 p-0",onClick:l(i=>{i.stopPropagation(),r(e.id)},"onClick"),title:"Disable this rule for current session",type:"button",children:"Disable"})]})]}),"IssueCard"),ue=l(o=>{const[e,s]=v(S(()=>c.getState()),"storeState"),[r,i]=v(S([]),"disabledRules"),[p,A]=v(S(null),"minSeverity"),[y,w]=v(S(null),"activeIssueId"),[m,d]=v(S(null),"filterSeverity");U(()=>c.subscribe(()=>s(c.getState())),[]),U(()=>c.clearHighlights.bind(c),[]);const{isScanning:h,issues:f,lastScan:J,scanError:j,showOverlays:I,standard:V}=e,N=J!==null||j!==null,L=l(()=>{d(null),w(null),c.scan(r)},"handleScan"),q=l(n=>{y===n.id?(w(null),c.clearHighlights(),I&&c.setShowOverlays(!0)):(w(n.id),c.highlightIssue(n))},"handleIssueClick"),F=l(n=>{i(g=>[...g,n])},"handleDisableRule"),R=f.filter(n=>!(r.includes(n.id)||m&&n.impact!==m||p&&M.indexOf(n.impact)>M.indexOf(p))),Y=l(n=>f.filter(g=>!r.includes(g.id)&&g.impact===n).length,"countBy");return a("div",{class:"flex flex-col h-full",children:[a("div",{class:"shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-border bg-foreground/2 flex-wrap",children:[t("button",{class:u("px-3 py-1.5 text-[0.7rem] font-medium border transition-colors cursor-pointer",h?"border-primary/30 text-primary/50 bg-primary/5 cursor-not-allowed":"border-border text-foreground bg-transparent hover:bg-foreground/5"),disabled:h,onClick:L,type:"button",children:h?"Scanning…":"Scan page"}),a("label",{class:"flex items-center gap-1.5 text-[0.7rem] text-muted-foreground",children:["Standard",a("select",{class:"bg-card border border-border text-foreground text-[0.7rem] px-1.5 py-1 cursor-pointer",onChange:l(n=>c.setStandard(n.target.value),"onChange"),style:"color-scheme: dark",value:V,children:[t("option",{value:"wcag21aa",children:"WCAG 2.1 AA"}),t("option",{value:"wcag22aa",children:"WCAG 2.2 AA"}),t("option",{value:"wcag2a",children:"WCAG 2.0 A"}),t("option",{value:"best-practice",children:"Best Practice"})]})]}),a("label",{class:"flex items-center gap-1.5 text-[0.7rem] text-muted-foreground",children:["Min",a("select",{class:"bg-card border border-border text-foreground text-[0.7rem] px-1.5 py-1 cursor-pointer",onChange:l(n=>{const g=n.target.value;A(g||null)},"onChange"),style:"color-scheme: dark",value:p??"",children:[t("option",{value:"",children:"All"}),t("option",{value:"critical",children:"Critical only"}),t("option",{value:"serious",children:"Serious+"}),t("option",{value:"moderate",children:"Moderate+"})]})]}),t("button",{class:u("px-2.5 py-1.5 text-[0.7rem] border transition-colors cursor-pointer",I?"border-primary/30 text-primary bg-primary/8":"border-border text-muted-foreground bg-transparent hover:text-foreground"),onClick:l(()=>c.setShowOverlays(!I),"onClick"),title:"Toggle visual highlights on affected elements",type:"button",children:"Overlays"}),N&&f.length>0&&a(G,{children:[t("button",{class:"ml-auto px-2 py-1.5 text-[0.7rem] border border-border text-muted-foreground bg-transparent hover:text-foreground transition-colors cursor-pointer",onClick:l(()=>{const n=new Blob([JSON.stringify(f,null,2)],{type:"application/json"}),g=URL.createObjectURL(n),k=document.createElement("a");k.href=g,k.download="a11y-audit.json",k.click(),URL.revokeObjectURL(g)},"onClick"),title:"Export audit results as JSON",type:"button",children:"JSON"}),t("button",{class:"px-2 py-1.5 text-[0.7rem] border border-border text-muted-foreground bg-transparent hover:text-foreground transition-colors cursor-pointer",onClick:l(()=>{const n=l(x=>`"${x.replaceAll('"','""')}"`,"q"),g=["Rule ID","Severity","Message","Selector","HTML","WCAG Tags"].join(","),k=f.flatMap(x=>x.nodes.map(T=>[n(x.id),n(x.impact),n(x.message),n(T.selector),n(T.html),n(x.wcagTags.join("; "))].join(","))),z=new Blob([[g,...k].join(`
-`)],{type:"text/csv"}),P=URL.createObjectURL(z),D=document.createElement("a");D.href=P,D.download="a11y-audit.csv",D.click(),URL.revokeObjectURL(P)},"onClick"),title:"Export audit results as CSV",type:"button",children:"CSV"})]})]}),a("div",{class:"flex-1 overflow-y-auto devtools-content-scroll",children:[j&&t("div",{class:"p-4 bg-destructive/10 border-b border-destructive/30",children:a("p",{class:"text-[0.72rem] text-destructive font-medium",children:["Scan failed: ",j]})}),!N&&!h&&a("div",{class:"flex flex-col items-center justify-center gap-4 p-8 min-h-48 text-center",children:[t("p",{class:"text-[0.8125rem] text-muted-foreground max-w-sm",children:"Run an accessibility audit using axe-core to detect WCAG violations on this page."}),t("button",{class:"px-4 py-2 text-[0.75rem] font-medium border border-border text-foreground bg-transparent hover:bg-foreground/5 transition-colors cursor-pointer",onClick:L,type:"button",children:"Start scan"})]}),h&&t("div",{class:"flex items-center justify-center gap-3 p-8 min-h-48",children:t("span",{class:"text-[0.8rem] text-muted-foreground",children:"Scanning for accessibility issues…"})}),N&&!h&&!j&&a("div",{class:"p-5 space-y-4",children:[t("div",{class:"grid grid-cols-4 gap-2",children:M.map(n=>t(ce,{count:Y(n),isActive:m===n,onClick:l(()=>d(m===n?null:n),"onClick"),severity:n},n))}),R.length===0?a("div",{class:"p-6 text-center border border-border",children:[t("p",{class:"text-[0.8125rem] font-medium text-foreground/70",children:f.length===0?"No violations found!":"No issues match the current filters."}),f.length===0&&t("p",{class:"mt-1 text-[0.7rem] text-muted-foreground",children:"Great — the page passes all rules for the selected standard."})]}):a("section",{children:[a("div",{class:"flex items-center gap-2 mb-2",children:[a("span",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground",children:[t("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"})," ",R.length," issue",R.length!==1?"s":"",m?` · ${$[m]} only`:""]}),m&&t("button",{class:"text-[0.62rem] text-primary/70 hover:text-primary cursor-pointer bg-transparent border-0 p-0 transition-colors",onClick:l(()=>d(null),"onClick"),type:"button",children:"Clear ×"})]}),t("div",{class:"space-y-2",children:R.map(n=>t(de,{isSelected:y===n.id,issue:n,onClick:l(()=>q(n),"onClick"),onDisable:F},n.id))})]}),r.length>0&&a("div",{class:"flex items-center gap-2 text-[0.65rem] text-muted-foreground/60",children:[a("span",{children:[r.length," rule",r.length!==1?"s":""," disabled this session."]}),t("button",{class:"text-primary/60 hover:text-primary cursor-pointer bg-transparent border-0 p-0 transition-colors",onClick:l(()=>i([]),"onClick"),type:"button",children:"Reset"})]})]})]})]})},"A11yApp");var ge=Object.defineProperty,O=C((o,e)=>ge(o,"name",{value:e,configurable:!0}),"i$1");const pe={critical:"text-destructive",minor:"text-muted-foreground",moderate:"text-warning-foreground",serious:"text-warning-foreground"},me={critical:"Crit",minor:"Min",moderate:"Mod",serious:"Ser"},he=O(o=>{const e=new Date(o).getTime();if(Number.isNaN(e))return"unknown";const s=Math.max(0,Math.floor((Date.now()-e)/1e3));if(s<10)return"just now";if(s<60)return`${s}s ago`;const r=Math.floor(s/60);return r<60?`${r} min ago`:`${Math.floor(r/60)} hr ago`},"formatElapsed"),be=O(o=>{const[e,s]=v(S(()=>c.getState()),"state");U(()=>c.subscribe(()=>s(c.getState())),[]);const{isScanning:r,issues:i,lastScan:p,showOverlays:A}=e,y=i.length,w=i.reduce((d,h)=>(d[h.impact]=(d[h.impact]??0)+1,d),{critical:0,minor:0,moderate:0,serious:0}),m=O(d=>w[d],"countBy");return a("div",{class:"space-y-3 min-w-[200px]",children:[p?a(G,{children:[a("div",{class:"flex items-baseline gap-2",children:[t("span",{class:u("text-2xl font-bold tabular-nums leading-none",y>0?"text-destructive":"text-success-foreground"),children:y}),a("span",{class:"text-[0.65rem] text-muted-foreground",children:["violation",y!==1?"s":""]})]}),t("div",{class:"grid grid-cols-4 gap-1.5",children:M.map(d=>a("div",{class:"flex flex-col items-center gap-0.5",children:[t("span",{class:u("text-[0.85rem] font-bold tabular-nums leading-none",pe[d]),children:m(d)}),t("span",{class:"text-[0.55rem] uppercase tracking-wide text-muted-foreground/70",children:me[d]})]},d))}),a("p",{class:"text-[0.62rem] text-muted-foreground/50",children:["Scanned ",he(p)]})]}):a("div",{children:[t("p",{class:"text-[0.72rem] text-muted-foreground",children:"No scan run yet."}),t("p",{class:"text-[0.65rem] text-muted-foreground/50 mt-0.5",children:"Scan this page to detect WCAG violations."})]}),a("div",{class:"flex items-center gap-2 pt-2 border-t border-border/50",children:[t("button",{class:u("flex-1 px-2.5 py-1.5 text-[0.7rem] font-medium border transition-colors cursor-pointer",r?"border-primary/30 text-primary/50 bg-primary/5 cursor-not-allowed":"border-border text-foreground bg-transparent hover:bg-foreground/5"),disabled:r,onClick:O(()=>{c.scan()},"onClick"),type:"button",children:r?"Scanning…":p?"Re-scan":"Scan"}),t("button",{class:u("px-2.5 py-1.5 text-[0.7rem] border transition-colors",i.length===0?"border-border/50 text-muted-foreground/40 bg-transparent cursor-not-allowed":u("cursor-pointer",A?"border-primary/30 text-primary bg-primary/8":"border-border text-muted-foreground bg-transparent hover:text-foreground")),disabled:i.length===0,onClick:O(()=>c.setShowOverlays(!A),"onClick"),title:"Toggle visual highlights on affected elements",type:"button",children:"Overlays"})]})]})},"A11yTooltip"),we={component:ue,icon:Q,id:"dev-toolbar:a11y",name:"Accessibility",tooltip:be};export{we as default};
+var X=Object.defineProperty;var O=(n,e)=>X(n,"name",{value:e,configurable:!0});import Y from"lucide-static/icons/accessibility.svg?raw";import{addHookName as k}from"preact/devtools";import{useState as C,useEffect as L}from"preact/hooks";import d from"../../packem_shared/cn-DWLJYh3h.js";import{jsxs as i,jsx as t,Fragment as W}from"preact/jsx-runtime";import S from"../../packem_shared/Button-DODNCTPZ.js";import{Alert as Z,AlertDescription as ee}from"../../packem_shared/Alert-H-x1JuZ0.js";var te=Object.defineProperty,x=O((n,e)=>te(n,"name",{value:e,configurable:!0}),"i$3");const E=["critical","serious","moderate","minor"],re={critical:"rgb(239,68,68)",minor:"rgb(100,116,139)",moderate:"rgb(249,115,22)",serious:"rgb(234,179,8)"},se={"best-practice":["best-practice"],wcag2a:["wcag2a"],wcag21aa:["wcag2a","wcag2aa","wcag21a","wcag21aa"],wcag22aa:["wcag2a","wcag2aa","wcag21a","wcag21aa","wcag22a","wcag22aa"]},_="__vdt_a11y__",ae=x(()=>{try{const n=sessionStorage.getItem(_);if(n){const e=JSON.parse(n);if(Array.isArray(e.issues))return{issues:e.issues,lastScan:e.lastScan??void 0}}}catch{}return{issues:[],lastScan:void 0}},"loadFromSession"),z=x((n,e)=>{const a=n;a.dataset.vdtA11y=e,a.style.setProperty("outline",`2px solid ${re[e]}`,"important"),a.style.setProperty("outline-offset","2px","important")},"setHighlight"),N=x(()=>{for(const n of document.querySelectorAll("[data-vdt-a11y]")){const e=n;delete e.dataset.vdtA11y,e.style.removeProperty("outline"),e.style.removeProperty("outline-offset")}},"clearHighlightsDOM"),B=x(n=>{N();for(const e of n)for(const a of e.nodes)try{const r=document.querySelector(a.selector);r&&z(r,e.impact)}catch{}},"applyOverlaysDOM"),ne=x(n=>{const e=n.at(-1);return Array.isArray(e)?e.join(" "):String(e??"")},"nodeSelector"),ie=x((n,e)=>{const a=[];for(const r of n)e.includes(r.id)||a.push({helpUrl:r.helpUrl,id:r.id,impact:r.impact??"minor",message:r.help,nodes:r.nodes.map(o=>({html:o.html,selector:ne(o.target)})),wcagTags:r.tags.filter(o=>o.startsWith("wcag")||o==="best-practice")});return a},"convertViolations"),oe=x(async n=>{const e=await import("axe-core"),a=typeof e.default?.run=="function"?e.default:e;if(typeof a.run!="function")throw new TypeError("axe-core could not be loaded — .run is not available");return a.run(document,{exclude:[["dev-toolbar"]],runOnly:{type:"tag",values:se[n]}})},"runAxeScan");class le{static{O(this,"v")}static{x(this,"A11yStore")}listeners=new Set;state;constructor(){const{issues:e,lastScan:a}=ae();this.state={isScanning:!1,issues:e,lastScan:a,scanError:void 0,showOverlays:!1,standard:"wcag21aa"}}clearHighlights(){N()}getState(){return this.state}highlightIssue(e){N();let a=!1;for(const r of e.nodes)try{const o=document.querySelector(r.selector);o&&(z(o,e.impact),a||(o.scrollIntoView({behavior:"smooth",block:"center"}),a=!0))}catch{}}async scan(e=[]){if(!this.state.isScanning){this.update({isScanning:!0,scanError:void 0});try{const a=await oe(this.state.standard),r=ie(a.violations,e);this.update({isScanning:!1,issues:r,lastScan:new Date().toISOString()}),this.persist(),this.state.showOverlays&&B(r)}catch(a){this.update({isScanning:!1,scanError:a instanceof Error?a.message:String(a)})}}}setShowOverlays(e){this.update({showOverlays:e}),e?B(this.state.issues):N()}setStandard(e){this.update({standard:e})}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){for(const e of this.listeners)e()}persist(){try{sessionStorage.setItem(_,JSON.stringify({issues:this.state.issues,lastScan:this.state.lastScan}))}catch{}}update(e){this.state={...this.state,...e},this.notify()}}const c=new le;var ce=Object.defineProperty,l=O((n,e)=>ce(n,"name",{value:e,configurable:!0}),"i$2");const I={critical:"Critical",minor:"Minor",moderate:"Moderate",serious:"Serious"},J={critical:"text-destructive",minor:"text-muted-foreground",moderate:"text-warning-foreground",serious:"text-warning-foreground"},de={critical:"bg-destructive/10 border-destructive/30",minor:"bg-foreground/4 border-border",moderate:"bg-warning/10 border-warning/30",serious:"bg-warning/10 border-warning/30"},ue={critical:"bg-destructive",minor:"bg-muted-foreground/50",moderate:"bg-warning",serious:"bg-warning"},ge=l(({count:n,isActive:e,onClick:a,severity:r})=>i("button",{class:d("flex flex-col items-center gap-1 px-3 py-2.5 border cursor-pointer transition-colors",e?"ring-1 ring-inset ring-primary/40":"hover:bg-foreground/6",de[r]),onClick:a,title:`${e?"Clear":"Filter by"} ${I[r]}`,type:"button",children:[t("span",{class:d("text-xl font-bold tabular-nums leading-none",J[r]),children:n}),t("span",{class:"text-[0.6rem] font-semibold uppercase tracking-wider text-muted-foreground",children:I[r]})]}),"SeverityBucket"),me=l(({isSelected:n,issue:e,onClick:a,onDisable:r})=>i("div",{class:d("p-3 border cursor-pointer transition-colors",n?"bg-foreground/6 border-primary/30":"border-border hover:bg-foreground/3"),onClick:a,children:[i("div",{class:"flex items-start gap-2 mb-1.5",children:[t("span",{class:d("mt-1 size-2 rounded-full shrink-0",ue[e.impact])}),t("span",{class:"text-[0.75rem] font-semibold text-foreground flex-1 leading-snug",children:e.id}),t("span",{class:d("text-[0.6rem] font-bold uppercase tracking-wide shrink-0",J[e.impact]),children:I[e.impact]})]}),t("p",{class:"text-[0.7rem] text-muted-foreground leading-relaxed mb-2 ml-4",children:e.message}),e.nodes.length>0&&i("div",{class:"mb-2 ml-4 space-y-0.5",children:[e.nodes.slice(0,3).map((o,m)=>t("code",{class:"block text-[0.65rem] text-foreground/70 font-mono bg-foreground/5 px-2 py-1 truncate",children:o.selector},m)),e.nodes.length>3&&i("span",{class:"text-[0.62rem] text-muted-foreground/60",children:["+",e.nodes.length-3," more element",e.nodes.length>4?"s":""]})]}),i("div",{class:"flex items-center gap-2 flex-wrap ml-4",children:[e.wcagTags.slice(0,3).map(o=>t("span",{class:"text-[0.58rem] font-mono uppercase bg-primary/8 text-primary/70 border border-primary/20 px-1.5 py-0.5",children:o},o)),t("span",{class:"flex-1"}),t("a",{class:"text-[0.62rem] text-primary/70 hover:text-primary transition-colors",href:e.helpUrl,onClick:l(o=>o.stopPropagation(),"onClick"),rel:"noopener noreferrer",target:"_blank",children:"Learn more ↗"}),t("button",{class:"text-[0.62rem] text-muted-foreground/60 hover:text-muted-foreground transition-colors cursor-pointer bg-transparent border-0 p-0",onClick:l(o=>{o.stopPropagation(),r(e.id)},"onClick"),title:"Disable this rule for current session",type:"button",children:"Disable"})]})]}),"IssueCard"),pe=l(n=>{const[e,a]=k(C(()=>c.getState()),"storeState"),[r,o]=k(C([]),"disabledRules"),[m,$]=k(C(void 0),"minSeverity"),[w,v]=k(C(void 0),"activeIssueId"),[p,f]=k(C(void 0),"filterSeverity");L(()=>c.subscribe(()=>a(c.getState())),[]),L(()=>c.clearHighlights.bind(c),[]);const{isScanning:b,issues:h,lastScan:u,scanError:M,showOverlays:T,standard:q}=e,U=u!==void 0||M!==void 0,P=l(()=>{f(void 0),v(void 0),c.scan(r).catch(()=>{})},"handleScan"),V=l(s=>{w===s.id?(v(void 0),c.clearHighlights(),T&&c.setShowOverlays(!0)):(v(s.id),c.highlightIssue(s))},"handleIssueClick"),F=l(s=>{o(g=>[...g,s])},"handleDisableRule"),R=h.filter(s=>!(r.includes(s.id)||p&&s.impact!==p||m&&E.indexOf(s.impact)>E.indexOf(m))),K=l(s=>h.filter(g=>!r.includes(g.id)&&g.impact===s).length,"countBy");return i("div",{class:"flex flex-col h-full",children:[i("div",{class:"shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-border bg-foreground/2 flex-wrap",children:[t(S,{class:d(b?"border-primary/30 text-primary/50 bg-primary/5":""),disabled:b,onClick:P,size:"sm",variant:"outline",children:b?"Scanning…":"Scan page"}),i("label",{class:"flex items-center gap-1.5 text-[0.7rem] text-muted-foreground",children:["Standard",i("select",{class:"bg-card border border-border text-foreground text-[0.7rem] px-1.5 py-1 cursor-pointer",onChange:l(s=>c.setStandard(s.target.value),"onChange"),style:"color-scheme: dark",value:q,children:[t("option",{value:"wcag21aa",children:"WCAG 2.1 AA"}),t("option",{value:"wcag22aa",children:"WCAG 2.2 AA"}),t("option",{value:"wcag2a",children:"WCAG 2.0 A"}),t("option",{value:"best-practice",children:"Best Practice"})]})]}),i("label",{class:"flex items-center gap-1.5 text-[0.7rem] text-muted-foreground",children:["Min",i("select",{class:"bg-card border border-border text-foreground text-[0.7rem] px-1.5 py-1 cursor-pointer",onChange:l(s=>{const{value:g}=s.target;$(g||void 0)},"onChange"),style:"color-scheme: dark",value:m??"",children:[t("option",{value:"",children:"All"}),t("option",{value:"critical",children:"Critical only"}),t("option",{value:"serious",children:"Serious+"}),t("option",{value:"moderate",children:"Moderate+"})]})]}),t(S,{class:d(T?"border-primary/30 text-primary bg-primary/8":""),onClick:l(()=>c.setShowOverlays(!T),"onClick"),size:"sm",title:"Toggle visual highlights on affected elements",variant:"outline",children:"Overlays"}),U&&h.length>0&&i(W,{children:[t(S,{class:"ml-auto",onClick:l(()=>{const s=new Blob([JSON.stringify(h,void 0,2)],{type:"application/json"}),g=URL.createObjectURL(s),A=document.createElement("a");A.href=g,A.download="a11y-audit.json",A.click(),URL.revokeObjectURL(g)},"onClick"),size:"sm",title:"Export audit results as JSON",variant:"outline",children:"JSON"}),t(S,{onClick:l(()=>{const s=l(y=>`"${y.replaceAll('"','""')}"`,"q"),g=["Rule ID","Severity","Message","Selector","HTML","WCAG Tags"].join(","),A=h.flatMap(y=>y.nodes.map(H=>[s(y.id),s(y.impact),s(y.message),s(H.selector),s(H.html),s(y.wcagTags.join("; "))].join(","))),Q=new Blob([[g,...A].join(`
+`)],{type:"text/csv"}),G=URL.createObjectURL(Q),D=document.createElement("a");D.href=G,D.download="a11y-audit.csv",D.click(),URL.revokeObjectURL(G)},"onClick"),size:"sm",title:"Export audit results as CSV",variant:"outline",children:"CSV"})]})]}),i("div",{class:"flex-1 overflow-y-auto devtools-content-scroll",children:[M&&t(Z,{class:"rounded-none border-x-0 border-t-0",variant:"destructive",children:i(ee,{children:["Scan failed: ",M]})}),!U&&!b&&i("div",{class:"flex flex-col items-center justify-center gap-4 p-8 min-h-48 text-center",children:[t("p",{class:"text-[0.8125rem] text-muted-foreground max-w-sm",children:"Run an accessibility audit using axe-core to detect WCAG violations on this page."}),t(S,{onClick:P,variant:"outline",children:"Start scan"})]}),b&&t("div",{class:"flex items-center justify-center gap-3 p-8 min-h-48",children:t("span",{class:"text-[0.8rem] text-muted-foreground",children:"Scanning for accessibility issues…"})}),U&&!b&&!M&&i("div",{class:"p-5 space-y-4",children:[t("div",{class:"grid grid-cols-4 gap-2",children:E.map(s=>t(ge,{count:K(s),isActive:p===s,onClick:l(()=>f(p===s?void 0:s),"onClick"),severity:s},s))}),R.length===0?i("div",{class:"p-6 text-center border border-border",children:[t("p",{class:"text-[0.8125rem] font-medium text-foreground/70",children:h.length===0?"No violations found!":"No issues match the current filters."}),h.length===0&&t("p",{class:"mt-1 text-[0.7rem] text-muted-foreground",children:"Great — the page passes all rules for the selected standard."})]}):i("section",{children:[i("div",{class:"flex items-center gap-2 mb-2",children:[i("span",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground",children:[t("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"})," ",R.length," issue",R.length===1?"":"s",p?` · ${I[p]} only`:""]}),p&&t(S,{class:"h-auto p-0 text-[0.62rem]",onClick:l(()=>f(void 0),"onClick"),variant:"link",children:"Clear ×"})]}),t("div",{class:"space-y-2",children:R.map(s=>t(me,{isSelected:w===s.id,issue:s,onClick:l(()=>V(s),"onClick"),onDisable:F},s.id))})]}),r.length>0&&i("div",{class:"flex items-center gap-2 text-[0.65rem] text-muted-foreground/60",children:[i("span",{children:[r.length," rule",r.length===1?"":"s"," disabled this session."]}),t(S,{class:"h-auto p-0 text-[0.62rem]",onClick:l(()=>o([]),"onClick"),variant:"link",children:"Reset"})]})]})]})]})},"A11yApp");var he=Object.defineProperty,j=O((n,e)=>he(n,"name",{value:e,configurable:!0}),"i$1");const fe={critical:"text-destructive",minor:"text-muted-foreground",moderate:"text-warning-foreground",serious:"text-warning-foreground"},be={critical:"Crit",minor:"Min",moderate:"Mod",serious:"Ser"},xe=j(n=>{const e=new Date(n).getTime();if(Number.isNaN(e))return"unknown";const a=Math.max(0,Math.floor((Date.now()-e)/1e3));if(a<10)return"just now";if(a<60)return`${a}s ago`;const r=Math.floor(a/60);return r<60?`${r} min ago`:`${Math.floor(r/60)} hr ago`},"formatElapsed"),ve=j(n=>{const[e,a]=k(C(()=>c.getState()),"state");L(()=>c.subscribe(()=>a(c.getState())),[]);const{isScanning:r,issues:o,lastScan:m,showOverlays:$}=e,w=o.length,v={critical:0,minor:0,moderate:0,serious:0};for(const u of o)v[u.impact]=(v[u.impact]??0)+1;const p=j(u=>v[u],"countBy");let f;r?f="Scanning…":m?f="Re-scan":f="Scan";const b=$?"border-primary/30 text-primary bg-primary/8":"border-border text-muted-foreground bg-transparent hover:text-foreground",h=o.length===0?"border-border/50 text-muted-foreground/40 bg-transparent cursor-not-allowed":d("cursor-pointer",b);return i("div",{class:"space-y-3 min-w-[200px]",children:[m?i(W,{children:[i("div",{class:"flex items-baseline gap-2",children:[t("span",{class:d("text-2xl font-bold tabular-nums leading-none",w>0?"text-destructive":"text-success-foreground"),children:w}),i("span",{class:"text-[0.65rem] text-muted-foreground",children:["violation",w===1?"":"s"]})]}),t("div",{class:"grid grid-cols-4 gap-1.5",children:E.map(u=>i("div",{class:"flex flex-col items-center gap-0.5",children:[t("span",{class:d("text-[0.85rem] font-bold tabular-nums leading-none",fe[u]),children:p(u)}),t("span",{class:"text-[0.55rem] uppercase tracking-wide text-muted-foreground/70",children:be[u]})]},u))}),i("p",{class:"text-[0.62rem] text-muted-foreground/50",children:["Scanned ",xe(m)]})]}):i("div",{children:[t("p",{class:"text-[0.72rem] text-muted-foreground",children:"No scan run yet."}),t("p",{class:"text-[0.65rem] text-muted-foreground/50 mt-0.5",children:"Scan this page to detect WCAG violations."})]}),i("div",{class:"flex items-center gap-2 pt-2 border-t border-border/50",children:[t("button",{class:d("flex-1 px-2.5 py-1.5 text-[0.7rem] font-medium border transition-colors cursor-pointer",r?"border-primary/30 text-primary/50 bg-primary/5 cursor-not-allowed":"border-border text-foreground bg-transparent hover:bg-foreground/5"),disabled:r,onClick:j(()=>{c.scan().catch(()=>{})},"onClick"),type:"button",children:f}),t("button",{class:d("px-2.5 py-1.5 text-[0.7rem] border transition-colors",h),disabled:o.length===0,onClick:j(()=>c.setShowOverlays(!$),"onClick"),title:"Toggle visual highlights on affected elements",type:"button",children:"Overlays"})]})]})},"A11yTooltip"),$e={component:pe,icon:Y,id:"dev-toolbar:a11y",name:"Accessibility",tooltip:ve};export{$e as default};

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

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

package/dist/apps/inspector/index.js

@@ -0,0 +1 @@
+var I=Object.defineProperty;var w=(t,e)=>I(t,"name",{value:e,configurable:!0});import A from"lucide-static/icons/inspect.svg?raw";var q=Object.defineProperty,s=w((t,e)=>q(t,"name",{value:e,configurable:!0}),"s");const E={bg:"#18181b",btnBg:"rgba(196,181,253,0.08)",btnBgHover:"rgba(196,181,253,0.16)",btnBorder:"rgba(196,181,253,0.25)",btnBorderHover:"rgba(196,181,253,0.5)",fg:"#fafafa",muted:"#a1a1aa",overlayBg:"rgba(196,181,253,0.06)",overlayBorder:"rgba(196,181,253,0.7)",primary:"#c4b5fd",shadow:"0 8px 32px rgba(0,0,0,.75)"},k={bg:"#ffffff",btnBg:"rgba(124,58,237,0.08)",btnBgHover:"rgba(124,58,237,0.16)",btnBorder:"rgba(124,58,237,0.25)",btnBorderHover:"rgba(124,58,237,0.5)",fg:"#18181b",muted:"#52525b",overlayBg:"rgba(124,58,237,0.06)",overlayBorder:"rgba(124,58,237,0.7)",primary:"#7c3aed",shadow:"0 8px 32px rgba(0,0,0,.15)"},y=s(()=>{try{const t=localStorage.getItem("__v_dt__theme");if(t==="light")return k;if(t==="dark")return E}catch{}return globalThis.window?.matchMedia("(prefers-color-scheme: dark)").matches?E:k},"getThemePalette"),v="__vdt_inspector_overlay",T="__vdt_inspector_label",h="__vdt_inspector_cursor",$="__vdt_inspector_badge",B="__vdt_inspector_kf",S="__vdt_inspector_result",j=s(()=>{let t=document.querySelector(`#${v}`);if(!t){const e=y();t=document.createElement("div"),t.id=v,t.style.cssText=["position:fixed","pointer-events:none","z-index:2147483644","box-sizing:border-box",`border:1px solid ${e.overlayBorder}`,`background:${e.overlayBg}`,"transition:top 60ms,left 60ms,width 60ms,height 60ms","display:none"].join(";");const o=document.createElement("div");o.id=T,o.style.cssText=["position:absolute","bottom:calc(100% + 2px)","left:0",`background:${e.bg}`,`color:${e.primary}`,"font:11px/1.2 'JetBrains Mono',monospace","padding:2px 6px","white-space:nowrap","pointer-events:none",`border:1px solid ${e.btnBorder}`].join(";"),t.append(o),document.body.append(t)}return t},"getOrCreateOverlay"),M=s(t=>{let e=t;for(;e;){const o=e.dataset.vdtSource;if(o)return o;e=e.parentElement??void 0}},"findSource"),D=s(t=>{const e=t.split(":");if(e.length<3)return t;const o=e[e.length-2],n=e.slice(0,-2).join(":");return`${n.split("/").pop()??n}:${o}`},"formatSourceShort"),H=s(t=>{const e=document.querySelector(`#${v}`);if(!e)return;const o=t.getBoundingClientRect();e.style.display="block",e.style.top=`${o.top}px`,e.style.left=`${o.left}px`,e.style.width=`${o.width}px`,e.style.height=`${o.height}px`;const n=document.querySelector(`#${T}`);if(n){const r=t.tagName.toLowerCase(),c=t.id?`#${t.id}`:"",d=t.classList.length>0?`.${[...t.classList].slice(0,3).join(".")}`:"",l=`${r}${c}${d}`,g=M(t);n.textContent=g?`${l}  ·  ${D(g)}`:l,o.top<28?(n.style.bottom="auto",n.style.top="calc(100% + 2px)"):(n.style.top="",n.style.bottom="calc(100% + 2px)")}},"updateOverlayPosition"),L=s(()=>{const t=document.querySelector(`#${v}`);t&&(t.style.display="none")},"hideOverlay"),P=s(()=>{document.querySelector(`#${v}`)?.remove(),document.querySelector(`#${h}`)?.remove()},"removeOverlay"),C=s(t=>{let e=document.querySelector(`#${h}`);t?(e||(e=document.createElement("style"),e.id=h,document.head.append(e)),e.textContent="*, *::before, *::after { cursor: crosshair !important; }"):e&&e.remove()},"setCrosshairCursor"),O=s(()=>{document.querySelector(`#${$}`)?.remove()},"removeFloatingBadge"),R=s(t=>{if(!document.querySelector(`#${B}`)){const l=document.createElement("style");l.id=B,l.textContent="@keyframes __vdt_pulse{0%,100%{opacity:1}50%{opacity:.3}}",document.head.append(l)}O();const e=y(),o=document.createElement("div");o.id=$,o.style.cssText=["position:fixed","bottom:4rem","left:50%","transform:translateX(-50%)","z-index:2147483645","display:flex","align-items:center","gap:8px","padding:6px 14px 6px 10px",`background:${e.bg}`,`border:1px solid ${e.btnBorder}`,`box-shadow:${e.shadow}`,"font:12px/1 'JetBrains Mono',monospace",`color:${e.fg}`,"pointer-events:auto","user-select:none","white-space:nowrap"].join(";");const n=document.createElement("span");n.style.cssText=`display:inline-block;width:7px;height:7px;border-radius:50%;background:${e.primary};animation:__vdt_pulse 1.4s ease-in-out infinite;flex-shrink:0;`;const r=document.createElement("span");r.textContent="Click any element to inspect";const c=document.createElement("span");c.style.cssText=`color:${e.muted};margin:0 4px;`,c.textContent="·";const d=document.createElement("button");d.textContent="Cancel",d.style.cssText=`background:transparent;border:none;color:${e.primary};cursor:pointer;padding:0;font:12px/1 'JetBrains Mono',monospace;text-decoration:underline;text-underline-offset:3px;`,d.addEventListener("click",l=>{l.stopPropagation(),t()}),o.append(n,r,c,d),document.body.append(o)},"createFloatingBadge"),J=s(t=>{const e=t.split(":"),o=Number.parseInt(e.at(-1)??"0",10)||void 0,n=Number.parseInt(e.at(-2)??"0",10)||void 0,r=e.slice(0,-2).join(":");globalThis.__VISULIMA_DEVTOOLS__?.rpc?.openInEditor?.(r,n,o).catch(()=>{})},"openInEditor"),b=s(()=>{document.querySelector(`#${S}`)?.remove()},"removeResultPopup"),f=s((t,e)=>{const o=y(),n=document.createElement("button");return n.textContent=t,n.style.cssText=[`background:${o.btnBg}`,`border:1px solid ${o.btnBorder}`,`color:${o.primary}`,"cursor:pointer","font:11px/1 'JetBrains Mono',monospace","padding:5px 10px","white-space:nowrap"].join(";"),n.addEventListener("pointerover",()=>{n.style.background=o.btnBgHover,n.style.borderColor=o.btnBorderHover}),n.addEventListener("pointerout",()=>{n.style.background=o.btnBg,n.style.borderColor=o.btnBorder}),n.addEventListener("click",r=>{r.stopPropagation(),e()}),n},"makeActionButton"),N=s((t,e,o)=>{b();const n=y(),r=document.createElement("div");r.id=S,r.style.cssText=["position:fixed","z-index:2147483646",`background:${n.bg}`,`border:1px solid ${n.btnBorder}`,"padding:10px 32px 10px 12px","font:12px/1.4 'JetBrains Mono',monospace",`color:${n.fg}`,`box-shadow:${n.shadow}`,"min-width:200px","max-width:400px","pointer-events:auto"].join(";");let c=e.bottom+8;c+110>window.innerHeight&&(c=e.top-110-8);let{left:d}=e;d+280>window.innerWidth&&(d=Math.max(8,window.innerWidth-288)),r.style.top=`${c}px`,r.style.left=`${d}px`;const l=t.tagName.toLowerCase(),g=t.id?`#${t.id}`:"",i=t.classList.length>0?`.${[...t.classList].slice(0,3).join(".")}`:"",a=document.createElement("div");if(a.style.cssText=`color:${n.primary};font-weight:bold;margin-bottom:4px;word-break:break-all;`,a.textContent=`${l}${g}${i}`,r.append(a),o){const m=document.createElement("div");m.style.cssText=`color:${n.muted};margin-bottom:10px;word-break:break-all;font-size:10px;`,m.textContent=o,r.append(m)}const u=document.createElement("div");u.style.cssText="display:flex;gap:6px;flex-wrap:wrap;",o&&u.append(f("Open in editor",()=>{J(o),b()})),u.append(f("Copy HTML",()=>{navigator.clipboard.writeText(t.outerHTML).catch(()=>{}),b()})),o&&u.append(f("Copy path",()=>{navigator.clipboard.writeText(o).catch(()=>{}),b()})),r.append(u);const p=document.createElement("button");p.textContent="×",p.style.cssText=["position:absolute","top:6px","right:8px","background:transparent","border:none",`color:${n.muted}`,"cursor:pointer","font:16px/1 'JetBrains Mono',monospace","padding:0","line-height:1","transition:color 0.15s"].join(";"),p.addEventListener("pointerover",()=>{p.style.color=n.fg}),p.addEventListener("pointerout",()=>{p.style.color=n.muted}),p.addEventListener("click",m=>{m.stopPropagation(),b()}),r.append(p),document.body.append(r);const _=s(m=>{r.contains(m.target)||(b(),document.removeEventListener("click",_,!0))},"handleOutside");setTimeout(()=>{document.addEventListener("click",_,!0)},100)},"showResultPopup");let x;const V=s((t,e)=>{x?.(),j(),C(!0);const o=s(()=>document.querySelector(`#${$}`)??void 0,"badgeElement"),n=s(i=>{if(!i)return!1;const a=o();return!!(a&&(i===a||a.contains(i)))},"isOverBadge"),r={cleanup(){document.removeEventListener("mousemove",r.handleMouseMove),document.removeEventListener("click",r.handleClick,!0),document.removeEventListener("keydown",r.handleKeyDown),L(),P(),C(!1),O(),x=void 0},handleClick(i){const a=i.target;if(!a||a.tagName==="DEV-TOOLBAR"||n(a))return;i.preventDefault(),i.stopPropagation();const u=a.getBoundingClientRect(),p=M(a);r.cleanup(),t(),N(a,u,p)},handleKeyDown(i){i.key==="Escape"&&(r.cleanup(),e())},handleMouseMove(i){const a=i.target;if(!a||a.tagName==="DEV-TOOLBAR"||n(a)){L();return}H(a)}},{cleanup:c,handleClick:d,handleKeyDown:l,handleMouseMove:g}=r;R(()=>{c(),e()}),document.addEventListener("mousemove",g),document.addEventListener("click",d,!0),document.addEventListener("keydown",l),x=c},"startGlobalInspection"),z=s(()=>{x?.(),b()},"stopGlobalInspection"),F={icon:A,id:"dev-toolbar:inspector",name:"Inspector",onClick(){const t=globalThis.__VISULIMA_DEVTOOLS__;V(()=>{t?.setAppActive&&t.setAppActive("dev-toolbar:inspector",!1)},()=>{t?.setAppActive&&t.setAppActive("dev-toolbar:inspector",!1)})},onDeactivate(){z()}};export{F as default};

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

@@ -0,0 +1,12 @@
+/**
+ * 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/index.js

@@ -1,20 +1 @@
-var U=Object.defineProperty;var k=(o,d)=>U(o,"name",{value:d,configurable:!0});import{addHookName as s}from"preact/devtools";import{useState as i,useRef as A,useEffect as E}from"preact/hooks";import{m as h}from"../../packem_shared/cn-BEsR6GkP.js";import{jsx as r,jsxs as t}from"preact/jsx-runtime";const S=`<!-- @license lucide-static v0.575.0 - ISC -->
-<svg
-  class="lucide lucide-network"
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect x="16" y="16" width="6" height="6" rx="1" />
-  <rect x="2" y="16" width="6" height="6" rx="1" />
-  <rect x="9" y="2" width="6" height="6" rx="1" />
-  <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" />
-  <path d="M12 12V8" />
-</svg>
-`;var $=Object.defineProperty,l=k((o,d)=>$(o,"name",{value:d,configurable:!0}),"n");const z={css:"bg-purple-500/15 text-purple-400 border-purple-500/30",json:"bg-yellow-500/15 text-yellow-400 border-yellow-500/30",ts:"bg-blue-500/15 text-blue-400 border-blue-500/30",tsx:"bg-blue-500/15 text-blue-400 border-blue-500/30",js:"bg-green-500/15 text-green-400 border-green-500/30",jsx:"bg-green-500/15 text-green-400 border-green-500/30",vue:"bg-emerald-500/15 text-emerald-400 border-emerald-500/30",svg:"bg-orange-500/15 text-orange-400 border-orange-500/30"},B=l(o=>o.match(/\.([a-z]+)(?:\?|$)/i)?.[1]?.toLowerCase()??"?","getExt"),C=l(({ext:o})=>r("span",{class:h("inline-flex px-1.5 py-0.5 text-[0.6rem] font-mono font-bold uppercase border",z[o]??"bg-foreground/6 text-muted-foreground border-border"),children:o}),"ExtBadge"),F=l(({helpers:o})=>{const[d,j]=s(i([]),"modules"),[I,x]=s(i(!0),"loading"),[v,y]=s(i(null),"error"),[m,M]=s(i(""),"search"),[a,u]=s(i(null),"selectedId"),[w,f]=s(i([]),"importersList"),L=s(A(null),"searchRef"),g=l(()=>{x(!0),y(null),u(null),o.rpc.getModuleGraph().then(e=>{const c=e.map(n=>({id:n.id??n.url??"",url:n.url??n.id??"",ext:B(n.url??n.id??""),importers:n.importerCount??0,importerUrls:Array.isArray(n.importerUrls)?n.importerUrls:[]}));j(c),x(!1)}).catch(e=>{y(e.message??"Failed to load module graph"),x(!1)})},"load");E(()=>{g()},[]);const b=d.filter(e=>{const c=m.toLowerCase();return!c||e.url.toLowerCase().includes(c)||e.ext.includes(c)}),p=a?d.find(e=>e.id===a):null,R=l(e=>{if(a===e.id){u(null),f([]);return}u(e.id),f(e.importerUrls)},"showImporters");return I?t("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 select-none",children:[r("div",{class:"flex gap-1.5 items-center","aria-hidden":"true",children:[0,160,320].map(e=>r("span",{class:"size-1.5 bg-primary/50 rounded-full animate-pulse",style:{animationDelay:`${e}ms`}},e))}),r("span",{class:"text-[0.75rem] text-muted-foreground",children:"Scanning module graph…"})]}):v?t("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 text-center",children:[r("p",{class:"text-[0.8rem] text-destructive",children:v}),r("button",{class:"px-3 py-1.5 text-[0.75rem] border border-border text-muted-foreground hover:text-foreground cursor-pointer bg-transparent",onClick:g,type:"button",children:"Retry"})]}):t("div",{class:"flex flex-col h-full",children:[t("div",{class:"flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0",children:[r("input",{ref:L,class:h("flex-1 bg-foreground/4 border border-border px-3 py-1.5","text-[0.8rem] font-mono text-foreground placeholder:text-muted-foreground/50","focus:outline-none focus:border-primary/50 transition-colors"),onInput:l(e=>M(e.target.value),"onInput"),placeholder:"Filter modules…",type:"text",value:m}),t("span",{class:"text-[0.7rem] text-muted-foreground shrink-0",children:[b.length," / ",d.length]}),r("button",{class:"px-2.5 py-1.5 text-[0.725rem] border border-border text-muted-foreground hover:text-foreground cursor-pointer bg-transparent transition-colors",onClick:g,type:"button",children:"Refresh"})]}),t("div",{class:"flex flex-1 min-h-0 overflow-hidden",children:[r("div",{class:"flex-1 overflow-auto divide-y divide-border/30",children:b.length===0?t("div",{class:"flex items-center justify-center p-8 text-[0.8rem] text-muted-foreground",children:['No modules match "',m,'"']}):b.map(e=>t("button",{class:h("w-full flex items-center gap-3 px-4 py-2.5 text-left border-0 bg-transparent cursor-pointer","hover:bg-foreground/4 transition-colors duration-100",a===e.id&&"bg-primary/6"),onClick:l(()=>R(e),"onClick"),type:"button",children:[r(C,{ext:e.ext}),r("span",{class:"flex-1 text-[0.775rem] font-mono text-foreground/80 truncate min-w-0",children:e.url}),e.importers>0&&t("span",{class:"shrink-0 text-[0.65rem] text-muted-foreground px-1.5 py-0.5 bg-foreground/6 border border-border/50",children:[e.importers,"↑"]})]},e.id))}),p&&t("div",{class:"border-l border-border bg-background w-72 shrink-0 flex flex-col overflow-hidden",children:[t("div",{class:"flex items-center justify-between gap-2 px-4 py-3 border-b border-border shrink-0",children:[r("span",{class:"text-[0.7rem] font-semibold text-foreground uppercase tracking-wide",children:"Module Info"}),r("button",{"aria-label":"Close",class:"text-muted-foreground hover:text-foreground cursor-pointer border-0 bg-transparent text-xs",onClick:l(()=>{u(null),f([])},"onClick"),type:"button",children:"✕"})]}),t("div",{class:"flex-1 overflow-auto p-4 space-y-3",children:[t("div",{children:[r("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"URL"}),r("code",{class:"text-[0.7rem] font-mono text-foreground/80 break-all",children:p.url})]}),t("div",{children:[r("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Type"}),r(C,{ext:p.ext})]}),t("div",{children:[r("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Importers"}),r("span",{class:"text-[0.8rem] font-mono text-foreground",children:p.importers})]}),w.length>0&&t("div",{children:[r("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Imported by"}),r("div",{class:"space-y-1",children:w.map(e=>r("code",{class:"block text-[0.65rem] font-mono text-muted-foreground break-all",children:e},e))})]})]})]})]})]})},"ModuleGraphApp"),O={component:F,icon:S,id:"dev-toolbar:module-graph",name:"Modules"};export{O as default};
+var U=Object.defineProperty;var w=(o,i)=>U(o,"name",{value:i,configurable:!0});import $ from"lucide-static/icons/network.svg?raw";import{addHookName as n}from"preact/devtools";import{useState as s,useRef as E,useEffect as A}from"preact/hooks";import C from"../../packem_shared/cn-DWLJYh3h.js";import{jsx as r,jsxs as t}from"preact/jsx-runtime";import h from"../../packem_shared/Button-DODNCTPZ.js";import G from"../../packem_shared/Input-GfbOwAkK.js";var S=Object.defineProperty,d=w((o,i)=>S(o,"name",{value:i,configurable:!0}),"o");const F={css:"bg-purple-500/15 text-purple-400 border-purple-500/30",js:"bg-green-500/15 text-green-400 border-green-500/30",json:"bg-yellow-500/15 text-yellow-400 border-yellow-500/30",jsx:"bg-green-500/15 text-green-400 border-green-500/30",svg:"bg-orange-500/15 text-orange-400 border-orange-500/30",ts:"bg-blue-500/15 text-blue-400 border-blue-500/30",tsx:"bg-blue-500/15 text-blue-400 border-blue-500/30",vue:"bg-emerald-500/15 text-emerald-400 border-emerald-500/30"},H=/\.([a-z]+)(?:\?|$)/i,N=d(o=>o.match(H)?.[1]?.toLowerCase()??"?","getExtension"),j=d(({ext:o})=>r("span",{class:C("inline-flex px-1.5 py-0.5 text-[0.6rem] font-mono font-bold uppercase border",F[o]??"bg-foreground/6 text-muted-foreground border-border"),children:o}),"ExtensionBadge"),T=d(({helpers:o})=>{const[i,I]=n(s([]),"modules"),[L,p]=n(s(!0),"loading"),[v,y]=n(s(void 0),"error"),[f,R]=n(s(""),"search"),[c,u]=n(s(void 0),"selectedId"),[k,x]=n(s([]),"importersList"),z=n(E(null),"searchRef"),g=d(()=>{p(!0),y(void 0),u(void 0),o.rpc.getModuleGraph().then(e=>{const a=e.map(l=>({ext:N(l.url??l.id??""),id:l.id??l.url??"",importers:l.importerCount??0,importerUrls:Array.isArray(l.importerUrls)?l.importerUrls:[],url:l.url??l.id??""}));I(a),p(!1)}).catch(e=>{y(e.message??"Failed to load module graph"),p(!1)})},"load");A(()=>{g()},[]);const b=i.filter(e=>{const a=f.toLowerCase();return!a||e.url.toLowerCase().includes(a)||e.ext.includes(a)}),m=c?i.find(e=>e.id===c):void 0,M=d(e=>{if(c===e.id){u(void 0),x([]);return}u(e.id),x(e.importerUrls)},"showImporters");return L?t("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 select-none",children:[r("div",{"aria-hidden":"true",class:"flex gap-1.5 items-center",children:[0,160,320].map(e=>r("span",{class:"size-1.5 bg-primary/50 rounded-full animate-pulse",style:{animationDelay:`${e}ms`}},e))}),r("span",{class:"text-[0.75rem] text-muted-foreground",children:"Scanning module graph…"})]}):v?t("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 text-center",children:[r("p",{class:"text-[0.8rem] text-destructive",children:v}),r(h,{onClick:g,size:"sm",variant:"outline",children:"Retry"})]}):t("div",{class:"flex flex-col h-full",children:[t("div",{class:"flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0",children:[r(G,{class:"flex-1 bg-foreground/4 font-mono text-[0.8rem] placeholder:text-muted-foreground/50 focus-visible:border-primary/50 border-border",onInput:d(e=>R(e.target.value),"onInput"),placeholder:"Filter modules…",ref:z,type:"text",value:f}),t("span",{class:"text-[0.7rem] text-muted-foreground shrink-0",children:[b.length," / ",i.length]}),r(h,{onClick:g,size:"sm",variant:"outline",children:"Refresh"})]}),t("div",{class:"flex flex-1 min-h-0 overflow-hidden",children:[r("div",{class:"flex-1 overflow-auto divide-y divide-border/30",children:b.length===0?t("div",{class:"flex items-center justify-center p-8 text-[0.8rem] text-muted-foreground",children:['No modules match "',f,'"']}):b.map(e=>t("button",{class:C("w-full flex items-center gap-3 px-4 py-2.5 text-left border-0 bg-transparent cursor-pointer","hover:bg-foreground/4 transition-colors duration-100",c===e.id&&"bg-primary/6"),onClick:d(()=>M(e),"onClick"),type:"button",children:[r(j,{ext:e.ext}),r("span",{class:"flex-1 text-[0.775rem] font-mono text-foreground/80 truncate min-w-0",children:e.url}),e.importers>0&&t("span",{class:"shrink-0 text-[0.65rem] text-muted-foreground px-1.5 py-0.5 bg-foreground/6 border border-border/50",children:[e.importers,"↑"]})]},e.id))}),m&&t("div",{class:"border-l border-border bg-background w-72 shrink-0 flex flex-col overflow-hidden",children:[t("div",{class:"flex items-center justify-between gap-2 px-4 py-3 border-b border-border shrink-0",children:[r("span",{class:"text-[0.7rem] font-semibold text-foreground uppercase tracking-wide",children:"Module Info"}),r(h,{"aria-label":"Close",class:"h-6 w-6 text-xs",onClick:d(()=>{u(void 0),x([])},"onClick"),size:"icon",variant:"ghost",children:"✕"})]}),t("div",{class:"flex-1 overflow-auto p-4 space-y-3",children:[t("div",{children:[r("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"URL"}),r("code",{class:"text-[0.7rem] font-mono text-foreground/80 break-all",children:m.url})]}),t("div",{children:[r("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Type"}),r(j,{ext:m.ext})]}),t("div",{children:[r("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Importers"}),r("span",{class:"text-[0.8rem] font-mono text-foreground",children:m.importers})]}),k.length>0&&t("div",{children:[r("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Imported by"}),r("div",{class:"space-y-1",children:k.map(e=>r("code",{class:"block text-[0.65rem] font-mono text-muted-foreground break-all",children:e},e))})]})]})]})]})]})},"ModuleGraphApp"),V={component:T,icon:$,id:"dev-toolbar:module-graph",name:"Modules"};export{V as default};

package/dist/apps/more/index.js

@@ -1,19 +1,2 @@
-var p=Object.defineProperty;var s=(n,t)=>p(n,"name",{value:t,configurable:!0});import{addHookName as m}from"preact/devtools";import{useState as u,useEffect as f}from"preact/hooks";import{m as g}from"../../packem_shared/cn-BEsR6GkP.js";import{jsxs as o,jsx as r}from"preact/jsx-runtime";const h=`<!-- @license lucide-static v0.575.0 - ISC -->
-<svg
-  class="lucide lucide-more-horizontal"
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <circle cx="12" cy="12" r="1" />
-  <circle cx="19" cy="12" r="1" />
-  <circle cx="5" cy="12" r="1" />
-</svg>
-`;var x=Object.defineProperty,i=s((n,t)=>x(n,"name",{value:t,configurable:!0}),"s");const b=i(n=>{const[t,c]=m(u([]),"apps");f(()=>{const e=globalThis.__VISULIMA_DEVTOOLS__;if(!e)return;const a=(e.getApps()??[]).filter(d=>!["dev-toolbar:a11y","dev-toolbar:settings","dev-toolbar:timeline","dev-toolbar:more","dev-toolbar:vite-config","dev-toolbar:module-graph","dev-toolbar:seo","dev-toolbar:performance"].includes(d.id));c(a)},[]);const l=i(e=>{globalThis.__VISULIMA_DEVTOOLS__?.openApp(e).catch(console.error)},"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:i(()=>l(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"),A={component:b,icon:h,id:"dev-toolbar:more",name:"More"};export{A as default};
+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};