@imperosoft/cris-webui-components 1.1.2-beta.8 → 1.1.2

package/dist/index.d.mts

@@ -319,11 +319,13 @@ interface MatrixItem {
     id: number;
     lb: string;
     gp: number;
+    /** Selection state: en=enabled, vs=visible */
     sl: {
-        on: boolean;
         en: boolean;
         vs: boolean;
     };
+    /** Tied input id (outputs only) — which input is routed to this output */
+    ti?: number;
     io: {
         on: boolean;
         vs: boolean;
@@ -340,6 +342,8 @@ interface MatrixItem {
 }
 /** Shape of the matrix status from the backend */
 interface MatrixStatus {
+    /** Selected input id (exclusive selection) */
+    si: number;
     ip: MatrixItem[];
     op: MatrixItem[];
 }
@@ -372,6 +376,8 @@ interface CrisCoMatrixListsTieProps {
     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 */
@@ -383,7 +389,7 @@ interface CrisCoMatrixListsTieProps {
     /** 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, vmButtonClassName, vmButtonActiveClassName, renderIoIndicator, renderSignalIndicator, }: CrisCoMatrixListsTieProps): react_jsx_runtime.JSX.Element | null;
+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

package/dist/index.d.ts

@@ -319,11 +319,13 @@ interface MatrixItem {
     id: number;
     lb: string;
     gp: number;
+    /** Selection state: en=enabled, vs=visible */
     sl: {
-        on: boolean;
         en: boolean;
         vs: boolean;
     };
+    /** Tied input id (outputs only) — which input is routed to this output */
+    ti?: number;
     io: {
         on: boolean;
         vs: boolean;
@@ -340,6 +342,8 @@ interface MatrixItem {
 }
 /** Shape of the matrix status from the backend */
 interface MatrixStatus {
+    /** Selected input id (exclusive selection) */
+    si: number;
     ip: MatrixItem[];
     op: MatrixItem[];
 }
@@ -372,6 +376,8 @@ interface CrisCoMatrixListsTieProps {
     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 */
@@ -383,7 +389,7 @@ interface CrisCoMatrixListsTieProps {
     /** 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, vmButtonClassName, vmButtonActiveClassName, renderIoIndicator, renderSignalIndicator, }: CrisCoMatrixListsTieProps): react_jsx_runtime.JSX.Element | null;
+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

package/dist/index.js

@@ -137,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);
@@ -219,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;
@@ -343,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"
       },
@@ -351,6 +365,7 @@ function CrisButton({
       onMouseUp: handleMouseUp,
       onMouseLeave: handleMouseLeave,
       onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
       onTouchCancel: handleTouchCancel,
       children: [
@@ -1332,12 +1347,25 @@ 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: 8,
-    height: "100%"
+    gap: "1.5rem",
+    padding: "1rem 2rem",
+    height: "100%",
+    width: "100%"
   },
   list: {
     flex: 1,
@@ -1347,57 +1375,129 @@ var defaults = {
     minHeight: 0
   },
   header: {
-    fontSize: 13,
-    fontWeight: 600,
-    padding: "6px 10px",
+    fontSize: "1.5em",
+    fontWeight: 700,
+    padding: "0.5rem 0.75rem",
     textTransform: "uppercase",
-    opacity: 0.6,
-    flexShrink: 0
+    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: 2
+    gap: "0.15rem"
   },
   item: {
     display: "flex",
-    alignItems: "center",
-    gap: 6,
-    padding: "6px 10px",
-    minHeight: 40,
+    alignItems: "stretch",
+    gap: "0.5rem",
+    padding: "0 0.4rem 0 0",
+    minHeight: "3.7rem",
     cursor: "pointer",
-    userSelect: "none"
+    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: 13,
+    fontSize: "1.4em",
+    fontWeight: 700,
     whiteSpace: "nowrap",
     overflow: "hidden",
-    textOverflow: "ellipsis"
+    textOverflow: "ellipsis",
+    color: colors.text
   },
   indicators: {
     display: "flex",
-    gap: 4,
+    gap: "0.25rem",
     alignItems: "center"
   },
   indicator: {
-    width: 8,
-    height: 8,
+    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 ? "#4caf50" : "#f44336"
+        backgroundColor: on ? colors.ioOn : colors.ioOff
       },
       title: on ? "Online" : "Offline"
     }
@@ -1409,7 +1509,7 @@ function DefaultSignalIndicator({ on }) {
     {
       style: {
         ...defaults.indicator,
-        backgroundColor: on ? "#2196f3" : "#666"
+        backgroundColor: on ? colors.sgOn : colors.sgOff
       },
       title: on ? "Signal detected" : "No signal"
     }
@@ -1418,7 +1518,9 @@ function DefaultSignalIndicator({ on }) {
 function MatrixItemRow({
   item,
   type,
+  active,
   showChannels,
+  vmText,
   onSelect,
   onToggleVideoMute,
   itemClassName,
@@ -1431,22 +1533,39 @@ function MatrixItemRow({
   renderIoIndicator,
   renderSignalIndicator
 }) {
-  const isActive = item.sl.on;
+  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 = itemClassName ? { ...itemStyleProp } : {
+  const computedStyle = useDefaults ? {
     ...defaults.item,
     ...itemStyleProp,
-    ...isActive ? itemActiveStyle : void 0,
+    ...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: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    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,
@@ -1454,9 +1573,9 @@ 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: 6, width: "100%" }, children: [
+        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: defaults.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${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 }))
@@ -1464,17 +1583,31 @@ function MatrixItemRow({
         ] })
       }
     ),
-    item.vm.vs && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    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: "VM",
+        text: vmText,
         onPress: onToggleVideoMute,
         className: vmButtonClassName,
         classActive: vmButtonActiveClassName
       }
-    )
+    ))
   ] });
 }
 function CrisCoMatrixListsTie({
@@ -1493,6 +1626,7 @@ function CrisCoMatrixListsTie({
   itemActiveClassName,
   itemActiveStyle,
   itemDisabledClassName,
+  vmText = "Mute",
   vmButtonClassName,
   vmButtonActiveClassName,
   renderIoIndicator,
@@ -1500,8 +1634,9 @@ function CrisCoMatrixListsTie({
 }) {
   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 { ip: inputs, op: outputs } = matrix;
+  const { si, ip: inputs, op: outputs } = matrix;
   const handleSelectInput = (id) => {
     send(oid, { action: "selectInput", id });
   };
@@ -1531,12 +1666,14 @@ function CrisCoMatrixListsTie({
                   children: inputTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: defaults.scroll, children: inputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__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,
@@ -1568,12 +1705,14 @@ function CrisCoMatrixListsTie({
                   children: outputTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: defaults.scroll, children: outputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__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,