@imperosoft/cris-webui-components 1.1.3-beta.0 → 1.1.3-beta.1

package/dist/index.js

@@ -29,6 +29,7 @@ __export(index_exports, {
   CrisSlider: () => CrisSlider,
   CrisSpinner: () => CrisSpinner,
   CrisText: () => CrisText,
+  CrisTextInput: () => CrisTextInput,
   configureIcons: () => configureIcons,
   getIconConfig: () => getIconConfig,
   getIconFilter: () => getIconFilter,
@@ -1160,9 +1161,149 @@ function CrisOfflinePage({
   ] }) });
 }
 
-// src/components/CrisCoDebug.tsx
+// src/components/CrisTextInput.tsx
+var import_react4 = require("react");
 var import_cris_webui_ch5_core7 = require("@imperosoft/cris-webui-ch5-core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var colors = {
+  bg: "#4f5152",
+  bgFocused: "#3a3c3d",
+  text: "#ffffff",
+  placeholder: "#9ca3af",
+  border: "#6b7280",
+  borderFocused: "#007ca0"
+};
+var defaults = {
+  container: {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: "0.5rem",
+    background: colors.bg,
+    border: `1px solid ${colors.border}`,
+    transition: "border-color 0.15s, background 0.15s",
+    overflow: "hidden"
+  },
+  containerFocused: {
+    borderColor: colors.borderFocused,
+    background: colors.bgFocused
+  },
+  input: {
+    flex: 1,
+    background: "transparent",
+    border: "none",
+    outline: "none",
+    color: colors.text,
+    fontSize: "1em",
+    fontWeight: 500,
+    padding: "0.6rem 0.9rem",
+    width: "100%",
+    fontFamily: "inherit"
+  }
+};
+function CrisTextInput({
+  join,
+  joinFeedback,
+  joinEnable,
+  joinVisible,
+  placeholder = "",
+  maxLength,
+  type = "text",
+  submitOnEnter = true,
+  submitOnBlur = false,
+  submitOnChange = false,
+  clearOnSubmit = false,
+  className,
+  style,
+  inputClassName,
+  inputStyle,
+  classDisabled,
+  classFocused: classFocusedProp
+}) {
+  const feedbackJoin = joinFeedback ?? join;
+  const feedback = (0, import_cris_webui_ch5_core7.useSerial)(feedbackJoin);
+  const enabled = (0, import_cris_webui_ch5_core7.useDigital)(joinEnable ?? 0);
+  const visible = (0, import_cris_webui_ch5_core7.useDigital)(joinVisible ?? 0);
+  const sSet = (0, import_cris_webui_ch5_core7.useJoinsStore)((state) => state.sSet);
+  const isEnabled = joinEnable == null ? true : enabled;
+  const isVisible = joinVisible == null ? true : visible;
+  const [localValue, setLocalValue] = (0, import_react4.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
+  const inputRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (!isFocused) {
+      setLocalValue(feedback);
+    }
+  }, [feedback, isFocused]);
+  if (!isVisible) return null;
+  const submit = (value) => {
+    sSet(join, value);
+    if (clearOnSubmit) {
+      setLocalValue("");
+    }
+  };
+  const handleChange = (e) => {
+    const val = e.target.value;
+    setLocalValue(val);
+    if (submitOnChange) {
+      submit(val);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (submitOnEnter && e.key === "Enter") {
+      submit(localValue);
+      inputRef.current?.blur();
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (submitOnBlur) {
+      submit(localValue);
+    }
+  };
+  const useDefaults = !className;
+  const containerClasses = [
+    "cris-text-input",
+    className,
+    !isEnabled && (classDisabled || "disabled"),
+    isFocused && (classFocusedProp || "focused")
+  ].filter(Boolean).join(" ");
+  const containerStyle = useDefaults ? {
+    ...defaults.container,
+    ...isFocused ? defaults.containerFocused : void 0,
+    ...style,
+    opacity: isEnabled ? 1 : 0.4,
+    pointerEvents: isEnabled ? "auto" : "none"
+  } : {
+    ...style,
+    opacity: isEnabled ? 1 : 0.4,
+    pointerEvents: isEnabled ? "auto" : "none"
+  };
+  const computedInputStyle = inputClassName ? { ...inputStyle } : { ...defaults.input, ...inputStyle };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: containerClasses, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      ref: inputRef,
+      type,
+      value: localValue,
+      placeholder,
+      maxLength,
+      disabled: !isEnabled,
+      className: inputClassName,
+      style: computedInputStyle,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }
+  ) });
+}
+
+// src/components/CrisCoDebug.tsx
+var import_cris_webui_ch5_core8 = require("@imperosoft/cris-webui-ch5-core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultStyles = {
   container: {
     display: "flex",
@@ -1222,7 +1363,7 @@ var defaultStyles = {
 };
 function ConnectionIcon({ on, type }) {
   const label = type === "eth" ? "ETH" : "RS";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       style: {
@@ -1230,12 +1371,12 @@ function ConnectionIcon({ on, type }) {
         opacity: on ? 1 : 0.4
       },
       title: `${type === "eth" ? "Ethernet" : "RS232"}: ${on ? "Connected" : "Disconnected"}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "1", y: "4", width: "18", height: "12", rx: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: "10", y: "12.5", textAnchor: "middle", fontSize: "7", fontWeight: "bold", fill: "currentColor", children: label }),
-        on ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "16", cy: "5", r: "3.5", fill: "#4caf50", stroke: "none" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "16", cy: "5", r: "3.5", fill: "#f44336", stroke: "none" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "14", y1: "3", x2: "18", y2: "7", stroke: "white", strokeWidth: "1.5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "1", y: "4", width: "18", height: "12", rx: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: "10", y: "12.5", textAnchor: "middle", fontSize: "7", fontWeight: "bold", fill: "currentColor", children: label }),
+        on ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "16", cy: "5", r: "3.5", fill: "#4caf50", stroke: "none" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "16", cy: "5", r: "3.5", fill: "#f44336", stroke: "none" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "14", y1: "3", x2: "18", y2: "7", stroke: "white", strokeWidth: "1.5" })
         ] })
       ] })
     }
@@ -1254,22 +1395,22 @@ function DebugModuleItem({
   iconRs232Off
 }) {
   const name = module2.lb ? `${module2.id} (${module2.lb})` : module2.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: itemClassName,
       style: itemClassName ? itemStyle : { ...defaultStyles.item, ...itemStyle },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: defaultStyles.info, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: defaultStyles.moduleName, children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: defaultStyles.moduleType, children: module2.tp })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: defaultStyles.info, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: defaultStyles.moduleName, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: defaultStyles.moduleType, children: module2.tp })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: defaultStyles.icons, children: [
-          module2.et.vs && (iconEthOn && iconEthOff ? module2.et.on ? iconEthOn : iconEthOff : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConnectionIcon, { on: module2.et.on, type: "eth" })),
-          module2.rs.vs && (iconRs232On && iconRs232Off ? module2.rs.on ? iconRs232On : iconRs232Off : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConnectionIcon, { on: module2.rs.on, type: "rs232" }))
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: defaultStyles.icons, children: [
+          module2.et.vs && (iconEthOn && iconEthOff ? module2.et.on ? iconEthOn : iconEthOff : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ConnectionIcon, { on: module2.et.on, type: "eth" })),
+          module2.rs.vs && (iconRs232On && iconRs232Off ? module2.rs.on ? iconRs232On : iconRs232Off : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ConnectionIcon, { on: module2.rs.on, type: "rs232" }))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: defaultStyles.buttons, children: [
-          module2.md.vs && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: defaultStyles.buttons, children: [
+          module2.md.vs && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             CrisButton,
             {
               selected: module2.md.on,
@@ -1279,7 +1420,7 @@ function DebugModuleItem({
               onPress: () => onAction("toggleMod", module2.id)
             }
           ),
-          module2.cm.vs && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          module2.cm.vs && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             CrisButton,
             {
               selected: module2.cm.on,
@@ -1308,8 +1449,8 @@ function CrisCoDebug({
   iconRs232On,
   iconRs232Off
 }) {
-  const modules = (0, import_cris_webui_ch5_core7.useCustomObject)(oid);
-  const send = (0, import_cris_webui_ch5_core7.useCustomObjectSend)();
+  const modules = (0, import_cris_webui_ch5_core8.useCustomObject)(oid);
+  const send = (0, import_cris_webui_ch5_core8.useCustomObjectSend)();
   const handleAction = (action, id) => {
     send(oid, { action, id });
   };
@@ -1317,14 +1458,14 @@ function CrisCoDebug({
     return null;
   }
   const visibleModules = modules.filter((m) => m.vs);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className,
       style: className ? style : { ...defaultStyles.container, ...style },
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: defaultStyles.title, children: title }),
-        visibleModules.map((module2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: defaultStyles.title, children: title }),
+        visibleModules.map((module2) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           DebugModuleItem,
           {
             module: module2,
@@ -1346,15 +1487,15 @@ function CrisCoDebug({
 }
 
 // src/components/CrisCoList.tsx
-var import_cris_webui_ch5_core8 = require("@imperosoft/cris-webui-ch5-core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var colors = {
+var import_cris_webui_ch5_core9 = require("@imperosoft/cris-webui-ch5-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var colors2 = {
   itemBg: "#4f5152",
   itemActiveBg: "#007ca0",
   text: "#ffffff",
   headerText: "#6b7280"
 };
-var defaults = {
+var defaults2 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -1370,7 +1511,7 @@ var defaults = {
     padding: "0.5rem 0.75rem",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    color: colors.headerText,
+    color: colors2.headerText,
     flexShrink: 0,
     textAlign: "center"
   },
@@ -1390,12 +1531,12 @@ var defaults = {
     minHeight: "3.7rem",
     cursor: "pointer",
     userSelect: "none",
-    background: colors.itemBg,
+    background: colors2.itemBg,
     borderRadius: "0.5rem",
     transition: "background 0.15s"
   },
   itemActive: {
-    background: colors.itemActiveBg
+    background: colors2.itemActiveBg
   },
   itemBtn: {
     flex: 1,
@@ -1405,7 +1546,7 @@ var defaults = {
     background: "transparent",
     border: "none",
     textAlign: "left",
-    color: colors.text,
+    color: colors2.text,
     height: "100%",
     borderRadius: "0.5rem",
     cursor: "pointer"
@@ -1433,7 +1574,7 @@ var defaults = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: colors.text
+    color: colors2.text
   }
 };
 var INJECTED_CSS = `
@@ -1470,13 +1611,13 @@ function ListItemRow({
     !isEnabled && (itemDisabledClassName || "disabled")
   ].filter(Boolean).join(" ");
   const computedStyle = useDefaults ? {
-    ...defaults.item,
+    ...defaults2.item,
     ...itemStyleProp,
-    ...selected ? { ...defaults.itemActive, ...itemActiveStyle } : void 0,
+    ...selected ? { ...defaults2.itemActive, ...itemActiveStyle } : void 0,
     opacity: isEnabled ? 1 : 0.4
   } : { ...itemStyleProp };
   if (renderItem) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: defaults.itemBtn, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: defaults2.itemBtn, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       CrisButton,
       {
         selected,
@@ -1485,7 +1626,7 @@ function ListItemRow({
         showLocalFeedback: false,
         children: renderItem(item, selected, settings)
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       CrisButton,
       {
         selected,
@@ -1497,19 +1638,19 @@ function ListItemRow({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: defaults.itemBtn, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: defaults2.itemBtn, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     CrisButton,
     {
       selected,
       enabled: isEnabled,
       onPress: onSelect,
       showLocalFeedback: false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: defaults.itemBtnInner, children: [
-        showIds && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cris-co-list-id", style: defaults.idNum, children: item.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: defaults.itemLabel, children: item.lb || `Item ${item.id}` })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: defaults2.itemBtnInner, children: [
+        showIds && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cris-co-list-id", style: defaults2.idNum, children: item.id }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: defaults2.itemLabel, children: item.lb || `Item ${item.id}` })
       ] })
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     CrisButton,
     {
       selected,
@@ -1517,9 +1658,9 @@ function ListItemRow({
       onPress: onSelect,
       className: `cris-co-list-item-btn ${itemActiveClassName ?? ""}`,
       classActive: itemActiveClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
-        showIds && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cris-co-list-id", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `Item ${item.id}` })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
+        showIds && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cris-co-list-id", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `Item ${item.id}` })
       ] })
     }
   ) });
@@ -1540,8 +1681,8 @@ function CrisCoList({
   itemActiveStyle,
   itemDisabledClassName
 }) {
-  const list = (0, import_cris_webui_ch5_core8.useCustomObject)(oid);
-  const send = (0, import_cris_webui_ch5_core8.useCustomObjectSend)();
+  const list = (0, import_cris_webui_ch5_core9.useCustomObject)(oid);
+  const send = (0, import_cris_webui_ch5_core9.useCustomObjectSend)();
   injectStyle();
   if (!list) return null;
   const { st: settings, si, it: items } = list;
@@ -1549,21 +1690,21 @@ function CrisCoList({
   const handleSelect = (id) => {
     send(oid, { action: selectAction, id });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className,
-      style: className ? style : { ...defaults.container, ...style },
+      style: className ? style : { ...defaults2.container, ...style },
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             className: headerClassName,
-            style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+            style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
             children: title
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cris-co-list-scroll", style: defaults.scroll, children: visibleItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "cris-co-list-scroll", style: defaults2.scroll, children: visibleItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           ListItemRow,
           {
             item,
@@ -1586,9 +1727,9 @@ function CrisCoList({
 }
 
 // src/components/CrisCoMatrixListsTie.tsx
-var import_cris_webui_ch5_core9 = require("@imperosoft/cris-webui-ch5-core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var colors2 = {
+var import_cris_webui_ch5_core10 = require("@imperosoft/cris-webui-ch5-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var colors3 = {
   itemBg: "#4f5152",
   itemActiveBg: "#007ca0",
   vmActiveBg: "#dc2626",
@@ -1599,7 +1740,7 @@ var colors2 = {
   sgOn: "#2196f3",
   sgOff: "#666666"
 };
-var defaults2 = {
+var defaults3 = {
   container: {
     display: "flex",
     flexDirection: "row",
@@ -1621,7 +1762,7 @@ var defaults2 = {
     padding: "0.5rem 0.75rem",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    color: colors2.headerText,
+    color: colors3.headerText,
     flexShrink: 0,
     textAlign: "center"
   },
@@ -1643,12 +1784,12 @@ var defaults2 = {
     minHeight: "3.7rem",
     cursor: "pointer",
     userSelect: "none",
-    background: colors2.itemBg,
+    background: colors3.itemBg,
     borderRadius: "0.5rem",
     transition: "background 0.15s"
   },
   itemActive: {
-    background: colors2.itemActiveBg
+    background: colors3.itemActiveBg
   },
   itemBtn: {
     flex: 1,
@@ -1658,7 +1799,7 @@ var defaults2 = {
     background: "transparent",
     border: "none",
     textAlign: "left",
-    color: colors2.text,
+    color: colors3.text,
     height: "100%",
     borderRadius: "0.5rem",
     cursor: "pointer"
@@ -1686,7 +1827,7 @@ var defaults2 = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: colors2.text
+    color: colors3.text
   },
   indicators: {
     display: "flex",
@@ -1704,8 +1845,8 @@ var defaults2 = {
     alignSelf: "stretch",
     display: "flex",
     alignItems: "center",
-    background: colors2.itemBg,
-    color: colors2.text,
+    background: colors3.itemBg,
+    color: colors3.text,
     border: "none",
     borderRadius: "0.4rem",
     padding: "0 0.6rem",
@@ -1716,8 +1857,8 @@ var defaults2 = {
     transition: "background 0.15s"
   },
   vmBtnActive: {
-    background: colors2.vmActiveBg,
-    color: colors2.text
+    background: colors3.vmActiveBg,
+    color: colors3.text
   }
 };
 var INJECTED_CSS2 = `
@@ -1733,24 +1874,24 @@ function injectScrollbarStyle() {
   document.head.appendChild(style);
 }
 function DefaultIoIndicator({ on }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       style: {
-        ...defaults2.indicator,
-        backgroundColor: on ? colors2.ioOn : colors2.ioOff
+        ...defaults3.indicator,
+        backgroundColor: on ? colors3.ioOn : colors3.ioOff
       },
       title: on ? "Online" : "Offline"
     }
   );
 }
 function DefaultSignalIndicator({ on }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       style: {
-        ...defaults2.indicator,
-        backgroundColor: on ? colors2.sgOn : colors2.sgOff
+        ...defaults3.indicator,
+        backgroundColor: on ? colors3.sgOn : colors3.sgOff
       },
       title: on ? "Signal detected" : "No signal"
     }
@@ -1784,29 +1925,29 @@ function MatrixItemRow({
     !isEnabled && (itemDisabledClassName || "disabled")
   ].filter(Boolean).join(" ");
   const computedStyle = useDefaults ? {
-    ...defaults2.item,
+    ...defaults3.item,
     ...itemStyleProp,
-    ...isActive ? { ...defaults2.itemActive, ...itemActiveStyle } : void 0,
+    ...isActive ? { ...defaults3.itemActive, ...itemActiveStyle } : void 0,
     opacity: isEnabled ? 1 : 0.4
   } : { ...itemStyleProp };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: classes, style: computedStyle, children: [
-    useDefaults ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: defaults2.itemBtn, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: classes, style: computedStyle, children: [
+    useDefaults ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: defaults3.itemBtn, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CrisButton,
       {
         selected: isActive,
         enabled: isEnabled,
         onPress: onSelect,
         showLocalFeedback: false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: defaults2.itemBtnInner, children: [
-          showChannels && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cris-co-matrix-ch", style: defaults2.channelNum, children: item.id }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: defaults2.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: defaults2.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultSignalIndicator, { on: item.sg.on }))
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: defaults3.itemBtnInner, children: [
+          showChannels && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cris-co-matrix-ch", style: defaults3.channelNum, children: item.id }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: defaults3.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: defaults3.indicators, children: [
+            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DefaultIoIndicator, { on: item.io.on })),
+            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DefaultSignalIndicator, { on: item.sg.on }))
           ] })
         ] })
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CrisButton,
       {
         selected: isActive,
@@ -1814,22 +1955,22 @@ function MatrixItemRow({
         onPress: onSelect,
         className: `cris-co-matrix-item-btn ${itemActiveClassName ?? ""}`,
         classActive: itemActiveClassName,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
-          showChannels && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cris-co-matrix-ch", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: defaults2.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultSignalIndicator, { on: item.sg.on }))
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
+          showChannels && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cris-co-matrix-ch", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: defaults3.indicators, children: [
+            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DefaultIoIndicator, { on: item.io.on })),
+            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DefaultSignalIndicator, { on: item.sg.on }))
           ] })
         ] })
       }
     ),
-    item.vm.vs && (useDefaults && !vmButtonClassName ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
-      ...defaults2.vmBtn,
-      ...item.vm.on ? defaults2.vmBtnActive : void 0,
+    item.vm.vs && (useDefaults && !vmButtonClassName ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: {
+      ...defaults3.vmBtn,
+      ...item.vm.on ? defaults3.vmBtnActive : void 0,
       opacity: item.vm.en ? 1 : 0.4,
       pointerEvents: item.vm.en ? "auto" : "none"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1838,7 +1979,7 @@ function MatrixItemRow({
         onPress: onToggleVideoMute,
         showLocalFeedback: false
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1873,8 +2014,8 @@ function CrisCoMatrixListsTie({
   renderIoIndicator,
   renderSignalIndicator
 }) {
-  const matrix = (0, import_cris_webui_ch5_core9.useCustomObject)(oid);
-  const send = (0, import_cris_webui_ch5_core9.useCustomObjectSend)();
+  const matrix = (0, import_cris_webui_ch5_core10.useCustomObject)(oid);
+  const send = (0, import_cris_webui_ch5_core10.useCustomObjectSend)();
   injectScrollbarStyle();
   if (!matrix) return null;
   const { si, ip: inputs, op: outputs } = matrix;
@@ -1887,27 +2028,27 @@ function CrisCoMatrixListsTie({
   const handleToggleVideoMute = (type, id) => {
     send(oid, { action: "toggleVideoMute", type, id });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className,
-      style: className ? style : { ...defaults2.container, ...style },
+      style: className ? style : { ...defaults3.container, ...style },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults2.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults3.list, ...listStyle },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults3.header, ...headerStyle },
                   children: inputTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "cris-co-matrix-scroll", style: defaults2.scroll, children: inputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cris-co-matrix-scroll", style: defaults3.scroll, children: inputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 MatrixItemRow,
                 {
                   item,
@@ -1932,21 +2073,21 @@ function CrisCoMatrixListsTie({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults2.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults3.list, ...listStyle },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults3.header, ...headerStyle },
                   children: outputTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "cris-co-matrix-scroll", style: defaults2.scroll, children: outputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cris-co-matrix-scroll", style: defaults3.scroll, children: outputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 MatrixItemRow,
                 {
                   item,
@@ -1986,6 +2127,7 @@ function CrisCoMatrixListsTie({
   CrisSlider,
   CrisSpinner,
   CrisText,
+  CrisTextInput,
   configureIcons,
   getIconConfig,
   getIconFilter,