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

package/dist/index.js

@@ -22,12 +22,14 @@ var index_exports = {};
 __export(index_exports, {
   CrisButton: () => CrisButton,
   CrisCoDebug: () => CrisCoDebug,
+  CrisCoList: () => CrisCoList,
   CrisCoMatrixListsTie: () => CrisCoMatrixListsTie,
   CrisGauge: () => CrisGauge,
   CrisOfflinePage: () => CrisOfflinePage,
   CrisSlider: () => CrisSlider,
   CrisSpinner: () => CrisSpinner,
   CrisText: () => CrisText,
+  CrisTextInput: () => CrisTextInput,
   configureIcons: () => configureIcons,
   getIconConfig: () => getIconConfig,
   getIconFilter: () => getIconFilter,
@@ -1159,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",
@@ -1221,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: {
@@ -1229,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" })
         ] })
       ] })
     }
@@ -1253,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,
@@ -1278,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,
@@ -1307,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 });
   };
@@ -1316,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,
@@ -1344,10 +1486,250 @@ function CrisCoDebug({
   );
 }
 
+// src/components/CrisCoList.tsx
+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 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__ */ (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: renderItem(item, selected, settings)
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      CrisButton,
+      {
+        selected,
+        enabled: isEnabled,
+        onPress: onSelect,
+        className: `cris-co-list-item-btn ${itemActiveClassName ?? ""}`,
+        classActive: itemActiveClassName,
+        children: renderItem(item, selected, settings)
+      }
+    ) });
+  }
+  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_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_runtime9.jsx)(
+    CrisButton,
+    {
+      selected,
+      enabled: isEnabled,
+      onPress: onSelect,
+      className: `cris-co-list-item-btn ${itemActiveClassName ?? ""}`,
+      classActive: itemActiveClassName,
+      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}` })
+      ] })
+    }
+  ) });
+}
+function CrisCoList({
+  oid,
+  title,
+  showIds = true,
+  selectAction = "select",
+  renderItem,
+  className,
+  style,
+  headerClassName,
+  headerStyle,
+  itemClassName,
+  itemStyle,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName
+}) {
+  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;
+  const visibleItems = items?.filter((item) => item.vs !== false);
+  const handleSelect = (id) => {
+    send(oid, { action: selectAction, id });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className,
+      style: className ? style : { ...defaults2.container, ...style },
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            className: headerClassName,
+            style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
+            children: title
+          }
+        ),
+        /* @__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,
+            selected: si === item.id,
+            showIds,
+            settings,
+            onSelect: () => handleSelect(item.id),
+            renderItem,
+            itemClassName,
+            itemStyle,
+            itemActiveClassName,
+            itemActiveStyle,
+            itemDisabledClassName
+          },
+          item.id
+        )) })
+      ]
+    }
+  );
+}
+
 // src/components/CrisCoMatrixListsTie.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_core10 = require("@imperosoft/cris-webui-ch5-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var colors3 = {
   itemBg: "#4f5152",
   itemActiveBg: "#007ca0",
   vmActiveBg: "#dc2626",
@@ -1358,7 +1740,7 @@ var colors = {
   sgOn: "#2196f3",
   sgOff: "#666666"
 };
-var defaults = {
+var defaults3 = {
   container: {
     display: "flex",
     flexDirection: "row",
@@ -1380,7 +1762,7 @@ var defaults = {
     padding: "0.5rem 0.75rem",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    color: colors.headerText,
+    color: colors3.headerText,
     flexShrink: 0,
     textAlign: "center"
   },
@@ -1402,12 +1784,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,
@@ -1417,7 +1799,7 @@ var defaults = {
     background: "transparent",
     border: "none",
     textAlign: "left",
-    color: colors.text,
+    color: colors3.text,
     height: "100%",
     borderRadius: "0.5rem",
     cursor: "pointer"
@@ -1445,7 +1827,7 @@ var defaults = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: colors.text
+    color: colors3.text
   },
   indicators: {
     display: "flex",
@@ -1463,8 +1845,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",
@@ -1475,11 +1857,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%; }
 `;
@@ -1488,28 +1870,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__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "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__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       style: {
-        ...defaults.indicator,
-        backgroundColor: on ? colors.sgOn : colors.sgOff
+        ...defaults3.indicator,
+        backgroundColor: on ? colors3.sgOn : colors3.sgOff
       },
       title: on ? "Signal detected" : "No signal"
     }
@@ -1543,29 +1925,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__ */ (0, import_jsx_runtime8.jsxs)("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_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_runtime8.jsxs)("div", { style: defaults.itemBtnInner, children: [
-          showChannels && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cris-co-matrix-ch", style: defaults.channelNum, children: item.id }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: defaults.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: defaults.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CrisButton,
       {
         selected: isActive,
@@ -1573,22 +1955,22 @@ function MatrixItemRow({
         onPress: onSelect,
         className: `cris-co-matrix-item-btn ${itemActiveClassName ?? ""}`,
         classActive: itemActiveClassName,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
-          showChannels && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cris-co-matrix-ch", 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 || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: defaults.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("div", { style: {
-      ...defaults.vmBtn,
-      ...item.vm.on ? defaults.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_runtime8.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1597,7 +1979,7 @@ function MatrixItemRow({
         onPress: onToggleVideoMute,
         showLocalFeedback: false
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1632,8 +2014,8 @@ function CrisCoMatrixListsTie({
   renderIoIndicator,
   renderSignalIndicator
 }) {
-  const matrix = (0, import_cris_webui_ch5_core8.useCustomObject)(oid);
-  const send = (0, import_cris_webui_ch5_core8.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;
@@ -1646,27 +2028,27 @@ function CrisCoMatrixListsTie({
   const handleToggleVideoMute = (type, id) => {
     send(oid, { action: "toggleVideoMute", type, id });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className,
-      style: className ? style : { ...defaults.container, ...style },
+      style: className ? style : { ...defaults3.container, ...style },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults3.list, ...listStyle },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults3.header, ...headerStyle },
                   children: inputTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cris-co-matrix-scroll", style: defaults.scroll, children: inputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.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,
@@ -1691,21 +2073,21 @@ function CrisCoMatrixListsTie({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults3.list, ...listStyle },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults3.header, ...headerStyle },
                   children: outputTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cris-co-matrix-scroll", style: defaults.scroll, children: outputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.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,
@@ -1738,12 +2120,14 @@ function CrisCoMatrixListsTie({
 0 && (module.exports = {
   CrisButton,
   CrisCoDebug,
+  CrisCoList,
   CrisCoMatrixListsTie,
   CrisGauge,
   CrisOfflinePage,
   CrisSlider,
   CrisSpinner,
   CrisText,
+  CrisTextInput,
   configureIcons,
   getIconConfig,
   getIconFilter,