@imperosoft/cris-webui-components 1.1.2-beta.2 → 1.1.2-beta.20

package/dist/index.d.mts

@@ -314,6 +314,83 @@ interface CrisCoDebugProps {
 }
 declare function CrisCoDebug({ oid, title, className, style, itemClassName, itemStyle, buttonClassName, buttonActiveClassName, iconEthOn, iconEthOff, iconRs232On, iconRs232Off, }: CrisCoDebugProps): react_jsx_runtime.JSX.Element | null;
 
+/** Shape of an input or output item from the backend */
+interface MatrixItem {
+    id: number;
+    lb: string;
+    gp: number;
+    /** Selection state: en=enabled, vs=visible */
+    sl: {
+        en: boolean;
+        vs: boolean;
+    };
+    /** Tied input id (outputs only) — which input is routed to this output */
+    ti?: number;
+    io: {
+        on: boolean;
+        vs: boolean;
+    };
+    sg: {
+        on: boolean;
+        vs: boolean;
+    };
+    vm: {
+        on: boolean;
+        en: boolean;
+        vs: boolean;
+    };
+}
+/** Shape of the matrix status from the backend */
+interface MatrixStatus {
+    /** Selected input id (exclusive selection) */
+    si: number;
+    ip: MatrixItem[];
+    op: MatrixItem[];
+}
+interface CrisCoMatrixListsTieProps {
+    /** Custom object ID (e.g., "MTX1_VID") */
+    oid: string;
+    /** Input list title */
+    inputTitle?: string;
+    /** Output list title */
+    outputTitle?: string;
+    /** Container className */
+    className?: string;
+    /** Container style */
+    style?: CSSProperties;
+    /** List column className */
+    listClassName?: string;
+    /** List column style */
+    listStyle?: CSSProperties;
+    /** List header className */
+    headerClassName?: string;
+    /** List header style */
+    headerStyle?: CSSProperties;
+    /** Item className */
+    itemClassName?: string;
+    /** Item style */
+    itemStyle?: CSSProperties;
+    /** Item active (selected/tied) className */
+    itemActiveClassName?: string;
+    /** Item active style */
+    itemActiveStyle?: CSSProperties;
+    /** Item disabled className */
+    itemDisabledClassName?: string;
+    /** Video mute button text (default: "Mute") */
+    vmText?: string;
+    /** Video mute button className */
+    vmButtonClassName?: string;
+    /** Video mute button active className */
+    vmButtonActiveClassName?: string;
+    /** Show channel number prefix before label (default: true) */
+    showChannels?: boolean;
+    /** Custom render for I/O online indicator */
+    renderIoIndicator?: (on: boolean) => ReactNode;
+    /** Custom render for signal indicator */
+    renderSignalIndicator?: (on: boolean) => ReactNode;
+}
+declare function CrisCoMatrixListsTie({ oid, inputTitle, outputTitle, showChannels, className, style, listClassName, listStyle, headerClassName, headerStyle, itemClassName, itemStyle, itemActiveClassName, itemActiveStyle, itemDisabledClassName, vmText, vmButtonClassName, vmButtonActiveClassName, renderIoIndicator, renderSignalIndicator, }: CrisCoMatrixListsTieProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Icon configuration and utilities for CRIS components
  *
@@ -364,4 +441,4 @@ declare function getIconUrl(name: string): string;
  */
 declare function getIconFilter(active: boolean): string | undefined;
 
-export { CrisButton, type CrisButtonProps, CrisCoDebug, type CrisCoDebugProps, CrisGauge, type CrisGaugeProps, CrisOfflinePage, type CrisOfflinePageProps, CrisSlider, type CrisSliderProps, CrisSpinner, type CrisSpinnerProps, CrisText, type CrisTextProps, type DebugModule, type IconConfig, type SpinnerSpeed, configureIcons, getIconConfig, getIconFilter, getIconUrl };
+export { CrisButton, type CrisButtonProps, CrisCoDebug, type CrisCoDebugProps, CrisCoMatrixListsTie, type CrisCoMatrixListsTieProps, CrisGauge, type CrisGaugeProps, CrisOfflinePage, type CrisOfflinePageProps, CrisSlider, type CrisSliderProps, CrisSpinner, type CrisSpinnerProps, CrisText, type CrisTextProps, type DebugModule, type IconConfig, type MatrixItem, type MatrixStatus, type SpinnerSpeed, configureIcons, getIconConfig, getIconFilter, getIconUrl };

package/dist/index.d.ts

@@ -314,6 +314,83 @@ interface CrisCoDebugProps {
 }
 declare function CrisCoDebug({ oid, title, className, style, itemClassName, itemStyle, buttonClassName, buttonActiveClassName, iconEthOn, iconEthOff, iconRs232On, iconRs232Off, }: CrisCoDebugProps): react_jsx_runtime.JSX.Element | null;
 
+/** Shape of an input or output item from the backend */
+interface MatrixItem {
+    id: number;
+    lb: string;
+    gp: number;
+    /** Selection state: en=enabled, vs=visible */
+    sl: {
+        en: boolean;
+        vs: boolean;
+    };
+    /** Tied input id (outputs only) — which input is routed to this output */
+    ti?: number;
+    io: {
+        on: boolean;
+        vs: boolean;
+    };
+    sg: {
+        on: boolean;
+        vs: boolean;
+    };
+    vm: {
+        on: boolean;
+        en: boolean;
+        vs: boolean;
+    };
+}
+/** Shape of the matrix status from the backend */
+interface MatrixStatus {
+    /** Selected input id (exclusive selection) */
+    si: number;
+    ip: MatrixItem[];
+    op: MatrixItem[];
+}
+interface CrisCoMatrixListsTieProps {
+    /** Custom object ID (e.g., "MTX1_VID") */
+    oid: string;
+    /** Input list title */
+    inputTitle?: string;
+    /** Output list title */
+    outputTitle?: string;
+    /** Container className */
+    className?: string;
+    /** Container style */
+    style?: CSSProperties;
+    /** List column className */
+    listClassName?: string;
+    /** List column style */
+    listStyle?: CSSProperties;
+    /** List header className */
+    headerClassName?: string;
+    /** List header style */
+    headerStyle?: CSSProperties;
+    /** Item className */
+    itemClassName?: string;
+    /** Item style */
+    itemStyle?: CSSProperties;
+    /** Item active (selected/tied) className */
+    itemActiveClassName?: string;
+    /** Item active style */
+    itemActiveStyle?: CSSProperties;
+    /** Item disabled className */
+    itemDisabledClassName?: string;
+    /** Video mute button text (default: "Mute") */
+    vmText?: string;
+    /** Video mute button className */
+    vmButtonClassName?: string;
+    /** Video mute button active className */
+    vmButtonActiveClassName?: string;
+    /** Show channel number prefix before label (default: true) */
+    showChannels?: boolean;
+    /** Custom render for I/O online indicator */
+    renderIoIndicator?: (on: boolean) => ReactNode;
+    /** Custom render for signal indicator */
+    renderSignalIndicator?: (on: boolean) => ReactNode;
+}
+declare function CrisCoMatrixListsTie({ oid, inputTitle, outputTitle, showChannels, className, style, listClassName, listStyle, headerClassName, headerStyle, itemClassName, itemStyle, itemActiveClassName, itemActiveStyle, itemDisabledClassName, vmText, vmButtonClassName, vmButtonActiveClassName, renderIoIndicator, renderSignalIndicator, }: CrisCoMatrixListsTieProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Icon configuration and utilities for CRIS components
  *
@@ -364,4 +441,4 @@ declare function getIconUrl(name: string): string;
  */
 declare function getIconFilter(active: boolean): string | undefined;
 
-export { CrisButton, type CrisButtonProps, CrisCoDebug, type CrisCoDebugProps, CrisGauge, type CrisGaugeProps, CrisOfflinePage, type CrisOfflinePageProps, CrisSlider, type CrisSliderProps, CrisSpinner, type CrisSpinnerProps, CrisText, type CrisTextProps, type DebugModule, type IconConfig, type SpinnerSpeed, configureIcons, getIconConfig, getIconFilter, getIconUrl };
+export { CrisButton, type CrisButtonProps, CrisCoDebug, type CrisCoDebugProps, CrisCoMatrixListsTie, type CrisCoMatrixListsTieProps, CrisGauge, type CrisGaugeProps, CrisOfflinePage, type CrisOfflinePageProps, CrisSlider, type CrisSliderProps, CrisSpinner, type CrisSpinnerProps, CrisText, type CrisTextProps, type DebugModule, type IconConfig, type MatrixItem, type MatrixStatus, type SpinnerSpeed, configureIcons, getIconConfig, getIconFilter, getIconUrl };

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   CrisButton: () => CrisButton,
   CrisCoDebug: () => CrisCoDebug,
+  CrisCoMatrixListsTie: () => CrisCoMatrixListsTie,
   CrisGauge: () => CrisGauge,
   CrisOfflinePage: () => CrisOfflinePage,
   CrisSlider: () => CrisSlider,
@@ -136,6 +137,8 @@ function CrisButton({
   const pressedRef = (0, import_react.useRef)(false);
   const touchingRef = (0, import_react.useRef)(false);
   const touchStartedHereRef = (0, import_react.useRef)(false);
+  const touchStartYRef = (0, import_react.useRef)(0);
+  const touchMovedRef = (0, import_react.useRef)(false);
   const feedbackJoin = joinFeedback ?? join;
   const feedback = (0, import_cris_webui_ch5_core.useDigital)(feedbackJoin ?? 0);
   const enabledJoin = (0, import_cris_webui_ch5_core.useDigital)(joinEnable ?? 0);
@@ -218,30 +221,42 @@ function CrisButton({
       dSet(join, false);
     }
   };
-  const handleTouchStart = () => {
+  const SCROLL_THRESHOLD = 8;
+  const handleTouchStart = (e) => {
     log("handleTouchStart");
     touchStart();
     touchingRef.current = true;
     touchStartedHereRef.current = true;
-    handlePress();
+    touchMovedRef.current = false;
+    touchStartYRef.current = e.touches[0]?.clientY ?? 0;
+  };
+  const handleTouchMove = (e) => {
+    if (touchMovedRef.current) return;
+    const dy = Math.abs((e.touches[0]?.clientY ?? 0) - touchStartYRef.current);
+    if (dy > SCROLL_THRESHOLD) {
+      touchMovedRef.current = true;
+      log("touchMove: scroll detected, dy:", dy);
+    }
   };
   const handleTouchEnd = () => {
-    log("handleTouchEnd", { touchStartedHereRef: touchStartedHereRef.current });
+    log("handleTouchEnd", { touchStartedHere: touchStartedHereRef.current, moved: touchMovedRef.current });
     touchEnd();
     touchingRef.current = true;
-    if (touchStartedHereRef.current) {
+    if (touchStartedHereRef.current && !touchMovedRef.current) {
       touchStartedHereRef.current = false;
+      handlePress();
       handleRelease();
     } else {
-      log("SKIPPED handleRelease: touch did not start here");
+      touchStartedHereRef.current = false;
+      log("SKIPPED: touch moved or did not start here");
     }
   };
   const handleTouchCancel = () => {
-    log("handleTouchCancel");
+    log("handleTouchCancel (scroll detected)");
     touchEnd();
     touchingRef.current = true;
     touchStartedHereRef.current = false;
-    handleRelease();
+    touchMovedRef.current = false;
   };
   const handleMouseDown = () => {
     if (isTouchActive() || touchingRef.current) return;
@@ -342,7 +357,7 @@ function CrisButton({
         cursor: suppressKeyClicks ? "default" : "pointer",
         position: isFreePositioned ? void 0 : "relative",
         overflow: isFreePositioned ? void 0 : "hidden",
-        touchAction: "none",
+        touchAction: "pan-x pan-y",
         userSelect: "none",
         WebkitUserSelect: "none"
       },
@@ -350,6 +365,7 @@ function CrisButton({
       onMouseUp: handleMouseUp,
       onMouseLeave: handleMouseLeave,
       onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
       onTouchCancel: handleTouchCancel,
       children: [
@@ -1327,10 +1343,402 @@ function CrisCoDebug({
     }
   );
 }
+
+// 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 = {
+  itemBg: "#4f5152",
+  itemActiveBg: "#007ca0",
+  vmActiveBg: "#dc2626",
+  text: "#ffffff",
+  headerText: "#6b7280",
+  ioOn: "#4caf50",
+  ioOff: "#f44336",
+  sgOn: "#2196f3",
+  sgOff: "#666666"
+};
+var defaults = {
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "1.5rem",
+    padding: "1rem 2rem",
+    height: "100%",
+    width: "100%"
+  },
+  list: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    minHeight: 0
+  },
+  header: {
+    fontSize: "1.5em",
+    fontWeight: 700,
+    padding: "0.5rem 0.75rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    color: colors.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",
+    gap: "0.5rem",
+    padding: "0 0.4rem 0 0",
+    minHeight: "3.7rem",
+    cursor: "pointer",
+    userSelect: "none",
+    background: colors.itemBg,
+    borderRadius: "0.5rem",
+    transition: "background 0.15s"
+  },
+  itemActive: {
+    background: colors.itemActiveBg
+  },
+  itemBtn: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    alignItems: "stretch",
+    background: "transparent",
+    border: "none",
+    textAlign: "left",
+    color: colors.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"
+  },
+  channelNum: {
+    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: colors.text
+  },
+  indicators: {
+    display: "flex",
+    gap: "0.25rem",
+    alignItems: "center"
+  },
+  indicator: {
+    width: "1rem",
+    height: "1rem",
+    borderRadius: "50%",
+    flexShrink: 0
+  },
+  vmBtn: {
+    flexShrink: 0,
+    alignSelf: "stretch",
+    display: "flex",
+    alignItems: "center",
+    background: colors.itemBg,
+    color: colors.text,
+    border: "none",
+    borderRadius: "0.4rem",
+    padding: "0 0.6rem",
+    margin: "0.3rem 0.3rem 0.3rem 0",
+    fontSize: "0.85em",
+    fontWeight: 700,
+    cursor: "pointer",
+    transition: "background 0.15s"
+  },
+  vmBtnActive: {
+    background: colors.vmActiveBg,
+    color: colors.text
+  }
+};
+var INJECTED_CSS = `
+.cris-co-matrix-scroll::-webkit-scrollbar { display: none; }
+.cris-co-matrix-item > div:first-child > .cris-button { width: 100%; height: 100%; }
+`;
+var scrollbarStyleInjected = false;
+function injectScrollbarStyle() {
+  if (scrollbarStyleInjected) return;
+  scrollbarStyleInjected = true;
+  const style = document.createElement("style");
+  style.textContent = INJECTED_CSS;
+  document.head.appendChild(style);
+}
+function DefaultIoIndicator({ on }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      style: {
+        ...defaults.indicator,
+        backgroundColor: on ? colors.ioOn : colors.ioOff
+      },
+      title: on ? "Online" : "Offline"
+    }
+  );
+}
+function DefaultSignalIndicator({ on }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      style: {
+        ...defaults.indicator,
+        backgroundColor: on ? colors.sgOn : colors.sgOff
+      },
+      title: on ? "Signal detected" : "No signal"
+    }
+  );
+}
+function MatrixItemRow({
+  item,
+  type,
+  active,
+  showChannels,
+  vmText,
+  onSelect,
+  onToggleVideoMute,
+  itemClassName,
+  itemStyle: itemStyleProp,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName,
+  vmButtonClassName,
+  vmButtonActiveClassName,
+  renderIoIndicator,
+  renderSignalIndicator
+}) {
+  const isActive = active;
+  const isEnabled = item.sl.en;
+  const useDefaults = !itemClassName;
+  const classes = [
+    "cris-co-matrix-item",
+    itemClassName,
+    isActive && (itemActiveClassName || "active"),
+    !isEnabled && (itemDisabledClassName || "disabled")
+  ].filter(Boolean).join(" ");
+  const computedStyle = useDefaults ? {
+    ...defaults.item,
+    ...itemStyleProp,
+    ...isActive ? { ...defaults.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)(
+      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 }))
+          ] })
+        ] })
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CrisButton,
+      {
+        selected: isActive,
+        enabled: isEnabled,
+        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 }))
+          ] })
+        ] })
+      }
+    ),
+    item.vm.vs && (useDefaults && !vmButtonClassName ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+      ...defaults.vmBtn,
+      ...item.vm.on ? defaults.vmBtnActive : void 0,
+      opacity: item.vm.en ? 1 : 0.4,
+      pointerEvents: item.vm.en ? "auto" : "none"
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CrisButton,
+      {
+        selected: item.vm.on,
+        enabled: item.vm.en,
+        text: vmText,
+        onPress: onToggleVideoMute,
+        showLocalFeedback: false
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CrisButton,
+      {
+        selected: item.vm.on,
+        enabled: item.vm.en,
+        text: vmText,
+        onPress: onToggleVideoMute,
+        className: vmButtonClassName,
+        classActive: vmButtonActiveClassName
+      }
+    ))
+  ] });
+}
+function CrisCoMatrixListsTie({
+  oid,
+  inputTitle = "Inputs",
+  outputTitle = "Outputs",
+  showChannels = true,
+  className,
+  style,
+  listClassName,
+  listStyle,
+  headerClassName,
+  headerStyle,
+  itemClassName,
+  itemStyle,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName,
+  vmText = "Mute",
+  vmButtonClassName,
+  vmButtonActiveClassName,
+  renderIoIndicator,
+  renderSignalIndicator
+}) {
+  const matrix = (0, import_cris_webui_ch5_core8.useCustomObject)(oid);
+  const send = (0, import_cris_webui_ch5_core8.useCustomObjectSend)();
+  injectScrollbarStyle();
+  if (!matrix) return null;
+  const { si, ip: inputs, op: outputs } = matrix;
+  const handleSelectInput = (id) => {
+    send(oid, { action: "selectInput", id });
+  };
+  const handleTie = (id) => {
+    send(oid, { action: "tie", id });
+  };
+  const handleToggleVideoMute = (type, id) => {
+    send(oid, { action: "toggleVideoMute", type, id });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className,
+      style: className ? style : { ...defaults.container, ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: listClassName,
+            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  className: headerClassName,
+                  style: headerClassName ? headerStyle : { ...defaults.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)(
+                MatrixItemRow,
+                {
+                  item,
+                  type: "input",
+                  active: si === item.id,
+                  showChannels,
+                  vmText,
+                  onSelect: () => handleSelectInput(item.id),
+                  onToggleVideoMute: () => handleToggleVideoMute("input", item.id),
+                  itemClassName,
+                  itemStyle,
+                  itemActiveClassName,
+                  itemActiveStyle,
+                  itemDisabledClassName,
+                  vmButtonClassName,
+                  vmButtonActiveClassName,
+                  renderIoIndicator,
+                  renderSignalIndicator
+                },
+                item.id
+              )) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: listClassName,
+            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  className: headerClassName,
+                  style: headerClassName ? headerStyle : { ...defaults.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)(
+                MatrixItemRow,
+                {
+                  item,
+                  type: "output",
+                  active: item.ti === si,
+                  showChannels,
+                  vmText,
+                  onSelect: () => handleTie(item.id),
+                  onToggleVideoMute: () => handleToggleVideoMute("output", item.id),
+                  itemClassName,
+                  itemStyle,
+                  itemActiveClassName,
+                  itemActiveStyle,
+                  itemDisabledClassName,
+                  vmButtonClassName,
+                  vmButtonActiveClassName,
+                  renderIoIndicator,
+                  renderSignalIndicator
+                },
+                item.id
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CrisButton,
   CrisCoDebug,
+  CrisCoMatrixListsTie,
   CrisGauge,
   CrisOfflinePage,
   CrisSlider,