@berenjena/react-dev-panel 1.0.4 → 2.1.0

package/dist/store/UIStore.d.ts

@@ -11,8 +11,10 @@ import { DevPanelUIState, Position } from '../components/DevPanel/types';
  * const {
  *   isVisible,
  *   position,
+ *   currentTheme,
  *   setVisible,
- *   setPosition
+ *   setPosition,
+ *   setTheme
  * } = useDevPanelUI();
  * ```
  */
@@ -20,6 +22,9 @@ export declare function useDevPanelUI(): DevPanelUIState & {
     setVisible: (visible: boolean) => void;
     setCollapsed: (collapsed: boolean) => void;
     setPosition: (position: Position) => void;
+    setTheme: (theme: string) => void;
+    resetTheme: () => void;
+    getCurrentTheme: () => string;
     reset: () => void;
 };
 /**
@@ -59,6 +64,46 @@ export declare function useDevPanelCollapsed(): boolean;
  * ```
  */
 export declare function useDevPanelPosition(): Position;
+/**
+ * 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 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(): {
+    currentTheme: string;
+    setTheme: (theme: string) => void;
+    resetTheme: () => void;
+    getCurrentTheme: () => string;
+};
 /**
  * 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.
@@ -67,7 +112,7 @@ export declare function useDevPanelPosition(): Position;
  *
  * @example
  * ```typescript
- * const { setVisible, setPosition, reset } = useDevPanelUIActions();
+ * const { setVisible, setPosition, setTheme, reset } = useDevPanelUIActions();
  *
  * // Toggle panel visibility
  * setVisible(true);
@@ -75,6 +120,9 @@ export declare function useDevPanelPosition(): Position;
  * // Update position
  * setPosition({ x: 100, y: 100 });
  *
+ * // Set theme
+ * setTheme("dark");
+ *
  * // Reset UI state
  * reset();
  * ```
@@ -83,6 +131,34 @@ export declare function useDevPanelUIActions(): {
     setVisible: (visible: boolean) => void;
     setCollapsed: (collapsed: boolean) => void;
     setPosition: (position: Position) => void;
+    setTheme: (theme: string) => void;
+    resetTheme: () => void;
+    getCurrentTheme: () => string;
     reset: () => void;
 };
+/**
+ * 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 declare const useDevPanelStore: typeof useDevPanelUI;

package/dist/store/UIStore.js

@@ -1,11 +1,178 @@
-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 r } from "react";
+import { BaseStoreService as o } from "./BaseStoreService.js";
+const u = "dev-panel-ui-storage", h = { x: 20, y: 20 }, n = {
+  isVisible: !1,
+  isCollapsed: !1,
+  position: h,
+  currentTheme: "auto"
+};
+class a extends o {
+  /**
+   * Creates a new DevPanelUIService instance and loads persisted state from localStorage.
+   */
+  constructor() {
+    super(u, n, !0, !0), this.applyTheme(this.getSnapshot().currentTheme);
+  }
+  /**
+   * Transforms current state to persistable format.
+   *
+   * @param state - The current UI state
+   * @returns The state in persistable format
+   * @protected
+   */
+  toPersistableState(t) {
+    return {
+      isVisible: t.isVisible,
+      isCollapsed: t.isCollapsed,
+      position: t.position,
+      currentTheme: t.currentTheme
+    };
+  }
+  /**
+   * 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(t, s) {
+    return {
+      ...s,
+      ...t
+    };
+  }
+  /**
+   * Gets the service name for error messages.
+   *
+   * @returns The service name
+   * @protected
+   */
+  getServiceName() {
+    return "UI";
+  }
+  /**
+   * Applies the theme to the document root element using data attributes.
+   *
+   * @param theme - Theme name to apply
+   * @private
+   */
+  applyTheme(t) {
+    const s = document.documentElement;
+    t === "auto" || t === "" ? s.removeAttribute("data-dev-panel-theme") : s.setAttribute("data-dev-panel-theme", t);
+  }
+  /**
+   * Sets the visibility state of the dev panel.
+   *
+   * @param visible - Whether the panel should be visible
+   */
+  setVisible = (t) => {
+    this.setState((s) => ({ ...s, isVisible: t }));
+  };
+  /**
+   * Sets the collapsed state of the dev panel.
+   *
+   * @param collapsed - Whether the panel should be collapsed
+   */
+  setCollapsed = (t) => {
+    this.setState((s) => ({ ...s, isCollapsed: t }));
+  };
+  /**
+   * Updates the position of the dev panel.
+   *
+   * @param position - New position coordinates {x, y}
+   */
+  setPosition = (t) => {
+    this.setState((s) => ({ ...s, position: t }));
+  };
+  /**
+   * Sets the current theme and applies it to the document.
+   *
+   * @param theme - Theme name to set
+   */
+  setTheme = (t) => {
+    this.setState((s) => ({ ...s, currentTheme: t })), this.applyTheme(t);
+  };
+  /**
+   * 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;
+  /**
+   * Resets the dev panel UI to its default state.
+   * Resets position, theme, and sets visibility and collapse to false.
+   */
+  reset = () => {
+    this.setState(() => ({ ...n })), this.applyTheme(n.currentTheme);
+  };
+}
+const e = new a();
+function l() {
+  return {
+    ...r(e.subscribe, e.getSnapshot),
+    setVisible: e.setVisible,
+    setCollapsed: e.setCollapsed,
+    setPosition: e.setPosition,
+    setTheme: e.setTheme,
+    resetTheme: e.resetTheme,
+    getCurrentTheme: e.getCurrentTheme,
+    reset: e.reset
+  };
+}
+function c() {
+  return r(e.subscribe, () => e.getSnapshot().isVisible);
+}
+function p() {
+  return r(e.subscribe, () => e.getSnapshot().isCollapsed);
+}
+function b() {
+  return r(e.subscribe, () => e.getSnapshot().position);
+}
+function S() {
+  return r(e.subscribe, () => e.getSnapshot().currentTheme);
+}
+function d() {
+  return {
+    currentTheme: r(e.subscribe, () => e.getSnapshot().currentTheme),
+    setTheme: e.setTheme,
+    resetTheme: e.resetTheme,
+    getCurrentTheme: e.getCurrentTheme
+  };
+}
+function C() {
+  return {
+    setVisible: e.setVisible,
+    setCollapsed: e.setCollapsed,
+    setPosition: e.setPosition,
+    setTheme: e.setTheme,
+    resetTheme: e.resetTheme,
+    getCurrentTheme: e.getCurrentTheme,
+    reset: e.reset
+  };
+}
+function g() {
+  return {
+    setTheme: e.setTheme,
+    resetTheme: e.resetTheme,
+    getCurrentTheme: e.getCurrentTheme
+  };
+}
+const P = l;
 export {
-  o as useDevPanelCollapsed,
-  n as useDevPanelPosition,
-  i as useDevPanelStore,
-  P as useDevPanelUI,
-  t as useDevPanelUIActions,
-  u as useDevPanelVisible
+  S as useCurrentTheme,
+  p as useDevPanelCollapsed,
+  b as useDevPanelPosition,
+  P as useDevPanelStore,
+  d as useDevPanelTheme,
+  g as useDevPanelThemeActions,
+  l as useDevPanelUI,
+  C as useDevPanelUIActions,
+  c as useDevPanelVisible
 };

package/dist/utils/getPositionAdjustment/getPositionAdjustment.d.ts

@@ -1,10 +1,11 @@
+import { Position } from '../../components/DevPanel/types';
 /**
  * Checks if a position adjustment is needed after window resize
  * @param element - The HTML element to check
  * @returns Object containing the current position, constrained position, and whether adjustment is needed
  */
 export declare function getPositionAdjustment(element: HTMLElement): {
-    currentPosition: import('../../components/DevPanel/types').Position;
-    constrainedPosition: import('../../components/DevPanel/types').Position;
+    currentPosition: Position;
+    constrainedPosition: Position;
     needsAdjustment: boolean;
 };

package/dist/utils/getPositionAdjustment/getPositionAdjustment.js

@@ -1,10 +1,7 @@
 import { getConstrainedPosition as r } from "../getConstrainedPosition/getConstrainedPosition.js";
 import { getCurrentElementPosition as s } from "../getCurrentElementPosition/getCurrentElementPosition.js";
 function m(n) {
-  const t = s(n), o = r(
-    t,
-    n
-  ), i = o.x !== t.x || o.y !== t.y;
+  const t = s(n), o = r(t, n), i = o.x !== t.x || o.y !== t.y;
   return {
     currentPosition: t,
     constrainedPosition: o,

package/package.json

@@ -1,23 +1,26 @@
 {
 	"private": false,
-	"version": "1.0.4",
-	"type": "module",
-	"module": "./dist/index.js",
+	"version": "2.1.0",
+	"license": "MIT",
 	"name": "@berenjena/react-dev-panel",
 	"description": "A React development panel with various tools and utilities.",
-	"keywords": [
-		"react",
-		"development",
-		"panel",
-		"tools",
-		"utilities"
-	],
+	"type": "module",
 	"homepage": "https://github.com/Berenjenas/react-dev-panel",
 	"bugs": "https://github.com/Berenjenas/react-dev-panel/issues",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Berenjenas/react-dev-panel.git"
 	},
+	"keywords": [
+		"react",
+		"development",
+		"panel",
+		"tools",
+		"utilities",
+		"gui",
+		"devtools"
+	],
+	"module": "./dist/index.js",
 	"exports": {
 		".": {
 			"import": "./dist/index.js",
@@ -31,7 +34,6 @@
 		"dist"
 	],
 	"types": "./dist/index.d.ts",
-	"license": "MIT",
 	"contributors": [
 		{
 			"name": "David Gallegos",
@@ -55,49 +57,70 @@
 		"lint:fix": "eslint . --ext ts,tsx --fix",
 		"format": "prettier --check .",
 		"format:fix": "prettier --write .",
-		"stylelint": "stylelint **/*.css",
-		"stylelint:fix": "stylelint **/*.css --fix",
+		"stylelint": "stylelint **/*.scss",
+		"stylelint:fix": "stylelint **/*.scss --fix",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build  --output-dir docs",
 		"deploy-storybook": "npm run build-storybook && gh-pages -d docs",
 		"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",
+		"prepare": "npx husky",
+		"commit": "git-cz"
+	},
+	"publishConfig": {
+		"access": "public"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",
 		"react-dom": ">=18.0.0"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.30.1",
+		"@changesets/cli": "^2.29.5",
+		"@commitlint/cli": "^19.8.1",
+		"@commitlint/config-conventional": "^19.8.1",
+		"@commitlint/cz-commitlint": "^19.8.1",
+		"@eslint/js": "^9.32.0",
 		"@rollup/plugin-terser": "^0.4.4",
-		"@storybook/addon-docs": "^9.0.17",
-		"@storybook/react-vite": "^9.0.17",
-		"@types/node": "^24.0.15",
-		"@types/react": "^19.1.8",
-		"@types/react-dom": "^19.1.6",
-		"@vitejs/plugin-react-swc": "^3.10.2",
+		"@storybook/addon-docs": "^9.1.0",
+		"@storybook/react-vite": "^9.1.0",
+		"@types/node": "^24.1.0",
+		"@types/react": "^19.1.9",
+		"@types/react-dom": "^19.1.7",
+		"@vitejs/plugin-react-swc": "^3.11.0",
 		"@vitest/coverage-v8": "^3.2.4",
 		"@vitest/ui": "^3.2.4",
-		"eslint": "^9.30.1",
+		"commitizen": "^4.3.1",
+		"eslint": "^9.32.0",
+		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^5.2.0",
-		"eslint-plugin-react-refresh": "^0.4.20",
 		"eslint-plugin-simple-import-sort": "^12.1.1",
-		"eslint-plugin-storybook": "^9.0.17",
+		"eslint-plugin-storybook": "^9.1.0",
 		"gh-pages": "^6.3.0",
 		"glob": "^11.0.3",
 		"globals": "^16.3.0",
 		"happy-dom": "^18.0.1",
-		"react": "^19.1.0",
-		"react-dom": "^19.1.0",
+		"husky": "^9.1.7",
+		"inquirer": "^9.3.7",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1",
 		"sass-embedded": "^1.89.2",
-		"storybook": "^9.0.17",
-		"typescript": "~5.8.3",
-		"typescript-eslint": "^8.35.1",
-		"vite": "^7.0.4",
+		"storybook": "^9.1.0",
+		"stylelint": "^16.23.0",
+		"typescript": "^5.9.2",
+		"typescript-eslint": "^8.39.0",
+		"vite": "^7.0.6",
 		"vite-plugin-dts": "^4.5.4",
 		"vite-plugin-lib-inject-css": "^2.2.2",
 		"vitest": "^3.2.4"
+	},
+	"config": {
+		"commitizen": {
+			"path": "@commitlint/cz-commitlint"
+		}
 	}
 }

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/BooleanControl.css

@@ -1 +0,0 @@
-._switch_1i71a_1{--width: 42px;--height: 20px;--thumb-size: 12px;--thumb-offset: 3px;--thumb-checked-offset: calc(var(--width) - var(--thumb-size) - calc(var(--thumb-offset) * 2) - calc(var(--thumb-offset) / 2));--track-background: var(--dev-panel-input-background-color);--track-border: color-mix(in srgb, var(--dev-panel-border-color) 50%, transparent);--thumb-background: var(--dev-panel-text-color);--thumb-checked-background: white;--focus-ring-color: var(--dev-panel-accent-color);position:relative;display:inline-block;width:var(--width);height:var(--height)}._switch_1i71a_1 input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}._switch_1i71a_1 input:checked+._slider_1i71a_25{background-color:var(--focus-ring-color)}._switch_1i71a_1 input:checked+._slider_1i71a_25:before{transform:translate(var(--thumb-checked-offset));background-color:var(--thumb-checked-background)}._switch_1i71a_1 input:focus+._slider_1i71a_25{box-shadow:none;outline:none}._switch_1i71a_1 input:disabled+._slider_1i71a_25{opacity:.5;cursor:not-allowed}._switch_1i71a_1 input:disabled+._slider_1i71a_25:before{opacity:.7}._switch_1i71a_1 ._slider_1i71a_25{position:absolute;inset:0;background-color:var(--dev-panel-input-background-color);border:1px solid color-mix(in srgb,var(--dev-panel-border-color) 20%,transparent);border-radius:var(--dev-panel-border-radius);cursor:pointer;transition:var(--dev-panel-transition)}._switch_1i71a_1 ._slider_1i71a_25:before{content:"";position:absolute;top:var(--thumb-offset);left:var(--thumb-offset);width:var(--thumb-size);height:var(--thumb-size);background-color:var(--thumb-background);border-radius:calc(var(--dev-panel-border-radius) - 2px);transition:var(--dev-panel-transition);transform:scale(.95)}._switch_1i71a_1 ._slider_1i71a_25:hover{border-color:var(--dev-panel-accent-color)}._switch_1i71a_1 ._slider_1i71a_25:hover:before{box-shadow:0 2px 6px #00000026}