@berenjena/react-dev-panel 1.0.1 → 1.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Berenjenas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1,305 @@
-# React dev panel
+# React Dev Panel
+
+![NPM Version](https://badgen.net/npm/v/@berenjena/react-dev-panel)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40berenjena%2Freact-dev-panel?label=Bundle%20size%20(gzip)>)
+[![License: MIT](https://badgen.net/npm/license/@berenjena/react-dev-panel)](https://opensource.org/licenses/MIT)
+[![Weekly Downloads](https://badgen.net/npm/dw/@berenjena/react-dev-panel)](https://www.npmjs.com/package/@berenjena/react-dev-panel)
+
+A powerful, type-safe React development panel that provides an intuitive interface for controlling component props, debugging state, and rapid prototyping during development.
+
+## ✨ Features
+
+-   🎛️ **Rich Control Types** - Boolean, Number, Text, Select, Color, Range, Date, Button, and Separator controls
+-   🎨 **Themeable** - Consistent design system with CSS custom properties
+-   ⌨️ **Keyboard Shortcuts** - Quick access with customizable hotkeys
+-   📖 **TypeScript First** - Full type safety and IntelliSense support
+-   🚀 **Zero Dependencies** - Only requires React (peer dependency)
+-   📦 **Bundle Size**: ![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40berenjena%2Freact-dev-panel?label=Bundle%20size%20(gzip)>)
+
+## 📦 Installation
+
+```bash
+npm install -D @berenjena/react-dev-panel
+```
+
+```bash
+yarn add -D @berenjena/react-dev-panel
+```
+
+```bash
+pnpm add -D @berenjena/react-dev-panel
+```
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```tsx
+import { useState } from "react";
+import { useDevPanel, DevPanel } from "@berenjena/react-dev-panel";
+
+function App() {
+	const [name, setName] = useState("John Doe");
+	const [age, setAge] = useState(25);
+	const [isActive, setIsActive] = useState(true);
+	const [theme, setTheme] = useState("dark");
+
+	useDevPanel("User Settings", {
+		name: {
+			type: "text",
+			value: name,
+			label: "Full Name",
+			onChange: setName,
+		},
+		age: {
+			type: "number",
+			value: age,
+			label: "Age",
+			min: 0,
+			max: 120,
+			onChange: setAge,
+		},
+		isActive: {
+			type: "boolean",
+			value: isActive,
+			label: "Active User",
+			onChange: setIsActive,
+		},
+		theme: {
+			type: "select",
+			value: theme,
+			label: "Theme",
+			options: ["light", "dark", "auto"],
+			onChange: setTheme,
+		},
+	});
+
+	return (
+		<div>
+			<h1>Hello, {name}!</h1>
+			<p>Age: {age}</p>
+			<p>Status: {isActive ? "Active" : "Inactive"}</p>
+			<p>Theme: {theme}</p>
+
+			<DevPanel />
+		</div>
+	);
+}
+```
+
+## 🎛️ Control Types
+
+React Dev Panel provides rich control types for different data types. Here are some quick examples:
+
+### Text Control
+
+```tsx
+{
+  type: 'text',
+  value: 'Hello World',
+  label: 'Message',
+  placeholder: 'Enter message...',
+  onChange: (value: string) => setValue(value),
+}
+```
+
+### Number Control
+
+```tsx
+{
+  type: 'number',
+  value: 42,
+  label: 'Count',
+  min: 0,
+  max: 100,
+  onChange: (value: number) => setValue(value),
+}
+```
+
+### Boolean Control
+
+```tsx
+{
+  type: 'boolean',
+  value: true,
+  label: 'Enable Feature',
+  onChange: (value: boolean) => setValue(value),
+}
+```
+
+### Button Control
+
+```tsx
+{
+  type: 'button',
+  label: 'Reset Values',
+  onClick: () => resetToDefaults(),
+}
+```
+
+**📖 [View all control types and detailed documentation →](./guides/CONTROLS.md)**
+
+## 🎨 Styling and Theming
+
+The dev panel uses CSS custom properties for easy theming. Here's a quick example:
+
+```css
+:root {
+	--dev-panel-background-color: #1a1a1a;
+	--dev-panel-text-color: #ffffff;
+	--dev-panel-accent-color: #ff6200;
+	--dev-panel-border-color: #333333;
+}
+```
+
+**📖 [Complete theming guide and customization options →](./guides/STYLING.md)**
+
+## ⌨️ Keyboard Shortcuts
+
+The dev panel supports customizable keyboard shortcuts:
+
+```tsx
+import { useHotkeys } from "@berenjena/react-dev-panel";
+
+function App() {
+	useHotkeys([
+		{
+			keys: ["ctrl", "d"],
+			action: () => toggleDevPanel(),
+			description: "Toggle Dev Panel",
+		},
+		{
+			keys: ["ctrl", "shift", "r"],
+			action: () => resetAllValues(),
+			description: "Reset All Values",
+		},
+	]);
+}
+```
+
+## 🔧 Advanced Usage
+
+### Multiple Panel Groups
+
+```tsx
+function App() {
+	// Group 1: User Settings
+	useDevPanel("User", {
+		name: { type: "text", value: name, onChange: setName },
+		age: { type: "number", value: age, onChange: setAge },
+	});
+
+	// Group 2: App Settings
+	useDevPanel("App", {
+		theme: { type: "select", value: theme, options: ["light", "dark"], onChange: setTheme },
+		debug: { type: "boolean", value: debug, onChange: setDebug },
+	});
+
+	return <DevPanel />;
+}
+```
+
+**📖 [Advanced patterns, state management, and optimization →](./guides/ADVANCED_USAGE.md)**
+
+### Event Handling Options
+
+React Dev Panel supports two different event handling strategies for input controls:
+
+**onChange Event**: Provides real-time updates as the user types or interacts with the control. This is ideal for immediate feedback and live previews, but may trigger more frequent re-renders.
+
+**onBlur Event**: Updates the value only when the user finishes interacting with the control (loses focus). This approach is more performance-friendly for expensive operations and provides a better user experience when dealing with API calls or heavy computations.
+
+```tsx
+{
+  type: 'text',
+  value: searchTerm,
+  event: 'onChange', // Real-time updates
+  onChange: setSearchTerm,
+}
+
+{
+  type: 'number',
+  value: price,
+  event: 'onBlur', // Update only when focus is lost
+  onChange: setPrice,
+}
+```
+
+## 📚 Documentation
+
+### Core Guides
+
+-   **[Control Types](./guides/CONTROLS.md)** - Complete guide to all available controls
+-   **[Event Handling](./guides/EVENT_HANDLING.md)** - onChange vs onBlur strategies and best practices
+-   **[Styling & Theming](./guides/STYLING.md)** - Customization, themes, and responsive design
+-   **[Advanced Usage](./guides/ADVANCED_USAGE.md)** - Complex patterns, state management, and optimization
+
+### Development
+
+-   **[Development Guide](./guides/DEVELOPMENT.md)** - Setup, contributing, and project structure
+
+## 📚 API Reference
+
+### `useDevPanel(groupName: string, controls: ControlsGroup)`
+
+Registers a group of controls with the dev panel.
+
+**Parameters:**
+
+-   `groupName` - Unique identifier for the control group
+-   `controls` - Object containing control definitions
+
+### `<DevPanel />`
+
+Main component that renders the development panel.
+
+**Props:**
+
+-   `panelTitle?: string` - Custom title for the panel
+-   `position?: { x: number, y: number }` - Initial position
+-   `defaultExpanded?: boolean` - Whether the panel starts expanded
+
+### `useHotkeys(hotkeys: Hotkey[])`
+
+Registers keyboard shortcuts.
+
+**Parameters:**
+
+-   `hotkeys` - Array of hotkey definitions with keys, action, and description
+
+## 🛠️ Development
+
+Want to contribute or set up the project locally?
+
+**📖 [Development setup, contributing guidelines, and project structure →](./guides/DEVELOPMENT.md)**
+
+## 📖 Storybook
+
+Explore all components and controls in our Storybook:
+
+```bash
+npm run storybook
+```
+
+Visit `http://localhost:6006` to see interactive examples and documentation.
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 🔗 Links
+
+-   [NPM Package](https://www.npmjs.com/package/@berenjena/react-dev-panel)
+-   [GitHub Repository](https://github.com/Berenjenas/react-dev-panel)
+-   [Bug Reports](https://github.com/Berenjenas/react-dev-panel/issues)
+-   [Berenjena](https://berenjena.com.ar)
+
+---
+
+Made with ❤️ by the [Berenjena](https://berenjena.com.ar) team

package/dist/UIStore-CQdr4U-2.js

@@ -0,0 +1,227 @@
+import { useSyncExternalStore as n } from "react";
+import { BaseStoreService as c } from "./store/BaseStoreService.js";
+const S = "dev-panel-sections-storage";
+class p extends c {
+  /**
+   * Creates a new DevPanelSectionsService instance.
+   */
+  constructor() {
+    super(S, {}, !1, !1);
+  }
+  /**
+   * Transforms current sections state to persistable format.
+   * Since this store doesn't persist, this method returns a dummy value.
+   *
+   * @param _state - The current sections state (unused)
+   * @returns Empty persistable state
+   * @protected
+   */
+  toPersistableState(e) {
+    return { sectionCollapseState: {} };
+  }
+  /**
+   * Transforms persisted state back to current state format.
+   * Since this store doesn't persist, this method returns the default state.
+   *
+   * @param _persistedState - The persisted sections state (unused)
+   * @param defaultState - The default state to fall back to
+   * @returns The default state
+   * @protected
+   */
+  fromPersistedState(e, t) {
+    return t;
+  }
+  /**
+   * Gets the service name for error messages.
+   *
+   * @returns The service name
+   * @protected
+   */
+  getServiceName() {
+    return "sections";
+  }
+  /**
+   * Registers a new section with the dev panel.
+   * If a section with the same name already exists, it preserves the existing collapse state.
+   * New sections start in expanded state (isCollapsed: false).
+   *
+   * @param name - Unique name for the section
+   * @param controls - Array of control configurations for the section
+   */
+  registerSection = (e, t) => {
+    this.setState((i) => {
+      const u = i[e]?.isCollapsed ?? !1;
+      return {
+        ...i,
+        [e]: {
+          name: e,
+          controls: t,
+          isCollapsed: u
+        }
+      };
+    });
+  };
+  /**
+   * Removes a section from the dev panel.
+   *
+   * @param name - Name of the section to remove
+   */
+  unregisterSection = (e) => {
+    this.setState((t) => {
+      const { [e]: i, ...a } = t;
+      return a;
+    });
+  };
+  /**
+   * Toggles the collapsed state of a specific section.
+   *
+   * @param name - Name of the section to toggle
+   */
+  toggleSectionCollapse = (e) => {
+    this.setState((t) => {
+      const i = t[e];
+      return i ? {
+        ...t,
+        [e]: {
+          ...i,
+          isCollapsed: !i.isCollapsed
+        }
+      } : t;
+    });
+  };
+  /**
+   * Clears all sections.
+   */
+  reset = () => {
+    this.setState(() => ({}));
+  };
+}
+const o = new p();
+function C() {
+  return n(o.subscribe, o.getSnapshot);
+}
+function h() {
+  return {
+    registerSection: o.registerSection,
+    unregisterSection: o.unregisterSection,
+    toggleSectionCollapse: o.toggleSectionCollapse,
+    reset: o.reset
+  };
+}
+const g = "dev-panel-ui-storage", d = { x: 20, y: 20 }, l = {
+  isVisible: !1,
+  isCollapsed: !1,
+  position: d
+};
+class b extends c {
+  /**
+   * Creates a new DevPanelUIService instance and loads persisted state from localStorage.
+   */
+  constructor() {
+    super(g, l, !0, !0);
+  }
+  /**
+   * Transforms current state to persistable format.
+   *
+   * @param state - The current UI state
+   * @returns The state in persistable format
+   * @protected
+   */
+  toPersistableState(e) {
+    return {
+      ...e
+    };
+  }
+  /**
+   * Transforms persisted state back to current state format.
+   *
+   * @param persistedState - The persisted UI state
+   * @param defaultState - The default state to fall back to
+   * @returns The state in current format
+   * @protected
+   */
+  fromPersistedState(e, t) {
+    return {
+      ...t,
+      ...e
+    };
+  }
+  /**
+   * Gets the service name for error messages.
+   *
+   * @returns The service name
+   * @protected
+   */
+  getServiceName() {
+    return "UI";
+  }
+  /**
+   * Sets the visibility state of the dev panel.
+   *
+   * @param visible - Whether the panel should be visible
+   */
+  setVisible = (e) => {
+    this.setState((t) => ({ ...t, isVisible: e }));
+  };
+  /**
+   * Sets the collapsed state of the dev panel.
+   *
+   * @param collapsed - Whether the panel should be collapsed
+   */
+  setCollapsed = (e) => {
+    this.setState((t) => ({ ...t, isCollapsed: e }));
+  };
+  /**
+   * Updates the position of the dev panel.
+   *
+   * @param position - New position coordinates {x, y}
+   */
+  setPosition = (e) => {
+    this.setState((t) => ({ ...t, position: e }));
+  };
+  /**
+   * Resets the dev panel UI to its default state.
+   * Resets position and sets visibility and collapse to false.
+   */
+  reset = () => {
+    this.setState(() => ({ ...l }));
+  };
+}
+const s = new b();
+function P() {
+  return {
+    ...n(s.subscribe, s.getSnapshot),
+    setVisible: s.setVisible,
+    setCollapsed: s.setCollapsed,
+    setPosition: s.setPosition,
+    reset: s.reset
+  };
+}
+function D() {
+  return n(s.subscribe, () => s.getSnapshot().isVisible);
+}
+function V() {
+  return n(s.subscribe, () => s.getSnapshot().isCollapsed);
+}
+function x() {
+  return n(s.subscribe, () => s.getSnapshot().position);
+}
+function m() {
+  return {
+    setVisible: s.setVisible,
+    setCollapsed: s.setCollapsed,
+    setPosition: s.setPosition,
+    reset: s.reset
+  };
+}
+const I = P;
+export {
+  h as a,
+  P as b,
+  D as c,
+  V as d,
+  x as e,
+  m as f,
+  I as g,
+  C as u
+};

package/dist/assets/ButtonControl.css

@@ -1 +1 @@
-._button_e2m3l_1{width:100%;padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);height:var(--dev-panel-inputs-height);border:none;border-radius:4px;font-size:11px;font-weight:500;background-color:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-highlight);cursor:pointer;transition:var(--dev-panel-transition)}._button_e2m3l_1:hover:not(:disabled){background-color:color-mix(in srgb,var(--dev-panel-accent-color) 80%,transparent)}._button_e2m3l_1:disabled{background-color:color-mix(in srgb,var(--dev-panel-accent-color) 20%,var(--dev-panel-background-color));cursor:not-allowed}
+._button_1cetu_1{width:100%;min-height:var(--dev-panel-inputs-height);padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);border:none;border-radius:4px;font-size:11px;font-weight:500;background-color:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-highlight);cursor:pointer;transition:var(--dev-panel-transition)}._button_1cetu_1:hover:not(:disabled){background-color:color-mix(in srgb,var(--dev-panel-accent-color) 80%,transparent)}._button_1cetu_1:disabled{background-color:color-mix(in srgb,var(--dev-panel-accent-color) 20%,var(--dev-panel-background-color));cursor:not-allowed}

package/dist/assets/ControlRenderer.css

@@ -0,0 +1 @@
+._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/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_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}
+._devPanelContainer_1vath_1{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;user-select:none;font-family:var(--dev-panel-font-family)}._devPanelContainer_1vath_1 ._header_1vath_12{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_1vath_1 ._title_1vath_21{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_1vath_1 ._button_1vath_31{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_1vath_1 ._button_1vath_31:hover{background:var(--dev-panel-highlight-color);color:#333}._devPanelContainer_1vath_1 ._button_1vath_31:active{transform:scale(.95)}._devPanelContainer_1vath_1 ._button_1vath_31>svg{display:block;height:1rem;transition:transform ease .2s}._devPanelContainer_1vath_1 ._button_1vath_31>svg._collapsed_1vath_53{transform:rotate(180deg)}._devPanelContainer_1vath_1 ._button_1vath_31>svg path{fill:currentColor}._content_1vath_60{max-height:calc(var(--dev-panel-max-height) - 48px);overflow-y:auto;background-color:var(--dev-panel-background-color)}._content_1vath_60::-webkit-scrollbar{width:6px}._content_1vath_60::-webkit-scrollbar-track{background:#f1f1f1}._content_1vath_60::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._content_1vath_60::-webkit-scrollbar-thumb:hover{background:#a8a8a8}

package/dist/assets/EmptyContent.css

@@ -1 +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}}
+._empty_1xo8g_1{text-align:center;color:#888;font-size:12px;padding:30px 0}._empty_1xo8g_1 code{background:#f8f9fa;padding:2px 4px;border-radius:3px}@media (prefers-color-scheme: dark){._empty_1xo8g_1{color:#b0b0b0}._empty_1xo8g_1 code{background:#333;color:#e0e0e0}}

package/dist/assets/Input.css

@@ -1 +1 @@
-._input_w2bi0_1{width:100%;height:var(--dev-panel-inputs-height);border:0;border-radius:var(--dev-panel-border-radius);cursor:pointer;padding:0;background-color:transparent;color:var(--dev-panel-text-color-highlight)}._input_w2bi0_1:last-of-type{background-color:var(--dev-panel-input-background-color);padding-left:var(--dev-panel-spacing-xs)}._input_w2bi0_1:focus{outline:none}._input_w2bi0_1:disabled{cursor:not-allowed;opacity:.6}._input_w2bi0_1::placeholder{color:var(--dev-panel-text-color-muted)}
+._input_161wd_1{width:100%;height:var(--dev-panel-inputs-height);border:0;border-radius:var(--dev-panel-border-radius);cursor:pointer;padding:0;background-color:transparent;color:var(--dev-panel-text-color-highlight)}._input_161wd_1:last-of-type{background-color:var(--dev-panel-input-background-color);padding-left:var(--dev-panel-spacing-xs)}._input_161wd_1:focus{outline:none}._input_161wd_1:disabled{cursor:not-allowed;opacity:.6}._input_161wd_1::placeholder{color:var(--dev-panel-text-color-muted)}._input_161wd_1[type=date]::-webkit-calendar-picker-indicator{color:currentColor;opacity:1;filter:invert(1)}._input_161wd_1[type=date]::-moz-calendar-picker-indicator{color:currentColor;opacity:1}

package/dist/assets/RangeControl.css

@@ -0,0 +1 @@
+._container_1ewrb_1{display:grid;grid-template-columns:1fr auto;gap:var(--dev-panel-spacing-sm);align-items:center;width:100%}._range_1ewrb_9{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--dev-panel-input-background-color);outline:none;cursor:pointer;transition:var(--dev-panel-transition)}._range_1ewrb_9::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--dev-panel-accent-color);cursor:pointer;border:2px solid var(--dev-panel-background-color);box-shadow:0 1px 3px #0003;transition:var(--dev-panel-transition)}._range_1ewrb_9::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 2px 6px #0000004d}._range_1ewrb_9::-webkit-slider-thumb:active{transform:scale(.95)}._range_1ewrb_9::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--dev-panel-accent-color);cursor:pointer;border:2px solid var(--dev-panel-background-color);box-shadow:0 1px 3px #0003;transition:var(--dev-panel-transition)}._range_1ewrb_9::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 2px 6px #0000004d}._range_1ewrb_9::-moz-range-thumb:active{transform:scale(.95)}._range_1ewrb_9::-moz-range-track{width:100%;height:4px;border-radius:2px;background:var(--dev-panel-input-background-color);border:none}._range_1ewrb_9::-ms-track{width:100%;height:4px;background:transparent;border-color:transparent;color:transparent}._range_1ewrb_9::-ms-fill-lower{background:var(--dev-panel-accent-color);border-radius:2px}._range_1ewrb_9::-ms-fill-upper{background:var(--dev-panel-input-background-color);border-radius:2px}._range_1ewrb_9::-ms-thumb{width:16px;height:16px;border-radius:50%;background:var(--dev-panel-accent-color);cursor:pointer;border:2px solid var(--dev-panel-background-color);box-shadow:0 1px 3px #0003}._range_1ewrb_9:disabled{cursor:not-allowed;opacity:.6}._range_1ewrb_9:disabled::-webkit-slider-thumb{cursor:not-allowed;background:var(--dev-panel-text-color-muted)}._range_1ewrb_9:disabled::-moz-range-thumb{cursor:not-allowed;background:var(--dev-panel-text-color-muted)}._range_1ewrb_9:disabled::-ms-thumb{cursor:not-allowed;background:var(--dev-panel-text-color-muted)}._range_1ewrb_9:focus{outline:none}._range_1ewrb_9:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(var(--dev-panel-accent-color-rgb),.3)}._range_1ewrb_9:focus::-moz-range-thumb{box-shadow:0 0 0 3px rgba(var(--dev-panel-accent-color-rgb),.3)}._range_1ewrb_9:focus::-ms-thumb{box-shadow:0 0 0 3px rgba(var(--dev-panel-accent-color-rgb),.3)}._value_1ewrb_116{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color);font-weight:500;min-width:2ch;text-align:right;user-select:none}

package/dist/assets/Section.css

@@ -1 +1 @@
-._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}}
+._section_1vgul_1{padding:var(--dev-panel-spacing-sm);overflow:hidden}._section_1vgul_1:last-child{margin-bottom:0}._section_1vgul_1 ._header_1vgul_8{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s ease}._section_1vgul_1 ._header_1vgul_8 ._title_1vgul_15{font-size:11px;font-weight:600;color:var(--dev-panel-text-color)}._section_1vgul_1 ._header_1vgul_8 ._toggle_1vgul_20{font-size:10px;color:var(--dev-panel-border-color)}._section_1vgul_1 ._header_1vgul_8 ._toggle_1vgul_20>svg{display:block;height:1rem;transition:transform .2s ease}._section_1vgul_1 ._header_1vgul_8 ._toggle_1vgul_20>svg._collapsed_1vgul_29{transform:rotate(90deg)}._section_1vgul_1 ._header_1vgul_8 ._toggle_1vgul_20>svg path{fill:currentColor}._section_1vgul_1 ._content_1vgul_35{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_1vgul_1 ._content_1vgul_35: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_1vgul_1,._section_1vgul_1 ._header_1vgul_8{border-color:#555}._section_1vgul_1 ._header_1vgul_8 ._title_1vgul_15{color:#e0e0e0}._section_1vgul_1 ._toggle_1vgul_20{color:#b0b0b0}}

package/dist/assets/SeparatorControl.css

@@ -0,0 +1 @@
+._line_12cvo_1{width:100%;height:1px;background-color:var(--dev-panel-border-color);margin:var(--dev-panel-spacing-sm) 0;opacity:.3}._space_12cvo_9{height:var(--dev-panel-spacing-md);width:100%}._labelContainer_12cvo_14{display:flex;align-items:center;margin:var(--dev-panel-spacing-md) 0 var(--dev-panel-spacing-sm) 0;position:relative}._labelContainer_12cvo_14:before{content:"";flex:1;height:1px;background-color:var(--dev-panel-border-color);opacity:.3;margin-right:var(--dev-panel-spacing-sm)}._labelContainer_12cvo_14:after{content:"";flex:1;height:1px;background-color:var(--dev-panel-border-color);opacity:.3;margin-left:var(--dev-panel-spacing-sm)}._label_12cvo_14{font-size:var(--dev-panel-font-size-xs);font-weight:600;color:var(--dev-panel-text-color-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;padding:0 var(--dev-panel-spacing-xs)}

package/dist/assets/index.css

@@ -1 +1 @@
-._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}
+: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)}

package/dist/assets/index2.css

@@ -0,0 +1 @@
+._logger_t8a3p_1{position:fixed;bottom:20px;left:20px;width:400px;max-width:calc(100vw - 40px);max-height:calc(100vh - 80px);background:#fff;border:1px solid #e1e5e9;border-radius:8px;box-shadow:0 8px 32px #0000001f;z-index:9999;font-family:system-ui,-apple-system,sans-serif;overflow:hidden;transition:all .3s ease}._logger_t8a3p_1._dark_t8a3p_17{background:#1e1e1e;border-color:#333;color:#e0e0e0}._logger_t8a3p_1._collapsed_t8a3p_22{height:50px;overflow:hidden}._header_t8a3p_27{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8f9fa;border-bottom:1px solid #e1e5e9;cursor:pointer;user-select:none;transition:background-color .2s ease}._dark_t8a3p_17 ._header_t8a3p_27{background:#2a2a2a;border-bottom-color:#333}._header_t8a3p_27:hover{background:#e9ecef}._dark_t8a3p_17 ._header_t8a3p_27:hover{background:#333}._title_t8a3p_49{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:14px;color:#495057;margin:0}._dark_t8a3p_17 ._title_t8a3p_49{color:#e0e0e0}._controls_t8a3p_62{display:flex;align-items:center;gap:8px}._toggleButton_t8a3p_68{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}._dark_t8a3p_17 ._toggleButton_t8a3p_68{color:#adb5bd}._toggleButton_t8a3p_68:hover{background:#dee2e6;color:#495057}._dark_t8a3p_17 ._toggleButton_t8a3p_68:hover{background:#495057;color:#e0e0e0}._toggleButton_t8a3p_68>svg{display:block;height:1rem;transition:transform ease .2s}._toggleButton_t8a3p_68>svg._collapsed_t8a3p_22{transform:rotate(180deg)}._toggleButton_t8a3p_68>svg path{fill:currentColor}._closeButton_t8a3p_104{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#dc3545;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:all .2s ease}._closeButton_t8a3p_104:hover{background:#f5c6cb;color:#721c24}._dark_t8a3p_17 ._closeButton_t8a3p_104:hover{background:#721c24;color:#f5c6cb}._content_t8a3p_129{padding:16px;overflow:auto;max-height:calc(100vh - 160px);background:#fff}._dark_t8a3p_17 ._content_t8a3p_129{background:#1e1e1e}._jsonDisplay_t8a3p_139{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:12px;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-all;color:#212529}._dark_t8a3p_17 ._jsonDisplay_t8a3p_139{color:#e0e0e0}._empty_t8a3p_152{color:#6c757d;font-style:italic;text-align:center;padding:20px}._dark_t8a3p_17 ._empty_t8a3p_152{color:#adb5bd}._badge_t8a3p_162{display:flex;justify-content:center;align-items:center;background:#007bff;color:#fff;width:1rem;height:1rem;border-radius:50%;padding:4px;font-size:10px;font-weight:600}._badge_t8a3p_162._updated_t8a3p_175{background:#28a745;animation:_pulse_t8a3p_1 .6s ease-in-out}@keyframes _pulse_t8a3p_1{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}._content_t8a3p_129::-webkit-scrollbar{width:6px}._content_t8a3p_129::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}._dark_t8a3p_17 ._content_t8a3p_129::-webkit-scrollbar-track{background:#333}._content_t8a3p_129::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._dark_t8a3p_17 ._content_t8a3p_129::-webkit-scrollbar-thumb{background:#555}._content_t8a3p_129::-webkit-scrollbar-thumb:hover{background:#a8a8a8}._dark_t8a3p_17 ._content_t8a3p_129::-webkit-scrollbar-thumb:hover{background:#777}

package/dist/components/ControlRenderer/ControlRenderer.js

@@ -1,8 +1,32 @@
-import "react/jsx-runtime";
-import "react";
-import "../../utils/className/className.js";
-import "../../utils/store/store.js";
-import { ControlRenderer as i } from "./controls/index.js";
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { Suspense as a } from "react";
+import { className as c } from "../../utils/className/className.js";
+import { controls as d } from "./controls/index.js";
+import '../../assets/ControlRenderer.css';const p = "_controlRendererContainer_eix3y_1", _ = "_controlContainer_eix3y_5", m = "_fullWidth_eix3y_13", u = "_controlWrapper_eix3y_16", y = "_label_eix3y_20", f = "_description_eix3y_28", C = "_loading_eix3y_29", r = {
+  controlRendererContainer: p,
+  controlContainer: _,
+  fullWidth: m,
+  controlWrapper: u,
+  label: y,
+  description: f,
+  loading: C
+}, h = ["button", "buttonGroup", "separator"];
+function v({ name: i, control: e }) {
+  const l = e?.label || i;
+  function s() {
+    if (!e || !e.type)
+      return /* @__PURE__ */ n("div", { className: r.error, children: "Control type is not defined" });
+    const o = d[e.type];
+    return o ? /* @__PURE__ */ n(a, { fallback: /* @__PURE__ */ n("div", { className: r.loading, children: "Loading control..." }), children: /* @__PURE__ */ n(o, { control: e }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
+  }
+  return /* @__PURE__ */ t("div", { className: r.controlRendererContainer, children: [
+    /* @__PURE__ */ t("div", { ...c(r.controlContainer, { [r.fullWidth]: h.includes(e.type) }), children: [
+      e?.type !== "button" && e?.type !== "separator" && /* @__PURE__ */ n("label", { className: r.label, children: l }),
+      /* @__PURE__ */ n("div", { className: r.controlWrapper, children: s() })
+    ] }),
+    e?.description && /* @__PURE__ */ n("span", { className: r.description, children: e.description })
+  ] });
+}
 export {
-  i as ControlRenderer
+  v as ControlRenderer
 };