@berenjena/react-dev-panel 1.0.1 → 1.0.3

package/dist/components/Section/Section.js

@@ -1,23 +1,24 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { ControlRenderer as a } from "../ControlRenderer/controls/index.js";
-import { useDevPanelActions as r } from "../../utils/store/store.js";
-import '../../assets/Section.css';const d = "_section_19u37_1", _ = "_header_19u37_8", m = "_title_19u37_15", g = "_toggle_19u37_20", p = "_content_19u37_25", e = {
+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 '../../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: _,
-  title: m,
-  toggle: g,
-  content: p
+  header: g,
+  title: _,
+  toggle: p,
+  collapsed: m,
+  content: v
 };
-function f({ sectionName: c, section: t }) {
-  const l = r();
-  return /* @__PURE__ */ s("div", { className: e.section, children: [
-    /* @__PURE__ */ s("div", { className: e.header, onClick: () => l.toggleSectionCollapse(c), children: [
-      /* @__PURE__ */ n("span", { className: e.title, children: t.name }),
-      /* @__PURE__ */ n("span", { className: e.toggle, children: t.isCollapsed ? "▶" : "▼" })
+function x({ sectionName: n, section: t }) {
+  const c = r();
+  return /* @__PURE__ */ o("div", { className: l.section, children: [
+    /* @__PURE__ */ o("div", { className: l.header, onClick: () => c.toggleSectionCollapse(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" }) }) })
     ] }),
-    !t.isCollapsed && /* @__PURE__ */ n("div", { className: e.content, children: Object.entries(t.controls).map(([o, i]) => /* @__PURE__ */ n(a, { name: o, control: i }, o)) })
+    !t.isCollapsed && /* @__PURE__ */ e("div", { className: l.content, children: Object.entries(t.controls).map(([s, a]) => /* @__PURE__ */ e(i, { name: s, control: a }, s)) })
   ] });
 }
 export {
-  f as Section
+  x as Section
 };

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ControlRenderer/controls';
 export * from './DevPanel';
+export { ControlRenderer } from './ControlRenderer';

package/dist/components/index.js

@@ -1,7 +1,8 @@
-import { ControlRenderer as e, controls as n } from "./ControlRenderer/controls/index.js";
-import { DevPanel as l } from "./DevPanel/DevPanel.js";
+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";
 export {
-  e as ControlRenderer,
-  l as DevPanel,
-  n as controls
+  l as ControlRenderer,
+  n as DevPanel,
+  e as controls
 };

package/dist/hooks/useDevPanel/useDevPanel.js

@@ -1,14 +1,14 @@
-import { useRef as u, useEffect as s } from "react";
-import { hasControlsChanged as f } from "../../utils/hasControlChanged/hasControlChanged.js";
-import { useDevPanelActions as c, useDevPanelSections as v } from "../../utils/store/store.js";
-function C(e, t) {
-  const r = c(), n = v(), o = u(void 0);
+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 i = n[e] !== void 0;
-    (f(t, o.current) || !i) && (r.registerSection(e, t), o.current = t);
-  }, [r, e, t, n]), s(() => () => {
-    r.unregisterSection(e);
-  }, [r, e]);
+    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]);
 }
 export {
   C as useDevPanel

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

@@ -1,4 +1,4 @@
-import { Position } from '../../types';
+import { Position } from '../../components/DevPanel/types';
 export interface UseDragAndDropProps {
     onPositionChange: (position: Position) => void;
 }

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

@@ -4,3 +4,17 @@ export interface UseHotkeysOptions {
 	preventDefault?: boolean;
 	stopPropagation?: boolean;
 }
+
+export interface HotkeyConfig {
+	key: string;
+	description?: string;
+	ctrlKey?: boolean;
+	shiftKey?: boolean;
+	altKey?: boolean;
+	metaKey?: boolean;
+	preventDefault?: boolean;
+	stopPropagation?: boolean;
+	enabled?: boolean;
+	target?: HTMLElement | Window | Document;
+	action: (event: KeyboardEvent) => void;
+}

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

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

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

@@ -1,5 +1,4 @@
-import { HotkeyConfig } from '../../types';
-import { UseHotkeysOptions } from './types';
+import { HotkeyConfig, UseHotkeysOptions } from './types';
 /**
  * Hook for handling keyboard shortcuts (hotkeys) with support for modifier keys
  * and multiple key combinations.

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 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,9 +1,10 @@
-import { ControlRenderer as r, controls as n } from "./components/ControlRenderer/controls/index.js";
-import { DevPanel as l } from "./components/DevPanel/DevPanel.js";
-import { useDevPanel as m } from "./hooks/useDevPanel/useDevPanel.js";
-export {
-  r as ControlRenderer,
-  l as DevPanel,
-  n as controls,
-  m as useDevPanel
+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 './assets/index.css';export {
+  l as ControlRenderer,
+  n as DevPanel,
+  r as controls,
+  p as useDevPanel
 };

package/dist/store/store.d.ts

@@ -0,0 +1,106 @@
+import { ControlsGroup } from '../components/ControlRenderer/controls/types';
+import { DevPanelState, Position } from '../components/DevPanel/types';
+/**
+ * React hook that provides access to the complete dev panel state and actions.
+ * Uses useSyncExternalStore for optimal performance and React 18 compatibility.
+ *
+ * @returns Object containing the current state and all available actions
+ *
+ * @example
+ * ```typescript
+ * const {
+ *   isVisible,
+ *   sections,
+ *   setVisible,
+ *   registerSection
+ * } = useDevPanelStore();
+ * ```
+ */
+export declare function useDevPanelStore(): DevPanelState & {
+    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;
+};
+/**
+ * React hook that subscribes only to the visibility state of the dev panel.
+ * Optimized for components that only need to know if the panel is visible.
+ *
+ * @returns Boolean indicating whether the dev panel is visible
+ *
+ * @example
+ * ```typescript
+ * const isVisible = useDevPanelVisible();
+ * ```
+ */
+export declare function useDevPanelVisible(): boolean;
+/**
+ * React hook that subscribes only to the collapsed state of the dev panel.
+ * Optimized for components that only need to know if the panel is collapsed.
+ *
+ * @returns Boolean indicating whether the dev panel is collapsed
+ *
+ * @example
+ * ```typescript
+ * const isCollapsed = useDevPanelCollapsed();
+ * ```
+ */
+export declare function useDevPanelCollapsed(): boolean;
+/**
+ * React hook that subscribes only to the position state of the dev panel.
+ * Optimized for components that only need to track panel position.
+ *
+ * @returns Position object with x and y coordinates
+ *
+ * @example
+ * ```typescript
+ * const position = useDevPanelPosition();
+ * console.log(`Panel is at ${position.x}, ${position.y}`);
+ * ```
+ */
+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.
+ *
+ * @returns Record of section names to section objects
+ *
+ * @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();
+ *
+ * // Toggle panel visibility
+ * setVisible(true);
+ *
+ * // Add a new section
+ * registerSection('mySection', myControls);
+ *
+ * // Reset everything
+ * reset();
+ * ```
+ */
+export declare function useDevPanelActions(): {
+    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;
+};

package/dist/store/store.js

@@ -0,0 +1,239 @@
+import { useSyncExternalStore as o } from "react";
+const n = "dev-panel-storage", a = { x: 20, y: 20 };
+class d {
+  /** The current state of the dev panel */
+  state = {
+    isVisible: !1,
+    isCollapsed: !1,
+    sections: {},
+    position: a
+  };
+  /** Set of listeners subscribed to state changes */
+  listeners = /* @__PURE__ */ new Set();
+  /**
+   * Creates a new DevPanelService instance and loads persisted state from localStorage.
+   */
+  constructor() {
+    this.loadState();
+  }
+  /**
+   * Saves the current state to localStorage.
+   * Only persists visibility, collapse state, position, and section collapse states.
+   * Sections themselves are not persisted as they are dynamic and recreated on mount.
+   *
+   * @private
+   */
+  saveState() {
+    try {
+      const e = {
+        isVisible: this.state.isVisible,
+        isCollapsed: this.state.isCollapsed,
+        position: this.state.position,
+        sectionCollapseState: Object.fromEntries(
+          Object.entries(this.state.sections).map(([t, i]) => [t, i.isCollapsed ?? !1])
+        )
+      };
+      localStorage.setItem(n, JSON.stringify(e));
+    } catch {
+      console.warn("Failed to save state to localStorage");
+    }
+  }
+  /**
+   * Loads previously persisted state from localStorage.
+   * If no state exists or loading fails, uses default values.
+   *
+   * @private
+   */
+  loadState() {
+    try {
+      const e = localStorage.getItem(n);
+      if (e) {
+        const t = JSON.parse(e);
+        this.state = {
+          ...this.state,
+          isVisible: t.isVisible ?? !1,
+          isCollapsed: t.isCollapsed ?? !1,
+          position: t.position ?? a
+        };
+      }
+    } catch {
+      console.warn("Failed to load persisted state from localStorage");
+    }
+  }
+  /**
+   * Notifies all subscribed listeners about state changes.
+   *
+   * @private
+   */
+  notifySubscribers() {
+    this.listeners.forEach((e) => e());
+  }
+  /**
+   * Updates the state using an updater function, persists the new state,
+   * and notifies all subscribers.
+   *
+   * @param updater - Function that receives current state and returns new state
+   * @private
+   */
+  setState(e) {
+    this.state = e(this.state), this.saveState(), this.notifySubscribers();
+  }
+  /**
+   * Returns the current state snapshot for useSyncExternalStore.
+   *
+   * @returns The current dev panel state
+   */
+  getSnapshot = () => this.state;
+  /**
+   * Subscribes a listener to state changes for useSyncExternalStore.
+   *
+   * @param listener - Function to call when state changes
+   * @returns Unsubscribe function
+   */
+  subscribe = (e) => (this.listeners.add(e), () => {
+    this.listeners.delete(e);
+  });
+  /**
+   * Sets the visibility state of the dev panel.
+   *
+   * @param visible - Whether the panel should be visible
+   */
+  setVisible = (e) => {
+    this.setState((t) => ({ ...t, isVisible: e }));
+  };
+  /**
+   * Sets the collapsed state of the dev panel.
+   *
+   * @param collapsed - Whether the panel should be collapsed
+   */
+  setCollapsed = (e) => {
+    this.setState((t) => ({ ...t, isCollapsed: e }));
+  };
+  /**
+   * Updates the position of the dev panel.
+   *
+   * @param position - New position coordinates {x, y}
+   */
+  setPosition = (e) => {
+    this.setState((t) => ({ ...t, position: e }));
+  };
+  /**
+   * Registers a new section with the dev panel.
+   * If a section with the same name already exists, it preserves the existing collapse state.
+   * Otherwise, it attempts to restore the collapse state from localStorage.
+   *
+   * @param name - Unique name for the section
+   * @param controls - Array of control configurations for the section
+   */
+  registerSection = (e, t) => {
+    this.setState((i) => {
+      const l = i.sections[e];
+      let r = !1;
+      try {
+        const c = localStorage.getItem(n);
+        c && (r = JSON.parse(c).sectionCollapseState?.[e] ?? !1);
+      } catch {
+        console.warn("Failed to read section collapse state from localStorage");
+      }
+      const p = l?.isCollapsed ?? r;
+      return {
+        ...i,
+        sections: {
+          ...i.sections,
+          [e]: {
+            name: e,
+            controls: t,
+            isCollapsed: p
+          }
+        }
+      };
+    });
+  };
+  /**
+   * Removes a section from the dev panel.
+   *
+   * @param name - Name of the section to remove
+   */
+  unregisterSection = (e) => {
+    this.setState((t) => {
+      const { [e]: i, ...l } = t.sections;
+      return { ...t, sections: l };
+    });
+  };
+  /**
+   * Toggles the collapsed state of a specific section.
+   *
+   * @param name - Name of the section to toggle
+   */
+  toggleSectionCollapse = (e) => {
+    this.setState((t) => {
+      const i = t.sections[e];
+      return i ? {
+        ...t,
+        sections: {
+          ...t.sections,
+          [e]: {
+            ...i,
+            isCollapsed: !i.isCollapsed
+          }
+        }
+      } : t;
+    });
+  };
+  /**
+   * Resets the dev panel to its default state.
+   * Clears all sections, resets position, and sets visibility and collapse to false.
+   */
+  reset = () => {
+    this.setState(() => ({
+      isVisible: !1,
+      isCollapsed: !1,
+      sections: {},
+      position: a
+    }));
+  };
+}
+const s = new d();
+function b() {
+  return {
+    ...o(s.subscribe, s.getSnapshot),
+    setVisible: s.setVisible,
+    setCollapsed: s.setCollapsed,
+    setPosition: s.setPosition,
+    registerSection: s.registerSection,
+    unregisterSection: s.unregisterSection,
+    toggleSectionCollapse: s.toggleSectionCollapse,
+    reset: s.reset
+  };
+}
+function h() {
+  return o(s.subscribe, () => s.getSnapshot().isVisible);
+}
+function f() {
+  return o(s.subscribe, () => s.getSnapshot().isCollapsed);
+}
+function C() {
+  return o(s.subscribe, () => s.getSnapshot().position);
+}
+function v() {
+  return o(s.subscribe, () => s.getSnapshot().sections);
+}
+function P() {
+  return {
+    setVisible: s.setVisible,
+    setCollapsed: s.setCollapsed,
+    setPosition: s.setPosition,
+    registerSection: s.registerSection,
+    unregisterSection: s.unregisterSection,
+    toggleSectionCollapse: s.toggleSectionCollapse,
+    reset: s.reset
+  };
+}
+export {
+  P as useDevPanelActions,
+  f as useDevPanelCollapsed,
+  C as useDevPanelPosition,
+  v as useDevPanelSections,
+  b as useDevPanelStore,
+  h as useDevPanelVisible
+};

package/dist/utils/createHotkey/createHotkey.d.ts

@@ -1,4 +1,4 @@
-import { HotkeyConfig } from '../../types';
+import { HotkeyConfig } from '../../hooks/useHotkeys/types';
 /**
  * Utility function to create a hotkey configuration object
  *

package/dist/utils/formatHotkey/formatHotkey.d.ts

@@ -1,4 +1,4 @@
-import { HotkeyConfig } from '../../types';
+import { HotkeyConfig } from '../../hooks/useHotkeys/types';
 /**
  * Utility function to format hotkey combination as a human-readable string
  *

package/dist/utils/getConstrainedPosition/getConstrainedPosition.d.ts

@@ -1,4 +1,4 @@
-import { Position } from '../../types';
+import { Position } from '../../components/DevPanel/types';
 /**
  * Calculates the constrained position within viewport boundaries
  * @param position - The desired position

package/dist/utils/getCurrentElementPosition/getCurrentElementPosition.d.ts

@@ -1,4 +1,4 @@
-import { Position } from '../../types';
+import { Position } from '../../components/DevPanel/types';
 /**
  * Gets the current position of an element relative to the viewport
  * @param element - The HTML element

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

@@ -4,7 +4,7 @@
  * @returns Object containing the current position, constrained position, and whether adjustment is needed
  */
 export declare function getPositionAdjustment(element: HTMLElement): {
-    currentPosition: import('../../types').Position;
-    constrainedPosition: import('../../types').Position;
+    currentPosition: import('../../components/DevPanel/types').Position;
+    constrainedPosition: import('../../components/DevPanel/types').Position;
     needsAdjustment: boolean;
 };

package/dist/utils/hasControlChanged/hasControlChanged.js

@@ -1,14 +1,14 @@
-function s(n, r) {
+function a(n, r) {
   if (!r) return !0;
-  const i = Object.keys(n), l = Object.keys(r);
-  if (i.length !== l.length) return !0;
+  const i = Object.keys(n), s = Object.keys(r);
+  if (i.length !== s.length) return !0;
   for (const u of i) {
     const t = n[u], e = r[u];
-    if (!e || t.type !== e.type || t.label !== e.label || t.disabled !== e.disabled || "value" in t && "value" in e && t.value !== e.value || t.type === "number" && e.type === "number" && (t.min !== e.min || t.max !== e.max || t.step !== e.step) || t.type === "select" && e.type === "select" && JSON.stringify(t.options) !== JSON.stringify(e.options) || t.type === "text" && e.type === "text" && t.placeholder !== e.placeholder)
+    if (!e || t.type !== e.type || t.label !== e.label || t.disabled !== e.disabled || "value" in t && "value" in e && t.value !== e.value || t.type === "number" && e.type === "number" && (t.min !== e.min || t.max !== e.max || t.step !== e.step) || t.type === "range" && e.type === "range" && (t.min !== e.min || t.max !== e.max || t.step !== e.step) || t.type === "date" && e.type === "date" && (t.min !== e.min || t.max !== e.max) || t.type === "select" && e.type === "select" && JSON.stringify(t.options) !== JSON.stringify(e.options) || t.type === "text" && e.type === "text" && t.placeholder !== e.placeholder)
       return !0;
   }
   return !1;
 }
 export {
-  s as hasControlsChanged
+  a as hasControlsChanged
 };

package/dist/utils/index.d.ts

@@ -7,4 +7,3 @@ export * from './getCurrentElementPosition';
 export * from './getPositionAdjustment';
 export * from './hasControlChanged';
 export * from './isMacOS';
-export * from './store';

package/dist/utils/index.js

@@ -1,27 +1,20 @@
 import { className as t } from "./className/className.js";
-import { createHotkey as s } from "./createHotkey/createHotkey.js";
-import { debounce as a } from "./debounce/debounce.js";
-import { formatHotkey as m } from "./formatHotkey/formatHotkey.js";
-import { getConstrainedPosition as f } from "./getConstrainedPosition/getConstrainedPosition.js";
-import { getCurrentElementPosition as x } from "./getCurrentElementPosition/getCurrentElementPosition.js";
-import { getPositionAdjustment as u } from "./getPositionAdjustment/getPositionAdjustment.js";
-import { hasControlsChanged as v } from "./hasControlChanged/hasControlChanged.js";
-import { isMacOS as d } from "./isMacOS/isMacOS.js";
-import { useDevPanelActions as g, useDevPanelCollapsed as S, useDevPanelPosition as b, useDevPanelSections as h, useDevPanelStore as k, useDevPanelVisible as y } from "./store/store.js";
+import { createHotkey as m } from "./createHotkey/createHotkey.js";
+import { debounce as f } from "./debounce/debounce.js";
+import { formatHotkey as p } from "./formatHotkey/formatHotkey.js";
+import { getConstrainedPosition as a } from "./getConstrainedPosition/getConstrainedPosition.js";
+import { getCurrentElementPosition as c } from "./getCurrentElementPosition/getCurrentElementPosition.js";
+import { getPositionAdjustment as g } from "./getPositionAdjustment/getPositionAdjustment.js";
+import { hasControlsChanged as l } from "./hasControlChanged/hasControlChanged.js";
+import { isMacOS as P } from "./isMacOS/isMacOS.js";
 export {
   t as className,
-  s as createHotkey,
-  a as debounce,
-  m as formatHotkey,
-  f as getConstrainedPosition,
-  x as getCurrentElementPosition,
-  u as getPositionAdjustment,
-  v as hasControlsChanged,
-  d as isMacOS,
-  g as useDevPanelActions,
-  S as useDevPanelCollapsed,
-  b as useDevPanelPosition,
-  h as useDevPanelSections,
-  k as useDevPanelStore,
-  y as useDevPanelVisible
+  m as createHotkey,
+  f as debounce,
+  p as formatHotkey,
+  a as getConstrainedPosition,
+  c as getCurrentElementPosition,
+  g as getPositionAdjustment,
+  l as hasControlsChanged,
+  P as isMacOS
 };