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

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 = false,
+  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,
@@ -1307,10 +1447,250 @@ function CrisCoDebug({
   );
 }
 
-// src/components/CrisCoMatrixListsTie.tsx
+// 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 defaults2 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    height: "100%",
+    width: "100%",
+    padding: "1rem 2rem",
+    minHeight: 0
+  },
+  header: {
+    fontSize: "1.5em",
+    fontWeight: 700,
+    padding: "0.5rem 0.75rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    color: colors2.headerText,
+    flexShrink: 0,
+    textAlign: "center"
+  },
+  scroll: {
+    flex: 1,
+    minHeight: 0,
+    overflow: "auto",
+    scrollbarWidth: "none",
+    WebkitOverflowScrolling: "touch",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.15rem"
+  },
+  item: {
+    display: "flex",
+    alignItems: "stretch",
+    minHeight: "3.7rem",
+    cursor: "pointer",
+    userSelect: "none",
+    background: colors2.itemBg,
+    borderRadius: "0.5rem",
+    transition: "background 0.15s"
+  },
+  itemActive: {
+    background: colors2.itemActiveBg
+  },
+  itemBtn: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    alignItems: "stretch",
+    background: "transparent",
+    border: "none",
+    textAlign: "left",
+    color: colors2.text,
+    height: "100%",
+    borderRadius: "0.5rem",
+    cursor: "pointer"
+  },
+  itemBtnInner: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.4rem",
+    width: "100%",
+    flex: 1,
+    padding: "0.5rem 0.9rem"
+  },
+  idNum: {
+    flexShrink: 0,
+    opacity: 0.6,
+    minWidth: "1.7em",
+    textAlign: "right",
+    fontWeight: 400,
+    marginRight: "0.4em"
+  },
+  itemLabel: {
+    flex: 1,
+    fontSize: "1.4em",
+    fontWeight: 700,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    color: colors2.text
+  }
+};
+var INJECTED_CSS = `
+.cris-co-list-scroll::-webkit-scrollbar { display: none; }
+.cris-co-list-item > div:first-child > .cris-button { width: 100%; height: 100%; }
+`;
+var styleInjected = false;
+function injectStyle() {
+  if (styleInjected) return;
+  styleInjected = true;
+  const style = document.createElement("style");
+  style.textContent = INJECTED_CSS;
+  document.head.appendChild(style);
+}
+function ListItemRow({
+  item,
+  selected,
+  showIds,
+  settings,
+  onSelect,
+  renderItem,
+  itemClassName,
+  itemStyle: itemStyleProp,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName
+}) {
+  const isEnabled = item.en !== false;
+  const useDefaults = !itemClassName;
+  const classes = [
+    "cris-co-list-item",
+    itemClassName,
+    selected && (itemActiveClassName || "active"),
+    !isEnabled && (itemDisabledClassName || "disabled")
+  ].filter(Boolean).join(" ");
+  const computedStyle = useDefaults ? {
+    ...defaults2.item,
+    ...itemStyleProp,
+    ...selected ? { ...defaults2.itemActive, ...itemActiveStyle } : void 0,
+    opacity: isEnabled ? 1 : 0.4
+  } : { ...itemStyleProp };
+  if (renderItem) {
+    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: renderItem(item, selected, settings)
+      }
+    ) }) : /* @__PURE__ */ jsx9(
+      CrisButton,
+      {
+        selected,
+        enabled: isEnabled,
+        onPress: onSelect,
+        className: `cris-co-list-item-btn ${itemActiveClassName ?? ""}`,
+        classActive: itemActiveClassName,
+        children: renderItem(item, selected, settings)
+      }
+    ) });
+  }
+  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: 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__ */ jsx9(
+    CrisButton,
+    {
+      selected,
+      enabled: isEnabled,
+      onPress: onSelect,
+      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__ */ 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}` })
+      ] })
+    }
+  ) });
+}
+function CrisCoList({
+  oid,
+  title,
+  showIds = true,
+  selectAction = "select",
+  renderItem,
+  className,
+  style,
+  headerClassName,
+  headerStyle,
+  itemClassName,
+  itemStyle,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName
+}) {
+  const list = useCustomObject2(oid);
+  const send = useCustomObjectSend2();
+  injectStyle();
+  if (!list) return null;
+  const { st: settings, si, it: items } = list;
+  const visibleItems = items?.filter((item) => item.vs !== false);
+  const handleSelect = (id) => {
+    send(oid, { action: selectAction, id });
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className,
+      style: className ? style : { ...defaults2.container, ...style },
+      children: [
+        title && /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: headerClassName,
+            style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx9("div", { className: "cris-co-list-scroll", style: defaults2.scroll, children: visibleItems?.map((item) => /* @__PURE__ */ jsx9(
+          ListItemRow,
+          {
+            item,
+            selected: si === item.id,
+            showIds,
+            settings,
+            onSelect: () => handleSelect(item.id),
+            renderItem,
+            itemClassName,
+            itemStyle,
+            itemActiveClassName,
+            itemActiveStyle,
+            itemDisabledClassName
+          },
+          item.id
+        )) })
+      ]
+    }
+  );
+}
+
+// src/components/CrisCoMatrixListsTie.tsx
+import { useCustomObject as useCustomObject3, useCustomObjectSend as useCustomObjectSend3 } from "@imperosoft/cris-webui-ch5-core";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var colors3 = {
   itemBg: "#4f5152",
   itemActiveBg: "#007ca0",
   vmActiveBg: "#dc2626",
@@ -1321,7 +1701,7 @@ var colors = {
   sgOn: "#2196f3",
   sgOff: "#666666"
 };
-var defaults = {
+var defaults3 = {
   container: {
     display: "flex",
     flexDirection: "row",
@@ -1343,7 +1723,7 @@ var defaults = {
     padding: "0.5rem 0.75rem",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    color: colors.headerText,
+    color: colors3.headerText,
     flexShrink: 0,
     textAlign: "center"
   },
@@ -1365,12 +1745,12 @@ var defaults = {
     minHeight: "3.7rem",
     cursor: "pointer",
     userSelect: "none",
-    background: colors.itemBg,
+    background: colors3.itemBg,
     borderRadius: "0.5rem",
     transition: "background 0.15s"
   },
   itemActive: {
-    background: colors.itemActiveBg
+    background: colors3.itemActiveBg
   },
   itemBtn: {
     flex: 1,
@@ -1380,7 +1760,7 @@ var defaults = {
     background: "transparent",
     border: "none",
     textAlign: "left",
-    color: colors.text,
+    color: colors3.text,
     height: "100%",
     borderRadius: "0.5rem",
     cursor: "pointer"
@@ -1408,7 +1788,7 @@ var defaults = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: colors.text
+    color: colors3.text
   },
   indicators: {
     display: "flex",
@@ -1426,8 +1806,8 @@ var defaults = {
     alignSelf: "stretch",
     display: "flex",
     alignItems: "center",
-    background: colors.itemBg,
-    color: colors.text,
+    background: colors3.itemBg,
+    color: colors3.text,
     border: "none",
     borderRadius: "0.4rem",
     padding: "0 0.6rem",
@@ -1438,11 +1818,11 @@ var defaults = {
     transition: "background 0.15s"
   },
   vmBtnActive: {
-    background: colors.vmActiveBg,
-    color: colors.text
+    background: colors3.vmActiveBg,
+    color: colors3.text
   }
 };
-var INJECTED_CSS = `
+var INJECTED_CSS2 = `
 .cris-co-matrix-scroll::-webkit-scrollbar { display: none; }
 .cris-co-matrix-item > div:first-child > .cris-button { width: 100%; height: 100%; }
 `;
@@ -1451,28 +1831,28 @@ function injectScrollbarStyle() {
   if (scrollbarStyleInjected) return;
   scrollbarStyleInjected = true;
   const style = document.createElement("style");
-  style.textContent = INJECTED_CSS;
+  style.textContent = INJECTED_CSS2;
   document.head.appendChild(style);
 }
 function DefaultIoIndicator({ on }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       style: {
-        ...defaults.indicator,
-        backgroundColor: on ? colors.ioOn : colors.ioOff
+        ...defaults3.indicator,
+        backgroundColor: on ? colors3.ioOn : colors3.ioOff
       },
       title: on ? "Online" : "Offline"
     }
   );
 }
 function DefaultSignalIndicator({ on }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       style: {
-        ...defaults.indicator,
-        backgroundColor: on ? colors.sgOn : colors.sgOff
+        ...defaults3.indicator,
+        backgroundColor: on ? colors3.sgOn : colors3.sgOff
       },
       title: on ? "Signal detected" : "No signal"
     }
@@ -1506,29 +1886,29 @@ function MatrixItemRow({
     !isEnabled && (itemDisabledClassName || "disabled")
   ].filter(Boolean).join(" ");
   const computedStyle = useDefaults ? {
-    ...defaults.item,
+    ...defaults3.item,
     ...itemStyleProp,
-    ...isActive ? { ...defaults.itemActive, ...itemActiveStyle } : void 0,
+    ...isActive ? { ...defaults3.itemActive, ...itemActiveStyle } : void 0,
     opacity: isEnabled ? 1 : 0.4
   } : { ...itemStyleProp };
-  return /* @__PURE__ */ jsxs7("div", { className: classes, style: computedStyle, children: [
-    useDefaults ? /* @__PURE__ */ jsx8("div", { style: defaults.itemBtn, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8("div", { className: classes, style: computedStyle, children: [
+    useDefaults ? /* @__PURE__ */ jsx10("div", { style: defaults3.itemBtn, children: /* @__PURE__ */ jsx10(
       CrisButton,
       {
         selected: isActive,
         enabled: isEnabled,
         onPress: onSelect,
         showLocalFeedback: false,
-        children: /* @__PURE__ */ jsxs7("div", { style: defaults.itemBtnInner, children: [
-          showChannels && /* @__PURE__ */ jsx8("span", { className: "cris-co-matrix-ch", style: defaults.channelNum, children: item.id }),
-          /* @__PURE__ */ jsx8("span", { style: defaults.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ jsxs7("div", { style: defaults.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx8(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx8(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__ */ jsx8(
+    ) }) : /* @__PURE__ */ jsx10(
       CrisButton,
       {
         selected: isActive,
@@ -1536,22 +1916,22 @@ function MatrixItemRow({
         onPress: onSelect,
         className: `cris-co-matrix-item-btn ${itemActiveClassName ?? ""}`,
         classActive: itemActiveClassName,
-        children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
-          showChannels && /* @__PURE__ */ jsx8("span", { className: "cris-co-matrix-ch", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
-          /* @__PURE__ */ jsx8("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ jsxs7("div", { style: defaults.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx8(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx8(DefaultSignalIndicator, { on: item.sg.on }))
+        children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
+          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__ */ jsx8("div", { style: {
-      ...defaults.vmBtn,
-      ...item.vm.on ? defaults.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__ */ jsx8(
+    }, children: /* @__PURE__ */ jsx10(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1560,7 +1940,7 @@ function MatrixItemRow({
         onPress: onToggleVideoMute,
         showLocalFeedback: false
       }
-    ) }) : /* @__PURE__ */ jsx8(
+    ) }) : /* @__PURE__ */ jsx10(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1595,8 +1975,8 @@ function CrisCoMatrixListsTie({
   renderIoIndicator,
   renderSignalIndicator
 }) {
-  const matrix = useCustomObject2(oid);
-  const send = useCustomObjectSend2();
+  const matrix = useCustomObject3(oid);
+  const send = useCustomObjectSend3();
   injectScrollbarStyle();
   if (!matrix) return null;
   const { si, ip: inputs, op: outputs } = matrix;
@@ -1609,27 +1989,27 @@ function CrisCoMatrixListsTie({
   const handleToggleVideoMute = (type, id) => {
     send(oid, { action: "toggleVideoMute", type, id });
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className,
-      style: className ? style : { ...defaults.container, ...style },
+      style: className ? style : { ...defaults3.container, ...style },
       children: [
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults3.list, ...listStyle },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults3.header, ...headerStyle },
                   children: inputTitle
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { className: "cris-co-matrix-scroll", style: defaults.scroll, children: inputs?.map((item) => /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10("div", { className: "cris-co-matrix-scroll", style: defaults3.scroll, children: inputs?.map((item) => /* @__PURE__ */ jsx10(
                 MatrixItemRow,
                 {
                   item,
@@ -1654,21 +2034,21 @@ function CrisCoMatrixListsTie({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults3.list, ...listStyle },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults3.header, ...headerStyle },
                   children: outputTitle
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { className: "cris-co-matrix-scroll", style: defaults.scroll, children: outputs?.map((item) => /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10("div", { className: "cris-co-matrix-scroll", style: defaults3.scroll, children: outputs?.map((item) => /* @__PURE__ */ jsx10(
                 MatrixItemRow,
                 {
                   item,
@@ -1700,12 +2080,14 @@ function CrisCoMatrixListsTie({
 export {
   CrisButton,
   CrisCoDebug,
+  CrisCoList,
   CrisCoMatrixListsTie,
   CrisGauge,
   CrisOfflinePage,
   CrisSlider,
   CrisSpinner,
   CrisText,
+  CrisTextInput,
   configureIcons,
   getIconConfig,
   getIconFilter,