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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/CHANGELOG.md +251 -0
  2. package/LICENSE.md +137 -5
  3. package/README.md +70 -43
  4. package/bin/mcp.js +29 -0
  5. package/dist/apps/a11y/index.d.ts +3 -2
  6. package/dist/apps/a11y/index.js +3 -3
  7. package/dist/apps/annotations/index.d.ts +4 -0
  8. package/dist/apps/annotations/index.js +18 -0
  9. package/dist/apps/assets/index.d.ts +4 -0
  10. package/dist/apps/assets/index.js +16 -0
  11. package/dist/apps/inspector/index.d.ts +4 -0
  12. package/dist/apps/inspector/index.js +30 -0
  13. package/dist/apps/module-graph/index.d.ts +3 -2
  14. package/dist/apps/module-graph/index.js +2 -2
  15. package/dist/apps/performance/index.d.ts +3 -2
  16. package/dist/apps/performance/index.js +2 -2
  17. package/dist/apps/seo/index.d.ts +3 -2
  18. package/dist/apps/seo/index.js +2 -2
  19. package/dist/apps/settings/index.d.ts +3 -2
  20. package/dist/apps/settings/index.js +2 -2
  21. package/dist/apps/tailwind/index.d.ts +4 -0
  22. package/dist/apps/tailwind/index.js +7 -0
  23. package/dist/apps/timeline/index.d.ts +3 -2
  24. package/dist/apps/timeline/index.js +2 -2
  25. package/dist/apps/vite-config/index.d.ts +3 -2
  26. package/dist/apps/vite-config/index.js +2 -2
  27. package/dist/client/overlay.d.ts +1 -1
  28. package/dist/client/overlay.js +1 -1
  29. package/dist/index.d.ts +143 -6
  30. package/dist/index.js +1 -1
  31. package/dist/mcp/server.d.ts +2 -0
  32. package/dist/mcp/server.js +1 -0
  33. package/dist/packem_chunks/inject-source.js +9 -0
  34. package/dist/packem_shared/Alert-D2CvX4fw.js +1 -0
  35. package/dist/packem_shared/Badge-BEgU04nl.js +1 -0
  36. package/dist/packem_shared/Button-Bkx66Co7.js +1 -0
  37. package/dist/packem_shared/Card-CJa4vHVc.js +1 -0
  38. package/dist/packem_shared/Icon-B6UHkC0o.js +1 -0
  39. package/dist/packem_shared/Input-Cs6aduTi.js +1 -0
  40. package/dist/packem_shared/Label-DyCng4Cp.js +1 -0
  41. package/dist/packem_shared/Popover-BtFVaZYg.js +1 -0
  42. package/dist/packem_shared/Progress-DN6zn-0l.js +1 -0
  43. package/dist/packem_shared/Select-DgQ4ss-s.js +1 -0
  44. package/dist/packem_shared/Separator-D38mKeZv.js +1 -0
  45. package/dist/packem_shared/Skeleton-Dv-tcA1P.js +1 -0
  46. package/dist/packem_shared/Switch-C3NTpeoR.js +1 -0
  47. package/dist/packem_shared/Tabs-DKWMiawt.js +1 -0
  48. package/dist/packem_shared/Textarea-Yfg3dLZi.js +1 -0
  49. package/dist/packem_shared/Tooltip-CioncSXj.js +1 -0
  50. package/dist/packem_shared/annotation-settings-Bv0TH4WI.js +1 -0
  51. package/dist/packem_shared/annotation-store-bLQRYMaI.js +1 -0
  52. package/dist/packem_shared/app.d-SmKEDxsI.d.ts +229 -0
  53. package/dist/packem_shared/clsx-wGlvpUfw.js +1 -0
  54. package/dist/packem_shared/createClientRPCContext-DgRxrllw.js +1 -0
  55. package/dist/packem_shared/createDevToolbarHook-4bZZiHPI.js +1 -0
  56. package/dist/packem_shared/createServerRPCContext-D-yZrEjs.js +1 -0
  57. package/dist/packem_shared/getTimelineStore-B1cfjWV8.js +1 -0
  58. package/dist/packem_shared/global-api.d-BLfn-OUA.d.ts +547 -0
  59. package/dist/packem_shared/{setupGlobalHook-CFuxsCyl.js → setupGlobalHook-CCf9Logv.js} +1 -1
  60. package/dist/packem_shared/sharedToolbarStylesheet-Bx1muJAh.js +2 -0
  61. package/dist/packem_shared/store-DaUtLjf3.js +1 -0
  62. package/dist/packem_shared/use-frame-state-CxrlPUM5.js +1 -0
  63. package/dist/packem_shared/use-theme-zpm4zmqP.js +1 -0
  64. package/dist/toolbar/index.d.ts +152 -56
  65. package/dist/toolbar/index.js +3 -4
  66. package/dist/ui/index.d.ts +382 -0
  67. package/dist/ui/index.js +1 -0
  68. package/dist/vite-plugin.d.ts +155 -103
  69. package/dist/vite-plugin.js +5 -2
  70. package/package.json +53 -14
  71. package/dist/apps/a11y/a11y-app.d.ts +0 -5
  72. package/dist/apps/a11y/a11y-store.d.ts +0 -46
  73. package/dist/apps/a11y/a11y-tooltip.d.ts +0 -11
  74. package/dist/apps/module-graph/module-graph-app.d.ts +0 -5
  75. package/dist/apps/more/index.d.ts +0 -3
  76. package/dist/apps/more/index.js +0 -19
  77. package/dist/apps/more/more-app.d.ts +0 -5
  78. package/dist/apps/performance/performance-app.d.ts +0 -5
  79. package/dist/apps/performance/performance-tooltip.d.ts +0 -5
  80. package/dist/apps/seo/seo-app.d.ts +0 -5
  81. package/dist/apps/settings/settings-app.d.ts +0 -5
  82. package/dist/apps/timeline/timeline-app.d.ts +0 -5
  83. package/dist/apps/vite-config/vite-config-app.d.ts +0 -5
  84. package/dist/hooks/create-hook.d.ts +0 -10
  85. package/dist/hooks/events.d.ts +0 -5
  86. package/dist/hooks/global-hook.d.ts +0 -15
  87. package/dist/hooks/index.d.ts +0 -6
  88. package/dist/packem_shared/TimelineStore-BgBrirKd.js +0 -1
  89. package/dist/packem_shared/cn-BEsR6GkP.js +0 -1
  90. package/dist/packem_shared/createClientRPCContext-DzKQpKTk.js +0 -1
  91. package/dist/packem_shared/createDevToolbarHook-DGNxqk8N.js +0 -1
  92. package/dist/packem_shared/createServerRPCContext-BVSesPXu.js +0 -1
  93. package/dist/packem_shared/icon-BUQ92HaT.js +0 -1
  94. package/dist/packem_shared/store-BxE0w51s.js +0 -1
  95. package/dist/performance/monitor.d.ts +0 -115
  96. package/dist/rpc/client.d.ts +0 -7
  97. package/dist/rpc/functions/module-graph.d.ts +0 -17
  98. package/dist/rpc/functions/open-in-editor.d.ts +0 -9
  99. package/dist/rpc/functions/vite-config.d.ts +0 -7
  100. package/dist/rpc/index.d.ts +0 -8
  101. package/dist/rpc/server.d.ts +0 -9
  102. package/dist/timeline/index.d.ts +0 -6
  103. package/dist/timeline/store.d.ts +0 -52
  104. package/dist/toolbar/app-manager.d.ts +0 -95
  105. package/dist/toolbar/components/app-button.d.ts +0 -19
  106. package/dist/toolbar/components/app-canvas.d.ts +0 -13
  107. package/dist/toolbar/components/app-tooltip-overlay.d.ts +0 -13
  108. package/dist/toolbar/components/first-visit-hint.d.ts +0 -16
  109. package/dist/toolbar/components/index.d.ts +0 -4
  110. package/dist/toolbar/components/pinned-tooltip-card.d.ts +0 -23
  111. package/dist/toolbar/components/toolbar-bar.d.ts +0 -15
  112. package/dist/toolbar/components/toolbar-container.d.ts +0 -55
  113. package/dist/toolbar/components/vite-overlay-button.d.ts +0 -15
  114. package/dist/toolbar/context/index.d.ts +0 -2
  115. package/dist/toolbar/context/toolbar-context.d.ts +0 -106
  116. package/dist/toolbar/global-api.d.ts +0 -23
  117. package/dist/toolbar/helpers.d.ts +0 -6
  118. package/dist/toolbar/hooks/index.d.ts +0 -10
  119. package/dist/toolbar/hooks/use-apps.d.ts +0 -13
  120. package/dist/toolbar/hooks/use-frame-state.d.ts +0 -94
  121. package/dist/toolbar/hooks/use-panel-visible.d.ts +0 -21
  122. package/dist/toolbar/hooks/use-position.d.ts +0 -22
  123. package/dist/toolbar/hooks/use-theme.d.ts +0 -13
  124. package/dist/toolbar/hooks/use-toolbar.d.ts +0 -14
  125. package/dist/toolbar/settings.d.ts +0 -17
  126. package/dist/toolbar/stylesheet.d.ts +0 -1
  127. package/dist/toolbar/utils/index.d.ts +0 -12
  128. package/dist/types/app.d.ts +0 -163
  129. package/dist/types/global-api.d.ts +0 -95
  130. package/dist/types/hooks.d.ts +0 -88
  131. package/dist/types/index.d.ts +0 -12
  132. package/dist/types/messaging.d.ts +0 -43
  133. package/dist/types/rpc.d.ts +0 -95
  134. package/dist/types/timeline.d.ts +0 -62
  135. package/dist/types/toolbar.d.ts +0 -56
  136. package/dist/ui/components/icon.d.ts +0 -21
  137. package/dist/utils/cn.d.ts +0 -8
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@visulima/dev-toolbar",
3
- "version": "1.0.0-alpha.2",
3
+ "version": "1.0.0-alpha.21",
4
4
  "description": "Devtools is a set of tools for building advanced devtools for your application",
5
5
  "keywords": [
6
- "visulima",
7
- "dev-toolbar"
6
+ "dev-toolbar",
7
+ "visulima"
8
8
  ],
9
9
  "homepage": "https://visulima.com/packages/dev-toolbar",
10
10
  "bugs": {
@@ -49,14 +49,22 @@
49
49
  "types": "./dist/apps/a11y/index.d.ts",
50
50
  "default": "./dist/apps/a11y/index.js"
51
51
  },
52
+ "./apps/assets": {
53
+ "types": "./dist/apps/assets/index.d.ts",
54
+ "default": "./dist/apps/assets/index.js"
55
+ },
56
+ "./apps/inspector": {
57
+ "types": "./dist/apps/inspector/index.d.ts",
58
+ "default": "./dist/apps/inspector/index.js"
59
+ },
60
+ "./apps/tailwind": {
61
+ "types": "./dist/apps/tailwind/index.d.ts",
62
+ "default": "./dist/apps/tailwind/index.js"
63
+ },
52
64
  "./apps/module-graph": {
53
65
  "types": "./dist/apps/module-graph/index.d.ts",
54
66
  "default": "./dist/apps/module-graph/index.js"
55
67
  },
56
- "./apps/more": {
57
- "types": "./dist/apps/more/index.d.ts",
58
- "default": "./dist/apps/more/index.js"
59
- },
60
68
  "./apps/performance": {
61
69
  "types": "./dist/apps/performance/index.d.ts",
62
70
  "default": "./dist/apps/performance/index.js"
@@ -73,33 +81,64 @@
73
81
  "types": "./dist/apps/timeline/index.d.ts",
74
82
  "default": "./dist/apps/timeline/index.js"
75
83
  },
84
+ "./apps/annotations": {
85
+ "types": "./dist/apps/annotations/index.d.ts",
86
+ "default": "./dist/apps/annotations/index.js"
87
+ },
76
88
  "./apps/vite-config": {
77
89
  "types": "./dist/apps/vite-config/index.d.ts",
78
90
  "default": "./dist/apps/vite-config/index.js"
79
91
  },
92
+ "./mcp": {
93
+ "types": "./dist/mcp/server.d.ts",
94
+ "default": "./dist/mcp/server.js"
95
+ },
80
96
  "./toolbar": {
81
97
  "types": "./dist/toolbar/index.d.ts",
82
98
  "default": "./dist/toolbar/index.js"
83
99
  },
100
+ "./ui": {
101
+ "types": "./dist/ui/index.d.ts",
102
+ "default": "./dist/ui/index.js"
103
+ },
84
104
  "./package.json": "./package.json"
85
105
  },
106
+ "bin": {
107
+ "visulima-dev-toolbar-mcp": "./bin/mcp.js"
108
+ },
86
109
  "files": [
110
+ "bin",
87
111
  "dist",
88
112
  "README.md",
89
113
  "CHANGELOG.md"
90
114
  ],
91
115
  "dependencies": {
92
- "axe-core": "^4.11.1",
93
- "clsx": "^2.1.1",
94
- "preact": "^10.28.4",
95
- "tailwind-merge": "^3.5.0",
96
- "tw-animate-css": "1.4.0"
116
+ "@babel/generator": "^7.29.1",
117
+ "@babel/parser": "7.29.3",
118
+ "@babel/traverse": "^7.29.0",
119
+ "@floating-ui/dom": "^1.7.6",
120
+ "launch-editor": "2.13.2",
121
+ "preact": "^10.29.1"
97
122
  },
98
123
  "peerDependencies": {
99
- "vite": "^6 || ^7"
124
+ "@modelcontextprotocol/sdk": "^1.29.0",
125
+ "axe-core": "4.11.4",
126
+ "vite": "^8.0.11",
127
+ "zod": "^3.25.0 || ^4.0.0"
128
+ },
129
+ "peerDependenciesMeta": {
130
+ "@modelcontextprotocol/sdk": {
131
+ "optional": true
132
+ },
133
+ "axe-core": {
134
+ "optional": true
135
+ },
136
+ "zod": {
137
+ "optional": true
138
+ }
100
139
  },
101
140
  "engines": {
102
- "node": ">=22.21 <26"
141
+ "node": "^22.14.0 || >=24.10.0"
103
142
  },
104
143
  "publishConfig": {
105
144
  "access": "public",
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppComponentProps } from "../../types/app.d.ts";
4
- declare const A11yApp: (_props: AppComponentProps) => ComponentChildren;
5
- export default A11yApp;
@@ -1,46 +0,0 @@
1
- export type Severity = "critical" | "minor" | "moderate" | "serious";
2
- export type Standard = "best-practice" | "wcag21aa" | "wcag22aa" | "wcag2a";
3
- export interface A11yNode {
4
- html: string;
5
- selector: string;
6
- }
7
- export interface A11yIssue {
8
- helpUrl: string;
9
- id: string;
10
- impact: Severity;
11
- message: string;
12
- nodes: A11yNode[];
13
- wcagTags: string[];
14
- }
15
- export interface A11yStoreState {
16
- isScanning: boolean;
17
- issues: A11yIssue[];
18
- lastScan: null | string;
19
- scanError: null | string;
20
- showOverlays: boolean;
21
- standard: Standard;
22
- }
23
- export declare const SEVERITY_ORDER: Severity[];
24
- type Listener = () => void;
25
- declare class A11yStore {
26
- private listeners;
27
- private state;
28
- constructor();
29
- /** Remove all outline highlights from the page */
30
- clearHighlights(): void;
31
- getState(): Readonly<A11yStoreState>;
32
- /** Scroll to and outline a single issue's elements */
33
- highlightIssue(issue: A11yIssue): void;
34
- /** Run an axe-core scan and persist results */
35
- scan(disabledRules?: string[]): Promise<void>;
36
- /** Toggle overlay highlights on all affected elements */
37
- setShowOverlays(show: boolean): void;
38
- /** Change the WCAG standard used for future scans */
39
- setStandard(standard: Standard): void;
40
- subscribe(fn: Listener): () => void;
41
- private notify;
42
- private persist;
43
- private update;
44
- }
45
- export declare const a11yStore: A11yStore;
46
- export {};
@@ -1,11 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppTooltipProps } from "../../types/app.d.ts";
4
- /**
5
- * Hover tooltip for the Accessibility app button.
6
- * Shows a summary of scan results and quick action buttons.
7
- * @param _props - Tooltip props (unused; reads from a11yStore directly)
8
- * @returns Rendered tooltip component
9
- */
10
- declare const A11yTooltip: (_props: AppTooltipProps) => ComponentChildren;
11
- export default A11yTooltip;
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppComponentProps } from "../../types/app.d.ts";
4
- declare const ModuleGraphApp: ({ helpers }: AppComponentProps) => ComponentChildren;
5
- export default ModuleGraphApp;
@@ -1,3 +0,0 @@
1
- import type { DevToolbarApp } from "../../types/app.d.ts";
2
- declare const moreApp: DevToolbarApp;
3
- export default moreApp;
@@ -1,19 +0,0 @@
1
- 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 -->
2
- <svg
3
- class="lucide lucide-more-horizontal"
4
- xmlns="http://www.w3.org/2000/svg"
5
- width="24"
6
- height="24"
7
- viewBox="0 0 24 24"
8
- fill="none"
9
- stroke="currentColor"
10
- stroke-width="2"
11
- stroke-linecap="round"
12
- stroke-linejoin="round"
13
- >
14
- <circle cx="12" cy="12" r="1" />
15
- <circle cx="19" cy="12" r="1" />
16
- <circle cx="5" cy="12" r="1" />
17
- </svg>
18
- `;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__
19
- .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};
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppComponentProps } from "../../types/app.d.ts";
4
- declare const MoreApp: (_props: AppComponentProps) => ComponentChildren;
5
- export default MoreApp;
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppComponentProps } from "../../types/app.d.ts";
4
- declare const PerformanceApp: (_props: AppComponentProps) => ComponentChildren;
5
- export default PerformanceApp;
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppTooltipProps } from "../../types/app.d.ts";
4
- declare const PerformanceTooltip: (_props: AppTooltipProps) => ComponentChildren;
5
- export default PerformanceTooltip;
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppComponentProps } from "../../types/app.d.ts";
4
- declare const SeoApp: (_props: AppComponentProps) => ComponentChildren;
5
- export default SeoApp;
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppComponentProps } from "../../types/app.d.ts";
4
- declare const SettingsApp: (_props: AppComponentProps) => ComponentChildren;
5
- export default SettingsApp;
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppComponentProps } from "../../types/app.d.ts";
4
- declare const TimelineApp: (_props: AppComponentProps) => ComponentChildren;
5
- export default TimelineApp;
@@ -1,5 +0,0 @@
1
- /** @jsxImportSource preact */
2
- import type { ComponentChildren } from "preact";
3
- import type { AppComponentProps } from "../../types/app.d.ts";
4
- declare const ViteConfigApp: ({ helpers }: AppComponentProps) => ComponentChildren;
5
- export default ViteConfigApp;
@@ -1,10 +0,0 @@
1
- import type { DevToolbarApp } from "../types/app.d.ts";
2
- import type { DevToolbarHook } from "../types/hooks.d.ts";
3
- import type { TimelineEvent } from "../types/timeline.d.ts";
4
- /**
5
- * Creates a dev toolbar hook instance
6
- * @param onRegisterApp Callback when app is registered
7
- * @param onTimelineEvent Callback when timeline event is added
8
- * @returns Hook instance
9
- */
10
- export declare const createDevToolbarHook: (onRegisterApp?: (app: DevToolbarApp) => void, onTimelineEvent?: (groupId: string, event: TimelineEvent) => void) => DevToolbarHook;
@@ -1,5 +0,0 @@
1
- import type { HookEvents } from "../types/hooks.d.ts";
2
- /**
3
- * Hook event names
4
- */
5
- export declare const HOOK_EVENT_NAMES: (keyof HookEvents)[];
@@ -1,15 +0,0 @@
1
- import type { DevToolbarApp } from "../types/app.d.ts";
2
- import type { DevToolbarHook } from "../types/hooks.d.ts";
3
- import type { TimelineEvent } from "../types/timeline.d.ts";
4
- /**
5
- * Setup global hook on window object
6
- * @param onRegisterApp Callback when app is registered
7
- * @param onTimelineEvent Callback when timeline event is added
8
- * @returns Hook instance
9
- */
10
- export declare const setupGlobalHook: (onRegisterApp?: (app: DevToolbarApp) => void, onTimelineEvent?: (groupId: string, event: TimelineEvent) => void) => DevToolbarHook;
11
- /**
12
- * Get the global hook instance
13
- * @returns Hook instance or undefined
14
- */
15
- export declare const getGlobalHook: () => DevToolbarHook | undefined;
@@ -1,6 +0,0 @@
1
- /**
2
- * Hook system exports
3
- */
4
- export { createDevToolbarHook } from "./create-hook.d.ts";
5
- export { HOOK_EVENT_NAMES } from "./events.d.ts";
6
- export { getGlobalHook, setupGlobalHook } from "./global-hook.d.ts";
@@ -1 +0,0 @@
1
- import{T as o,g as r}from"./store-BxE0w51s.js";export{o as TimelineStore,r as getTimelineStore};
@@ -1 +0,0 @@
1
- var t=Object.defineProperty;var o=(r,e)=>t(r,"name",{value:e,configurable:!0});import{clsx as m}from"clsx";import{twMerge as a}from"tailwind-merge";var c=Object.defineProperty,n=o((r,e)=>c(r,"name",{value:e,configurable:!0}),"t");const l=n((...r)=>a(m(r)),"cn");export{l as m};
@@ -1 +0,0 @@
1
- var s=Object.defineProperty;var d=(a,n)=>s(a,"name",{value:n,configurable:!0});var m=Object.defineProperty,c=d((a,n)=>m(a,"name",{value:n,configurable:!0}),"r");const p=c(a=>{const n={onConfigChange:c(()=>{},"onConfigChange"),onHMRUpdate:c(()=>{},"onHMRUpdate"),onModuleUpdate:c(()=>{},"onModuleUpdate"),...a},t=new Map;return globalThis.window!==void 0&&import.meta.hot&&(import.meta.hot.on("dev-toolbar:rpc:response",e=>{const o=t.get(e.id);o&&(t.delete(e.id),o.resolve(e.result))}),import.meta.hot.on("dev-toolbar:rpc:error",e=>{const o=t.get(e.id);o&&(t.delete(e.id),o.reject(new Error(e.error)))}),import.meta.hot.on("dev-toolbar:client",e=>{const{args:o,method:r}=e,i=n[r];if(i)try{i(...o)}catch(l){console.error(`[dev-toolbar] Error calling client function ${r}:`,l)}})),{async callServer(e,...o){if(globalThis.window===void 0||!import.meta.hot)throw new Error("RPC calls can only be made in browser environment with HMR");const r=`${Date.now()}-${Math.random().toString(36).slice(7)}`;return new Promise((i,l)=>{t.set(r,{reject:l,resolve:i}),setTimeout(()=>{t.has(r)&&(t.delete(r),l(new Error(`RPC call timeout: ${e}`)))},3e4),import.meta.hot.send("dev-toolbar:rpc",{args:o,id:r,method:e})})},registerFunction(e,o){n[e]=o}}},"createClientRPCContext");export{p as createClientRPCContext};
@@ -1 +0,0 @@
1
- var d=Object.defineProperty;var c=(n,a)=>d(n,"name",{value:a,configurable:!0});var f=Object.defineProperty,l=c((n,a)=>f(n,"name",{value:a,configurable:!0}),"v");const g=l((n,a)=>{const r=new Map;return{addTimelineEvent(e,t){a&&a(e,t),this.emit("timeline:event",t)},emit(e,...t){const o=r.get(e);if(o)for(const i of o)try{i(...t)}catch(s){console.error(`[dev-toolbar] Error in hook handler for ${String(e)}:`,s)}},off(e,t){const o=r.get(e);o&&(t?(o.delete(t),o.size===0&&r.delete(e)):r.delete(e))},on(e,t){return r.has(e)||r.set(e,new Set),r.get(e).add(t),()=>{const o=r.get(e);o&&(o.delete(t),o.size===0&&r.delete(e))}},once(e,t){const o=l(((...i)=>{t(...i),this.off(e,o)}),"onceHandler");this.on(e,o)},registerApp(e){n&&n(e)}}},"createDevToolbarHook");export{g as createDevToolbarHook};
@@ -1 +0,0 @@
1
- var p=Object.defineProperty;var l=(e,r)=>p(e,"name",{value:r,configurable:!0});var g=Object.defineProperty,v=l((e,r)=>g(e,"name",{value:r,configurable:!0}),"u");const f=v(async e=>{const{moduleGraph:r}=e,t=[];return r.idToModuleMap.forEach(o=>{const n=[];o.importers.forEach(a=>{const s=a.url??a.id;s&&n.push(s)});const c=o.id??o.url,i=o.url??o.id;!c||!i||t.push({id:c,importerCount:o.importers.size,importerUrls:n,url:i})}),t},"getModuleGraph");var h=Object.defineProperty,m=l((e,r)=>h(e,"name",{value:r,configurable:!0}),"n$1");const b=m(async(e,r,t,o)=>{const n=e;if(n.openInEditor){await n.openInEditor(r,{column:o,line:t});return}const c=process.env.EDITOR||process.env.VISUAL||"code",i=r.startsWith("/")?r:`${e.config.root}/${r}`,a=t&&o?`:${t}:${o}`:t?`:${t}`:"",{spawn:s}=require("node:child_process");s(c,[`${i}${a}`],{detached:!0,stdio:"ignore"})},"openInEditor");var y=Object.defineProperty,$=l((e,r)=>y(e,"name",{value:r,configurable:!0}),"t");const C=$(async e=>({base:e.config.base,build:{outDir:e.config.build?.outDir},mode:e.config.mode,resolve:{alias:e.config.resolve.alias},root:e.config.root,server:{host:e.config.server?.host,https:e.config.server?.https,port:e.config.server?.port}}),"getViteConfig");var E=Object.defineProperty,d=l((e,r)=>E(e,"name",{value:r,configurable:!0}),"n");const I=d(e=>({getModuleGraph:d(async()=>f(e),"getModuleGraph"),getViteConfig:d(async()=>C(e),"getViteConfig"),openInEditor:d(async(r,t,o)=>b(e,r,t,o),"openInEditor"),readFile:d(async r=>{const{readFile:t}=await import("node:fs/promises"),o=r.startsWith("/")?r:`${e.config.root}/${r}`;return t(o,"utf-8")},"readFile")}),"createDefaultServerFunctions"),P=d((e,r)=>{const t={...I(e),...r};return e.ws.on("dev-toolbar:rpc",async(o,n)=>{const{args:c,id:i,method:a}=o,s=t[a];if(!s){n.send("dev-toolbar:rpc:error",{error:`Unknown RPC method: ${a}`,id:i});return}try{const u=await s(e,...c);n.send("dev-toolbar:rpc:response",{id:i,result:u})}catch(u){n.send("dev-toolbar:rpc:error",{error:u instanceof Error?u.message:String(u),id:i})}}),{callClient(o,...n){e.ws.send({data:{args:n,method:o},event:"dev-toolbar:client",type:"custom"})},registerFunction(o,n){t[o]=n},server:e}},"createServerRPCContext");export{P as createServerRPCContext};
@@ -1 +0,0 @@
1
- var S=Object.defineProperty;var l=(e,t)=>S(e,"name",{value:t,configurable:!0});import{addHookName as g}from"preact/devtools";import{useState as f,useEffect as v}from"preact/hooks";import{m as w}from"./cn-BEsR6GkP.js";import{jsx as T}from"preact/jsx-runtime";var O=Object.defineProperty,s=l((e,t)=>O(e,"name",{value:t,configurable:!0}),"t$2");const _={toggle:"Alt+Shift+D",close:"Escape"},k="__v_dt__frame_state",a={closeOnOutsideClick:!0,height:60,isPip:!1,isFirstVisit:!0,keybindings:_,left:50,minimizePanelInactive:5e3,open:!1,position:"bottom",preferShowFloatingPanel:!0,reduceMotion:!1,route:"/",top:0,viewMode:"default",width:80},I=s(()=>{const e=globalThis.__VISULIMA_DEV_TOOLBAR_OPTIONS__;return e?{...a,closeOnOutsideClick:e.closeOnOutsideClick??a.closeOnOutsideClick,height:e.height??a.height,keybindings:{..._,...e.keybindings},minimizePanelInactive:e.minimizePanelInactive??a.minimizePanelInactive,position:e.position??a.position,reduceMotion:e.reduceMotion??a.reduceMotion,width:e.width??a.width}:{...a}},"buildEffectiveDefaults"),L=s(()=>{const e=I();if(globalThis.window===void 0)return e;try{const t=localStorage.getItem(k);if(t){const i=JSON.parse(t);return{...e,...i,keybindings:{...e.keybindings,...i.keybindings},open:!1}}}catch{}return e},"loadState"),M=s(e=>{if(globalThis.window!==void 0)try{localStorage.setItem(k,JSON.stringify(e))}catch{}},"saveState");let c=L();const d=new Set,$=s(()=>{for(const e of d)e()},"notifyListeners"),P=s(e=>{c={...c,...e},M(c),$()},"updateSharedState"),V=s(()=>{const[,e]=g(f(0),"forceUpdate");return v(()=>{const t=s(()=>{e(i=>i+1)},"listener");return d.add(t),()=>{d.delete(t)}},[]),{state:c,updateState:P}},"useFrameState");var E=Object.defineProperty,o=l((e,t)=>E(e,"name",{value:t,configurable:!0}),"t$1");const b="__v_dt__theme",h=o(()=>globalThis.window===void 0?"light":globalThis.window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light","getSystemTheme"),z=o(()=>{if(globalThis.window===void 0)return"system";try{const e=localStorage.getItem(b);if(e==="light"||e==="dark"||e==="system")return e}catch(e){console.warn("[dev-toolbar] Failed to load theme:",e)}return"system"},"loadTheme"),C=o(e=>{if(globalThis.window!==void 0)try{localStorage.setItem(b,e)}catch(t){console.warn("[dev-toolbar] Failed to save theme:",t)}},"saveTheme");let n=z(),r=n==="system"?h():n;const m=new Set,p=o(()=>{for(const e of m)e()},"notifyThemeListeners"),y=o(e=>{try{localStorage.setItem("__v-o__theme",e)}catch{}const t=globalThis.__v_o__current?.shadowRoot?.querySelector("#__v_o__root");t&&(e==="dark"?t.classList.add("dark"):t.classList.remove("dark"))},"syncViteOverlayTheme"),u=o(e=>{n=e,r=e==="system"?h():e,C(e),y(r),p()},"setSharedTheme");if(globalThis.window!==void 0){const e=globalThis.window.matchMedia("(prefers-color-scheme: dark)"),t=o(()=>{n==="system"&&(r=h(),y(r),p())},"handleSystemChange");e.addEventListener?e.addEventListener("change",t):e.addListener&&e.addListener(t)}const W=o(()=>{const[,e]=g(f(0),"forceUpdate");return v(()=>{const t=o(()=>{e(i=>i+1)},"listener");return m.add(t),()=>{m.delete(t)}},[]),{resolvedTheme:r,setTheme:u,theme:n,toggleTheme:o(()=>{u(r==="dark"?"light":"dark")},"toggleTheme")}},"useTheme");var F=Object.defineProperty,D=l((e,t)=>F(e,"name",{value:t,configurable:!0}),"o");const x=D(({src:e,size:t=13,class:i})=>T("span",{class:w("inline-block shrink-0",i),style:{backgroundColor:"currentColor",height:t,maskImage:`url(${e})`,maskRepeat:"no-repeat",maskSize:"contain",WebkitMaskImage:`url(${e})`,WebkitMaskRepeat:"no-repeat",WebkitMaskSize:"contain",width:t}}),"Icon");export{_ as D,W as a,x as i,V as u};
@@ -1 +0,0 @@
1
- var v=Object.defineProperty;var o=(r,e)=>v(r,"name",{value:e,configurable:!0});const a=[{color:"#10B981",events:[],id:"hmr",label:"HMR Updates"},{color:"#3B82F6",events:[],id:"network",label:"Network"},{color:"#EF4444",events:[],id:"errors",label:"Errors"},{color:"#8B5CF6",events:[],id:"custom",label:"Custom"}];var g=Object.defineProperty,i=o((r,e)=>g(r,"name",{value:e,configurable:!0}),"i");class c{static{o(this,"TimelineStore")}static{i(this,"TimelineStore")}groups;maxEvents;constructor(e=1e3){this.maxEvents=e,this.groups=new Map;for(const t of a)this.groups.set(t.id,{...t,events:[]})}addEvent(e,t){let s=this.groups.get(e);s||(s={events:[],id:e,label:e},this.groups.set(e,s)),s.events.push(t),s.events.length>this.maxEvents&&s.events.shift(),s.events.sort((l,u)=>l.time-u.time)}getGroups(){return[...this.groups.values()]}getGroupEvents(e){return this.groups.get(e)?.events||[]}getAllEvents(){const e=[];for(const t of this.groups.values())e.push(...t.events);return e.sort((t,s)=>t.time-s.time)}clearGroup(e){const t=this.groups.get(e);t&&(t.events=[])}clearAll(){for(const e of this.groups.values())e.events=[]}getEventsInRange(e,t){return this.getAllEvents().filter(s=>s.time>=e&&s.time<=t)}}let n;const h=i(()=>(n||(n=new c),n),"getTimelineStore");export{a as D,c as T,h as g};
@@ -1,115 +0,0 @@
1
- /**
2
- * Performance Monitor — singleton that collects browser performance metrics.
3
- *
4
- * Metrics collected:
5
- * - FPS via requestAnimationFrame circular buffer (last 60 samples)
6
- * - Memory via performance.memory (Chrome only, 1-second polling)
7
- * - Core Web Vitals: LCP, CLS, FID, FCP, TTFB (PerformanceObserver, buffered)
8
- * - Long tasks (>50 ms blocking) via PerformanceObserver
9
- */
10
- export interface MemoryInfo {
11
- /** JS heap size limit in bytes */
12
- jsHeapSizeLimit: number;
13
- /** Total allocated JS heap in bytes */
14
- totalJSHeapSize: number;
15
- /** Currently used JS heap in bytes */
16
- usedJSHeapSize: number;
17
- }
18
- export interface LongTask {
19
- /** Duration in milliseconds */
20
- duration: number;
21
- /** Unique id */
22
- id: string;
23
- /** Start time (DOMHighResTimeStamp) */
24
- startTime: number;
25
- }
26
- export interface CoreWebVitals {
27
- /** Cumulative Layout Shift score */
28
- cls: null | number;
29
- /** First Contentful Paint in ms */
30
- fcp: null | number;
31
- /** First Input Delay in ms */
32
- fid: null | number;
33
- /** Largest Contentful Paint in ms */
34
- lcp: null | number;
35
- /** Time to First Byte in ms */
36
- ttfb: null | number;
37
- }
38
- export interface PerformanceSnapshot {
39
- /** Current FPS (0–60) */
40
- fps: number;
41
- /** Long tasks captured since start */
42
- longTasks: LongTask[];
43
- /** Memory info (Chrome only, otherwise null) */
44
- memory: MemoryInfo | null;
45
- /** Core Web Vitals */
46
- vitals: CoreWebVitals;
47
- }
48
- type Listener = (snapshot: PerformanceSnapshot) => void;
49
- export declare const CWV_THRESHOLDS: {
50
- readonly cls: {
51
- readonly good: 0.1;
52
- readonly poor: 0.25;
53
- };
54
- readonly fcp: {
55
- readonly good: 1800;
56
- readonly poor: 3000;
57
- };
58
- readonly fid: {
59
- readonly good: 100;
60
- readonly poor: 300;
61
- };
62
- readonly lcp: {
63
- readonly good: 2500;
64
- readonly poor: 4000;
65
- };
66
- readonly ttfb: {
67
- readonly good: 800;
68
- readonly poor: 1800;
69
- };
70
- };
71
- export type CwvRating = "good" | "needs-improvement" | "poor";
72
- export declare const getCwvRating: (metric: keyof typeof CWV_THRESHOLDS, value: number) => CwvRating;
73
- export declare class PerformanceMonitor {
74
- private clsValue;
75
- private fpsSamples;
76
- private listeners;
77
- private longTaskIdCounter;
78
- private longTasks;
79
- private memory;
80
- private memoryInterval;
81
- private observers;
82
- private rafId;
83
- private running;
84
- private vitals;
85
- /**
86
- * Remove all collected long tasks (useful for the "Clear" button in the UI).
87
- */
88
- clearLongTasks(): void;
89
- /**
90
- * Return a snapshot of the current metrics (no subscription).
91
- */
92
- getSnapshot(): PerformanceSnapshot;
93
- /**
94
- * Start collecting metrics. Safe to call multiple times — starts once.
95
- */
96
- start(): void;
97
- /**
98
- * Stop all observers and timers.
99
- */
100
- stop(): void;
101
- /**
102
- * Subscribe to metric updates. Returns an unsubscribe function.
103
- */
104
- subscribe(listener: Listener): () => void;
105
- private currentFps;
106
- private emit;
107
- private loadTtfb;
108
- private startCwv;
109
- private startFps;
110
- private startLongTasks;
111
- private startMemory;
112
- private tryObserve;
113
- }
114
- export declare const performanceMonitor: PerformanceMonitor;
115
- export {};
@@ -1,7 +0,0 @@
1
- import type { ClientFunctions, ClientRPCContext } from "../types/rpc.d.ts";
2
- /**
3
- * Creates client-side RPC context
4
- * @param customFunctions Custom client functions to register
5
- * @returns Client RPC context
6
- */
7
- export declare const createClientRPCContext: (customFunctions?: Partial<ClientFunctions>) => ClientRPCContext;
@@ -1,17 +0,0 @@
1
- import type { ViteDevServer } from "vite";
2
- export interface SerializableModuleNode {
3
- id: string;
4
- importerCount: number;
5
- importerUrls: string[];
6
- url: string;
7
- }
8
- /**
9
- * Get module dependency graph as serializable objects.
10
- * Raw ModuleNode objects contain circular references (importers/importedModules)
11
- * which cannot be JSON-serialized; this function returns a flat, safe representation.
12
- * Importer URLs are extracted from each ModuleNode's importers Set before serialization
13
- * so the client can display the full "imported by" list without a second RPC call.
14
- * @param {import('vite').ViteDevServer} server Vite dev server instance
15
- * @returns {Promise<SerializableModuleNode[]>} Array of serializable module entries
16
- */
17
- export declare const getModuleGraph: (server: ViteDevServer) => Promise<SerializableModuleNode[]>;
@@ -1,9 +0,0 @@
1
- import type { ViteDevServer } from "vite";
2
- /**
3
- * Open file in editor
4
- * @param server Vite dev server instance
5
- * @param file File path
6
- * @param line Line number (1-based)
7
- * @param column Column number (1-based)
8
- */
9
- export declare const openInEditor: (server: ViteDevServer, file: string, line?: number, column?: number) => Promise<void>;
@@ -1,7 +0,0 @@
1
- import type { ViteDevServer } from "vite";
2
- /**
3
- * Get Vite configuration
4
- * @param server Vite dev server instance
5
- * @returns Vite config object
6
- */
7
- export declare const getViteConfig: (server: ViteDevServer) => Promise<Record<string, any>>;
@@ -1,8 +0,0 @@
1
- /**
2
- * RPC layer exports
3
- */
4
- export { createClientRPCContext } from "./client.d.ts";
5
- export { getModuleGraph, type SerializableModuleNode } from "./functions/module-graph.d.ts";
6
- export { openInEditor } from "./functions/open-in-editor.d.ts";
7
- export { getViteConfig } from "./functions/vite-config.d.ts";
8
- export { createServerRPCContext } from "./server.d.ts";
@@ -1,9 +0,0 @@
1
- import type { ViteDevServer } from "vite";
2
- import type { ServerFunctions, ServerRPCContext } from "../types/rpc.d.ts";
3
- /**
4
- * Creates server-side RPC context
5
- * @param server Vite dev server instance
6
- * @param customFunctions Custom server functions to register
7
- * @returns Server RPC context
8
- */
9
- export declare const createServerRPCContext: (server: ViteDevServer, customFunctions?: Partial<ServerFunctions>) => ServerRPCContext;
@@ -1,6 +0,0 @@
1
- /**
2
- * Timeline system exports
3
- */
4
- export type { TimelineEvent, TimelineEventLevel, TimelineGroup } from "../types/timeline.d.ts";
5
- export { DEFAULT_TIMELINE_GROUPS } from "../types/timeline.d.ts";
6
- export { getTimelineStore, TimelineStore } from "./store.d.ts";
@@ -1,52 +0,0 @@
1
- import type { TimelineEvent, TimelineGroup } from "../types/timeline.d.ts";
2
- /**
3
- * Timeline store for managing events
4
- */
5
- export declare class TimelineStore {
6
- private groups;
7
- private maxEvents;
8
- constructor(maxEvents?: number);
9
- /**
10
- * Add an event to a group
11
- * @param groupId Group ID
12
- * @param event Timeline event
13
- */
14
- addEvent(groupId: string, event: TimelineEvent): void;
15
- /**
16
- * Get all groups
17
- * @returns Array of timeline groups
18
- */
19
- getGroups(): TimelineGroup[];
20
- /**
21
- * Get events for a specific group
22
- * @param groupId Group ID
23
- * @returns Array of events or empty array
24
- */
25
- getGroupEvents(groupId: string): TimelineEvent[];
26
- /**
27
- * Get all events across all groups
28
- * @returns Array of all events
29
- */
30
- getAllEvents(): TimelineEvent[];
31
- /**
32
- * Clear events for a group
33
- * @param groupId Group ID
34
- */
35
- clearGroup(groupId: string): void;
36
- /**
37
- * Clear all events
38
- */
39
- clearAll(): void;
40
- /**
41
- * Get events within a time range
42
- * @param startTime Start timestamp
43
- * @param endTime End timestamp
44
- * @returns Array of events in range
45
- */
46
- getEventsInRange(startTime: number, endTime: number): TimelineEvent[];
47
- }
48
- /**
49
- * Get or create timeline store instance
50
- * @returns Timeline store instance
51
- */
52
- export declare const getTimelineStore: () => TimelineStore;