@berenjena/react-dev-panel 2.0.0 → 2.2.0

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

@@ -1,20 +0,0 @@
-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): {
-    isDragging: boolean;
-    elementRef: import('react').RefObject<HTMLDivElement | null>;
-    handlePointerDown: (e: React.PointerEvent) => void;
-    stopDragging: () => void;
-    adjustPositionForResize: () => void;
-};

package/dist/hooks/useDragAndDrop/useDragAndDrop.js

@@ -1,55 +0,0 @@
-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 {
-  R as useDragAndDrop
-};

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

@@ -1,37 +0,0 @@
-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/useHotkeys.js

@@ -1,31 +0,0 @@
-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 {
-  M as useHotkeys
-};

package/dist/managers/index.d.ts

@@ -1 +0,0 @@
-export { DevPanelManager } from './DevPanelManager';

package/dist/managers/index.js

@@ -1,4 +0,0 @@
-import { DevPanelManager as r } from "./DevPanelManager.js";
-export {
-  r as DevPanelManager
-};

package/dist/store/ThemeStore.d.ts

@@ -1,68 +0,0 @@
-interface ThemeState {
-    currentTheme: 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(): ThemeState & {
-    setTheme: (theme: string) => void;
-    resetTheme: () => void;
-    getCurrentTheme: () => string;
-};
-/**
- * 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 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 {};

package/dist/store/ThemeStore.js

@@ -1,102 +0,0 @@
-import { useSyncExternalStore as n } from "react";
-import { BaseStoreService as h } from "./BaseStoreService.js";
-const m = "dev-panel-theme-storage", u = {
-  currentTheme: "auto"
-};
-class o extends h {
-  /**
-   * Creates a new DevPanelThemeService instance and loads persisted theme from localStorage.
-   */
-  constructor() {
-    super(m, u, !0, !0), this.applyTheme(this.getSnapshot().currentTheme);
-  }
-  /**
-   * Transforms current state to persistable format.
-   *
-   * @param state - The current theme state
-   * @returns The state in persistable format
-   * @protected
-   */
-  toPersistableState(e) {
-    return {
-      currentTheme: e.currentTheme
-    };
-  }
-  /**
-   * Transforms persisted state back to current state format.
-   *
-   * @param persistedState - The persisted theme state
-   * @param defaultState - The default state to fall back to
-   * @returns The state in current format
-   * @protected
-   */
-  fromPersistedState(e, r) {
-    return {
-      ...r,
-      currentTheme: e.currentTheme || r.currentTheme
-    };
-  }
-  /**
-   * Gets the service name for error messages.
-   *
-   * @returns The service name
-   * @protected
-   */
-  getServiceName() {
-    return "theme";
-  }
-  /**
-   * Applies the theme to the document root element using data attributes.
-   *
-   * @param theme - Theme name to apply
-   * @private
-   */
-  applyTheme(e) {
-    const r = document.documentElement;
-    e === "auto" || e === "" ? r.removeAttribute("data-dev-panel-theme") : r.setAttribute("data-dev-panel-theme", e);
-  }
-  /**
-   * Sets the current theme and applies it to the document.
-   *
-   * @param theme - Theme name to set
-   */
-  setTheme = (e) => {
-    this.setState((r) => ({ ...r, currentTheme: e })), this.applyTheme(e);
-  };
-  /**
-   * 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;
-}
-const t = new o();
-function c() {
-  return {
-    ...n(t.subscribe, t.getSnapshot),
-    setTheme: t.setTheme,
-    resetTheme: t.resetTheme,
-    getCurrentTheme: t.getCurrentTheme
-  };
-}
-function i() {
-  return n(t.subscribe, () => t.getSnapshot().currentTheme);
-}
-function p() {
-  return {
-    setTheme: t.setTheme,
-    resetTheme: t.resetTheme,
-    getCurrentTheme: t.getCurrentTheme
-  };
-}
-export {
-  i as useCurrentTheme,
-  c as useDevPanelTheme,
-  p as useDevPanelThemeActions
-};

package/dist/store/index.d.ts

@@ -1,4 +0,0 @@
-export * from './BaseStoreService';
-export * from './SectionsStore';
-export * from './ThemeStore';
-export * from './UIStore';

package/dist/store/index.js

@@ -1,18 +0,0 @@
-import { BaseStoreService as o } from "./BaseStoreService.js";
-import { useDevPanelSectionActions as l, useDevPanelSections as r } from "./SectionsStore.js";
-import { useCurrentTheme as a, useDevPanelTheme as u, useDevPanelThemeActions as v } from "./ThemeStore.js";
-import { useDevPanelCollapsed as i, useDevPanelPosition as D, useDevPanelStore as m, useDevPanelUI as c, useDevPanelUIActions as p, useDevPanelVisible as S } from "./UIStore.js";
-export {
-  o as BaseStoreService,
-  a as useCurrentTheme,
-  i as useDevPanelCollapsed,
-  D as useDevPanelPosition,
-  l as useDevPanelSectionActions,
-  r as useDevPanelSections,
-  m as useDevPanelStore,
-  u as useDevPanelTheme,
-  v as useDevPanelThemeActions,
-  c as useDevPanelUI,
-  p as useDevPanelUIActions,
-  S as useDevPanelVisible
-};

package/dist/utils/index.d.ts

@@ -1,9 +0,0 @@
-export * from './className';
-export * from './createHotkey';
-export * from './debounce';
-export * from './formatHotkey';
-export * from './getConstrainedPosition';
-export * from './getCurrentElementPosition';
-export * from './getPositionAdjustment';
-export * from './hasControlChanged';
-export * from './isMacOS';

package/dist/utils/index.js

@@ -1,20 +0,0 @@
-import { className as t } from "./className/className.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,
-  m as createHotkey,
-  f as debounce,
-  p as formatHotkey,
-  a as getConstrainedPosition,
-  c as getCurrentElementPosition,
-  g as getPositionAdjustment,
-  l as hasControlsChanged,
-  P as isMacOS
-};