@berenjena/react-dev-panel 2.4.1 → 2.5.0

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

@@ -0,0 +1,24 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface ControlErrorBoundaryProps {
+    /** Control rendered inside the boundary. */
+    children: ReactNode;
+    /** UI shown when the child throws. */
+    fallback: ReactNode;
+    /** Identifier (control name) used in the logged error. */
+    name?: string;
+}
+interface ControlErrorBoundaryState {
+    hasError: boolean;
+}
+/**
+ * Error boundary that isolates a single control's render failures so a broken
+ * or misconfigured control (or a failed lazy import) cannot crash the whole
+ * dev panel or the host application.
+ */
+export declare class ControlErrorBoundary extends Component<ControlErrorBoundaryProps, ControlErrorBoundaryState> {
+    state: ControlErrorBoundaryState;
+    static getDerivedStateFromError(): ControlErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/ControlErrorBoundary/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { Component as t } from "react";
+class s extends t {
+  state = { hasError: !1 };
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  componentDidCatch(r, e) {
+    console.error(`[DevPanel] Control "${this.props.name ?? "unknown"}" failed to render:`, r, e.componentStack);
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+}
+export {
+  s as ControlErrorBoundary
+};

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

@@ -1,13 +1,14 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useRef as c } from "react";
-import '../../../../assets/index16.css';const l = "_slider_1rjjb_235", t = {
-  switch: "_switch_1rjjb_217",
-  slider: l
+"use client";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useRef as l } from "react";
+import '../../../../assets/index14.css';const r = "_slider_ktq7k_19", n = {
+  switch: "_switch_ktq7k_1",
+  slider: r
 };
 function d({ control: e }) {
-  const s = c(`boolean-control-${e.label || Math.ceil(Math.random() * 1e5)}`);
-  return /* @__PURE__ */ n("label", { className: t.switch, children: [
-    /* @__PURE__ */ r(
+  const s = l(`boolean-control-${e.label || Math.ceil(Math.random() * 1e5)}`);
+  return /* @__PURE__ */ c("label", { className: n.switch, children: [
+    /* @__PURE__ */ t(
       "input",
       {
         type: "checkbox",
@@ -18,7 +19,7 @@ function d({ control: e }) {
         onChange: (a) => e.onChange(a.target.checked)
       }
     ),
-    /* @__PURE__ */ r("span", { className: t.slider })
+    /* @__PURE__ */ t("span", { className: n.slider })
   ] });
 }
 export {

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

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as n } from "react/jsx-runtime";
-import '../../../../assets/index15.css';const o = "_button_1h30c_217", s = {
+import '../../../../assets/index13.css';const o = "_button_umswk_1", s = {
   button: o
 };
-function e({ control: t }) {
+function u({ control: t }) {
   return /* @__PURE__ */ n("button", { onClick: t.onClick, disabled: t.disabled, className: s.button, children: t.label });
 }
 export {
-  e as ButtonControl
+  u as ButtonControl
 };

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

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as t } from "react/jsx-runtime";
 import { ButtonControl as e } from "../ButtonControl/index.js";
-import '../../../../assets/index14.css';const i = "_buttonGroupContainer_1irhu_217", l = {
-  buttonGroupContainer: i
+import '../../../../assets/index12.css';const l = "_buttonGroupContainer_1wyhv_1", i = {
+  buttonGroupContainer: l
 };
-function p({ control: n }) {
-  return /* @__PURE__ */ t("div", { className: l.buttonGroupContainer, children: n.buttons.map((o, r) => /* @__PURE__ */ t(
+function s({ control: n }) {
+  return /* @__PURE__ */ t("div", { className: i.buttonGroupContainer, children: n.buttons.map((o, r) => /* @__PURE__ */ t(
     e,
     {
       control: {
@@ -18,5 +19,5 @@ function p({ control: n }) {
   )) });
 }
 export {
-  p as ButtonGroupControl
+  s as ButtonGroupControl
 };

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsxs as m, jsx as l } from "react/jsx-runtime";
 import { useState as v, useEffect as C } from "react";
 import { Input as p } from "../../../Input/index.js";
 import { useDebouncedCallback as b } from "../../../../hooks/useDebounceCallback/index.js";
-import '../../../../assets/index13.css';const y = "_container_1oo6z_1", x = "_colorPreview_1oo6z_7", V = "_errorMessage_1oo6z_52", c = {
+import '../../../../assets/index11.css';const y = "_container_1oo6z_1", x = "_colorPreview_1oo6z_7", V = "_errorMessage_1oo6z_52", c = {
   container: y,
   colorPreview: x,
   errorMessage: V

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

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

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

@@ -1,7 +1,8 @@
-import { jsxs as u, Fragment as k, jsx as r } from "react/jsx-runtime";
+"use client";
+import { jsxs as u, Fragment as k, jsx as i } from "react/jsx-runtime";
 import { useState as n, useRef as R, useCallback as t } from "react";
 import { className as M } from "../../../../utils/className/className.js";
-import '../../../../assets/index12.css';const I = "_dropZone_p0d3i_9", Z = "_disabled_p0d3i_26", j = "_active_p0d3i_45", A = "_supportedFormats_p0d3i_60", P = "_dropText_p0d3i_66", N = "_droppedFile_p0d3i_71", E = "_droppedText_p0d3i_79", L = "_errorMessage_p0d3i_86", d = {
+import '../../../../assets/index10.css';const I = "_dropZone_p0d3i_9", Z = "_disabled_p0d3i_26", j = "_active_p0d3i_45", A = "_supportedFormats_p0d3i_60", P = "_dropText_p0d3i_66", N = "_droppedFile_p0d3i_71", E = "_droppedText_p0d3i_79", L = "_errorMessage_p0d3i_86", d = {
   dropZone: I,
   disabled: Z,
   active: j,
@@ -12,7 +13,7 @@ import '../../../../assets/index12.css';const I = "_dropZone_p0d3i_9", Z = "_dis
   errorMessage: L
 };
 function V({ control: s }) {
-  const [D, i] = n(!1), [o, f] = n(null), [v, b] = n(!0), [g, l] = n(""), c = R(null), _ = t(
+  const [D, r] = n(!1), [o, f] = n(null), [v, b] = n(!0), [g, l] = n(""), c = R(null), _ = t(
     (e) => {
       if (!s.allowedFileTypes)
         return !0;
@@ -24,13 +25,13 @@ function V({ control: s }) {
     (e) => {
       if (s.allowedFileTypes && !_(e.name)) {
         l(`File type not allowed. 
- Supported formats: ${s.allowedFileTypes.join(", ")}`), i(!1);
+ Supported formats: ${s.allowedFileTypes.join(", ")}`), r(!1);
         return;
       }
       l("");
       const a = new FileReader();
       a.onload = () => {
-        i(!1);
+        r(!1);
         const F = {
           base64: a.result,
           file: e,
@@ -43,7 +44,7 @@ function V({ control: s }) {
         f(F), b(!1), s.onDrop(F);
       }, a.readAsDataURL(e);
     },
-    [s, _, l, f, b, i]
+    [s, _, l, f, b, r]
   ), h = t(() => {
     !o && c.current && !s.disabled && c.current.click();
   }, [o, s.disabled]), T = t(
@@ -54,7 +55,7 @@ function V({ control: s }) {
     [p]
   ), w = t(
     (e) => {
-      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!0), l(""));
+      s.disabled || (e.preventDefault(), e.stopPropagation(), r(!0), l(""));
     },
     [s.disabled]
   ), y = t(
@@ -67,17 +68,17 @@ function V({ control: s }) {
     [p, s.disabled]
   ), x = t(
     (e) => {
-      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!0), l(""));
+      s.disabled || (e.preventDefault(), e.stopPropagation(), r(!0), l(""));
     },
     [s.disabled]
   ), C = t(
     (e) => {
-      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!1));
+      s.disabled || (e.preventDefault(), e.stopPropagation(), r(!1));
     },
     [s.disabled]
   );
   return /* @__PURE__ */ u(k, { children: [
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ i(
       "input",
       {
         ref: c,
@@ -88,7 +89,7 @@ function V({ control: s }) {
         disabled: s.disabled
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ i(
       "div",
       {
         ...M(d.dropZone, {
@@ -100,13 +101,13 @@ function V({ control: s }) {
         onDragLeave: C,
         onDrop: y,
         onClick: h,
-        children: g ? /* @__PURE__ */ r("div", { className: d.errorMessage, children: /* @__PURE__ */ r("p", { children: g }) }) : o ? /* @__PURE__ */ r("div", { className: d.droppedFile, children: /* @__PURE__ */ u("p", { className: d.droppedText, children: [
+        children: g ? /* @__PURE__ */ i("div", { className: d.errorMessage, children: /* @__PURE__ */ i("p", { children: g }) }) : o ? /* @__PURE__ */ i("div", { className: d.droppedFile, children: /* @__PURE__ */ u("p", { className: d.droppedText, children: [
           "Dropped '",
           o.name,
           "'"
         ] }) }) : v ? /* @__PURE__ */ u("div", { children: [
-          /* @__PURE__ */ r("p", { className: d.dropText, children: "Drag & Drop a file here or click to browse" }),
-          /* @__PURE__ */ r("p", { className: d.supportedFormats, children: s.allowedFileTypes ? `Supported formats: ${s.allowedFileTypes.join(", ")}` : "All file types are supported" })
+          /* @__PURE__ */ i("p", { className: d.dropText, children: "Drag & Drop a file here or click to browse" }),
+          /* @__PURE__ */ i("p", { className: d.supportedFormats, children: s.allowedFileTypes ? `Supported formats: ${s.allowedFileTypes.join(", ")}` : "All file types are supported" })
         ] }) : null
       }
     )

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

@@ -1,13 +1,14 @@
-import { jsxs as s, jsx as t, Fragment as f } from "react/jsx-runtime";
+"use client";
+import { jsxs as n, jsx as a, Fragment as m } from "react/jsx-runtime";
 import l from "react";
-import { copyToClipboard as H } from "../../../../utils/copyToClipboard/copyToClipboard.js";
-import { getStringPreview as $ } from "../../../../utils/getStringPreview/getStringPreview.js";
-import { prettifyJson as M } from "../../../../utils/prettifyJson/prettifyJson.js";
-import '../../../../assets/index11.css';const j = "_container_cgfc3_217", P = "_header_cgfc3_224", J = "_count_cgfc3_230", q = "_actions_cgfc3_236", z = "_btnRefresh_cgfc3_241", G = "_btnAdd_cgfc3_242", O = "_itemsList_cgfc3_279", Q = "_card_cgfc3_285", U = "_cardHeader_cgfc3_297", W = "_clickable_cgfc3_308", X = "_collapseIcon_cgfc3_312", Y = "_cardTitle_cgfc3_323", Z = "_keyCode_cgfc3_329", ee = "_cardBody_cgfc3_337", ae = "_field_cgfc3_344", te = "_valueActions_cgfc3_354", le = "_fieldLabel_cgfc3_359", ce = "_input_cgfc3_367", se = "_textarea_cgfc3_399", ne = "_valueText_cgfc3_445", de = "_btnToggle_cgfc3_461", oe = "_cardActions_cgfc3_492", ie = "_btnSave_cgfc3_498", re = "_btnCancel_cgfc3_499", ue = "_btnEdit_cgfc3_500", be = "_btnDelete_cgfc3_501", _e = "_empty_cgfc3_567", a = {
-  container: j,
-  header: P,
-  count: J,
-  actions: q,
+import { copyToClipboard as F } from "../../../../utils/copyToClipboard/copyToClipboard.js";
+import { getStringPreview as H } from "../../../../utils/getStringPreview/getStringPreview.js";
+import { prettifyJson as $ } from "../../../../utils/prettifyJson/prettifyJson.js";
+import '../../../../assets/index9.css';const M = "_container_1qtvu_1", j = "_header_1qtvu_8", P = "_count_1qtvu_14", J = "_actions_1qtvu_20", z = "_btnRefresh_1qtvu_25", G = "_btnAdd_1qtvu_26", O = "_itemsList_1qtvu_63", Q = "_card_1qtvu_69", U = "_cardHeader_1qtvu_81", W = "_clickable_1qtvu_92", X = "_collapseIcon_1qtvu_96", Y = "_cardTitle_1qtvu_107", Z = "_keyCode_1qtvu_113", ee = "_cardBody_1qtvu_121", te = "_field_1qtvu_128", ae = "_valueActions_1qtvu_138", le = "_fieldLabel_1qtvu_143", se = "_input_1qtvu_151", ne = "_textarea_1qtvu_183", ce = "_valueText_1qtvu_229", de = "_btnToggle_1qtvu_245", oe = "_cardActions_1qtvu_276", ie = "_btnSave_1qtvu_282", re = "_btnCancel_1qtvu_283", ue = "_btnEdit_1qtvu_284", be = "_btnDelete_1qtvu_285", ve = "_empty_1qtvu_351", t = {
+  container: M,
+  header: j,
+  count: P,
+  actions: J,
   btnRefresh: z,
   btnAdd: G,
   itemsList: O,
@@ -18,82 +19,82 @@ import '../../../../assets/index11.css';const j = "_container_cgfc3_217", P = "_
   cardTitle: Y,
   keyCode: Z,
   cardBody: ee,
-  field: ae,
-  valueActions: te,
+  field: te,
+  valueActions: ae,
   fieldLabel: le,
-  input: ce,
-  textarea: se,
-  valueText: ne,
+  input: se,
+  textarea: ne,
+  valueText: ce,
   btnToggle: de,
   cardActions: oe,
   btnSave: ie,
   btnCancel: re,
   btnEdit: ue,
   btnDelete: be,
-  empty: _e
+  empty: ve
 };
-function ve({ control: n }) {
-  const [_, E] = l.useState([]), [C, m] = l.useState(null), [y, g] = l.useState(""), [r, N] = l.useState(""), [v, S] = l.useState(""), [k, p] = l.useState(!1), [u, w] = l.useState(/* @__PURE__ */ new Map()), [A, x] = l.useState(null), o = l.useCallback(() => {
+function ge({ control: c }) {
+  const [v, x] = l.useState([]), [f, y] = l.useState(null), [k, _] = l.useState(""), [r, N] = l.useState(""), [g, S] = l.useState(""), [p, C] = l.useState(!1), [u, w] = l.useState(/* @__PURE__ */ new Map()), [E, q] = l.useState(null), o = l.useCallback(() => {
     const e = [];
     for (let d = 0; d < localStorage.length; d++) {
       const i = localStorage.key(d);
       if (i) {
-        const F = localStorage.getItem(i);
-        e.push({ key: i, value: F || "" });
+        const B = localStorage.getItem(i);
+        e.push({ key: i, value: B || "" });
       }
     }
-    const c = e.sort((d, i) => d.key.localeCompare(i.key));
-    E(c);
+    const s = e.sort((d, i) => d.key.localeCompare(i.key));
+    x(s);
     const b = /* @__PURE__ */ new Map();
-    c.forEach((d) => {
+    s.forEach((d) => {
       b.set(d.key, {
         collapsed: !0,
         valueExpanded: !1,
-        formattedValue: M(d.value)
+        formattedValue: $(d.value)
       });
-    }), w(b), n.onRefresh?.();
-  }, [n]), I = l.useCallback(
+    }), w(b), c.onRefresh?.();
+  }, [c]), A = l.useCallback(
     (e) => {
       confirm(`Delete "${e}" from localStorage?`) && (localStorage.removeItem(e), o());
     },
     [o]
-  ), T = l.useCallback((e, c) => {
-    m(e), g(c);
-  }, []), L = l.useCallback(
+  ), I = l.useCallback((e, s) => {
+    y(e), _(s);
+  }, []), T = l.useCallback(
     (e) => {
-      localStorage.setItem(e, y), m(null), g(""), o();
+      localStorage.setItem(e, k), y(null), _(""), o();
     },
-    [y, o]
-  ), D = l.useCallback(() => {
-    m(null), g("");
-  }, []), K = l.useCallback(() => {
+    [k, o]
+  ), L = l.useCallback(() => {
+    y(null), _("");
+  }, []), D = l.useCallback(() => {
     if (r.trim() === "") {
       alert("The key cannot be empty");
       return;
     }
-    localStorage.getItem(r) !== null && !confirm(`The key "${r}" already exists. Do you want to overwrite it?`) || (localStorage.setItem(r, v), N(""), S(""), p(!1), o());
-  }, [r, v, o]), V = l.useCallback(async (e, c) => {
+    localStorage.getItem(r) !== null && !confirm(`The key "${r}" already exists. Do you want to overwrite it?`) || (localStorage.setItem(r, g), N(""), S(""), C(!1), o());
+  }, [r, g, o]), K = l.useCallback(async (e, s) => {
     try {
-      await H(c), x(e), setTimeout(() => {
-        x(null);
+      await F(s), q(e), setTimeout(() => {
+        q(null);
       }, 2e3);
     } catch {
       alert("Failed to copy to clipboard");
     }
-  }, []), h = l.useCallback((e, c) => {
+  }, []), h = l.useCallback((e, s) => {
     w((b) => {
       const d = new Map(b), i = d.get(e);
       return i ? (d.set(e, {
         ...i,
-        [c]: !i[c]
+        [s]: !i[s]
       }), d) : b;
     });
-  }, []), R = l.useCallback(
-    (e, c) => {
-      (e.key === "Enter" || e.key === " ") && h(c, "collapsed");
+  }, []), V = l.useCallback(
+    (e, s) => {
+      (e.key === "Enter" || e.key === " ") && h(s, "collapsed");
     },
     [h]
-  ), B = l.useCallback((e, c = 100) => $(e, c), []);
+  ), R = l.useCallback((e, s = 100) => H(e, s), []);
   return l.useEffect(() => {
     o();
     function e() {
@@ -102,142 +103,142 @@ function ve({ control: n }) {
     return window.addEventListener("storage", e), () => {
       window.removeEventListener("storage", e);
     };
-  }, []), /* @__PURE__ */ s("div", { className: a.container, children: [
-    /* @__PURE__ */ s("div", { className: a.header, children: [
-      /* @__PURE__ */ s("span", { className: a.count, children: [
-        _.length,
-        _.length === 1 ? " item" : " items"
+  }, []), /* @__PURE__ */ n("div", { className: t.container, children: [
+    /* @__PURE__ */ n("div", { className: t.header, children: [
+      /* @__PURE__ */ n("span", { className: t.count, children: [
+        v.length,
+        v.length === 1 ? " item" : " items"
       ] }),
-      /* @__PURE__ */ s("div", { className: a.actions, children: [
-        /* @__PURE__ */ t("button", { className: a.btnRefresh, onClick: o, disabled: n.disabled, title: "Refresh", children: "🔄" }),
-        /* @__PURE__ */ t("button", { className: a.btnAdd, onClick: () => p(!k), disabled: n.disabled, title: "Add new", children: k ? "✕" : "+" })
+      /* @__PURE__ */ n("div", { className: t.actions, children: [
+        /* @__PURE__ */ a("button", { className: t.btnRefresh, onClick: o, disabled: c.disabled, title: "Refresh", children: "🔄" }),
+        /* @__PURE__ */ a("button", { className: t.btnAdd, onClick: () => C(!p), disabled: c.disabled, title: "Add new", children: p ? "✕" : "+" })
       ] })
     ] }),
-    k && /* @__PURE__ */ s("div", { className: a.card, children: [
-      /* @__PURE__ */ t("div", { className: a.cardHeader, children: /* @__PURE__ */ t("span", { className: a.cardTitle, children: "New entry" }) }),
-      /* @__PURE__ */ s("div", { className: a.cardBody, children: [
-        /* @__PURE__ */ s("div", { className: a.field, children: [
-          /* @__PURE__ */ t("label", { className: a.fieldLabel, children: "Key" }),
-          /* @__PURE__ */ t(
+    p && /* @__PURE__ */ n("div", { className: t.card, children: [
+      /* @__PURE__ */ a("div", { className: t.cardHeader, children: /* @__PURE__ */ a("span", { className: t.cardTitle, children: "New entry" }) }),
+      /* @__PURE__ */ n("div", { className: t.cardBody, children: [
+        /* @__PURE__ */ n("div", { className: t.field, children: [
+          /* @__PURE__ */ a("label", { className: t.fieldLabel, children: "Key" }),
+          /* @__PURE__ */ a(
             "input",
             {
               type: "text",
-              className: a.input,
+              className: t.input,
               placeholder: "key_name",
               value: r,
               onChange: (e) => N(e.target.value),
-              disabled: n.disabled
+              disabled: c.disabled
             }
           )
         ] }),
-        /* @__PURE__ */ s("div", { className: a.field, children: [
-          /* @__PURE__ */ t("label", { className: a.fieldLabel, children: "Value" }),
-          /* @__PURE__ */ t(
+        /* @__PURE__ */ n("div", { className: t.field, children: [
+          /* @__PURE__ */ a("label", { className: t.fieldLabel, children: "Value" }),
+          /* @__PURE__ */ a(
             "textarea",
             {
-              className: a.textarea,
+              className: t.textarea,
               placeholder: '{"example": "value"}',
-              value: v,
+              value: g,
               onChange: (e) => S(e.target.value),
-              disabled: n.disabled,
+              disabled: c.disabled,
               rows: 3
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ s("div", { className: a.cardActions, children: [
-        /* @__PURE__ */ t("button", { className: a.btnSave, onClick: K, disabled: n.disabled, children: "Save" }),
-        /* @__PURE__ */ t("button", { className: a.btnCancel, onClick: () => p(!1), disabled: n.disabled, children: "Cancel" })
+      /* @__PURE__ */ n("div", { className: t.cardActions, children: [
+        /* @__PURE__ */ a("button", { className: t.btnSave, onClick: D, disabled: c.disabled, children: "Save" }),
+        /* @__PURE__ */ a("button", { className: t.btnCancel, onClick: () => C(!1), disabled: c.disabled, children: "Cancel" })
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { className: a.itemsList, children: _.length === 0 ? /* @__PURE__ */ t("div", { className: a.empty, children: "No data in localStorage" }) : _.map((e) => /* @__PURE__ */ s("div", { className: a.card, children: [
-      /* @__PURE__ */ s(
+    /* @__PURE__ */ a("div", { className: t.itemsList, children: v.length === 0 ? /* @__PURE__ */ a("div", { className: t.empty, children: "No data in localStorage" }) : v.map((e) => /* @__PURE__ */ n("div", { className: t.card, children: [
+      /* @__PURE__ */ n(
         "div",
         {
-          className: `${a.cardHeader} ${a.clickable}`,
+          className: `${t.cardHeader} ${t.clickable}`,
           onClick: () => h(e.key, "collapsed"),
           role: "button",
           tabIndex: 0,
-          onKeyDown: (c) => R(c, e.key),
+          onKeyDown: (s) => V(s, e.key),
           children: [
-            /* @__PURE__ */ t("span", { className: a.collapseIcon, children: u.get(e.key)?.collapsed ? "▶" : "▼" }),
-            /* @__PURE__ */ t("code", { className: a.keyCode, children: e.key })
+            /* @__PURE__ */ a("span", { className: t.collapseIcon, children: u.get(e.key)?.collapsed ? "▶" : "▼" }),
+            /* @__PURE__ */ a("code", { className: t.keyCode, children: e.key })
           ]
         }
       ),
-      !u.get(e.key)?.collapsed && /* @__PURE__ */ s(f, { children: [
-        /* @__PURE__ */ t("div", { className: a.cardBody, children: C === e.key ? /* @__PURE__ */ t(
+      !u.get(e.key)?.collapsed && /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ a("div", { className: t.cardBody, children: f === e.key ? /* @__PURE__ */ a(
           "textarea",
           {
-            className: a.textarea,
-            value: y,
-            onChange: (c) => g(c.target.value),
-            disabled: n.disabled,
+            className: t.textarea,
+            value: k,
+            onChange: (s) => _(s.target.value),
+            disabled: c.disabled,
             rows: 6,
             autoFocus: !0
           }
-        ) : /* @__PURE__ */ s(f, { children: [
-          /* @__PURE__ */ t("pre", { className: a.valueText, children: u.get(e.key)?.valueExpanded ? u.get(e.key)?.formattedValue : B(u.get(e.key)?.formattedValue || e.value) }),
-          /* @__PURE__ */ s("div", { className: a.valueActions, children: [
-            e.value.length > 100 && /* @__PURE__ */ t(
+        ) : /* @__PURE__ */ n(m, { children: [
+          /* @__PURE__ */ a("pre", { className: t.valueText, children: u.get(e.key)?.valueExpanded ? u.get(e.key)?.formattedValue : R(u.get(e.key)?.formattedValue || e.value) }),
+          /* @__PURE__ */ n("div", { className: t.valueActions, children: [
+            e.value.length > 100 && /* @__PURE__ */ a(
               "button",
               {
-                className: a.btnToggle,
+                className: t.btnToggle,
                 onClick: () => h(e.key, "valueExpanded"),
-                disabled: n.disabled,
+                disabled: c.disabled,
                 children: u.get(e.key)?.valueExpanded ? "▲ Show less" : "▼ Show more"
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ a(
               "button",
               {
-                className: a.btnToggle,
-                onClick: () => V(e.key, e.value),
-                disabled: n.disabled,
+                className: t.btnToggle,
+                onClick: () => K(e.key, e.value),
+                disabled: c.disabled,
                 title: "Copy content",
-                children: A === e.key ? "✓ Copied" : "📎 Copy"
+                children: E === e.key ? "✓ Copied" : "📎 Copy"
               }
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ t("div", { className: a.cardActions, children: C === e.key ? /* @__PURE__ */ s(f, { children: [
-          /* @__PURE__ */ t(
+        /* @__PURE__ */ a("div", { className: t.cardActions, children: f === e.key ? /* @__PURE__ */ n(m, { children: [
+          /* @__PURE__ */ a(
             "button",
             {
-              className: a.btnSave,
-              onClick: () => L(e.key),
-              disabled: n.disabled,
+              className: t.btnSave,
+              onClick: () => T(e.key),
+              disabled: c.disabled,
               title: "Save",
               children: "💾 Save"
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ a(
             "button",
             {
-              className: a.btnCancel,
-              onClick: D,
-              disabled: n.disabled,
+              className: t.btnCancel,
+              onClick: L,
+              disabled: c.disabled,
               title: "Cancel",
               children: "✕ Cancel"
             }
           )
-        ] }) : /* @__PURE__ */ s(f, { children: [
-          /* @__PURE__ */ t(
+        ] }) : /* @__PURE__ */ n(m, { children: [
+          /* @__PURE__ */ a(
             "button",
             {
-              className: a.btnEdit,
-              onClick: () => T(e.key, e.value),
-              disabled: n.disabled,
+              className: t.btnEdit,
+              onClick: () => I(e.key, e.value),
+              disabled: c.disabled,
               title: "Edit",
               children: "✏️ Edit"
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ a(
             "button",
             {
-              className: a.btnDelete,
-              onClick: () => I(e.key),
-              disabled: n.disabled,
+              className: t.btnDelete,
+              onClick: () => A(e.key),
+              disabled: c.disabled,
               title: "Delete",
               children: "🗑️ Delete"
             }
@@ -248,5 +249,5 @@ function ve({ control: n }) {
   ] });
 }
 export {
-  ve as LocalStorageControl
+  ge as LocalStorageControl
 };

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

@@ -9,6 +9,8 @@ import { MultiSelectControlProps } from './types';
  * @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
+ * @param props.control.searchable - Optional flag to show a search input that filters the options
+ * @param props.control.searchPlaceholder - Optional placeholder for the search input
  * @returns JSX element representing the multi-select control
  *
  * @example