@berenjena/react-dev-panel 1.0.4 → 2.1.0

package/dist/components/DevPanel/DevPanel.js

@@ -1,67 +0,0 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useCallback as C } from "react";
-import { useDragAndDrop as w } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
-import { useHotkey as b } from "../../hooks/useHotkeys/useHotkey.js";
-import { b as y, u as D } from "../../UIStore-CQdr4U-2.js";
-import { className as P } from "../../utils/className/className.js";
-import { EmptyContent as x } from "../EmptyContent/EmptyContent.js";
-import { Section as K } from "../Section/Section.js";
-import '../../assets/DevPanel.css';const N = "_devPanelContainer_1vath_1", k = "_header_1vath_12", A = "_title_1vath_21", j = "_button_1vath_31", E = "_collapsed_1vath_53", H = "_content_1vath_60", t = {
-  devPanelContainer: N,
-  header: k,
-  title: A,
-  button: j,
-  collapsed: E,
-  content: H
-}, M = {
-  ctrlKey: !0,
-  shiftKey: !0,
-  key: "a",
-  altKey: !1,
-  metaKey: !1
-};
-function U({ panelTitle: d = "Dev panel", ...h }) {
-  const { isVisible: s, isCollapsed: n, position: l, setVisible: a, setCollapsed: m, setPosition: i } = y(), p = D(), v = C(
-    (o) => {
-      i(o);
-    },
-    [i]
-  ), { isDragging: u, elementRef: f, handleMouseDown: g } = w({
-    onPositionChange: v
-  });
-  if (b({
-    description: "Show Dev Panel",
-    preventDefault: !0,
-    action: () => a(!s),
-    ...M,
-    ...h.hotKeyConfig,
-    target: window
-  }), !s)
-    return null;
-  const r = Object.entries(p);
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      ref: f,
-      ...P(t.devPanelContainer, {
-        [t.dragging]: u
-      }),
-      style: {
-        left: l.x,
-        top: l.y,
-        height: n ? "auto" : void 0
-      },
-      children: [
-        /* @__PURE__ */ c("div", { className: t.header, onMouseDown: g, children: [
-          /* @__PURE__ */ e("button", { className: t.button, onClick: () => m(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: n ? t.collapsed : void 0, children: /* @__PURE__ */ e("path", { d: "M16.843 10.211A.75.75 0 0 0 16.251 9H7.75a.75.75 0 0 0-.591 1.212l4.258 5.498a.746.746 0 0 0 1.183-.001l4.243-5.498z" }) }) }),
-          /* @__PURE__ */ e("div", { className: t.title, children: d }),
-          /* @__PURE__ */ e("button", { className: t.button, onClick: () => a(!1), title: "Close", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "m12 10.93 5.719-5.72a.749.749 0 1 1 1.062 1.062l-5.72 5.719 5.719 5.719a.75.75 0 1 1-1.061 1.062L12 13.053l-5.719 5.719A.75.75 0 0 1 5.22 17.71l5.719-5.719-5.72-5.719A.752.752 0 0 1 6.281 5.21z" }) }) })
-        ] }),
-        !n && /* @__PURE__ */ e("div", { className: t.content, children: r.length ? r.map(([o, _]) => /* @__PURE__ */ e(K, { sectionName: o, section: _ }, `section-${o}`)) : /* @__PURE__ */ e(x, {}) })
-      ]
-    }
-  );
-}
-export {
-  U as DevPanel
-};

package/dist/components/EmptyContent/EmptyContent.d.ts

@@ -1 +0,0 @@
-export declare function EmptyContent(): import("react/jsx-runtime").JSX.Element;

package/dist/components/EmptyContent/EmptyContent.js

@@ -1,18 +0,0 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import '../../assets/EmptyContent.css';const o = "_empty_1xo8g_1", s = {
-  empty: o
-};
-function n() {
-  return /* @__PURE__ */ t("div", { className: s.empty, children: [
-    "No controls registered yet.",
-    /* @__PURE__ */ e("br", {}),
-    " ",
-    /* @__PURE__ */ e("br", {}),
-    "Use ",
-    /* @__PURE__ */ e("code", { children: "useDevPanel()" }),
-    " to add controls."
-  ] });
-}
-export {
-  n as EmptyContent
-};

package/dist/components/Input/Input.d.ts

@@ -1 +0,0 @@
-export declare function Input(props: React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/Input.js

@@ -1,10 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import '../../assets/Input.css';const p = "_input_161wd_1", u = {
-  input: p
-};
-function s(t) {
-  return /* @__PURE__ */ n("input", { ...t, className: u.input });
-}
-export {
-  s as Input
-};

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

@@ -1,20 +0,0 @@
-type LoggerProps = {
-    /** The data object to display in JSON format */
-    items: object;
-    /** Optional title for the logger panel */
-    title?: string;
-    /** Theme preference - 'auto' detects system preference */
-    theme?: "light" | "dark" | "auto";
-    /** Whether the logger should start collapsed */
-    defaultCollapsed?: boolean;
-    /** Whether the logger should be visible by default */
-    defaultVisible?: boolean;
-    /** Callback function called when the logger is closed */
-    onClose?: () => void;
-};
-/**
- * A floating, collapsible logger component that displays object data in JSON format.
- * @returns JSX element or null if not visible
- */
-export declare function Logger({ items, title, theme, defaultCollapsed, defaultVisible, onClose }: LoggerProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/components/Logger/index.js

@@ -1,85 +0,0 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useState as l, useRef as D, useEffect as h } from "react";
-import { className as I } from "../../utils/className/className.js";
-import '../../assets/index2.css';const O = "_logger_t8a3p_1", L = "_dark_t8a3p_17", S = "_collapsed_t8a3p_22", J = "_header_t8a3p_27", $ = "_title_t8a3p_49", A = "_controls_t8a3p_62", z = "_toggleButton_t8a3p_68", H = "_closeButton_t8a3p_104", M = "_content_t8a3p_129", R = "_jsonDisplay_t8a3p_139", T = "_empty_t8a3p_152", U = "_badge_t8a3p_162", V = "_updated_t8a3p_175", t = {
-  logger: O,
-  dark: L,
-  collapsed: S,
-  header: J,
-  title: $,
-  controls: A,
-  toggleButton: z,
-  closeButton: H,
-  content: M,
-  jsonDisplay: R,
-  empty: T,
-  badge: U,
-  updated: V
-};
-function F({ items: s, title: m = "Logger", theme: c = "auto", defaultCollapsed: f = !0, defaultVisible: y = !0, onClose: p }) {
-  const [a, v] = l(f), [N, b] = l(y), [C, d] = l(!1), [k, g] = l(!1), [u, w] = l(0), i = D("");
-  function _() {
-    v(!a);
-  }
-  function B() {
-    b(!1), p?.();
-  }
-  function x(o) {
-    try {
-      return JSON.stringify(o, null, 2);
-    } catch (n) {
-      return `Error formatting JSON: ${n}`;
-    }
-  }
-  if (h(() => {
-    if (c === "auto") {
-      const o = window.matchMedia("(prefers-color-scheme: dark)");
-      d(o.matches);
-      const n = (E) => d(E.matches);
-      return o.addEventListener("change", n), () => o.removeEventListener("change", n);
-    } else
-      d(c === "dark");
-  }, [c]), h(() => {
-    const o = JSON.stringify(s), n = Object.keys(s).length;
-    i.current && i.current !== o && (g(!0), setTimeout(() => g(!1), 600)), w(n), i.current = o;
-  }, [s]), !N) return null;
-  const j = !s || Object.keys(s).length === 0;
-  return /* @__PURE__ */ r("div", { className: `${t.logger} ${C ? t.dark : ""} ${a ? t.collapsed : ""}`, children: [
-    /* @__PURE__ */ r("div", { className: t.header, onClick: _, children: [
-      /* @__PURE__ */ r("h3", { className: t.title, children: [
-        m,
-        u > 0 && /* @__PURE__ */ e("span", { ...I(t.badge, { [t.updated]: k }), children: u })
-      ] }),
-      /* @__PURE__ */ r("div", { className: t.controls, children: [
-        /* @__PURE__ */ e(
-          "button",
-          {
-            className: t.toggleButton,
-            onClick: _,
-            type: "button",
-            "aria-label": a ? "Expand logger" : "Collapse logger",
-            title: a ? "Expand" : "Collapse",
-            children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: a ? t.collapsed : void 0, children: /* @__PURE__ */ e("path", { d: "M16.843 10.211A.75.75 0 0 0 16.251 9H7.75a.75.75 0 0 0-.591 1.212l4.258 5.498a.746.746 0 0 0 1.183-.001l4.243-5.498z" }) })
-          }
-        ),
-        p && /* @__PURE__ */ e(
-          "button",
-          {
-            className: t.closeButton,
-            type: "button",
-            "aria-label": "Close logger",
-            title: "Close",
-            onClick: (o) => {
-              o.stopPropagation(), B();
-            },
-            children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "m12 10.93 5.719-5.72a.749.749 0 1 1 1.062 1.062l-5.72 5.719 5.719 5.719a.75.75 0 1 1-1.061 1.062L12 13.053l-5.719 5.719A.75.75 0 0 1 5.22 17.71l5.719-5.719-5.72-5.719A.752.752 0 0 1 6.281 5.21z" }) })
-          }
-        )
-      ] })
-    ] }),
-    !a && /* @__PURE__ */ e("div", { className: t.content, children: j ? /* @__PURE__ */ e("div", { className: t.empty, children: "No data to display" }) : /* @__PURE__ */ e("pre", { className: t.jsonDisplay, children: /* @__PURE__ */ e("code", { children: x(s) }) }) })
-  ] });
-}
-export {
-  F as Logger
-};

package/dist/components/Section/Section.d.ts

@@ -1,7 +0,0 @@
-import { DevPanelSection } from '../DevPanel/types';
-type SectionProps = {
-    sectionName: string;
-    section: DevPanelSection;
-};
-export declare function Section({ sectionName, section }: SectionProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Section/Section.js

@@ -1,24 +0,0 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { ControlRenderer as i } from "../ControlRenderer/ControlRenderer.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,
-  title: _,
-  toggle: p,
-  collapsed: m,
-  content: v
-};
-function x({ sectionName: n, section: t }) {
-  const { toggleSectionCollapse: c } = r();
-  return /* @__PURE__ */ o("div", { className: l.section, 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" }) }) })
-    ] }),
-    !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 {
-  x as Section
-};

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

@@ -1 +0,0 @@
-export declare function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.js

@@ -1,10 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import '../../assets/Select.css';const s = "_select_12f91_1", c = {
-  select: s
-};
-function o(e) {
-  return /* @__PURE__ */ t("select", { ...e, className: c.select });
-}
-export {
-  o as Select
-};

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

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

@@ -1,17 +0,0 @@
-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.d.ts

@@ -1,24 +0,0 @@
-import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
-/**
- * Hook to register controls in the dev panel
- * @param sectionName - Section name (e.g: 'Global', 'HomePage')
- * @param controls - Controls configuration
- *
- * @example
- * ```typescript
- * useDevPanel('Global', {
- *   theme: {
- *     type: 'select',
- *     value: 'light',
- *     options: ['light', 'dark'],
- *     onChange: (value) => setTheme(value)
- *   },
- *   debugMode: {
- *     type: 'boolean',
- *     value: false,
- *     onChange: (value) => setDebugMode(value)
- *   }
- * });
- * ```
- */
-export declare function useDevPanel(sectionName: string, controls: ControlsGroup): void;

package/dist/hooks/useDevPanel/useDevPanel.js

@@ -1,15 +0,0 @@
-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 {
-  g as useDevPanel
-};

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

@@ -1,16 +0,0 @@
-import { Position } from '../../components/DevPanel/types';
-export interface UseDragAndDropProps {
-    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>;
-    handleMouseDown: (e: React.MouseEvent) => void;
-    stopDragging: () => void;
-    adjustPositionForResize: () => void;
-};

package/dist/hooks/useDragAndDrop/useDragAndDrop.js

@@ -1,55 +0,0 @@
-import { useRef as p, useState as l, useCallback as c, 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 z({ onPositionChange: i }) {
-  const o = p(null), [t, a] = l(!1), [u, v] = l({ x: 0, y: 0 }), m = c(() => {
-    const e = o.current;
-    if (!e) return;
-    const { constrainedPosition: n, needsAdjustment: d } = L(e);
-    d && i(n);
-  }, [i]), s = c(
-    (e) => {
-      if (!t || !o.current) return;
-      const n = {
-        x: e.clientX - u.x,
-        y: e.clientY - u.y
-      }, d = D(n, o.current);
-      i(d);
-    },
-    [t, u.x, u.y, i]
-  ), r = c(() => {
-    a(!1);
-  }, []), g = c((e) => {
-    if (e.target !== e.currentTarget) return;
-    e.preventDefault(), a(!0);
-    const n = o.current?.getBoundingClientRect();
-    n && v({
-      x: e.clientX - n.left,
-      y: e.clientY - n.top
-    });
-  }, []);
-  return f(() => {
-    if (!t) return;
-    const e = { passive: !0 };
-    return document.addEventListener("mousemove", s, e), document.addEventListener("mouseup", r, e), () => {
-      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r);
-    };
-  }, [t, s, r]), f(() => {
-    const e = E(m, 100);
-    return window.addEventListener("resize", e), () => {
-      window.removeEventListener("resize", e);
-    };
-  }, [m]), f(() => () => {
-    t && (document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r));
-  }, [t, s, r]), {
-    isDragging: t,
-    elementRef: o,
-    handleMouseDown: g,
-    stopDragging: r,
-    adjustPositionForResize: m
-  };
-}
-export {
-  z 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/store/index.d.ts

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

package/dist/store/index.js

@@ -1,13 +0,0 @@
-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 {
-  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/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
-};