@berenjena/react-dev-panel 1.0.3 → 2.0.0

package/dist/store/ThemeStore.d.ts

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,102 @@
+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/{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,117 @@
+import { useSyncExternalStore as i } from "react";
+import { BaseStoreService as r } from "./BaseStoreService.js";
+const l = "dev-panel-ui-storage", a = { x: 20, y: 20 }, o = {
+  isVisible: !1,
+  isCollapsed: !1,
+  position: a
+};
+class u extends r {
+  /**
+   * Creates a new DevPanelUIService instance and loads persisted state from localStorage.
+   */
+  constructor() {
+    super(l, o, !0, !0);
+  }
+  /**
+   * Transforms current state to persistable format.
+   *
+   * @param state - The current UI state
+   * @returns The state in persistable format
+   * @protected
+   */
+  toPersistableState(s) {
+    return {
+      ...s
+    };
+  }
+  /**
+   * Transforms persisted state back to current state format.
+   *
+   * @param persistedState - The persisted UI state
+   * @param defaultState - The default state to fall back to
+   * @returns The state in current format
+   * @protected
+   */
+  fromPersistedState(s, t) {
+    return {
+      ...t,
+      ...s
+    };
+  }
+  /**
+   * Gets the service name for error messages.
+   *
+   * @returns The service name
+   * @protected
+   */
+  getServiceName() {
+    return "UI";
+  }
+  /**
+   * Sets the visibility state of the dev panel.
+   *
+   * @param visible - Whether the panel should be visible
+   */
+  setVisible = (s) => {
+    this.setState((t) => ({ ...t, isVisible: s }));
+  };
+  /**
+   * Sets the collapsed state of the dev panel.
+   *
+   * @param collapsed - Whether the panel should be collapsed
+   */
+  setCollapsed = (s) => {
+    this.setState((t) => ({ ...t, isCollapsed: s }));
+  };
+  /**
+   * Updates the position of the dev panel.
+   *
+   * @param position - New position coordinates {x, y}
+   */
+  setPosition = (s) => {
+    this.setState((t) => ({ ...t, position: s }));
+  };
+  /**
+   * Resets the dev panel UI to its default state.
+   * Resets position and sets visibility and collapse to false.
+   */
+  reset = () => {
+    this.setState(() => ({ ...o }));
+  };
+}
+const e = new u();
+function c() {
+  return {
+    ...i(e.subscribe, e.getSnapshot),
+    setVisible: e.setVisible,
+    setCollapsed: e.setCollapsed,
+    setPosition: e.setPosition,
+    reset: e.reset
+  };
+}
+function b() {
+  return i(e.subscribe, () => e.getSnapshot().isVisible);
+}
+function P() {
+  return i(e.subscribe, () => e.getSnapshot().isCollapsed);
+}
+function d() {
+  return i(e.subscribe, () => e.getSnapshot().position);
+}
+function v() {
+  return {
+    setVisible: e.setVisible,
+    setCollapsed: e.setCollapsed,
+    setPosition: e.setPosition,
+    reset: e.reset
+  };
+}
+const f = c;
+export {
+  P as useDevPanelCollapsed,
+  d as useDevPanelPosition,
+  f as useDevPanelStore,
+  c as useDevPanelUI,
+  v as useDevPanelUIActions,
+  b as useDevPanelVisible
+};

package/dist/store/index.d.ts

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

package/dist/store/index.js

@@ -1,9 +1,18 @@
-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 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 {
-  l as useDevPanelActions,
-  n as useDevPanelCollapsed,
-  o as useDevPanelPosition,
-  a as useDevPanelSections,
-  P as useDevPanelStore,
-  i as useDevPanelVisible
+  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/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "1.0.3",
+	"version": "2.0.0",
 	"type": "module",
 	"module": "./dist/index.js",
 	"name": "@berenjena/react-dev-panel",
@@ -10,7 +10,9 @@
 		"development",
 		"panel",
 		"tools",
-		"utilities"
+		"utilities",
+		"gui",
+		"devtools"
 	],
 	"homepage": "https://github.com/Berenjenas/react-dev-panel",
 	"bugs": "https://github.com/Berenjenas/react-dev-panel/issues",
@@ -63,13 +65,20 @@
 		"test": "vitest",
 		"test:ui": "vitest --ui",
 		"coverage": "vitest run --coverage",
-		"prepublishOnly": "vitest run && npm run build"
+		"prepublishOnly": "vitest run && npm run build",
+		"changeset": "changeset",
+		"prerelease": "vitest run && npm run build",
+		"release": "changeset publish"
+	},
+	"publishConfig": {
+		"access": "public"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",
 		"react-dom": ">=18.0.0"
 	},
 	"devDependencies": {
+		"@changesets/cli": "^2.29.5",
 		"@eslint/js": "^9.30.1",
 		"@rollup/plugin-terser": "^0.4.4",
 		"@storybook/addon-docs": "^9.0.17",

package/dist/assets/index2.css

@@ -1 +0,0 @@
-._logger_t8a3p_1{position:fixed;bottom:20px;left:20px;width:400px;max-width:calc(100vw - 40px);max-height:calc(100vh - 80px);background:#fff;border:1px solid #e1e5e9;border-radius:8px;box-shadow:0 8px 32px #0000001f;z-index:9999;font-family:system-ui,-apple-system,sans-serif;overflow:hidden;transition:all .3s ease}._logger_t8a3p_1._dark_t8a3p_17{background:#1e1e1e;border-color:#333;color:#e0e0e0}._logger_t8a3p_1._collapsed_t8a3p_22{height:50px;overflow:hidden}._header_t8a3p_27{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8f9fa;border-bottom:1px solid #e1e5e9;cursor:pointer;user-select:none;transition:background-color .2s ease}._dark_t8a3p_17 ._header_t8a3p_27{background:#2a2a2a;border-bottom-color:#333}._header_t8a3p_27:hover{background:#e9ecef}._dark_t8a3p_17 ._header_t8a3p_27:hover{background:#333}._title_t8a3p_49{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:14px;color:#495057;margin:0}._dark_t8a3p_17 ._title_t8a3p_49{color:#e0e0e0}._controls_t8a3p_62{display:flex;align-items:center;gap:8px}._toggleButton_t8a3p_68{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}._dark_t8a3p_17 ._toggleButton_t8a3p_68{color:#adb5bd}._toggleButton_t8a3p_68:hover{background:#dee2e6;color:#495057}._dark_t8a3p_17 ._toggleButton_t8a3p_68:hover{background:#495057;color:#e0e0e0}._toggleButton_t8a3p_68>svg{display:block;height:1rem;transition:transform ease .2s}._toggleButton_t8a3p_68>svg._collapsed_t8a3p_22{transform:rotate(180deg)}._toggleButton_t8a3p_68>svg path{fill:currentColor}._closeButton_t8a3p_104{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#dc3545;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:all .2s ease}._closeButton_t8a3p_104:hover{background:#f5c6cb;color:#721c24}._dark_t8a3p_17 ._closeButton_t8a3p_104:hover{background:#721c24;color:#f5c6cb}._content_t8a3p_129{padding:16px;overflow:auto;max-height:calc(100vh - 160px);background:#fff}._dark_t8a3p_17 ._content_t8a3p_129{background:#1e1e1e}._jsonDisplay_t8a3p_139{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:12px;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-all;color:#212529}._dark_t8a3p_17 ._jsonDisplay_t8a3p_139{color:#e0e0e0}._empty_t8a3p_152{color:#6c757d;font-style:italic;text-align:center;padding:20px}._dark_t8a3p_17 ._empty_t8a3p_152{color:#adb5bd}._badge_t8a3p_162{display:flex;justify-content:center;align-items:center;background:#007bff;color:#fff;width:1rem;height:1rem;border-radius:50%;padding:4px;font-size:10px;font-weight:600}._badge_t8a3p_162._updated_t8a3p_175{background:#28a745;animation:_pulse_t8a3p_1 .6s ease-in-out}@keyframes _pulse_t8a3p_1{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}._content_t8a3p_129::-webkit-scrollbar{width:6px}._content_t8a3p_129::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}._dark_t8a3p_17 ._content_t8a3p_129::-webkit-scrollbar-track{background:#333}._content_t8a3p_129::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._dark_t8a3p_17 ._content_t8a3p_129::-webkit-scrollbar-thumb{background:#555}._content_t8a3p_129::-webkit-scrollbar-thumb:hover{background:#a8a8a8}._dark_t8a3p_17 ._content_t8a3p_129::-webkit-scrollbar-thumb:hover{background:#777}

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
-};