@berenjena/react-dev-panel 1.0.3 → 1.0.4

package/dist/components/Section/Section.js

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { ControlRenderer as i } from "../ControlRenderer/ControlRenderer.js";
-import { useDevPanelActions as r } from "../../store/store.js";
+import { a as r } from "../../UIStore-CQdr4U-2.js";
 import '../../assets/Section.css';const d = "_section_1vgul_1", g = "_header_1vgul_8", _ = "_title_1vgul_15", p = "_toggle_1vgul_20", m = "_collapsed_1vgul_29", v = "_content_1vgul_35", l = {
   section: d,
   header: g,
@@ -10,9 +10,9 @@ import '../../assets/Section.css';const d = "_section_1vgul_1", g = "_header_1vg
   content: v
 };
 function x({ sectionName: n, section: t }) {
-  const c = r();
+  const { toggleSectionCollapse: c } = r();
   return /* @__PURE__ */ o("div", { className: l.section, children: [
-    /* @__PURE__ */ o("div", { className: l.header, onClick: () => c.toggleSectionCollapse(n), children: [
+    /* @__PURE__ */ o("div", { className: l.header, onClick: () => c(n), children: [
       /* @__PURE__ */ e("span", { className: l.title, children: t.name }),
       /* @__PURE__ */ e("span", { className: l.toggle, children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: t.isCollapsed ? l.collapsed : void 0, children: /* @__PURE__ */ e("path", { d: "M10.211 7.155A.75.75 0 0 0 9 7.747v8.501a.75.75 0 0 0 1.212.591l5.498-4.258a.746.746 0 0 0-.001-1.183l-5.498-4.243z" }) }) })
     ] }),

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

@@ -0,0 +1 @@
+export * from './useDebounceCallback';

package/dist/hooks/useDebounceCallback/index.js

@@ -0,0 +1,4 @@
+import { useDebouncedCallback as a } from "./useDebounceCallback.js";
+export {
+  a as useDebouncedCallback
+};

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

@@ -0,0 +1,8 @@
+/**
+ * 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/useDebounceCallback.js

@@ -0,0 +1,17 @@
+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 {
+  f as useDebouncedCallback
+};

package/dist/hooks/useDevPanel/useDevPanel.js

@@ -1,15 +1,15 @@
-import { useRef as f, useEffect as s } from "react";
-import { useDevPanelStore as p } from "../../store/store.js";
-import { hasControlsChanged as v } from "../../utils/hasControlChanged/hasControlChanged.js";
-function C(e, r) {
-  const { sections: t, registerSection: o, unregisterSection: i } = p(), n = f(void 0);
-  s(() => {
-    const u = t[e] !== void 0;
-    (v(r, n.current) || !u) && (o(e, r), n.current = r);
-  }, [e, r, t, o]), s(() => () => {
-    i(e);
-  }, [e, i]);
+import { useRef as f, useEffect as i } from "react";
+import { u as c, a as v } from "../../UIStore-CQdr4U-2.js";
+import { hasControlsChanged as p } from "../../utils/hasControlChanged/hasControlChanged.js";
+function g(e, t) {
+  const r = c(), { registerSection: s, unregisterSection: n } = v(), o = f(void 0);
+  i(() => {
+    const u = r[e] !== void 0;
+    (p(t, o.current) || !u) && (s(e, t), o.current = t);
+  }, [e, t, r, s]), i(() => () => {
+    n(e);
+  }, [e, n]);
 }
 export {
-  C as useDevPanel
+  g as useDevPanel
 };

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,7 @@
+import "react";
+import "./BaseStoreService.js";
+import { a, u as i } from "../UIStore-CQdr4U-2.js";
+export {
+  a as useDevPanelSectionActions,
+  i as useDevPanelSections
+};

package/dist/store/{store.d.ts → UIStore.d.ts}

@@ -1,28 +1,25 @@
-import { ControlsGroup } from '../components/ControlRenderer/controls/types';
-import { DevPanelState, Position } from '../components/DevPanel/types';
+import { DevPanelUIState, Position } from '../components/DevPanel/types';
 /**
- * React hook that provides access to the complete dev panel state and actions.
+ * React hook that provides access to the complete dev panel UI state and actions.
  * Uses useSyncExternalStore for optimal performance and React 18 compatibility.
+ * This hook will not re-render when sections state changes.
  *
- * @returns Object containing the current state and all available actions
+ * @returns Object containing the current UI state and all available UI actions
  *
  * @example
  * ```typescript
  * const {
  *   isVisible,
- *   sections,
+ *   position,
  *   setVisible,
- *   registerSection
- * } = useDevPanelStore();
+ *   setPosition
+ * } = useDevPanelUI();
  * ```
  */
-export declare function useDevPanelStore(): DevPanelState & {
+export declare function useDevPanelUI(): DevPanelUIState & {
     setVisible: (visible: boolean) => void;
     setCollapsed: (collapsed: boolean) => void;
     setPosition: (position: Position) => void;
-    registerSection: (name: string, controls: ControlsGroup) => void;
-    unregisterSection: (name: string) => void;
-    toggleSectionCollapse: (name: string) => void;
     reset: () => void;
 };
 /**
@@ -63,44 +60,29 @@ export declare function useDevPanelCollapsed(): boolean;
  */
 export declare function useDevPanelPosition(): Position;
 /**
- * React hook that subscribes only to the sections state of the dev panel.
- * Optimized for components that only need to access panel sections.
+ * 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.
  *
- * @returns Record of section names to section objects
+ * @returns Object containing all available UI actions
  *
  * @example
  * ```typescript
- * const sections = useDevPanelSections();
- * const sectionNames = Object.keys(sections);
- * ```
- */
-export declare function useDevPanelSections(): Record<string, import('../components/DevPanel/types').DevPanelSection>;
-/**
- * React hook that provides access to all dev panel actions without subscribing to state.
- * Ideal for components that only need to trigger actions without rendering on state changes.
- *
- * @returns Object containing all available actions
- *
- * @example
- * ```typescript
- * const { setVisible, registerSection, reset } = useDevPanelActions();
+ * const { setVisible, setPosition, reset } = useDevPanelUIActions();
  *
  * // Toggle panel visibility
  * setVisible(true);
  *
- * // Add a new section
- * registerSection('mySection', myControls);
+ * // Update position
+ * setPosition({ x: 100, y: 100 });
  *
- * // Reset everything
+ * // Reset UI state
  * reset();
  * ```
  */
-export declare function useDevPanelActions(): {
+export declare function useDevPanelUIActions(): {
     setVisible: (visible: boolean) => void;
     setCollapsed: (collapsed: boolean) => void;
     setPosition: (position: Position) => void;
-    registerSection: (name: string, controls: ControlsGroup) => void;
-    unregisterSection: (name: string) => void;
-    toggleSectionCollapse: (name: string) => void;
     reset: () => void;
 };
+export declare const useDevPanelStore: typeof useDevPanelUI;

package/dist/store/UIStore.js

@@ -0,0 +1,11 @@
+import "react";
+import "./BaseStoreService.js";
+import { d as o, e as n, g as i, b as P, f as t, c as u } from "../UIStore-CQdr4U-2.js";
+export {
+  o as useDevPanelCollapsed,
+  n as useDevPanelPosition,
+  i as useDevPanelStore,
+  P as useDevPanelUI,
+  t as useDevPanelUIActions,
+  u as useDevPanelVisible
+};

package/dist/store/index.d.ts

@@ -1 +1,3 @@
-export * from './store';
+export * from './BaseStoreService';
+export * from './SectionsStore';
+export * from './UIStore';

package/dist/store/index.js

@@ -1,9 +1,13 @@
-import { useDevPanelActions as l, useDevPanelCollapsed as n, useDevPanelPosition as o, useDevPanelSections as a, useDevPanelStore as P, useDevPanelVisible as i } from "./store.js";
+import { BaseStoreService as a } from "./BaseStoreService.js";
+import { d as o, e as l, a as i, u as t, g as u, b as v, f as P, c as D } from "../UIStore-CQdr4U-2.js";
 export {
-  l as useDevPanelActions,
-  n as useDevPanelCollapsed,
-  o as useDevPanelPosition,
-  a as useDevPanelSections,
-  P as useDevPanelStore,
-  i as useDevPanelVisible
+  a as BaseStoreService,
+  o as useDevPanelCollapsed,
+  l as useDevPanelPosition,
+  i as useDevPanelSectionActions,
+  t as useDevPanelSections,
+  u as useDevPanelStore,
+  v as useDevPanelUI,
+  P as useDevPanelUIActions,
+  D as useDevPanelVisible
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"type": "module",
 	"module": "./dist/index.js",
 	"name": "@berenjena/react-dev-panel",