@visulima/dev-toolbar 0.0.1 → 1.0.0-alpha.1

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+## @visulima/dev-toolbar 1.0.0-alpha.1 (2026-02-28)
+
+### Features
+
+* **dev-toolbar:** initialize dev-toolbar package  ([#586](https://github.com/visulima/visulima/issues/586)) ([a3ab9d6](https://github.com/visulima/visulima/commit/a3ab9d6e6c768853854b95fa8eee908b95235ea5))

package/LICENSE.md

@@ -0,0 +1,77 @@
+MIT License
+
+Copyright (c) 2025 visulima
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+<!-- DEPENDENCIES -->
+
+# Licenses of bundled dependencies
+The published @visulima/dev-toolbar artifact additionally contains code with the following licenses:
+ISC
+
+# Bundled dependencies:
+## lucide-static
+License: ISC
+Repository: https://github.com/lucide-icons/lucide.git
+
+> ISC License
+>
+> Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2026 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2026.
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+> OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+>
+> ---
+>
+> The MIT License (MIT) (for portions derived from Feather)
+>
+> Copyright (c) 2013-2026 Cole Bemis
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+<!-- /DEPENDENCIES -->
+
+<!-- TYPE_DEPENDENCIES -->
+<!-- /TYPE_DEPENDENCIES -->

package/README.md

@@ -1,45 +1,293 @@
-# @visulima/dev-toolbar
+<!-- START_PACKAGE_OG_IMAGE_PLACEHOLDER --><!-- END_PACKAGE_OG_IMAGE_PLACEHOLDER -->
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+<br />
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+<div align="center">
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+[![typescript-image][typescript-badge]][typescript-url]
+[![mit licence][license-badge]][license]
+[![npm downloads][npm-downloads-badge]][npm-downloads]
+[![Chat][chat-badge]][chat]
+[![PRs Welcome][prs-welcome-badge]][prs-welcome]
 
-## Purpose
+</div>
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@visulima/dev-toolbar`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+---
+
+<div align="center">
+    <p>
+        <sup>
+            Daniel Bannert's open source work is supported by the community on <a href="https://github.com/sponsors/prisis">GitHub Sponsors</a>
+        </sup>
+    </p>
+</div>
 
-## What is OIDC Trusted Publishing?
+---
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+## Overview
 
-## Setup Instructions
+`@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.
 
-To properly configure OIDC trusted publishing for this package:
+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.
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+## Install
 
-## DO NOT USE THIS PACKAGE
+```sh
+npm install -D @visulima/dev-toolbar
+```
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+```sh
+pnpm add -D @visulima/dev-toolbar
+```
 
-## More Information
+```sh
+yarn add -D @visulima/dev-toolbar
+```
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+## Quick Start
 
----
+Add the plugin to your `vite.config.ts`:
+
+```ts
+import { defineConfig } from "vite";
+import { devToolbar } from "@visulima/dev-toolbar/vite";
+
+export default defineConfig({
+    plugins: [
+        devToolbar(),
+    ],
+});
+```
+
+Start your dev server and press **`Alt`+`Shift`+`D`** to open the toolbar.
+
+## Built-in Apps
+
+| 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 |
+
+All apps are enabled by default. Disable individual apps via plugin options:
+
+```ts
+devToolbar({
+    apps: {
+        performance: false,
+        seo: false,
+    },
+})
+```
+
+## Plugin Options
+
+```ts
+devToolbar({
+    // Built-in apps (all true by default)
+    apps: {
+        a11y: true,
+        moduleGraph: true,
+        performance: true,
+        seo: true,
+        settings: true,
+        timeline: true,
+        viteConfig: true,
+    },
+
+    // Register custom apps
+    customApps: [],
+
+    // Toolbar pill placement
+    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
+    closeOnOutsideClick: true,
+
+    // Keyboard shortcuts (project-level defaults)
+    keybindings: {
+        toggle: "Alt+Shift+D",
+        close: "Escape",
+    },
+})
+```
+
+See the [full configuration reference](./docs/configuration.mdx) for all options.
+
+## Keyboard Shortcuts
+
+| Action | Default |
+|---|---|
+| Toggle toolbar open/close | `Alt`+`Shift`+`D` |
+| Close active app / panel | `Escape` |
+
+Both shortcuts are configurable in the Settings app or via plugin options.
+
+## Custom Apps
+
+Build your own devtools panel with a Preact component:
+
+```tsx
+/** @jsxImportSource preact */
+import type { ComponentChildren } from "preact";
+import type { AppComponentProps } from "@visulima/dev-toolbar";
+
+const MyApp = ({ helpers }: AppComponentProps): ComponentChildren => {
+    return <div class="p-5">Hello from My App!</div>;
+};
+```
+
+```ts
+// vite.config.ts
+devToolbar({
+    customApps: [
+        {
+            id: "my-package:my-app",
+            name: "My App",
+            icon: myIconSvg,        // raw SVG string
+            component: MyApp,
+            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.
+
+## RPC — Server ↔ Client Communication
+
+Call Node.js functions from your app component over the Vite HMR WebSocket:
+
+```ts
+// Add server functions in vite.config.ts
+devToolbar({
+    serverFunctions: {
+        async getRoutes() {
+            const files = await fs.readdir("src/pages");
+            return files.map((f) => `/${f.replace(/\.(tsx?|jsx?)$/, "")}`);
+        },
+    },
+})
+
+// Call from your app component
+const routes = await helpers.rpc.getRoutes();
+```
+
+Built-in RPC functions: `getViteConfig()`, `getModuleGraph()`, `openInEditor(file, line, col)`.
+
+## Global API
+
+Programmatic control from any script or the browser console:
+
+```ts
+const api = (window as any).__VISULIMA_DEVTOOLS__;
+
+// Open an app
+await api.openApp("dev-toolbar:a11y");
+
+// Show a notification badge on an app button
+api.notify("my-package:monitor", "warning");
+
+// Update toolbar settings
+api.updateSettings({ viewMode: "fullscreen" });
+
+// Access RPC from outside a component
+const config = await api.rpc.getViteConfig();
+```
+
+## Library Integration
+
+Add zero-dependency devtools support to your library. Users get devtools automatically when they install the toolbar — no extra configuration needed:
+
+```ts
+function installDevTools(instance: MyLibrary): void {
+    const hook = (window as any).__DEV_TOOLBAR_HOOK__;
+    if (!hook) return;
+
+    hook.registerApp({
+        id: "my-library:devtools",
+        name: "My Library",
+        icon: iconSvg,
+        component: MyLibraryPanel,
+    });
+
+    instance.on("action", (action) => {
+        hook.addTimelineEvent("my-library", {
+            id: crypto.randomUUID(),
+            title: action.type,
+            time: Date.now(),
+            level: "info",
+            data: action,
+        });
+    });
+}
+```
+
+See the [library integration guide](./docs/integrations/library-integration.mdx) for the full pattern.
+
+## Documentation
+
+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 |
+
+## Supported Node.js Versions
+
+Libraries in this ecosystem make the best effort to track
+[Node.js' release schedule](https://github.com/nodejs/release#release-schedule).
+Here's [a post on why we think this is important](https://medium.com/the-node-js-collection/maintainers-should-consider-following-node-js-release-schedule-ab08ed4de71a).
+
+## Contributing
+
+If you would like to help take a look at the [list of issues](https://github.com/visulima/visulima/issues) and check our [Contributing](https://github.com/visulima/visulima/blob/main/.github/CONTRIBUTING.md) guidelines.
+
+> **Note:** please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
+
+## Credits
+
+- [Daniel Bannert](https://github.com/prisis)
+- [All Contributors](https://github.com/visulima/visulima/graphs/contributors)
+
+## Made with ❤️ at Anolilab
+
+This is an open-source project and will always remain free to use. If you think it's cool, please star it 🌟. [Anolilab](https://www.anolilab.com/open-source) is a Development and AI Studio. Contact us at [hello@anolilab.com](mailto:hello@anolilab.com) if you need any help with these technologies or just want to say hi!
+
+## License
+
+The visulima dev-toolbar is open-sourced software licensed under the [MIT][license]
+
+<!-- badges -->
 
-**Maintained for OIDC setup purposes only**
+[license-badge]: https://img.shields.io/npm/l/@visulima/dev-toolbar?style=for-the-badge
+[license]: https://github.com/visulima/visulima/blob/main/LICENSE
+[npm-downloads-badge]: https://img.shields.io/npm/dm/@visulima/dev-toolbar?style=for-the-badge
+[npm-downloads]: https://www.npmjs.com/package/@visulima/dev-toolbar
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
+[prs-welcome]: https://github.com/visulima/visulima/blob/main/.github/CONTRIBUTING.md
+[chat-badge]: https://img.shields.io/discord/932323359193186354.svg?style=for-the-badge
+[chat]: https://discord.gg/TtFJY8xkFK
+[typescript-badge]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
+[typescript-url]: https://www.typescriptlang.org/

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

@@ -0,0 +1,5 @@
+/** @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

@@ -0,0 +1,46 @@
+export type Severity = "critical" | "minor" | "moderate" | "serious";
+export type Standard = "best-practice" | "wcag21aa" | "wcag22aa" | "wcag2a";
+export interface A11yNode {
+    html: string;
+    selector: string;
+}
+export interface A11yIssue {
+    helpUrl: string;
+    id: string;
+    impact: Severity;
+    message: string;
+    nodes: A11yNode[];
+    wcagTags: string[];
+}
+export interface A11yStoreState {
+    isScanning: boolean;
+    issues: A11yIssue[];
+    lastScan: null | string;
+    scanError: null | string;
+    showOverlays: boolean;
+    standard: Standard;
+}
+export 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;
+    private notify;
+    private persist;
+    private update;
+}
+export declare const a11yStore: A11yStore;
+export {};

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

@@ -0,0 +1,11 @@
+/** @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/a11y/index.d.ts

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

package/dist/apps/a11y/index.js

@@ -0,0 +1,21 @@
+var K=Object.defineProperty;var C=(s,e)=>K(s,"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((s,e)=>X(s,"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 s=sessionStorage.getItem(H);if(s){const e=JSON.parse(s);if(Array.isArray(e.issues))return{issues:e.issues,lastScan:e.lastScan??null}}}catch{}return{issues:[],lastScan:null}},"loadFromSession"),_=b((s,e)=>{const o=s;o.dataset.vdtA11y=e,o.style.setProperty("outline",`2px solid ${Z[e]}`,"important"),o.style.setProperty("outline-offset","2px","important")},"setHighlight"),E=b(()=>{for(const s of document.querySelectorAll("[data-vdt-a11y]")){const e=s;delete e.dataset.vdtA11y,e.style.removeProperty("outline"),e.style.removeProperty("outline-offset")}},"clearHighlightsDOM"),B=b(s=>{E();for(const e of s)for(const o of e.nodes)try{const r=document.querySelector(o.selector);r&&_(r,e.impact)}catch{}},"applyOverlaysDOM"),re=b(s=>{const e=s[s.length-1];return Array.isArray(e)?e.join(" "):String(e??"")},"nodeSelector"),ne=b((s,e)=>{const o=[];for(const r of s)e.includes(r.id)||o.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 o},"convertViolations"),se=b(async s=>{const e=await import("axe-core");return(e.default??e).run(document,{exclude:[["dev-toolbar"]],runOnly:{type:"tag",values:ee[s]}})},"runAxeScan");class oe{static{C(this,"v")}static{b(this,"A11yStore")}listeners=new Set;state;constructor(){const{issues:e,lastScan:o}=te();this.state={isScanning:!1,issues:e,lastScan:o,scanError:null,showOverlays:!1,standard:"wcag21aa"}}clearHighlights(){E()}getState(){return this.state}highlightIssue(e){E();let o=!1;for(const r of e.nodes)try{const i=document.querySelector(r.selector);i&&(_(i,e.impact),o||(i.scrollIntoView({behavior:"smooth",block:"center"}),o=!0))}catch{}}async scan(e=[]){if(!this.state.isScanning){this.update({isScanning:!0,scanError:null});try{const o=await se(this.state.standard),r=ne(o.violations,e);this.update({isScanning:!1,issues:r,lastScan:new Date().toISOString()}),this.persist(),this.state.showOverlays&&B(r)}catch(o){this.update({isScanning:!1,scanError:o instanceof Error?o.message:String(o)})}}}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((s,e)=>ae(s,"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:s,isActive:e,onClick:o,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:o,title:`${e?"Clear":"Filter by"} ${$[r]}`,type:"button",children:[t("span",{class:u("text-xl font-bold tabular-nums leading-none",W[r]),children:s}),t("span",{class:"text-[0.6rem] font-semibold uppercase tracking-wider text-muted-foreground",children:$[r]})]}),"SeverityBucket"),de=l(({isSelected:s,issue:e,onClick:o,onDisable:r})=>a("div",{class:u("p-3 border cursor-pointer transition-colors",s?"bg-foreground/6 border-primary/30":"border-border hover:bg-foreground/3"),onClick:o,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(s=>{const[e,o]=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(()=>o(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((s,e)=>ge(s,"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(s=>{const e=new Date(s).getTime();if(Number.isNaN(e))return"unknown";const o=Math.max(0,Math.floor((Date.now()-e)/1e3));if(o<10)return"just now";if(o<60)return`${o}s ago`;const r=Math.floor(o/60);return r<60?`${r} min ago`:`${Math.floor(r/60)} hr ago`},"formatElapsed"),be=O(s=>{const[e,o]=v(S(()=>c.getState()),"state");U(()=>c.subscribe(()=>o(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};

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

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

package/dist/apps/module-graph/index.js

@@ -0,0 +1,20 @@
+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};

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

@@ -0,0 +1,5 @@
+/** @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

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

package/dist/apps/more/index.js

@@ -0,0 +1,19 @@
+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};

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

@@ -0,0 +1,5 @@
+/** @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/index.d.ts

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