@berenjena/react-dev-panel 0.0.1-beta.1

package/dist/utils/getConstrainedPosition/getConstrainedPosition.d.ts

@@ -0,0 +1,8 @@
+import { Position } from '../../types';
+/**
+ * Calculates the constrained position within viewport boundaries
+ * @param position - The desired position
+ * @param element - The HTML element to constrain
+ * @returns The constrained position that keeps the element within viewport bounds
+ */
+export declare function getConstrainedPosition(position: Position, element: HTMLElement): Position;

package/dist/utils/getConstrainedPosition/getConstrainedPosition.js

@@ -0,0 +1,10 @@
+function m(t, i) {
+  const n = i.getBoundingClientRect(), e = window.innerWidth, o = window.innerHeight, h = 0, c = 0, a = e - n.width, r = o - n.height;
+  return {
+    x: Math.max(h, Math.min(a, t.x)),
+    y: Math.max(c, Math.min(r, t.y))
+  };
+}
+export {
+  m as getConstrainedPosition
+};

package/dist/utils/getConstrainedPosition/index.d.ts

@@ -0,0 +1 @@
+export * from './getConstrainedPosition';

package/dist/utils/getConstrainedPosition/index.js

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

package/dist/utils/getCurrentElementPosition/getCurrentElementPosition.d.ts

@@ -0,0 +1,7 @@
+import { Position } from '../../types';
+/**
+ * Gets the current position of an element relative to the viewport
+ * @param element - The HTML element
+ * @returns The current position of the element
+ */
+export declare function getCurrentElementPosition(element: HTMLElement): Position;

package/dist/utils/getCurrentElementPosition/getCurrentElementPosition.js

@@ -0,0 +1,10 @@
+function n(e) {
+  const t = e.getBoundingClientRect();
+  return {
+    x: t.left,
+    y: t.top
+  };
+}
+export {
+  n as getCurrentElementPosition
+};

package/dist/utils/getCurrentElementPosition/index.d.ts

@@ -0,0 +1 @@
+export * from './getCurrentElementPosition';

package/dist/utils/getCurrentElementPosition/index.js

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

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

@@ -0,0 +1,10 @@
+/**
+ * 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('../../types').Position;
+    constrainedPosition: import('../../types').Position;
+    needsAdjustment: boolean;
+};

package/dist/utils/getPositionAdjustment/getPositionAdjustment.js

@@ -0,0 +1,16 @@
+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;
+  return {
+    currentPosition: t,
+    constrainedPosition: o,
+    needsAdjustment: i
+  };
+}
+export {
+  m as getPositionAdjustment
+};

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

@@ -0,0 +1 @@
+export * from './getPositionAdjustment';

package/dist/utils/getPositionAdjustment/index.js

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

package/dist/utils/hasControlChanged/hasControlChanged.d.ts

@@ -0,0 +1,5 @@
+import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
+/**
+ * Compares if the controls have changed (shallow comparison)
+ */
+export declare function hasControlsChanged(current: ControlsGroup, previous?: ControlsGroup): boolean;

package/dist/utils/hasControlChanged/hasControlChanged.js

@@ -0,0 +1,14 @@
+function s(n, r) {
+  if (!r) return !0;
+  const i = Object.keys(n), l = Object.keys(r);
+  if (i.length !== l.length) return !0;
+  for (const u of i) {
+    const t = n[u], e = r[u];
+    if (!e || t.type !== e.type || t.label !== e.label || t.disabled !== e.disabled || "value" in t && "value" in e && t.value !== e.value || t.type === "number" && e.type === "number" && (t.min !== e.min || t.max !== e.max || t.step !== e.step) || t.type === "select" && e.type === "select" && JSON.stringify(t.options) !== JSON.stringify(e.options) || t.type === "text" && e.type === "text" && t.placeholder !== e.placeholder)
+      return !0;
+  }
+  return !1;
+}
+export {
+  s as hasControlsChanged
+};

package/dist/utils/hasControlChanged/index.d.ts

@@ -0,0 +1 @@
+export * from './hasControlChanged';

package/dist/utils/hasControlChanged/index.js

@@ -0,0 +1,4 @@
+import { hasControlsChanged as a } from "./hasControlChanged.js";
+export {
+  a as hasControlsChanged
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,10 @@
+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';
+export * from './store';

package/dist/utils/index.js

@@ -0,0 +1,27 @@
+import { className as t } from "./className/className.js";
+import { createHotkey as s } from "./createHotkey/createHotkey.js";
+import { debounce as a } from "./debounce/debounce.js";
+import { formatHotkey as m } from "./formatHotkey/formatHotkey.js";
+import { getConstrainedPosition as f } from "./getConstrainedPosition/getConstrainedPosition.js";
+import { getCurrentElementPosition as x } from "./getCurrentElementPosition/getCurrentElementPosition.js";
+import { getPositionAdjustment as u } from "./getPositionAdjustment/getPositionAdjustment.js";
+import { hasControlsChanged as v } from "./hasControlChanged/hasControlChanged.js";
+import { isMacOS as d } from "./isMacOS/isMacOS.js";
+import { useDevPanelActions as g, useDevPanelCollapsed as S, useDevPanelPosition as b, useDevPanelSections as h, useDevPanelStore as k, useDevPanelVisible as y } from "./store/store.js";
+export {
+  t as className,
+  s as createHotkey,
+  a as debounce,
+  m as formatHotkey,
+  f as getConstrainedPosition,
+  x as getCurrentElementPosition,
+  u as getPositionAdjustment,
+  v as hasControlsChanged,
+  d as isMacOS,
+  g as useDevPanelActions,
+  S as useDevPanelCollapsed,
+  b as useDevPanelPosition,
+  h as useDevPanelSections,
+  k as useDevPanelStore,
+  y as useDevPanelVisible
+};

package/dist/utils/isMacOS/index.d.ts

@@ -0,0 +1 @@
+export * from './isMacOS';

package/dist/utils/isMacOS/index.js

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

package/dist/utils/isMacOS/isMacOS.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Utility function to detect if the user is on macOS
+ * Uses modern alternatives to deprecated navigator.platform
+ */
+export declare function isMacOS(): boolean;

package/dist/utils/isMacOS/isMacOS.js

@@ -0,0 +1,6 @@
+function e() {
+  return typeof navigator < "u" && "userAgentData" in navigator ? navigator.userAgentData?.platform === "macOS" : typeof navigator < "u" && navigator.userAgent ? /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) : typeof navigator < "u" && navigator.platform?.toLowerCase().includes("mac") || !1;
+}
+export {
+  e as isMacOS
+};

package/dist/utils/store/index.d.ts

@@ -0,0 +1 @@
+export * from './store';

package/dist/utils/store/index.js

@@ -0,0 +1,9 @@
+import { useDevPanelActions as l, useDevPanelCollapsed as n, useDevPanelPosition as o, useDevPanelSections as a, useDevPanelStore as P, useDevPanelVisible as i } from "./store.js";
+export {
+  l as useDevPanelActions,
+  n as useDevPanelCollapsed,
+  o as useDevPanelPosition,
+  a as useDevPanelSections,
+  P as useDevPanelStore,
+  i as useDevPanelVisible
+};

package/dist/utils/store/store.d.ts

@@ -0,0 +1,40 @@
+import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
+import { DevPanelStore } from '../../components/DevPanel/types';
+export declare const useDevPanelStore: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<DevPanelStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<DevPanelStore, {
+            isVisible: boolean;
+            isCollapsed: boolean;
+            position: import('../../types').Position;
+            sectionCollapseState: {
+                [k: string]: boolean | undefined;
+            };
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: DevPanelStore) => void) => () => void;
+        onFinishHydration: (fn: (state: DevPanelStore) => void) => () => void;
+        getOptions: () => Partial<import('zustand/middleware').PersistOptions<DevPanelStore, {
+            isVisible: boolean;
+            isCollapsed: boolean;
+            position: import('../../types').Position;
+            sectionCollapseState: {
+                [k: string]: boolean | undefined;
+            };
+        }>>;
+    };
+}>;
+export declare const useDevPanelVisible: () => boolean;
+export declare const useDevPanelCollapsed: () => boolean;
+export declare const useDevPanelPosition: () => import('../../types').Position;
+export declare const useDevPanelSections: () => Record<string, import('../../components/DevPanel/types').DevPanelSection>;
+export declare const useDevPanelActions: () => {
+    setVisible: (visible: boolean) => void;
+    setCollapsed: (collapsed: boolean) => void;
+    setPosition: (position: import('../../types').Position) => void;
+    registerSection: (name: string, controls: ControlsGroup) => void;
+    unregisterSection: (name: string) => void;
+    toggleSectionCollapse: (name: string) => void;
+    reset: () => void;
+};

package/dist/utils/store/store.js

@@ -0,0 +1,103 @@
+import { create as a } from "zustand";
+import { persist as d } from "zustand/middleware";
+import { useShallow as C } from "zustand/react/shallow";
+const c = { x: 20, y: 20 }, t = a()(
+  d(
+    (e) => ({
+      // State
+      isVisible: !1,
+      isCollapsed: !1,
+      sections: {},
+      position: c,
+      // Actions
+      setVisible: (s) => {
+        e({ isVisible: s });
+      },
+      setCollapsed: (s) => {
+        e({ isCollapsed: s });
+      },
+      setPosition: (s) => {
+        e({ position: s });
+      },
+      registerSection: (s, i) => {
+        e((o) => {
+          const l = o.sections[s];
+          let n = !1;
+          try {
+            const r = localStorage.getItem("berenjena-dev-panel-storage");
+            r && (n = JSON.parse(r).state?.sectionCollapseState?.[s] ?? !1);
+          } catch {
+          }
+          const p = l?.isCollapsed ?? n;
+          return {
+            sections: {
+              ...o.sections,
+              [s]: {
+                name: s,
+                controls: i,
+                isCollapsed: p
+              }
+            }
+          };
+        });
+      },
+      unregisterSection: (s) => {
+        e((i) => {
+          const { [s]: o, ...l } = i.sections;
+          return { sections: l };
+        });
+      },
+      toggleSectionCollapse: (s) => {
+        e((i) => {
+          const o = i.sections[s];
+          return o ? {
+            sections: {
+              ...i.sections,
+              [s]: {
+                ...o,
+                isCollapsed: !o.isCollapsed
+              }
+            }
+          } : i;
+        });
+      },
+      reset: () => {
+        e({
+          isVisible: !1,
+          isCollapsed: !1,
+          sections: {},
+          position: c
+        });
+      }
+    }),
+    {
+      name: "dev-panel-storage",
+      partialize: (e) => ({
+        isVisible: e.isVisible,
+        isCollapsed: e.isCollapsed,
+        position: e.position,
+        // DO NOT persist sections - they are dynamic and are recreated on mount
+        // Only save the collapse state of each section
+        sectionCollapseState: Object.fromEntries(Object.entries(e.sections).map(([s, i]) => [s, i.isCollapsed]))
+      })
+    }
+  )
+), f = () => t((e) => e.isVisible), P = () => t((e) => e.isCollapsed), V = () => t((e) => e.position), v = () => t((e) => e.sections), m = () => t(
+  C((e) => ({
+    setVisible: e.setVisible,
+    setCollapsed: e.setCollapsed,
+    setPosition: e.setPosition,
+    registerSection: e.registerSection,
+    unregisterSection: e.unregisterSection,
+    toggleSectionCollapse: e.toggleSectionCollapse,
+    reset: e.reset
+  }))
+);
+export {
+  m as useDevPanelActions,
+  P as useDevPanelCollapsed,
+  V as useDevPanelPosition,
+  v as useDevPanelSections,
+  t as useDevPanelStore,
+  f as useDevPanelVisible
+};

package/package.json

@@ -0,0 +1,97 @@
+{
+	"name": "@berenjena/react-dev-panel",
+	"description": "A React development panel with various tools and utilities.",
+	"keywords": [
+		"react",
+		"development",
+		"panel",
+		"tools",
+		"utilities"
+	],
+	"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"
+	},
+	"private": false,
+	"version": "0.0.1-beta.1",
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"main": "./dist/index.umd.js",
+	"module": "./dist/index.js",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"require": "./dist/index.umd.js"
+		},
+		"./styles.css": "./dist/styles.css"
+	},
+	"sideEffects": [
+		"*.css"
+	],
+	"license": "MIT",
+	"contributors": [
+		{
+			"name": "David Gallegos",
+			"email": "admin@berenjena.com.ar",
+			"url": "https://github.com/dallegos"
+		},
+		{
+			"name": "Emilio Dominguez",
+			"email": "admin@berenjena.com.ar",
+			"url": "https://github.com/emiliodominguez"
+		},
+		{
+			"name": "Maximiliano Kucan",
+			"email": "admin@berenjena.com.ar",
+			"url": "https://github.com/maxikucan"
+		}
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "eslint .",
+		"preview": "vite preview",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"test": "vitest"
+	},
+	"peerDependencies": {
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0",
+		"zustand": "^5.0.6"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.30.1",
+		"@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",
+		"@vitest/coverage-v8": "^3.2.4",
+		"@vitest/ui": "^3.2.4",
+		"eslint": "^9.30.1",
+		"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",
+		"glob": "^11.0.3",
+		"globals": "^16.3.0",
+		"happy-dom": "^18.0.1",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0",
+		"sass-embedded": "^1.89.2",
+		"storybook": "^9.0.17",
+		"typescript": "~5.8.3",
+		"typescript-eslint": "^8.35.1",
+		"vite": "^7.0.4",
+		"vite-plugin-dts": "^4.5.4",
+		"vite-plugin-lib-inject-css": "^2.2.2",
+		"vitest": "^3.2.4",
+		"zustand": "^5.0.6"
+	}
+}