@berenjena/react-dev-panel 1.0.3 → 2.0.0

package/dist/components/DevPanel/DevPanel.js

@@ -1,67 +1,72 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useCallback as g } from "react";
-import { useDragAndDrop as _ } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
-import { useHotkey as C } from "../../hooks/useHotkeys/useHotkey.js";
-import { useDevPanelStore as w } from "../../store/store.js";
-import { className as b } from "../../utils/className/className.js";
-import { EmptyContent as y } from "../EmptyContent/EmptyContent.js";
-import { Section as D } from "../Section/Section.js";
-import '../../assets/DevPanel.css';const P = "_devPanelContainer_1vath_1", x = "_header_1vath_12", K = "_title_1vath_21", N = "_button_1vath_31", k = "_collapsed_1vath_53", A = "_content_1vath_60", t = {
-  devPanelContainer: P,
-  header: x,
-  title: K,
-  button: N,
-  collapsed: k,
-  content: A
-}, j = {
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useCallback as D, useEffect as y } from "react";
+import { useDragAndDrop as b } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
+import { useHotkey as w } from "../../hooks/useHotkeys/useHotkey.js";
+import { useDevPanelSections as K } from "../../store/SectionsStore.js";
+import { useDevPanelThemeActions as N } from "../../store/ThemeStore.js";
+import { useDevPanelUI as k } from "../../store/UIStore.js";
+import { className as x } from "../../utils/className/className.js";
+import { EmptyContent as E } from "../EmptyContent/EmptyContent.js";
+import { Icon as f } from "../Icon/index.js";
+import { Section as j } from "../Section/Section.js";
+import '../../assets/DevPanel.css';const A = "_devPanelContainer_vacct_132", S = "_header_vacct_171", H = "_title_vacct_186", I = "_button_vacct_197", T = "_collapsed_vacct_233", V = "_content_vacct_240", t = {
+  devPanelContainer: A,
+  header: S,
+  title: H,
+  button: I,
+  collapsed: T,
+  content: V
+}, O = {
   ctrlKey: !0,
   shiftKey: !0,
   key: "a",
   altKey: !1,
   metaKey: !1
 };
-function O({ panelTitle: c = "Dev panel", ...d }) {
-  const { isVisible: l, isCollapsed: o, position: a, sections: h, ...n } = w(), m = g(
-    (s) => {
-      n.setPosition(s);
+function Q({ panelTitle: h = "Dev panel", ...o }) {
+  const { isVisible: s, isCollapsed: n, position: a, setVisible: l, setCollapsed: u, setPosition: c } = k(), { setTheme: r } = N(), v = K(), p = D(
+    (i) => {
+      c(i);
     },
-    [n]
-  ), { isDragging: p, elementRef: v, handleMouseDown: u } = _({
-    onPositionChange: m
+    [c]
+  ), { isDragging: _, elementRef: C, handlePointerDown: g } = b({
+    onPositionChange: p
   });
-  if (C({
+  if (w({
     description: "Show Dev Panel",
     preventDefault: !0,
-    action: () => n.setVisible(!l),
-    ...j,
-    ...d.hotKeyConfig,
+    action: () => l(!s),
+    ...O,
+    ...o.hotKeyConfig,
     target: window
-  }), !l)
+  }), y(() => {
+    o.theme && r(o.theme);
+  }, [o.theme, r]), !s)
     return null;
-  const i = Object.entries(h);
-  return /* @__PURE__ */ r(
+  const m = Object.entries(v);
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: v,
-      ...b(t.devPanelContainer, {
-        [t.dragging]: p
+      ref: C,
+      ...x(t.devPanelContainer, {
+        [t.dragging]: _
       }),
       style: {
         left: a.x,
         top: a.y,
-        height: o ? "auto" : void 0
+        height: n ? "auto" : void 0
       },
       children: [
-        /* @__PURE__ */ r("div", { className: t.header, onMouseDown: u, children: [
-          /* @__PURE__ */ e("button", { className: t.button, onClick: () => n.setCollapsed(!o), title: o ? "Expand" : "Collapse", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: o ? 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: c }),
-          /* @__PURE__ */ e("button", { className: t.button, onClick: () => n.setVisible(!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" }) }) })
+        /* @__PURE__ */ d("div", { className: t.header, onPointerDown: g, children: [
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => u(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e(f, { name: "ArrowDown", className: n ? t.collapsed : void 0 }) }),
+          /* @__PURE__ */ e("div", { className: t.title, children: h }),
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => l(!1), title: "Close", children: /* @__PURE__ */ e(f, { name: "Close" }) })
         ] }),
-        !o && /* @__PURE__ */ e("div", { className: t.content, children: i.length ? i.map(([s, f]) => /* @__PURE__ */ e(D, { sectionName: s, section: f }, `section-${s}`)) : /* @__PURE__ */ e(y, {}) })
+        !n && /* @__PURE__ */ e("div", { className: t.content, children: m.length ? m.map(([i, P]) => /* @__PURE__ */ e(j, { sectionName: i, section: P }, `section-${i}`)) : /* @__PURE__ */ e(E, {}) })
       ]
     }
   );
 }
 export {
-  O as DevPanel
+  Q as DevPanel
 };

package/dist/components/DevPanel/types.d.ts

@@ -1,5 +1,27 @@
 import { ControlsGroup } from '../ControlRenderer/controls/types';
 export type DevPanelHotkeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
+export type BuiltInTheme =
+	| "auto"
+	| "dark"
+	| "light"
+	| "orange"
+	| "purple"
+	| "green"
+	| "neon"
+	| "corporate"
+	| "highContrast"
+	| "sunset"
+	| "ocean"
+	| "forest"
+	| "midnight"
+	| "cherry"
+	| "gold"
+	| "retro"
+	| "pastel"
+	| "cyberpunk"
+	| "autumn"
+	| "arctic"
+	| "volcano";
 
 export interface DevPanelProps {
 	panelTitle?: string;
@@ -17,6 +39,8 @@ export interface DevPanelProps {
 	 * ```
 	 */
 	hotKeyConfig?: DevPanelHotkeyConfig;
+
+	theme?: BuiltInTheme;
 }
 
 export interface DevPanelSection {
@@ -32,6 +56,8 @@ export interface DevPanelState {
 	position: Position;
 }
 
+export type DevPanelUIState = Omit<DevPanelState, "sections">;
+
 export interface DevPanelActions {
 	setVisible: (visible: boolean) => void;
 	setCollapsed: (collapsed: boolean) => void;

package/dist/components/DevPanelPortal/DevPanelPortal.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Portal component that renders DevPanel using React's createPortal.
+ * Automatically subscribes to DevPanelManager prop changes and renders
+ * the DevPanel with merged props into document.body.
+ *
+ * @returns DevPanel rendered as a portal in document.body
+ */
+export declare const DevPanelPortal: () => import('react').ReactPortal;

package/dist/components/DevPanelPortal/DevPanelPortal.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as a, useEffect as m } from "react";
+import { createPortal as c } from "react-dom";
+import { DevPanelManager as r } from "../../managers/DevPanelManager.js";
+import { DevPanel as p } from "../DevPanel/DevPanel.js";
+const b = () => {
+  const [t, e] = a({});
+  return m(() => {
+    const o = r.getInstance().getAllProps();
+    return e(o), r.getInstance().onPropsChange((n) => {
+      e(n);
+    });
+  }, []), c(/* @__PURE__ */ s(p, { ...t }), document.body);
+};
+export {
+  b as DevPanelPortal
+};

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

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

package/dist/components/DevPanelPortal/index.js

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

package/dist/components/EmptyContent/EmptyContent.js

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

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

@@ -0,0 +1,16 @@
+declare const availableIcons: {
+    ArrowDown: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    Close: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    Check: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+};
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    /** The name of the icon to render */
+    name: keyof typeof availableIcons;
+}
+/**
+ * Icon component for rendering SVG icons.
+ * @param props - The properties for the icon component.
+ * @returns The SVG element for the specified icon, or null if the icon is not found.
+ */
+export declare function Icon({ name, ...props }: IconProps): React.ReactNode;
+export {};

package/dist/components/Icon/index.js

@@ -0,0 +1,31 @@
+import { jsx as l } from "react/jsx-runtime";
+const t = {
+  ArrowDown: (o) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...o, children: /* @__PURE__ */ l("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" }) }),
+  Close: (o) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...o, children: /* @__PURE__ */ l("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" }) }),
+  Check: (o) => /* @__PURE__ */ l(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      clipRule: "evenodd",
+      fillRule: "evenodd",
+      strokeLinejoin: "round",
+      strokeMiterlimit: "2",
+      ...o,
+      children: /* @__PURE__ */ l(
+        "path",
+        {
+          d: "m21 4.009c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-14.051 8.382c-.165-.148-.249-.352-.249-.557 0-.411.333-.746.748-.746.178 0 .355.063.499.19l3.298 2.938 5.453-5.962c.149-.161.35-.243.554-.243.417 0 .748.337.748.747 0 .179-.065.359-.196.502l-5.953 6.509c-.147.161-.35.242-.552.242-.178 0-.357-.062-.499-.19z",
+          fillRule: "nonzero"
+        }
+      )
+    }
+  )
+};
+function r({ name: o, ...e }) {
+  const n = t[o];
+  return n ? /* @__PURE__ */ l(n, { ...e }) : null;
+}
+export {
+  r as Icon
+};

package/dist/components/Input/Input.js

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

package/dist/components/Section/Section.js

@@ -1,24 +1,25 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as o } 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 = {
+import { useDevPanelSectionActions as r } from "../../store/SectionsStore.js";
+import { Icon as p } from "../Icon/index.js";
+import '../../assets/Section.css';const d = "_section_plx7y_1", _ = "_header_plx7y_9", m = "_title_plx7y_28", g = "_toggle_plx7y_35", h = "_collapsed_plx7y_45", x = "_content_plx7y_54", e = {
   section: d,
-  header: g,
-  title: _,
-  toggle: p,
-  collapsed: m,
-  content: v
+  header: _,
+  title: m,
+  toggle: g,
+  collapsed: h,
+  content: x
 };
-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" }) }) })
+function N({ sectionName: s, section: t }) {
+  const { toggleSectionCollapse: c } = r();
+  return /* @__PURE__ */ n("div", { className: e.section, children: [
+    /* @__PURE__ */ n("div", { className: e.header, onClick: () => c(s), children: [
+      /* @__PURE__ */ o("span", { className: e.title, children: t.name }),
+      /* @__PURE__ */ o("span", { className: e.toggle, children: /* @__PURE__ */ o(p, { name: "ArrowDown", className: t.isCollapsed ? e.collapsed : void 0 }) })
     ] }),
-    !t.isCollapsed && /* @__PURE__ */ e("div", { className: l.content, children: Object.entries(t.controls).map(([s, a]) => /* @__PURE__ */ e(i, { name: s, control: a }, s)) })
+    !t.isCollapsed && /* @__PURE__ */ o("div", { className: e.content, children: Object.entries(t.controls).map(([l, a]) => /* @__PURE__ */ o(i, { name: l, control: a }, l)) })
   ] });
 }
 export {
-  x as Section
+  N as Section
 };

package/dist/components/Select/Select.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import '../../assets/Select.css';const s = "_select_12f91_1", c = {
+import '../../assets/Select.css';const s = "_select_ia86w_132", c = {
   select: s
 };
 function o(e) {

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

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.d.ts

@@ -1,8 +1,10 @@
 import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
+import { DevPanelProps } from '../../components/DevPanel/types';
 /**
- * Hook to register controls in the dev panel
+ * Hook to register controls in the dev panel with auto-mounting
  * @param sectionName - Section name (e.g: 'Global', 'HomePage')
- * @param controls - Controls configuration
+ * @param controls - Controls configuration object
+ * @param devPanelProps - Optional DevPanel configuration (title, hotkey, theme)
  *
  * @example
  * ```typescript
@@ -11,14 +13,17 @@ import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
  *     type: 'select',
  *     value: 'light',
  *     options: ['light', 'dark'],
- *     onChange: (value) => setTheme(value)
+ *     onChange: setTheme
  *   },
  *   debugMode: {
  *     type: 'boolean',
  *     value: false,
- *     onChange: (value) => setDebugMode(value)
+ *     onChange: setDebugMode
  *   }
+ * }, {
+ *   panelTitle: 'My App Controls',
+ *   theme: 'dark'
  * });
  * ```
  */
-export declare function useDevPanel(sectionName: string, controls: ControlsGroup): void;
+export declare function useDevPanel(sectionName: string, controls: ControlsGroup, devPanelProps?: DevPanelProps): void;