@berenjena/react-dev-panel 2.0.0 → 2.2.0

package/dist/components/Select/index.d.ts

@@ -1 +1,15 @@
-export * from './Select';
+export interface SelectProps {
+    value?: string | string[];
+    options: string[] | {
+        label: string;
+        value: string;
+    }[];
+    disabled?: boolean;
+    multiple?: boolean;
+    placeholder?: string;
+    onChange: (value: string | string[]) => void;
+}
+/**
+ * Unified Select component that can handle both single and multiple selection
+ */
+export declare function Select({ value, options, onChange, disabled, multiple, placeholder }: SelectProps): React.ReactNode;

package/dist/components/Select/index.js

@@ -1,4 +1,178 @@
-import { Select as r } from "./Select.js";
+import { jsxs as y, Fragment as M, jsx as a } from "react/jsx-runtime";
+import { useRef as x, useState as H, useCallback as q, useEffect as P } from "react";
+import { createPortal as T } from "react-dom";
+import { Icon as j } from "../Icon/index.js";
+import { useDevPanelPosition as B } from "../../store/UIStore.js";
+import { className as F } from "../../utils/className/className.js";
+import '../../assets/index7.css';const W = "_select_1hbiz_217", U = "_trigger_1hbiz_222", G = "_open_1hbiz_271", J = "_value_1hbiz_275", K = "_placeholder_1hbiz_284", Q = "_arrow_1hbiz_288", X = "_dropdownPortal_1hbiz_303", Y = "_dropdown_1hbiz_303", Z = "_option_1hbiz_342", ee = "_selected_1hbiz_360", te = "_checkbox_1hbiz_369", ne = "_label_1hbiz_390", r = {
+  select: W,
+  trigger: U,
+  open: G,
+  value: J,
+  placeholder: K,
+  arrow: Q,
+  dropdownPortal: X,
+  dropdown: Y,
+  option: Z,
+  selected: ee,
+  checkbox: te,
+  label: ne
+};
+function ae({ value: p, options: _, onChange: z, disabled: f = !1, multiple: u = !1, placeholder: L = "Select..." }) {
+  const w = B(), g = x(null), h = x(null), k = x(null), [c, m] = H(!1), [b, E] = H({
+    top: 0,
+    left: 0,
+    width: 0,
+    maxHeight: 200
+  }), d = u ? Array.isArray(p) ? p : [] : typeof p == "string" ? p : "", C = S(), D = u ? d.length === 0 : !d, s = q(() => {
+    c && E(N());
+  }, [c]);
+  function N() {
+    if (!h.current)
+      return {
+        top: 0,
+        left: 0,
+        width: 0,
+        maxHeight: 200
+      };
+    const e = h.current.getBoundingClientRect(), t = window.innerHeight, n = window.innerWidth, o = 200, l = 4, i = t - e.bottom - l, v = e.top - l, R = i < o && v > i, V = R ? e.top - Math.min(o, v) : e.bottom + l, $ = Math.max(8, Math.min(e.left, n - e.width - 8)), I = R ? Math.min(o, v) : Math.min(o, i);
+    return {
+      top: V,
+      left: $,
+      width: e.width,
+      maxHeight: I
+    };
+  }
+  function O(e) {
+    if (u) {
+      const t = d, n = t.includes(e) ? t.filter((o) => o !== e) : [...t, e];
+      z(n);
+    } else
+      z(e), m(!1);
+  }
+  function S() {
+    if (u) {
+      const e = d;
+      if (e.length === 0)
+        return L;
+      if (e.length === 1) {
+        const t = _.find((o) => (typeof o == "string" ? o : o.value) === e[0]);
+        return (typeof t == "string" ? t : t?.label) || e[0];
+      }
+      return `${e.length} selected`;
+    } else {
+      const e = d;
+      if (!e)
+        return L;
+      const t = _.find((o) => (typeof o == "string" ? o : o.value) === e);
+      return (typeof t == "string" ? t : t?.label) || e;
+    }
+  }
+  function A() {
+    f || (c ? m(!1) : (E(N()), m(!0)));
+  }
+  return P(() => {
+    if (!c) return;
+    s(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0);
+    const e = g.current?.closest("[data-dev-panel]") || document.querySelector("[data-dev-panel]");
+    e && e.addEventListener("scroll", s, !0);
+    let t = null;
+    if (h.current && "IntersectionObserver" in window) {
+      const n = {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      };
+      t = new IntersectionObserver(
+        (o) => {
+          const l = o[0];
+          if (l && l.target === h.current) {
+            const i = l.boundingClientRect;
+            (i.top !== n.top || i.left !== n.left || i.width !== n.width || i.height !== n.height) && (n.top = i.top, n.left = i.left, n.width = i.width, n.height = i.height, s());
+          }
+        },
+        {
+          threshold: [0, 0.1, 0.5, 1]
+        }
+      ), t.observe(h.current);
+    }
+    return () => {
+      window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), e && e.removeEventListener("scroll", s, !0), t && t.disconnect();
+    };
+  }, [c, s]), P(() => {
+    const e = k.current;
+    (!e || e.x !== w.x || e.y !== w.y) && (k.current = w, c && requestAnimationFrame(s));
+  }, [c, w, s]), P(() => {
+    function e(t) {
+      if (g.current && !g.current.contains(t.target)) {
+        const n = document.querySelector(`.${r.dropdownPortal}`);
+        if (n && n.contains(t.target))
+          return;
+        m(!1);
+      }
+    }
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, []), /* @__PURE__ */ y(M, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: g,
+        ...F(r.select, {
+          [r.disabled]: f,
+          [r.open]: c
+        }),
+        children: /* @__PURE__ */ y("button", { ref: h, type: "button", className: r.trigger, onClick: A, disabled: f, children: [
+          /* @__PURE__ */ a("span", { className: `${r.value} ${D ? r.placeholder : ""}`, children: C }),
+          /* @__PURE__ */ a(j, { name: "ArrowDown", className: r.arrow })
+        ] })
+      }
+    ),
+    typeof window < "u" && T(
+      c && !f && /* @__PURE__ */ a(
+        "div",
+        {
+          className: r.dropdownPortal,
+          style: {
+            position: "fixed",
+            top: b.top,
+            left: b.left,
+            width: b.width,
+            maxHeight: b.maxHeight,
+            zIndex: 9999
+          },
+          children: /* @__PURE__ */ a("div", { className: r.dropdown, children: _.map((e) => {
+            const t = typeof e == "string" ? e : e.value, n = typeof e == "string" ? e : e.label, o = u ? d.includes(t) : d === t;
+            return u ? /* @__PURE__ */ y("label", { className: r.option, children: [
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: o,
+                  onChange: () => O(t),
+                  className: r.checkbox
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: r.label, children: n })
+            ] }, t) : /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                className: `${r.option} ${o ? r.selected : ""}`,
+                onClick: () => O(t),
+                children: n
+              },
+              t
+            );
+          }) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 export {
-  r as Select
+  ae as Select
 };

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,5 @@
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    disableAutoExpand?: boolean;
+}
+export declare function Textarea(props: TextareaProps): React.ReactNode;
+export {};

package/dist/components/Textarea/index.js

@@ -0,0 +1,18 @@
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/index6.css';const h = "_textarea_83ckv_217", x = {
+  textarea: h
+}, a = 240;
+function g(r) {
+  const { disableAutoExpand: o, onChange: n, ...s } = r;
+  function l(e) {
+    if (!o && e.currentTarget) {
+      const t = e.currentTarget;
+      t.style.height = "auto", t.style.height = `${t.scrollHeight}px`, t.scrollHeight > a ? t.style.overflowY = "auto" : t.style.overflowY = "hidden";
+    }
+    n?.(e);
+  }
+  return /* @__PURE__ */ c("textarea", { ...s, className: x.textarea, onChange: l, style: { maxHeight: `${a}px` } });
+}
+export {
+  g as Textarea
+};

package/dist/components/index.js

@@ -1,6 +1,6 @@
-import { DevPanel as e } from "./DevPanel/DevPanel.js";
-import { DevPanelPortal as l } from "./DevPanelPortal/DevPanelPortal.js";
-import { ControlRenderer as f } 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 {
   f as ControlRenderer,

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