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

package/dist/index.d.mts

@@ -58,8 +58,10 @@ interface CrisButtonProps {
     onPress?: () => void;
     /** Custom release handler */
     onRelease?: () => void;
+    /** 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, }: 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, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, debug, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
 
 interface CrisTextProps {
     /** Serial join for indirect text */

package/dist/index.d.ts

@@ -58,8 +58,10 @@ interface CrisButtonProps {
     onPress?: () => void;
     /** Custom release handler */
     onRelease?: () => void;
+    /** 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, }: 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, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, debug, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
 
 interface CrisTextProps {
     /** Serial join for indirect text */

package/dist/index.js

@@ -118,8 +118,11 @@ function CrisButton({
   classDisabled = "",
   children,
   onPress,
-  onRelease
+  onRelease,
+  debug = false
 }) {
+  const log = debug ? (msg, data) => console.log(`[CrisButton:${join}] ${msg}`, data ?? "") : () => {
+  };
   const [pressed, setPressed] = (0, import_react.useState)(false);
   const pressedRef = (0, import_react.useRef)(false);
   const touchingRef = (0, import_react.useRef)(false);
@@ -132,16 +135,19 @@ function CrisButton({
   const isEnabled = joinEnable == null ? true : enabled;
   const isVisible = joinVisible == null ? true : visible;
   (0, import_react.useEffect)(() => {
+    log("visibility effect", { isVisible, pressedRef: pressedRef.current });
     if (!isVisible && pressedRef.current) {
+      log("VISIBILITY RELEASE - button hidden while pressed");
       pressedRef.current = false;
       setPressed(false);
       touchingRef.current = false;
       touchStartedHereRef.current = false;
       if (join != null && smartId == null) {
+        log("sending release via dSet(false)");
         dSet(join, false);
       }
     }
-  }, [isVisible, join, smartId, dSet]);
+  }, [isVisible, join, smartId, dSet, log]);
   const hasControlFeedback = showControlFeedback && feedbackJoin != null && feedback;
   const hasPressedFeedback = showLocalFeedback && pressed && isEnabled;
   const isActive = hasControlFeedback || hasPressedFeedback;
@@ -152,42 +158,69 @@ function CrisButton({
     currentText = textSelected;
   }
   const handlePress = () => {
-    if (suppressKeyClicks) return;
-    if (pressedRef.current) return;
+    log("handlePress called", { suppressKeyClicks, pressedRef: pressedRef.current, isEnabled });
+    if (suppressKeyClicks) {
+      log("BLOCKED: suppressKeyClicks");
+      return;
+    }
+    if (pressedRef.current) {
+      log("BLOCKED: already pressed");
+      return;
+    }
     pressedRef.current = true;
     setPressed(true);
-    if (!isEnabled) return;
+    if (!isEnabled) {
+      log("SKIPPED dSet: not enabled");
+      return;
+    }
     onPress?.();
     if (join != null && smartId == null) {
+      log("SENDING PRESS via dSet(true)");
       dSet(join, true);
     }
   };
   const handleRelease = () => {
-    if (suppressKeyClicks) return;
-    if (!pressedRef.current) return;
+    log("handleRelease called", { suppressKeyClicks, pressedRef: pressedRef.current, isEnabled });
+    if (suppressKeyClicks) {
+      log("BLOCKED: suppressKeyClicks");
+      return;
+    }
+    if (!pressedRef.current) {
+      log("BLOCKED: not pressed");
+      return;
+    }
     pressedRef.current = false;
     setPressed(false);
-    if (!isEnabled) return;
+    if (!isEnabled) {
+      log("SKIPPED dSet: not enabled");
+      return;
+    }
     onRelease?.();
     if (join != null && smartId == null) {
+      log("SENDING RELEASE via dSet(false)");
       dSet(join, false);
     }
   };
   const handleTouchStart = () => {
+    log("handleTouchStart");
     touchStart();
     touchingRef.current = true;
     touchStartedHereRef.current = true;
     handlePress();
   };
   const handleTouchEnd = () => {
+    log("handleTouchEnd", { touchStartedHereRef: touchStartedHereRef.current });
     touchEnd();
     touchingRef.current = true;
     if (touchStartedHereRef.current) {
       touchStartedHereRef.current = false;
       handleRelease();
+    } else {
+      log("SKIPPED handleRelease: touch did not start here");
     }
   };
   const handleTouchCancel = () => {
+    log("handleTouchCancel");
     touchEnd();
     touchingRef.current = true;
     touchStartedHereRef.current = false;
@@ -805,7 +838,9 @@ function CrisOfflinePage({
   className = ""
 }) {
   const connectionStatus = (0, import_cris_webui_ch5_core6.useConnectionStore)((state) => state.status);
+  const errorReason = (0, import_cris_webui_ch5_core6.useConnectionStore)((state) => state.errorReason);
   const [hasSeenError, setHasSeenError] = (0, import_react3.useState)(false);
+  const [lastErrorReason, setLastErrorReason] = (0, import_react3.useState)(null);
   const [certPageOpened, setCertPageOpened] = (0, import_react3.useState)(false);
   const [retryCountdown, setRetryCountdown] = (0, import_react3.useState)(null);
   const processorHost = processorHostProp ?? (typeof window !== "undefined" ? window.location.hostname : "localhost");
@@ -813,10 +848,13 @@ function CrisOfflinePage({
   (0, import_react3.useEffect)(() => {
     if (connectionStatus === "error") {
       setHasSeenError(true);
+      setLastErrorReason(errorReason);
     } else if (connectionStatus === "connected") {
       setHasSeenError(false);
+      setLastErrorReason(null);
     }
-  }, [connectionStatus]);
+  }, [connectionStatus, errorReason]);
+  const isTimeoutError = lastErrorReason === "timeout";
   const loginUrl = `https://${processorHost}${loginPath}`;
   const certUrl = `https://${processorHost}:${wsPort}/`;
   const openCertPage = (0, import_react3.useCallback)(() => {
@@ -874,14 +912,36 @@ function CrisOfflinePage({
     isDevMode,
     isVC4,
     processorHost: isDevMode ? processorHost : void 0,
-    hasAuthToken: isDevMode ? hasAuthToken : void 0
+    hasAuthToken: isDevMode ? hasAuthToken : void 0,
+    errorReason: lastErrorReason
   };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `cris-offline-page absolute inset-0 bg-gray-900 flex flex-col items-center justify-center overflow-auto py-8 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center max-w-4xl px-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `w-16 h-16 mx-auto rounded-full flex items-center justify-center ${isError ? "bg-red-500/20" : "bg-yellow-500/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `w-8 h-8 rounded-full ${isError ? "bg-red-500" : "bg-yellow-500 animate-pulse"}` }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "text-2xl font-bold text-white mb-2", children: isError ? "Connection Error" : "Connecting..." }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", children: isError ? isDeployedOnProcessor ? "Redirecting to login page..." : "WebSocket connection failed. SSL certificate may need to be accepted." : "Establishing connection to control system" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `px-4 py-2 rounded-full text-sm font-medium ${isError ? "bg-red-500/20 text-red-400" : "bg-yellow-500/20 text-yellow-400"}`, children: isError ? isDevMode ? "Dev Mode - Auth Error" : isVC4 ? "VC4 - Not Authorized" : "Auth Error" : "Connecting" }) }),
-    isError && !isDeployedOnProcessor && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-[2em] bg-blue-500/10 border border-blue-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: retryCountdown !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center", style: { overflow: "visible" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "text-2xl font-bold text-white mb-2", children: isError ? isTimeoutError ? "Processor Unreachable" : "Connection Error" : "Connecting..." }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", children: isError ? isDeployedOnProcessor ? "Redirecting to login page..." : isTimeoutError ? "Could not connect to the processor. Check the IP address and network connection." : "WebSocket connection failed. SSL certificate may need to be accepted." : "Establishing connection to control system" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `px-4 py-2 rounded-full text-sm font-medium ${isError ? "bg-red-500/20 text-red-400" : "bg-yellow-500/20 text-yellow-400"}`, children: isError ? isTimeoutError ? "Connection Timeout" : isDevMode ? "Dev Mode - Auth Error" : isVC4 ? "VC4 - Not Authorized" : "Auth Error" : "Connecting" }) }),
+    isError && !isDeployedOnProcessor && isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-orange-500/10 border border-orange-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-orange-400 font-medium", style: { fontSize: "1.2em", marginBottom: "1em" }, children: [
+        "The processor at ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-white", children: processorHost }),
+        " is not responding."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ul", { className: "text-gray-400 text-left mb-[1em]", style: { fontSize: "1em", listStyleType: "disc", paddingLeft: "1.5em" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: "Verify the IP address is correct" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: "Check that the processor is powered on" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: "Ensure you are on the same network" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex gap-[1em] justify-center", style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          onClick: retryConnection,
+          className: "bg-orange-600 hover:bg-orange-500 text-white font-medium rounded-xl transition-colors",
+          style: { padding: "1em 2em", fontSize: "1.2em", whiteSpace: "nowrap", overflow: "visible" },
+          children: "Retry Connection"
+        }
+      ) })
+    ] }),
+    isError && !isDeployedOnProcessor && !isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-[2em] bg-blue-500/10 border border-blue-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: retryCountdown !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center", style: { overflow: "visible" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-blue-400 font-medium", style: { fontSize: "1.4em", marginBottom: "1em" }, children: [
         "Retrying connection in ",
         retryCountdown,
@@ -985,6 +1045,11 @@ function CrisOfflinePage({
             envInfo.pathname,
             envInfo.search
           ] })
+        ] }),
+        envInfo.errorReason && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-gray-500", children: "Error Reason:" }),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: envInfo.errorReason === "timeout" ? "text-orange-400" : "text-red-400", children: envInfo.errorReason })
         ] })
       ] })
     ] })