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

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 (123) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/README.md +59 -42
  3. package/dist/apps/a11y/a11y-store.d.ts +12 -16
  4. package/dist/apps/a11y/a11y-tooltip.d.ts +1 -1
  5. package/dist/apps/a11y/index.js +2 -21
  6. package/dist/apps/inspector/index.d.ts +3 -0
  7. package/dist/apps/inspector/index.js +1 -0
  8. package/dist/apps/inspector/inspector-app.d.ts +12 -0
  9. package/dist/apps/module-graph/index.js +1 -20
  10. package/dist/apps/more/index.js +2 -19
  11. package/dist/apps/performance/index.js +1 -17
  12. package/dist/apps/seo/index.js +1 -17
  13. package/dist/apps/settings/index.js +1 -17
  14. package/dist/apps/settings/settings-app.d.ts +0 -1
  15. package/dist/apps/tailwind/index.d.ts +3 -0
  16. package/dist/apps/tailwind/index.js +7 -0
  17. package/dist/apps/tailwind/tailwind-app.d.ts +5 -0
  18. package/dist/apps/timeline/index.js +1 -18
  19. package/dist/apps/vite-config/index.js +1 -16
  20. package/dist/client/overlay.js +1 -1
  21. package/dist/hooks/create-hook.d.ts +7 -5
  22. package/dist/hooks/events.d.ts +4 -2
  23. package/dist/hooks/global-hook.d.ts +6 -6
  24. package/dist/index.d.ts +4 -2
  25. package/dist/index.js +1 -1
  26. package/dist/packem_chunks/inject-source.js +1 -0
  27. package/dist/packem_shared/Alert-H-x1JuZ0.js +1 -0
  28. package/dist/packem_shared/Badge-C30mDKKG.js +1 -0
  29. package/dist/packem_shared/Button-DODNCTPZ.js +1 -0
  30. package/dist/packem_shared/Card-DdI7Wn3t.js +1 -0
  31. package/dist/packem_shared/Icon-DWFLZkwW.js +1 -0
  32. package/dist/packem_shared/Input-GfbOwAkK.js +1 -0
  33. package/dist/packem_shared/Label-Bzi47aUf.js +1 -0
  34. package/dist/packem_shared/Popover-CLt7YhUF.js +1 -0
  35. package/dist/packem_shared/Progress-vGfFpxRn.js +1 -0
  36. package/dist/packem_shared/Separator-DQGeJPQg.js +1 -0
  37. package/dist/packem_shared/Skeleton-BYXau6jM.js +1 -0
  38. package/dist/packem_shared/Switch-BeC78S_T.js +1 -0
  39. package/dist/packem_shared/Tabs-CXERaeAp.js +1 -0
  40. package/dist/packem_shared/Textarea-DvbSX13V.js +1 -0
  41. package/dist/packem_shared/Tooltip-tlBN-NdK.js +1 -0
  42. package/dist/packem_shared/cn-DWLJYh3h.js +1 -0
  43. package/dist/packem_shared/createClientRPCContext-DgRxrllw.js +1 -0
  44. package/dist/packem_shared/createDevToolbarHook-4bZZiHPI.js +1 -0
  45. package/dist/packem_shared/createServerRPCContext-CEm1Ymkn.js +1 -0
  46. package/dist/packem_shared/getTimelineStore-B1cfjWV8.js +1 -0
  47. package/dist/packem_shared/{setupGlobalHook-CFuxsCyl.js → setupGlobalHook-CCf9Logv.js} +1 -1
  48. package/dist/packem_shared/sharedToolbarStylesheet-DOV-Jwcm.js +2 -0
  49. package/dist/packem_shared/store-DaUtLjf3.js +1 -0
  50. package/dist/packem_shared/use-theme-BOw3dPpY.js +1 -0
  51. package/dist/performance/monitor.d.ts +27 -26
  52. package/dist/rpc/client.d.ts +6 -4
  53. package/dist/rpc/functions/module-graph.d.ts +2 -2
  54. package/dist/rpc/functions/open-in-editor.d.ts +13 -6
  55. package/dist/rpc/functions/tailwind-config.d.ts +15 -0
  56. package/dist/rpc/functions/vite-config.d.ts +6 -4
  57. package/dist/rpc/server.d.ts +11 -5
  58. package/dist/timeline/capture.d.ts +8 -0
  59. package/dist/timeline/index.d.ts +3 -1
  60. package/dist/timeline/store.d.ts +12 -22
  61. package/dist/toolbar/app-manager.d.ts +49 -40
  62. package/dist/toolbar/components/app-button.d.ts +2 -2
  63. package/dist/toolbar/components/app-canvas.d.ts +1 -2
  64. package/dist/toolbar/components/app-tooltip-overlay.d.ts +0 -1
  65. package/dist/toolbar/components/first-visit-hint.d.ts +3 -3
  66. package/dist/toolbar/components/pinned-tooltip-card.d.ts +0 -1
  67. package/dist/toolbar/components/toolbar-bar.d.ts +0 -1
  68. package/dist/toolbar/components/toolbar-container.d.ts +1 -1
  69. package/dist/toolbar/components/vite-overlay-button.d.ts +2 -3
  70. package/dist/toolbar/context/index.d.ts +1 -1
  71. package/dist/toolbar/context/toolbar-context.d.ts +43 -42
  72. package/dist/toolbar/global-api.d.ts +4 -3
  73. package/dist/toolbar/helpers.d.ts +5 -3
  74. package/dist/toolbar/hooks/index.d.ts +4 -4
  75. package/dist/toolbar/hooks/use-apps.d.ts +5 -3
  76. package/dist/toolbar/hooks/use-frame-state.d.ts +22 -16
  77. package/dist/toolbar/hooks/use-panel-visible.d.ts +9 -7
  78. package/dist/toolbar/hooks/use-position.d.ts +7 -5
  79. package/dist/toolbar/hooks/use-theme.d.ts +6 -4
  80. package/dist/toolbar/hooks/use-toolbar.d.ts +4 -2
  81. package/dist/toolbar/index.d.ts +9 -16
  82. package/dist/toolbar/index.js +3 -4
  83. package/dist/toolbar/settings.d.ts +7 -7
  84. package/dist/toolbar/stylesheet.d.ts +3 -1
  85. package/dist/toolbar/utils/index.d.ts +3 -3
  86. package/dist/types/app.d.ts +26 -14
  87. package/dist/types/global-api.d.ts +27 -31
  88. package/dist/types/hooks.d.ts +32 -34
  89. package/dist/types/messaging.d.ts +2 -2
  90. package/dist/types/rpc.d.ts +8 -6
  91. package/dist/types/timeline.d.ts +3 -3
  92. package/dist/types/toolbar.d.ts +1 -1
  93. package/dist/ui/components/alert.d.ts +20 -0
  94. package/dist/ui/components/badge.d.ts +10 -0
  95. package/dist/ui/components/button.d.ts +12 -0
  96. package/dist/ui/components/card.d.ts +17 -0
  97. package/dist/ui/components/icon.d.ts +5 -6
  98. package/dist/ui/components/input.d.ts +8 -0
  99. package/dist/ui/components/label.d.ts +8 -0
  100. package/dist/ui/components/popover.d.ts +27 -0
  101. package/dist/ui/components/progress.d.ts +8 -0
  102. package/dist/ui/components/separator.d.ts +9 -0
  103. package/dist/ui/components/skeleton.d.ts +7 -0
  104. package/dist/ui/components/switch.d.ts +12 -0
  105. package/dist/ui/components/tabs.d.ts +29 -0
  106. package/dist/ui/components/textarea.d.ts +8 -0
  107. package/dist/ui/components/tooltip.d.ts +19 -0
  108. package/dist/ui/index.d.ts +17 -0
  109. package/dist/ui/index.js +1 -0
  110. package/dist/utils/cn.d.ts +3 -3
  111. package/dist/vite/inject-source.d.ts +24 -0
  112. package/dist/vite/matcher.d.ts +6 -0
  113. package/dist/vite-plugin.d.ts +43 -5
  114. package/dist/vite-plugin.js +2 -2
  115. package/package.json +23 -5
  116. package/dist/packem_shared/TimelineStore-BgBrirKd.js +0 -1
  117. package/dist/packem_shared/cn-BEsR6GkP.js +0 -1
  118. package/dist/packem_shared/createClientRPCContext-DzKQpKTk.js +0 -1
  119. package/dist/packem_shared/createDevToolbarHook-DGNxqk8N.js +0 -1
  120. package/dist/packem_shared/createServerRPCContext-BVSesPXu.js +0 -1
  121. package/dist/packem_shared/icon-BUQ92HaT.js +0 -1
  122. package/dist/packem_shared/store-BxE0w51s.js +0 -1
  123. package/dist/rpc/index.d.ts +0 -8
@@ -0,0 +1 @@
1
+ import{default as e}from"../packem_shared/cn-DWLJYh3h.js";import{Alert as a,AlertDescription as f,AlertTitle as p}from"../packem_shared/Alert-H-x1JuZ0.js";import{default as s}from"../packem_shared/Badge-C30mDKKG.js";import{default as x}from"../packem_shared/Button-DODNCTPZ.js";import{Card as n,CardContent as i,CardDescription as u,CardFooter as T,CardHeader as C,CardTitle as g}from"../packem_shared/Card-DdI7Wn3t.js";import{default as b}from"../packem_shared/Icon-DWFLZkwW.js";import{default as v}from"../packem_shared/Input-GfbOwAkK.js";import{default as S}from"../packem_shared/Label-Bzi47aUf.js";import{Popover as D,PopoverClose as I,PopoverContent as L,PopoverTrigger as h}from"../packem_shared/Popover-CLt7YhUF.js";import{default as w}from"../packem_shared/Progress-vGfFpxRn.js";import{default as H}from"../packem_shared/Separator-DQGeJPQg.js";import{default as q}from"../packem_shared/Skeleton-BYXau6jM.js";import{default as z}from"../packem_shared/Switch-BeC78S_T.js";import{Tabs as G,TabsContent as J,TabsList as K,TabsTrigger as M}from"../packem_shared/Tabs-CXERaeAp.js";import{default as O}from"../packem_shared/Textarea-DvbSX13V.js";import{Tooltip as R,TooltipContent as U,TooltipTrigger as V}from"../packem_shared/Tooltip-tlBN-NdK.js";import{clsx as X}from"clsx";export{a as Alert,f as AlertDescription,p as AlertTitle,s as Badge,x as Button,n as Card,i as CardContent,u as CardDescription,T as CardFooter,C as CardHeader,g as CardTitle,b as Icon,v as Input,S as Label,D as Popover,I as PopoverClose,L as PopoverContent,h as PopoverTrigger,w as Progress,H as Separator,q as Skeleton,z as Switch,G as Tabs,J as TabsContent,K as TabsList,M as TabsTrigger,O as Textarea,R as Tooltip,U as TooltipContent,V as TooltipTrigger,X as clsx,e as cn};
@@ -1,8 +1,8 @@
1
1
  import type { ClassValue } from "clsx";
2
2
  /**
3
- * Merge Tailwind CSS classes with clsx and tailwind-merge
4
- * @param inputs Class values to merge
5
- * @returns Merged class string
3
+ * Merges Tailwind CSS classes using clsx and tailwind-merge.
4
+ * @param inputs Class values to merge.
5
+ * @returns Merged class string.
6
6
  */
7
7
  declare const cn: (...inputs: ClassValue[]) => string;
8
8
  export default cn;
@@ -0,0 +1,24 @@
1
+ import generate from "@babel/generator";
2
+ declare const gen: typeof generate;
3
+ export declare const SOURCE_ATTR = "data-vdt-source";
4
+ export interface InjectSourceIgnore {
5
+ /** Component names or patterns to skip. */
6
+ components?: (RegExp | string)[];
7
+ /** File paths or patterns to skip. */
8
+ files?: (RegExp | string)[];
9
+ }
10
+ /**
11
+ * Inject `data-vdt-source="<file>:<line>:<col>"` into every JSX opening element
12
+ * in the given source code, enabling the inspector to resolve elements back to
13
+ * their source location.
14
+ *
15
+ * Pass `originalCode` when the received `code` may have been pre-processed by an
16
+ * SSR pipeline (e.g. Vinxi / TanStack Start) that shifts JSX line numbers relative
17
+ * to the source file on disk. Positions are then read from `originalCode` but
18
+ * injected into `code`'s AST, ensuring server and client produce identical
19
+ * attribute values and React hydration never reports a mismatch.
20
+ *
21
+ * Returns `undefined` when the file was skipped or contained no JSX to transform.
22
+ */
23
+ export declare const addSourceToJsx: (code: string, id: string, ignore?: InjectSourceIgnore, originalCode?: string) => ReturnType<typeof gen> | undefined;
24
+ export {};
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Returns true if `value` matches any of the given patterns.
3
+ * Strings are treated as glob patterns; RegExps are tested directly.
4
+ */
5
+ declare const matcher: (patterns: (RegExp | string)[], value: string) => boolean;
6
+ export default matcher;
@@ -1,5 +1,6 @@
1
1
  import type { Plugin } from "vite";
2
2
  import type { DevToolbarApp, ServerFunctions } from "./types/index.d.ts";
3
+ import type { InjectSourceIgnore } from "./vite/inject-source.d.ts";
3
4
  /**
4
5
  * Dev toolbar plugin options
5
6
  */
@@ -9,7 +10,7 @@ export interface DevToolbarOptions {
9
10
  * useful for projects that do not use html file as an entry
10
11
  *
11
12
  * WARNING: only set this if you know exactly what it does.
12
- * @default ''
13
+ * @default Empty string (disabled).
13
14
  */
14
15
  appendTo?: string | RegExp;
15
16
  /**
@@ -18,10 +19,12 @@ export interface DevToolbarOptions {
18
19
  apps?: {
19
20
  [key: string]: boolean | undefined;
20
21
  a11y?: boolean;
22
+ inspector?: boolean;
21
23
  moduleGraph?: boolean;
22
24
  performance?: boolean;
23
25
  seo?: boolean;
24
26
  settings?: boolean;
27
+ tailwind?: boolean;
25
28
  timeline?: boolean;
26
29
  viteConfig?: boolean;
27
30
  };
@@ -38,20 +41,47 @@ export interface DevToolbarOptions {
38
41
  * Whether toolbar is visible by default
39
42
  */
40
43
  defaultVisible?: boolean;
44
+ /**
45
+ * The editor to open when clicking "Open in editor" in the inspector.
46
+ * Accepts any value supported by `launch-editor` — an editor name/alias
47
+ * (e.g. `"code"`, `"webstorm"`, `"vim"`, `"atom"`) or the full path to
48
+ * the editor executable.
49
+ *
50
+ * If omitted, `launch-editor` auto-detects the editor from the `EDITOR`
51
+ * / `VISUAL` environment variables or from the currently running IDE
52
+ * process detected on the OS process list.
53
+ * @example "webstorm"
54
+ * @example "code"
55
+ */
56
+ editor?: string;
41
57
  /**
42
58
  * Initial panel height as a percentage of the viewport height (20–95).
43
59
  * @default 60
44
60
  */
45
61
  height?: number;
62
+ /**
63
+ * Inject `data-vdt-source="&lt;file>:&lt;line>:&lt;col>"` attributes into every JSX
64
+ * opening element during development. This lets the inspector jump directly
65
+ * to the source file when an element is clicked.
66
+ *
67
+ * Only active when `mode === 'development'`. Set `enabled: false` to opt out.
68
+ * Use `ignore.files` / `ignore.components` to exclude specific paths or
69
+ * component names (strings are treated as glob patterns).
70
+ * @default { enabled: true }
71
+ */
72
+ injectSource?: {
73
+ enabled?: boolean;
74
+ ignore?: InjectSourceIgnore;
75
+ };
46
76
  /**
47
77
  * Keyboard shortcut bindings.
48
78
  * These are project-level defaults; users can still override them via the
49
79
  * Settings app (stored in localStorage).
50
80
  */
51
81
  keybindings?: {
52
- /** Close active app / panel. @default "Escape" */
82
+ /** Close active app / panel. \@default "Escape" */
53
83
  close?: string;
54
- /** Toggle the DevTools panel open/closed. @default "Alt+Shift+D" */
84
+ /** Toggle the DevTools panel open/closed. \@default "Alt+Shift+D" */
55
85
  toggle?: string;
56
86
  };
57
87
  /**
@@ -77,6 +107,14 @@ export interface DevToolbarOptions {
77
107
  * @default false
78
108
  */
79
109
  reduceMotion?: boolean;
110
+ /**
111
+ * Strip all \@visulima/dev-toolbar imports and virtual modules when building
112
+ * for production (i.e. when `command !== 'serve'` or `mode === 'production'`).
113
+ * This guarantees the toolbar never ends up in a production bundle even if the
114
+ * user accidentally imports our package in application code.
115
+ * @default true
116
+ */
117
+ removeDevtoolsOnBuild?: boolean;
80
118
  /**
81
119
  * Only activate the toolbar when the URL contains a specific query parameter.
82
120
  * Useful for staging/production environments where you want opt-in debugging.
@@ -101,6 +139,6 @@ export interface DevToolbarOptions {
101
139
  width?: number;
102
140
  }
103
141
  /**
104
- * Dev toolbar Vite plugin
142
+ * Returns the Vite plugin array for the dev toolbar.
105
143
  */
106
- export declare const devToolbar: (options?: DevToolbarOptions) => Plugin;
144
+ export declare const devToolbar: (options?: DevToolbarOptions) => Plugin[];
@@ -1,2 +1,2 @@
1
- var g=Object.defineProperty;var p=(e,r)=>g(e,"name",{value:r,configurable:!0});import{createRequire as b}from"node:module";import{normalizePath as $}from"vite";import{createServerRPCContext as j}from"./packem_shared/createServerRPCContext-BVSesPXu.js";const h=b(import.meta.url),s=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,u=p(e=>{if(typeof s<"u"&&s.versions&&s.versions.node){const[r,o]=s.versions.node.split(".").map(Number);if(r>22||r===22&&o>=3||r===20&&o>=16)return s.getBuiltinModule(e)}return h(e)},"__cjs_getBuiltinModule"),y=u("node:fs"),_=u("node:path"),{fileURLToPath:T}=u("node:url");var P=Object.defineProperty,c=p((e,r)=>P(e,"name",{value:r,configurable:!0}),"o");const F=c(()=>$(_.dirname(T(import.meta.url))),"getDevToolbarPath"),C=c(e=>e.replace(/\?.*$/,""),"removeUrlQuery"),d="?__visulima-dev-toolbar-resource",f="virtual:visulima-dev-toolbar-options",m=`\0${f}`,a="virtual:visulima-dev-toolbar-path:",x=c((e={})=>{const r=F();let o;return{apply:"serve",configResolved(t){o=t},configureServer(t){j(t,e.serverFunctions),t.ws.on("connection",()=>{t.ws.send({event:"dev-toolbar:init",type:"custom"})})},enforce:"pre",async load(t){if(t===m)return`export default ${JSON.stringify({apps:{a11y:e.apps?.a11y??!0,moduleGraph:e.apps?.moduleGraph??!0,performance:e.apps?.performance??!0,seo:e.apps?.seo??!0,settings:e.apps?.settings??!0,timeline:e.apps?.timeline??!0,viteConfig:e.apps?.viteConfig??!0},base:o.base,closeOnOutsideClick:e.closeOnOutsideClick??!0,defaultVisible:e.defaultVisible??!0,height:e.height??60,keybindings:e.keybindings??{},minimizePanelInactive:e.minimizePanelInactive??5e3,placement:e.placement??"bottom-center",position:e.position??"bottom",reduceMotion:e.reduceMotion??!1,requireUrlFlag:e.requireUrlFlag??!1,urlFlagName:e.urlFlagName??"devtools",width:e.width??80})};`;if(t.endsWith(d)){const n=C(t);return this.addWatchFile(n),await y.promises.readFile(n,"utf8")}},name:"@visulima/dev-toolbar",resolveId(t){if(t===f)return m;if(t.startsWith(a))return`${t.replace(a,`${r}/`)}${d}`},transform(t,n,v){if(v?.ssr)return;const{appendTo:i}=e,l=n.split("?",2)[0];if(i&&l&&(typeof i=="string"&&l.endsWith(i)||i instanceof RegExp&&i.test(l)))return`import '${a}client/overlay.js';
2
- ${t}`},transformIndexHtml(){return e.appendTo?void 0:{html:"",tags:[{attrs:{src:`${o.base||"/"}@id/${a}client/overlay.js`,type:"module"},injectTo:"head-prepend",tag:"script"}]}}}},"devToolbar");export{x as devToolbar};
1
+ var j=Object.defineProperty;var c=(e,o)=>j(e,"name",{value:o,configurable:!0});import{createRequire as $}from"node:module";import{normalizePath as F}from"vite";import{createServerRPCContext as C}from"./packem_shared/createServerRPCContext-CEm1Ymkn.js";const w=$(import.meta.url),n=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,v=c(e=>{if(typeof n<"u"&&n.versions&&n.versions.node){const[o,u]=n.versions.node.split(".").map(Number);if(o>22||o===22&&u>=3||o===20&&u>=16)return n.getBuiltinModule(e)}return w(e)},"__cjs_getBuiltinModule"),T=v("node:fs"),P=v("node:path"),{fileURLToPath:x}=v("node:url");var O=Object.defineProperty,f=c((e,o)=>O(e,"name",{value:o,configurable:!0}),"s");const R=f(()=>F(P.dirname(x(import.meta.url))),"getDevToolbarPath"),I=/\?.+$/,S=/\/dist\/|\/build\//,q=/\.[jt]sx$/,W=f(e=>e.replace(I,""),"removeUrlQuery"),g="?__visulima-dev-toolbar-resource",m="virtual:visulima-dev-toolbar-options",h=`\0${m}`,l="virtual:visulima-dev-toolbar-path:",y="\0__visulima-dev-toolbar-empty",z=f((e={})=>{const o=R(),u=e.removeDevtoolsOnBuild??!0,_=e.injectSource?.enabled??!0;let d;return[{apply:"serve",configResolved(t){d=t},configureServer(t){C(t,e.serverFunctions,{editor:e.editor}),t.ws.on("connection",()=>{t.ws.send({event:"dev-toolbar:init",type:"custom"})})},enforce:"pre",async load(t){if(t===h)return`export default ${JSON.stringify({apps:{a11y:e.apps?.a11y??!0,inspector:e.apps?.inspector??!0,moduleGraph:e.apps?.moduleGraph??!0,performance:e.apps?.performance??!0,seo:e.apps?.seo??!0,settings:e.apps?.settings??!0,tailwind:e.apps?.tailwind??!0,timeline:e.apps?.timeline??!0,viteConfig:e.apps?.viteConfig??!0},base:d.base,closeOnOutsideClick:e.closeOnOutsideClick??!0,defaultVisible:e.defaultVisible??!0,height:e.height??60,keybindings:e.keybindings??{},minimizePanelInactive:e.minimizePanelInactive??5e3,placement:e.placement??"bottom-center",position:e.position??"bottom",reduceMotion:e.reduceMotion??!1,requireUrlFlag:e.requireUrlFlag??!1,urlFlagName:e.urlFlagName??"devtools",width:e.width??80})};`;if(t.endsWith(g)){const r=W(t);return this.addWatchFile(r),await T.promises.readFile(r,"utf8")}},name:"@visulima/dev-toolbar",resolveId(t){if(t===m)return h;if(t.startsWith(l))return`${t.replace(l,`${o}/`)}${g}`},transform(t,r,s){if(s?.ssr)return;const{appendTo:i}=e,a=r.split("?",2)[0];if(i&&a&&(typeof i=="string"&&a.endsWith(i)||i instanceof RegExp&&i.test(a)))return`import '${l}client/overlay.js';
2
+ ${t}`},transformIndexHtml(){return e.appendTo?void 0:{html:"",tags:[{attrs:{src:`${d.base||"/"}@id/${l}client/overlay.js`,type:"module"},injectTo:"head-prepend",tag:"script"}]}}},{enforce:"pre",name:"@visulima/dev-toolbar:inject-source",async transform(t,r){if(!_||d.mode!=="development"||r.includes("node_modules")||r.includes("?raw")||S.test(r)||!q.test(r.split("?")[0]??""))return;const{readFile:s}=await import("node:fs/promises");let i;try{const b=await s(r.split("?")[0]??r,"utf8");b!==t&&(i=b)}catch{}const{addSourceToJsx:a}=await import("./packem_chunks/inject-source.js"),p=a(t,r,e.injectSource?.ignore,i);if(p)return{code:p.code??t,map:p.map??void 0}}},{apply(t,{command:r,mode:s}){return u&&(r!=="serve"||s==="production")},load(t){if(t===y)return"export default {};"},name:"@visulima/dev-toolbar:remove-on-build",resolveId(t){if(t===m||t.startsWith(l))return y}}]},"devToolbar");export{z as devToolbar};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@visulima/dev-toolbar",
3
- "version": "1.0.0-alpha.2",
3
+ "version": "1.0.0-alpha.4",
4
4
  "description": "Devtools is a set of tools for building advanced devtools for your application",
5
5
  "keywords": [
6
6
  "visulima",
@@ -49,6 +49,14 @@
49
49
  "types": "./dist/apps/a11y/index.d.ts",
50
50
  "default": "./dist/apps/a11y/index.js"
51
51
  },
52
+ "./apps/inspector": {
53
+ "types": "./dist/apps/inspector/index.d.ts",
54
+ "default": "./dist/apps/inspector/index.js"
55
+ },
56
+ "./apps/tailwind": {
57
+ "types": "./dist/apps/tailwind/index.d.ts",
58
+ "default": "./dist/apps/tailwind/index.js"
59
+ },
52
60
  "./apps/module-graph": {
53
61
  "types": "./dist/apps/module-graph/index.d.ts",
54
62
  "default": "./dist/apps/module-graph/index.js"
@@ -81,6 +89,10 @@
81
89
  "types": "./dist/toolbar/index.d.ts",
82
90
  "default": "./dist/toolbar/index.js"
83
91
  },
92
+ "./ui": {
93
+ "types": "./dist/ui/index.d.ts",
94
+ "default": "./dist/ui/index.js"
95
+ },
84
96
  "./package.json": "./package.json"
85
97
  },
86
98
  "files": [
@@ -89,17 +101,23 @@
89
101
  "CHANGELOG.md"
90
102
  ],
91
103
  "dependencies": {
104
+ "@babel/generator": "^7.29.1",
105
+ "@babel/parser": "^7.29.0",
106
+ "@babel/traverse": "^7.29.0",
107
+ "@babel/types": "^7.29.0",
108
+ "@floating-ui/dom": "^1.7.6",
92
109
  "axe-core": "^4.11.1",
93
110
  "clsx": "^2.1.1",
111
+ "launch-editor": "^2.13.1",
112
+ "lucide-static": "^0.576.0",
94
113
  "preact": "^10.28.4",
95
- "tailwind-merge": "^3.5.0",
96
- "tw-animate-css": "1.4.0"
114
+ "tailwind-merge": "^3.5.0"
97
115
  },
98
116
  "peerDependencies": {
99
- "vite": "^6 || ^7"
117
+ "vite": "^6 || ^7 || ^8"
100
118
  },
101
119
  "engines": {
102
- "node": ">=22.21 <26"
120
+ "node": ">=22.21"
103
121
  },
104
122
  "publishConfig": {
105
123
  "access": "public",
@@ -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,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";