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

package/dist/toolbar/context/toolbar-context.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource preact */
 import { createContext } from "preact";
 import type { DevToolbarAppState, ToolbarPlacement } from "../../types/index.d.ts";
 /**
@@ -14,93 +15,93 @@ export interface PinnedTooltip {
     initialY: number;
 }
 /**
- * Toolbar context state
+ * Shared state and actions exposed by the ToolbarContext.
  */
 export interface ToolbarContextState {
+    /**
+     * Currently active app ID
+     */
+    activeAppId: string | undefined;
     /**
      * All registered apps
      */
     apps: DevToolbarAppState[];
     /**
-     * Currently active app ID
+     * Clears the notification badge for an app.
      */
-    activeAppId: string | null;
+    clearNotification: (appId: string) => void;
     /**
-     * Whether toolbar is visible
+     * Currently hovered app (has a tooltip component)
      */
-    isVisible: boolean;
+    hoveredApp: DevToolbarAppState | undefined;
     /**
-     * Toolbar placement on screen
+     * Viewport rect of the hovered app button (for tooltip positioning)
      */
-    placement: ToolbarPlacement;
+    hoveredAppRect: DOMRect | undefined;
     /**
      * Whether toolbar is being dragged
      */
     isDragging: boolean;
     /**
-     * Set toolbar visibility
-     */
-    setVisible: (visible: boolean) => void;
-    /**
-     * Set toolbar placement
+     * Whether toolbar is visible
      */
-    setPlacement: (placement: ToolbarPlacement) => void;
+    isVisible: boolean;
     /**
-     * Set dragging state
+     * Currently pinned tooltip cards
      */
-    setDragging: (dragging: boolean) => void;
+    pinnedTooltips: PinnedTooltip[];
     /**
-     * Register an app
+     * Pin a tooltip at the given viewport position.
+     * Multiple pins from the same app are allowed (each gets a unique id).
      */
-    registerApp: (app: DevToolbarAppState) => void;
+    pinTooltip: (app: DevToolbarAppState, x: number, y: number) => void;
     /**
-     * Unregister an app
+     * Toolbar placement on screen
      */
-    unregisterApp: (appId: string) => void;
+    placement: ToolbarPlacement;
     /**
-     * Toggle an app
+     * Registers an app with the toolbar.
      */
-    toggleApp: (appId: string) => Promise<void>;
+    registerApp: (app: DevToolbarAppState) => void;
     /**
-     * Set app notification
+     * Sets the dragging state.
      */
-    setNotification: (appId: string, state: boolean, level?: "info" | "warning" | "error") => void;
+    setDragging: (dragging: boolean) => void;
     /**
-     * Clear app notification
+     * Sets or clears the hovered app. Pass undefined to start the leave debounce.
      */
-    clearNotification: (appId: string) => void;
+    setHoveredApp: (app: DevToolbarAppState | undefined, rect?: DOMRect) => void;
     /**
-     * Currently hovered app (has a tooltip component)
+     * Sets a notification for an app.
      */
-    hoveredApp: DevToolbarAppState | null;
+    setNotification: (appId: string, state: boolean, level?: "info" | "warning" | "error") => void;
     /**
-     * Viewport rect of the hovered app button (for tooltip positioning)
+     * Sets the toolbar placement.
      */
-    hoveredAppRect: DOMRect | null;
+    setPlacement: (placement: ToolbarPlacement) => void;
     /**
-     * Set/clear the hovered app. Pass null to start the leave debounce.
+     * Sets toolbar visibility.
      */
-    setHoveredApp: (app: DevToolbarAppState | null, rect?: DOMRect | null) => void;
+    setVisible: (visible: boolean) => void;
     /**
-     * Currently pinned tooltip cards
+     * Toggles an app's active state.
      */
-    pinnedTooltips: PinnedTooltip[];
+    toggleApp: (appId: string) => Promise<void>;
     /**
-     * Pin a tooltip at the given viewport position.
-     * Multiple pins from the same app are allowed (each gets a unique id).
+     * Removes a pinned tooltip by its instance id.
      */
-    pinTooltip: (app: DevToolbarAppState, x: number, y: number) => void;
+    unpinTooltip: (id: string) => void;
     /**
-     * Remove a pinned tooltip by its instance id.
+     * Unregisters an app.
      */
-    unpinTooltip: (id: string) => void;
+    unregisterApp: (appId: string) => void;
 }
 /**
- * Toolbar context
+ * Preact context object that exposes the toolbar's shared state to all child components.
  */
-export declare const ToolbarContext: ReturnType<typeof createContext<ToolbarContextState | null>>;
+export declare const ToolbarContext: ReturnType<typeof createContext<ToolbarContextState | undefined>>;
 /**
- * Hook to access toolbar context
- * @throws Error if used outside ToolbarContext provider
+ * Accesses the toolbar context, throwing if used outside a provider.
+ * @throws Error if used outside ToolbarContext provider.
  */
 export declare const useToolbarContext: () => ToolbarContextState;

package/dist/toolbar/global-api.d.ts

@@ -1,13 +1,14 @@
 import type { VisulimaDevTools } from "../types/global-api.d.ts";
 import type { DevToolbarApp } from "../types/index.d.ts";
 /**
- * Global DevTools API implementation.
+ * Creates the global DevTools API implementation.
  */
 export declare const createGlobalAPI: (appManager: {
     clearNotification: (id: string) => void;
     getActiveApp: () => DevToolbarApp | undefined;
     getApps: () => DevToolbarApp[];
     registerApp: (app: DevToolbarApp) => void;
+    setAppActive: (id: string, active: boolean) => void;
     setNotification: (id: string, state: boolean, level?: "info" | "warning" | "error") => void;
     toggleApp: (id: string) => Promise<boolean>;
     unregisterApp: (id: string) => void;
@@ -17,7 +18,7 @@ export declare const createGlobalAPI: (appManager: {
     toggle: () => void;
 }) => VisulimaDevTools;
 /**
- * Setup global API on window object
- * @param api API instance
+ * Mounts the global API on the window object so it can be accessed from outside the toolbar.
+ * @param api API instance to expose globally.
  */
 export declare const setupGlobalAPI: (api: VisulimaDevTools) => void;

package/dist/toolbar/helpers.d.ts

@@ -1,6 +1,8 @@
 import type { ServerHelpers } from "../types/app.d.ts";
 /**
- * Create server helpers for apps
- * @returns Server helpers instance
+ * Creates server helpers that proxy RPC calls for use within app init().
+ * @returns Server helpers instance.
  */
-export declare const createServerHelpers: () => ServerHelpers;
+declare const createServerHelpers: () => ServerHelpers;
+export { createServerHelpers };
+export default createServerHelpers;

package/dist/toolbar/hooks/index.d.ts

@@ -1,10 +1,10 @@
 export { useApps } from "./use-apps.d.ts";
-export { useFrameState } from "./use-frame-state.d.ts";
 export type { DevToolsFrameState, UseFrameStateReturn } from "./use-frame-state.d.ts";
-export { usePanelVisible } from "./use-panel-visible.d.ts";
+export { useFrameState } from "./use-frame-state.d.ts";
 export type { UsePanelVisibleReturn } from "./use-panel-visible.d.ts";
-export { usePosition } from "./use-position.d.ts";
+export { usePanelVisible } from "./use-panel-visible.d.ts";
 export type { UsePositionReturn } from "./use-position.d.ts";
-export { useTheme } from "./use-theme.d.ts";
+export { usePosition } from "./use-position.d.ts";
 export type { Theme, UseThemeReturn } from "./use-theme.d.ts";
+export { useTheme } from "./use-theme.d.ts";
 export { useToolbar } from "./use-toolbar.d.ts";

package/dist/toolbar/hooks/use-apps.d.ts

@@ -1,9 +1,9 @@
 import type { DevToolbarAppState } from "../../types/index.d.ts";
 /**
- * Hook for app management - exposes context app methods directly
+ * Exposes app management methods from the toolbar context.
  */
-export declare const useApps: () => {
-    activeAppId: string | null;
+declare const useApps: () => {
+    activeAppId: string | undefined;
     apps: DevToolbarAppState[];
     clearNotification: (appId: string) => void;
     registerApp: (app: DevToolbarAppState) => void;
@@ -11,3 +11,5 @@ export declare const useApps: () => {
     toggleApp: (appId: string) => Promise<void>;
     unregisterApp: (appId: string) => void;
 };
+export { useApps };
+export default useApps;

package/dist/toolbar/hooks/use-frame-state.d.ts

@@ -1,33 +1,37 @@
 /**
  * Keyboard shortcut bindings
  */
-export interface KeyBindings {
-    /** Toggle toolbar panel open/closed */
-    toggle: string;
+interface KeyBindings {
     /** Close active app / panel */
     close: string;
+    /** Toggle toolbar panel open/closed */
+    toggle: string;
 }
-export declare const DEFAULT_KEYBINDINGS: KeyBindings;
+declare const DEFAULT_KEYBINDINGS: KeyBindings;
 /**
- * Frame state interface
+ * Persistent state for the devtools panel frame.
  */
-export interface DevToolsFrameState {
+interface DevToolsFrameState {
     /**
      * Close panel on outside click
      */
     closeOnOutsideClick: boolean;
     /**
-     * Panel height as viewport height percentage
+     * Preferred editor for "Open in editor" (empty string = auto-detect)
      */
-    height: number;
+    editor: string;
     /**
-     * Whether DevTools panel is open in a Picture-in-Picture window
+     * Panel height as viewport height percentage
      */
-    isPip: boolean;
+    height: number;
     /**
      * Whether this is the first visit (used to show onboarding hint)
      */
     isFirstVisit: boolean;
+    /**
+     * Whether DevTools panel is open in a Picture-in-Picture window
+     */
+    isPip: boolean;
     /**
      * Keyboard shortcut bindings
      */
@@ -74,21 +78,33 @@ export interface DevToolsFrameState {
     width: number;
 }
 /**
- * Return type for useFrameState hook
+ * Default frame state - matches Vue DevTools exactly
  */
-export interface UseFrameStateReturn {
+declare const DEFAULT_STATE: DevToolsFrameState;
+/**
+ * Return type for the useFrameState hook.
+ */
+interface UseFrameStateReturn {
     /**
-     * Current frame state
+     * Current frame state.
      */
     state: DevToolsFrameState;
     /**
-     * Update state with partial values
+     * Updates state with partial values.
      */
     updateState: (value: Partial<DevToolsFrameState>) => void;
 }
 /**
- * Hook for frame state management.
+ * Manages the shared devtools frame state.
  * All callers share the same module-level state so position, open, and other
  * fields stay in sync regardless of how many times the hook is called.
  */
-export declare const useFrameState: () => UseFrameStateReturn;
+declare const useFrameState: () => UseFrameStateReturn;
+/**
+ * Returns the currently selected editor preference (empty string = auto-detect).
+ * Reads from the singleton shared state, so always reflects the latest value
+ * without re-reading localStorage.
+ */
+declare const getEditorPreference: () => string | undefined;
+export type { DevToolsFrameState, KeyBindings, UseFrameStateReturn };
+export { DEFAULT_KEYBINDINGS, DEFAULT_STATE, getEditorPreference, useFrameState };

package/dist/toolbar/hooks/use-panel-visible.d.ts

@@ -1,21 +1,23 @@
 /**
- * Return type for usePanelVisible hook
+ * Return type for the usePanelVisible hook.
  */
-export interface UsePanelVisibleReturn {
+interface UsePanelVisibleReturn {
     /**
-     * Close panel
+     * Closes the panel.
      */
     closePanel: () => void;
     /**
-     * Whether panel is visible
+     * Whether the panel is currently visible.
      */
     panelVisible: boolean;
     /**
-     * Toggle panel visibility
+     * Toggles panel visibility, optionally forcing a specific state.
      */
     togglePanelVisible: (_?: unknown, newState?: boolean) => void;
 }
 /**
- * Hook for panel visibility management - converted from Vue DevTools usePanelVisible
+ * Manages panel visibility with keyboard shortcut support.
  */
-export declare const usePanelVisible: () => UsePanelVisibleReturn;
+declare const usePanelVisible: () => UsePanelVisibleReturn;
+export type { UsePanelVisibleReturn };
+export { usePanelVisible };

package/dist/toolbar/hooks/use-position.d.ts

@@ -1,8 +1,8 @@
 import type { RefObject } from "preact";
 /**
- * Return type for usePosition hook
+ * Return type for usePosition hook.
  */
-export interface UsePositionReturn {
+interface UsePositionReturn {
     anchorStyle: {
         left: string;
         top: string;
@@ -12,11 +12,13 @@ export interface UsePositionReturn {
     isDragging: boolean;
     isHidden: boolean;
     isVertical: boolean;
-    onPointerDown: (e: PointerEvent) => void;
+    onPointerDown: (event: PointerEvent) => void;
     panelStyle: Record<string, string>;
 }
 /**
- * Hook for position management - converted from Vue DevTools usePosition
+ * Manages the draggable toolbar position, converted from Vue DevTools usePosition.
  * @see https://github.com/vuejs/devtools/blob/main/packages/overlay/src/composables/position.ts
  */
-export declare const usePosition: (panelEl: RefObject<HTMLElement>) => UsePositionReturn;
+declare const usePosition: (panelElement: RefObject<HTMLElement>) => UsePositionReturn;
+export type { UsePositionReturn };
+export { usePosition };

package/dist/toolbar/hooks/use-theme.d.ts

@@ -1,13 +1,15 @@
-export type Theme = "light" | "dark" | "system";
-export interface UseThemeReturn {
+type Theme = "light" | "dark" | "system";
+interface UseThemeReturn {
     resolvedTheme: "light" | "dark";
     setTheme: (newTheme: Theme) => void;
     theme: Theme;
     toggleTheme: () => void;
 }
 /**
- * Hook for managing theme (light/dark mode).
+ * Manages the shared light/dark/system theme preference.
  * All callers share the same module-level state so theme changes propagate
  * to every component (ToolbarContainer, SettingsApp, etc.) immediately.
  */
-export declare const useTheme: () => UseThemeReturn;
+declare const useTheme: () => UseThemeReturn;
+export type { Theme, UseThemeReturn };
+export { useTheme };

package/dist/toolbar/hooks/use-toolbar.d.ts

@@ -1,8 +1,8 @@
 import type { ToolbarPlacement } from "../../types/index.d.ts";
 /**
- * Hook for toolbar visibility and placement - exposes context methods directly
+ * Exposes toolbar visibility and placement controls from the toolbar context.
  */
-export declare const useToolbar: () => {
+declare const useToolbar: () => {
     hide: () => void;
     isDragging: boolean;
     isVisible: boolean;
@@ -12,3 +12,5 @@ export declare const useToolbar: () => {
     show: () => void;
     toggle: () => void;
 };
+export { useToolbar };
+export default useToolbar;

package/dist/toolbar/index.d.ts

@@ -1,23 +1,21 @@
 import type { DevToolbarApp } from "../types/index.d.ts";
 import { AppManager } from "./app-manager.d.ts";
-import { sharedToolbarStylesheet } from "./stylesheet.d.ts";
 /**
- * Dev Toolbar Web Component
+ * Dev Toolbar Web Component.
  */
 export declare class DevToolbar extends HTMLElement {
     private appManager;
     private hasBeenInitialized;
-    private customAppsToShow;
     private renderRoot;
     constructor();
     /**
-     * Called when element is inserted into the DOM
-     * According to Preact docs, rendering should happen here or after connection
+     * Called when element is inserted into the DOM.
+     * According to Preact docs, rendering should happen here or after connection.
      */
     connectedCallback(): void;
     /**
-     * Called when element is removed from the DOM
-     * Clean up Preact component to prevent memory leaks
+     * Called when element is removed from the DOM.
+     * Cleans up the Preact component to prevent memory leaks.
      */
     disconnectedCallback(): void;
     /**
@@ -33,7 +31,7 @@ export declare class DevToolbar extends HTMLElement {
      */
     setToolbarVisible(visible: boolean): void;
     /**
-     * Register an app.
+     * Adds an app to the toolbar and triggers a re-render.
      */
     registerApp(app: DevToolbarApp, builtIn?: boolean): void;
     /**
@@ -41,18 +39,12 @@ export declare class DevToolbar extends HTMLElement {
      */
     getAppManager(): AppManager;
     /**
-     * Inject Geist font into document.head once.
-     * @font-face declared in the document is part of the global font registry and
-     * is accessible from within shadow DOM roots — no duplication needed.
-     */
-    private static injectFont;
-    /**
-     * Render the toolbar UI using Preact
+     * Renders the toolbar UI using Preact.
      */
     private render;
     /**
-     * Setup event listeners.
+     * Attaches global keyboard shortcuts and other DOM event listeners.
      */
     private setupEventListeners;
 }
-export { sharedToolbarStylesheet };
+export { sharedToolbarStylesheet } from "./stylesheet.d.ts";