@visulima/dev-toolbar 1.0.0-alpha.12 → 1.0.0-alpha.14

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

@@ -1,14 +0,0 @@
-/**
- * Viewport rulers & draggable guidelines for the inspector.
- *
- * Rulers are rendered with Canvas 2D (DPR-aware) along the top and left
- * viewport edges. Users can drag from a ruler to spawn a guideline — a
- * reference line that snaps to nearby element edges. Dragging a guideline
- * back onto the ruler removes it.
- */
-import type { InspectorPalette } from "./theme-palette.d.ts";
-export declare const createRulers: (palette: InspectorPalette) => void;
-export declare const removeRulers: () => void;
-export declare const areRulersVisible: () => boolean;
-/** Check if an element is part of the ruler/guideline system. */
-export declare const isRulerElement: (element: Element) => boolean;

package/dist/apps/inspector/theme-palette.d.ts

@@ -1,34 +0,0 @@
-/**
- * Shared theme palette for inspector and annotation overlay.
- * Both run in document.body (outside Shadow DOM) so CSS variables
- * from the toolbar's :host are not available. We resolve the theme
- * from the same localStorage key used by use-theme.ts.
- */
-export interface BasePalette {
-    bg: string;
-    btnBg: string;
-    btnBgHover: string;
-    btnBorder: string;
-    btnBorderHover: string;
-    fg: string;
-    muted: string;
-    primary: string;
-    shadow: string;
-}
-export interface InspectorPalette extends BasePalette {
-    overlayBg: string;
-    overlayBorder: string;
-}
-export interface AnnotationPalette extends BasePalette {
-    danger: string;
-    success: string;
-}
-export declare const INSPECTOR_DARK: InspectorPalette;
-export declare const INSPECTOR_LIGHT: InspectorPalette;
-export declare const ANNOTATION_DARK: AnnotationPalette;
-export declare const ANNOTATION_LIGHT: AnnotationPalette;
-export declare const isDarkTheme: () => boolean;
-export declare const getInspectorPalette: () => InspectorPalette;
-export declare const getAnnotationPalette: () => AnnotationPalette;
-/** Reset cache (e.g. when theme changes). */
-export declare const resetPaletteCache: () => void;

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

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const ModuleGraphApp: ({ helpers }: AppComponentProps) => ComponentChildren;
-export default ModuleGraphApp;

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

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const PerformanceApp: (_props: AppComponentProps) => ComponentChildren;
-export default PerformanceApp;

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

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppTooltipProps } from "../../types/app.d.ts";
-declare const PerformanceTooltip: (_props: AppTooltipProps) => ComponentChildren;
-export default PerformanceTooltip;

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

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const SeoApp: (_props: AppComponentProps) => ComponentChildren;
-export default SeoApp;

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

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const SettingsApp: (_props: AppComponentProps) => ComponentChildren;
-export default SettingsApp;

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

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const TailwindApp: ({ helpers }: AppComponentProps) => ComponentChildren;
-export default TailwindApp;

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

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const TimelineApp: (_props: AppComponentProps) => ComponentChildren;
-export default TimelineApp;

package/dist/apps/vite-config/vite-config-app.d.ts

@@ -1,4 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { AppComponentProps } from "../../types/app.d.ts";
-declare const ViteConfigApp: ({ helpers }: AppComponentProps) => ComponentChildren;
-export default ViteConfigApp;

package/dist/hooks/create-hook.d.ts

@@ -1,12 +0,0 @@
-import type { DevToolbarApp } from "../types/app.d.ts";
-import type { DevToolbarHook } from "../types/hooks.d.ts";
-import type { TimelineEvent } from "../types/timeline.d.ts";
-/**
- * Creates a dev toolbar hook instance.
- * @param onRegisterApp Callback when app is registered.
- * @param onTimelineEvent Callback when timeline event is added.
- * @returns Hook instance.
- */
-declare const createDevToolbarHook: (onRegisterApp?: (app: DevToolbarApp) => void, onTimelineEvent?: (groupId: string, event: TimelineEvent) => void) => DevToolbarHook;
-export { createDevToolbarHook };
-export default createDevToolbarHook;

package/dist/hooks/events.d.ts

@@ -1,7 +0,0 @@
-import type { HookEvents } from "../types/hooks.d.ts";
-/**
- * Hook event names.
- */
-declare const HOOK_EVENT_NAMES: (keyof HookEvents)[];
-export { HOOK_EVENT_NAMES };
-export default HOOK_EVENT_NAMES;

package/dist/hooks/global-hook.d.ts

@@ -1,15 +0,0 @@
-import type { DevToolbarApp } from "../types/app.d.ts";
-import type { DevToolbarHook } from "../types/hooks.d.ts";
-import type { TimelineEvent } from "../types/timeline.d.ts";
-/**
- * Setup global hook on window object.
- * @param onRegisterApp Callback when app is registered.
- * @param onTimelineEvent Callback when timeline event is added.
- * @returns Hook instance.
- */
-export declare const setupGlobalHook: (onRegisterApp?: (app: DevToolbarApp) => void, onTimelineEvent?: (groupId: string, event: TimelineEvent) => void) => DevToolbarHook;
-/**
- * Get the global hook instance.
- * @returns Hook instance or undefined.
- */
-export declare const getGlobalHook: () => DevToolbarHook | undefined;

package/dist/hooks/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Hook system exports
- */
-export { createDevToolbarHook } from "./create-hook.d.ts";
-export { HOOK_EVENT_NAMES } from "./events.d.ts";
-export { getGlobalHook, setupGlobalHook } from "./global-hook.d.ts";

package/dist/performance/monitor.d.ts

@@ -1,116 +0,0 @@
-/**
- * Performance Monitor — singleton that collects browser performance metrics.
- *
- * Metrics collected:
- * - FPS via requestAnimationFrame circular buffer (last 60 samples)
- * - Memory via performance.memory (Chrome only, 1-second polling)
- * - Core Web Vitals: LCP, CLS, FID, FCP, TTFB (PerformanceObserver, buffered)
- * - Long tasks (>50 ms blocking) via PerformanceObserver
- */
-interface MemoryInfo {
-    /** JS heap size limit in bytes */
-    jsHeapSizeLimit: number;
-    /** Total allocated JS heap in bytes */
-    totalJSHeapSize: number;
-    /** Currently used JS heap in bytes */
-    usedJSHeapSize: number;
-}
-interface LongTask {
-    /** Duration in milliseconds */
-    duration: number;
-    /** Unique id */
-    id: string;
-    /** Start time (DOMHighResTimeStamp) */
-    startTime: number;
-}
-interface CoreWebVitals {
-    /** Cumulative Layout Shift score */
-    cls: number | undefined;
-    /** First Contentful Paint in ms */
-    fcp: number | undefined;
-    /** First Input Delay in ms */
-    fid: number | undefined;
-    /** Largest Contentful Paint in ms */
-    lcp: number | undefined;
-    /** Time to First Byte in ms */
-    ttfb: number | undefined;
-}
-interface PerformanceSnapshot {
-    /** Current FPS (0–60) */
-    fps: number;
-    /** Long tasks captured since start */
-    longTasks: LongTask[];
-    /** Memory info (Chrome only, otherwise undefined) */
-    memory: MemoryInfo | undefined;
-    /** Core Web Vitals */
-    vitals: CoreWebVitals;
-}
-type Listener = (snapshot: PerformanceSnapshot) => void;
-declare const CWV_THRESHOLDS: {
-    readonly cls: {
-        readonly good: 0.1;
-        readonly poor: 0.25;
-    };
-    readonly fcp: {
-        readonly good: 1800;
-        readonly poor: 3000;
-    };
-    readonly fid: {
-        readonly good: 100;
-        readonly poor: 300;
-    };
-    readonly lcp: {
-        readonly good: 2500;
-        readonly poor: 4000;
-    };
-    readonly ttfb: {
-        readonly good: 800;
-        readonly poor: 1800;
-    };
-};
-type CwvRating = "good" | "needs-improvement" | "poor";
-declare const getCwvRating: (metric: keyof typeof CWV_THRESHOLDS, value: number) => CwvRating;
-declare class PerformanceMonitor {
-    private clsValue;
-    private fpsSamples;
-    private listeners;
-    private longTaskIdCounter;
-    private longTasks;
-    private memory;
-    private memoryInterval;
-    private observers;
-    private rafId;
-    private running;
-    private vitals;
-    /**
-     * Removes all collected long tasks (useful for the "Clear" button in the UI).
-     */
-    clearLongTasks(): void;
-    /**
-     * Returns a snapshot of the current metrics (no subscription).
-     */
-    getSnapshot(): PerformanceSnapshot;
-    /**
-     * Starts collecting metrics. Safe to call multiple times — starts once.
-     */
-    start(): void;
-    /**
-     * Stops all observers and timers.
-     */
-    stop(): void;
-    /**
-     * Subscribes to metric updates. Returns an unsubscribe function.
-     */
-    subscribe(listener: Listener): () => void;
-    private currentFps;
-    private emit;
-    private loadTtfb;
-    private startCwv;
-    private startFps;
-    private startLongTasks;
-    private startMemory;
-    private tryObserve;
-}
-declare const performanceMonitor: PerformanceMonitor;
-export type { CoreWebVitals, CwvRating, LongTask, MemoryInfo, PerformanceSnapshot };
-export { CWV_THRESHOLDS, getCwvRating, PerformanceMonitor, performanceMonitor };

package/dist/rpc/client.d.ts

@@ -1,9 +0,0 @@
-import type { ClientFunctions, ClientRPCContext } from "../types/rpc.d.ts";
-/**
- * Creates client-side RPC context.
- * @param customFunctions Custom client functions to register.
- * @returns Client RPC context.
- */
-declare const createClientRPCContext: (customFunctions?: Partial<ClientFunctions>) => ClientRPCContext;
-export { createClientRPCContext };
-export default createClientRPCContext;

package/dist/rpc/functions/annotations.d.ts

@@ -1,28 +0,0 @@
-import type { ViteDevServer } from "vite";
-import type { Annotation, CreateAnnotationData, UpdateAnnotationData } from "../../types/annotations.d.ts";
-/**
- * Get all annotations.
- */
-export declare const getAnnotations: (server: ViteDevServer) => Promise<Annotation[]>;
-/**
- * Create a new annotation.
- * Only picks known fields from data to prevent injection of server-managed fields.
- */
-export declare const createAnnotation: (server: ViteDevServer, data: CreateAnnotationData) => Promise<Annotation>;
-/**
- * Update an existing annotation.
- */
-export declare const updateAnnotation: (server: ViteDevServer, id: string, data: UpdateAnnotationData) => Promise<Annotation | null>;
-/**
- * Delete an annotation.
- */
-export declare const deleteAnnotation: (server: ViteDevServer, id: string) => Promise<boolean>;
-/**
- * Save a screenshot from a base64 data URL.
- * Returns the relative path within .devtoolbar/ (e.g. "screenshots/&lt;id>.png").
- */
-export declare const saveScreenshot: (server: ViteDevServer, annotationId: string, dataUrl: string) => Promise<string>;
-/**
- * Get a screenshot as a base64 data URL.
- */
-export declare const getScreenshot: (server: ViteDevServer, annotationId: string) => Promise<string | null>;

package/dist/rpc/functions/assets.d.ts

@@ -1,16 +0,0 @@
-import type { ViteDevServer } from "vite";
-export interface StaticAsset {
-    /** Last-modified timestamp (ms since epoch) */
-    mtime: number;
-    /** Public URL path (e.g. "/images/logo.png") */
-    publicPath: string;
-    /** File size in bytes */
-    size: number;
-    /** Asset type category */
-    type: "audio" | "font" | "image" | "other" | "text" | "video";
-}
-/**
- * Walk the Vite publicDir and return serializable asset descriptors.
- * Results are capped at MAX_ASSETS (5000) to prevent memory exhaustion.
- */
-export declare const getStaticAssets: (server: ViteDevServer) => Promise<StaticAsset[]>;

package/dist/rpc/functions/module-graph.d.ts

@@ -1,17 +0,0 @@
-import type { ViteDevServer } from "vite";
-export interface SerializableModuleNode {
-    id: string;
-    importerCount: number;
-    importerUrls: string[];
-    url: string;
-}
-/**
- * Get module dependency graph as serializable objects.
- * Raw ModuleNode objects contain circular references (importers/importedModules)
- * which cannot be JSON-serialized; this function returns a flat, safe representation.
- * Importer URLs are extracted from each ModuleNode's importers Set before serialization
- * so the client can display the full "imported by" list without a second RPC call.
- * @param server Vite dev server instance
- * @returns Array of serializable module entries
- */
-export declare const getModuleGraph: (server: ViteDevServer) => Promise<SerializableModuleNode[]>;

package/dist/rpc/functions/open-in-editor.d.ts

@@ -1,16 +0,0 @@
-import type { ViteDevServer } from "vite";
-/**
- * Open a file in the editor at a specific line/column.
- * Uses `launch-editor` which knows the right CLI flags for each editor
- * (e.g. `--goto` for VS Code, `-l` for vim, `--line` for Emacs, etc.).
- * @param server Vite dev server instance.
- * @param file File path (absolute or relative to server.config.root).
- * @param line Line number (1-based).
- * @param column Column number (1-based).
- * @param editor Optional editor override — any value accepted by launch-editor
- * (e.g. "code", "webstorm", "vim", "/usr/local/bin/hx"). When omitted,
- * launch-editor auto-detects from EDITOR / VISUAL env vars or the running IDE.
- */
-declare const openInEditor: (server: ViteDevServer, file: string, line?: number, column?: number, editor?: string) => Promise<void>;
-export { openInEditor };
-export default openInEditor;

package/dist/rpc/functions/tailwind-config.d.ts

@@ -1,15 +0,0 @@
-import type { ViteDevServer } from "vite";
-interface TailwindConfigResult {
-    /** CSS files that \@import tailwindcss */
-    cssFiles: string[];
-    /** User-defined \@theme overrides/extensions */
-    customTheme: Record<string, string>;
-    /** Full default Tailwind theme tokens */
-    defaultTheme: Record<string, string>;
-    /** Detected Tailwind version */
-    version: "v3" | "v4" | "unknown";
-}
-declare const getTailwindConfig: (server: ViteDevServer) => Promise<TailwindConfigResult>;
-export type { TailwindConfigResult };
-export { getTailwindConfig };
-export default getTailwindConfig;

package/dist/rpc/functions/vite-config.d.ts

@@ -1,83 +0,0 @@
-import type { ViteDevServer } from "vite";
-type PluginInfo = {
-    enforce?: "post" | "pre";
-    name: string;
-};
-/** Alias entry with find always normalized to string (RegExp serialized as "/pattern/flags") */
-type AliasEntry = {
-    find: string;
-    replacement: string;
-};
-type ViteConfigSnapshot = {
-    base: string;
-    build: {
-        assetsDir?: string;
-        assetsInlineLimit?: number;
-        chunkSizeWarningLimit?: number;
-        cssCodeSplit?: boolean;
-        emptyOutDir?: boolean | null;
-        minify?: "esbuild" | "oxc" | "terser" | boolean;
-        outDir?: string;
-        reportCompressedSize?: boolean;
-        sourcemap?: "hidden" | "inline" | boolean;
-        target?: false | string | string[];
-    };
-    cacheDir: string;
-    css: {
-        devSourcemap?: boolean;
-        preprocessors: string[];
-    };
-    define?: Record<string, unknown>;
-    env?: Record<string, string>;
-    envDir?: string;
-    envPrefix?: string | string[];
-    esbuild?: {
-        jsx?: string;
-        jsxFactory?: string;
-        jsxFragment?: string;
-        jsxImportSource?: string;
-        target?: string | string[];
-    };
-    mode: string;
-    optimizeDeps: {
-        exclude?: string[];
-        include?: string[];
-    };
-    plugins: PluginInfo[];
-    publicDir: string;
-    resolve: {
-        alias?: AliasEntry[] | Record<string, string>;
-        conditions?: string[];
-        dedupe?: string[];
-        extensions?: string[];
-        mainFields?: string[];
-        preserveSymlinks?: boolean;
-    };
-    root: string;
-    server: {
-        cors?: boolean;
-        hmrEnabled?: boolean;
-        hmrPort?: number;
-        host?: boolean | string;
-        https?: boolean;
-        middlewareMode?: boolean | string;
-        open?: boolean | string;
-        origin?: string;
-        port?: number;
-        proxy?: string[];
-        strictPort?: boolean;
-    };
-    ssr?: {
-        external?: string[];
-        noExternal?: boolean | string[];
-        target?: string;
-    };
-};
-/**
- * Gets Vite configuration from the dev server.
- * @param server Vite dev server instance.
- * @returns Vite config snapshot with the most useful fields.
- */
-declare const getViteConfig: (server: ViteDevServer) => Promise<ViteConfigSnapshot>;
-export { getViteConfig };
-export default getViteConfig;

package/dist/rpc/server.d.ts

@@ -1,15 +0,0 @@
-import type { ViteDevServer } from "vite";
-import type { ServerFunctions, ServerRPCContext } from "../types/rpc.d.ts";
-/**
- * Creates server-side RPC context.
- * @param server Vite dev server instance.
- * @param customFunctions Custom server functions to register.
- * @param options Additional options (e.g. which editor to launch).
- * @param options.editor Editor to use for "open in editor" functionality.
- * @returns Server RPC context.
- */
-declare const createServerRPCContext: (server: ViteDevServer, customFunctions?: Partial<ServerFunctions>, options?: {
-    editor?: string;
-}) => ServerRPCContext;
-export { createServerRPCContext };
-export default createServerRPCContext;

package/dist/store/annotation-store.d.ts

@@ -1,41 +0,0 @@
-import type { Annotation } from "../types/annotations.d.ts";
-/** Base directory for annotation storage (relative to project root) */
-export declare const STORE_DIR = ".devtoolbar";
-export declare const ANNOTATIONS_FILE = "annotations.json";
-export declare const SCREENSHOTS_DIR = "screenshots";
-/**
- * Resolves absolute paths for the annotation store.
- */
-export declare const resolvePaths: (root: string) => {
-    annotationsFile: string;
-    base: string;
-    screenshotsDir: string;
-};
-/**
- * Validates that a resolved file path stays inside the store base directory.
- * Prevents directory traversal attacks.
- */
-export declare const isPathInsideBase: (filepath: string, baseDir: string) => boolean;
-/**
- * Sanitizes an ID for use as a filename — strips path separators and
- * non-alphanumeric characters (except hyphens) to prevent traversal.
- */
-export declare const sanitizeId: (id: string) => string;
-/**
- * Ensures the store directories exist.
- */
-export declare const ensureStoreDir: (root: string) => Promise<void>;
-export declare const withLock: <T>(function_: () => Promise<T>) => Promise<T>;
-/**
- * Reads all annotations from disk.
- */
-export declare const readAnnotations: (root: string) => Promise<Annotation[]>;
-/**
- * Writes annotations to disk.
- */
-export declare const writeAnnotations: (root: string, annotations: Annotation[]) => Promise<void>;
-/**
- * Deletes a screenshot file from disk.
- * Validates the path stays inside the store directory to prevent traversal.
- */
-export declare const deleteScreenshotFile: (root: string, screenshotPath: string) => Promise<void>;

package/dist/timeline/capture.d.ts

@@ -1,8 +0,0 @@
-/**
- * Timeline event capture
- * Intercepts HMR events, fetch requests, and JS errors and feeds them
- * into the timeline store so the Timeline app can display them.
- */
-declare const startTimelineCapture: () => void;
-export { startTimelineCapture };
-export default startTimelineCapture;

package/dist/timeline/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Timeline system exports
- */
-export type { TimelineEvent, TimelineEventLevel, TimelineGroup } from "../types/timeline.d.ts";
-export { DEFAULT_TIMELINE_GROUPS } from "../types/timeline.d.ts";
-export { startTimelineCapture } from "./capture.d.ts";
-export type { TimelineStore } from "./store.d.ts";
-export { getTimelineStore } from "./store.d.ts";

package/dist/timeline/store.d.ts

@@ -1,42 +0,0 @@
-import type { TimelineEvent, TimelineGroup } from "../types/timeline.d.ts";
-/**
- * Timeline store for managing timeline events.
- */
-declare class TimelineStore {
-    private groups;
-    private maxEvents;
-    constructor(maxEvents?: number);
-    /**
-     * Adds an event to a group.
-     */
-    addEvent(groupId: string, event: TimelineEvent): void;
-    /**
-     * Gets all timeline groups.
-     */
-    getGroups(): TimelineGroup[];
-    /**
-     * Gets events for a specific group.
-     */
-    getGroupEvents(groupId: string): TimelineEvent[];
-    /**
-     * Gets all events across all groups.
-     */
-    getAllEvents(): TimelineEvent[];
-    /**
-     * Clears events for a specific group.
-     */
-    clearGroup(groupId: string): void;
-    /**
-     * Clears all events from all groups.
-     */
-    clearAll(): void;
-    /**
-     * Gets events within a time range.
-     */
-    getEventsInRange(startTime: number, endTime: number): TimelineEvent[];
-}
-/**
- * Gets or creates the timeline store singleton instance.
- */
-declare const getTimelineStore: () => TimelineStore;
-export { getTimelineStore, TimelineStore };