@berenjena/react-dev-panel 1.0.1 → 1.0.4

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

@@ -1,25 +1,24 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { className as t } from "../../../../utils/className/className.js";
-import "../../../../utils/store/store.js";
-import '../../../../assets/BooleanControl.css';const l = "_slider_1i71a_25", e = {
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { className as l } from "../../../../utils/className/className.js";
+import '../../../../assets/BooleanControl.css';const t = "_slider_1i71a_25", e = {
   switch: "_switch_1i71a_1",
-  slider: l
+  slider: t
 };
-function d({ control: s }) {
-  return /* @__PURE__ */ c("label", { className: e.switch, children: [
+function r({ control: s }) {
+  return /* @__PURE__ */ i("label", { className: e.switch, children: [
     /* @__PURE__ */ a(
       "input",
       {
         type: "checkbox",
         checked: s.value,
         disabled: s.disabled,
-        onChange: (i) => s.onChange(i.target.checked),
+        onChange: (c) => s.onChange(c.target.checked),
         className: e.checkbox
       }
     ),
-    /* @__PURE__ */ a("span", { ...t(e.slider, e.round) })
+    /* @__PURE__ */ a("span", { ...l(e.slider, e.round) })
   ] });
 }
 export {
-  d as BooleanControl
+  r as BooleanControl
 };

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

@@ -1,10 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../../../assets/ButtonControl.css';const o = "_button_e2m3l_1", e = {
+import '../../../../assets/ButtonControl.css';const o = "_button_1cetu_1", e = {
   button: o
 };
-function s({ control: t }) {
+function u({ control: t }) {
   return /* @__PURE__ */ n("button", { onClick: t.onClick, disabled: t.disabled, className: e.button, children: t.label });
 }
 export {
-  s as ButtonControl
+  u as ButtonControl
 };

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

@@ -1,13 +1,17 @@
-import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import { Input as l } from "../../../Input/Input.js";
-import '../../../../assets/ColorControl.css';const o = "_container_ds1no_1", r = {
-  container: o
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { Input as o } from "../../../Input/Input.js";
+import { useDebouncedCallback as d } from "../../../../hooks/useDebounceCallback/useDebounceCallback.js";
+import '../../../../assets/ColorControl.css';const s = "_container_ds1no_1", i = {
+  container: s
 };
-function d({ control: e }) {
-  return /* @__PURE__ */ t("div", { className: r.container, children: [
-    /* @__PURE__ */ n("label", { children: /* @__PURE__ */ n(l, { type: "color", value: e.value, disabled: e.disabled, onChange: (a) => e.onChange(a.target.value) }) }),
+function C({ control: e }) {
+  const l = d(e.onChange, 100), t = (a) => {
+    l(a.target.value);
+  };
+  return /* @__PURE__ */ r("div", { className: i.container, children: [
+    /* @__PURE__ */ n("label", { children: /* @__PURE__ */ n(o, { type: "color", value: e.value, disabled: e.disabled, onChange: t }) }),
     /* @__PURE__ */ n(
-      l,
+      o,
       {
         type: "text",
         value: e.value,
@@ -19,5 +23,5 @@ function d({ control: e }) {
   ] });
 }
 export {
-  d as ColorControl
+  C as ColorControl
 };

package/dist/components/ControlRenderer/controls/DateControl/DateControl.d.ts

@@ -0,0 +1,29 @@
+import { DateControlProps } from './types';
+/**
+ * Component that renders a date control with configurable event handling
+ * @param control - The control to render
+ * @param control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onBlur"
+ * @returns The date control component
+ *
+ * @example
+ * ```typescript
+ * // Real-time updates
+ * <DateControl control={{
+ *   type: 'date',
+ *   value: '2025-07-26',
+ *   min: '2025-01-01',
+ *   max: '2025-12-31',
+ *   event: 'onChange',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ *
+ * // Updates only when losing focus (default)
+ * <DateControl control={{
+ *   type: 'date',
+ *   value: '2025-07-26',
+ *   event: 'onBlur',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ * ```
+ */
+export declare function DateControl({ control }: DateControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as o, useEffect as r } from "react";
+import { Input as f } from "../../../Input/Input.js";
+function h({ control: e }) {
+  const n = e.event || "onBlur", [l, t] = o(e.value);
+  r(() => {
+    t(e.value);
+  }, [e.value]);
+  const s = (u) => {
+    const a = u.target.value;
+    t(a), n === "onChange" && e.onChange(a);
+  }, i = (u) => {
+    const a = u.target.value;
+    n === "onBlur" && e.onChange(a);
+  };
+  return /* @__PURE__ */ m(
+    f,
+    {
+      type: "date",
+      value: l,
+      min: e.min,
+      max: e.max,
+      disabled: e.disabled,
+      onChange: s,
+      ...n === "onBlur" && { onBlur: i }
+    }
+  );
+}
+export {
+  h as DateControl
+};

package/dist/components/ControlRenderer/controls/DateControl/index.d.ts

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

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

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

package/dist/components/ControlRenderer/controls/DateControl/types.d.ts

@@ -0,0 +1,12 @@
+import { BaseInputControl } from '../types';
+export interface DateControl extends BaseInputControl {
+	type: "date";
+	value: string; // ISO date string (YYYY-MM-DD)
+	min?: string; // ISO date string
+	max?: string; // ISO date string
+	onChange: (value: string) => void;
+}
+
+export interface DateControlProps {
+	control: DateControl;
+}

package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.d.ts

@@ -0,0 +1,30 @@
+import { RangeControlProps } from './types';
+/**
+ * Component that renders a range/slider control with configurable event handling
+ * @param control - The control to render
+ * @param control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
+ * @returns The range control component
+ *
+ * @example
+ * ```typescript
+ * // Real-time updates (default)
+ * <RangeControl control={{
+ *   type: 'range',
+ *   value: 50,
+ *   min: 0,
+ *   max: 100,
+ *   step: 1,
+ *   event: 'onChange',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ *
+ * // Updates only when losing focus
+ * <RangeControl control={{
+ *   type: 'range',
+ *   value: 50,
+ *   event: 'onBlur',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ * ```
+ */
+export declare function RangeControl({ control }: RangeControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import { useState as o, useEffect as m } from "react";
+import '../../../../assets/RangeControl.css';const v = "_container_1ewrb_1", h = "_range_1ewrb_9", d = "_value_1ewrb_116", t = {
+  container: v,
+  range: h,
+  value: d
+};
+function b({ control: e }) {
+  const n = e.event || "onChange", [u, l] = o(e.value);
+  m(() => {
+    l(e.value);
+  }, [e.value]);
+  const i = (s) => {
+    const a = Number(s.target.value);
+    l(a), n === "onChange" && e.onChange(a);
+  }, c = (s) => {
+    const a = Number(s.target.value);
+    n === "onBlur" && e.onChange(a);
+  };
+  return /* @__PURE__ */ g("div", { className: t.container, children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        type: "range",
+        value: u,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        disabled: e.disabled,
+        onChange: i,
+        ...n === "onBlur" && { onBlur: c },
+        className: t.range
+      }
+    ),
+    /* @__PURE__ */ r("span", { className: t.value, children: u })
+  ] });
+}
+export {
+  b as RangeControl
+};

package/dist/components/ControlRenderer/controls/RangeControl/index.d.ts

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

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

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

package/dist/components/ControlRenderer/controls/RangeControl/types.d.ts

@@ -0,0 +1,13 @@
+import { BaseInputControl } from '../types';
+export interface RangeControl extends BaseInputControl {
+	type: "range";
+	value: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	onChange: (value: number) => void;
+}
+
+export interface RangeControlProps {
+	control: RangeControl;
+}

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

@@ -1,14 +1,11 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { Select as n } from "../../../Select/Select.js";
-import '../../../../assets/SelectControl.css';const r = "_select_1w3k9_1", c = {
-  select: r
-};
-function o({ control: t }) {
-  return /* @__PURE__ */ s(n, { value: t.value, disabled: t.disabled, onChange: (e) => t.onChange(e.target.value), className: c.select, children: t.options.map((e) => {
-    const l = typeof e == "string" ? e : e.value, a = typeof e == "string" ? e : e.label;
-    return /* @__PURE__ */ s("option", { value: l, children: a }, l);
+function s({ control: a }) {
+  return /* @__PURE__ */ t(n, { value: a.value, disabled: a.disabled, onChange: (e) => a.onChange(e.target.value), children: a.options.map((e) => {
+    const l = typeof e == "string" ? e : e.value, r = typeof e == "string" ? e : e.label;
+    return /* @__PURE__ */ t("option", { value: l, children: r }, l);
   }) });
 }
 export {
-  o as SelectControl
+  s as SelectControl
 };

package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.d.ts

@@ -0,0 +1,30 @@
+import { SeparatorControlProps } from './types';
+/**
+ * Component that renders a visual separator to organize control groups
+ * @param control - The control to render
+ * @param control.style - The style of separator: "line" (default), "space", or "label"
+ * @param control.label - Optional label text (only shown when style is "label")
+ * @returns The separator control component
+ *
+ * @example
+ * ```typescript
+ * // Simple line separator
+ * <SeparatorControl control={{
+ *   type: 'separator'
+ * }} />
+ *
+ * // Separator with label
+ * <SeparatorControl control={{
+ *   type: 'separator',
+ *   style: 'label',
+ *   label: 'Advanced Settings'
+ * }} />
+ *
+ * // Space separator
+ * <SeparatorControl control={{
+ *   type: 'separator',
+ *   style: 'space'
+ * }} />
+ * ```
+ */
+export declare function SeparatorControl({ control }: SeparatorControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../../../assets/SeparatorControl.css';const s = "_line_12cvo_1", c = "_space_12cvo_9", t = "_labelContainer_12cvo_14", i = "_label_12cvo_14", l = {
+  line: s,
+  space: c,
+  labelContainer: t,
+  label: i
+};
+function r({ control: a }) {
+  const n = a.style || "line";
+  return n === "space" ? /* @__PURE__ */ e("div", { className: l.space }) : n === "label" && a.label ? /* @__PURE__ */ e("div", { className: l.labelContainer, children: /* @__PURE__ */ e("span", { className: l.label, children: a.label }) }) : /* @__PURE__ */ e("div", { className: l.line });
+}
+export {
+  r as SeparatorControl
+};

package/dist/components/ControlRenderer/controls/SeparatorControl/index.d.ts

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

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

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

package/dist/components/ControlRenderer/controls/SeparatorControl/types.d.ts

@@ -0,0 +1,10 @@
+import { BaseControl } from '../types';
+export interface SeparatorControl extends BaseControl {
+	type: "separator";
+	style?: "line" | "space" | "label";
+	// Note: SeparatorControl doesn't need onChange or value as it's purely visual
+}
+
+export interface SeparatorControlProps {
+	control: SeparatorControl;
+}

package/dist/components/ControlRenderer/controls/index.d.ts

@@ -6,9 +6,11 @@ export declare const controls: Readonly<{
     boolean: import('react').LazyExoticComponent<typeof import('./BooleanControl').BooleanControl>;
     button: import('react').LazyExoticComponent<typeof import('./ButtonControl').ButtonControl>;
     color: import('react').LazyExoticComponent<typeof import('./ColorControl').ColorControl>;
+    date: import('react').LazyExoticComponent<typeof import('./DateControl').DateControl>;
     number: import('react').LazyExoticComponent<typeof import('./NumberControl').NumberControl>;
+    range: import('react').LazyExoticComponent<typeof import('./RangeControl').RangeControl>;
     select: import('react').LazyExoticComponent<typeof import('./SelectControl').SelectControl>;
+    separator: import('react').LazyExoticComponent<typeof import('./SeparatorControl').SeparatorControl>;
     text: import('react').LazyExoticComponent<typeof import('./TextControl').TextControl>;
     buttonGroup: import('react').LazyExoticComponent<typeof import('./ButtonGroupControl').ButtonGroupControl>;
 }>;
-export { ControlRenderer } from '..';

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

@@ -1,42 +1,16 @@
-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 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: C,
-  label: f,
-  description: _,
-  loading: h
-}, b = ["button", "buttonGroup"];
-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("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() })
-    ] }),
-    n?.description && /* @__PURE__ */ o("span", { className: t.description, children: n.description })
-  ] });
-}
-const y = Object.freeze({
-  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 })))
+import { lazy as o } from "react";
+const r = Object.freeze({
+  boolean: o(() => import("./BooleanControl/index.js").then((t) => ({ default: t.BooleanControl }))),
+  button: o(() => import("./ButtonControl/index.js").then((t) => ({ default: t.ButtonControl }))),
+  color: o(() => import("./ColorControl/index.js").then((t) => ({ default: t.ColorControl }))),
+  date: o(() => import("./DateControl/index.js").then((t) => ({ default: t.DateControl }))),
+  number: o(() => import("./NumberControl/index.js").then((t) => ({ default: t.NumberControl }))),
+  range: o(() => import("./RangeControl/index.js").then((t) => ({ default: t.RangeControl }))),
+  select: o(() => import("./SelectControl/index.js").then((t) => ({ default: t.SelectControl }))),
+  separator: o(() => import("./SeparatorControl/index.js").then((t) => ({ default: t.SeparatorControl }))),
+  text: o(() => import("./TextControl/index.js").then((t) => ({ default: t.TextControl }))),
+  buttonGroup: o(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl })))
 });
 export {
-  g as ControlRenderer,
-  y as controls
+  r as controls
 };

package/dist/components/ControlRenderer/controls/types.d.ts

@@ -2,8 +2,11 @@ import { BooleanControl } from './BooleanControl/types';
 import { ButtonControl } from './ButtonControl/types';
 import { ButtonGroupControl } from './ButtonGroupControl/types';
 import { ColorControl } from './ColorControl/types';
+import { DateControl } from './DateControl/types';
 import { NumberControl } from './NumberControl/types';
+import { RangeControl } from './RangeControl/types';
 import { SelectControl } from './SelectControl/types';
+import { SeparatorControl } from './SeparatorControl/types';
 import { TextControl } from './TextControl/types';
 export interface BaseControl {
 	label?: string;
@@ -23,6 +26,9 @@ export type Controls = {
 	text: TextControl;
 	button: ButtonControl;
 	number: NumberControl;
+	range: RangeControl;
+	date: DateControl;
+	separator: SeparatorControl;
 	buttonGroup: ButtonGroupControl;
 };
 

package/dist/components/ControlRenderer/index.js

@@ -1,4 +1,4 @@
-import { ControlRenderer as o } from "./controls/index.js";
+import { ControlRenderer as o } from "./ControlRenderer.js";
 export {
   o as ControlRenderer
 };

package/dist/components/DevPanel/DevPanel.js

@@ -1,49 +1,50 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { useCallback as C } from "react";
-import { useDragAndDrop as _ } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
-import { useHotkey as D } from "../../hooks/useHotkeys/useHotkey.js";
+import { useDragAndDrop as w } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
+import { useHotkey as b } from "../../hooks/useHotkeys/useHotkey.js";
+import { b as y, u as D } from "../../UIStore-CQdr4U-2.js";
 import { className as P } from "../../utils/className/className.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 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,
+import { EmptyContent as x } from "../EmptyContent/EmptyContent.js";
+import { Section as K } from "../Section/Section.js";
+import '../../assets/DevPanel.css';const N = "_devPanelContainer_1vath_1", k = "_header_1vath_12", A = "_title_1vath_21", j = "_button_1vath_31", E = "_collapsed_1vath_53", H = "_content_1vath_60", t = {
+  devPanelContainer: N,
+  header: k,
+  title: A,
   button: j,
-  content: S
-}, A = {
+  collapsed: E,
+  content: H
+}, M = {
   ctrlKey: !0,
   shiftKey: !0,
   key: "a",
   altKey: !1,
   metaKey: !1
 };
-function F({ panelTitle: c = "Dev panel", ...u }) {
-  const i = g(), n = b(), l = y(), d = N(), o = K(), m = C(
-    (s) => {
-      o.setPosition(s);
+function U({ panelTitle: d = "Dev panel", ...h }) {
+  const { isVisible: s, isCollapsed: n, position: l, setVisible: a, setCollapsed: m, setPosition: i } = y(), p = D(), v = C(
+    (o) => {
+      i(o);
     },
-    [o]
-  ), { isDragging: v, elementRef: p, handleMouseDown: f } = _({
-    onPositionChange: m
+    [i]
+  ), { isDragging: u, elementRef: f, handleMouseDown: g } = w({
+    onPositionChange: v
   });
-  if (D({
+  if (b({
     description: "Show Dev Panel",
     preventDefault: !0,
-    action: () => o.setVisible(!i),
-    ...A,
-    ...u.hotKeyConfig,
+    action: () => a(!s),
+    ...M,
+    ...h.hotKeyConfig,
     target: window
-  }), process.env.NODE_ENV !== "development" || !i)
+  }), !s)
     return null;
-  const a = Object.entries(d);
-  return /* @__PURE__ */ r(
+  const r = Object.entries(p);
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: p,
-      ...P(e.devPanelContainer, {
-        [e.dragging]: v
+      ref: f,
+      ...P(t.devPanelContainer, {
+        [t.dragging]: u
       }),
       style: {
         left: l.x,
@@ -51,16 +52,16 @@ function F({ panelTitle: c = "Dev panel", ...u }) {
         height: n ? "auto" : void 0
       },
       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: "✕" })
+        /* @__PURE__ */ c("div", { className: t.header, onMouseDown: g, children: [
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => m(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: n ? 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" }) }) }),
+          /* @__PURE__ */ e("div", { className: t.title, children: d }),
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => a(!1), title: "Close", 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" }) }) })
         ] }),
-        !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, {}) })
+        !n && /* @__PURE__ */ e("div", { className: t.content, children: r.length ? r.map(([o, _]) => /* @__PURE__ */ e(K, { sectionName: o, section: _ }, `section-${o}`)) : /* @__PURE__ */ e(x, {}) })
       ]
     }
   );
 }
 export {
-  F as DevPanel
+  U as DevPanel
 };

package/dist/components/DevPanel/types.d.ts

@@ -1,9 +1,7 @@
 import { ControlsGroup } from '../ControlRenderer/controls/types';
-import { HotkeyConfig, Position } from '../../types';
-export type DevPanelHoyKeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
+export type DevPanelHotkeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
 
 export interface DevPanelProps {
-	theme?: "light" | "dark";
 	panelTitle?: string;
 	/**
 	 * Hotkey configuration for toggling the DevPanel visibility.
@@ -18,7 +16,7 @@ export interface DevPanelProps {
 	 * }
 	 * ```
 	 */
-	hotKeyConfig?: DevPanelHoyKeyConfig;
+	hotKeyConfig?: DevPanelHotkeyConfig;
 }
 
 export interface DevPanelSection {
@@ -34,6 +32,8 @@ export interface DevPanelState {
 	position: Position;
 }
 
+export type DevPanelUIState = Omit<DevPanelState, "sections">;
+
 export interface DevPanelActions {
 	setVisible: (visible: boolean) => void;
 	setCollapsed: (collapsed: boolean) => void;
@@ -45,3 +45,8 @@ export interface DevPanelActions {
 }
 
 export type DevPanelStore = DevPanelState & DevPanelActions;
+
+export interface Position {
+	x: number;
+	y: number;
+}

package/dist/components/EmptyContent/EmptyContent.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import '../../assets/EmptyContent.css';const o = "_empty_1re8c_1", r = {
+import '../../assets/EmptyContent.css';const o = "_empty_1xo8g_1", s = {
   empty: o
 };
 function n() {
-  return /* @__PURE__ */ t("div", { className: r.empty, children: [
+  return /* @__PURE__ */ t("div", { className: s.empty, children: [
     "No controls registered yet.",
     /* @__PURE__ */ e("br", {}),
     " ",

package/dist/components/Input/Input.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../assets/Input.css';const i = "_input_w2bi0_1", p = {
-  input: i
+import '../../assets/Input.css';const p = "_input_161wd_1", u = {
+  input: p
 };
 function s(t) {
-  return /* @__PURE__ */ n("input", { ...t, className: p.input });
+  return /* @__PURE__ */ n("input", { ...t, className: u.input });
 }
 export {
   s as Input