@berenjena/react-dev-panel 1.0.4 → 2.1.0

package/dist/components/index.js

@@ -1,8 +1,10 @@
-import { controls as e } from "./ControlRenderer/controls/index.js";
-import { DevPanel as n } from "./DevPanel/DevPanel.js";
-import { ControlRenderer as l } from "./ControlRenderer/ControlRenderer.js";
+import { DevPanel as e } from "./DevPanel/index.js";
+import { DevPanelPortal as l } from "./DevPanelPortal/index.js";
+import { ControlRenderer as f } from "./ControlRenderer/index.js";
+import { controls as p } from "./ControlRenderer/controls/index.js";
 export {
-  l as ControlRenderer,
-  n as DevPanel,
-  e as controls
+  f as ControlRenderer,
+  e as DevPanel,
+  l as DevPanelPortal,
+  p as controls
 };

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

@@ -1 +1,8 @@
-export * from './useDebounceCallback';
+/**
+ * Creates a debounced version of a callback.
+ *
+ * @param callback - Function to debounce
+ * @param delay - Delay in ms before calling the callback
+ * @returns A debounced version of the callback
+ */
+export declare function useDebouncedCallback<T extends (...args: Parameters<T>) => void>(callback: T, delay: number): (...args: Parameters<T>) => void;

package/dist/hooks/useDebounceCallback/index.js

@@ -1,4 +1,17 @@
-import { useDebouncedCallback as a } from "./useDebounceCallback.js";
+import { useRef as n, useEffect as c, useCallback as o } from "react";
+function f(r, t) {
+  const e = n(null);
+  return c(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []), o(
+    (...u) => {
+      e.current && clearTimeout(e.current), e.current = window.setTimeout(() => {
+        r(...u);
+      }, t);
+    },
+    [r, t]
+  );
+}
 export {
-  a as useDebouncedCallback
+  f as useDebouncedCallback
 };

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

@@ -1 +1,29 @@
-export * from './useDevPanel';
+import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
+import { DevPanelProps } from '../../components/DevPanel/types';
+/**
+ * Hook to register controls in the dev panel with auto-mounting
+ * @param sectionName - Section name (e.g: 'Global', 'HomePage')
+ * @param controls - Controls configuration object
+ * @param devPanelProps - Optional DevPanel configuration (title, hotkey, theme)
+ *
+ * @example
+ * ```typescript
+ * useDevPanel('Global', {
+ *   theme: {
+ *     type: 'select',
+ *     value: 'light',
+ *     options: ['light', 'dark'],
+ *     onChange: setTheme
+ *   },
+ *   debugMode: {
+ *     type: 'boolean',
+ *     value: false,
+ *     onChange: setDebugMode
+ *   }
+ * }, {
+ *   panelTitle: 'My App Controls',
+ *   theme: 'dark'
+ * });
+ * ```
+ */
+export declare function useDevPanel(sectionName: string, controls: ControlsGroup, devPanelProps?: DevPanelProps): void;

package/dist/hooks/useDevPanel/index.js

@@ -1,4 +1,24 @@
-import { useDevPanel as r } from "./useDevPanel.js";
+import { useRef as f, useEffect as i, createElement as l } from "react";
+import { createRoot as m } from "react-dom/client";
+import { DevPanelPortal as p } from "../../components/DevPanelPortal/index.js";
+import { DevPanelManager as v } from "../../managers/DevPanelManager.js";
+import { useDevPanelSections as g, useDevPanelSectionActions as S } from "../../store/SectionsStore.js";
+import { hasControlsChanged as D } from "../../utils/hasControlChanged/hasControlChanged.js";
+function y(t, n, r) {
+  const c = g(), { registerSection: u, unregisterSection: a } = S(), s = f(void 0), o = f(null);
+  o.current || (o.current = v.getInstance()), i(() => {
+    const e = o.current, d = c[t] !== void 0;
+    D(n, s.current) || !d ? (u(t, n), s.current = n, e.addSection(t, r)) : r && e.updateProps(r);
+  }, [t, n, r, c, u]), i(() => () => {
+    const e = o.current;
+    a(t), e.removeSection(t);
+  }, [t, a]), i(() => {
+    if (window.__devPanelAutoMounted) return;
+    window.__devPanelAutoMounted = !0;
+    const e = document.createElement("div");
+    e.id = "dev-panel-portal-container", e.style.display = "none", document.body.appendChild(e), m(e).render(l(p));
+  }, []);
+}
 export {
-  r as useDevPanel
+  y as useDevPanel
 };

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

@@ -1 +1,20 @@
-export * from './useDragAndDrop';
+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;
+}
+/**
+ * Custom hook to handle drag and drop functionality
+ * Separates the drag logic from the main component
+ * Includes boundary constraints and window resize handling
+ */
+export declare function useDragAndDrop({ onPositionChange }: UseDragAndDropProps): {
+    elementRef: React.RefObject<HTMLDivElement | null>;
+    isDragging: boolean;
+    handlePointerDown: (e: React.PointerEvent) => void;
+    stopDragging: () => void;
+    adjustPositionForResize: () => void;
+};

package/dist/hooks/useDragAndDrop/index.js

@@ -1,4 +1,55 @@
-import { useDragAndDrop as e } from "./useDragAndDrop.js";
+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 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: m } = L(e);
+    m && s(n);
+  }, [s]), i = u(
+    (e) => {
+      if (!t || !o.current) return;
+      const n = {
+        x: e.clientX - c.x,
+        y: e.clientY - c.y
+      }, m = D(n, o.current);
+      s(m);
+    },
+    [t, c.x, c.y, s]
+  ), r = u(() => {
+    a(!1);
+  }, []), v = u((e) => {
+    if (e.target !== e.currentTarget) return;
+    e.preventDefault(), a(!0);
+    const n = o.current?.getBoundingClientRect();
+    n && l({
+      x: e.clientX - n.left,
+      y: e.clientY - n.top
+    });
+  }, []);
+  return f(() => {
+    if (!t) return;
+    const e = { passive: !0 };
+    return document.addEventListener("pointermove", i, e), document.addEventListener("pointerup", r, e), () => {
+      document.removeEventListener("pointermove", i), document.removeEventListener("pointerup", r);
+    };
+  }, [t, i, r]), f(() => {
+    const e = E(d, 100);
+    return window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, [d]), f(() => () => {
+    t && (document.removeEventListener("pointermove", i), document.removeEventListener("pointerup", r));
+  }, [t, i, r]), {
+    isDragging: t,
+    elementRef: o,
+    handlePointerDown: v,
+    stopDragging: r,
+    adjustPositionForResize: d
+  };
+}
 export {
-  e as useDragAndDrop
+  R as useDragAndDrop
 };

package/dist/hooks/{useHotkeys/useHotkey.d.ts → useHotKey/index.d.ts}

@@ -1,4 +1,4 @@
-import { HotkeyConfig, UseHotkeysOptions } from './types';
+import { HotkeyConfig, UseHotkeysOptions } from '../useHotkeys/types';
 /**
  * Hook for handling a single hotkey combination
  *

package/dist/hooks/{useHotkeys/useHotkey.js → useHotKey/index.js}

@@ -1,4 +1,4 @@
-import { useHotkeys as t } from "./useHotkeys.js";
+import { useHotkeys as t } from "../useHotkeys/index.js";
 function s(o, e = {}) {
   t([o], e);
 }

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

@@ -1,2 +1,37 @@
-export * from './useHotkey';
-export * from './useHotkeys';
+import { HotkeyConfig, UseHotkeysOptions } from './types';
+/**
+ * Hook for handling keyboard shortcuts (hotkeys) with support for modifier keys
+ * and multiple key combinations.
+ *
+ * @param hotkeys - Array of hotkey configurations
+ * @param options - Global options for all hotkeys
+ *
+ * @example
+ * // Basic usage
+ * useHotkeys([
+ *   { key: 'Enter', action: handleSubmit },
+ *   { key: 'Escape', action: handleCancel }
+ * ]);
+ *
+ * @example
+ * // With modifier keys
+ * useHotkeys([
+ *   { key: 's', ctrlKey: true, action: handleSave, description: 'Save' },
+ *   { key: 'k', metaKey: true, action: handleSearch, description: 'Search' },
+ *   { key: 'z', ctrlKey: true, action: handleUndo, description: 'Undo' },
+ *   { key: 'z', ctrlKey: true, shiftKey: true, action: handleRedo, description: 'Redo' }
+ * ]);
+ *
+ * @example
+ * // With individual configuration
+ * useHotkeys([
+ *   {
+ *     key: 'Delete',
+ *     action: handleDelete,
+ *     preventDefault: true,
+ *     enabled: canDelete,
+ *     description: 'Delete item'
+ *   }
+ * ]);
+ */
+export declare function useHotkeys(hotkeys: HotkeyConfig[], options?: UseHotkeysOptions): void;

package/dist/hooks/useHotkeys/index.js

@@ -1,6 +1,31 @@
-import { useHotkey as r } from "./useHotkey.js";
-import { useHotkeys as s } from "./useHotkeys.js";
+import { useRef as K, useCallback as y, useEffect as w } from "react";
+function M(h, p = {}) {
+  const { enabled: a = !0, target: c = window, preventDefault: f = !1, stopPropagation: l = !1 } = p, u = K([]);
+  u.current = h;
+  const i = y((t, e) => {
+    const o = t.key.toLowerCase() === e.key.toLowerCase(), n = !!e.ctrlKey === t.ctrlKey, s = !!e.shiftKey === t.shiftKey, d = !!e.altKey === t.altKey, k = !!e.metaKey === t.metaKey;
+    return o && n && s && d && k;
+  }, []), r = y(
+    (t) => {
+      if (!a) return;
+      const e = t;
+      for (const o of u.current)
+        if (o.enabled !== !1 && i(e, o)) {
+          const n = o.preventDefault ?? f, s = o.stopPropagation ?? l;
+          n && t.preventDefault(), s && t.stopPropagation(), o.action(e);
+          break;
+        }
+    },
+    [a, f, l, i]
+  );
+  w(() => {
+    const t = c;
+    if (!(!t || !a))
+      return t.addEventListener("keydown", r), () => {
+        t.removeEventListener("keydown", r);
+      };
+  }, [c, a, r]);
+}
 export {
-  r as useHotkey,
-  s as useHotkeys
+  M as useHotkeys
 };

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/index.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/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
 };