@berenjena/react-dev-panel 2.2.0 → 2.4.0

package/README.md

@@ -5,323 +5,181 @@
 [![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 development panel for React that allows developers to inspect and control component props, manage state, and accelerate prototyping directly within the application UI.
+A lightweight, type-safe development panel for React that lets you control component state and props in real-time during development.
 
-## ✨ Features
+## Features
 
--   🎛️ **Rich Control Types** - Boolean, Number, Text, Select, Color, Range, Date, Button, ButtonGroup, and Separator controls
--   🚀 **Zero Configuration** - Auto-mounting and unmounting, no providers or setup required
--   🎨 **Themeable** - Built-in themes and CSS custom properties for customization
--   ⌨️ **Keyboard Shortcuts** - Customizable hotkeys for panel toggle
--   📖 **TypeScript First** - Full type safety and IntelliSense support
--   � **Auto State Management** - Automatic portal rendering and lifecycle management
--   📦 **Lightweight** - Only requires React as peer dependency
+-   **One Hook**: Single `useDevPanel` hook - no providers, no setup
+-   **13 Control Types**: Text, Number, Boolean, Select, Color, Range, Date, Button, LocalStorage, and more
+-   **Auto-Persistence**: Optional localStorage sync for control values
+-   **Type-Safe**: Full TypeScript support with IntelliSense
+-   **Themeable**: 21 built-in themes + CSS custom properties
+-   **Lightweight**: ~16 KB gzipped, zero runtime dependencies
 
-## 📦 Installation
+## 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
-
-The package exposes a single hook: `useDevPanel`. This hook handles everything automatically:
-
--   **Auto-mounting**: Creates and mounts the dev panel UI when first called
--   **Auto-unmounting**: Removes the panel from DOM when no controls are active
--   **State management**: Manages all internal state and control synchronization
--   **Portal rendering**: Renders the panel outside your component tree
-
-### Basic Usage
+## Quick Start
 
 ```tsx
 import { useState } from "react";
 import { useDevPanel } from "@berenjena/react-dev-panel";
 
 function App() {
-	const [name, setName] = useState("John Doe");
+	const [name, setName] = useState("John");
 	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,
-		},
+	useDevPanel("Settings", {
+		name: { type: "text", value: name, onChange: setName },
+		age: { type: "number", value: age, min: 0, max: 100, onChange: setAge },
+		theme: { type: "select", value: theme, options: ["light", "dark"], onChange: setTheme },
 	});
 
-	return (
-		<div>
-			<h1>Hello, {name}!</h1>
-			<p>Age: {age}</p>
-			<p>Status: {isActive ? "Active" : "Inactive"}</p>
-			<p>Theme: {theme}</p>
-		</div>
-	);
+	return <div>Hello, {name}!</div>;
 }
 ```
 
-That's it! No additional components or providers needed. The hook automatically handles the entire panel lifecycle.
-
-## 🎛️ Control Types
+**That's it!** Press `Ctrl+Shift+A` to toggle the panel.
 
-React Dev Panel provides rich control types for different data types. Here are some quick examples:
+## Control Types
 
-### Text Control
+All 13 control types available:
 
 ```tsx
 {
-  type: 'text',
-  value: 'Hello World',
-  label: 'Message',
-  placeholder: 'Enter message...',
-  onChange: (value: string) => setValue(value),
+  text: { type: "text", value: string, onChange: (v) => void }
+  number: { type: "number", value: number, min?: number, max?: number, onChange: (v) => void }
+  boolean: { type: "boolean", value: boolean, onChange: (v) => void }
+  select: { type: "select", value: string, options: string[], onChange: (v) => void }
+  multiselect: { type: "multiselect", value: string[], options: string[], onChange: (v) => void }
+  color: { type: "color", value: string, onChange: (v) => void }
+  range: { type: "range", value: number, min: number, max: number, step?: number, onChange: (v) => void }
+  date: { type: "date", value: string, min?: string, max?: string, onChange: (v) => void }
+  button: { type: "button", onClick: () => void }
+  buttonGroup: { type: "buttonGroup", buttons: Array<{label: string, onClick: () => void}> }
+  dragAndDrop: { type: "dragAndDrop", onChange: (files: FileList) => void }
+  localStorage: { type: "localStorage", onRefresh?: () => void }
+  separator: { type: "separator", variant?: "line" | "label" | "space" }
 }
 ```
 
-### Number Control
+**Common options** (available on most controls):
 
-```tsx
-{
-  type: 'number',
-  value: 42,
-  label: 'Count',
-  min: 0,
-  max: 100,
-  onChange: (value: number) => setValue(value),
-}
-```
+-   `label?: string` - Display label
+-   `description?: string` - Help text
+-   `disabled?: boolean` - Disable control
+-   `persist?: boolean` - Auto-save to localStorage
 
-### Boolean Control
+📖 **[Full control documentation →](./guides/CONTROLS.md)**
 
-```tsx
-{
-  type: 'boolean',
-  value: true,
-  label: 'Enable Feature',
-  onChange: (value: boolean) => setValue(value),
-}
-```
+## Configuration
 
-### Button Control
+### Custom Hotkey
 
 ```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. The default hotkey is `Ctrl+Shift+A`:
-
-```tsx
-useDevPanel("My Section", controls, {
-	hotKeyConfig: {
-		key: "d", // The key to press
-		ctrlKey: true, // Requires Ctrl key
-		shiftKey: false, // Requires Shift key
-		altKey: true, // Requires Alt key
-		metaKey: false, // Requires Meta/Cmd key (Mac)
-	},
+useDevPanel("Settings", controls, {
+	hotKeyConfig: { key: "d", ctrlKey: true, shiftKey: true },
 });
 ```
 
-## 🔧 Advanced Usage
-
-### Multiple Panel Sections
-
-You can call `useDevPanel` from multiple components to create organized sections:
+### Panel Theme
 
 ```tsx
-function App() {
-	// In UserProfile.tsx
-	useDevPanel("User Profile", {
-		name: { type: "text", value: name, onChange: setName },
-		avatar: { type: "text", value: avatar, onChange: setAvatar },
-	});
-
-	// In AppSettings.tsx
-	useDevPanel("App Settings", {
-		theme: { type: "select", value: theme, options: ["light", "dark"], onChange: setTheme },
-		debug: { type: "boolean", value: debug, onChange: setDebug },
-	});
-
-	// Both sections appear in the same panel automatically
-	return <YourApp />;
-}
-```
-
-### Panel Configuration
-
-Customize the panel's appearance and behavior:
-
-```tsx
-useDevPanel("My Section", controls, {
-	panelTitle: "Custom Panel Title",
-	theme: "dark", // Built-in themes: light, dark, neon, etc.
-	hotKeyConfig: {
-		// Custom toggle hotkey (default: Ctrl+Shift+A)
-		key: "f",
-		ctrlKey: true,
-		shiftKey: true,
-		altKey: false,
-		metaKey: false,
-	},
+useDevPanel("Settings", controls, {
+	theme: "neon", // 21 built-in themes available
+	panelTitle: "My Dev Panel",
 });
 ```
 
-### Event Handling Options
-
-React Dev Panel supports two different event handling strategies for input controls:
+### Event Handling
 
-**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.
+Choose when controls trigger updates:
 
 ```tsx
 {
-  type: 'text',
+  type: "text",
   value: searchTerm,
-  event: 'onChange', // Real-time updates
-  onChange: setSearchTerm,
+  event: "onChange", // Update on every keystroke (default)
+  onChange: setSearchTerm
 }
 
 {
-  type: 'number',
-  value: price,
-  event: 'onBlur', // Update only when focus is lost
-  onChange: setPrice,
+  type: "text",
+  value: apiKey,
+  event: "onBlur", // Update only when focus is lost
+  onChange: setApiKey
 }
 ```
 
-## 📚 Documentation
+📖 **[Styling guide](./guides/STYLING.md)** | **[Event handling](./guides/EVENT_HANDLING.md)** | **[Advanced usage](./guides/ADVANCED_USAGE.md)**
 
-### Core Guides
+## Documentation
 
--   **[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
+**Guides:**
 
-### Development
+-   [Control Types](./guides/CONTROLS.md) - All 12 control types with examples
+-   [Persistence](./guides/PERSISTENCE.md) - Auto-save to localStorage
+-   [Styling & Theming](./guides/STYLING.md) - Themes and CSS customization
+-   [Event Handling](./guides/EVENT_HANDLING.md) - onChange vs onBlur strategies
+-   [Advanced Usage](./guides/ADVANCED_USAGE.md) - Complex patterns and optimization
+-   [Bundle Size](./guides/BUNDLE_SIZE.md) - Size tracking and optimization
+-   [Development](./guides/DEVELOPMENT.md) - Contributing and setup
 
--   **[Development Guide](./guides/DEVELOPMENT.md)** - Setup, contributing, and project structure
+**Live Examples:**
 
-## 📚 API Reference
+-   [Storybook](https://berenjenas.github.io/react-dev-panel/) - Interactive component demos
+-   Run locally: `npm run storybook`
 
-### `useDevPanel(sectionName, controls, devPanelProps?)`
+## API Reference
 
-The only export from this package. This hook manages the entire dev panel lifecycle and handles all the heavy lifting for you.
+### `useDevPanel(sectionName, controls, options?)`
 
 **Parameters:**
 
--   `sectionName` - Unique identifier for the control group
--   `controls` - Object containing control definitions
--   `devPanelProps` - Optional panel configuration (title, theme, hotkeys)
-
-**What it does automatically:**
-
--   **Portal Management**: Creates a React portal on first use and renders the panel outside your component tree
--   **State Synchronization**: Keeps all controls in sync across multiple component instances
--   **Lifecycle Management**: Mounts the panel when controls are registered, unmounts when all controls are removed
--   **Memory Management**: Cleans up subscriptions and DOM elements when components unmount
--   **Theme Application**: Applies theme configurations and CSS custom properties
-
-## 🛠️ Development
-
-Want to contribute or set up the project locally?
-
-React Dev Panel maintains high code quality standards with comprehensive tooling:
+-   `sectionName: string` - Unique identifier for this control group
+-   `controls: ControlsGroup` - Object mapping control keys to control definitions
+-   `options?: DevPanelProps` - Optional configuration
 
--   **🔍 ESLint** - Comprehensive linting for TypeScript and React
--   **💅 Prettier** - Automatic code formatting
--   **🎨 Stylelint** - CSS/SCSS linting and formatting
--   **📝 Commitlint** - Conventional commit message validation
--   **🪝 Husky** - Pre-commit hooks for quality assurance
--   **📦 Changesets** - Automated version management and releases
+**Options:**
 
-All quality checks run automatically via pre-commit hooks, ensuring consistent code quality.
+```tsx
+{
+  panelTitle?: string;           // Custom panel header
+  theme?: string;                // Built-in theme name
+  hotKeyConfig?: {               // Custom toggle hotkey
+    key: string;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+  }
+}
+```
 
-**📖 [Development setup, contributing guidelines, and project structure →](./guides/DEVELOPMENT.md)**
+## Contributing
 
-## 📖 Storybook
+Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
 
-Explore all components and controls in our Storybook:
+**Development:**
 
 ```bash
+git clone https://github.com/Berenjenas/react-dev-panel.git
+cd react-dev-panel
+npm install
 npm run storybook
 ```
 
-Visit `http://localhost:6006` to see interactive examples and documentation.
+## License
 
-## 🤝 Contributing
+MIT © [Berenjena](https://berenjena.com.ar)
 
-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)
+**Links:** [NPM](https://www.npmjs.com/package/@berenjena/react-dev-panel) · [GitHub](https://github.com/Berenjenas/react-dev-panel) · [Issues](https://github.com/Berenjenas/react-dev-panel/issues) · [Berenjena](https://berenjena.com.ar)
 
 ---
 

package/dist/assets/index11.css

@@ -1 +1 @@
-@keyframes _borderDance_p0d3i_1{0%{background-position:0px 0px,100px 100%,0px 100%,100% 0px}to{background-position:100px 0px,0px 100%,0px 0px,100% 100%}}._dropZone_p0d3i_9{width:100%;height:100px;border:2px solid transparent;border-radius:var(--dev-panel-border-radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:var(--dev-panel-transition-normal);position:relative}._dropZone_p0d3i_9:hover{background-color:var(--dev-panel-surface-color-hover)}._dropZone_p0d3i_9._disabled_p0d3i_26{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;pointer-events:none}._dropZone_p0d3i_9._disabled_p0d3i_26:hover{background-color:transparent}._dropZone_p0d3i_9:before{content:"";position:absolute;inset:-2px;border:2px dashed var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius-md);pointer-events:none}._dropZone_p0d3i_9._active_p0d3i_45:before{border:none;background:linear-gradient(90deg,var(--dev-panel-accent-color) 50%,transparent 50%),linear-gradient(90deg,var(--dev-panel-accent-color) 50%,transparent 50%),linear-gradient(0deg,var(--dev-panel-accent-color) 50%,transparent 50%),linear-gradient(0deg,var(--dev-panel-accent-color) 50%,transparent 50%);background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:15px 2px,15px 2px,2px 15px,2px 15px;background-position:0px 0px,100% 100%,0px 100%,100% 0px;animation:_borderDance_p0d3i_1 2s infinite linear}._droppedImage_p0d3i_54{max-width:100%;max-height:100%;object-fit:contain}._supportedFormats_p0d3i_60{font-size:var(--dev-panel-font-size-sm);color:var(--dev-panel-text-color-muted);margin:var(--dev-panel-spacing-md) 0 0 0}._dropText_p0d3i_66{margin:0;color:var(--dev-panel-text-color)}._droppedFile_p0d3i_71{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}._droppedText_p0d3i_79{margin:0;color:var(--dev-panel-text-color);font-weight:var(--dev-panel-font-weight-medium);font-size:var(--dev-panel-font-size-md)}._errorMessage_p0d3i_86{padding:var(--dev-panel-spacing-md) var(--dev-panel-spacing-lg);border-radius:var(--dev-panel-border-radius-sm);color:var(--dev-panel-error-color);font-size:var(--dev-panel-font-size-md);margin:0}._errorMessage_p0d3i_86 p{margin:0}
+:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #2563eb;--dev-panel-accent-color-hover: #1d4ed8;--dev-panel-accent-color-active: #1e40af;--dev-panel-accent-color-disabled: #2563eb30;--dev-panel-primary-color: #2563eb;--dev-panel-primary-color-hover: #1d4ed8;--dev-panel-primary-color-active: #1e40af;--dev-panel-primary-color-disabled: #2563eb30;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-base: 4px;--dev-panel-spacing-xs: calc(var(--dev-panel-spacing-base) * .5);--dev-panel-spacing-sm: var(--dev-panel-spacing-base);--dev-panel-spacing-md: calc(var(--dev-panel-spacing-base) * 2);--dev-panel-spacing-lg: calc(var(--dev-panel-spacing-base) * 3);--dev-panel-spacing-xl: calc(var(--dev-panel-spacing-base) * 4);--dev-panel-spacing-2xl: calc(var(--dev-panel-spacing-base) * 5);--dev-panel-spacing-3xl: calc(var(--dev-panel-spacing-base) * 6);--dev-panel-spacing-4xl: calc(var(--dev-panel-spacing-base) * 8);--dev-panel-spacing: var(--dev-panel-spacing-lg);--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 400px;--dev-panel-min-width: 280px;--dev-panel-max-height: 600px;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}@media (prefers-color-scheme: light){:root{color-scheme:light;--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong)}}:root[data-dev-panel-theme=dark]{color-scheme:dark}:root[data-dev-panel-theme=light]{--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong);color-scheme:light}._container_cgfc3_217{width:100%;display:flex;flex-direction:column;gap:var(--dev-panel-spacing-md)}._header_cgfc3_224{display:flex;justify-content:space-between;align-items:center}._count_cgfc3_230{font-size:var(--dev-panel-font-size-sm);color:var(--dev-panel-text-color-secondary);font-weight:var(--dev-panel-font-weight-medium)}._actions_cgfc3_236{display:flex;gap:var(--dev-panel-spacing-xs)}._btnRefresh_cgfc3_241,._btnAdd_cgfc3_242{padding:0;margin:0;border:none;background:none;font:inherit;color:inherit;padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);background:var(--dev-panel-input-background-color);border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);color:var(--dev-panel-text-color);font-size:var(--dev-panel-font-size-md);cursor:pointer;transition:var(--dev-panel-transition);min-height:28px;min-width:28px;display:flex;align-items:center;justify-content:center}._btnRefresh_cgfc3_241:hover:not(:disabled),._btnAdd_cgfc3_242:hover:not(:disabled){background:var(--dev-panel-surface-color-hover);border-color:var(--dev-panel-input-border-color-hover)}._btnRefresh_cgfc3_241:active:not(:disabled),._btnAdd_cgfc3_242:active:not(:disabled){transform:scale(.95)}._btnRefresh_cgfc3_241:disabled,._btnAdd_cgfc3_242:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed}._itemsList_cgfc3_279{display:flex;flex-direction:column;gap:var(--dev-panel-spacing-md)}._card_cgfc3_285{display:flex;flex-direction:column;overflow:visible;border:1px solid var(--dev-panel-border-color);transition:var(--dev-panel-transition)}._card_cgfc3_285:hover{border-color:var(--dev-panel-input-border-color-hover);box-shadow:var(--dev-panel-shadow-xs)}._cardHeader_cgfc3_297{display:flex;align-items:center;gap:var(--dev-panel-spacing-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);transition:var(--dev-panel-transition)}._cardHeader_cgfc3_297:hover{background:var(--dev-panel-surface-color-hover)}._clickable_cgfc3_308{cursor:pointer}._collapseIcon_cgfc3_312{display:flex;align-items:center;justify-content:center;font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color-secondary);flex-shrink:0;min-width:16px;transition:var(--dev-panel-transition)}._cardTitle_cgfc3_323{font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-semibold);color:var(--dev-panel-text-color)}._keyCode_cgfc3_329{flex:1;padding-top:4px;font-size:var(--dev-panel-font-size-xs);word-break:break-all;font-weight:var(--dev-panel-font-weight-semibold)}._cardBody_cgfc3_337{padding:var(--dev-panel-spacing-md);display:flex;flex-direction:column;gap:var(--dev-panel-spacing-sm)}._field_cgfc3_344{display:flex;flex-direction:column;gap:var(--dev-panel-spacing-xs);margin-bottom:var(--dev-panel-spacing-md)}._field_cgfc3_344:last-child{margin-bottom:0}._valueActions_cgfc3_354{display:flex;gap:var(--dev-panel-spacing-sm)}._fieldLabel_cgfc3_359{font-size:var(--dev-panel-font-size-xs);font-weight:var(--dev-panel-font-weight-semibold);color:var(--dev-panel-text-color-secondary);text-transform:uppercase;letter-spacing:.5px}._input_cgfc3_367{display:block;width:100%;height:var(--dev-panel-inputs-height-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);line-height:var(--dev-panel-line-height-normal);color:var(--dev-panel-input-text-color);background-color:var(--dev-panel-input-background-color);border:var(--dev-panel-input-border-width) solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);transition:var(--dev-panel-transition)}._input_cgfc3_367::placeholder{color:var(--dev-panel-input-placeholder-color)}._input_cgfc3_367:hover:not(:disabled){border-color:var(--dev-panel-input-border-color-hover)}._input_cgfc3_367:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px #6366f133}._input_cgfc3_367:disabled{opacity:var(--dev-panel-opacity-50);background-color:var(--dev-panel-surface-color);border-color:var(--dev-panel-border-color);cursor:not-allowed}._textarea_cgfc3_399{scrollbar-width:thin;scrollbar-color:var(--dev-panel-scrollbar-thumb-color) var(--dev-panel-scrollbar-track-color);font-family:Courier New,monospace;font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color);line-height:1.5;word-break:break-all;width:100%;padding:var(--dev-panel-spacing-sm);background:var(--dev-panel-input-background-color);border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);resize:vertical;min-height:60px;transition:var(--dev-panel-transition)}._textarea_cgfc3_399::-webkit-scrollbar{width:var(--dev-panel-scrollbar-width);height:var(--dev-panel-scrollbar-width)}._textarea_cgfc3_399::-webkit-scrollbar-track{background:var(--dev-panel-scrollbar-track-color);border-radius:var(--dev-panel-border-radius-md)}._textarea_cgfc3_399::-webkit-scrollbar-thumb{background:var(--dev-panel-scrollbar-thumb-color);border-radius:var(--dev-panel-border-radius-md);transition:var(--dev-panel-transition-fast)}._textarea_cgfc3_399::-webkit-scrollbar-thumb:hover{background:var(--dev-panel-scrollbar-thumb-hover-color)}._textarea_cgfc3_399::-webkit-scrollbar-corner{background:var(--dev-panel-scrollbar-track-color)}._textarea_cgfc3_399:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px #6366f133}._textarea_cgfc3_399:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed}._valueText_cgfc3_445{font-family:Courier New,monospace;font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color);line-height:1.5;word-break:break-all;margin:0;padding:var(--dev-panel-spacing-sm);background:var(--dev-panel-input-background-color);border:1px solid var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius);white-space:pre-wrap;max-height:none;overflow-y:visible}._btnToggle_cgfc3_461{padding:0;margin:0;border:none;background:none;font:inherit;color:inherit;cursor:pointer;align-self:flex-start;padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);background:transparent;border:1px solid var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius);color:var(--dev-panel-text-color-secondary);font-size:var(--dev-panel-font-size-xs);font-weight:var(--dev-panel-font-weight-medium);transition:var(--dev-panel-transition);display:flex;align-items:center;gap:var(--dev-panel-spacing-xs)}._btnToggle_cgfc3_461:hover:not(:disabled){background:var(--dev-panel-input-background-color);border-color:var(--dev-panel-input-border-color-hover);color:var(--dev-panel-text-color)}._btnToggle_cgfc3_461:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed}._cardActions_cgfc3_492{display:flex;gap:var(--dev-panel-spacing-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md)}._btnSave_cgfc3_498,._btnCancel_cgfc3_499,._btnEdit_cgfc3_500,._btnDelete_cgfc3_501{display:inline-flex;align-items:center;justify-content:center;gap:var(--dev-panel-spacing-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-lg);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-medium);line-height:var(--dev-panel-line-height-tight);border:var(--dev-panel-input-border-width) solid transparent;border-radius:var(--dev-panel-border-radius);background:transparent;color:inherit;text-decoration:none;white-space:nowrap;user-select:none;transition:var(--dev-panel-transition);cursor:pointer;flex:1;min-height:32px;background:var(--dev-panel-input-background-color);border:1px solid var(--dev-panel-input-border-color);color:var(--dev-panel-text-color)}._btnSave_cgfc3_498:disabled,._btnCancel_cgfc3_499:disabled,._btnEdit_cgfc3_500:disabled,._btnDelete_cgfc3_501:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;pointer-events:none}._btnSave_cgfc3_498:hover:not(:disabled),._btnCancel_cgfc3_499:hover:not(:disabled),._btnEdit_cgfc3_500:hover:not(:disabled),._btnDelete_cgfc3_501:hover:not(:disabled){background:var(--dev-panel-surface-color-hover);border-color:var(--dev-panel-input-border-color-hover);transform:translateY(-1px);box-shadow:var(--dev-panel-shadow-sm)}._btnSave_cgfc3_498:active:not(:disabled),._btnCancel_cgfc3_499:active:not(:disabled),._btnEdit_cgfc3_500:active:not(:disabled),._btnDelete_cgfc3_501:active:not(:disabled){transform:translateY(0);box-shadow:none}._btnSave_cgfc3_498{background:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent);border-color:var(--dev-panel-accent-color)}._btnSave_cgfc3_498:hover:not(:disabled){background:var(--dev-panel-accent-color-hover);border-color:var(--dev-panel-accent-color-hover)}._btnDelete_cgfc3_501:hover:not(:disabled){background:var(--dev-panel-error-color);border-color:var(--dev-panel-error-color);color:var(--dev-panel-text-color-on-accent)}._empty_cgfc3_567{padding:var(--dev-panel-spacing-xl);text-align:center;color:var(--dev-panel-text-color-secondary);font-size:var(--dev-panel-font-size-sm);font-style:italic;background:var(--dev-panel-surface-color);border:1px dashed var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius)}

package/dist/assets/index12.css

@@ -1 +1 @@
-._container_1oo6z_1{display:grid;grid-template-columns:var(--dev-panel-inputs-height-sm) 1fr;gap:var(--dev-panel-spacing-md);align-items:start}._container_1oo6z_1 ._colorPreview_1oo6z_7{overflow:hidden;width:var(--dev-panel-inputs-height-sm);height:var(--dev-panel-inputs-height-sm);cursor:pointer;border-radius:var(--dev-panel-border-radius);border:1px solid var(--dev-panel-input-border-color);transition:var(--dev-panel-transition);position:relative;background-color:var(--dev-panel-input-border-color);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0px}._container_1oo6z_1 ._colorPreview_1oo6z_7:hover{border-color:var(--dev-panel-input-border-color-hover);transform:scale(1.05)}._container_1oo6z_1 ._colorPreview_1oo6z_7:focus-within{border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent)}._container_1oo6z_1 ._colorPreview_1oo6z_7:active{transform:scale(.95)}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]{background:none;border:0;width:150%;height:150%;margin:-25%;cursor:pointer;opacity:0}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]:focus{outline:none}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]:disabled{cursor:not-allowed;opacity:.5}._container_1oo6z_1 ._inputSection_1oo6z_47{display:flex;flex-direction:column;gap:var(--dev-panel-spacing-sm)}._container_1oo6z_1 ._errorMessage_1oo6z_52{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-danger-color);font-weight:var(--dev-panel-font-weight-medium);grid-column:1/-1;margin-top:var(--dev-panel-spacing-xs)}._container_1oo6z_1 ._presets_1oo6z_59{display:flex;flex-wrap:wrap;gap:var(--dev-panel-spacing-xs);margin-top:var(--dev-panel-spacing-xs)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65{width:24px;height:24px;border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius-sm);cursor:pointer;transition:var(--dev-panel-transition);background:none;padding:0}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:hover{border-color:var(--dev-panel-input-border-color-hover);transform:scale(1.1)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:active{transform:scale(.95)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:disabled{cursor:not-allowed;opacity:.5;transform:none!important}._container_1oo6z_1:has(input:disabled){opacity:.6;pointer-events:none}._container_1oo6z_1:has(input:disabled) ._colorPreview_1oo6z_7{cursor:not-allowed;transform:none!important}
+@keyframes _borderDance_p0d3i_1{0%{background-position:0px 0px,100px 100%,0px 100%,100% 0px}to{background-position:100px 0px,0px 100%,0px 0px,100% 100%}}._dropZone_p0d3i_9{width:100%;height:100px;border:2px solid transparent;border-radius:var(--dev-panel-border-radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:var(--dev-panel-transition-normal);position:relative}._dropZone_p0d3i_9:hover{background-color:var(--dev-panel-surface-color-hover)}._dropZone_p0d3i_9._disabled_p0d3i_26{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;pointer-events:none}._dropZone_p0d3i_9._disabled_p0d3i_26:hover{background-color:transparent}._dropZone_p0d3i_9:before{content:"";position:absolute;inset:-2px;border:2px dashed var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius-md);pointer-events:none}._dropZone_p0d3i_9._active_p0d3i_45:before{border:none;background:linear-gradient(90deg,var(--dev-panel-accent-color) 50%,transparent 50%),linear-gradient(90deg,var(--dev-panel-accent-color) 50%,transparent 50%),linear-gradient(0deg,var(--dev-panel-accent-color) 50%,transparent 50%),linear-gradient(0deg,var(--dev-panel-accent-color) 50%,transparent 50%);background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:15px 2px,15px 2px,2px 15px,2px 15px;background-position:0px 0px,100% 100%,0px 100%,100% 0px;animation:_borderDance_p0d3i_1 2s infinite linear}._droppedImage_p0d3i_54{max-width:100%;max-height:100%;object-fit:contain}._supportedFormats_p0d3i_60{font-size:var(--dev-panel-font-size-sm);color:var(--dev-panel-text-color-muted);margin:var(--dev-panel-spacing-md) 0 0 0}._dropText_p0d3i_66{margin:0;color:var(--dev-panel-text-color)}._droppedFile_p0d3i_71{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}._droppedText_p0d3i_79{margin:0;color:var(--dev-panel-text-color);font-weight:var(--dev-panel-font-weight-medium);font-size:var(--dev-panel-font-size-md)}._errorMessage_p0d3i_86{padding:var(--dev-panel-spacing-md) var(--dev-panel-spacing-lg);border-radius:var(--dev-panel-border-radius-sm);color:var(--dev-panel-error-color);font-size:var(--dev-panel-font-size-md);margin:0}._errorMessage_p0d3i_86 p{margin:0}

package/dist/assets/index13.css

@@ -1 +1 @@
-:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #2563eb;--dev-panel-accent-color-hover: #1d4ed8;--dev-panel-accent-color-active: #1e40af;--dev-panel-accent-color-disabled: #2563eb30;--dev-panel-primary-color: #2563eb;--dev-panel-primary-color-hover: #1d4ed8;--dev-panel-primary-color-active: #1e40af;--dev-panel-primary-color-disabled: #2563eb30;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-base: 4px;--dev-panel-spacing-xs: calc(var(--dev-panel-spacing-base) * .5);--dev-panel-spacing-sm: var(--dev-panel-spacing-base);--dev-panel-spacing-md: calc(var(--dev-panel-spacing-base) * 2);--dev-panel-spacing-lg: calc(var(--dev-panel-spacing-base) * 3);--dev-panel-spacing-xl: calc(var(--dev-panel-spacing-base) * 4);--dev-panel-spacing-2xl: calc(var(--dev-panel-spacing-base) * 5);--dev-panel-spacing-3xl: calc(var(--dev-panel-spacing-base) * 6);--dev-panel-spacing-4xl: calc(var(--dev-panel-spacing-base) * 8);--dev-panel-spacing: var(--dev-panel-spacing-lg);--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 400px;--dev-panel-min-width: 280px;--dev-panel-max-height: 600px;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}@media (prefers-color-scheme: light){:root{color-scheme:light;--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong)}}:root[data-dev-panel-theme=dark]{color-scheme:dark}:root[data-dev-panel-theme=light]{--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong);color-scheme:light}._buttonGroupContainer_1irhu_217{scrollbar-width:thin;scrollbar-color:var(--dev-panel-scrollbar-thumb-color) var(--dev-panel-scrollbar-track-color);width:100%;display:flex;gap:var(--dev-panel-spacing-sm);background:var(--dev-panel-surface-color);border:1px solid var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius);padding:var(--dev-panel-spacing-sm);overflow-x:auto;container-type:inline-size}._buttonGroupContainer_1irhu_217::-webkit-scrollbar{width:var(--dev-panel-scrollbar-width);height:var(--dev-panel-scrollbar-width)}._buttonGroupContainer_1irhu_217::-webkit-scrollbar-track{background:var(--dev-panel-scrollbar-track-color);border-radius:var(--dev-panel-border-radius-md)}._buttonGroupContainer_1irhu_217::-webkit-scrollbar-thumb{background:var(--dev-panel-scrollbar-thumb-color);border-radius:var(--dev-panel-border-radius-md);transition:var(--dev-panel-transition-fast)}._buttonGroupContainer_1irhu_217::-webkit-scrollbar-thumb:hover{background:var(--dev-panel-scrollbar-thumb-hover-color)}._buttonGroupContainer_1irhu_217::-webkit-scrollbar-corner{background:var(--dev-panel-scrollbar-track-color)}@container (max-width: 300px){._buttonGroupContainer_1irhu_217{gap:var(--dev-panel-spacing-xs);padding:var(--dev-panel-spacing-xs)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217{padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-md);font-size:var(--dev-panel-font-size-xs)}}._buttonGroupContainer_1irhu_217 ._button_1irhu_217{padding:0;margin:0;border:none;background:none;font:inherit;color:inherit;flex:0 0 auto;min-width:max-content;background:var(--dev-panel-input-background-color);color:var(--dev-panel-text-color);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-medium);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-lg);border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);transition:var(--dev-panel-transition);min-height:var(--dev-panel-inputs-height);display:flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:hover:not(:disabled):not(._active_1irhu_285){background:var(--dev-panel-surface-color-hover);border-color:var(--dev-panel-input-border-color-hover)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:active:not(:disabled){transform:scale(.98)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px #6366f133}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:focus:not(:focus-visible){box-shadow:none}._buttonGroupContainer_1irhu_217 ._button_1irhu_217._active_1irhu_285{background:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent);border-color:var(--dev-panel-accent-color)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217._active_1irhu_285:hover{background:var(--dev-panel-accent-color-hover);border-color:var(--dev-panel-accent-color-hover)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;background:var(--dev-panel-surface-color)}._buttonGroupContainer_1irhu_217._compact_1irhu_314 ._button_1irhu_217{padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-md);font-size:var(--dev-panel-font-size-xs);min-height:calc(var(--dev-panel-inputs-height) - 4px)}
+._container_1oo6z_1{display:grid;grid-template-columns:var(--dev-panel-inputs-height-sm) 1fr;gap:var(--dev-panel-spacing-md);align-items:start}._container_1oo6z_1 ._colorPreview_1oo6z_7{overflow:hidden;width:var(--dev-panel-inputs-height-sm);height:var(--dev-panel-inputs-height-sm);cursor:pointer;border-radius:var(--dev-panel-border-radius);border:1px solid var(--dev-panel-input-border-color);transition:var(--dev-panel-transition);position:relative;background-color:var(--dev-panel-input-border-color);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0px}._container_1oo6z_1 ._colorPreview_1oo6z_7:hover{border-color:var(--dev-panel-input-border-color-hover);transform:scale(1.05)}._container_1oo6z_1 ._colorPreview_1oo6z_7:focus-within{border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent)}._container_1oo6z_1 ._colorPreview_1oo6z_7:active{transform:scale(.95)}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]{background:none;border:0;width:150%;height:150%;margin:-25%;cursor:pointer;opacity:0}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]:focus{outline:none}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]:disabled{cursor:not-allowed;opacity:.5}._container_1oo6z_1 ._inputSection_1oo6z_47{display:flex;flex-direction:column;gap:var(--dev-panel-spacing-sm)}._container_1oo6z_1 ._errorMessage_1oo6z_52{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-danger-color);font-weight:var(--dev-panel-font-weight-medium);grid-column:1/-1;margin-top:var(--dev-panel-spacing-xs)}._container_1oo6z_1 ._presets_1oo6z_59{display:flex;flex-wrap:wrap;gap:var(--dev-panel-spacing-xs);margin-top:var(--dev-panel-spacing-xs)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65{width:24px;height:24px;border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius-sm);cursor:pointer;transition:var(--dev-panel-transition);background:none;padding:0}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:hover{border-color:var(--dev-panel-input-border-color-hover);transform:scale(1.1)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:active{transform:scale(.95)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:disabled{cursor:not-allowed;opacity:.5;transform:none!important}._container_1oo6z_1:has(input:disabled){opacity:.6;pointer-events:none}._container_1oo6z_1:has(input:disabled) ._colorPreview_1oo6z_7{cursor:not-allowed;transform:none!important}

package/dist/assets/index14.css

@@ -1 +1 @@
-:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #2563eb;--dev-panel-accent-color-hover: #1d4ed8;--dev-panel-accent-color-active: #1e40af;--dev-panel-accent-color-disabled: #2563eb30;--dev-panel-primary-color: #2563eb;--dev-panel-primary-color-hover: #1d4ed8;--dev-panel-primary-color-active: #1e40af;--dev-panel-primary-color-disabled: #2563eb30;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-base: 4px;--dev-panel-spacing-xs: calc(var(--dev-panel-spacing-base) * .5);--dev-panel-spacing-sm: var(--dev-panel-spacing-base);--dev-panel-spacing-md: calc(var(--dev-panel-spacing-base) * 2);--dev-panel-spacing-lg: calc(var(--dev-panel-spacing-base) * 3);--dev-panel-spacing-xl: calc(var(--dev-panel-spacing-base) * 4);--dev-panel-spacing-2xl: calc(var(--dev-panel-spacing-base) * 5);--dev-panel-spacing-3xl: calc(var(--dev-panel-spacing-base) * 6);--dev-panel-spacing-4xl: calc(var(--dev-panel-spacing-base) * 8);--dev-panel-spacing: var(--dev-panel-spacing-lg);--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 400px;--dev-panel-min-width: 280px;--dev-panel-max-height: 600px;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}@media (prefers-color-scheme: light){:root{color-scheme:light;--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong)}}:root[data-dev-panel-theme=dark]{color-scheme:dark}:root[data-dev-panel-theme=light]{--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong);color-scheme:light}._button_1h30c_217{display:inline-flex;align-items:center;justify-content:center;gap:var(--dev-panel-spacing-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-lg);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-medium);line-height:var(--dev-panel-line-height-tight);border:var(--dev-panel-input-border-width) solid transparent;border-radius:var(--dev-panel-border-radius);background:transparent;color:inherit;text-decoration:none;white-space:nowrap;user-select:none;transition:var(--dev-panel-transition);cursor:pointer;width:100%;min-height:var(--dev-panel-button-height);border-color:var(--dev-panel-accent-color);background-color:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent);text-align:center}._button_1h30c_217:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;pointer-events:none}._button_1h30c_217:hover:not(:disabled){background-color:var(--dev-panel-accent-color-hover);border-color:var(--dev-panel-accent-color-hover);box-shadow:var(--dev-panel-shadow-md)}._button_1h30c_217:active:not(:disabled){background-color:var(--dev-panel-accent-color-active);border-color:var(--dev-panel-accent-color-active);box-shadow:var(--dev-panel-shadow-sm)}._button_1h30c_217:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--dev-panel-accent-color) 30%,transparent)}._button_1h30c_217:focus:not(:focus-visible){box-shadow:none}._button_1h30c_217:disabled{background-color:var(--dev-panel-accent-color-disabled);border-color:var(--dev-panel-accent-color-disabled);color:var(--dev-panel-text-color-disabled);transform:none;box-shadow:none;opacity:var(--dev-panel-opacity-50);cursor:not-allowed}._button_1h30c_217._secondary_1h30c_274{background-color:transparent;color:var(--dev-panel-accent-color);border-color:var(--dev-panel-accent-color)}._button_1h30c_217._secondary_1h30c_274:hover:not(:disabled){background-color:color-mix(in srgb,var(--dev-panel-accent-color) 10%,transparent);color:var(--dev-panel-accent-color-hover);border-color:var(--dev-panel-accent-color-hover)}._button_1h30c_217._secondary_1h30c_274:active:not(:disabled){background-color:color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent);color:var(--dev-panel-accent-color-active);border-color:var(--dev-panel-accent-color-active)}._button_1h30c_217._secondary_1h30c_274:disabled{background-color:transparent;color:var(--dev-panel-text-color-disabled);border-color:var(--dev-panel-border-color)}._button_1h30c_217._small_1h30c_294{min-height:var(--dev-panel-button-height-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);font-size:var(--dev-panel-font-size-xs)}._button_1h30c_217._large_1h30c_299{min-height:var(--dev-panel-button-height-lg);padding:var(--dev-panel-spacing-lg) var(--dev-panel-spacing-xl);font-size:var(--dev-panel-font-size-md)}
+:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #2563eb;--dev-panel-accent-color-hover: #1d4ed8;--dev-panel-accent-color-active: #1e40af;--dev-panel-accent-color-disabled: #2563eb30;--dev-panel-primary-color: #2563eb;--dev-panel-primary-color-hover: #1d4ed8;--dev-panel-primary-color-active: #1e40af;--dev-panel-primary-color-disabled: #2563eb30;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-base: 4px;--dev-panel-spacing-xs: calc(var(--dev-panel-spacing-base) * .5);--dev-panel-spacing-sm: var(--dev-panel-spacing-base);--dev-panel-spacing-md: calc(var(--dev-panel-spacing-base) * 2);--dev-panel-spacing-lg: calc(var(--dev-panel-spacing-base) * 3);--dev-panel-spacing-xl: calc(var(--dev-panel-spacing-base) * 4);--dev-panel-spacing-2xl: calc(var(--dev-panel-spacing-base) * 5);--dev-panel-spacing-3xl: calc(var(--dev-panel-spacing-base) * 6);--dev-panel-spacing-4xl: calc(var(--dev-panel-spacing-base) * 8);--dev-panel-spacing: var(--dev-panel-spacing-lg);--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 400px;--dev-panel-min-width: 280px;--dev-panel-max-height: 600px;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}@media (prefers-color-scheme: light){:root{color-scheme:light;--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong)}}:root[data-dev-panel-theme=dark]{color-scheme:dark}:root[data-dev-panel-theme=light]{--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong);color-scheme:light}._buttonGroupContainer_1irhu_217{scrollbar-width:thin;scrollbar-color:var(--dev-panel-scrollbar-thumb-color) var(--dev-panel-scrollbar-track-color);width:100%;display:flex;gap:var(--dev-panel-spacing-sm);background:var(--dev-panel-surface-color);border:1px solid var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius);padding:var(--dev-panel-spacing-sm);overflow-x:auto;container-type:inline-size}._buttonGroupContainer_1irhu_217::-webkit-scrollbar{width:var(--dev-panel-scrollbar-width);height:var(--dev-panel-scrollbar-width)}._buttonGroupContainer_1irhu_217::-webkit-scrollbar-track{background:var(--dev-panel-scrollbar-track-color);border-radius:var(--dev-panel-border-radius-md)}._buttonGroupContainer_1irhu_217::-webkit-scrollbar-thumb{background:var(--dev-panel-scrollbar-thumb-color);border-radius:var(--dev-panel-border-radius-md);transition:var(--dev-panel-transition-fast)}._buttonGroupContainer_1irhu_217::-webkit-scrollbar-thumb:hover{background:var(--dev-panel-scrollbar-thumb-hover-color)}._buttonGroupContainer_1irhu_217::-webkit-scrollbar-corner{background:var(--dev-panel-scrollbar-track-color)}@container (max-width: 300px){._buttonGroupContainer_1irhu_217{gap:var(--dev-panel-spacing-xs);padding:var(--dev-panel-spacing-xs)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217{padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-md);font-size:var(--dev-panel-font-size-xs)}}._buttonGroupContainer_1irhu_217 ._button_1irhu_217{padding:0;margin:0;border:none;background:none;font:inherit;color:inherit;flex:0 0 auto;min-width:max-content;background:var(--dev-panel-input-background-color);color:var(--dev-panel-text-color);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-medium);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-lg);border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);transition:var(--dev-panel-transition);min-height:var(--dev-panel-inputs-height);display:flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:hover:not(:disabled):not(._active_1irhu_285){background:var(--dev-panel-surface-color-hover);border-color:var(--dev-panel-input-border-color-hover)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:active:not(:disabled){transform:scale(.98)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px #6366f133}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:focus:not(:focus-visible){box-shadow:none}._buttonGroupContainer_1irhu_217 ._button_1irhu_217._active_1irhu_285{background:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent);border-color:var(--dev-panel-accent-color)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217._active_1irhu_285:hover{background:var(--dev-panel-accent-color-hover);border-color:var(--dev-panel-accent-color-hover)}._buttonGroupContainer_1irhu_217 ._button_1irhu_217:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;background:var(--dev-panel-surface-color)}._buttonGroupContainer_1irhu_217._compact_1irhu_314 ._button_1irhu_217{padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-md);font-size:var(--dev-panel-font-size-xs);min-height:calc(var(--dev-panel-inputs-height) - 4px)}