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

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 interface CrisButtonProps {
     /** Digital join for press action */
@@ -36,12 +36,18 @@ interface CrisButtonProps {
     iconClassActive?: string;
     /** Icon inline style when active (merged with iconStyle when button is active) */
     iconStyleActive?: React.CSSProperties;
+    /** External selected/active state (for controlled mode without joins) */
+    selected?: boolean;
     /** Show controller feedback styling */
     showControlFeedback?: boolean;
     /** Show local press feedback styling */
     showLocalFeedback?: boolean;
     /** Suppress click actions (display only) */
     suppressKeyClicks?: boolean;
+    /** External visible state (for controlled mode without joinVisible) */
+    visible?: boolean;
+    /** External enabled state (for controlled mode without joinEnable) */
+    enabled?: boolean;
     /** Smart object ID (for smarts instead of joins) */
     smartId?: number;
     /** Custom class names */
@@ -61,7 +67,7 @@ interface CrisButtonProps {
     /** Enable debug logging for this button */
     debug?: boolean;
 }
-declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconName, iconClass, iconSize, iconContainerSize, iconStyle, iconPosition, iconNameActive, iconClassActive, iconStyleActive, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, debug, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconName, iconClass, iconSize, iconContainerSize, iconStyle, iconPosition, iconNameActive, iconClassActive, iconStyleActive, selected, showControlFeedback, showLocalFeedback, suppressKeyClicks, visible, enabled, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, debug, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
 
 interface CrisTextProps {
     /** Serial join for indirect text */
@@ -256,6 +262,58 @@ interface CrisOfflinePageProps {
 }
 declare function CrisOfflinePage({ processorHost: processorHostProp, hasAuthToken, isDevMode, isVC4, isDeployedOnProcessor, wsPort, showDebugInfo, loginRedirectDelay, loginPath, retryCountdown: retryCountdownInit, className, }: CrisOfflinePageProps): react_jsx_runtime.JSX.Element;
 
+/** Shape of a single module from the backend */
+interface DebugModule {
+    id: string;
+    lb: string;
+    tp: string;
+    md: {
+        vs: boolean;
+        on: boolean;
+    };
+    cm: {
+        vs: boolean;
+        on: boolean;
+    };
+    et: {
+        vs: boolean;
+        on: boolean;
+    };
+    rs: {
+        vs: boolean;
+        on: boolean;
+    };
+    vs: boolean;
+    en: boolean;
+}
+interface CrisCoDebugProps {
+    /** Custom object ID (default: "__DBG__") */
+    oid?: string;
+    /** Optional title */
+    title?: string;
+    /** Container className */
+    className?: string;
+    /** Container style */
+    style?: CSSProperties;
+    /** Item className */
+    itemClassName?: string;
+    /** Item style */
+    itemStyle?: CSSProperties;
+    /** Button className for Mod/Com buttons */
+    buttonClassName?: string;
+    /** Button active className for Mod/Com buttons */
+    buttonActiveClassName?: string;
+    /** Custom icon for Ethernet connected */
+    iconEthOn?: ReactNode;
+    /** Custom icon for Ethernet disconnected */
+    iconEthOff?: ReactNode;
+    /** Custom icon for RS232 connected */
+    iconRs232On?: ReactNode;
+    /** Custom icon for RS232 disconnected */
+    iconRs232Off?: ReactNode;
+}
+declare function CrisCoDebug({ oid, title, className, style, itemClassName, itemStyle, buttonClassName, buttonActiveClassName, iconEthOn, iconEthOff, iconRs232On, iconRs232Off, }: CrisCoDebugProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Icon configuration and utilities for CRIS components
  *
@@ -306,4 +364,4 @@ declare function getIconUrl(name: string): string;
  */
 declare function getIconFilter(active: boolean): string | undefined;
 
-export { CrisButton, type CrisButtonProps, CrisGauge, type CrisGaugeProps, CrisOfflinePage, type CrisOfflinePageProps, CrisSlider, type CrisSliderProps, CrisSpinner, type CrisSpinnerProps, CrisText, type CrisTextProps, type IconConfig, type SpinnerSpeed, configureIcons, getIconConfig, getIconFilter, getIconUrl };
+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 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 interface CrisButtonProps {
     /** Digital join for press action */
@@ -36,12 +36,18 @@ interface CrisButtonProps {
     iconClassActive?: string;
     /** Icon inline style when active (merged with iconStyle when button is active) */
     iconStyleActive?: React.CSSProperties;
+    /** External selected/active state (for controlled mode without joins) */
+    selected?: boolean;
     /** Show controller feedback styling */
     showControlFeedback?: boolean;
     /** Show local press feedback styling */
     showLocalFeedback?: boolean;
     /** Suppress click actions (display only) */
     suppressKeyClicks?: boolean;
+    /** External visible state (for controlled mode without joinVisible) */
+    visible?: boolean;
+    /** External enabled state (for controlled mode without joinEnable) */
+    enabled?: boolean;
     /** Smart object ID (for smarts instead of joins) */
     smartId?: number;
     /** Custom class names */
@@ -61,7 +67,7 @@ interface CrisButtonProps {
     /** Enable debug logging for this button */
     debug?: boolean;
 }
-declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconName, iconClass, iconSize, iconContainerSize, iconStyle, iconPosition, iconNameActive, iconClassActive, iconStyleActive, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, debug, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconName, iconClass, iconSize, iconContainerSize, iconStyle, iconPosition, iconNameActive, iconClassActive, iconStyleActive, selected, showControlFeedback, showLocalFeedback, suppressKeyClicks, visible, enabled, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, debug, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
 
 interface CrisTextProps {
     /** Serial join for indirect text */
@@ -256,6 +262,58 @@ interface CrisOfflinePageProps {
 }
 declare function CrisOfflinePage({ processorHost: processorHostProp, hasAuthToken, isDevMode, isVC4, isDeployedOnProcessor, wsPort, showDebugInfo, loginRedirectDelay, loginPath, retryCountdown: retryCountdownInit, className, }: CrisOfflinePageProps): react_jsx_runtime.JSX.Element;
 
+/** Shape of a single module from the backend */
+interface DebugModule {
+    id: string;
+    lb: string;
+    tp: string;
+    md: {
+        vs: boolean;
+        on: boolean;
+    };
+    cm: {
+        vs: boolean;
+        on: boolean;
+    };
+    et: {
+        vs: boolean;
+        on: boolean;
+    };
+    rs: {
+        vs: boolean;
+        on: boolean;
+    };
+    vs: boolean;
+    en: boolean;
+}
+interface CrisCoDebugProps {
+    /** Custom object ID (default: "__DBG__") */
+    oid?: string;
+    /** Optional title */
+    title?: string;
+    /** Container className */
+    className?: string;
+    /** Container style */
+    style?: CSSProperties;
+    /** Item className */
+    itemClassName?: string;
+    /** Item style */
+    itemStyle?: CSSProperties;
+    /** Button className for Mod/Com buttons */
+    buttonClassName?: string;
+    /** Button active className for Mod/Com buttons */
+    buttonActiveClassName?: string;
+    /** Custom icon for Ethernet connected */
+    iconEthOn?: ReactNode;
+    /** Custom icon for Ethernet disconnected */
+    iconEthOff?: ReactNode;
+    /** Custom icon for RS232 connected */
+    iconRs232On?: ReactNode;
+    /** Custom icon for RS232 disconnected */
+    iconRs232Off?: ReactNode;
+}
+declare function CrisCoDebug({ oid, title, className, style, itemClassName, itemStyle, buttonClassName, buttonActiveClassName, iconEthOn, iconEthOff, iconRs232On, iconRs232Off, }: CrisCoDebugProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Icon configuration and utilities for CRIS components
  *
@@ -306,4 +364,4 @@ declare function getIconUrl(name: string): string;
  */
 declare function getIconFilter(active: boolean): string | undefined;
 
-export { CrisButton, type CrisButtonProps, CrisGauge, type CrisGaugeProps, CrisOfflinePage, type CrisOfflinePageProps, CrisSlider, type CrisSliderProps, CrisSpinner, type CrisSpinnerProps, CrisText, type CrisTextProps, type IconConfig, type SpinnerSpeed, configureIcons, getIconConfig, getIconFilter, getIconUrl };
+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 };

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CrisButton: () => CrisButton,
+  CrisCoDebug: () => CrisCoDebug,
   CrisGauge: () => CrisGauge,
   CrisOfflinePage: () => CrisOfflinePage,
   CrisSlider: () => CrisSlider,
@@ -108,9 +109,12 @@ function CrisButton({
   iconNameActive,
   iconClassActive,
   iconStyleActive,
+  selected,
   showControlFeedback = true,
   showLocalFeedback = true,
   suppressKeyClicks = false,
+  visible,
+  enabled,
   smartId,
   className = "",
   classActive = "",
@@ -121,19 +125,24 @@ function CrisButton({
   onRelease,
   debug = false
 }) {
-  const log = debug ? (msg, data) => console.log(`[CrisButton:${join}] ${msg}`, data ?? "") : () => {
-  };
+  const debugRef = (0, import_react.useRef)(debug);
+  debugRef.current = debug;
+  const joinRef = (0, import_react.useRef)(join);
+  joinRef.current = join;
+  const log = (0, import_react.useCallback)((msg, data) => {
+    if (debugRef.current) console.log(`[CrisButton:${joinRef.current}] ${msg}`, data ?? "");
+  }, []);
   const [pressed, setPressed] = (0, import_react.useState)(false);
   const pressedRef = (0, import_react.useRef)(false);
   const touchingRef = (0, import_react.useRef)(false);
   const touchStartedHereRef = (0, import_react.useRef)(false);
   const feedbackJoin = joinFeedback ?? join;
   const feedback = (0, import_cris_webui_ch5_core.useDigital)(feedbackJoin ?? 0);
-  const enabled = (0, import_cris_webui_ch5_core.useDigital)(joinEnable ?? 0);
-  const visible = (0, import_cris_webui_ch5_core.useDigital)(joinVisible ?? 0);
+  const enabledJoin = (0, import_cris_webui_ch5_core.useDigital)(joinEnable ?? 0);
+  const visibleJoin = (0, import_cris_webui_ch5_core.useDigital)(joinVisible ?? 0);
   const dSet = (0, import_cris_webui_ch5_core.useJoinsStore)((state) => state.dSet);
-  const isEnabled = joinEnable == null ? true : enabled;
-  const isVisible = joinVisible == null ? true : visible;
+  const isEnabled = enabled ?? (joinEnable == null ? true : enabledJoin);
+  const isVisible = visible ?? (joinVisible == null ? true : visibleJoin);
   (0, import_react.useEffect)(() => {
     log("visibility effect", { isVisible, pressedRef: pressedRef.current });
     if (!isVisible && pressedRef.current) {
@@ -147,7 +156,7 @@ function CrisButton({
         dSet(join, false);
       }
     }
-  }, [isVisible, join, smartId, dSet, log]);
+  }, [isVisible, join, smartId, dSet]);
   (0, import_react.useEffect)(() => {
     return () => {
       if (pressedRef.current && join != null && smartId == null) {
@@ -156,7 +165,7 @@ function CrisButton({
       }
     };
   }, [join, smartId, dSet, log]);
-  const hasControlFeedback = showControlFeedback && feedbackJoin != null && feedback;
+  const hasControlFeedback = showControlFeedback && (feedbackJoin != null && feedback || selected === true);
   const hasPressedFeedback = showLocalFeedback && pressed && isEnabled;
   const isActive = hasControlFeedback || hasPressedFeedback;
   let currentText = text ?? "";
@@ -1133,9 +1142,195 @@ function CrisOfflinePage({
     ] })
   ] }) });
 }
+
+// src/components/CrisCoDebug.tsx
+var import_cris_webui_ch5_core7 = require("@imperosoft/cris-webui-ch5-core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var defaultStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto",
+    gap: 2
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 600,
+    padding: "8px 12px",
+    opacity: 0.7
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    padding: "8px 12px",
+    gap: 8,
+    minHeight: 48
+  },
+  info: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  moduleName: {
+    fontSize: 14,
+    fontWeight: 600,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  moduleType: {
+    fontSize: 11,
+    opacity: 0.5
+  },
+  icons: {
+    display: "flex",
+    gap: 4,
+    alignItems: "center",
+    minWidth: 56,
+    justifyContent: "center"
+  },
+  buttons: {
+    display: "flex",
+    gap: 4,
+    alignItems: "center"
+  },
+  iconBox: {
+    width: 24,
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative"
+  }
+};
+function ConnectionIcon({ on, type }) {
+  const label = type === "eth" ? "ETH" : "RS";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      style: {
+        ...defaultStyles.iconBox,
+        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" })
+        ] })
+      ] })
+    }
+  );
+}
+function DebugModuleItem({
+  module: module2,
+  onAction,
+  itemClassName,
+  itemStyle,
+  buttonClassName,
+  buttonActiveClassName,
+  iconEthOn,
+  iconEthOff,
+  iconRs232On,
+  iconRs232Off
+}) {
+  const name = module2.lb ? `${module2.id} (${module2.lb})` : module2.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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_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_runtime7.jsxs)("div", { style: defaultStyles.buttons, children: [
+          module2.md.vs && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            CrisButton,
+            {
+              selected: module2.md.on,
+              text: "Mod",
+              className: buttonClassName,
+              classActive: buttonActiveClassName,
+              onPress: () => onAction("toggleMod", module2.id)
+            }
+          ),
+          module2.cm.vs && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            CrisButton,
+            {
+              selected: module2.cm.on,
+              text: "Com",
+              className: buttonClassName,
+              classActive: buttonActiveClassName,
+              onPress: () => onAction("toggleCom", module2.id)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CrisCoDebug({
+  oid = "__DBG__",
+  title,
+  className,
+  style,
+  itemClassName,
+  itemStyle,
+  buttonClassName,
+  buttonActiveClassName,
+  iconEthOn,
+  iconEthOff,
+  iconRs232On,
+  iconRs232Off
+}) {
+  const modules = (0, import_cris_webui_ch5_core7.useCustomObject)(oid);
+  const send = (0, import_cris_webui_ch5_core7.useCustomObjectSend)();
+  const handleAction = (action, id) => {
+    send(oid, { action, id });
+  };
+  if (!modules || modules.length === 0) {
+    return null;
+  }
+  const visibleModules = modules.filter((m) => m.vs);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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)(
+          DebugModuleItem,
+          {
+            module: module2,
+            onAction: handleAction,
+            itemClassName,
+            itemStyle,
+            buttonClassName,
+            buttonActiveClassName,
+            iconEthOn,
+            iconEthOff,
+            iconRs232On,
+            iconRs232Off
+          },
+          module2.id
+        ))
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CrisButton,
+  CrisCoDebug,
   CrisGauge,
   CrisOfflinePage,
   CrisSlider,