@berenjena/react-dev-panel 1.0.4 → 2.0.0

package/dist/store/UIStore.js

@@ -1,11 +1,117 @@
-import "react";
-import "./BaseStoreService.js";
-import { d as o, e as n, g as i, b as P, f as t, c as u } from "../UIStore-CQdr4U-2.js";
+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 {
-  o as useDevPanelCollapsed,
-  n as useDevPanelPosition,
-  i as useDevPanelStore,
-  P as useDevPanelUI,
-  t as useDevPanelUIActions,
-  u as useDevPanelVisible
+  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,3 +1,4 @@
 export * from './BaseStoreService';
 export * from './SectionsStore';
+export * from './ThemeStore';
 export * from './UIStore';

package/dist/store/index.js

@@ -1,13 +1,18 @@
-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";
+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 {
-  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
+  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.4",
+	"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/UIStore-CQdr4U-2.js

@@ -1,227 +0,0 @@
-import { useSyncExternalStore as n } from "react";
-import { BaseStoreService as c } from "./store/BaseStoreService.js";
-const S = "dev-panel-sections-storage";
-class p extends c {
-  /**
-   * Creates a new DevPanelSectionsService instance.
-   */
-  constructor() {
-    super(S, {}, !1, !1);
-  }
-  /**
-   * Transforms current sections state to persistable format.
-   * Since this store doesn't persist, this method returns a dummy value.
-   *
-   * @param _state - The current sections state (unused)
-   * @returns Empty persistable state
-   * @protected
-   */
-  toPersistableState(e) {
-    return { sectionCollapseState: {} };
-  }
-  /**
-   * Transforms persisted state back to current state format.
-   * Since this store doesn't persist, this method returns the default state.
-   *
-   * @param _persistedState - The persisted sections state (unused)
-   * @param defaultState - The default state to fall back to
-   * @returns The default state
-   * @protected
-   */
-  fromPersistedState(e, t) {
-    return t;
-  }
-  /**
-   * Gets the service name for error messages.
-   *
-   * @returns The service name
-   * @protected
-   */
-  getServiceName() {
-    return "sections";
-  }
-  /**
-   * Registers a new section with the dev panel.
-   * If a section with the same name already exists, it preserves the existing collapse state.
-   * New sections start in expanded state (isCollapsed: false).
-   *
-   * @param name - Unique name for the section
-   * @param controls - Array of control configurations for the section
-   */
-  registerSection = (e, t) => {
-    this.setState((i) => {
-      const u = i[e]?.isCollapsed ?? !1;
-      return {
-        ...i,
-        [e]: {
-          name: e,
-          controls: t,
-          isCollapsed: u
-        }
-      };
-    });
-  };
-  /**
-   * Removes a section from the dev panel.
-   *
-   * @param name - Name of the section to remove
-   */
-  unregisterSection = (e) => {
-    this.setState((t) => {
-      const { [e]: i, ...a } = t;
-      return a;
-    });
-  };
-  /**
-   * Toggles the collapsed state of a specific section.
-   *
-   * @param name - Name of the section to toggle
-   */
-  toggleSectionCollapse = (e) => {
-    this.setState((t) => {
-      const i = t[e];
-      return i ? {
-        ...t,
-        [e]: {
-          ...i,
-          isCollapsed: !i.isCollapsed
-        }
-      } : t;
-    });
-  };
-  /**
-   * Clears all sections.
-   */
-  reset = () => {
-    this.setState(() => ({}));
-  };
-}
-const o = new p();
-function C() {
-  return n(o.subscribe, o.getSnapshot);
-}
-function h() {
-  return {
-    registerSection: o.registerSection,
-    unregisterSection: o.unregisterSection,
-    toggleSectionCollapse: o.toggleSectionCollapse,
-    reset: o.reset
-  };
-}
-const g = "dev-panel-ui-storage", d = { x: 20, y: 20 }, l = {
-  isVisible: !1,
-  isCollapsed: !1,
-  position: d
-};
-class b extends c {
-  /**
-   * Creates a new DevPanelUIService instance and loads persisted state from localStorage.
-   */
-  constructor() {
-    super(g, l, !0, !0);
-  }
-  /**
-   * Transforms current state to persistable format.
-   *
-   * @param state - The current UI state
-   * @returns The state in persistable format
-   * @protected
-   */
-  toPersistableState(e) {
-    return {
-      ...e
-    };
-  }
-  /**
-   * 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(e, t) {
-    return {
-      ...t,
-      ...e
-    };
-  }
-  /**
-   * 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 = (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 }));
-  };
-  /**
-   * Resets the dev panel UI to its default state.
-   * Resets position and sets visibility and collapse to false.
-   */
-  reset = () => {
-    this.setState(() => ({ ...l }));
-  };
-}
-const s = new b();
-function P() {
-  return {
-    ...n(s.subscribe, s.getSnapshot),
-    setVisible: s.setVisible,
-    setCollapsed: s.setCollapsed,
-    setPosition: s.setPosition,
-    reset: s.reset
-  };
-}
-function D() {
-  return n(s.subscribe, () => s.getSnapshot().isVisible);
-}
-function V() {
-  return n(s.subscribe, () => s.getSnapshot().isCollapsed);
-}
-function x() {
-  return n(s.subscribe, () => s.getSnapshot().position);
-}
-function m() {
-  return {
-    setVisible: s.setVisible,
-    setCollapsed: s.setCollapsed,
-    setPosition: s.setPosition,
-    reset: s.reset
-  };
-}
-const I = P;
-export {
-  h as a,
-  P as b,
-  D as c,
-  V as d,
-  x as e,
-  m as f,
-  I as g,
-  C as u
-};

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