@berenjena/react-dev-panel 2.4.2 → 2.5.0

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

@@ -1,7 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
+"use client";
+import { jsx as l } from "react/jsx-runtime";
 import { Select as i } from "../../../Select/index.js";
-function p({ control: e }) {
-  return /* @__PURE__ */ o(
+function t({ control: e }) {
+  return /* @__PURE__ */ l(
     i,
     {
       multiple: !0,
@@ -9,10 +10,12 @@ function p({ control: e }) {
       options: e.options,
       disabled: e.disabled,
       placeholder: "Select options...",
-      onChange: (t) => e.onChange(t)
+      searchable: e.searchable,
+      searchPlaceholder: e.searchPlaceholder,
+      onChange: (a) => e.onChange(a)
     }
   );
 }
 export {
-  p as MultiSelectControl
+  t as MultiSelectControl
 };

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

@@ -3,6 +3,8 @@ export interface MultiSelectControl extends BaseControl {
 	type: "multiselect";
 	value: string[];
 	options: string[] | { label: string; value: string }[];
+	searchable?: boolean;
+	searchPlaceholder?: string;
 	onChange: (value: string[]) => void;
 }
 

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

@@ -1,15 +1,16 @@
+"use client";
 import { jsx as s } from "react/jsx-runtime";
 import { useState as r, useEffect as f } from "react";
 import { Input as p } from "../../../Input/index.js";
 function v({ control: e }) {
-  const n = e.event || "onChange", [m, t] = r(e.value);
-  function l(u) {
-    const a = Number(u.target.value);
-    t(a), n === "onChange" && e.onChange(a);
+  const a = e.event || "onChange", [l, t] = r(e.value);
+  function m(u) {
+    const n = Number(u.target.value);
+    t(n), a === "onChange" && e.onChange(n);
   }
   function i(u) {
-    const a = Number(u.target.value);
-    n === "onBlur" && e.onChange(a);
+    const n = Number(u.target.value);
+    a === "onBlur" && e.onChange(n);
   }
   return f(() => {
     t(e.value);
@@ -17,13 +18,13 @@ function v({ control: e }) {
     p,
     {
       type: "number",
-      value: m,
+      value: l,
       min: e.min,
       max: e.max,
       step: e.step,
       disabled: e.disabled,
-      onChange: l,
-      ...n === "onBlur" && { onBlur: i }
+      onChange: m,
+      ...a === "onBlur" && { onBlur: i }
     }
   );
 }

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

@@ -1,17 +1,18 @@
+"use client";
 import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import { useState as o, useEffect as m } from "react";
-import '../../../../assets/index10.css';const v = "_container_1a1cs_1", h = "_range_1a1cs_9", d = "_value_1a1cs_115", u = {
+import '../../../../assets/index8.css';const v = "_container_1a1cs_1", h = "_range_1a1cs_9", d = "_value_1a1cs_115", u = {
   container: v,
   range: h,
   value: d
 };
 function _({ control: e }) {
   const n = e.event || "onChange", [t, l] = o(e.value);
-  function r(s) {
+  function c(s) {
     const a = Number(s.target.value);
     l(a), n === "onChange" && e.onChange(a);
   }
-  function c(s) {
+  function r(s) {
     const a = Number(s.target.value);
     n === "onBlur" && e.onChange(a);
   }
@@ -27,8 +28,8 @@ function _({ control: e }) {
         max: e.max,
         step: e.step,
         disabled: e.disabled,
-        onChange: r,
-        ...n === "onBlur" && { onBlur: c },
+        onChange: c,
+        ...n === "onBlur" && { onBlur: r },
         className: u.range
       }
     ),

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

@@ -1,8 +1,9 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Select as s } from "../../../Select/index.js";
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { Select as l } from "../../../Select/index.js";
 function i({ control: e }) {
-  return /* @__PURE__ */ r(
-    s,
+  return /* @__PURE__ */ s(
+    l,
     {
       value: e.value,
       options: e.options,

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

@@ -1,5 +1,6 @@
+"use client";
 import { jsx as e } from "react/jsx-runtime";
-import '../../../../assets/index9.css';const s = "_line_174q4_1", t = "_space_174q4_9", i = "_labelContainer_174q4_14", c = "_label_174q4_14", l = {
+import '../../../../assets/index7.css';const s = "_line_174q4_1", t = "_space_174q4_9", i = "_labelContainer_174q4_14", c = "_label_174q4_14", l = {
   line: s,
   space: t,
   labelContainer: i,

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

@@ -1,19 +1,20 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useState as s, useEffect as r } from "react";
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { useState as d, useEffect as r } from "react";
 import { Textarea as f } from "../../../Textarea/index.js";
 function v({ control: e }) {
-  const n = e.event || "onChange", [t, l] = s(e.value);
+  const n = e.event || "onChange", [t, l] = d(e.value);
   function o(u) {
     const a = u.target.value;
     l(a), n === "onChange" && e.onChange(a);
   }
-  function d(u) {
+  function i(u) {
     const a = u.target.value;
     n === "onBlur" && e.onChange(a);
   }
   return r(() => {
     l(e.value);
-  }, [e.value]), /* @__PURE__ */ i(
+  }, [e.value]), /* @__PURE__ */ s(
     f,
     {
       value: t,
@@ -21,7 +22,7 @@ function v({ control: e }) {
       disabled: e.disabled,
       onChange: o,
       disableAutoExpand: e.disableAutoExpand,
-      ...n === "onBlur" && { onBlur: d }
+      ...n === "onBlur" && { onBlur: i }
     }
   );
 }

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

@@ -1,3 +1,4 @@
+"use client";
 import { lazy as o } from "react";
 const r = Object.freeze({
   boolean: o(() => import("./BooleanControl/index.js").then((t) => ({ default: t.BooleanControl }))),

package/dist/components/ControlRenderer/index.js

@@ -1,41 +1,43 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
+"use client";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { Suspense as c } from "react";
-import { className as l } from "../../utils/className/className.js";
-import { controls as d } from "./controls/index.js";
-import '../../assets/index5.css';const p = "_controlRendererContainer_jru2l_1", u = "_controlContainer_jru2l_5", _ = "_hoverable_jru2l_15", f = "_fullWidth_jru2l_18", h = "_label_jru2l_21", b = "_controlWrapper_jru2l_24", j = "_justifyStart_jru2l_30", C = "_description_jru2l_46", m = "_loading_jru2l_55", y = "_error_jru2l_74", e = {
-  controlRendererContainer: p,
-  controlContainer: u,
-  hoverable: _,
-  fullWidth: f,
-  label: h,
-  controlWrapper: b,
-  justifyStart: j,
-  description: C,
-  loading: m,
-  error: y
-}, g = ["button", "buttonGroup", "separator", "dragAndDrop", "localStorage"], v = ["separator", "dragAndDrop", "localStorage"], S = ["button", "separator", "dragAndDrop", "localStorage"];
-function A({ name: a, control: r }) {
-  const i = r?.label || a;
+import { ControlErrorBoundary as d } from "../ControlErrorBoundary/index.js";
+import { className as a } from "../../utils/className/className.js";
+import { controls as p } from "./controls/index.js";
+import '../../assets/index3.css';const u = "_controlRendererContainer_jru2l_1", _ = "_controlContainer_jru2l_5", f = "_hoverable_jru2l_15", h = "_fullWidth_jru2l_18", b = "_label_jru2l_21", m = "_controlWrapper_jru2l_24", C = "_justifyStart_jru2l_30", j = "_description_jru2l_46", y = "_loading_jru2l_55", v = "_error_jru2l_74", e = {
+  controlRendererContainer: u,
+  controlContainer: _,
+  hoverable: f,
+  fullWidth: h,
+  label: b,
+  controlWrapper: m,
+  justifyStart: C,
+  description: j,
+  loading: y,
+  error: v
+}, g = ["button", "buttonGroup", "separator", "dragAndDrop", "localStorage"], S = ["separator", "dragAndDrop", "localStorage"], W = ["button", "separator", "dragAndDrop", "localStorage"];
+function D({ name: n, control: r }) {
+  const i = r?.label || n;
   function s() {
     if (!r || !r.type)
       return /* @__PURE__ */ o("div", { className: e.error, children: "Control type is not defined" });
-    const n = d[r.type];
-    return n ? /* @__PURE__ */ o(c, { fallback: /* @__PURE__ */ o("div", { className: e.loading, children: "Loading control..." }), children: /* @__PURE__ */ o(n, { control: r }) }) : /* @__PURE__ */ o("div", { children: "Unknown control type" });
+    const t = p[r.type];
+    return t ? /* @__PURE__ */ o(d, { name: n, fallback: /* @__PURE__ */ o("div", { className: e.error, children: "Failed to render control" }), children: /* @__PURE__ */ o(c, { fallback: /* @__PURE__ */ o("div", { className: e.loading, children: "Loading control..." }), children: /* @__PURE__ */ o(t, { control: r }) }) }) : /* @__PURE__ */ o("div", { children: "Unknown control type" });
   }
-  return /* @__PURE__ */ t("div", { className: e.controlRendererContainer, children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ l("div", { className: e.controlRendererContainer, children: [
+    /* @__PURE__ */ l(
       "div",
       {
-        ...l(e.controlContainer, {
+        ...a(e.controlContainer, {
           [e.fullWidth]: g.includes(r.type),
-          [e.hoverable]: !v.includes(r.type)
+          [e.hoverable]: !S.includes(r.type)
         }),
         children: [
-          !S.includes(r.type) && /* @__PURE__ */ o("label", { className: e.label, children: i }),
+          !W.includes(r.type) && /* @__PURE__ */ o("label", { className: e.label, children: i }),
           /* @__PURE__ */ o(
             "div",
             {
-              ...l(e.controlWrapper, {
+              ...a(e.controlWrapper, {
                 [e.justifyStart]: r.type === "separator"
               }),
               children: s()
@@ -48,5 +50,5 @@ function A({ name: a, control: r }) {
   ] });
 }
 export {
-  A as ControlRenderer
+  D as ControlRenderer
 };

package/dist/components/DevPanel/index.js

@@ -1,4 +1,5 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import { useCallback as y, useEffect as D } from "react";
 import { useDragAndDrop as b } from "../../hooks/useDragAndDrop/index.js";
 import { useHotkey as g } from "../../hooks/useHotKey/index.js";
@@ -8,7 +9,7 @@ import { className as k } from "../../utils/className/className.js";
 import { EmptyContent as x } from "../EmptyContent/index.js";
 import { Icon as f } from "../Icon/index.js";
 import { Section as E } from "../Section/index.js";
-import '../../assets/index2.css';const j = "_devPanelContainer_11dce_217", A = "_header_11dce_256", S = "_title_11dce_271", H = "_button_11dce_283", I = "_collapsed_11dce_319", T = "_content_11dce_326", t = {
+import '../../assets/index15.css';const j = "_devPanelContainer_19e5a_1", A = "_header_19e5a_40", S = "_title_19e5a_55", H = "_button_19e5a_67", I = "_collapsed_19e5a_103", T = "_content_19e5a_110", t = {
   devPanelContainer: j,
   header: A,
   title: S,
@@ -23,11 +24,11 @@ import '../../assets/index2.css';const j = "_devPanelContainer_11dce_217", A = "
   metaKey: !1
 };
 function L({ panelTitle: h = "Dev panel", ...o }) {
-  const { isVisible: i, isCollapsed: n, position: l, setVisible: a, setCollapsed: u, setPosition: c } = K(), { setTheme: r } = N(), p = w(), _ = y(
+  const { isVisible: i, isCollapsed: n, position: l, setVisible: a, setCollapsed: u, setPosition: r } = K(), { setTheme: c } = N(), p = w(), _ = y(
     (s) => {
-      c(s);
+      r(s);
     },
-    [c]
+    [r]
   ), { elementRef: v, handlePointerDown: C } = b({
     onPositionChange: _
   });
@@ -39,11 +40,11 @@ function L({ panelTitle: h = "Dev panel", ...o }) {
     ...o.hotKeyConfig,
     target: window
   }), D(() => {
-    o.theme && r(o.theme);
-  }, [o.theme, r]), !i)
+    o.theme && c(o.theme);
+  }, [o.theme, c]), !i)
     return null;
-  const d = Object.entries(p);
-  return /* @__PURE__ */ m(
+  const m = Object.entries(p);
+  return /* @__PURE__ */ d(
     "div",
     {
       ref: v,
@@ -54,12 +55,12 @@ function L({ panelTitle: h = "Dev panel", ...o }) {
         height: n ? "auto" : void 0
       },
       children: [
-        /* @__PURE__ */ m("div", { className: t.header, onPointerDown: C, children: [
+        /* @__PURE__ */ d("div", { className: t.header, onPointerDown: C, 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: () => a(!1), title: "Close", children: /* @__PURE__ */ e(f, { name: "Close" }) })
         ] }),
-        !n && /* @__PURE__ */ e("div", { className: t.content, children: d.length ? d.map(([s, P]) => /* @__PURE__ */ e(E, { sectionName: s, section: P }, `section-${s}`)) : /* @__PURE__ */ e(x, {}) })
+        !n && /* @__PURE__ */ e("div", { className: t.content, children: m.length ? m.map(([s, P]) => /* @__PURE__ */ e(E, { sectionName: s, section: P }, `section-${s}`)) : /* @__PURE__ */ e(x, {}) })
       ]
     }
   );

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

@@ -1,4 +1,5 @@
 import { ControlsGroup } from '../ControlRenderer/controls/types';
+import { HotkeyConfig } from '../../hooks/useHotkeys/types';
 export type DevPanelHotkeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
 export type BuiltInTheme =
 	| "auto"
@@ -47,6 +48,22 @@ export interface DevPanelProps {
 	 * If not provided, defaults to "auto"
 	 */
 	theme?: BuiltInTheme;
+	/**
+	 * Whether this `useDevPanel` call is active.
+	 *
+	 * When `false`, the call becomes a no-op: its section is not registered
+	 * (and is removed if it had been registered), persisted values are not
+	 * restored, and the panel is not auto-mounted by this call. The panel still
+	 * renders as long as at least one other call is enabled.
+	 *
+	 * Defaults to `true`. Typical use is to strip the panel from production at
+	 * runtime, e.g. `enabled: import.meta.env.DEV` or
+	 * `enabled: process.env.NODE_ENV !== "production"`.
+	 *
+	 * Note: this gates runtime behaviour, not bundling — the panel code is still
+	 * included in the consumer's bundle.
+	 */
+	enabled?: boolean;
 }
 
 export interface DevPanelSection {

package/dist/components/DevPanelPortal/index.js

@@ -1,16 +1,17 @@
+"use client";
 import { jsx as i } from "react/jsx-runtime";
-import { useState as n, useEffect as d } from "react";
-import { createPortal as c } from "react-dom";
+import { useState as n, useEffect as c } from "react";
+import { createPortal as d } from "react-dom";
 import { DevPanelManager as m } from "../../managers/DevPanelManager.js";
 import { DevPanel as p } from "../DevPanel/index.js";
 function v() {
   const [t, r] = n({}), [s, o] = n(!1);
-  return d(() => {
+  return c(() => {
     const e = m.getInstance(), l = e.getAllProps(), u = e.shouldRender();
     return r(l), o(u), e.onPropsChange((a) => {
       r(a), o(e.shouldRender());
     });
-  }, []), s ? c(/* @__PURE__ */ i(p, { ...t }), document.body) : null;
+  }, []), s ? d(/* @__PURE__ */ i(p, { ...t }), document.body) : null;
 }
 export {
   v as DevPanelPortal

package/dist/components/EmptyContent/index.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import '../../assets/index3.css';const n = "_empty_1bkns_1", s = {
+import '../../assets/index.css';const n = "_empty_1bkns_1", s = {
   empty: n
 };
 function o() {

package/dist/components/Icon/index.js

@@ -1,8 +1,9 @@
-import { jsx as l } from "react/jsx-runtime";
+"use client";
+import { jsx as o } 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(
+  ArrowDown: (l) => /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...l, children: /* @__PURE__ */ o("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: (l) => /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...l, children: /* @__PURE__ */ o("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: (l) => /* @__PURE__ */ o(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -11,8 +12,8 @@ const t = {
       fillRule: "evenodd",
       strokeLinejoin: "round",
       strokeMiterlimit: "2",
-      ...o,
-      children: /* @__PURE__ */ l(
+      ...l,
+      children: /* @__PURE__ */ o(
         "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",
@@ -22,10 +23,10 @@ const t = {
     }
   )
 };
-function r({ name: o, ...e }) {
-  const n = t[o];
-  return n ? /* @__PURE__ */ l(n, { ...e }) : null;
+function i({ name: l, ...n }) {
+  const e = t[l];
+  return e ? /* @__PURE__ */ o(e, { ...n }) : null;
 }
 export {
-  r as Icon
+  i as Icon
 };

package/dist/components/Input/index.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsx as n } from "react/jsx-runtime";
-import '../../assets/index8.css';const u = "_input_icuc6_217", i = {
+import '../../assets/index6.css';const u = "_input_16604_1", i = {
   input: u
 };
 function s(t) {

package/dist/components/Section/index.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import { ControlRenderer as i } from "../ControlRenderer/index.js";
 import { useDevPanelSectionActions as r } from "../../store/SectionsStore.js";
 import { Icon as p } from "../Icon/index.js";
-import '../../assets/index4.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 = {
+import '../../assets/index2.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: _,
   title: m,

package/dist/components/Select/index.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsxs as x, Fragment as W, jsx as i } from "react/jsx-runtime";
 import { useRef as P, useState as N, useMemo as U, useCallback as G, useEffect as R } from "react";
 import { createPortal as J } from "react-dom";
 import { Icon as K } from "../Icon/index.js";
 import { useDevPanelPosition as X } from "../../store/UIStore.js";
 import { className as Y } from "../../utils/className/className.js";
-import '../../assets/index7.css';const Z = "_select_15gl5_217", ee = "_trigger_15gl5_222", te = "_open_15gl5_271", ne = "_value_15gl5_275", oe = "_placeholder_15gl5_284", re = "_arrow_15gl5_288", se = "_dropdownPortal_15gl5_303", ce = "_dropdown_15gl5_303", ie = "_searchContainer_15gl5_323", le = "_searchInput_15gl5_329", ae = "_optionsList_15gl5_371", de = "_noResults_15gl5_397", ue = "_option_15gl5_371", pe = "_selected_15gl5_423", he = "_checkbox_15gl5_432", fe = "_label_15gl5_453", r = {
+import '../../assets/index5.css';const Z = "_select_1st6e_1", ee = "_trigger_1st6e_6", te = "_open_1st6e_55", ne = "_value_1st6e_59", oe = "_placeholder_1st6e_68", re = "_arrow_1st6e_72", se = "_dropdownPortal_1st6e_87", ce = "_dropdown_1st6e_87", ie = "_searchContainer_1st6e_107", le = "_searchInput_1st6e_113", ae = "_optionsList_1st6e_155", de = "_noResults_1st6e_181", ue = "_option_1st6e_155", pe = "_selected_1st6e_207", he = "_checkbox_1st6e_216", fe = "_label_1st6e_237", r = {
   select: Z,
   trigger: ee,
   open: te,
@@ -26,10 +27,10 @@ function ye({
   value: f,
   options: h,
   onChange: k,
-  disabled: g = !1,
+  disabled: w = !1,
   multiple: u = !1,
   placeholder: I = "Select...",
-  searchable: w = !1,
+  searchable: g = !1,
   searchPlaceholder: V = "Search..."
 }) {
   const m = X(), _ = P(null), p = P(null), O = P(null), E = P(null), [l, v] = N(!1), [b, L] = N(""), [y, S] = N({
@@ -38,11 +39,11 @@ function ye({
     width: 0,
     maxHeight: 200
   }), d = u ? Array.isArray(f) ? f : [] : typeof f == "string" ? f : "", $ = T(), q = u ? d.length === 0 : !d, H = U(() => {
-    if (!w || !b)
+    if (!g || !b)
       return h;
     const e = b.toLowerCase();
     return h.filter((t) => (typeof t == "string" ? t : t.label).toLowerCase().includes(e));
-  }, [h, w, b]), c = G(() => {
+  }, [h, g, b]), c = G(() => {
     l && S(D());
   }, [l]);
   function D() {
@@ -87,7 +88,7 @@ function ye({
     }
   }
   function z() {
-    g || (l ? (v(!1), L("")) : (S(D()), v(!0), L(""), w && setTimeout(() => O.current?.focus(), 0)));
+    w || (l ? (v(!1), L("")) : (S(D()), v(!0), L(""), g && setTimeout(() => O.current?.focus(), 0)));
   }
   function j(e) {
     L(e.target.value);
@@ -142,17 +143,17 @@ function ye({
       {
         ref: _,
         ...Y(r.select, {
-          [r.disabled]: g,
+          [r.disabled]: w,
           [r.open]: l
         }),
-        children: /* @__PURE__ */ x("button", { ref: p, type: "button", className: r.trigger, onClick: z, disabled: g, children: [
+        children: /* @__PURE__ */ x("button", { ref: p, type: "button", className: r.trigger, onClick: z, disabled: w, children: [
           /* @__PURE__ */ i("span", { className: `${r.value} ${q ? r.placeholder : ""}`, children: $ }),
           /* @__PURE__ */ i(K, { name: "ArrowDown", className: r.arrow })
         ] })
       }
     ),
     typeof window < "u" && J(
-      l && !g && /* @__PURE__ */ i(
+      l && !w && /* @__PURE__ */ i(
         "div",
         {
           className: r.dropdownPortal,
@@ -165,7 +166,7 @@ function ye({
             zIndex: 9999
           },
           children: /* @__PURE__ */ x("div", { className: r.dropdown, children: [
-            w && /* @__PURE__ */ i("div", { className: r.searchContainer, children: /* @__PURE__ */ i(
+            g && /* @__PURE__ */ i("div", { className: r.searchContainer, children: /* @__PURE__ */ i(
               "input",
               {
                 ref: O,

package/dist/components/Textarea/index.js

@@ -1,17 +1,18 @@
+"use client";
 import { jsx as c } from "react/jsx-runtime";
-import '../../assets/index6.css';const h = "_textarea_83ckv_217", x = {
+import '../../assets/index4.css';const h = "_textarea_fwls2_1", i = {
   textarea: h
 }, a = 240;
 function g(r) {
-  const { disableAutoExpand: o, onChange: n, ...s } = r;
+  const { disableAutoExpand: o, onChange: s, ...n } = r;
   function l(e) {
     if (!o && e.currentTarget) {
       const t = e.currentTarget;
       t.style.height = "auto", t.style.height = `${t.scrollHeight}px`, t.scrollHeight > a ? t.style.overflowY = "auto" : t.style.overflowY = "hidden";
     }
-    n?.(e);
+    s?.(e);
   }
-  return /* @__PURE__ */ c("textarea", { ...s, className: x.textarea, onChange: l, style: { maxHeight: `${a}px` } });
+  return /* @__PURE__ */ c("textarea", { ...n, className: i.textarea, onChange: l, style: { maxHeight: `${a}px` } });
 }
 export {
   g as Textarea

package/dist/components/index.js

@@ -1,10 +1,11 @@
-import { DevPanel as e } from "./DevPanel/index.js";
+"use client";
+import { DevPanel as r } from "./DevPanel/index.js";
 import { DevPanelPortal as l } from "./DevPanelPortal/index.js";
 import { ControlRenderer as f } from "./ControlRenderer/index.js";
 import { controls as p } from "./ControlRenderer/controls/index.js";
 export {
   f as ControlRenderer,
-  e as DevPanel,
+  r as DevPanel,
   l as DevPanelPortal,
   p as controls
 };

package/dist/hooks/useDebounceCallback/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef as n, useEffect as c, useCallback as o } from "react";
 function f(r, t) {
   const e = n(null);

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

@@ -0,0 +1,37 @@
+/**
+ * Imperative API exposed on `window.devPanel` so developers can drive the panel
+ * from the browser console, in addition to the keyboard hotkey.
+ *
+ * @example
+ * ```js
+ * devPanel.open();    // show the panel
+ * devPanel.close();   // hide it
+ * devPanel.toggle();  // flip visibility (same as the hotkey)
+ * ```
+ */
+export interface DevPanelConsoleApi {
+    /** Shows the panel (no-op visually if no sections are registered yet). */
+    open: () => void;
+    /** Hides the panel. */
+    close: () => void;
+    /** Toggles visibility — mirrors the keyboard hotkey. */
+    toggle: () => void;
+}
+declare global {
+    interface Window {
+        devPanel?: DevPanelConsoleApi;
+    }
+}
+/**
+ * Registers `window.devPanel` and prints a one-line discovery hint.
+ *
+ * SSR-safe (no-op when `window` is undefined) and idempotent in practice: it is
+ * called from `mountDevPanelPortal`, which only runs once, so the hint logs a
+ * single time.
+ */
+export declare function registerDevPanelConsoleApi(): void;
+/**
+ * Removes `window.devPanel`. Mirrors `unmountDevPanelPortal` for clean teardown
+ * (HMR, tests).
+ */
+export declare function unregisterDevPanelConsoleApi(): void;

package/dist/hooks/useDevPanel/consoleApi.js

@@ -0,0 +1,16 @@
+"use client";
+import { toggleDevPanel as e, hideDevPanel as n, showDevPanel as o } from "../../store/UIStore.js";
+function l() {
+  typeof window > "u" || (window.devPanel = {
+    open: o,
+    close: n,
+    toggle: e
+  }, console.info("[DevPanel] ready — type `devPanel.toggle()` in the console to open it."));
+}
+function t() {
+  typeof window > "u" || delete window.devPanel;
+}
+export {
+  l as registerDevPanelConsoleApi,
+  t as unregisterDevPanelConsoleApi
+};

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

@@ -4,7 +4,11 @@ import { DevPanelProps } from '../../components/DevPanel/types';
  * Hook to register controls in the dev panel with auto-mounting
  * @param sectionName - Section name (e.g: 'Global', 'HomePage')
  * @param controls - Controls configuration object
- * @param devPanelProps - Optional DevPanel configuration (title, hotkey, theme)
+ * @param devPanelProps - Optional DevPanel configuration (title, hotkey, theme, enabled)
+ *
+ * @remarks
+ * Pass `devPanelProps.enabled = false` to make this call a no-op (e.g.
+ * `enabled: import.meta.env.DEV` to disable the panel in production).
  *
  * @example
  * ```typescript