@berenjena/react-dev-panel 1.0.0 → 1.0.3

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

package/dist/components/Logger/index.d.ts

@@ -0,0 +1,20 @@
+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 {};