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

package/dist/index.mjs

@@ -1122,9 +1122,149 @@ function CrisOfflinePage({
   ] }) });
 }
 
+// src/components/CrisTextInput.tsx
+import { useState as useState4, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useDigital as useDigital6, useSerial as useSerial2, useJoinsStore as useJoinsStore3 } from "@imperosoft/cris-webui-ch5-core";
+import { jsx as jsx7 } from "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 = true,
+  clearOnSubmit = false,
+  className,
+  style,
+  inputClassName,
+  inputStyle,
+  classDisabled,
+  classFocused: classFocusedProp
+}) {
+  const feedbackJoin = joinFeedback ?? join;
+  const feedback = useSerial2(feedbackJoin);
+  const enabled = useDigital6(joinEnable ?? 0);
+  const visible = useDigital6(joinVisible ?? 0);
+  const sSet = useJoinsStore3((state) => state.sSet);
+  const isEnabled = joinEnable == null ? true : enabled;
+  const isVisible = joinVisible == null ? true : visible;
+  const [localValue, setLocalValue] = useState4("");
+  const [isFocused, setIsFocused] = useState4(false);
+  const inputRef = useRef3(null);
+  useEffect4(() => {
+    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__ */ jsx7("div", { className: containerClasses, style: containerStyle, children: /* @__PURE__ */ jsx7(
+    "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
 import { useCustomObject, useCustomObjectSend } from "@imperosoft/cris-webui-ch5-core";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultStyles = {
   container: {
     display: "flex",
@@ -1184,7 +1324,7 @@ var defaultStyles = {
 };
 function ConnectionIcon({ on, type }) {
   const label = type === "eth" ? "ETH" : "RS";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       style: {
@@ -1193,11 +1333,11 @@ function ConnectionIcon({ on, type }) {
       },
       title: `${type === "eth" ? "Ethernet" : "RS232"}: ${on ? "Connected" : "Disconnected"}`,
       children: /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: [
-        /* @__PURE__ */ jsx7("rect", { x: "1", y: "4", width: "18", height: "12", rx: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx7("text", { x: "10", y: "12.5", textAnchor: "middle", fontSize: "7", fontWeight: "bold", fill: "currentColor", children: label }),
-        on ? /* @__PURE__ */ jsx7("circle", { cx: "16", cy: "5", r: "3.5", fill: "#4caf50", stroke: "none" }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          /* @__PURE__ */ jsx7("circle", { cx: "16", cy: "5", r: "3.5", fill: "#f44336", stroke: "none" }),
-          /* @__PURE__ */ jsx7("line", { x1: "14", y1: "3", x2: "18", y2: "7", stroke: "white", strokeWidth: "1.5" })
+        /* @__PURE__ */ jsx8("rect", { x: "1", y: "4", width: "18", height: "12", rx: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx8("text", { x: "10", y: "12.5", textAnchor: "middle", fontSize: "7", fontWeight: "bold", fill: "currentColor", children: label }),
+        on ? /* @__PURE__ */ jsx8("circle", { cx: "16", cy: "5", r: "3.5", fill: "#4caf50", stroke: "none" }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx8("circle", { cx: "16", cy: "5", r: "3.5", fill: "#f44336", stroke: "none" }),
+          /* @__PURE__ */ jsx8("line", { x1: "14", y1: "3", x2: "18", y2: "7", stroke: "white", strokeWidth: "1.5" })
         ] })
       ] })
     }
@@ -1223,15 +1363,15 @@ function DebugModuleItem({
       style: itemClassName ? itemStyle : { ...defaultStyles.item, ...itemStyle },
       children: [
         /* @__PURE__ */ jsxs6("div", { style: defaultStyles.info, children: [
-          /* @__PURE__ */ jsx7("div", { style: defaultStyles.moduleName, children: name }),
-          /* @__PURE__ */ jsx7("div", { style: defaultStyles.moduleType, children: module.tp })
+          /* @__PURE__ */ jsx8("div", { style: defaultStyles.moduleName, children: name }),
+          /* @__PURE__ */ jsx8("div", { style: defaultStyles.moduleType, children: module.tp })
         ] }),
         /* @__PURE__ */ jsxs6("div", { style: defaultStyles.icons, children: [
-          module.et.vs && (iconEthOn && iconEthOff ? module.et.on ? iconEthOn : iconEthOff : /* @__PURE__ */ jsx7(ConnectionIcon, { on: module.et.on, type: "eth" })),
-          module.rs.vs && (iconRs232On && iconRs232Off ? module.rs.on ? iconRs232On : iconRs232Off : /* @__PURE__ */ jsx7(ConnectionIcon, { on: module.rs.on, type: "rs232" }))
+          module.et.vs && (iconEthOn && iconEthOff ? module.et.on ? iconEthOn : iconEthOff : /* @__PURE__ */ jsx8(ConnectionIcon, { on: module.et.on, type: "eth" })),
+          module.rs.vs && (iconRs232On && iconRs232Off ? module.rs.on ? iconRs232On : iconRs232Off : /* @__PURE__ */ jsx8(ConnectionIcon, { on: module.rs.on, type: "rs232" }))
         ] }),
         /* @__PURE__ */ jsxs6("div", { style: defaultStyles.buttons, children: [
-          module.md.vs && /* @__PURE__ */ jsx7(
+          module.md.vs && /* @__PURE__ */ jsx8(
             CrisButton,
             {
               selected: module.md.on,
@@ -1241,7 +1381,7 @@ function DebugModuleItem({
               onPress: () => onAction("toggleMod", module.id)
             }
           ),
-          module.cm.vs && /* @__PURE__ */ jsx7(
+          module.cm.vs && /* @__PURE__ */ jsx8(
             CrisButton,
             {
               selected: module.cm.on,
@@ -1285,8 +1425,8 @@ function CrisCoDebug({
       className,
       style: className ? style : { ...defaultStyles.container, ...style },
       children: [
-        title && /* @__PURE__ */ jsx7("div", { style: defaultStyles.title, children: title }),
-        visibleModules.map((module) => /* @__PURE__ */ jsx7(
+        title && /* @__PURE__ */ jsx8("div", { style: defaultStyles.title, children: title }),
+        visibleModules.map((module) => /* @__PURE__ */ jsx8(
           DebugModuleItem,
           {
             module,
@@ -1309,14 +1449,14 @@ function CrisCoDebug({
 
 // src/components/CrisCoList.tsx
 import { useCustomObject as useCustomObject2, useCustomObjectSend as useCustomObjectSend2 } from "@imperosoft/cris-webui-ch5-core";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var colors = {
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var colors2 = {
   itemBg: "#4f5152",
   itemActiveBg: "#007ca0",
   text: "#ffffff",
   headerText: "#6b7280"
 };
-var defaults = {
+var defaults2 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -1332,7 +1472,7 @@ var defaults = {
     padding: "0.5rem 0.75rem",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    color: colors.headerText,
+    color: colors2.headerText,
     flexShrink: 0,
     textAlign: "center"
   },
@@ -1352,12 +1492,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,
@@ -1367,7 +1507,7 @@ var defaults = {
     background: "transparent",
     border: "none",
     textAlign: "left",
-    color: colors.text,
+    color: colors2.text,
     height: "100%",
     borderRadius: "0.5rem",
     cursor: "pointer"
@@ -1395,7 +1535,7 @@ var defaults = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: colors.text
+    color: colors2.text
   }
 };
 var INJECTED_CSS = `
@@ -1432,13 +1572,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__ */ jsx8("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ jsx8("div", { style: defaults.itemBtn, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ jsx9("div", { style: defaults2.itemBtn, children: /* @__PURE__ */ jsx9(
       CrisButton,
       {
         selected,
@@ -1447,7 +1587,7 @@ function ListItemRow({
         showLocalFeedback: false,
         children: renderItem(item, selected, settings)
       }
-    ) }) : /* @__PURE__ */ jsx8(
+    ) }) : /* @__PURE__ */ jsx9(
       CrisButton,
       {
         selected,
@@ -1459,19 +1599,19 @@ function ListItemRow({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx8("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ jsx8("div", { style: defaults.itemBtn, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ jsx9("div", { style: defaults2.itemBtn, children: /* @__PURE__ */ jsx9(
     CrisButton,
     {
       selected,
       enabled: isEnabled,
       onPress: onSelect,
       showLocalFeedback: false,
-      children: /* @__PURE__ */ jsxs7("div", { style: defaults.itemBtnInner, children: [
-        showIds && /* @__PURE__ */ jsx8("span", { className: "cris-co-list-id", style: defaults.idNum, children: item.id }),
-        /* @__PURE__ */ jsx8("span", { style: defaults.itemLabel, children: item.lb || `Item ${item.id}` })
+      children: /* @__PURE__ */ jsxs7("div", { style: defaults2.itemBtnInner, children: [
+        showIds && /* @__PURE__ */ jsx9("span", { className: "cris-co-list-id", style: defaults2.idNum, children: item.id }),
+        /* @__PURE__ */ jsx9("span", { style: defaults2.itemLabel, children: item.lb || `Item ${item.id}` })
       ] })
     }
-  ) }) : /* @__PURE__ */ jsx8(
+  ) }) : /* @__PURE__ */ jsx9(
     CrisButton,
     {
       selected,
@@ -1480,8 +1620,8 @@ function ListItemRow({
       className: `cris-co-list-item-btn ${itemActiveClassName ?? ""}`,
       classActive: itemActiveClassName,
       children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
-        showIds && /* @__PURE__ */ jsx8("span", { className: "cris-co-list-id", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
-        /* @__PURE__ */ jsx8("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `Item ${item.id}` })
+        showIds && /* @__PURE__ */ jsx9("span", { className: "cris-co-list-id", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
+        /* @__PURE__ */ jsx9("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `Item ${item.id}` })
       ] })
     }
   ) });
@@ -1515,17 +1655,17 @@ function CrisCoList({
     "div",
     {
       className,
-      style: className ? style : { ...defaults.container, ...style },
+      style: className ? style : { ...defaults2.container, ...style },
       children: [
-        title && /* @__PURE__ */ jsx8(
+        title && /* @__PURE__ */ jsx9(
           "div",
           {
             className: headerClassName,
-            style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+            style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
             children: title
           }
         ),
-        /* @__PURE__ */ jsx8("div", { className: "cris-co-list-scroll", style: defaults.scroll, children: visibleItems?.map((item) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("div", { className: "cris-co-list-scroll", style: defaults2.scroll, children: visibleItems?.map((item) => /* @__PURE__ */ jsx9(
           ListItemRow,
           {
             item,
@@ -1549,8 +1689,8 @@ function CrisCoList({
 
 // src/components/CrisCoMatrixListsTie.tsx
 import { useCustomObject as useCustomObject3, useCustomObjectSend as useCustomObjectSend3 } from "@imperosoft/cris-webui-ch5-core";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var colors2 = {
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var colors3 = {
   itemBg: "#4f5152",
   itemActiveBg: "#007ca0",
   vmActiveBg: "#dc2626",
@@ -1561,7 +1701,7 @@ var colors2 = {
   sgOn: "#2196f3",
   sgOff: "#666666"
 };
-var defaults2 = {
+var defaults3 = {
   container: {
     display: "flex",
     flexDirection: "row",
@@ -1583,7 +1723,7 @@ var defaults2 = {
     padding: "0.5rem 0.75rem",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    color: colors2.headerText,
+    color: colors3.headerText,
     flexShrink: 0,
     textAlign: "center"
   },
@@ -1605,12 +1745,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,
@@ -1620,7 +1760,7 @@ var defaults2 = {
     background: "transparent",
     border: "none",
     textAlign: "left",
-    color: colors2.text,
+    color: colors3.text,
     height: "100%",
     borderRadius: "0.5rem",
     cursor: "pointer"
@@ -1648,7 +1788,7 @@ var defaults2 = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: colors2.text
+    color: colors3.text
   },
   indicators: {
     display: "flex",
@@ -1666,8 +1806,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",
@@ -1678,8 +1818,8 @@ var defaults2 = {
     transition: "background 0.15s"
   },
   vmBtnActive: {
-    background: colors2.vmActiveBg,
-    color: colors2.text
+    background: colors3.vmActiveBg,
+    color: colors3.text
   }
 };
 var INJECTED_CSS2 = `
@@ -1695,24 +1835,24 @@ function injectScrollbarStyle() {
   document.head.appendChild(style);
 }
 function DefaultIoIndicator({ on }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "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__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       style: {
-        ...defaults2.indicator,
-        backgroundColor: on ? colors2.sgOn : colors2.sgOff
+        ...defaults3.indicator,
+        backgroundColor: on ? colors3.sgOn : colors3.sgOff
       },
       title: on ? "Signal detected" : "No signal"
     }
@@ -1746,29 +1886,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__ */ jsxs8("div", { className: classes, style: computedStyle, children: [
-    useDefaults ? /* @__PURE__ */ jsx9("div", { style: defaults2.itemBtn, children: /* @__PURE__ */ jsx9(
+    useDefaults ? /* @__PURE__ */ jsx10("div", { style: defaults3.itemBtn, children: /* @__PURE__ */ jsx10(
       CrisButton,
       {
         selected: isActive,
         enabled: isEnabled,
         onPress: onSelect,
         showLocalFeedback: false,
-        children: /* @__PURE__ */ jsxs8("div", { style: defaults2.itemBtnInner, children: [
-          showChannels && /* @__PURE__ */ jsx9("span", { className: "cris-co-matrix-ch", style: defaults2.channelNum, children: item.id }),
-          /* @__PURE__ */ jsx9("span", { style: defaults2.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ jsxs8("div", { style: defaults2.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx9(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx9(DefaultSignalIndicator, { on: item.sg.on }))
+        children: /* @__PURE__ */ jsxs8("div", { style: defaults3.itemBtnInner, children: [
+          showChannels && /* @__PURE__ */ jsx10("span", { className: "cris-co-matrix-ch", style: defaults3.channelNum, children: item.id }),
+          /* @__PURE__ */ jsx10("span", { style: defaults3.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
+          /* @__PURE__ */ jsxs8("div", { style: defaults3.indicators, children: [
+            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx10(DefaultIoIndicator, { on: item.io.on })),
+            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx10(DefaultSignalIndicator, { on: item.sg.on }))
           ] })
         ] })
       }
-    ) }) : /* @__PURE__ */ jsx9(
+    ) }) : /* @__PURE__ */ jsx10(
       CrisButton,
       {
         selected: isActive,
@@ -1777,21 +1917,21 @@ function MatrixItemRow({
         className: `cris-co-matrix-item-btn ${itemActiveClassName ?? ""}`,
         classActive: itemActiveClassName,
         children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
-          showChannels && /* @__PURE__ */ jsx9("span", { className: "cris-co-matrix-ch", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
-          /* @__PURE__ */ jsx9("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ jsxs8("div", { style: defaults2.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx9(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx9(DefaultSignalIndicator, { on: item.sg.on }))
+          showChannels && /* @__PURE__ */ jsx10("span", { className: "cris-co-matrix-ch", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
+          /* @__PURE__ */ jsx10("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
+          /* @__PURE__ */ jsxs8("div", { style: defaults3.indicators, children: [
+            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx10(DefaultIoIndicator, { on: item.io.on })),
+            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx10(DefaultSignalIndicator, { on: item.sg.on }))
           ] })
         ] })
       }
     ),
-    item.vm.vs && (useDefaults && !vmButtonClassName ? /* @__PURE__ */ jsx9("div", { style: {
-      ...defaults2.vmBtn,
-      ...item.vm.on ? defaults2.vmBtnActive : void 0,
+    item.vm.vs && (useDefaults && !vmButtonClassName ? /* @__PURE__ */ jsx10("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__ */ jsx9(
+    }, children: /* @__PURE__ */ jsx10(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1800,7 +1940,7 @@ function MatrixItemRow({
         onPress: onToggleVideoMute,
         showLocalFeedback: false
       }
-    ) }) : /* @__PURE__ */ jsx9(
+    ) }) : /* @__PURE__ */ jsx10(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1853,23 +1993,23 @@ function CrisCoMatrixListsTie({
     "div",
     {
       className,
-      style: className ? style : { ...defaults2.container, ...style },
+      style: className ? style : { ...defaults3.container, ...style },
       children: [
         /* @__PURE__ */ jsxs8(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults2.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults3.list, ...listStyle },
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults3.header, ...headerStyle },
                   children: inputTitle
                 }
               ),
-              /* @__PURE__ */ jsx9("div", { className: "cris-co-matrix-scroll", style: defaults2.scroll, children: inputs?.map((item) => /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("div", { className: "cris-co-matrix-scroll", style: defaults3.scroll, children: inputs?.map((item) => /* @__PURE__ */ jsx10(
                 MatrixItemRow,
                 {
                   item,
@@ -1898,17 +2038,17 @@ function CrisCoMatrixListsTie({
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults2.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults3.list, ...listStyle },
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults3.header, ...headerStyle },
                   children: outputTitle
                 }
               ),
-              /* @__PURE__ */ jsx9("div", { className: "cris-co-matrix-scroll", style: defaults2.scroll, children: outputs?.map((item) => /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("div", { className: "cris-co-matrix-scroll", style: defaults3.scroll, children: outputs?.map((item) => /* @__PURE__ */ jsx10(
                 MatrixItemRow,
                 {
                   item,
@@ -1947,6 +2087,7 @@ export {
   CrisSlider,
   CrisSpinner,
   CrisText,
+  CrisTextInput,
   configureIcons,
   getIconConfig,
   getIconFilter,