@berenjena/react-dev-panel 1.0.1 → 1.0.3

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,444 @@
-# React dev panel
+# React Dev Panel
+
+[![npm version](https://badge.fury.io/js/@berenjena%2Freact-dev-panel.svg)](https://badge.fury.io/js/@berenjena%2Freact-dev-panel)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Weekly Downloads](https://img.shields.io/npm/dw/@berenjena/react-dev-panel)](https://www.npmjs.com/package/@berenjena/react-dev-panel)
+![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/%40berenjena%2Freact-dev-panel?label=gzipped)
+
+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
+-   📱 **Responsive** - Adapts to different screen sizes and can be positioned anywhere
+-   ⌨️ **Keyboard Shortcuts** - Quick access with customizable hotkeys
+-   🔄 **State Management** - Built-in state persistence
+-   📖 **TypeScript First** - Full type safety and IntelliSense support
+-   🚀 **Zero Dependencies** - Only requires React (peer dependency)
+
+## 📊 Package Stats
+
+-   **Bundle Size**: ~35KB (minified)
+-   **Total Files**: 142
+-   **License**: MIT
+
+## 🆕 What's New
+
+### Recent Updates (v1.0.1+)
+
+-   **🔄 Zero External Dependencies**: Replaced Zustand with React's built-in `useSyncExternalStore` for state management
+-   **📊 Logger Component**: New floating, collapsible logger component for debugging object data in JSON format
+-   **⚡ Performance Optimizations**: Selective subscriptions for better re-render performance
+-   **🔧 Development Mode Improvements**: Removed development mode checks - panel now works in all environments
+-   **📝 Enhanced Documentation**: Comprehensive code documentation and better TypeScript support
+
+## 📦 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
+
+### Text Control
+
+```tsx
+{
+  type: 'text',
+  value: 'Hello World',
+  label: 'Message',
+  placeholder: 'Enter message...',
+  event: 'onBlur', // or 'onChange'
+  onChange: (value: string) => setValue(value),
+}
+```
+
+### Number Control
+
+```tsx
+{
+  type: 'number',
+  value: 42,
+  label: 'Count',
+  min: 0,
+  max: 100,
+  step: 1,
+  onChange: (value: number) => setValue(value),
+}
+```
+
+### Boolean Control
+
+```tsx
+{
+  type: 'boolean',
+  value: true,
+  label: 'Enable Feature',
+  onChange: (value: boolean) => setValue(value),
+}
+```
+
+### Select Control
+
+```tsx
+{
+  type: 'select',
+  value: 'option1',
+  label: 'Choose Option',
+  options: ['option1', 'option2', 'option3'],
+  // or with labels:
+  options: [
+    { label: 'Option 1', value: 'opt1' },
+    { label: 'Option 2', value: 'opt2' },
+  ],
+  onChange: (value: string) => setValue(value),
+}
+```
+
+### Color Control
+
+```tsx
+{
+  type: 'color',
+  value: '#ff6200',
+  label: 'Brand Color',
+  onChange: (value: string) => setValue(value),
+}
+```
+
+### Range Control
+
+```tsx
+{
+  type: 'range',
+  value: 50,
+  label: 'Volume',
+  min: 0,
+  max: 100,
+  step: 1,
+  onChange: (value: number) => setValue(value),
+}
+```
+
+### Date Control
+
+```tsx
+{
+  type: 'date',
+  value: '2025-07-26',
+  label: 'Start Date',
+  min: '2025-01-01',
+  max: '2025-12-31',
+  onChange: (value: string) => setValue(value),
+}
+```
+
+### Button Control
+
+```tsx
+{
+  type: 'button',
+  label: 'Reset Values',
+  onClick: () => resetToDefaults(),
+}
+```
+
+### Button Group Control
+
+```tsx
+{
+  type: 'buttonGroup',
+  label: 'Actions',
+  buttons: [
+    { label: 'Save', onClick: handleSave },
+    { label: 'Load', onClick: handleLoad },
+    { label: 'Reset', onClick: handleReset, disabled: true },
+  ],
+}
+```
+
+### Separator Control
+
+```tsx
+// Line separator
+{ type: 'separator' }
+
+// Space separator
+{ type: 'separator', style: 'space' }
+
+// Label separator
+{ type: 'separator', style: 'label', label: 'Advanced Settings' }
+```
+
+## 🎨 Styling and Theming
+
+The dev panel uses CSS custom properties for easy theming:
+
+```css
+:root {
+	--dev-panel-background-color: #1a1a1a;
+	--dev-panel-text-color: #ffffff;
+	--dev-panel-text-color-highlight: #ffffff;
+	--dev-panel-text-color-muted: #888888;
+	--dev-panel-accent-color: #ff6200;
+	--dev-panel-border-color: #333333;
+	--dev-panel-input-background-color: #2a2a2a;
+	--dev-panel-highlight-color: #ff620020;
+	--dev-panel-font-size-xs: 11px;
+	--dev-panel-font-size-sm: 12px;
+	--dev-panel-spacing-xs: 4px;
+	--dev-panel-spacing-sm: 8px;
+	--dev-panel-spacing-md: 16px;
+	--dev-panel-border-radius: 4px;
+	--dev-panel-inputs-height: 24px;
+	--dev-panel-transition: all 0.2s ease;
+}
+```
+
+### Custom Panel Positioning
+
+```tsx
+<DevPanel panelTitle="Custom Panel" position={{ x: 100, y: 100 }} defaultExpanded={true} />
+```
+
+## ⌨️ 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 />;
+}
+```
+
+### Conditional Controls
+
+```tsx
+useDevPanel("Settings", {
+	mode: {
+		type: "select",
+		value: mode,
+		options: ["simple", "advanced"],
+		onChange: setMode,
+	},
+	// Only show advanced settings when mode is 'advanced'
+	...(mode === "advanced" && {
+		separator1: { type: "separator", style: "label", label: "Advanced" },
+		complexValue: {
+			type: "range",
+			value: complexValue,
+			min: 0,
+			max: 1000,
+			onChange: setComplexValue,
+		},
+	}),
+});
+```
+
+### Event Handling Options
+
+```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,
+}
+```
+
+## 📚 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
+
+### Prerequisites
+
+-   Node.js 18+
+-   React 18+
+
+### Setup
+
+```bash
+git clone https://github.com/Berenjenas/react-dev-panel.git
+cd react-dev-panel
+npm install
+```
+
+### Available Scripts
+
+```bash
+npm run dev          # Start development server
+npm run build        # Build for production
+npm run storybook    # Start Storybook
+npm run test         # Run tests
+npm run lint         # Lint code
+```
+
+## 📖 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
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🔗 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/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
 };

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/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;