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

package/dist/index.d.mts

@@ -314,6 +314,75 @@ 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 {
+    ch: number;
+    lb: string;
+    gp: number;
+    sl: {
+        on: boolean;
+        en: boolean;
+        vs: boolean;
+    };
+    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 {
+    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 className */
+    vmButtonClassName?: string;
+    /** Video mute button active className */
+    vmButtonActiveClassName?: string;
+    /** 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, className, style, listClassName, listStyle, headerClassName, headerStyle, itemClassName, itemStyle, itemActiveClassName, itemActiveStyle, itemDisabledClassName, vmButtonClassName, vmButtonActiveClassName, renderIoIndicator, renderSignalIndicator, }: CrisCoMatrixListsTieProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Icon configuration and utilities for CRIS components
  *
@@ -364,4 +433,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,75 @@ 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 {
+    ch: number;
+    lb: string;
+    gp: number;
+    sl: {
+        on: boolean;
+        en: boolean;
+        vs: boolean;
+    };
+    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 {
+    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 className */
+    vmButtonClassName?: string;
+    /** Video mute button active className */
+    vmButtonActiveClassName?: string;
+    /** 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, className, style, listClassName, listStyle, headerClassName, headerStyle, itemClassName, itemStyle, itemActiveClassName, itemActiveStyle, itemDisabledClassName, vmButtonClassName, vmButtonActiveClassName, renderIoIndicator, renderSignalIndicator, }: CrisCoMatrixListsTieProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Icon configuration and utilities for CRIS components
  *
@@ -364,4 +433,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,
@@ -1327,10 +1328,271 @@ 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 defaults = {
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 8,
+    height: "100%"
+  },
+  list: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    minHeight: 0
+  },
+  header: {
+    fontSize: 13,
+    fontWeight: 600,
+    padding: "6px 10px",
+    textTransform: "uppercase",
+    opacity: 0.6,
+    flexShrink: 0
+  },
+  scroll: {
+    flex: 1,
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    minHeight: 40,
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  itemLabel: {
+    flex: 1,
+    fontSize: 13,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  indicators: {
+    display: "flex",
+    gap: 4,
+    alignItems: "center"
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    flexShrink: 0
+  }
+};
+function DefaultIoIndicator({ on }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      style: {
+        ...defaults.indicator,
+        backgroundColor: on ? "#4caf50" : "#f44336"
+      },
+      title: on ? "Online" : "Offline"
+    }
+  );
+}
+function DefaultSignalIndicator({ on }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      style: {
+        ...defaults.indicator,
+        backgroundColor: on ? "#2196f3" : "#666"
+      },
+      title: on ? "Signal detected" : "No signal"
+    }
+  );
+}
+function MatrixItemRow({
+  item,
+  type,
+  onSelect,
+  onToggleVideoMute,
+  itemClassName,
+  itemStyle: itemStyleProp,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName,
+  vmButtonClassName,
+  vmButtonActiveClassName,
+  renderIoIndicator,
+  renderSignalIndicator
+}) {
+  const isActive = item.sl.on;
+  const isEnabled = item.sl.en;
+  const classes = [
+    "cris-co-matrix-item",
+    itemClassName,
+    isActive && (itemActiveClassName || "active"),
+    !isEnabled && (itemDisabledClassName || "disabled")
+  ].filter(Boolean).join(" ");
+  const computedStyle = itemClassName ? { ...itemStyleProp } : {
+    ...defaults.item,
+    ...itemStyleProp,
+    ...isActive ? itemActiveStyle : void 0,
+    opacity: isEnabled ? 1 : 0.4
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: classes, style: computedStyle, children: [
+    /* @__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: 6, width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: defaults.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.ch}` }),
+          /* @__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 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CrisButton,
+      {
+        selected: item.vm.on,
+        enabled: item.vm.en,
+        text: "VM",
+        onPress: onToggleVideoMute,
+        className: vmButtonClassName,
+        classActive: vmButtonActiveClassName
+      }
+    )
+  ] });
+}
+function CrisCoMatrixListsTie({
+  oid,
+  inputTitle = "Inputs",
+  outputTitle = "Outputs",
+  className,
+  style,
+  listClassName,
+  listStyle,
+  headerClassName,
+  headerStyle,
+  itemClassName,
+  itemStyle,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName,
+  vmButtonClassName,
+  vmButtonActiveClassName,
+  renderIoIndicator,
+  renderSignalIndicator
+}) {
+  const matrix = (0, import_cris_webui_ch5_core8.useCustomObject)(oid);
+  const send = (0, import_cris_webui_ch5_core8.useCustomObjectSend)();
+  if (!matrix) return null;
+  const { ip: inputs, op: outputs } = matrix;
+  const handleSelectInput = (ch) => {
+    send(oid, { action: "selectInput", ch });
+  };
+  const handleTie = (ch) => {
+    send(oid, { action: "tie", ch });
+  };
+  const handleToggleVideoMute = (type, ch) => {
+    send(oid, { action: "toggleVideoMute", type, ch });
+  };
+  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", { style: defaults.scroll, children: inputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                MatrixItemRow,
+                {
+                  item,
+                  type: "input",
+                  onSelect: () => handleSelectInput(item.ch),
+                  onToggleVideoMute: () => handleToggleVideoMute("input", item.ch),
+                  itemClassName,
+                  itemStyle,
+                  itemActiveClassName,
+                  itemActiveStyle,
+                  itemDisabledClassName,
+                  vmButtonClassName,
+                  vmButtonActiveClassName,
+                  renderIoIndicator,
+                  renderSignalIndicator
+                },
+                item.ch
+              )) })
+            ]
+          }
+        ),
+        /* @__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", { style: defaults.scroll, children: outputs?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                MatrixItemRow,
+                {
+                  item,
+                  type: "output",
+                  onSelect: () => handleTie(item.ch),
+                  onToggleVideoMute: () => handleToggleVideoMute("output", item.ch),
+                  itemClassName,
+                  itemStyle,
+                  itemActiveClassName,
+                  itemActiveStyle,
+                  itemDisabledClassName,
+                  vmButtonClassName,
+                  vmButtonActiveClassName,
+                  renderIoIndicator,
+                  renderSignalIndicator
+                },
+                item.ch
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CrisButton,
   CrisCoDebug,
+  CrisCoMatrixListsTie,
   CrisGauge,
   CrisOfflinePage,
   CrisSlider,