@berenjena/react-dev-panel 1.0.4 → 2.0.0

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

@@ -1,40 +1,40 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import { useState as o, useEffect as m } from "react";
-import '../../../../assets/RangeControl.css';const v = "_container_1ewrb_1", h = "_range_1ewrb_9", d = "_value_1ewrb_116", t = {
+import '../../../../assets/RangeControl.css';const v = "_container_lg827_1", h = "_range_lg827_9", d = "_value_lg827_115", u = {
   container: v,
   range: h,
   value: d
 };
-function b({ control: e }) {
-  const n = e.event || "onChange", [u, l] = o(e.value);
-  m(() => {
-    l(e.value);
-  }, [e.value]);
-  const i = (s) => {
+function _({ control: e }) {
+  const n = e.event || "onChange", [l, t] = o(e.value);
+  function r(s) {
     const a = Number(s.target.value);
-    l(a), n === "onChange" && e.onChange(a);
-  }, c = (s) => {
+    t(a), n === "onChange" && e.onChange(a);
+  }
+  function g(s) {
     const a = Number(s.target.value);
     n === "onBlur" && e.onChange(a);
-  };
-  return /* @__PURE__ */ g("div", { className: t.container, children: [
-    /* @__PURE__ */ r(
+  }
+  return m(() => {
+    t(e.value);
+  }, [e.value]), /* @__PURE__ */ c("div", { className: u.container, children: [
+    /* @__PURE__ */ i(
       "input",
       {
         type: "range",
-        value: u,
+        value: l,
         min: e.min,
         max: e.max,
         step: e.step,
         disabled: e.disabled,
-        onChange: i,
-        ...n === "onBlur" && { onBlur: c },
-        className: t.range
+        onChange: r,
+        ...n === "onBlur" && { onBlur: g },
+        className: u.range
       }
     ),
-    /* @__PURE__ */ r("span", { className: t.value, children: u })
+    /* @__PURE__ */ i("span", { className: u.value, children: l })
   ] });
 }
 export {
-  b as RangeControl
+  _ as RangeControl
 };

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

@@ -1,15 +1,39 @@
 import { SelectControlProps } from './types';
 /**
- * Component that renders a select control
- * @param control - The control to render
- * @returns The select control component
+ * Component that renders a dropdown select control with single selection
+ *
+ * @param props - The component props
+ * @param props.control - The select control configuration object
+ * @param props.control.type - The control type, must be 'select'
+ * @param props.control.value - The currently selected option value
+ * @param props.control.options - Array of available options (strings or objects with label/value)
+ * @param props.control.onChange - Callback function triggered when selection changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing a dropdown select control
+ *
+ * @example
+ * ```typescript
+ * <SelectControl control={{
+ *   type: 'select',
+ *   value: 'medium',
+ *   options: ['small', 'medium', 'large'],
+ *   onChange: (value) => setSize(value),
+ *   disabled: false
+ * }} />
+ * ```
  *
  * @example
  * ```typescript
  * <SelectControl control={{
  *   type: 'select',
- *   value: 'option1',
- *   options: ['option1', 'option2', 'option3'],
+ *   value: 'red',
+ *   options: [
+ *     { label: 'Red Color', value: 'red' },
+ *     { label: 'Blue Color', value: 'blue' },
+ *     { label: 'Green Color', value: 'green' }
+ *   ],
+ *   onChange: (value) => console.log('Selected:', value)
  * }} />
+ * ```
  */
 export declare function SelectControl({ control }: SelectControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,35 @@
 import { SeparatorControlProps } from './types';
 /**
  * Component that renders a visual separator to organize control groups
- * @param control - The control to render
- * @param control.style - The style of separator: "line" (default), "space", or "label"
- * @param control.label - Optional label text (only shown when style is "label")
- * @returns The separator control component
+ *
+ * @param props - The component props
+ * @param props.control - The separator control configuration object
+ * @param props.control.type - The control type, must be 'separator'
+ * @param props.control.style - The style of separator: "line" (default), "space", or "label"
+ * @param props.control.label - Optional label text (only displayed when style is "label")
+ * @returns JSX element representing a visual separator
  *
  * @example
  * ```typescript
- * // Simple line separator
+ * // Simple line separator (default)
  * <SeparatorControl control={{
  *   type: 'separator'
  * }} />
+ * ```
  *
- * // Separator with label
+ * @example
+ * ```typescript
+ * // Separator with label text
  * <SeparatorControl control={{
  *   type: 'separator',
  *   style: 'label',
  *   label: 'Advanced Settings'
  * }} />
+ * ```
  *
- * // Space separator
+ * @example
+ * ```typescript
+ * // Space separator for extra spacing
  * <SeparatorControl control={{
  *   type: 'separator',
  *   style: 'space'

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

@@ -1,14 +1,14 @@
 import { jsx as e } from "react/jsx-runtime";
-import '../../../../assets/SeparatorControl.css';const s = "_line_12cvo_1", c = "_space_12cvo_9", t = "_labelContainer_12cvo_14", i = "_label_12cvo_14", l = {
+import '../../../../assets/SeparatorControl.css';const s = "_line_174q4_1", t = "_space_174q4_9", i = "_labelContainer_174q4_14", c = "_label_174q4_14", l = {
   line: s,
-  space: c,
-  labelContainer: t,
-  label: i
+  space: t,
+  labelContainer: i,
+  label: c
 };
-function r({ control: a }) {
+function o({ control: a }) {
   const n = a.style || "line";
   return n === "space" ? /* @__PURE__ */ e("div", { className: l.space }) : n === "label" && a.label ? /* @__PURE__ */ e("div", { className: l.labelContainer, children: /* @__PURE__ */ e("span", { className: l.label, children: a.label }) }) : /* @__PURE__ */ e("div", { className: l.line });
 }
 export {
-  r as SeparatorControl
+  o as SeparatorControl
 };

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

@@ -1,28 +1,39 @@
 import { TextControlProps } from './types';
 /**
- * Component that renders a text 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 text control component
+ * Component that renders a text input control with configurable event handling
+ *
+ * @param props - The component props
+ * @param props.control - The text control configuration object
+ * @param props.control.type - The control type, must be 'text'
+ * @param props.control.value - The current string value of the text input
+ * @param props.control.placeholder - Optional placeholder text displayed when input is empty
+ * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
+ * @param props.control.onChange - Callback function triggered when text value changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing the text input control
  *
  * @example
  * ```typescript
- * // Real-time updates
+ * // Real-time updates (default behavior)
  * <TextControl control={{
  *   type: 'text',
- *   value: 'Hello',
- *   placeholder: 'Enter your name',
+ *   value: 'John Doe',
+ *   placeholder: 'Enter your full name',
  *   event: 'onChange',
- *   onChange: (value) => setValue(value)
+ *   onChange: (value) => setUserName(value),
+ *   disabled: false
  * }} />
+ * ```
  *
- * // Updates only when losing focus (default behavior)
+ * @example
+ * ```typescript
+ * // Updates only when losing focus
  * <TextControl control={{
  *   type: 'text',
- *   value: 'Hello',
- *   placeholder: 'Enter your name',
- *   event: 'onBlur', // or omit for default
- *   onChange: (value) => setValue(value)
+ *   value: 'search query',
+ *   placeholder: 'Type to search...',
+ *   event: 'onBlur',
+ *   onChange: (value) => console.log('Search term:', value)
  * }} />
  * ```
  */

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

@@ -1,27 +1,27 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useState as h, useEffect as p } from "react";
-import { Input as d } from "../../../Input/Input.js";
+import { jsx as f } from "react/jsx-runtime";
+import { useState as h, useEffect as i } from "react";
+import { Input as s } from "../../../Input/Input.js";
 function v({ control: e }) {
-  const n = e.event || "onChange", [u, l] = h(e.value);
-  p(() => {
-    l(e.value);
-  }, [e.value]);
-  const o = (t) => {
+  const n = e.event || "onChange", [l, u] = h(e.value);
+  function o(t) {
     const a = t.target.value;
-    l(a), n === "onChange" && e.onChange(a);
-  }, s = (t) => {
+    u(a), n === "onChange" && e.onChange(a);
+  }
+  function r(t) {
     const a = t.target.value;
     n === "onBlur" && e.onChange(a);
-  };
-  return /* @__PURE__ */ r(
-    d,
+  }
+  return i(() => {
+    u(e.value);
+  }, [e.value]), /* @__PURE__ */ f(
+    s,
     {
       type: "text",
-      value: u,
+      value: l,
       placeholder: e.placeholder,
       disabled: e.disabled,
       onChange: o,
-      ...n === "onBlur" && { onBlur: s }
+      ...n === "onBlur" && { onBlur: r }
     }
   );
 }

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

@@ -1,5 +1,6 @@
 /**
  * Exports all control components as a frozen object.
+ *
  * **Note:** This allows components to be loaded lazily.
  */
 export declare const controls: Readonly<{
@@ -10,6 +11,7 @@ export declare const controls: Readonly<{
     number: import('react').LazyExoticComponent<typeof import('./NumberControl').NumberControl>;
     range: import('react').LazyExoticComponent<typeof import('./RangeControl').RangeControl>;
     select: import('react').LazyExoticComponent<typeof import('./SelectControl').SelectControl>;
+    multiselect: import('react').LazyExoticComponent<typeof import('./MultiSelectControl').MultiSelectControl>;
     separator: import('react').LazyExoticComponent<typeof import('./SeparatorControl').SeparatorControl>;
     text: import('react').LazyExoticComponent<typeof import('./TextControl').TextControl>;
     buttonGroup: import('react').LazyExoticComponent<typeof import('./ButtonGroupControl').ButtonGroupControl>;

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

@@ -7,6 +7,7 @@ const r = Object.freeze({
   number: o(() => import("./NumberControl/index.js").then((t) => ({ default: t.NumberControl }))),
   range: o(() => import("./RangeControl/index.js").then((t) => ({ default: t.RangeControl }))),
   select: o(() => import("./SelectControl/index.js").then((t) => ({ default: t.SelectControl }))),
+  multiselect: o(() => import("./MultiSelectControl/index.js").then((t) => ({ default: t.MultiSelectControl }))),
   separator: o(() => import("./SeparatorControl/index.js").then((t) => ({ default: t.SeparatorControl }))),
   text: o(() => import("./TextControl/index.js").then((t) => ({ default: t.TextControl }))),
   buttonGroup: o(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl })))

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

@@ -3,6 +3,7 @@ import { ButtonControl } from './ButtonControl/types';
 import { ButtonGroupControl } from './ButtonGroupControl/types';
 import { ColorControl } from './ColorControl/types';
 import { DateControl } from './DateControl/types';
+import { MultiSelectControl } from './MultiSelectControl/types';
 import { NumberControl } from './NumberControl/types';
 import { RangeControl } from './RangeControl/types';
 import { SelectControl } from './SelectControl/types';
@@ -23,6 +24,7 @@ export type Controls = {
 	color: ColorControl;
 	boolean: BooleanControl;
 	select: SelectControl;
+	multiselect: MultiSelectControl;
 	text: TextControl;
 	button: ButtonControl;
 	number: NumberControl;

package/dist/components/DevPanel/DevPanel.js

@@ -1,67 +1,72 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useCallback as C } from "react";
-import { useDragAndDrop as w } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
-import { useHotkey as b } from "../../hooks/useHotkeys/useHotkey.js";
-import { b as y, u as D } from "../../UIStore-CQdr4U-2.js";
-import { className as P } from "../../utils/className/className.js";
-import { EmptyContent as x } from "../EmptyContent/EmptyContent.js";
-import { Section as K } from "../Section/Section.js";
-import '../../assets/DevPanel.css';const N = "_devPanelContainer_1vath_1", k = "_header_1vath_12", A = "_title_1vath_21", j = "_button_1vath_31", E = "_collapsed_1vath_53", H = "_content_1vath_60", t = {
-  devPanelContainer: N,
-  header: k,
-  title: A,
-  button: j,
-  collapsed: E,
-  content: H
-}, M = {
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useCallback as D, useEffect as y } from "react";
+import { useDragAndDrop as b } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
+import { useHotkey as w } from "../../hooks/useHotkeys/useHotkey.js";
+import { useDevPanelSections as K } from "../../store/SectionsStore.js";
+import { useDevPanelThemeActions as N } from "../../store/ThemeStore.js";
+import { useDevPanelUI as k } from "../../store/UIStore.js";
+import { className as x } from "../../utils/className/className.js";
+import { EmptyContent as E } from "../EmptyContent/EmptyContent.js";
+import { Icon as f } from "../Icon/index.js";
+import { Section as j } from "../Section/Section.js";
+import '../../assets/DevPanel.css';const A = "_devPanelContainer_vacct_132", S = "_header_vacct_171", H = "_title_vacct_186", I = "_button_vacct_197", T = "_collapsed_vacct_233", V = "_content_vacct_240", t = {
+  devPanelContainer: A,
+  header: S,
+  title: H,
+  button: I,
+  collapsed: T,
+  content: V
+}, O = {
   ctrlKey: !0,
   shiftKey: !0,
   key: "a",
   altKey: !1,
   metaKey: !1
 };
-function U({ panelTitle: d = "Dev panel", ...h }) {
-  const { isVisible: s, isCollapsed: n, position: l, setVisible: a, setCollapsed: m, setPosition: i } = y(), p = D(), v = C(
-    (o) => {
-      i(o);
+function Q({ panelTitle: h = "Dev panel", ...o }) {
+  const { isVisible: s, isCollapsed: n, position: a, setVisible: l, setCollapsed: u, setPosition: c } = k(), { setTheme: r } = N(), v = K(), p = D(
+    (i) => {
+      c(i);
     },
-    [i]
-  ), { isDragging: u, elementRef: f, handleMouseDown: g } = w({
-    onPositionChange: v
+    [c]
+  ), { isDragging: _, elementRef: C, handlePointerDown: g } = b({
+    onPositionChange: p
   });
-  if (b({
+  if (w({
     description: "Show Dev Panel",
     preventDefault: !0,
-    action: () => a(!s),
-    ...M,
-    ...h.hotKeyConfig,
+    action: () => l(!s),
+    ...O,
+    ...o.hotKeyConfig,
     target: window
-  }), !s)
+  }), y(() => {
+    o.theme && r(o.theme);
+  }, [o.theme, r]), !s)
     return null;
-  const r = Object.entries(p);
-  return /* @__PURE__ */ c(
+  const m = Object.entries(v);
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: f,
-      ...P(t.devPanelContainer, {
-        [t.dragging]: u
+      ref: C,
+      ...x(t.devPanelContainer, {
+        [t.dragging]: _
       }),
       style: {
-        left: l.x,
-        top: l.y,
+        left: a.x,
+        top: a.y,
         height: n ? "auto" : void 0
       },
       children: [
-        /* @__PURE__ */ c("div", { className: t.header, onMouseDown: g, children: [
-          /* @__PURE__ */ e("button", { className: t.button, onClick: () => m(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: n ? t.collapsed : void 0, children: /* @__PURE__ */ e("path", { d: "M16.843 10.211A.75.75 0 0 0 16.251 9H7.75a.75.75 0 0 0-.591 1.212l4.258 5.498a.746.746 0 0 0 1.183-.001l4.243-5.498z" }) }) }),
-          /* @__PURE__ */ e("div", { className: t.title, children: d }),
-          /* @__PURE__ */ e("button", { className: t.button, onClick: () => a(!1), title: "Close", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "m12 10.93 5.719-5.72a.749.749 0 1 1 1.062 1.062l-5.72 5.719 5.719 5.719a.75.75 0 1 1-1.061 1.062L12 13.053l-5.719 5.719A.75.75 0 0 1 5.22 17.71l5.719-5.719-5.72-5.719A.752.752 0 0 1 6.281 5.21z" }) }) })
+        /* @__PURE__ */ d("div", { className: t.header, onPointerDown: g, children: [
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => u(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e(f, { name: "ArrowDown", className: n ? t.collapsed : void 0 }) }),
+          /* @__PURE__ */ e("div", { className: t.title, children: h }),
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => l(!1), title: "Close", children: /* @__PURE__ */ e(f, { name: "Close" }) })
         ] }),
-        !n && /* @__PURE__ */ e("div", { className: t.content, children: r.length ? r.map(([o, _]) => /* @__PURE__ */ e(K, { sectionName: o, section: _ }, `section-${o}`)) : /* @__PURE__ */ e(x, {}) })
+        !n && /* @__PURE__ */ e("div", { className: t.content, children: m.length ? m.map(([i, P]) => /* @__PURE__ */ e(j, { sectionName: i, section: P }, `section-${i}`)) : /* @__PURE__ */ e(E, {}) })
       ]
     }
   );
 }
 export {
-  U as DevPanel
+  Q as DevPanel
 };

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

@@ -1,5 +1,27 @@
 import { ControlsGroup } from '../ControlRenderer/controls/types';
 export type DevPanelHotkeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
+export type BuiltInTheme =
+	| "auto"
+	| "dark"
+	| "light"
+	| "orange"
+	| "purple"
+	| "green"
+	| "neon"
+	| "corporate"
+	| "highContrast"
+	| "sunset"
+	| "ocean"
+	| "forest"
+	| "midnight"
+	| "cherry"
+	| "gold"
+	| "retro"
+	| "pastel"
+	| "cyberpunk"
+	| "autumn"
+	| "arctic"
+	| "volcano";
 
 export interface DevPanelProps {
 	panelTitle?: string;
@@ -17,6 +39,8 @@ export interface DevPanelProps {
 	 * ```
 	 */
 	hotKeyConfig?: DevPanelHotkeyConfig;
+
+	theme?: BuiltInTheme;
 }
 
 export interface DevPanelSection {

package/dist/components/DevPanelPortal/DevPanelPortal.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Portal component that renders DevPanel using React's createPortal.
+ * Automatically subscribes to DevPanelManager prop changes and renders
+ * the DevPanel with merged props into document.body.
+ *
+ * @returns DevPanel rendered as a portal in document.body
+ */
+export declare const DevPanelPortal: () => import('react').ReactPortal;

package/dist/components/DevPanelPortal/DevPanelPortal.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as a, useEffect as m } from "react";
+import { createPortal as c } from "react-dom";
+import { DevPanelManager as r } from "../../managers/DevPanelManager.js";
+import { DevPanel as p } from "../DevPanel/DevPanel.js";
+const b = () => {
+  const [t, e] = a({});
+  return m(() => {
+    const o = r.getInstance().getAllProps();
+    return e(o), r.getInstance().onPropsChange((n) => {
+      e(n);
+    });
+  }, []), c(/* @__PURE__ */ s(p, { ...t }), document.body);
+};
+export {
+  b as DevPanelPortal
+};

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

@@ -0,0 +1 @@
+export { DevPanelPortal } from './DevPanelPortal';

package/dist/components/DevPanelPortal/index.js

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

package/dist/components/EmptyContent/EmptyContent.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import '../../assets/EmptyContent.css';const o = "_empty_1xo8g_1", s = {
-  empty: o
+import '../../assets/EmptyContent.css';const s = "_empty_1bkns_1", o = {
+  empty: s
 };
-function n() {
-  return /* @__PURE__ */ t("div", { className: s.empty, children: [
+function r() {
+  return /* @__PURE__ */ t("div", { className: o.empty, children: [
     "No controls registered yet.",
     /* @__PURE__ */ e("br", {}),
     " ",
@@ -14,5 +14,5 @@ function n() {
   ] });
 }
 export {
-  n as EmptyContent
+  r as EmptyContent
 };

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

@@ -0,0 +1,16 @@
+declare const availableIcons: {
+    ArrowDown: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    Close: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    Check: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+};
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    /** The name of the icon to render */
+    name: keyof typeof availableIcons;
+}
+/**
+ * Icon component for rendering SVG icons.
+ * @param props - The properties for the icon component.
+ * @returns The SVG element for the specified icon, or null if the icon is not found.
+ */
+export declare function Icon({ name, ...props }: IconProps): React.ReactNode;
+export {};

package/dist/components/Icon/index.js

@@ -0,0 +1,31 @@
+import { jsx as l } from "react/jsx-runtime";
+const t = {
+  ArrowDown: (o) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...o, children: /* @__PURE__ */ l("path", { d: "M16.843 10.211A.75.75 0 0 0 16.251 9H7.75a.75.75 0 0 0-.591 1.212l4.258 5.498a.746.746 0 0 0 1.183-.001l4.243-5.498z" }) }),
+  Close: (o) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...o, children: /* @__PURE__ */ l("path", { d: "m12 10.93 5.719-5.72a.749.749 0 1 1 1.062 1.062l-5.72 5.719 5.719 5.719a.75.75 0 1 1-1.061 1.062L12 13.053l-5.719 5.719A.75.75 0 0 1 5.22 17.71l5.719-5.719-5.72-5.719A.752.752 0 0 1 6.281 5.21z" }) }),
+  Check: (o) => /* @__PURE__ */ l(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      clipRule: "evenodd",
+      fillRule: "evenodd",
+      strokeLinejoin: "round",
+      strokeMiterlimit: "2",
+      ...o,
+      children: /* @__PURE__ */ l(
+        "path",
+        {
+          d: "m21 4.009c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-14.051 8.382c-.165-.148-.249-.352-.249-.557 0-.411.333-.746.748-.746.178 0 .355.063.499.19l3.298 2.938 5.453-5.962c.149-.161.35-.243.554-.243.417 0 .748.337.748.747 0 .179-.065.359-.196.502l-5.953 6.509c-.147.161-.35.242-.552.242-.178 0-.357-.062-.499-.19z",
+          fillRule: "nonzero"
+        }
+      )
+    }
+  )
+};
+function r({ name: o, ...e }) {
+  const n = t[o];
+  return n ? /* @__PURE__ */ l(n, { ...e }) : null;
+}
+export {
+  r as Icon
+};

package/dist/components/Input/Input.js

@@ -1,10 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../assets/Input.css';const p = "_input_161wd_1", u = {
+import '../../assets/Input.css';const p = "_input_pspvf_132", s = {
   input: p
 };
-function s(t) {
-  return /* @__PURE__ */ n("input", { ...t, className: u.input });
+function i(t) {
+  return /* @__PURE__ */ n("input", { ...t, className: s.input });
 }
 export {
-  s as Input
+  i as Input
 };

package/dist/components/Section/Section.js

@@ -1,24 +1,25 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import { ControlRenderer as i } from "../ControlRenderer/ControlRenderer.js";
-import { a as r } from "../../UIStore-CQdr4U-2.js";
-import '../../assets/Section.css';const d = "_section_1vgul_1", g = "_header_1vgul_8", _ = "_title_1vgul_15", p = "_toggle_1vgul_20", m = "_collapsed_1vgul_29", v = "_content_1vgul_35", l = {
+import { useDevPanelSectionActions as r } from "../../store/SectionsStore.js";
+import { Icon as p } from "../Icon/index.js";
+import '../../assets/Section.css';const d = "_section_plx7y_1", _ = "_header_plx7y_9", m = "_title_plx7y_28", g = "_toggle_plx7y_35", h = "_collapsed_plx7y_45", x = "_content_plx7y_54", e = {
   section: d,
-  header: g,
-  title: _,
-  toggle: p,
-  collapsed: m,
-  content: v
+  header: _,
+  title: m,
+  toggle: g,
+  collapsed: h,
+  content: x
 };
-function x({ sectionName: n, section: t }) {
+function N({ sectionName: s, section: t }) {
   const { toggleSectionCollapse: c } = r();
-  return /* @__PURE__ */ o("div", { className: l.section, children: [
-    /* @__PURE__ */ o("div", { className: l.header, onClick: () => c(n), children: [
-      /* @__PURE__ */ e("span", { className: l.title, children: t.name }),
-      /* @__PURE__ */ e("span", { className: l.toggle, children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: t.isCollapsed ? l.collapsed : void 0, children: /* @__PURE__ */ e("path", { d: "M10.211 7.155A.75.75 0 0 0 9 7.747v8.501a.75.75 0 0 0 1.212.591l5.498-4.258a.746.746 0 0 0-.001-1.183l-5.498-4.243z" }) }) })
+  return /* @__PURE__ */ n("div", { className: e.section, children: [
+    /* @__PURE__ */ n("div", { className: e.header, onClick: () => c(s), children: [
+      /* @__PURE__ */ o("span", { className: e.title, children: t.name }),
+      /* @__PURE__ */ o("span", { className: e.toggle, children: /* @__PURE__ */ o(p, { name: "ArrowDown", className: t.isCollapsed ? e.collapsed : void 0 }) })
     ] }),
-    !t.isCollapsed && /* @__PURE__ */ e("div", { className: l.content, children: Object.entries(t.controls).map(([s, a]) => /* @__PURE__ */ e(i, { name: s, control: a }, s)) })
+    !t.isCollapsed && /* @__PURE__ */ o("div", { className: e.content, children: Object.entries(t.controls).map(([l, a]) => /* @__PURE__ */ o(i, { name: l, control: a }, l)) })
   ] });
 }
 export {
-  x as Section
+  N as Section
 };

package/dist/components/Select/Select.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import '../../assets/Select.css';const s = "_select_12f91_1", c = {
+import '../../assets/Select.css';const s = "_select_ia86w_132", c = {
   select: s
 };
 function o(e) {