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

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 (158) hide show
  1. package/CHANGELOG.md +223 -0
  2. package/LICENSE.md +188 -0
  3. package/README.md +304 -29
  4. package/bin/mcp.js +29 -0
  5. package/dist/apps/a11y/a11y-app.d.ts +4 -0
  6. package/dist/apps/a11y/a11y-store.d.ts +42 -0
  7. package/dist/apps/a11y/a11y-tooltip.d.ts +10 -0
  8. package/dist/apps/a11y/index.d.ts +3 -0
  9. package/dist/apps/a11y/index.js +21 -0
  10. package/dist/apps/annotations/annotations-app.d.ts +4 -0
  11. package/dist/apps/annotations/index.d.ts +3 -0
  12. package/dist/apps/annotations/index.js +18 -0
  13. package/dist/apps/assets/assets-app.d.ts +4 -0
  14. package/dist/apps/assets/index.d.ts +3 -0
  15. package/dist/apps/assets/index.js +16 -0
  16. package/dist/apps/inspector/a11y-capture.d.ts +12 -0
  17. package/dist/apps/inspector/annotation-overlay.d.ts +55 -0
  18. package/dist/apps/inspector/annotation-settings.d.ts +33 -0
  19. package/dist/apps/inspector/element-utils.d.ts +115 -0
  20. package/dist/apps/inspector/freeze-animations.d.ts +22 -0
  21. package/dist/apps/inspector/index.d.ts +3 -0
  22. package/dist/apps/inspector/index.js +30 -0
  23. package/dist/apps/inspector/inspector-app.d.ts +14 -0
  24. package/dist/apps/inspector/rulers.d.ts +14 -0
  25. package/dist/apps/inspector/theme-palette.d.ts +34 -0
  26. package/dist/apps/module-graph/index.d.ts +3 -0
  27. package/dist/apps/module-graph/index.js +20 -0
  28. package/dist/apps/module-graph/module-graph-app.d.ts +4 -0
  29. package/dist/apps/performance/index.d.ts +3 -0
  30. package/dist/apps/performance/index.js +17 -0
  31. package/dist/apps/performance/performance-app.d.ts +4 -0
  32. package/dist/apps/performance/performance-tooltip.d.ts +4 -0
  33. package/dist/apps/seo/index.d.ts +3 -0
  34. package/dist/apps/seo/index.js +17 -0
  35. package/dist/apps/seo/seo-app.d.ts +4 -0
  36. package/dist/apps/settings/index.d.ts +3 -0
  37. package/dist/apps/settings/index.js +17 -0
  38. package/dist/apps/settings/settings-app.d.ts +4 -0
  39. package/dist/apps/tailwind/index.d.ts +3 -0
  40. package/dist/apps/tailwind/index.js +7 -0
  41. package/dist/apps/tailwind/tailwind-app.d.ts +4 -0
  42. package/dist/apps/timeline/index.d.ts +3 -0
  43. package/dist/apps/timeline/index.js +18 -0
  44. package/dist/apps/timeline/timeline-app.d.ts +4 -0
  45. package/dist/apps/vite-config/index.d.ts +3 -0
  46. package/dist/apps/vite-config/index.js +16 -0
  47. package/dist/apps/vite-config/vite-config-app.d.ts +4 -0
  48. package/dist/client/overlay.d.ts +1 -0
  49. package/dist/client/overlay.js +1 -0
  50. package/dist/hooks/create-hook.d.ts +12 -0
  51. package/dist/hooks/events.d.ts +7 -0
  52. package/dist/hooks/global-hook.d.ts +15 -0
  53. package/dist/hooks/index.d.ts +6 -0
  54. package/dist/index.d.ts +8 -0
  55. package/dist/index.js +1 -0
  56. package/dist/mcp/server.d.ts +12 -0
  57. package/dist/mcp/server.js +1 -0
  58. package/dist/packem_chunks/inject-source.js +9 -0
  59. package/dist/packem_shared/Alert-D2CvX4fw.js +1 -0
  60. package/dist/packem_shared/Badge-BEgU04nl.js +1 -0
  61. package/dist/packem_shared/Button-Bkx66Co7.js +1 -0
  62. package/dist/packem_shared/Card-CJa4vHVc.js +1 -0
  63. package/dist/packem_shared/Icon-B6UHkC0o.js +1 -0
  64. package/dist/packem_shared/Input-Cs6aduTi.js +1 -0
  65. package/dist/packem_shared/Label-DyCng4Cp.js +1 -0
  66. package/dist/packem_shared/Popover-BtFVaZYg.js +1 -0
  67. package/dist/packem_shared/Progress-DN6zn-0l.js +1 -0
  68. package/dist/packem_shared/Select-DgQ4ss-s.js +1 -0
  69. package/dist/packem_shared/Separator-D38mKeZv.js +1 -0
  70. package/dist/packem_shared/Skeleton-Dv-tcA1P.js +1 -0
  71. package/dist/packem_shared/Switch-C3NTpeoR.js +1 -0
  72. package/dist/packem_shared/Tabs-DKWMiawt.js +1 -0
  73. package/dist/packem_shared/Textarea-Yfg3dLZi.js +1 -0
  74. package/dist/packem_shared/Tooltip-CioncSXj.js +1 -0
  75. package/dist/packem_shared/annotation-settings-Bv0TH4WI.js +1 -0
  76. package/dist/packem_shared/annotation-store-bLQRYMaI.js +1 -0
  77. package/dist/packem_shared/clsx-wGlvpUfw.js +1 -0
  78. package/dist/packem_shared/createClientRPCContext-DgRxrllw.js +1 -0
  79. package/dist/packem_shared/createDevToolbarHook-4bZZiHPI.js +1 -0
  80. package/dist/packem_shared/createServerRPCContext-D-yZrEjs.js +1 -0
  81. package/dist/packem_shared/getTimelineStore-B1cfjWV8.js +1 -0
  82. package/dist/packem_shared/loadSettings-hvjR4fcS.js +1 -0
  83. package/dist/packem_shared/setupGlobalHook-CCf9Logv.js +1 -0
  84. package/dist/packem_shared/sharedToolbarStylesheet-CaTdYhVe.js +2 -0
  85. package/dist/packem_shared/store-DaUtLjf3.js +1 -0
  86. package/dist/packem_shared/use-frame-state-CxrlPUM5.js +1 -0
  87. package/dist/packem_shared/use-theme-zpm4zmqP.js +1 -0
  88. package/dist/performance/monitor.d.ts +116 -0
  89. package/dist/rpc/client.d.ts +9 -0
  90. package/dist/rpc/functions/annotations.d.ts +28 -0
  91. package/dist/rpc/functions/assets.d.ts +16 -0
  92. package/dist/rpc/functions/module-graph.d.ts +17 -0
  93. package/dist/rpc/functions/open-in-editor.d.ts +16 -0
  94. package/dist/rpc/functions/tailwind-config.d.ts +15 -0
  95. package/dist/rpc/functions/vite-config.d.ts +83 -0
  96. package/dist/rpc/server.d.ts +15 -0
  97. package/dist/store/annotation-store.d.ts +41 -0
  98. package/dist/timeline/capture.d.ts +8 -0
  99. package/dist/timeline/index.d.ts +8 -0
  100. package/dist/timeline/store.d.ts +42 -0
  101. package/dist/toolbar/app-manager.d.ts +104 -0
  102. package/dist/toolbar/components/app-button.d.ts +18 -0
  103. package/dist/toolbar/components/app-canvas.d.ts +12 -0
  104. package/dist/toolbar/components/app-tooltip-overlay.d.ts +12 -0
  105. package/dist/toolbar/components/first-visit-hint.d.ts +15 -0
  106. package/dist/toolbar/components/index.d.ts +4 -0
  107. package/dist/toolbar/components/pinned-tooltip-card.d.ts +22 -0
  108. package/dist/toolbar/components/toolbar-bar.d.ts +9 -0
  109. package/dist/toolbar/components/toolbar-container.d.ts +49 -0
  110. package/dist/toolbar/components/vite-overlay-button.d.ts +14 -0
  111. package/dist/toolbar/context/index.d.ts +2 -0
  112. package/dist/toolbar/context/toolbar-context.d.ts +107 -0
  113. package/dist/toolbar/global-api.d.ts +24 -0
  114. package/dist/toolbar/helpers.d.ts +8 -0
  115. package/dist/toolbar/hooks/index.d.ts +10 -0
  116. package/dist/toolbar/hooks/use-apps.d.ts +15 -0
  117. package/dist/toolbar/hooks/use-frame-state.d.ts +110 -0
  118. package/dist/toolbar/hooks/use-panel-visible.d.ts +23 -0
  119. package/dist/toolbar/hooks/use-position.d.ts +24 -0
  120. package/dist/toolbar/hooks/use-theme.d.ts +15 -0
  121. package/dist/toolbar/hooks/use-toolbar.d.ts +16 -0
  122. package/dist/toolbar/index.d.ts +50 -0
  123. package/dist/toolbar/index.js +21 -0
  124. package/dist/toolbar/settings.d.ts +17 -0
  125. package/dist/toolbar/stylesheet.d.ts +3 -0
  126. package/dist/toolbar/utils/index.d.ts +12 -0
  127. package/dist/types/annotations.d.ts +156 -0
  128. package/dist/types/app.d.ts +175 -0
  129. package/dist/types/global-api.d.ts +91 -0
  130. package/dist/types/hooks.d.ts +86 -0
  131. package/dist/types/index.d.ts +13 -0
  132. package/dist/types/messaging.d.ts +43 -0
  133. package/dist/types/rpc.d.ts +137 -0
  134. package/dist/types/timeline.d.ts +62 -0
  135. package/dist/types/toolbar.d.ts +56 -0
  136. package/dist/ui/components/alert.d.ts +19 -0
  137. package/dist/ui/components/badge.d.ts +9 -0
  138. package/dist/ui/components/button.d.ts +11 -0
  139. package/dist/ui/components/card.d.ts +16 -0
  140. package/dist/ui/components/icon.d.ts +19 -0
  141. package/dist/ui/components/input.d.ts +7 -0
  142. package/dist/ui/components/label.d.ts +7 -0
  143. package/dist/ui/components/popover.d.ts +27 -0
  144. package/dist/ui/components/progress.d.ts +7 -0
  145. package/dist/ui/components/select.d.ts +54 -0
  146. package/dist/ui/components/separator.d.ts +8 -0
  147. package/dist/ui/components/skeleton.d.ts +6 -0
  148. package/dist/ui/components/switch.d.ts +11 -0
  149. package/dist/ui/components/tabs.d.ts +28 -0
  150. package/dist/ui/components/textarea.d.ts +7 -0
  151. package/dist/ui/components/tooltip.d.ts +19 -0
  152. package/dist/ui/index.d.ts +18 -0
  153. package/dist/ui/index.js +1 -0
  154. package/dist/vite/inject-source.d.ts +24 -0
  155. package/dist/vite/matcher.d.ts +6 -0
  156. package/dist/vite-plugin.d.ts +149 -0
  157. package/dist/vite-plugin.js +5 -0
  158. package/package.json +144 -7
@@ -0,0 +1,11 @@
1
+ import type { ComponentChildren, JSX } from "preact";
2
+ type ButtonSize = "default" | "icon" | "lg" | "sm";
3
+ type ButtonVariant = "default" | "destructive" | "ghost" | "link" | "outline" | "secondary";
4
+ interface ButtonProps extends JSX.ButtonHTMLAttributes {
5
+ children?: ComponentChildren;
6
+ class?: string;
7
+ size?: ButtonSize;
8
+ variant?: ButtonVariant;
9
+ }
10
+ declare const Button: ({ children, class: className, size, type, variant, ...rest }: ButtonProps) => JSX.Element;
11
+ export default Button;
@@ -0,0 +1,16 @@
1
+ import type { ComponentChildren, JSX } from "preact";
2
+ interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
3
+ children?: ComponentChildren;
4
+ class?: string;
5
+ }
6
+ interface CardTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
7
+ children?: ComponentChildren;
8
+ class?: string;
9
+ }
10
+ declare const Card: ({ children, class: className, ...rest }: CardProps) => JSX.Element;
11
+ declare const CardHeader: ({ children, class: className, ...rest }: CardProps) => JSX.Element;
12
+ declare const CardTitle: ({ children, class: className, ...rest }: CardTitleProps) => JSX.Element;
13
+ declare const CardDescription: ({ children, class: className, ...rest }: CardProps) => JSX.Element;
14
+ declare const CardContent: ({ children, class: className, ...rest }: CardProps) => JSX.Element;
15
+ declare const CardFooter: ({ children, class: className, ...rest }: CardProps) => JSX.Element;
16
+ export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
@@ -0,0 +1,19 @@
1
+ import type { ComponentChildren } from "preact";
2
+ interface IconProps {
3
+ class?: string;
4
+ size?: number;
5
+ /**
6
+ * CSS data-URI from a `?data-uri&amp;encoding=css` lucide-static import.
7
+ * Uses CSS mask-image so the icon inherits currentColor from the parent.
8
+ */
9
+ src: string;
10
+ }
11
+ /**
12
+ * Renders a lucide-static icon using CSS mask-image.
13
+ * Color is driven by the parent element's `color` property (currentColor).
14
+ * @example
15
+ * import xIcon from "lucide-static/icons/x.d.ts";
16
+ * &lt;Icon src={xIcon} size={13} />
17
+ */
18
+ declare const Icon: ({ class: className, size, src }: IconProps) => ComponentChildren;
19
+ export default Icon;
@@ -0,0 +1,7 @@
1
+ import type { JSX } from "preact";
2
+ import type { ForwardRefExoticComponent, RefAttributes } from "preact/compat";
3
+ interface InputProps extends JSX.InputHTMLAttributes {
4
+ class?: string;
5
+ }
6
+ declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
7
+ export default Input;
@@ -0,0 +1,7 @@
1
+ import type { ComponentChildren, JSX } from "preact";
2
+ interface LabelProps extends JSX.LabelHTMLAttributes {
3
+ children?: ComponentChildren;
4
+ class?: string;
5
+ }
6
+ declare const Label: ({ children, class: className, ...rest }: LabelProps) => JSX.Element;
7
+ export default Label;
@@ -0,0 +1,27 @@
1
+ import type { ComponentChildren, JSX } from "preact";
2
+ interface PopoverProps {
3
+ children: ComponentChildren;
4
+ defaultOpen?: boolean;
5
+ onOpenChange?: (open: boolean) => void;
6
+ open?: boolean;
7
+ }
8
+ interface PopoverTriggerProps extends JSX.ButtonHTMLAttributes {
9
+ children: ComponentChildren;
10
+ class?: string;
11
+ }
12
+ interface PopoverContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
13
+ align?: "center" | "end" | "start";
14
+ children: ComponentChildren;
15
+ class?: string;
16
+ side?: "bottom" | "left" | "right" | "top";
17
+ sideOffset?: number;
18
+ }
19
+ interface PopoverCloseProps extends JSX.ButtonHTMLAttributes {
20
+ children?: ComponentChildren;
21
+ class?: string;
22
+ }
23
+ declare const Popover: ({ children, defaultOpen, onOpenChange, open }: PopoverProps) => JSX.Element;
24
+ declare const PopoverTrigger: ({ children, class: className, ...rest }: PopoverTriggerProps) => JSX.Element;
25
+ declare const PopoverContent: ({ align, children, class: className, side, sideOffset, ...rest }: PopoverContentProps) => JSX.Element | undefined;
26
+ declare const PopoverClose: ({ children, class: className, ...rest }: PopoverCloseProps) => JSX.Element;
27
+ export { Popover, PopoverClose, PopoverContent, PopoverTrigger };
@@ -0,0 +1,7 @@
1
+ import type { JSX } from "preact";
2
+ interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
3
+ class?: string;
4
+ value?: number;
5
+ }
6
+ declare const Progress: ({ class: className, value, ...rest }: ProgressProps) => JSX.Element;
7
+ export default Progress;
@@ -0,0 +1,54 @@
1
+ import type { ComponentChildren, JSX } from "preact";
2
+ interface SelectContextValue {
3
+ highlightedValue: string | null;
4
+ instanceId: string;
5
+ onSelect: (value: string) => void;
6
+ open: boolean;
7
+ search: string;
8
+ setHighlightedValue: (v: string | null) => void;
9
+ setOpen: (v: boolean) => void;
10
+ setSearch: (v: string) => void;
11
+ triggerRef: {
12
+ current: HTMLButtonElement | null;
13
+ };
14
+ value: string;
15
+ }
16
+ declare const useSelectContext: () => SelectContextValue;
17
+ interface SelectOption {
18
+ label: string;
19
+ value: string;
20
+ }
21
+ interface SelectProps {
22
+ children: ComponentChildren;
23
+ onValueChange?: (value: string) => void;
24
+ value?: string;
25
+ }
26
+ interface SelectTriggerProps extends Omit<JSX.ButtonHTMLAttributes, "children"> {
27
+ children: ComponentChildren;
28
+ class?: string;
29
+ }
30
+ interface SelectContentProps {
31
+ align?: "center" | "end" | "start";
32
+ children: ComponentChildren;
33
+ class?: string;
34
+ searchable?: boolean;
35
+ side?: "bottom" | "top";
36
+ sideOffset?: number;
37
+ }
38
+ interface SelectItemProps {
39
+ children: ComponentChildren;
40
+ class?: string;
41
+ value: string;
42
+ }
43
+ interface SelectValueProps {
44
+ class?: string;
45
+ options: SelectOption[];
46
+ placeholder?: string;
47
+ }
48
+ declare const Select: ({ children, onValueChange, value }: SelectProps) => JSX.Element;
49
+ declare const SelectTrigger: ({ children, class: className, ...rest }: SelectTriggerProps) => JSX.Element;
50
+ declare const SelectValue: ({ class: className, options, placeholder }: SelectValueProps) => JSX.Element;
51
+ declare const SelectContent: ({ align, children, class: className, searchable, side, sideOffset, }: SelectContentProps) => JSX.Element | undefined;
52
+ declare const SelectItem: ({ children, class: className, value: itemValue }: SelectItemProps) => JSX.Element;
53
+ export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, useSelectContext };
54
+ export type { SelectOption };
@@ -0,0 +1,8 @@
1
+ import type { JSX } from "preact";
2
+ interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
3
+ class?: string;
4
+ decorative?: boolean;
5
+ orientation?: "horizontal" | "vertical";
6
+ }
7
+ declare const Separator: ({ class: className, decorative, orientation, ...rest }: SeparatorProps) => JSX.Element;
8
+ export default Separator;
@@ -0,0 +1,6 @@
1
+ import type { JSX } from "preact";
2
+ interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {
3
+ class?: string;
4
+ }
5
+ declare const Skeleton: ({ class: className, ...rest }: SkeletonProps) => JSX.Element;
6
+ export default Skeleton;
@@ -0,0 +1,11 @@
1
+ import type { JSX } from "preact";
2
+ interface SwitchProps extends Omit<JSX.ButtonHTMLAttributes, "onChange"> {
3
+ checked?: boolean;
4
+ class?: string;
5
+ defaultChecked?: boolean;
6
+ disabled?: boolean;
7
+ id?: string;
8
+ onCheckedChange?: (checked: boolean) => void;
9
+ }
10
+ declare const Switch: ({ checked, class: className, defaultChecked, disabled, id, onCheckedChange, ...rest }: SwitchProps) => JSX.Element;
11
+ export default Switch;
@@ -0,0 +1,28 @@
1
+ import type { ComponentChildren, JSX } from "preact";
2
+ interface TabsProps extends JSX.HTMLAttributes<HTMLDivElement> {
3
+ children?: ComponentChildren;
4
+ class?: string;
5
+ defaultValue?: string;
6
+ onValueChange?: (value: string) => void;
7
+ value?: string;
8
+ }
9
+ interface TabsListProps extends JSX.HTMLAttributes<HTMLDivElement> {
10
+ children?: ComponentChildren;
11
+ class?: string;
12
+ }
13
+ interface TabsTriggerProps extends JSX.ButtonHTMLAttributes {
14
+ children?: ComponentChildren;
15
+ class?: string;
16
+ disabled?: boolean;
17
+ value: string;
18
+ }
19
+ interface TabsContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
20
+ children?: ComponentChildren;
21
+ class?: string;
22
+ value: string;
23
+ }
24
+ declare const Tabs: ({ children, class: className, defaultValue, onValueChange, value, ...rest }: TabsProps) => JSX.Element;
25
+ declare const TabsList: ({ children, class: className, ...rest }: TabsListProps) => JSX.Element;
26
+ declare const TabsTrigger: ({ children, class: className, disabled, value, ...rest }: TabsTriggerProps) => JSX.Element;
27
+ declare const TabsContent: ({ children, class: className, value, ...rest }: TabsContentProps) => JSX.Element | undefined;
28
+ export { Tabs, TabsContent, TabsList, TabsTrigger };
@@ -0,0 +1,7 @@
1
+ import type { JSX } from "preact";
2
+ import type { ForwardRefExoticComponent, RefAttributes } from "preact/compat";
3
+ interface TextareaProps extends JSX.TextareaHTMLAttributes {
4
+ class?: string;
5
+ }
6
+ declare const Textarea: ForwardRefExoticComponent<RefAttributes<HTMLTextAreaElement> & TextareaProps>;
7
+ export default Textarea;
@@ -0,0 +1,19 @@
1
+ import type { ComponentChildren, JSX } from "preact";
2
+ interface TooltipProps {
3
+ children: ComponentChildren;
4
+ delayDuration?: number;
5
+ }
6
+ interface TooltipTriggerProps extends JSX.HTMLAttributes<HTMLSpanElement> {
7
+ children: ComponentChildren;
8
+ class?: string;
9
+ }
10
+ interface TooltipContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
11
+ children: ComponentChildren;
12
+ class?: string;
13
+ side?: "bottom" | "left" | "right" | "top";
14
+ sideOffset?: number;
15
+ }
16
+ declare const Tooltip: ({ children, delayDuration: _delayDuration }: TooltipProps) => JSX.Element;
17
+ declare const TooltipTrigger: ({ children, class: className, ...rest }: TooltipTriggerProps) => JSX.Element;
18
+ declare const TooltipContent: ({ children, class: className, side, sideOffset, ...rest }: TooltipContentProps) => JSX.Element | undefined;
19
+ export { Tooltip, TooltipContent, TooltipTrigger };
@@ -0,0 +1,18 @@
1
+ export { Alert, AlertDescription, AlertTitle } from "./components/alert.d.ts";
2
+ export { default as Badge } from "./components/badge.d.ts";
3
+ export { default as Button } from "./components/button.d.ts";
4
+ export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/card.d.ts";
5
+ export { default as Icon } from "./components/icon.d.ts";
6
+ export { default as Input } from "./components/input.d.ts";
7
+ export { default as Label } from "./components/label.d.ts";
8
+ export { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "./components/popover.d.ts";
9
+ export { default as Progress } from "./components/progress.d.ts";
10
+ export type { SelectOption } from "./components/select.d.ts";
11
+ export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, useSelectContext } from "./components/select.d.ts";
12
+ export { default as Separator } from "./components/separator.d.ts";
13
+ export { default as Skeleton } from "./components/skeleton.d.ts";
14
+ export { default as Switch } from "./components/switch.d.ts";
15
+ export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs.d.ts";
16
+ export { default as Textarea } from "./components/textarea.d.ts";
17
+ export { Tooltip, TooltipContent, TooltipTrigger } from "./components/tooltip.d.ts";
18
+ export { clsx } from "clsx";
@@ -0,0 +1 @@
1
+ import{Alert as o,AlertDescription as r,AlertTitle as a}from"../packem_shared/Alert-D2CvX4fw.js";import{default as p}from"../packem_shared/Badge-BEgU04nl.js";import{default as s}from"../packem_shared/Button-Bkx66Co7.js";import{Card as d,CardContent as m,CardDescription as n,CardFooter as i,CardHeader as u,CardTitle as T}from"../packem_shared/Card-CJa4vHVc.js";import{default as c}from"../packem_shared/Icon-B6UHkC0o.js";import{default as S}from"../packem_shared/Input-Cs6aduTi.js";import{default as P}from"../packem_shared/Label-DyCng4Cp.js";import{Popover as A,PopoverClose as I,PopoverContent as B,PopoverTrigger as D}from"../packem_shared/Popover-BtFVaZYg.js";import{default as h}from"../packem_shared/Progress-DN6zn-0l.js";import{Select as w,SelectContent as F,SelectItem as H,SelectTrigger as V,SelectValue as j,useSelectContext as q}from"../packem_shared/Select-DgQ4ss-s.js";import{default as z}from"../packem_shared/Separator-D38mKeZv.js";import{default as G}from"../packem_shared/Skeleton-Dv-tcA1P.js";import{default as K}from"../packem_shared/Switch-C3NTpeoR.js";import{Tabs as N,TabsContent as O,TabsList as Q,TabsTrigger as R}from"../packem_shared/Tabs-DKWMiawt.js";import{default as W}from"../packem_shared/Textarea-Yfg3dLZi.js";import{Tooltip as Y,TooltipContent as Z,TooltipTrigger as _}from"../packem_shared/Tooltip-CioncSXj.js";import{clsx as ee}from"../packem_shared/clsx-wGlvpUfw.js";export{o as Alert,r as AlertDescription,a as AlertTitle,p as Badge,s as Button,d as Card,m as CardContent,n as CardDescription,i as CardFooter,u as CardHeader,T as CardTitle,c as Icon,S as Input,P as Label,A as Popover,I as PopoverClose,B as PopoverContent,D as PopoverTrigger,h as Progress,w as Select,F as SelectContent,H as SelectItem,V as SelectTrigger,j as SelectValue,z as Separator,G as Skeleton,K as Switch,N as Tabs,O as TabsContent,Q as TabsList,R as TabsTrigger,W as Textarea,Y as Tooltip,Z as TooltipContent,_ as TooltipTrigger,ee as clsx,q as useSelectContext};
@@ -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="&lt;file>:&lt;line>:&lt;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;
@@ -0,0 +1,149 @@
1
+ import type { Plugin } from "vite";
2
+ import type { DevToolbarApp, ServerFunctions } from "./types/index.d.ts";
3
+ import type { InjectSourceIgnore } from "./vite/inject-source.d.ts";
4
+ /**
5
+ * Dev toolbar plugin options
6
+ */
7
+ export interface DevToolbarOptions {
8
+ /**
9
+ * append an import to the module id ending with `appendTo` instead of adding a script into body
10
+ * useful for projects that do not use html file as an entry
11
+ *
12
+ * WARNING: only set this if you know exactly what it does.
13
+ * @default Empty string (disabled).
14
+ */
15
+ appendTo?: string | RegExp;
16
+ /**
17
+ * Built-in apps to enable. All apps are disabled by default — only
18
+ * `viteConfig`, `settings`, and the "more" drawer are shown out of the box.
19
+ * Explicitly set an app to `true` to enable it.
20
+ * @example { inspector: true, seo: true }
21
+ */
22
+ apps?: {
23
+ [key: string]: boolean | undefined;
24
+ a11y?: boolean;
25
+ annotations?: boolean;
26
+ assets?: boolean;
27
+ inspector?: boolean;
28
+ moduleGraph?: boolean;
29
+ performance?: boolean;
30
+ seo?: boolean;
31
+ settings?: boolean;
32
+ tailwind?: boolean;
33
+ timeline?: boolean;
34
+ viteConfig?: boolean;
35
+ };
36
+ /**
37
+ * Whether clicking outside the DevTools panel closes it.
38
+ * @default true
39
+ */
40
+ closeOnOutsideClick?: boolean;
41
+ /**
42
+ * Custom apps to register
43
+ */
44
+ customApps?: DevToolbarApp[];
45
+ /**
46
+ * Whether toolbar is visible by default
47
+ */
48
+ defaultVisible?: boolean;
49
+ /**
50
+ * The editor to open when clicking "Open in editor" in the inspector.
51
+ * Accepts any value supported by `launch-editor` — an editor name/alias
52
+ * (e.g. `"code"`, `"webstorm"`, `"vim"`, `"atom"`) or the full path to
53
+ * the editor executable.
54
+ *
55
+ * If omitted, `launch-editor` auto-detects the editor from the `EDITOR`
56
+ * / `VISUAL` environment variables or from the currently running IDE
57
+ * process detected on the OS process list.
58
+ * @example "webstorm"
59
+ * @example "code"
60
+ */
61
+ editor?: string;
62
+ /**
63
+ * Initial panel height as a percentage of the viewport height (20–95).
64
+ * @default 60
65
+ */
66
+ height?: number;
67
+ /**
68
+ * Inject `data-vdt-source="&lt;file>:&lt;line>:&lt;col>"` attributes into every JSX
69
+ * opening element during development. This lets the inspector jump directly
70
+ * to the source file when an element is clicked.
71
+ *
72
+ * Only active when `mode === 'development'`. Set `enabled: false` to opt out.
73
+ * Use `ignore.files` / `ignore.components` to exclude specific paths or
74
+ * component names (strings are treated as glob patterns).
75
+ * @default { enabled: true }
76
+ */
77
+ injectSource?: {
78
+ enabled?: boolean;
79
+ ignore?: InjectSourceIgnore;
80
+ };
81
+ /**
82
+ * Keyboard shortcut bindings.
83
+ * These are project-level defaults; users can still override them via the
84
+ * Settings app (stored in localStorage).
85
+ */
86
+ keybindings?: {
87
+ /** Close active app / panel. \@default "Escape" */
88
+ close?: string;
89
+ /** Toggle the DevTools panel open/closed. \@default "Alt+Shift+D" */
90
+ toggle?: string;
91
+ };
92
+ /**
93
+ * Auto-hide the toolbar pill after this many milliseconds of inactivity.
94
+ * Set to -1 to never auto-hide.
95
+ * @default 5000
96
+ */
97
+ minimizePanelInactive?: number;
98
+ /**
99
+ * Toolbar placement (coarse shorthand — sets the edge and rough horizontal
100
+ * alignment of the toolbar pill).
101
+ * @default "bottom-center"
102
+ */
103
+ placement?: "bottom-left" | "bottom-center" | "bottom-right";
104
+ /**
105
+ * Which edge of the viewport the toolbar pill is anchored to.
106
+ * Takes precedence over the edge implied by `placement`.
107
+ * @default "bottom"
108
+ */
109
+ position?: "bottom" | "left" | "right" | "top";
110
+ /**
111
+ * Reduce motion for accessibility (disables all CSS animations).
112
+ * @default false
113
+ */
114
+ reduceMotion?: boolean;
115
+ /**
116
+ * Strip all \@visulima/dev-toolbar imports and virtual modules when building
117
+ * for production (i.e. when `command !== 'serve'` or `mode === 'production'`).
118
+ * This guarantees the toolbar never ends up in a production bundle even if the
119
+ * user accidentally imports our package in application code.
120
+ * @default true
121
+ */
122
+ removeDevtoolsOnBuild?: boolean;
123
+ /**
124
+ * Only activate the toolbar when the URL contains a specific query parameter.
125
+ * Useful for staging/production environments where you want opt-in debugging.
126
+ * @example requireUrlFlag: true, urlFlagName: 'debug' → toolbar only shows when URL has ?debug=true
127
+ * @default false
128
+ */
129
+ requireUrlFlag?: boolean;
130
+ /**
131
+ * Custom server RPC functions
132
+ */
133
+ serverFunctions?: Partial<ServerFunctions>;
134
+ /**
135
+ * The URL query parameter name used when requireUrlFlag is true.
136
+ * @default 'devtools'
137
+ */
138
+ urlFlagName?: string;
139
+ /**
140
+ * Initial panel width as a percentage of the viewport width (20–95).
141
+ * Applies when position is "left" or "right".
142
+ * @default 80
143
+ */
144
+ width?: number;
145
+ }
146
+ /**
147
+ * Returns the Vite plugin array for the dev toolbar.
148
+ */
149
+ export declare const devToolbar: (options?: DevToolbarOptions) => Plugin[];
@@ -0,0 +1,5 @@
1
+ var O=Object.defineProperty;var g=(e,r)=>O(e,"name",{value:r,configurable:!0});import{createRequire as x}from"node:module";import{normalizePath as I}from"vite";import{createServerRPCContext as k}from"./packem_shared/createServerRPCContext-D-yZrEjs.js";const F=x(import.meta.url),d=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,b=g(e=>{if(typeof d<"u"&&d.versions&&d.versions.node){const[r,f]=d.versions.node.split(".").map(Number);if(r>22||r===22&&f>=3||r===20&&f>=16)return d.getBuiltinModule(e)}return F(e)},"__cjs_getBuiltinModule"),P=b("node:fs"),T=b("node:path"),{fileURLToPath:S}=b("node:url");var R=Object.defineProperty,m=g((e,r)=>R(e,"name",{value:r,configurable:!0}),"u");const q=m(()=>I(T.dirname(S(import.meta.url))),"getDevToolbarPath"),D=/\?.+$/,M=/\/dist\/|\/build\//,N=/\.[jt]sx$/,W=m(e=>e.replace(D,""),"removeUrlQuery"),w="?__visulima-dev-toolbar-resource",h="virtual:visulima-dev-toolbar-options",_=`\0${h}`,u="virtual:visulima-dev-toolbar-path:",j="\0__visulima-dev-toolbar-empty",E=m((e={})=>{const r=q(),f=e.removeDevtoolsOnBuild??!0,$=e.injectSource?.enabled??!0;let v;return[{apply:"serve",config(){return{server:{watch:{ignored:["**/.devtoolbar/**"]}}}},configResolved(t){if(v=t,!e.appendTo){const o=new Set(t.plugins.map(n=>n.name));(o.has("tanstack-start-core:config")||o.has("tanstack-react-start:config"))&&(e.appendTo=/router\.tsx$/)}const a=/dev-toolbar[\\/]dist[\\/]|__visulima-dev-toolbar-resource/;for(const o of t.plugins){if(!o.name.includes("babel"))continue;const n=o.transform;if(!n)continue;const i=typeof n=="function"?n:typeof n=="object"&&"handler"in n?n.handler:void 0;if(typeof i!="function")continue;const s=m(function(l,c,...p){if(!a.test(c))return i.call(this,l,c,...p)},"wrapper");typeof n=="function"?o.transform=s:n.handler=s}},configureServer(t){k(t,e.serverFunctions,{editor:e.editor}),t.ws.on("connection",()=>{t.ws.send({event:"dev-toolbar:init",type:"custom"})}),t.middlewares.use("/__devtoolbar/events",async(a,o)=>{o.writeHead(200,{"Cache-Control":"no-cache",Connection:"keep-alive","Content-Type":"text/event-stream","X-Accel-Buffering":"no"});const n=m((c,p)=>{o.write(`event: ${c}
2
+ data: ${JSON.stringify(p)}
3
+
4
+ `)},"sendEvent");n("connected",{timestamp:Date.now()});const{watch:i}=await import("node:fs"),s=T.join(t.config.root,".devtoolbar","annotations.json");let l;try{l=i(s,{persistent:!1},c=>{c==="change"&&n("annotations.changed",{timestamp:Date.now()})}),l.on("error",()=>{})}catch{const{stat:c}=await import("node:fs/promises");let p=0;const C=setInterval(async()=>{try{const y=(await c(s)).mtimeMs;y!==p&&(p=y,n("annotations.changed",{timestamp:Date.now()}))}catch{}},2e3);a.on("close",()=>{clearInterval(C)});return}a.on("close",()=>{l?.close()})})},enforce:"pre",async load(t){if(t===_){const a=(e.customApps??[]).filter(o=>!o.component&&!o.init&&o.view?.type==="iframe").map(o=>({defaultOpen:o.defaultOpen,icon:o.icon,id:o.id,name:o.name,view:o.view}));return`export default ${JSON.stringify({apps:{a11y:e.apps?.a11y??!1,annotations:e.apps?.annotations??e.apps?.inspector??!1,assets:e.apps?.assets??!1,inspector:e.apps?.inspector??!1,moduleGraph:e.apps?.moduleGraph??!1,performance:e.apps?.performance??!1,seo:e.apps?.seo??!1,settings:e.apps?.settings??!0,tailwind:e.apps?.tailwind??!1,timeline:e.apps?.timeline??!1,viteConfig:e.apps?.viteConfig??!0},base:v.base,closeOnOutsideClick:e.closeOnOutsideClick??!0,customApps:a,defaultVisible:e.defaultVisible??!0,editor:e.editor??"",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(w)){const a=W(t);return this.addWatchFile(a),await P.promises.readFile(a,"utf8")}},name:"@visulima/dev-toolbar",resolveId(t){if(t===h)return _;if(t.startsWith(u))return`${t.replace(u,`${r}/`)}${w}`},transform(t,a,o){if(o?.ssr)return;const{appendTo:n}=e,i=a.split("?",2)[0];if(n&&i&&(typeof n=="string"&&i.endsWith(n)||n instanceof RegExp&&n.test(i)))return`import '${u}client/overlay.js';
5
+ ${t}`},transformIndexHtml(){return e.appendTo?void 0:{html:"",tags:[{attrs:{src:`${v.base||"/"}@id/${u}client/overlay.js`,type:"module"},injectTo:"head-prepend",tag:"script"}]}}},{enforce:"pre",name:"@visulima/dev-toolbar:inject-source",async transform(t,a){if(!$||v.mode!=="development"||a.includes("node_modules")||a.includes("?raw")||M.test(a)||!N.test(a.split("?")[0]??""))return;const{readFile:o}=await import("node:fs/promises");let n;try{const l=await o(a.split("?")[0]??a,"utf8");l!==t&&(n=l)}catch{}const{addSourceToJsx:i}=await import("./packem_chunks/inject-source.js"),s=i(t,a,e.injectSource?.ignore,n);if(s)return{code:s.code??t,map:s.map??void 0}}},{apply(t,{command:a,mode:o}){return f&&(a!=="serve"||o==="production")},load(t){if(t===j)return"export default {};"},name:"@visulima/dev-toolbar:remove-on-build",resolveId(t){if(t===h||t.startsWith(u))return j}}]},"devToolbar");export{E as devToolbar};
package/package.json CHANGED
@@ -1,10 +1,147 @@
1
1
  {
2
2
  "name": "@visulima/dev-toolbar",
3
- "version": "0.0.1",
4
- "description": "OIDC trusted publishing setup package for @visulima/dev-toolbar",
3
+ "version": "1.0.0-alpha.10",
4
+ "description": "Devtools is a set of tools for building advanced devtools for your application",
5
5
  "keywords": [
6
- "oidc",
7
- "trusted-publishing",
8
- "setup"
9
- ]
10
- }
6
+ "visulima",
7
+ "dev-toolbar"
8
+ ],
9
+ "homepage": "https://visulima.com/packages/dev-toolbar",
10
+ "bugs": {
11
+ "url": "https://github.com/visulima/visulima/issues"
12
+ },
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "git+https://github.com/visulima/visulima.git",
16
+ "directory": "packages/error-debugging/dev-toolbar"
17
+ },
18
+ "funding": [
19
+ {
20
+ "type": "github",
21
+ "url": "https://github.com/sponsors/prisis"
22
+ },
23
+ {
24
+ "type": "consulting",
25
+ "url": "https://anolilab.com/support"
26
+ }
27
+ ],
28
+ "license": "MIT",
29
+ "author": {
30
+ "name": "Daniel Bannert",
31
+ "email": "d.bannert@anolilab.de"
32
+ },
33
+ "sideEffects": false,
34
+ "type": "module",
35
+ "exports": {
36
+ ".": {
37
+ "types": "./dist/index.d.ts",
38
+ "default": "./dist/index.js"
39
+ },
40
+ "./vite": {
41
+ "types": "./dist/vite-plugin.d.ts",
42
+ "default": "./dist/vite-plugin.js"
43
+ },
44
+ "./client/overlay": {
45
+ "types": "./dist/client/overlay.d.ts",
46
+ "default": "./dist/client/overlay.js"
47
+ },
48
+ "./apps/a11y": {
49
+ "types": "./dist/apps/a11y/index.d.ts",
50
+ "default": "./dist/apps/a11y/index.js"
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
+ },
64
+ "./apps/module-graph": {
65
+ "types": "./dist/apps/module-graph/index.d.ts",
66
+ "default": "./dist/apps/module-graph/index.js"
67
+ },
68
+ "./apps/performance": {
69
+ "types": "./dist/apps/performance/index.d.ts",
70
+ "default": "./dist/apps/performance/index.js"
71
+ },
72
+ "./apps/seo": {
73
+ "types": "./dist/apps/seo/index.d.ts",
74
+ "default": "./dist/apps/seo/index.js"
75
+ },
76
+ "./apps/settings": {
77
+ "types": "./dist/apps/settings/index.d.ts",
78
+ "default": "./dist/apps/settings/index.js"
79
+ },
80
+ "./apps/timeline": {
81
+ "types": "./dist/apps/timeline/index.d.ts",
82
+ "default": "./dist/apps/timeline/index.js"
83
+ },
84
+ "./apps/annotations": {
85
+ "types": "./dist/apps/annotations/index.d.ts",
86
+ "default": "./dist/apps/annotations/index.js"
87
+ },
88
+ "./apps/vite-config": {
89
+ "types": "./dist/apps/vite-config/index.d.ts",
90
+ "default": "./dist/apps/vite-config/index.js"
91
+ },
92
+ "./mcp": {
93
+ "types": "./dist/mcp/server.d.ts",
94
+ "default": "./dist/mcp/server.js"
95
+ },
96
+ "./toolbar": {
97
+ "types": "./dist/toolbar/index.d.ts",
98
+ "default": "./dist/toolbar/index.js"
99
+ },
100
+ "./ui": {
101
+ "types": "./dist/ui/index.d.ts",
102
+ "default": "./dist/ui/index.js"
103
+ },
104
+ "./package.json": "./package.json"
105
+ },
106
+ "bin": {
107
+ "visulima-dev-toolbar-mcp": "./bin/mcp.js"
108
+ },
109
+ "files": [
110
+ "bin",
111
+ "dist",
112
+ "README.md",
113
+ "CHANGELOG.md"
114
+ ],
115
+ "dependencies": {
116
+ "@babel/generator": "^7.29.1",
117
+ "@babel/parser": "7.29.2",
118
+ "@babel/traverse": "^7.29.0",
119
+ "@floating-ui/dom": "^1.7.6",
120
+ "launch-editor": "2.13.2",
121
+ "preact": "^10.29.1"
122
+ },
123
+ "peerDependencies": {
124
+ "@modelcontextprotocol/sdk": "^1.0.0",
125
+ "axe-core": "4.11.3",
126
+ "vite": "^6 || ^7 || ^8",
127
+ "zod": "^3.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
+ }
139
+ },
140
+ "engines": {
141
+ "node": "^22.14.0 || >=24.10.0"
142
+ },
143
+ "publishConfig": {
144
+ "access": "public",
145
+ "provenance": true
146
+ }
147
+ }