@berenjena/react-dev-panel 1.0.0 → 1.0.1

package/dist/assets/DevPanel.css

@@ -1 +1 @@
-:root{--dev-panel-font-family: Helvetica, Arial, Sans-Serif;--dev-panel-font-size-xs: 12px;--dev-panel-font-size-sm: 14px;--dev-panel-font-size-md: 16px;--dev-panel-font-size-lg: 18px;--dev-panel-accent-color: #6663fd;--dev-panel-primary-color: #6663fd;--dev-panel-secondary-color: #1c1c1c;--dev-panel-background-color: #3e3d40;--dev-panel-highlight-color: #f0f0f0;--dev-panel-foreground-color: #313133;--dev-panel-border-color: #a1a1a1;--dev-panel-text-color: #e0e0e0;--dev-panel-text-color-muted: #b0b0b0;--dev-panel-input-background-color: #302f32;--dev-panel-text-color-highlight: #fbfffa;--dev-panel-spacing-xs: 4px;--dev-panel-spacing-sm: 8px;--dev-panel-spacing-md: 10px;--dev-panel-spacing-lg: 14px;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .2);--dev-panel-max-width: 320px;--dev-panel-max-height: 80vh;--dev-panel-inputs-height: 24px;--dev-panel-border-radius: 6px;--dev-panel-transition: all .2s cubic-bezier(.4, 0, .2, 1)}._devPanelContainer_12zm6_30{position:fixed;z-index:9998;border-radius:var(--dev-panel-border-radius);box-shadow:0 8px 24px #0003;width:var(--dev-panel-max-width);max-height:var(--dev-panel-max-height);overflow:hidden;-webkit-user-select:none;user-select:none;font-family:var(--dev-panel-font-family)}._devPanelContainer_12zm6_30 ._header_12zm6_41{display:flex;align-items:center;justify-content:space-between;padding:var(--dev-panel-spacing-xs);background:var(--dev-panel-foreground-color);cursor:move;color:var(--dev-panel-text-color)}._devPanelContainer_12zm6_30 ._title_12zm6_50{font-size:var(--dev-panel-font-size-xs);font-weight:600;display:flex;align-items:center;gap:var(--dev-panel-spacing-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._devPanelContainer_12zm6_30 ._button_12zm6_60{background:none;border:none;color:inherit;font-size:var(--dev-panel-font-size-sm);cursor:pointer;padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);border-radius:4px;transition:all .2s ease}._devPanelContainer_12zm6_30 ._button_12zm6_60:hover{background:#dee2e6;color:#333}._devPanelContainer_12zm6_30 ._button_12zm6_60:active{transform:scale(.95)}._content_12zm6_78{max-height:calc(var(--dev-panel-max-height) - 48px);overflow-y:auto;background-color:var(--dev-panel-background-color)}._content_12zm6_78::-webkit-scrollbar{width:6px}._content_12zm6_78::-webkit-scrollbar-track{background:#f1f1f1}._content_12zm6_78::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._content_12zm6_78::-webkit-scrollbar-thumb:hover{background:#a8a8a8}
+:root{--dev-panel-font-family: Helvetica, Arial, Sans-Serif;--dev-panel-font-size-xs: 12px;--dev-panel-font-size-sm: 14px;--dev-panel-font-size-md: 16px;--dev-panel-font-size-lg: 18px;--dev-panel-accent-color: #6663fd;--dev-panel-primary-color: #6663fd;--dev-panel-secondary-color: #1c1c1c;--dev-panel-background-color: #3e3d40;--dev-panel-highlight-color: #f0f0f0;--dev-panel-foreground-color: #313133;--dev-panel-border-color: #a1a1a1;--dev-panel-text-color: #e0e0e0;--dev-panel-text-color-muted: #b0b0b0;--dev-panel-input-background-color: #302f32;--dev-panel-text-color-highlight: #fbfffa;--dev-panel-spacing-xs: 4px;--dev-panel-spacing-sm: 8px;--dev-panel-spacing-md: 10px;--dev-panel-spacing-lg: 14px;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .2);--dev-panel-max-width: 320px;--dev-panel-max-height: 80vh;--dev-panel-inputs-height: 24px;--dev-panel-border-radius: 6px;--dev-panel-transition: all .2s cubic-bezier(.4, 0, .2, 1)}._devPanelContainer_1rv6u_30{position:fixed;z-index:9998;border-radius:var(--dev-panel-border-radius);box-shadow:0 8px 24px #0003;width:var(--dev-panel-max-width);max-height:var(--dev-panel-max-height);overflow:hidden;-webkit-user-select:none;user-select:none;font-family:var(--dev-panel-font-family)}._devPanelContainer_1rv6u_30 ._header_1rv6u_41{display:flex;align-items:center;justify-content:space-between;padding:var(--dev-panel-spacing-xs);background:var(--dev-panel-foreground-color);cursor:move;color:var(--dev-panel-text-color)}._devPanelContainer_1rv6u_30 ._title_1rv6u_50{font-size:var(--dev-panel-font-size-xs);font-weight:600;display:flex;align-items:center;gap:var(--dev-panel-spacing-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._devPanelContainer_1rv6u_30 ._button_1rv6u_60{background:none;border:none;color:inherit;font-size:var(--dev-panel-font-size-sm);cursor:pointer;padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);border-radius:4px;transition:all .2s ease}._devPanelContainer_1rv6u_30 ._button_1rv6u_60:hover{background:var(--dev-panel-highlight-color);color:#333}._devPanelContainer_1rv6u_30 ._button_1rv6u_60:active{transform:scale(.95)}._content_1rv6u_78{max-height:calc(var(--dev-panel-max-height) - 48px);overflow-y:auto;background-color:var(--dev-panel-background-color)}._content_1rv6u_78::-webkit-scrollbar{width:6px}._content_1rv6u_78::-webkit-scrollbar-track{background:#f1f1f1}._content_1rv6u_78::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._content_1rv6u_78::-webkit-scrollbar-thumb:hover{background:#a8a8a8}

package/dist/assets/Section.css

@@ -1 +1 @@
-._section_1wq66_1{padding:var(--dev-panel-spacing-sm);overflow:hidden}._section_1wq66_1:last-child{margin-bottom:0}._section_1wq66_1 ._header_1wq66_8{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s ease}._section_1wq66_1 ._header_1wq66_8 ._title_1wq66_15{font-size:11px;font-weight:600;color:var(--dev-panel-text-color)}._section_1wq66_1 ._header_1wq66_8 ._toggle_1wq66_20{font-size:10px;color:var(--dev-panel-border-color);transition:transform .2s ease}._section_1wq66_1 ._content_1wq66_25{position:relative;padding:var(--dev-panel-spacing-sm) 0 0 var(--dev-panel-spacing-sm);display:grid;grid-template-columns:100%;row-gap:var(--dev-panel-spacing-sm);transition:opacity .25s}._section_1wq66_1 ._content_1wq66_25:after{content:"";position:absolute;left:0;bottom:0;width:2px;height:calc(100% - var(--dev-panel-spacing-sm));background-color:var(--dev-panel-border-color);transform:translate(-50%)}@media (prefers-color-scheme: dark){._section_1wq66_1,._section_1wq66_1 ._header_1wq66_8{border-color:#555}._section_1wq66_1 ._header_1wq66_8 ._title_1wq66_15{color:#e0e0e0}._section_1wq66_1 ._toggle_1wq66_20{color:#b0b0b0}}
+._section_19u37_1{padding:var(--dev-panel-spacing-sm);overflow:hidden}._section_19u37_1:last-child{margin-bottom:0}._section_19u37_1 ._header_19u37_8{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s ease}._section_19u37_1 ._header_19u37_8 ._title_19u37_15{font-size:11px;font-weight:600;color:var(--dev-panel-text-color)}._section_19u37_1 ._header_19u37_8 ._toggle_19u37_20{font-size:10px;color:var(--dev-panel-border-color);transition:transform .2s ease}._section_19u37_1 ._content_19u37_25{position:relative;padding:var(--dev-panel-spacing-sm) 0 0 var(--dev-panel-spacing-sm);display:grid;grid-template-columns:100%;gap:var(--dev-panel-spacing-sm);transition:opacity .25s}._section_19u37_1 ._content_19u37_25:after{content:"";position:absolute;left:0;bottom:0;width:2px;height:calc(100% - var(--dev-panel-spacing-sm));background-color:var(--dev-panel-border-color);transform:translate(-50%)}@media (prefers-color-scheme: dark){._section_19u37_1,._section_19u37_1 ._header_19u37_8{border-color:#555}._section_19u37_1 ._header_19u37_8 ._title_19u37_15{color:#e0e0e0}._section_19u37_1 ._toggle_19u37_20{color:#b0b0b0}}

package/dist/assets/index.css

@@ -1 +1 @@
-._controlContainer_5dtr1_1{gap:var(--dev-panel-spacing-sm);display:grid;height:100%;align-items:center;overflow:hidden;color:var(--dev-panel-text-color)}._controlContainer_5dtr1_1:not(._fullWidth_5dtr1_9){grid-template-columns:100px 1fr}._controlContainer_5dtr1_1 ._controlWrapper_5dtr1_12{display:flex;justify-content:flex-end}._controlContainer_5dtr1_1 ._label_5dtr1_16{text-align:start;font-weight:500;font-size:var(--dev-panel-font-size-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._description_5dtr1_25,._loading_5dtr1_26{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color-muted)}._description_5dtr1_25{text-align:right}
+._controlRendererContainer_eix3y_1{gap:var(--dev-panel-spacing-xs);display:grid}._controlRendererContainer_eix3y_1 ._controlContainer_eix3y_5{gap:var(--dev-panel-spacing-sm);display:grid;height:100%;align-items:center;overflow:hidden;color:var(--dev-panel-text-color)}._controlRendererContainer_eix3y_1 ._controlContainer_eix3y_5:not(._fullWidth_eix3y_13){grid-template-columns:100px 1fr}._controlRendererContainer_eix3y_1 ._controlContainer_eix3y_5 ._controlWrapper_eix3y_16{display:flex;justify-content:flex-end}._controlRendererContainer_eix3y_1 ._controlContainer_eix3y_5 ._label_eix3y_20{text-align:start;font-weight:500;font-size:var(--dev-panel-font-size-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._controlRendererContainer_eix3y_1 ._description_eix3y_28,._controlRendererContainer_eix3y_1 ._loading_eix3y_29{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color-muted)}._controlRendererContainer_eix3y_1 ._description_eix3y_28{text-align:right}

package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.js

@@ -1,15 +1,15 @@
 import { jsx as r } from "react/jsx-runtime";
 import { useState as i, useEffect as p } from "react";
 import { Input as f } from "../../../Input/Input.js";
-function h({ control: e }) {
-  const n = e.event || "onBlur", [l, t] = i(e.value);
+function v({ control: e }) {
+  const n = e.event || "onChange", [m, t] = i(e.value);
   p(() => {
     t(e.value);
   }, [e.value]);
-  const m = (u) => {
+  const s = (u) => {
     const a = Number(u.target.value);
     t(a), n === "onChange" && e.onChange(a);
-  }, s = (u) => {
+  }, l = (u) => {
     const a = Number(u.target.value);
     n === "onBlur" && e.onChange(a);
   };
@@ -17,16 +17,16 @@ function h({ control: e }) {
     f,
     {
       type: "number",
-      value: l,
+      value: m,
       min: e.min,
       max: e.max,
       step: e.step,
       disabled: e.disabled,
-      onChange: m,
-      ...n === "onBlur" && { onBlur: s }
+      onChange: s,
+      ...n === "onBlur" && { onBlur: l }
     }
   );
 }
 export {
-  h as NumberControl
+  v as NumberControl
 };

package/dist/components/ControlRenderer/controls/TextControl/TextControl.js

@@ -1,19 +1,19 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { useState as h, useEffect as p } from "react";
 import { Input as d } from "../../../Input/Input.js";
-function g({ control: e }) {
-  const n = e.event || "onBlur", [u, l] = h(e.value);
+function v({ control: e }) {
+  const n = e.event || "onChange", [u, l] = h(e.value);
   p(() => {
     l(e.value);
   }, [e.value]);
   const o = (t) => {
     const a = t.target.value;
     l(a), n === "onChange" && e.onChange(a);
-  }, r = (t) => {
+  }, s = (t) => {
     const a = t.target.value;
     n === "onBlur" && e.onChange(a);
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ r(
     d,
     {
       type: "text",
@@ -21,10 +21,10 @@ function g({ control: e }) {
       placeholder: e.placeholder,
       disabled: e.disabled,
       onChange: o,
-      ...n === "onBlur" && { onBlur: r }
+      ...n === "onBlur" && { onBlur: s }
     }
   );
 }
 export {
-  g as TextControl
+  v as TextControl
 };

package/dist/components/ControlRenderer/controls/index.js

@@ -1,41 +1,42 @@
-import { Suspense as c, lazy as e } from "react";
-import { jsxs as i, Fragment as s, jsx as n } from "react/jsx-runtime";
-import { className as p } from "../../../utils/className/className.js";
+import { Suspense as d, lazy as r } from "react";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { className as s } from "../../../utils/className/className.js";
 import "../../../utils/store/store.js";
-import '../../../assets/index.css';const u = "_controlContainer_5dtr1_1", m = "_fullWidth_5dtr1_9", f = "_controlWrapper_5dtr1_12", h = "_label_5dtr1_16", C = "_description_5dtr1_25", _ = "_loading_5dtr1_26", r = {
+import '../../../assets/index.css';const p = "_controlRendererContainer_eix3y_1", u = "_controlContainer_eix3y_5", m = "_fullWidth_eix3y_13", C = "_controlWrapper_eix3y_16", f = "_label_eix3y_20", _ = "_description_eix3y_28", h = "_loading_eix3y_29", t = {
+  controlRendererContainer: p,
   controlContainer: u,
   fullWidth: m,
-  controlWrapper: f,
-  label: h,
-  description: C,
-  loading: _
+  controlWrapper: C,
+  label: f,
+  description: _,
+  loading: h
 }, b = ["button", "buttonGroup"];
-function x({ name: t, control: o }) {
-  const d = o?.label || t;
-  function a() {
-    if (!o || !o.type)
-      return /* @__PURE__ */ n("div", { className: r.error, children: "Control type is not defined" });
-    const l = y[o.type];
-    return l ? /* @__PURE__ */ n(c, { fallback: /* @__PURE__ */ n("div", { className: r.loading, children: "Loading control..." }), children: /* @__PURE__ */ n(l, { control: o }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
+function g({ name: e, control: n }) {
+  const a = n?.label || e;
+  function c() {
+    if (!n || !n.type)
+      return /* @__PURE__ */ o("div", { className: t.error, children: "Control type is not defined" });
+    const l = y[n.type];
+    return l ? /* @__PURE__ */ o(d, { fallback: /* @__PURE__ */ o("div", { className: t.loading, children: "Loading control..." }), children: /* @__PURE__ */ o(l, { control: n }) }) : /* @__PURE__ */ o("div", { children: "Unknown control type" });
   }
-  return /* @__PURE__ */ i(s, { children: [
-    /* @__PURE__ */ i("div", { ...p(r.controlContainer, { [r.fullWidth]: b.includes(o.type) }), children: [
-      o?.type !== "button" && /* @__PURE__ */ n("label", { className: r.label, children: d }),
-      /* @__PURE__ */ n("div", { className: r.controlWrapper, children: a() })
+  return /* @__PURE__ */ i("div", { className: t.controlRendererContainer, children: [
+    /* @__PURE__ */ i("div", { ...s(t.controlContainer, { [t.fullWidth]: b.includes(n.type) }), children: [
+      n?.type !== "button" && /* @__PURE__ */ o("label", { className: t.label, children: a }),
+      /* @__PURE__ */ o("div", { className: t.controlWrapper, children: c() })
     ] }),
-    o?.description && /* @__PURE__ */ n("span", { className: r.description, children: o.description })
+    n?.description && /* @__PURE__ */ o("span", { className: t.description, children: n.description })
   ] });
 }
 const y = Object.freeze({
-  boolean: e(() => import("./BooleanControl/index.js").then((t) => ({ default: t.BooleanControl }))),
-  button: e(() => import("./ButtonControl/index.js").then((t) => ({ default: t.ButtonControl }))),
-  color: e(() => import("./ColorControl/index.js").then((t) => ({ default: t.ColorControl }))),
-  number: e(() => import("./NumberControl/index.js").then((t) => ({ default: t.NumberControl }))),
-  select: e(() => import("./SelectControl/index.js").then((t) => ({ default: t.SelectControl }))),
-  text: e(() => import("./TextControl/index.js").then((t) => ({ default: t.TextControl }))),
-  buttonGroup: e(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl })))
+  boolean: r(() => import("./BooleanControl/index.js").then((e) => ({ default: e.BooleanControl }))),
+  button: r(() => import("./ButtonControl/index.js").then((e) => ({ default: e.ButtonControl }))),
+  color: r(() => import("./ColorControl/index.js").then((e) => ({ default: e.ColorControl }))),
+  number: r(() => import("./NumberControl/index.js").then((e) => ({ default: e.NumberControl }))),
+  select: r(() => import("./SelectControl/index.js").then((e) => ({ default: e.SelectControl }))),
+  text: r(() => import("./TextControl/index.js").then((e) => ({ default: e.TextControl }))),
+  buttonGroup: r(() => import("./ButtonGroupControl/index.js").then((e) => ({ default: e.ButtonGroupControl })))
 });
 export {
-  x as ControlRenderer,
+  g as ControlRenderer,
   y as controls
 };

package/dist/components/DevPanel/DevPanel.js

@@ -3,46 +3,47 @@ import { useCallback as C } from "react";
 import { useDragAndDrop as _ } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
 import { useHotkey as D } from "../../hooks/useHotkeys/useHotkey.js";
 import { className as P } from "../../utils/className/className.js";
-import { useDevPanelVisible as b, useDevPanelCollapsed as g, useDevPanelPosition as y, useDevPanelSections as N, useDevPanelActions as K } from "../../utils/store/store.js";
+import { useDevPanelVisible as g, useDevPanelCollapsed as b, useDevPanelPosition as y, useDevPanelSections as N, useDevPanelActions as K } from "../../utils/store/store.js";
 import { EmptyContent as k } from "../EmptyContent/EmptyContent.js";
-import { Section as x } from "../Section/Section.js";
-import '../../assets/DevPanel.css';const z = "_devPanelContainer_12zm6_30", E = "_header_12zm6_41", V = "_title_12zm6_50", j = "_button_12zm6_60", w = "_content_12zm6_78", e = {
-  devPanelContainer: z,
+import { Section as w } from "../Section/Section.js";
+import '../../assets/DevPanel.css';const x = "_devPanelContainer_1rv6u_30", E = "_header_1rv6u_41", V = "_title_1rv6u_50", j = "_button_1rv6u_60", S = "_content_1rv6u_78", e = {
+  devPanelContainer: x,
   header: E,
   title: V,
   button: j,
-  content: w
-}, S = {
-  key: "f",
+  content: S
+}, A = {
+  ctrlKey: !0,
   shiftKey: !0,
-  altKey: !0,
-  ctrlKey: !1,
+  key: "a",
+  altKey: !1,
   metaKey: !1
 };
-function F({ panelTitle: c = "Dev panel", ...m }) {
-  const i = b(), n = g(), l = y(), d = N(), o = K(), u = C(
+function F({ panelTitle: c = "Dev panel", ...u }) {
+  const i = g(), n = b(), l = y(), d = N(), o = K(), m = C(
     (s) => {
       o.setPosition(s);
     },
     [o]
-  ), { isDragging: p, elementRef: f, handleMouseDown: h } = _({
-    onPositionChange: u
+  ), { isDragging: v, elementRef: p, handleMouseDown: f } = _({
+    onPositionChange: m
   });
   if (D({
     description: "Show Dev Panel",
     preventDefault: !0,
     action: () => o.setVisible(!i),
-    ...S,
-    ...m.hotKeyConfig
+    ...A,
+    ...u.hotKeyConfig,
+    target: window
   }), process.env.NODE_ENV !== "development" || !i)
     return null;
   const a = Object.entries(d);
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: f,
+      ref: p,
       ...P(e.devPanelContainer, {
-        [e.dragging]: p
+        [e.dragging]: v
       }),
       style: {
         left: l.x,
@@ -50,12 +51,12 @@ function F({ panelTitle: c = "Dev panel", ...m }) {
         height: n ? "auto" : void 0
       },
       children: [
-        /* @__PURE__ */ r("div", { className: e.header, onMouseDown: h, children: [
+        /* @__PURE__ */ r("div", { className: e.header, onMouseDown: f, children: [
           /* @__PURE__ */ t("button", { className: e.button, onClick: () => o.setCollapsed(!n), title: n ? "Expand" : "Collapse", children: n ? "▼" : "▲" }),
           /* @__PURE__ */ t("div", { className: e.title, children: c }),
           /* @__PURE__ */ t("button", { className: e.button, onClick: () => o.setVisible(!1), title: "Close", children: "✕" })
         ] }),
-        !n && /* @__PURE__ */ t("div", { className: e.content, children: a.length ? a.map(([s, v]) => /* @__PURE__ */ t(x, { sectionName: s, section: v }, `section-${s}`)) : /* @__PURE__ */ t(k, {}) })
+        !n && /* @__PURE__ */ t("div", { className: e.content, children: a.length ? a.map(([s, h]) => /* @__PURE__ */ t(w, { sectionName: s, section: h }, `section-${s}`)) : /* @__PURE__ */ t(k, {}) })
       ]
     }
   );

package/dist/components/Section/Section.js

@@ -1,14 +1,14 @@
 import { jsxs as s, jsx as n } from "react/jsx-runtime";
 import { ControlRenderer as a } from "../ControlRenderer/controls/index.js";
 import { useDevPanelActions as r } from "../../utils/store/store.js";
-import '../../assets/Section.css';const d = "_section_1wq66_1", _ = "_header_1wq66_8", m = "_title_1wq66_15", g = "_toggle_1wq66_20", p = "_content_1wq66_25", e = {
+import '../../assets/Section.css';const d = "_section_19u37_1", _ = "_header_19u37_8", m = "_title_19u37_15", g = "_toggle_19u37_20", p = "_content_19u37_25", e = {
   section: d,
   header: _,
   title: m,
   toggle: g,
   content: p
 };
-function C({ sectionName: c, section: t }) {
+function f({ sectionName: c, section: t }) {
   const l = r();
   return /* @__PURE__ */ s("div", { className: e.section, children: [
     /* @__PURE__ */ s("div", { className: e.header, onClick: () => l.toggleSectionCollapse(c), children: [
@@ -19,5 +19,5 @@ function C({ sectionName: c, section: t }) {
   ] });
 }
 export {
-  C as Section
+  f as Section
 };

package/package.json

@@ -15,7 +15,7 @@
 		"url": "git+https://github.com/Berenjenas/react-dev-panel.git"
 	},
 	"private": false,
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"type": "module",
 	"files": [
 		"dist"