@berenjena/react-dev-panel 2.0.0 → 2.1.0

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.js

@@ -1,4 +1,4 @@
-import { useDevPanel as r } from "./hooks/useDevPanel/useDevPanel.js";
+import { useDevPanel as r } from "./hooks/useDevPanel/index.js";
 import './assets/index.css';export {
   r as useDevPanel
 };

package/dist/store/UIStore.d.ts

@@ -11,8 +11,10 @@ import { DevPanelUIState, Position } from '../components/DevPanel/types';
  * const {
  *   isVisible,
  *   position,
+ *   currentTheme,
  *   setVisible,
- *   setPosition
+ *   setPosition,
+ *   setTheme
  * } = useDevPanelUI();
  * ```
  */
@@ -20,6 +22,9 @@ export declare function useDevPanelUI(): DevPanelUIState & {
     setVisible: (visible: boolean) => void;
     setCollapsed: (collapsed: boolean) => void;
     setPosition: (position: Position) => void;
+    setTheme: (theme: string) => void;
+    resetTheme: () => void;
+    getCurrentTheme: () => string;
     reset: () => void;
 };
 /**
@@ -59,6 +64,46 @@ export declare function useDevPanelCollapsed(): boolean;
  * ```
  */
 export declare function useDevPanelPosition(): Position;
+/**
+ * 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 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(): {
+    currentTheme: string;
+    setTheme: (theme: string) => void;
+    resetTheme: () => void;
+    getCurrentTheme: () => string;
+};
 /**
  * React hook that provides access to all dev panel UI actions without subscribing to state.
  * Ideal for components that only need to trigger UI actions without rendering on state changes.
@@ -67,7 +112,7 @@ export declare function useDevPanelPosition(): Position;
  *
  * @example
  * ```typescript
- * const { setVisible, setPosition, reset } = useDevPanelUIActions();
+ * const { setVisible, setPosition, setTheme, reset } = useDevPanelUIActions();
  *
  * // Toggle panel visibility
  * setVisible(true);
@@ -75,6 +120,9 @@ export declare function useDevPanelPosition(): Position;
  * // Update position
  * setPosition({ x: 100, y: 100 });
  *
+ * // Set theme
+ * setTheme("dark");
+ *
  * // Reset UI state
  * reset();
  * ```
@@ -83,6 +131,34 @@ export declare function useDevPanelUIActions(): {
     setVisible: (visible: boolean) => void;
     setCollapsed: (collapsed: boolean) => void;
     setPosition: (position: Position) => void;
+    setTheme: (theme: string) => void;
+    resetTheme: () => void;
+    getCurrentTheme: () => string;
     reset: () => void;
 };
+/**
+ * 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 declare const useDevPanelStore: typeof useDevPanelUI;

package/dist/store/UIStore.js

@@ -1,16 +1,17 @@
-import { useSyncExternalStore as i } from "react";
-import { BaseStoreService as r } from "./BaseStoreService.js";
-const l = "dev-panel-ui-storage", a = { x: 20, y: 20 }, o = {
+import { useSyncExternalStore as r } from "react";
+import { BaseStoreService as o } from "./BaseStoreService.js";
+const u = "dev-panel-ui-storage", h = { x: 20, y: 20 }, n = {
   isVisible: !1,
   isCollapsed: !1,
-  position: a
+  position: h,
+  currentTheme: "auto"
 };
-class u extends r {
+class a extends o {
   /**
    * Creates a new DevPanelUIService instance and loads persisted state from localStorage.
    */
   constructor() {
-    super(l, o, !0, !0);
+    super(u, n, !0, !0), this.applyTheme(this.getSnapshot().currentTheme);
   }
   /**
    * Transforms current state to persistable format.
@@ -19,9 +20,12 @@ class u extends r {
    * @returns The state in persistable format
    * @protected
    */
-  toPersistableState(s) {
+  toPersistableState(t) {
     return {
-      ...s
+      isVisible: t.isVisible,
+      isCollapsed: t.isCollapsed,
+      position: t.position,
+      currentTheme: t.currentTheme
     };
   }
   /**
@@ -32,10 +36,10 @@ class u extends r {
    * @returns The state in current format
    * @protected
    */
-  fromPersistedState(s, t) {
+  fromPersistedState(t, s) {
     return {
-      ...t,
-      ...s
+      ...s,
+      ...t
     };
   }
   /**
@@ -47,71 +51,128 @@ class u extends r {
   getServiceName() {
     return "UI";
   }
+  /**
+   * Applies the theme to the document root element using data attributes.
+   *
+   * @param theme - Theme name to apply
+   * @private
+   */
+  applyTheme(t) {
+    const s = document.documentElement;
+    t === "auto" || t === "" ? s.removeAttribute("data-dev-panel-theme") : s.setAttribute("data-dev-panel-theme", t);
+  }
   /**
    * Sets the visibility state of the dev panel.
    *
    * @param visible - Whether the panel should be visible
    */
-  setVisible = (s) => {
-    this.setState((t) => ({ ...t, isVisible: s }));
+  setVisible = (t) => {
+    this.setState((s) => ({ ...s, isVisible: t }));
   };
   /**
    * Sets the collapsed state of the dev panel.
    *
    * @param collapsed - Whether the panel should be collapsed
    */
-  setCollapsed = (s) => {
-    this.setState((t) => ({ ...t, isCollapsed: s }));
+  setCollapsed = (t) => {
+    this.setState((s) => ({ ...s, isCollapsed: t }));
   };
   /**
    * Updates the position of the dev panel.
    *
    * @param position - New position coordinates {x, y}
    */
-  setPosition = (s) => {
-    this.setState((t) => ({ ...t, position: s }));
+  setPosition = (t) => {
+    this.setState((s) => ({ ...s, position: t }));
+  };
+  /**
+   * Sets the current theme and applies it to the document.
+   *
+   * @param theme - Theme name to set
+   */
+  setTheme = (t) => {
+    this.setState((s) => ({ ...s, currentTheme: t })), this.applyTheme(t);
+  };
+  /**
+   * 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;
   /**
    * Resets the dev panel UI to its default state.
-   * Resets position and sets visibility and collapse to false.
+   * Resets position, theme, and sets visibility and collapse to false.
    */
   reset = () => {
-    this.setState(() => ({ ...o }));
+    this.setState(() => ({ ...n })), this.applyTheme(n.currentTheme);
   };
 }
-const e = new u();
-function c() {
+const e = new a();
+function l() {
   return {
-    ...i(e.subscribe, e.getSnapshot),
+    ...r(e.subscribe, e.getSnapshot),
     setVisible: e.setVisible,
     setCollapsed: e.setCollapsed,
     setPosition: e.setPosition,
+    setTheme: e.setTheme,
+    resetTheme: e.resetTheme,
+    getCurrentTheme: e.getCurrentTheme,
     reset: e.reset
   };
 }
+function c() {
+  return r(e.subscribe, () => e.getSnapshot().isVisible);
+}
+function p() {
+  return r(e.subscribe, () => e.getSnapshot().isCollapsed);
+}
 function b() {
-  return i(e.subscribe, () => e.getSnapshot().isVisible);
+  return r(e.subscribe, () => e.getSnapshot().position);
 }
-function P() {
-  return i(e.subscribe, () => e.getSnapshot().isCollapsed);
+function S() {
+  return r(e.subscribe, () => e.getSnapshot().currentTheme);
 }
 function d() {
-  return i(e.subscribe, () => e.getSnapshot().position);
+  return {
+    currentTheme: r(e.subscribe, () => e.getSnapshot().currentTheme),
+    setTheme: e.setTheme,
+    resetTheme: e.resetTheme,
+    getCurrentTheme: e.getCurrentTheme
+  };
 }
-function v() {
+function C() {
   return {
     setVisible: e.setVisible,
     setCollapsed: e.setCollapsed,
     setPosition: e.setPosition,
+    setTheme: e.setTheme,
+    resetTheme: e.resetTheme,
+    getCurrentTheme: e.getCurrentTheme,
     reset: e.reset
   };
 }
-const f = c;
+function g() {
+  return {
+    setTheme: e.setTheme,
+    resetTheme: e.resetTheme,
+    getCurrentTheme: e.getCurrentTheme
+  };
+}
+const P = l;
 export {
-  P as useDevPanelCollapsed,
-  d as useDevPanelPosition,
-  f as useDevPanelStore,
-  c as useDevPanelUI,
-  v as useDevPanelUIActions,
-  b as useDevPanelVisible
+  S as useCurrentTheme,
+  p as useDevPanelCollapsed,
+  b as useDevPanelPosition,
+  P as useDevPanelStore,
+  d as useDevPanelTheme,
+  g as useDevPanelThemeActions,
+  l as useDevPanelUI,
+  C as useDevPanelUIActions,
+  c as useDevPanelVisible
 };

package/dist/utils/getPositionAdjustment/getPositionAdjustment.d.ts

@@ -1,10 +1,11 @@
+import { Position } from '../../components/DevPanel/types';
 /**
  * Checks if a position adjustment is needed after window resize
  * @param element - The HTML element to check
  * @returns Object containing the current position, constrained position, and whether adjustment is needed
  */
 export declare function getPositionAdjustment(element: HTMLElement): {
-    currentPosition: import('../../components/DevPanel/types').Position;
-    constrainedPosition: import('../../components/DevPanel/types').Position;
+    currentPosition: Position;
+    constrainedPosition: Position;
     needsAdjustment: boolean;
 };

package/dist/utils/getPositionAdjustment/getPositionAdjustment.js

@@ -1,10 +1,7 @@
 import { getConstrainedPosition as r } from "../getConstrainedPosition/getConstrainedPosition.js";
 import { getCurrentElementPosition as s } from "../getCurrentElementPosition/getCurrentElementPosition.js";
 function m(n) {
-  const t = s(n), o = r(
-    t,
-    n
-  ), i = o.x !== t.x || o.y !== t.y;
+  const t = s(n), o = r(t, n), i = o.x !== t.x || o.y !== t.y;
   return {
     currentPosition: t,
     constrainedPosition: o,