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

package/README.md

@@ -0,0 +1 @@
+# React dev panel

package/dist/assets/BooleanControl.css

@@ -0,0 +1 @@
+._checkboxLabel_1m9o5_1{display:inline-flex;align-items:center;cursor:pointer;position:relative}._checkbox_1m9o5_1{opacity:0;position:absolute;width:0;height:0}._checkboxCustom_1m9o5_15{width:18px;height:18px;border:2px solid #ddd;border-radius:3px;background-color:#fff;display:inline-block;position:relative;transition:all .2s ease}._checkboxCustom_1m9o5_15:after{content:"";position:absolute;display:none;left:4px;top:1px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}._checkbox_1m9o5_1:checked+._checkboxCustom_1m9o5_15{background-color:#4caf50;border-color:#4caf50}._checkbox_1m9o5_1:checked+._checkboxCustom_1m9o5_15:after{display:block}._checkbox_1m9o5_1:disabled+._checkboxCustom_1m9o5_15{background-color:#f5f5f5;cursor:not-allowed}

package/dist/assets/ButtonControl.css

@@ -0,0 +1 @@
+._button_vlxsf_1{width:100%;padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;background-color:#4caf50;color:#fff;cursor:pointer;transition:background-color .2s ease}._button_vlxsf_1:hover:not(:disabled){background-color:#45a049}._button_vlxsf_1:active:not(:disabled){background-color:#3e8e41}._button_vlxsf_1:disabled{background-color:#ccc;cursor:not-allowed}

package/dist/assets/ColorControl.css

@@ -0,0 +1 @@
+._colorInput_5ww2_1{width:100%;height:40px;border:1px solid #ddd;border-radius:4px;cursor:pointer;padding:0}._colorInput_5ww2_1:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}._colorInput_5ww2_1:disabled{cursor:not-allowed;opacity:.6}

package/dist/assets/DevPanel.css

@@ -0,0 +1 @@
+:root{--dev-panel-font-family: Helvetica, Arial, Sans-Serif;--dev-panel-primary-color: #0070f3;--dev-panel-secondary-color: #1c1c1c;--dev-panel-background-color: #f8f9fa;--dev-panel-border-color: #e9ecef;--dev-panel-text-color: #333;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .2);--dev-panel-max-width: 320px;--dev-panel-max-height: 80vh}@media (prefers-color-scheme: dark){:root{--dev-panel-background-color: #2a2a2a;--dev-panel-border-color: #555;--dev-panel-text-color: #e0e0e0;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .5)}}._devPanelContainer_k5g13_21{position:fixed;z-index:9998;border:1px solid #ccc;border-radius:8px;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)}._header_k5g13_34{display:flex;align-items:center;justify-content:space-between;padding:4px;background:#1e2233;border-bottom:1px solid #e9ecef;cursor:move}._header_k5g13_34:hover{background:#e9ecef}._title_k5g13_47{font-size:12px;font-weight:600;color:#333;display:flex;align-items:center;gap:8px}._headerButton_k5g13_56{background:none;border:none;color:#666;font-size:12px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease}._headerButton_k5g13_56:hover{background:#dee2e6;color:#333}._headerButton_k5g13_56:active{transform:scale(.95)}._content_k5g13_74{max-height:calc(80vh - 48px);overflow-y:auto}._actions_k5g13_79{display:flex;justify-content:center;padding-top:12px;margin-top:12px;border-top:1px solid #e9ecef}._actions_k5g13_79:last-child{border:none}._resetButton_k5g13_90{background:#dc3545;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s ease}._resetButton_k5g13_90:hover{background:#c82333}._resetButton_k5g13_90:active{background:#bd2130}._content_k5g13_74::-webkit-scrollbar{width:6px}._content_k5g13_74::-webkit-scrollbar-track{background:#f1f1f1}._content_k5g13_74::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._content_k5g13_74::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (prefers-color-scheme: dark){._devPanelContainer_k5g13_21{background:#2a2a2a;border-color:#555}._header_k5g13_34{background:#1e2233;border-color:#555}._header_k5g13_34:hover{background:#444}._title_k5g13_47{color:#e0e0e0}._headerButton_k5g13_56{color:#b0b0b0}._headerButton_k5g13_56:hover{background:#555;color:#e0e0e0}._actions_k5g13_79{border-color:#555}._resetButton_k5g13_90{background:#dc3545}._resetButton_k5g13_90:hover{background:#c82333}._content_k5g13_74::-webkit-scrollbar-track{background:#333}._content_k5g13_74::-webkit-scrollbar-thumb{background:#666}._content_k5g13_74::-webkit-scrollbar-thumb:hover{background:#777}}._dragging_k5g13_168{opacity:.9;cursor:grabbing!important;transition:opacity .2s ease}

package/dist/assets/EmptyContent.css

@@ -0,0 +1 @@
+._empty_1re8c_1{text-align:center;color:#888;font-size:12px;padding:30px 0}._empty_1re8c_1 code{background:#f8f9fa;padding:2px 4px;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace}@media (prefers-color-scheme: dark){._empty_1re8c_1{color:#b0b0b0}._empty_1re8c_1 code{background:#333;color:#e0e0e0}}

package/dist/assets/NumberControl.css

@@ -0,0 +1 @@
+._numberInput_pm0en_1{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;background-color:#fff}._numberInput_pm0en_1:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}._numberInput_pm0en_1:disabled{background-color:#f5f5f5;cursor:not-allowed}

package/dist/assets/Section.css

@@ -0,0 +1 @@
+._section_1av28_1{padding-top:6px;padding-left:10px;padding-right:10px;overflow:hidden}._section_1av28_1:last-child{margin-bottom:0}._section_1av28_1:not(:first-of-type){border-top:1px solid #222;margin-top:8px}._section_1av28_1:last-of-type{padding-bottom:6px}._section_1av28_1 ._header_1av28_17{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s ease}._section_1av28_1 ._header_1av28_17 ._title_1av28_27{font-size:11px;font-weight:600;color:#333}._section_1av28_1 ._header_1av28_17 ._toggle_1av28_32{font-size:10px;color:#666;transition:transform .2s ease}._section_1av28_1 ._content_1av28_37{padding-left:10px;position:relative;display:grid;grid-template-columns:100%;row-gap:6px;transition:opacity .25s}._section_1av28_1 ._content_1av28_37:after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background-color:green;opacity:.4;transform:translate(-50%)}@media (prefers-color-scheme: dark){._section_1av28_1,._section_1av28_1 ._header_1av28_17{border-color:#555}._section_1av28_1 ._header_1av28_17 ._title_1av28_27{color:#e0e0e0}._section_1av28_1 ._toggle_1av28_32{color:#b0b0b0}}

package/dist/assets/SelectControl.css

@@ -0,0 +1 @@
+._select_1w3k9_1{background-color:#1e2233;border:none;color:#fff;padding:4px}

package/dist/assets/TextControl.css

@@ -0,0 +1 @@
+._textInput_w4cvv_1{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;background-color:#fff}._textInput_w4cvv_1:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}._textInput_w4cvv_1:disabled{background-color:#f5f5f5;cursor:not-allowed}._textInput_w4cvv_1::placeholder{color:#999}

package/dist/assets/index.css

@@ -0,0 +1 @@
+._controlContainer_xw58o_1{grid-template-columns:auto 160px;column-gap:7px;display:grid;align-items:center;height:100%;overflow:hidden}._label_xw58o_10{font-weight:500;font-size:12px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._description_xw58o_24{font-size:10px;font-weight:400;color:#666;opacity:.8}@media (prefers-color-scheme: dark){._label_xw58o_10{color:#e0e0e0}._description_xw58o_24{color:#b0b0b0}}

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

@@ -0,0 +1,6 @@
+import { ControlsNames } from './controls/types';
+import { ControlRendererProps } from './types';
+/**
+ * Component that renders different types of controls based on the control type
+ */
+export declare function ControlRenderer<Name extends ControlsNames>({ name, control }: ControlRendererProps<Name>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/ControlRenderer.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "react";
+import "../../utils/className/className.js";
+import "../../utils/store/store.js";
+import { ControlRenderer as i } from "./controls/index.js";
+export {
+  i as ControlRenderer
+};

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

@@ -0,0 +1,16 @@
+import { BooleanControlProps } from './types';
+/**
+ * Component that renders a boolean control
+ * @param control - The control to render
+ * @returns The boolean control component
+ *
+ * @example
+ * ```typescript
+ * <BooleanControl control={{
+ *   type: 'boolean',
+ *   value: true,
+ *   onChange: (value) => setValue(value)
+ * }} />
+ * ```
+ */
+export declare function BooleanControl({ control }: BooleanControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import '../../../../assets/BooleanControl.css';const a = "_checkboxLabel_1m9o5_1", h = "_checkbox_1m9o5_1", t = "_checkboxCustom_1m9o5_15", e = {
+  checkboxLabel: a,
+  checkbox: h,
+  checkboxCustom: t
+};
+function k({ control: c }) {
+  return /* @__PURE__ */ b("label", { className: e.checkboxLabel, children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        type: "checkbox",
+        checked: c.value,
+        disabled: c.disabled,
+        onChange: (s) => c.onChange(s.target.checked),
+        className: e.checkbox
+      }
+    ),
+    /* @__PURE__ */ o("span", { className: e.checkboxCustom })
+  ] });
+}
+export {
+  k as BooleanControl
+};

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { ButtonControlProps } from './types';
+/**
+ * Component that renders a button control
+ * @param control - The control to render
+ * @returns The button control component
+ *
+ * @example
+ * ```typescript
+ * <ButtonControl control={{
+ *   type: 'button',
+ *   label: 'Click me',
+ *   onClick: () => console.log('Button clicked')
+ * }} />
+ * ```
+ */
+export declare function ButtonControl({ control }: ButtonControlProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { ColorControlProps } from './types';
+/**
+ * Component that renders a color control
+ * @param control - The control to render
+ * @returns The color control component
+ *
+ * @example
+ * ```typescript
+ * <ColorControl control={{
+ *   type: 'color',
+ *   value: '#000000',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ * ```
+ */
+export declare function ColorControl({ control }: ColorControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../../../assets/ColorControl.css';const n = "_colorInput_5ww2_1", l = {
+  colorInput: n
+};
+function a({ control: o }) {
+  return /* @__PURE__ */ e(
+    "input",
+    {
+      type: "color",
+      value: o.value,
+      disabled: o.disabled,
+      onChange: (t) => o.onChange(t.target.value),
+      className: l.colorInput
+    }
+  );
+}
+export {
+  a as ColorControl
+};

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { NumberControlProps } from './types';
+/**
+ * Component that renders a number control
+ * @param control - The control to render
+ * @returns The number control component
+ *
+ * @example
+ * ```typescript
+ * <NumberControl control={{
+ *   type: 'number',
+ *   value: 10,
+ *   onChange: (value) => setValue(value)
+ * }} />
+ * ```
+ */
+export declare function NumberControl({ control }: NumberControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx as u } from "react/jsx-runtime";
+import '../../../../assets/NumberControl.css';const m = "_numberInput_pm0en_1", t = {
+  numberInput: m
+};
+function p({ control: e }) {
+  return /* @__PURE__ */ u(
+    "input",
+    {
+      type: "number",
+      value: e.value,
+      min: e.min,
+      max: e.max,
+      step: e.step,
+      disabled: e.disabled,
+      onChange: (n) => e.onChange(Number(n.target.value)),
+      className: t.numberInput
+    }
+  );
+}
+export {
+  p as NumberControl
+};

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { SelectControlProps } from './types';
+/**
+ * Component that renders a select control
+ * @param control - The control to render
+ * @returns The select control component
+ *
+ * @example
+ * ```typescript
+ * <SelectControl control={{
+ *   type: 'select',
+ *   value: 'option1',
+ *   options: ['option1', 'option2', 'option3'],
+ * }} />
+ */
+export declare function SelectControl({ control }: SelectControlProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { TextControlProps } from './types';
+/**
+ * Component that renders a text control
+ * @param control - The control to render
+ * @returns The text control component
+ *
+ * @example
+ * ```typescript
+ * <TextControl control={{
+ *   type: 'text',
+ *   value: 'Hello',
+ *   placeholder: 'Enter your name',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ * ```
+ */
+export declare function TextControl({ control }: TextControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as a } from "react/jsx-runtime";
+import '../../../../assets/TextControl.css';const n = "_textInput_w4cvv_1", p = {
+  textInput: n
+};
+function l({ control: t }) {
+  return /* @__PURE__ */ a(
+    "input",
+    {
+      type: "text",
+      value: t.value,
+      placeholder: t.placeholder,
+      disabled: t.disabled,
+      onChange: (e) => t.onChange(e.target.value),
+      className: p.textInput
+    }
+  );
+}
+export {
+  l as TextControl
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * Exports all control components as a frozen object.
+ * **Note:** This allows components to be loaded lazily.
+ */
+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>;
+    number: import('react').LazyExoticComponent<typeof import('./NumberControl').NumberControl>;
+    select: import('react').LazyExoticComponent<typeof import('./SelectControl').SelectControl>;
+    text: import('react').LazyExoticComponent<typeof import('./TextControl').TextControl>;
+}>;
+export { ControlRenderer } from '..';

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

@@ -0,0 +1,37 @@
+import { Suspense as c, lazy as o } from "react";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { className as d } from "../../../utils/className/className.js";
+import "../../../utils/store/store.js";
+import '../../../assets/index.css';const p = "_controlContainer_xw58o_1", m = "_label_xw58o_10", u = "_description_xw58o_24", r = {
+  controlContainer: p,
+  label: m,
+  description: u
+};
+function x({ name: e, control: t }) {
+  const s = t?.label || e;
+  function a() {
+    if (!t || !t.type)
+      return /* @__PURE__ */ n("div", { className: r.error, children: "Control type is not defined" });
+    const l = f[t.type];
+    return l ? /* @__PURE__ */ n(c, { fallback: /* @__PURE__ */ n("div", { children: "Loading control..." }), children: /* @__PURE__ */ n(l, { control: t }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
+  }
+  return /* @__PURE__ */ i("div", { ...d(r.controlContainer), children: [
+    t?.type !== "button" && /* @__PURE__ */ i("label", { className: r.label, children: [
+      s,
+      t?.description && /* @__PURE__ */ n("span", { className: r.description, children: t.description })
+    ] }),
+    a()
+  ] });
+}
+const f = Object.freeze({
+  boolean: o(() => import("./BooleanControl/index.js").then((e) => ({ default: e.BooleanControl }))),
+  button: o(() => import("./ButtonControl/index.js").then((e) => ({ default: e.ButtonControl }))),
+  color: o(() => import("./ColorControl/index.js").then((e) => ({ default: e.ColorControl }))),
+  number: o(() => import("./NumberControl/index.js").then((e) => ({ default: e.NumberControl }))),
+  select: o(() => import("./SelectControl/index.js").then((e) => ({ default: e.SelectControl }))),
+  text: o(() => import("./TextControl/index.js").then((e) => ({ default: e.TextControl })))
+});
+export {
+  x as ControlRenderer,
+  f as controls
+};

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

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

package/dist/components/ControlRenderer/index.js

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

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

@@ -0,0 +1,11 @@
+import { DevPanelProps } from './types';
+/**
+ * Development panel component
+ * @returns The development panel component, if the environment is not development, it will return null
+ *
+ * @example
+ * ```typescript
+ * <DevPanel />
+ * ```
+ */
+export declare function DevPanel({ panelTitle, ...props }: DevPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/DevPanel/DevPanel.js

@@ -0,0 +1,74 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useCallback as v } from "react";
+import { useDragAndDrop as _ } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
+import { useHotkey as C } from "../../hooks/useHotkeys/useHotkey.js";
+import { className as D } from "../../utils/className/className.js";
+import { useDevPanelVisible as P, useDevPanelCollapsed as y, useDevPanelPosition as k, useDevPanelSections as b, useDevPanelActions as N } 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 B = "_devPanelContainer_k5g13_21", E = "_header_k5g13_34", V = "_title_k5g13_47", j = "_headerButton_k5g13_56", w = "_content_k5g13_74", S = "_dragging_k5g13_168", e = {
+  devPanelContainer: B,
+  header: E,
+  title: V,
+  headerButton: j,
+  content: w,
+  dragging: S
+}, A = {
+  key: "f",
+  shiftKey: !0,
+  altKey: !0,
+  ctrlKey: !1,
+  metaKey: !1
+};
+function G({ panelTitle: c = "Dev panel", ...d }) {
+  const i = P(), n = y(), a = k(), g = b(), o = N(), u = v(
+    (s) => {
+      o.setPosition(s);
+    },
+    [o]
+  ), { isDragging: m, elementRef: h, handleMouseDown: p } = _({
+    onPositionChange: u
+  });
+  if (C({
+    description: "Show Dev Panel",
+    preventDefault: !0,
+    action: () => o.setVisible(!i),
+    ...A,
+    ...d.hotKeyConfig
+  }), process.env.NODE_ENV !== "development" || !i)
+    return null;
+  const l = Object.entries(g);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: h,
+      ...D(e.devPanelContainer, {
+        [e.dragging]: m
+      }),
+      style: {
+        left: a.x,
+        top: a.y,
+        height: n ? "auto" : void 0
+      },
+      children: [
+        /* @__PURE__ */ r("div", { className: e.header, onMouseDown: p, children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: e.headerButton,
+              onClick: () => o.setCollapsed(!n),
+              title: n ? "Expand" : "Collapse",
+              children: n ? "▼" : "▲"
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: e.title, children: c }),
+          /* @__PURE__ */ t("button", { className: e.headerButton, onClick: () => o.setVisible(!1), title: "Close", children: "✕" })
+        ] }),
+        !n && /* @__PURE__ */ t("div", { className: e.content, children: l.length ? l.map(([s, f]) => /* @__PURE__ */ t(x, { sectionName: s, section: f }, `section-${s}`)) : /* @__PURE__ */ t(K, {}) })
+      ]
+    }
+  );
+}
+export {
+  G as DevPanel
+};

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

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

package/dist/components/DevPanel/index.js

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

package/dist/components/EmptyContent/EmptyContent.d.ts

@@ -0,0 +1 @@
+export declare function EmptyContent(): import("react/jsx-runtime").JSX.Element;

package/dist/components/EmptyContent/EmptyContent.js

@@ -0,0 +1,18 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import '../../assets/EmptyContent.css';const o = "_empty_1re8c_1", r = {
+  empty: o
+};
+function n() {
+  return /* @__PURE__ */ t("div", { className: r.empty, children: [
+    "No controls registered yet.",
+    /* @__PURE__ */ e("br", {}),
+    " ",
+    /* @__PURE__ */ e("br", {}),
+    "Use ",
+    /* @__PURE__ */ e("code", { children: "useDevPanel()" }),
+    " to add controls."
+  ] });
+}
+export {
+  n as EmptyContent
+};

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

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

package/dist/components/EmptyContent/index.js

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

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,7 @@
+import { DevPanelSection } from '../DevPanel/types';
+type SectionProps = {
+    sectionName: string;
+    section: DevPanelSection;
+};
+export declare function Section({ sectionName, section }: SectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Section/Section.js

@@ -0,0 +1,23 @@
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { ControlRenderer as i } from "../ControlRenderer/controls/index.js";
+import { useDevPanelActions as r } from "../../utils/store/store.js";
+import '../../assets/Section.css';const d = "_section_1av28_1", _ = "_header_1av28_17", m = "_title_1av28_27", g = "_toggle_1av28_32", p = "_content_1av28_37", e = {
+  section: d,
+  header: _,
+  title: m,
+  toggle: g,
+  content: p
+};
+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: [
+      /* @__PURE__ */ n("span", { className: e.title, children: t.name }),
+      /* @__PURE__ */ n("span", { className: e.toggle, children: t.isCollapsed ? "▶" : "▼" })
+    ] }),
+    !t.isCollapsed && /* @__PURE__ */ n("div", { className: e.content, children: Object.entries(t.controls).map(([o, a]) => /* @__PURE__ */ n(i, { name: o, control: a }, o)) })
+  ] });
+}
+export {
+  f as Section
+};

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

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

package/dist/components/Section/index.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ControlRenderer/controls';
+export * from './DevPanel';

package/dist/components/index.js

@@ -0,0 +1,7 @@
+import { ControlRenderer as e, controls as n } from "./ControlRenderer/controls/index.js";
+import { DevPanel as l } from "./DevPanel/DevPanel.js";
+export {
+  e as ControlRenderer,
+  l as DevPanel,
+  n as controls
+};

package/dist/components/logger.d.ts

@@ -0,0 +1,5 @@
+type LoggerProps = {
+    items: object;
+};
+export declare function Logger({ items }: LoggerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/logger.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+function i({ items: e }) {
+  return /* @__PURE__ */ r("pre", { children: /* @__PURE__ */ r("code", { children: JSON.stringify(e, null, 2) }) });
+}
+export {
+  i as Logger
+};

package/dist/hooks/useDevPanel/index.d.ts

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

package/dist/hooks/useDevPanel/index.js

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