@berenjena/react-dev-panel 1.0.3 → 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/BaseStoreService.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Abstract base class for state management services using the useSyncExternalStore pattern.
+ * Provides common functionality for subscription management, state updates, and persistence.
+ *
+ * @template TState - The type of the state object
+ * @template TPersistedState - The type of the persisted state object (usually a subset of TState)
+ */
+export declare abstract class BaseStoreService<TState, TPersistedState = TState> {
+    /** Set of listeners subscribed to state changes */
+    protected readonly listeners: Set<() => void>;
+    /** The localStorage key for persisting state */
+    protected readonly storageKey: string;
+    /** Whether this store should persist state to localStorage */
+    protected readonly shouldPersist: boolean;
+    /** The current state */
+    protected state: TState;
+    /**
+     * Creates a new BaseStoreService instance.
+     *
+     * @param storageKey - The localStorage key for persisting state (used only if shouldPersist is true)
+     * @param defaultState - The default state value
+     * @param shouldLoadOnInit - Whether to load persisted state on initialization (only works if shouldPersist is true)
+     * @param shouldPersist - Whether to persist state to localStorage (default: true)
+     */
+    constructor(storageKey: string, defaultState: TState, shouldLoadOnInit?: boolean, shouldPersist?: boolean);
+    /**
+     * Abstract method to transform current state to persistable format.
+     * Must be implemented by subclasses.
+     *
+     * @param state - The current state
+     * @returns The state in persistable format
+     */
+    protected abstract toPersistableState(state: TState): TPersistedState;
+    /**
+     * Abstract method to transform persisted state back to current state format.
+     * Must be implemented by subclasses.
+     *
+     * @param persistedState - The persisted state
+     * @param defaultState - The default state to fall back to
+     * @returns The state in current format
+     */
+    protected abstract fromPersistedState(persistedState: TPersistedState, defaultState: TState): TState;
+    /**
+     * Abstract method to get the service name for error messages.
+     * Must be implemented by subclasses.
+     *
+     * @returns The service name
+     */
+    protected abstract getServiceName(): string;
+    /**
+     * Saves the current state to localStorage.
+     *
+     * @protected
+     */
+    protected saveState(): void;
+    /**
+     * Loads previously persisted state from localStorage.
+     * If no state exists or loading fails, keeps the current state.
+     *
+     * @protected
+     */
+    protected loadState(): void;
+    /**
+     * Notifies all subscribed listeners about state changes.
+     *
+     * @protected
+     */
+    protected notifySubscribers(): void;
+    /**
+     * Updates the state using an updater function, persists the new state,
+     * and notifies all subscribers if the state changed.
+     *
+     * @param updater - Function that receives current state and returns new state
+     * @protected
+     */
+    protected setState(updater: (state: TState) => TState): void;
+    /**
+     * Returns the current state snapshot for useSyncExternalStore.
+     *
+     * @returns The current state
+     */
+    getSnapshot: () => TState;
+    /**
+     * Subscribes a listener to state changes for useSyncExternalStore.
+     *
+     * @param listener - Function to call when state changes
+     * @returns Unsubscribe function
+     */
+    subscribe: (listener: () => void) => (() => void);
+}

package/dist/store/BaseStoreService.js

@@ -0,0 +1,90 @@
+class r {
+  /** Set of listeners subscribed to state changes */
+  listeners = /* @__PURE__ */ new Set();
+  /** The localStorage key for persisting state */
+  storageKey;
+  /** Whether this store should persist state to localStorage */
+  shouldPersist;
+  /** The current state */
+  state;
+  /**
+   * Creates a new BaseStoreService instance.
+   *
+   * @param storageKey - The localStorage key for persisting state (used only if shouldPersist is true)
+   * @param defaultState - The default state value
+   * @param shouldLoadOnInit - Whether to load persisted state on initialization (only works if shouldPersist is true)
+   * @param shouldPersist - Whether to persist state to localStorage (default: true)
+   */
+  constructor(t, e, a = !0, s = !0) {
+    this.storageKey = t, this.shouldPersist = s, this.state = e, a && s && this.loadState();
+  }
+  /**
+   * Saves the current state to localStorage.
+   *
+   * @protected
+   */
+  saveState() {
+    if (this.shouldPersist)
+      try {
+        const t = this.toPersistableState(this.state);
+        localStorage.setItem(this.storageKey, JSON.stringify(t));
+      } catch {
+        console.warn(`Failed to save ${this.getServiceName()} state to localStorage`);
+      }
+  }
+  /**
+   * Loads previously persisted state from localStorage.
+   * If no state exists or loading fails, keeps the current state.
+   *
+   * @protected
+   */
+  loadState() {
+    if (this.shouldPersist)
+      try {
+        const t = localStorage.getItem(this.storageKey);
+        if (t) {
+          const e = JSON.parse(t);
+          this.state = this.fromPersistedState(e, this.state);
+        }
+      } catch {
+        console.warn(`Failed to load persisted ${this.getServiceName()} state from localStorage`);
+      }
+  }
+  /**
+   * Notifies all subscribed listeners about state changes.
+   *
+   * @protected
+   */
+  notifySubscribers() {
+    this.listeners.forEach((t) => t());
+  }
+  /**
+   * Updates the state using an updater function, persists the new state,
+   * and notifies all subscribers if the state changed.
+   *
+   * @param updater - Function that receives current state and returns new state
+   * @protected
+   */
+  setState(t) {
+    const e = t(this.state);
+    JSON.stringify(e) !== JSON.stringify(this.state) && (this.state = e, this.saveState(), this.notifySubscribers());
+  }
+  /**
+   * Returns the current state snapshot for useSyncExternalStore.
+   *
+   * @returns The current state
+   */
+  getSnapshot = () => this.state;
+  /**
+   * Subscribes a listener to state changes for useSyncExternalStore.
+   *
+   * @param listener - Function to call when state changes
+   * @returns Unsubscribe function
+   */
+  subscribe = (t) => (this.listeners.add(t), () => {
+    this.listeners.delete(t);
+  });
+}
+export {
+  r as BaseStoreService
+};

package/dist/store/SectionsStore.d.ts

@@ -0,0 +1,40 @@
+import { ControlsGroup } from '../components/ControlRenderer/controls/types';
+import { DevPanelSection } from '../components/DevPanel/types';
+type SectionsState = Record<string, DevPanelSection>;
+/**
+ * React hook that subscribes only to the sections state of the dev panel.
+ * This hook will not re-render when UI state (position, visibility) changes.
+ *
+ * @returns Record of section names to section objects
+ *
+ * @example
+ * ```typescript
+ * const sections = useDevPanelSections();
+ * const sectionNames = Object.keys(sections);
+ * ```
+ */
+export declare function useDevPanelSections(): SectionsState;
+/**
+ * React hook that provides access to section actions without subscribing to state.
+ * Ideal for components that only need to trigger section actions without rendering on changes.
+ *
+ * @returns Object containing all available section actions
+ *
+ * @example
+ * ```typescript
+ * const { registerSection, toggleSectionCollapse } = useDevPanelSectionActions();
+ *
+ * // Add a new section
+ * registerSection('mySection', myControls);
+ *
+ * // Toggle section collapse
+ * toggleSectionCollapse('mySection');
+ * ```
+ */
+export declare function useDevPanelSectionActions(): {
+    registerSection: (name: string, controls: ControlsGroup) => void;
+    unregisterSection: (name: string) => void;
+    toggleSectionCollapse: (name: string) => void;
+    reset: () => void;
+};
+export {};

package/dist/store/SectionsStore.js

@@ -0,0 +1,114 @@
+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 {
+  d as useDevPanelSectionActions,
+  p as useDevPanelSections
+};