@berenjena/react-dev-panel 1.0.4 → 2.0.0

package/dist/hooks/useDragAndDrop/useDragAndDrop.d.ts

@@ -1,5 +1,9 @@
 import { Position } from '../../components/DevPanel/types';
 export interface UseDragAndDropProps {
+    /**
+     * Callback function to handle position changes during dragging
+     * @param position - The new position of the draggable element
+     */
     onPositionChange: (position: Position) => void;
 }
 /**
@@ -10,7 +14,7 @@ export interface UseDragAndDropProps {
 export declare function useDragAndDrop({ onPositionChange }: UseDragAndDropProps): {
     isDragging: boolean;
     elementRef: import('react').RefObject<HTMLDivElement | null>;
-    handleMouseDown: (e: React.MouseEvent) => void;
+    handlePointerDown: (e: React.PointerEvent) => void;
     stopDragging: () => void;
     adjustPositionForResize: () => void;
 };

package/dist/hooks/useDragAndDrop/useDragAndDrop.js

@@ -1,30 +1,30 @@
-import { useRef as p, useState as l, useCallback as c, useEffect as f } from "react";
+import { useRef as g, useState as p, useCallback as u, useEffect as f } from "react";
 import { debounce as E } from "../../utils/debounce/debounce.js";
 import { getConstrainedPosition as D } from "../../utils/getConstrainedPosition/getConstrainedPosition.js";
 import { getPositionAdjustment as L } from "../../utils/getPositionAdjustment/getPositionAdjustment.js";
-function z({ onPositionChange: i }) {
-  const o = p(null), [t, a] = l(!1), [u, v] = l({ x: 0, y: 0 }), m = c(() => {
+function R({ onPositionChange: s }) {
+  const o = g(null), [t, a] = p(!1), [c, l] = p({ x: 0, y: 0 }), d = u(() => {
     const e = o.current;
     if (!e) return;
-    const { constrainedPosition: n, needsAdjustment: d } = L(e);
-    d && i(n);
-  }, [i]), s = c(
+    const { constrainedPosition: n, needsAdjustment: m } = L(e);
+    m && s(n);
+  }, [s]), i = u(
     (e) => {
       if (!t || !o.current) return;
       const n = {
-        x: e.clientX - u.x,
-        y: e.clientY - u.y
-      }, d = D(n, o.current);
-      i(d);
+        x: e.clientX - c.x,
+        y: e.clientY - c.y
+      }, m = D(n, o.current);
+      s(m);
     },
-    [t, u.x, u.y, i]
-  ), r = c(() => {
+    [t, c.x, c.y, s]
+  ), r = u(() => {
     a(!1);
-  }, []), g = c((e) => {
+  }, []), v = u((e) => {
     if (e.target !== e.currentTarget) return;
     e.preventDefault(), a(!0);
     const n = o.current?.getBoundingClientRect();
-    n && v({
+    n && l({
       x: e.clientX - n.left,
       y: e.clientY - n.top
     });
@@ -32,24 +32,24 @@ function z({ onPositionChange: i }) {
   return f(() => {
     if (!t) return;
     const e = { passive: !0 };
-    return document.addEventListener("mousemove", s, e), document.addEventListener("mouseup", r, e), () => {
-      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r);
+    return document.addEventListener("pointermove", i, e), document.addEventListener("pointerup", r, e), () => {
+      document.removeEventListener("pointermove", i), document.removeEventListener("pointerup", r);
     };
-  }, [t, s, r]), f(() => {
-    const e = E(m, 100);
+  }, [t, i, r]), f(() => {
+    const e = E(d, 100);
     return window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [m]), f(() => () => {
-    t && (document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r));
-  }, [t, s, r]), {
+  }, [d]), f(() => () => {
+    t && (document.removeEventListener("pointermove", i), document.removeEventListener("pointerup", r));
+  }, [t, i, r]), {
     isDragging: t,
     elementRef: o,
-    handleMouseDown: g,
+    handlePointerDown: v,
     stopDragging: r,
-    adjustPositionForResize: m
+    adjustPositionForResize: d
   };
 }
 export {
-  z as useDragAndDrop
+  R as useDragAndDrop
 };

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export * from './components';
 export { useDevPanel } from './hooks/useDevPanel';
 export type { DevPanelProps } from './components/DevPanel/types';
 export type { ControlsGroup } from './components/ControlRenderer/controls/types';

package/dist/index.js

@@ -1,10 +1,4 @@
-import { controls as r } from "./components/ControlRenderer/controls/index.js";
-import { DevPanel as n } from "./components/DevPanel/DevPanel.js";
-import { ControlRenderer as l } from "./components/ControlRenderer/ControlRenderer.js";
-import { useDevPanel as p } from "./hooks/useDevPanel/useDevPanel.js";
+import { useDevPanel as r } from "./hooks/useDevPanel/useDevPanel.js";
 import './assets/index.css';export {
-  l as ControlRenderer,
-  n as DevPanel,
-  r as controls,
-  p as useDevPanel
+  r as useDevPanel
 };

package/dist/managers/DevPanelManager.d.ts

@@ -0,0 +1,85 @@
+import { DevPanelProps } from '../components/DevPanel/types';
+/**
+ * Simplified singleton that manages DevPanel state and props merging
+ * Works with createPortal for rendering instead of manual DOM management
+ */
+export declare class DevPanelManager {
+    private static instance;
+    private currentProps;
+    private mountedSections;
+    private updateCallback;
+    private propsChangeCallback;
+    private cleanupTimeoutId;
+    private constructor();
+    static getInstance(): DevPanelManager;
+    /**
+     * Sets callback to trigger re-render when state changes
+     *
+     * @param callback - Function to call when state changes
+     */
+    setUpdateCallback(callback: () => void): void;
+    /**
+     * Updates DevPanel props using merge strategy
+     *
+     * @param newProps - New props to merge with existing props
+     */
+    updateProps(newProps: DevPanelProps): void;
+    /**
+     * Registers section and updates props
+     *
+     * @param sectionName - Unique identifier for the section
+     * @param props - Optional DevPanel props to merge
+     */
+    addSection(sectionName: string, props?: DevPanelProps): void;
+    /**
+     * Removes section and schedules cleanup if no sections remain
+     *
+     * @param sectionName - Unique identifier for the section to remove
+     */
+    removeSection(sectionName: string): void;
+    /**
+     * Checks if DevPanel should be rendered
+     *
+     * @returns True if there are mounted sections, false otherwise
+     */
+    shouldRender(): boolean;
+    /**
+     * Gets current merged props
+     *
+     * @returns Copy of the current merged DevPanel props
+     */
+    getAllProps(): DevPanelProps;
+    /**
+     * Subscribe to props changes
+     *
+     * @param callback - Function to call when props change
+     * @returns Unsubscribe function to remove the callback
+     */
+    onPropsChange(callback: (props: DevPanelProps) => void): () => void;
+    /**
+     * Gets active sections for debugging
+     *
+     * @returns Array of active section names
+     */
+    getActiveSections(): string[];
+    /**
+     * Schedules cleanup with 1s grace period for quick re-mounting
+     */
+    private scheduleCleanup;
+    /**
+     * Notifies subscribers about state changes
+     */
+    private notifyUpdate;
+    /**
+     * Cleans up state and notifies update
+     */
+    private cleanup;
+    /**
+     * Force cleanup - useful for testing
+     */
+    forceCleanup(): void;
+    /**
+     * Reset singleton instance - useful for HMR
+     */
+    static resetInstance(): void;
+}

package/dist/managers/DevPanelManager.js

@@ -0,0 +1,119 @@
+class e {
+  static instance = null;
+  currentProps = {};
+  mountedSections = /* @__PURE__ */ new Set();
+  updateCallback = null;
+  propsChangeCallback = null;
+  cleanupTimeoutId = null;
+  constructor() {
+  }
+  static getInstance() {
+    return e.instance || (e.instance = new e()), e.instance;
+  }
+  /**
+   * Sets callback to trigger re-render when state changes
+   *
+   * @param callback - Function to call when state changes
+   */
+  setUpdateCallback(t) {
+    this.updateCallback = t;
+  }
+  /**
+   * Updates DevPanel props using merge strategy
+   *
+   * @param newProps - New props to merge with existing props
+   */
+  updateProps(t) {
+    this.currentProps = {
+      ...this.currentProps,
+      ...t
+    }, this.notifyUpdate();
+  }
+  /**
+   * Registers section and updates props
+   *
+   * @param sectionName - Unique identifier for the section
+   * @param props - Optional DevPanel props to merge
+   */
+  addSection(t, i = {}) {
+    this.cleanupTimeoutId && (clearTimeout(this.cleanupTimeoutId), this.cleanupTimeoutId = null), this.mountedSections.add(t), Object.keys(i).length > 0 ? this.updateProps(i) : this.notifyUpdate();
+  }
+  /**
+   * Removes section and schedules cleanup if no sections remain
+   *
+   * @param sectionName - Unique identifier for the section to remove
+   */
+  removeSection(t) {
+    this.mountedSections.delete(t), this.mountedSections.size === 0 ? this.scheduleCleanup() : this.notifyUpdate();
+  }
+  /**
+   * Checks if DevPanel should be rendered
+   *
+   * @returns True if there are mounted sections, false otherwise
+   */
+  shouldRender() {
+    return this.mountedSections.size > 0;
+  }
+  /**
+   * Gets current merged props
+   *
+   * @returns Copy of the current merged DevPanel props
+   */
+  getAllProps() {
+    return { ...this.currentProps };
+  }
+  /**
+   * Subscribe to props changes
+   *
+   * @param callback - Function to call when props change
+   * @returns Unsubscribe function to remove the callback
+   */
+  onPropsChange(t) {
+    return this.propsChangeCallback = t, () => {
+      this.propsChangeCallback = null;
+    };
+  }
+  /**
+   * Gets active sections for debugging
+   *
+   * @returns Array of active section names
+   */
+  getActiveSections() {
+    return Array.from(this.mountedSections);
+  }
+  /**
+   * Schedules cleanup with 1s grace period for quick re-mounting
+   */
+  scheduleCleanup() {
+    this.cleanupTimeoutId = setTimeout(() => {
+      this.mountedSections.size === 0 && this.cleanup();
+    }, 1e3);
+  }
+  /**
+   * Notifies subscribers about state changes
+   */
+  notifyUpdate() {
+    this.updateCallback?.(), this.propsChangeCallback?.(this.getAllProps());
+  }
+  /**
+   * Cleans up state and notifies update
+   */
+  cleanup() {
+    this.currentProps = {}, this.mountedSections.clear(), this.notifyUpdate(), this.cleanupTimeoutId && (clearTimeout(this.cleanupTimeoutId), this.cleanupTimeoutId = null);
+  }
+  /**
+   * Force cleanup - useful for testing
+   */
+  forceCleanup() {
+    this.cleanupTimeoutId && (clearTimeout(this.cleanupTimeoutId), this.cleanupTimeoutId = null), this.cleanup();
+  }
+  /**
+   * Reset singleton instance - useful for HMR
+   */
+  static resetInstance() {
+    e.instance && (e.instance.forceCleanup(), e.instance = null);
+  }
+}
+export {
+  e as DevPanelManager
+};

package/dist/managers/index.d.ts

@@ -0,0 +1 @@
+export { DevPanelManager } from './DevPanelManager';

package/dist/managers/index.js

@@ -0,0 +1,4 @@
+import { DevPanelManager as r } from "./DevPanelManager.js";
+export {
+  r as DevPanelManager
+};

package/dist/store/SectionsStore.js

@@ -1,7 +1,114 @@
-import "react";
-import "./BaseStoreService.js";
-import { a, u as i } from "../UIStore-CQdr4U-2.js";
+import { useSyncExternalStore as n } from "react";
+import { BaseStoreService as c } from "./BaseStoreService.js";
+const S = "dev-panel-sections-storage";
+class a extends c {
+  /**
+   * Creates a new DevPanelSectionsService instance.
+   */
+  constructor() {
+    super(S, {}, !1, !1);
+  }
+  /**
+   * Transforms current sections state to persistable format.
+   * Since this store doesn't persist, this method returns a dummy value.
+   *
+   * @param _state - The current sections state (unused)
+   * @returns Empty persistable state
+   * @protected
+   */
+  toPersistableState(e) {
+    return { sectionCollapseState: {} };
+  }
+  /**
+   * Transforms persisted state back to current state format.
+   * Since this store doesn't persist, this method returns the default state.
+   *
+   * @param _persistedState - The persisted sections state (unused)
+   * @param defaultState - The default state to fall back to
+   * @returns The default state
+   * @protected
+   */
+  fromPersistedState(e, t) {
+    return t;
+  }
+  /**
+   * Gets the service name for error messages.
+   *
+   * @returns The service name
+   * @protected
+   */
+  getServiceName() {
+    return "sections";
+  }
+  /**
+   * Registers a new section with the dev panel.
+   * If a section with the same name already exists, it preserves the existing collapse state.
+   * New sections start in expanded state (isCollapsed: false).
+   *
+   * @param name - Unique name for the section
+   * @param controls - Array of control configurations for the section
+   */
+  registerSection = (e, t) => {
+    this.setState((s) => {
+      const i = s[e]?.isCollapsed ?? !1;
+      return {
+        ...s,
+        [e]: {
+          name: e,
+          controls: t,
+          isCollapsed: i
+        }
+      };
+    });
+  };
+  /**
+   * Removes a section from the dev panel.
+   *
+   * @param name - Name of the section to remove
+   */
+  unregisterSection = (e) => {
+    this.setState((t) => {
+      const { [e]: s, ...o } = t;
+      return o;
+    });
+  };
+  /**
+   * Toggles the collapsed state of a specific section.
+   *
+   * @param name - Name of the section to toggle
+   */
+  toggleSectionCollapse = (e) => {
+    this.setState((t) => {
+      const s = t[e];
+      return s ? {
+        ...t,
+        [e]: {
+          ...s,
+          isCollapsed: !s.isCollapsed
+        }
+      } : t;
+    });
+  };
+  /**
+   * Clears all sections.
+   */
+  reset = () => {
+    this.setState(() => ({}));
+  };
+}
+const r = new a();
+function p() {
+  return n(r.subscribe, r.getSnapshot);
+}
+function d() {
+  return {
+    registerSection: r.registerSection,
+    unregisterSection: r.unregisterSection,
+    toggleSectionCollapse: r.toggleSectionCollapse,
+    reset: r.reset
+  };
+}
 export {
-  a as useDevPanelSectionActions,
-  i as useDevPanelSections
+  d as useDevPanelSectionActions,
+  p as useDevPanelSections
 };

package/dist/store/ThemeStore.d.ts

@@ -0,0 +1,68 @@
+interface ThemeState {
+    currentTheme: string;
+}
+/**
+ * React hook that provides access to the complete dev panel theme state and actions.
+ * Uses useSyncExternalStore for optimal performance and React 18 compatibility.
+ *
+ * @returns Object containing the current theme state and all available theme actions
+ *
+ * @example
+ * ```typescript
+ * const {
+ *   currentTheme,
+ *   setTheme,
+ *   resetTheme
+ * } = useDevPanelTheme();
+ *
+ * // Set a specific theme
+ * setTheme("dark");
+ *
+ * // Reset to auto theme
+ * resetTheme();
+ * ```
+ */
+export declare function useDevPanelTheme(): ThemeState & {
+    setTheme: (theme: string) => void;
+    resetTheme: () => void;
+    getCurrentTheme: () => string;
+};
+/**
+ * React hook that subscribes only to the current theme state.
+ * Optimized for components that only need to know the current theme.
+ *
+ * @returns String indicating the current theme name
+ *
+ * @example
+ * ```typescript
+ * const currentTheme = useCurrentTheme();
+ * console.log(`Current theme is: ${currentTheme}`);
+ * ```
+ */
+export declare function useCurrentTheme(): string;
+/**
+ * React hook that provides access to all dev panel theme actions without subscribing to state.
+ * Ideal for components that only need to trigger theme actions without rendering on state changes.
+ *
+ * @returns Object containing all available theme actions
+ *
+ * @example
+ * ```typescript
+ * const { setTheme, resetTheme } = useDevPanelThemeActions();
+ *
+ * // Switch to dark theme
+ * setTheme("dark");
+ *
+ * // Switch to neon theme
+ * setTheme("neon");
+ *
+ * // Reset to auto theme
+ * resetTheme();
+ * ```
+ */
+export declare function useDevPanelThemeActions(): {
+    setTheme: (theme: string) => void;
+    resetTheme: () => void;
+    getCurrentTheme: () => string;
+};
+export {};

package/dist/store/ThemeStore.js

@@ -0,0 +1,102 @@
+import { useSyncExternalStore as n } from "react";
+import { BaseStoreService as h } from "./BaseStoreService.js";
+const m = "dev-panel-theme-storage", u = {
+  currentTheme: "auto"
+};
+class o extends h {
+  /**
+   * Creates a new DevPanelThemeService instance and loads persisted theme from localStorage.
+   */
+  constructor() {
+    super(m, u, !0, !0), this.applyTheme(this.getSnapshot().currentTheme);
+  }
+  /**
+   * Transforms current state to persistable format.
+   *
+   * @param state - The current theme state
+   * @returns The state in persistable format
+   * @protected
+   */
+  toPersistableState(e) {
+    return {
+      currentTheme: e.currentTheme
+    };
+  }
+  /**
+   * Transforms persisted state back to current state format.
+   *
+   * @param persistedState - The persisted theme state
+   * @param defaultState - The default state to fall back to
+   * @returns The state in current format
+   * @protected
+   */
+  fromPersistedState(e, r) {
+    return {
+      ...r,
+      currentTheme: e.currentTheme || r.currentTheme
+    };
+  }
+  /**
+   * Gets the service name for error messages.
+   *
+   * @returns The service name
+   * @protected
+   */
+  getServiceName() {
+    return "theme";
+  }
+  /**
+   * Applies the theme to the document root element using data attributes.
+   *
+   * @param theme - Theme name to apply
+   * @private
+   */
+  applyTheme(e) {
+    const r = document.documentElement;
+    e === "auto" || e === "" ? r.removeAttribute("data-dev-panel-theme") : r.setAttribute("data-dev-panel-theme", e);
+  }
+  /**
+   * Sets the current theme and applies it to the document.
+   *
+   * @param theme - Theme name to set
+   */
+  setTheme = (e) => {
+    this.setState((r) => ({ ...r, currentTheme: e })), this.applyTheme(e);
+  };
+  /**
+   * Resets the theme to the default "auto" theme.
+   */
+  resetTheme = () => {
+    this.setTheme("auto");
+  };
+  /**
+   * Gets the current theme name.
+   *
+   * @returns The current theme name
+   */
+  getCurrentTheme = () => this.getSnapshot().currentTheme;
+}
+const t = new o();
+function c() {
+  return {
+    ...n(t.subscribe, t.getSnapshot),
+    setTheme: t.setTheme,
+    resetTheme: t.resetTheme,
+    getCurrentTheme: t.getCurrentTheme
+  };
+}
+function i() {
+  return n(t.subscribe, () => t.getSnapshot().currentTheme);
+}
+function p() {
+  return {
+    setTheme: t.setTheme,
+    resetTheme: t.resetTheme,
+    getCurrentTheme: t.getCurrentTheme
+  };
+}
+export {
+  i as useCurrentTheme,
+  c as useDevPanelTheme,
+  p as useDevPanelThemeActions
+};