@wandelbots/wandelbots-js-react-components 5.4.2 → 5.5.0

package/dist/components/LogViewer.js

@@ -0,0 +1,299 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import E from "@mui/icons-material/ContentCopy";
+import L from "@mui/icons-material/DescriptionOutlined";
+import W from "@mui/icons-material/ExpandLess";
+import D from "@mui/icons-material/ExpandMore";
+import { useTheme as H } from "@mui/material/styles";
+import l from "@mui/material/Box";
+import $ from "@mui/material/Button";
+import b from "@mui/material/IconButton";
+import B from "@mui/material/Paper";
+import s from "@mui/material/Typography";
+import { observer as R } from "mobx-react-lite";
+import { useRef as j, useEffect as F, useState as d } from "react";
+import { externalizeComponent as P } from "../externalizeComponent.js";
+const p = (n, o, c) => ({
+  id: c || `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+  timestamp: /* @__PURE__ */ new Date(),
+  message: n,
+  level: o
+}), ee = (n, o) => p(n, "debug", o), te = (n, o) => p(n, "info", o), oe = (n, o) => p(n, "warning", o), re = (n, o) => p(n, "error", o), ne = P(
+  R((n) => {
+    var g;
+    const { messages: o = [], onClear: c, height: y = 400, sx: v } = n, e = H(), x = j(null);
+    F(() => {
+      if (o.length === 0) return;
+      const t = x.current;
+      if (!t) return;
+      const i = setTimeout(() => {
+        t.scrollTop = t.scrollHeight;
+      }, 10);
+      return () => clearTimeout(i);
+    }, [o.length]);
+    const C = (t) => t.toLocaleTimeString("en-US", {
+      hour12: !1,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    }), w = (t) => {
+      switch (t) {
+        case "error":
+          return e.palette.error.main;
+        case "warning":
+          return e.palette.warning.main;
+        case "info":
+          return e.palette.info.main;
+        case "debug":
+          return e.palette.text.disabled;
+        default:
+          return e.palette.text.secondary;
+      }
+    }, S = ({ message: t }) => {
+      const [i, k] = d(!1), [M, m] = d(!1), [f, h] = d(!1), u = t.message.length > 150, T = async () => {
+        try {
+          await navigator.clipboard.writeText(t.message), m(!0), setTimeout(() => m(!1), 2e3);
+        } catch (I) {
+          console.error("Failed to copy message:", I);
+        }
+      }, z = u && !i ? `${t.message.substring(0, 150)}...` : t.message;
+      return /* @__PURE__ */ r(
+        l,
+        {
+          onMouseEnter: () => h(!0),
+          onMouseLeave: () => h(!1),
+          sx: {
+            display: "flex",
+            gap: 1,
+            fontFamily: "monospace",
+            flexDirection: "column",
+            "&:hover": {
+              backgroundColor: e.palette.action.hover
+            },
+            borderRadius: "4px",
+            padding: "2px 4px",
+            margin: "-2px -4px"
+          },
+          children: /* @__PURE__ */ a(l, { sx: { display: "flex", gap: 1 }, children: [
+            /* @__PURE__ */ a(
+              s,
+              {
+                component: "span",
+                sx: {
+                  fontWeight: 400,
+                  fontSize: "12px",
+                  lineHeight: "18px",
+                  letterSpacing: "0.4px",
+                  color: e.palette.text.disabled,
+                  whiteSpace: "nowrap",
+                  flexShrink: 0
+                },
+                children: [
+                  "[",
+                  C(t.timestamp),
+                  "]"
+                ]
+              }
+            ),
+            /* @__PURE__ */ r(
+              s,
+              {
+                component: "span",
+                sx: {
+                  fontWeight: 400,
+                  fontSize: "12px",
+                  lineHeight: "18px",
+                  letterSpacing: "0.4px",
+                  color: w(t.level),
+                  wordBreak: "break-word",
+                  overflowWrap: "anywhere",
+                  hyphens: "auto",
+                  flex: 1,
+                  whiteSpace: "pre-wrap"
+                },
+                children: z
+              }
+            ),
+            /* @__PURE__ */ a(
+              l,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: 0.5,
+                  opacity: f ? 1 : 0,
+                  transition: "opacity 0.2s ease-in-out",
+                  visibility: f ? "visible" : "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ r(
+                    b,
+                    {
+                      size: "small",
+                      onClick: T,
+                      sx: {
+                        padding: "2px",
+                        color: e.palette.text.secondary,
+                        "&:hover": {
+                          backgroundColor: e.palette.action.hover
+                        }
+                      },
+                      title: M ? "Copied!" : "Copy message",
+                      children: /* @__PURE__ */ r(E, { sx: { fontSize: 12 } })
+                    }
+                  ),
+                  u && /* @__PURE__ */ r(
+                    b,
+                    {
+                      size: "small",
+                      onClick: () => k(!i),
+                      sx: {
+                        padding: "2px",
+                        color: e.palette.text.secondary,
+                        "&:hover": {
+                          backgroundColor: e.palette.action.hover
+                        }
+                      },
+                      title: i ? "Collapse" : "Expand",
+                      children: i ? /* @__PURE__ */ r(W, { sx: { fontSize: 12 } }) : /* @__PURE__ */ r(D, { sx: { fontSize: 12 } })
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        },
+        t.id
+      );
+    };
+    return /* @__PURE__ */ a(
+      B,
+      {
+        sx: {
+          backgroundColor: ((g = e.palette.backgroundPaperElevation) == null ? void 0 : g[2]) || "#171927",
+          backgroundImage: "none",
+          // Override any gradient from elevation
+          height: y,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          ...v
+        },
+        children: [
+          /* @__PURE__ */ a(
+            l,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "12px 16px"
+              },
+              children: [
+                /* @__PURE__ */ a(l, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  /* @__PURE__ */ r(
+                    L,
+                    {
+                      sx: {
+                        fontSize: 16,
+                        color: e.palette.action.active,
+                        opacity: 0.56
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    s,
+                    {
+                      sx: {
+                        fontWeight: 500,
+                        fontSize: "14px",
+                        lineHeight: "143%",
+                        letterSpacing: "0.17px",
+                        color: e.palette.text.primary
+                      },
+                      children: "Log"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ r(
+                  $,
+                  {
+                    onClick: c,
+                    variant: "text",
+                    sx: {
+                      fontWeight: 500,
+                      fontSize: "13px",
+                      lineHeight: "22px",
+                      letterSpacing: "0.46px",
+                      color: e.palette.primary.main,
+                      textTransform: "none",
+                      minWidth: "auto",
+                      padding: "4px 8px",
+                      "&:hover": {
+                        backgroundColor: `${e.palette.primary.main}14`
+                        // 8% opacity
+                      }
+                    },
+                    children: "Clear"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            l,
+            {
+              ref: x,
+              sx: {
+                flex: 1,
+                overflow: "auto",
+                padding: "8px 16px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "2px",
+                // Custom scrollbar styling to keep it consistently dark
+                scrollbarWidth: "thin",
+                scrollbarColor: `${e.palette.divider} transparent`,
+                "&::-webkit-scrollbar": {
+                  width: "6px"
+                },
+                "&::-webkit-scrollbar-track": {
+                  background: "transparent"
+                },
+                "&::-webkit-scrollbar-thumb": {
+                  backgroundColor: e.palette.divider,
+                  borderRadius: "3px",
+                  "&:hover": {
+                    backgroundColor: e.palette.divider
+                  }
+                }
+              },
+              children: o.length === 0 ? /* @__PURE__ */ r(
+                s,
+                {
+                  sx: {
+                    color: e.palette.text.disabled,
+                    fontSize: "12px",
+                    fontStyle: "italic",
+                    textAlign: "center",
+                    marginTop: 2
+                  },
+                  children: "No log messages"
+                }
+              ) : o.map((t) => /* @__PURE__ */ r(S, { message: t }, t.id))
+            }
+          )
+        ]
+      }
+    );
+  })
+);
+export {
+  ne as LogViewer,
+  ee as createDebugMessage,
+  re as createErrorMessage,
+  te as createInfoMessage,
+  p as createLogMessage,
+  oe as createWarningMessage,
+  ne as default
+};
+//# sourceMappingURL=LogViewer.js.map

package/dist/components/LogViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewer.js","sources":["../../src/components/LogViewer.tsx"],"sourcesContent":["import ContentCopy from \"@mui/icons-material/ContentCopy\"\nimport DocumentIcon from \"@mui/icons-material/DescriptionOutlined\"\nimport ExpandLess from \"@mui/icons-material/ExpandLess\"\nimport ExpandMore from \"@mui/icons-material/ExpandMore\"\nimport type { SxProps } from \"@mui/material/styles\"\nimport { useTheme } from \"@mui/material/styles\"\nimport Box from \"@mui/material/Box\"\nimport Button from \"@mui/material/Button\"\nimport IconButton from \"@mui/material/IconButton\"\nimport Paper from \"@mui/material/Paper\"\nimport Typography from \"@mui/material/Typography\"\nimport { observer } from \"mobx-react-lite\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { externalizeComponent } from \"../externalizeComponent\"\n\nexport type LogLevel = \"info\" | \"error\" | \"warning\" | \"debug\"\n\nexport type LogMessage = {\n  id: string\n  timestamp: Date\n  message: string\n  level: LogLevel\n}\n\nexport type LogViewerProps = {\n  /** Log messages to display */\n  messages: LogMessage[]\n  /** Callback when clear button is clicked */\n  onClear?: () => void\n  /** Height of the component */\n  height?: string | number\n  /** Additional styles */\n  sx?: SxProps\n}\n\n/**\n * Utility function to create a log message\n */\nexport const createLogMessage = (\n  message: string,\n  level: LogLevel,\n  id?: string,\n): LogMessage => ({\n  id: id || `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,\n  timestamp: new Date(),\n  message,\n  level,\n})\n\n/**\n * Utility function to create a debug log message\n */\nexport const createDebugMessage = (message: string, id?: string): LogMessage =>\n  createLogMessage(message, \"debug\", id)\n\n/**\n * Utility function to create an info log message\n */\nexport const createInfoMessage = (message: string, id?: string): LogMessage =>\n  createLogMessage(message, \"info\", id)\n\n/**\n * Utility function to create a warning log message\n */\nexport const createWarningMessage = (\n  message: string,\n  id?: string,\n): LogMessage => createLogMessage(message, \"warning\", id)\n\n/**\n * Utility function to create an error log message\n */\nexport const createErrorMessage = (message: string, id?: string): LogMessage =>\n  createLogMessage(message, \"error\", id)\n\n/**\n * A log viewer component that displays timestamped log messages with different levels.\n * Features a header with document icon and clear button, and scrollable message area.\n */\nexport const LogViewer = externalizeComponent(\n  observer((props: LogViewerProps) => {\n    const { messages = [], onClear, height = 400, sx } = props\n    const theme = useTheme()\n    const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n    // Auto-scroll to bottom when new messages are added\n    useEffect(() => {\n      if (messages.length === 0) return\n\n      const scrollContainer = scrollContainerRef.current\n      if (!scrollContainer) return\n\n      // Use a timeout to scroll after the DOM updates\n      const timeoutId = setTimeout(() => {\n        // Scroll the container to the bottom, not the entire browser\n        scrollContainer.scrollTop = scrollContainer.scrollHeight\n      }, 10)\n\n      return () => clearTimeout(timeoutId)\n    }, [messages.length])\n\n    const formatTimestamp = (timestamp: Date) => {\n      return timestamp.toLocaleTimeString(\"en-US\", {\n        hour12: false,\n        hour: \"2-digit\",\n        minute: \"2-digit\",\n        second: \"2-digit\",\n      })\n    }\n\n    const getMessageColor = (level: LogLevel) => {\n      switch (level) {\n        case \"error\":\n          return theme.palette.error.main\n        case \"warning\":\n          return theme.palette.warning.main\n        case \"info\":\n          return theme.palette.info.main\n        case \"debug\":\n          return theme.palette.text.disabled\n        default:\n          return theme.palette.text.secondary\n      }\n    }\n\n    // Component for individual log messages with expand/copy functionality\n    const LogMessage = ({ message }: { message: LogMessage }) => {\n      const [isExpanded, setIsExpanded] = useState(false)\n      const [copyTooltip, setCopyTooltip] = useState(false)\n      const [isHovered, setIsHovered] = useState(false)\n      const isLongMessage = message.message.length > 150\n\n      const handleCopy = async () => {\n        try {\n          await navigator.clipboard.writeText(message.message)\n          setCopyTooltip(true)\n          setTimeout(() => setCopyTooltip(false), 2000)\n        } catch (err) {\n          console.error(\"Failed to copy message:\", err)\n        }\n      }\n\n      const displayMessage =\n        isLongMessage && !isExpanded\n          ? `${message.message.substring(0, 150)}...`\n          : message.message\n\n      return (\n        <Box\n          key={message.id}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          sx={{\n            display: \"flex\",\n            gap: 1,\n            fontFamily: \"monospace\",\n            flexDirection: \"column\",\n            \"&:hover\": {\n              backgroundColor: theme.palette.action.hover,\n            },\n            borderRadius: \"4px\",\n            padding: \"2px 4px\",\n            margin: \"-2px -4px\",\n          }}\n        >\n          <Box sx={{ display: \"flex\", gap: 1 }}>\n            {/* Timestamp */}\n            <Typography\n              component=\"span\"\n              sx={{\n                fontWeight: 400,\n                fontSize: \"12px\",\n                lineHeight: \"18px\",\n                letterSpacing: \"0.4px\",\n                color: theme.palette.text.disabled,\n                whiteSpace: \"nowrap\",\n                flexShrink: 0,\n              }}\n            >\n              [{formatTimestamp(message.timestamp)}]\n            </Typography>\n\n            {/* Message */}\n            <Typography\n              component=\"span\"\n              sx={{\n                fontWeight: 400,\n                fontSize: \"12px\",\n                lineHeight: \"18px\",\n                letterSpacing: \"0.4px\",\n                color: getMessageColor(message.level),\n                wordBreak: \"break-word\",\n                overflowWrap: \"anywhere\",\n                hyphens: \"auto\",\n                flex: 1,\n                whiteSpace: \"pre-wrap\",\n              }}\n            >\n              {displayMessage}\n            </Typography>\n\n            {/* Action buttons - only visible on hover */}\n            <Box\n              sx={{\n                display: \"flex\",\n                alignItems: \"flex-start\",\n                gap: 0.5,\n                opacity: isHovered ? 1 : 0,\n                transition: \"opacity 0.2s ease-in-out\",\n                visibility: isHovered ? \"visible\" : \"hidden\",\n              }}\n            >\n              <IconButton\n                size=\"small\"\n                onClick={handleCopy}\n                sx={{\n                  padding: \"2px\",\n                  color: theme.palette.text.secondary,\n                  \"&:hover\": {\n                    backgroundColor: theme.palette.action.hover,\n                  },\n                }}\n                title={copyTooltip ? \"Copied!\" : \"Copy message\"}\n              >\n                <ContentCopy sx={{ fontSize: 12 }} />\n              </IconButton>\n\n              {isLongMessage && (\n                <IconButton\n                  size=\"small\"\n                  onClick={() => setIsExpanded(!isExpanded)}\n                  sx={{\n                    padding: \"2px\",\n                    color: theme.palette.text.secondary,\n                    \"&:hover\": {\n                      backgroundColor: theme.palette.action.hover,\n                    },\n                  }}\n                  title={isExpanded ? \"Collapse\" : \"Expand\"}\n                >\n                  {isExpanded ? (\n                    <ExpandLess sx={{ fontSize: 12 }} />\n                  ) : (\n                    <ExpandMore sx={{ fontSize: 12 }} />\n                  )}\n                </IconButton>\n              )}\n            </Box>\n          </Box>\n        </Box>\n      )\n    }\n\n    return (\n      <Paper\n        sx={{\n          backgroundColor:\n            theme.palette.backgroundPaperElevation?.[2] || \"#171927\",\n          backgroundImage: \"none\", // Override any gradient from elevation\n          height,\n          display: \"flex\",\n          flexDirection: \"column\",\n          overflow: \"hidden\",\n          ...sx,\n        }}\n      >\n        {/* Header */}\n        <Box\n          sx={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            padding: \"12px 16px\",\n          }}\n        >\n          <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n            <DocumentIcon\n              sx={{\n                fontSize: 16,\n                color: theme.palette.action.active,\n                opacity: 0.56,\n              }}\n            />\n            <Typography\n              sx={{\n                fontWeight: 500,\n                fontSize: \"14px\",\n                lineHeight: \"143%\",\n                letterSpacing: \"0.17px\",\n                color: theme.palette.text.primary,\n              }}\n            >\n              Log\n            </Typography>\n          </Box>\n          <Button\n            onClick={onClear}\n            variant=\"text\"\n            sx={{\n              fontWeight: 500,\n              fontSize: \"13px\",\n              lineHeight: \"22px\",\n              letterSpacing: \"0.46px\",\n              color: theme.palette.primary.main,\n              textTransform: \"none\",\n              minWidth: \"auto\",\n              padding: \"4px 8px\",\n              \"&:hover\": {\n                backgroundColor: `${theme.palette.primary.main}14`, // 8% opacity\n              },\n            }}\n          >\n            Clear\n          </Button>\n        </Box>\n\n        {/* Messages Container */}\n        <Box\n          ref={scrollContainerRef}\n          sx={{\n            flex: 1,\n            overflow: \"auto\",\n            padding: \"8px 16px\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"2px\",\n            // Custom scrollbar styling to keep it consistently dark\n            scrollbarWidth: \"thin\",\n            scrollbarColor: `${theme.palette.divider} transparent`,\n            \"&::-webkit-scrollbar\": {\n              width: \"6px\",\n            },\n            \"&::-webkit-scrollbar-track\": {\n              background: \"transparent\",\n            },\n            \"&::-webkit-scrollbar-thumb\": {\n              backgroundColor: theme.palette.divider,\n              borderRadius: \"3px\",\n              \"&:hover\": {\n                backgroundColor: theme.palette.divider,\n              },\n            },\n          }}\n        >\n          {messages.length === 0 ? (\n            <Typography\n              sx={{\n                color: theme.palette.text.disabled,\n                fontSize: \"12px\",\n                fontStyle: \"italic\",\n                textAlign: \"center\",\n                marginTop: 2,\n              }}\n            >\n              No log messages\n            </Typography>\n          ) : (\n            messages.map((message) => (\n              <LogMessage key={message.id} message={message} />\n            ))\n          )}\n        </Box>\n      </Paper>\n    )\n  }),\n)\n\nexport default LogViewer\n"],"names":["createLogMessage","message","level","id","createDebugMessage","createInfoMessage","createWarningMessage","createErrorMessage","LogViewer","externalizeComponent","observer","props","messages","onClear","height","sx","theme","useTheme","scrollContainerRef","useRef","useEffect","scrollContainer","timeoutId","formatTimestamp","timestamp","getMessageColor","LogMessage","isExpanded","setIsExpanded","useState","copyTooltip","setCopyTooltip","isHovered","setIsHovered","isLongMessage","handleCopy","err","displayMessage","jsx","Box","jsxs","Typography","IconButton","ContentCopy","ExpandLess","ExpandMore","Paper","_a","DocumentIcon","Button"],"mappings":"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"}

package/dist/components/ProgramControl.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),j=require("@mui/icons-material/Pause"),c=require("@mui/icons-material/PlayArrow"),t=require("@mui/icons-material/Stop"),I=require("@mui/material/styles"),s=require("@mui/material/Box"),P=require("@mui/material/Button"),f=require("@mui/material/Typography"),k=require("mobx-react-lite"),R=require("react-i18next"),T=require("../externalizeComponent.cjs");var d=(n=>(n.IDLE="idle",n.PREPARING="preparing",n.STARTING="starting",n.RUNNING="running",n.PAUSING="pausing",n.PAUSED="paused",n.STOPPING="stopping",n.COMPLETED="completed",n.FAILED="failed",n.STOPPED="stopped",n.ERROR="error",n))(d||{});const a=T.externalizeComponent(k.observer(({state:n,onRun:g,onPause:x,onStop:b,onReset:E,requiresManualReset:i=!1,variant:u="with_pause",className:C})=>{const p=I.useTheme(),{t:l}=R.useTranslation(),h=()=>{const r={run:{enabled:n==="idle"||n==="stopped"||n==="paused"||n==="completed"||n==="failed"||n==="error",label:l(n==="paused"?"ProgramControl.Resume.bt":n==="error"||n==="failed"?"ProgramControl.Retry.bt":"ProgramControl.Start.bt"),color:p.palette.success.main,onClick:g},pause:{enabled:n==="running",label:l("ProgramControl.Pause.bt"),color:"#FFFFFF33",onClick:x||(()=>{})},stop:{enabled:n==="preparing"||n==="starting"||n==="running"||n==="pausing"||n==="paused",label:l("ProgramControl.Stop.bt"),color:p.palette.error.main,onClick:b}};return u==="without_pause"?[r.run,r.stop]:[r.run,r.pause,r.stop]},m=r=>{const o={sx:{fontSize:"55px"}};if(u==="without_pause")return r===0?e.jsx(c,{...o}):e.jsx(t,{...o});switch(r){case 0:return e.jsx(c,{...o});case 1:return e.jsx(j,{...o});case 2:return e.jsx(t,{...o});default:return null}},y=h();return e.jsx(s,{className:C,sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:e.jsx(s,{sx:{display:"flex",gap:"40px",flexWrap:"wrap",justifyContent:"center",alignItems:"center"},children:y.map((r,o)=>e.jsxs(s,{sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:1},children:[e.jsx(P,{variant:"contained",disabled:!r.enabled||n==="preparing"||n==="starting"||n==="pausing"||n==="stopping"&&!i,onClick:r.onClick,sx:{width:"88px",height:"88px",borderRadius:"88px",backgroundColor:r.color,opacity:r.enabled&&n!=="preparing"&&n!=="starting"&&n!=="pausing"&&!(n==="stopping"&&!i)?1:.3,"&:hover":{backgroundColor:r.color,opacity:r.enabled&&n!=="preparing"&&n!=="starting"&&n!=="pausing"&&!(n==="stopping"&&!i)?.8:.3},"&:disabled":{backgroundColor:r.color,opacity:.3},minWidth:"88px",flexShrink:0},children:m(o)}),e.jsx(f,{variant:"body1",sx:{color:r.enabled&&n!=="preparing"&&n!=="starting"&&n!=="pausing"&&!(n==="stopping"&&!i)?r.color:p.palette.text.disabled,textAlign:"center",opacity:r.enabled&&n!=="preparing"&&n!=="starting"&&n!=="pausing"&&!(n==="stopping"&&!i)?1:.3},children:r.label})]},r.label))})})}));exports.ProgramControl=a;exports.ProgramState=d;exports.default=a;
+//# sourceMappingURL=ProgramControl.cjs.map

package/dist/components/ProgramControl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramControl.cjs","sources":["../../src/components/ProgramControl.tsx"],"sourcesContent":["import Pause from \"@mui/icons-material/Pause\"\nimport PlayArrow from \"@mui/icons-material/PlayArrow\"\nimport Stop from \"@mui/icons-material/Stop\"\nimport { useTheme } from \"@mui/material/styles\"\nimport Box from \"@mui/material/Box\"\nimport Button from \"@mui/material/Button\"\nimport Typography from \"@mui/material/Typography\"\nimport { observer } from \"mobx-react-lite\"\nimport { useTranslation } from \"react-i18next\"\nimport { externalizeComponent } from \"../externalizeComponent\"\n\nexport enum ProgramState {\n  IDLE = \"idle\",\n  PREPARING = \"preparing\",\n  STARTING = \"starting\",\n  RUNNING = \"running\",\n  PAUSING = \"pausing\",\n  PAUSED = \"paused\",\n  STOPPING = \"stopping\",\n  COMPLETED = \"completed\",\n  FAILED = \"failed\",\n  STOPPED = \"stopped\",\n  ERROR = \"error\",\n}\n\nexport interface ProgramControlProps {\n  /** The current state of the program control */\n  state: ProgramState\n  /** Callback fired when the run/resume button is clicked */\n  onRun: () => void\n  /** Callback fired when the pause button is clicked (only available in 'with_pause' variant) */\n  onPause?: () => void\n  /** Callback fired when the stop button is clicked */\n  onStop: () => void\n  /**\n   * Function to reset the component from 'stopping' state back to 'idle'.\n   * This must be called manually by the user when requiresManualReset is true.\n   */\n  onReset?: () => void\n  /**\n   * When true, the component will stay in 'stopping' state until onReset is called manually.\n   * When false (default), auto-resets to 'idle' after 2 seconds.\n   */\n  requiresManualReset?: boolean\n  /**\n   * Variant of the component:\n   * - 'with_pause': Shows run/pause/stop buttons (default)\n   * - 'without_pause': Shows only run/stop buttons\n   */\n  variant?: \"with_pause\" | \"without_pause\"\n  /** Additional CSS class name */\n  className?: string\n}\n\ninterface ButtonConfig {\n  enabled: boolean\n  label: string\n  color: string\n  onClick: () => void\n}\n\n/**\n * A control component for program execution with run, pause, and stop functionality.\n *\n * Features:\n * - State machine with idle, preparing, starting, running, pausing, paused, stopping, completed, failed, stopped, and error states\n * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)\n * - Optional manual reset functionality\n * - Responsive design with 110px circular buttons\n * - Material-UI theming integration\n */\nexport const ProgramControl = externalizeComponent(\n  observer(\n    ({\n      state,\n      onRun,\n      onPause,\n      onStop,\n      onReset,\n      requiresManualReset = false,\n      variant = \"with_pause\",\n      className,\n    }: ProgramControlProps) => {\n      const theme = useTheme()\n      const { t } = useTranslation()\n\n      const getButtonConfigs = (): ButtonConfig[] => {\n        const baseConfigs: Record<string, ButtonConfig> = {\n          run: {\n            enabled:\n              state === ProgramState.IDLE ||\n              state === ProgramState.STOPPED ||\n              state === ProgramState.PAUSED ||\n              state === ProgramState.COMPLETED ||\n              state === ProgramState.FAILED ||\n              state === ProgramState.ERROR,\n            label:\n              state === ProgramState.PAUSED\n                ? t(\"ProgramControl.Resume.bt\")\n                : state === ProgramState.ERROR || state === ProgramState.FAILED\n                  ? t(\"ProgramControl.Retry.bt\")\n                  : t(\"ProgramControl.Start.bt\"),\n            color: theme.palette.success.main,\n            onClick: onRun,\n          },\n          pause: {\n            enabled: state === ProgramState.RUNNING,\n            label: t(\"ProgramControl.Pause.bt\"),\n            color: \"#FFFFFF33\",\n            onClick: onPause || (() => {}),\n          },\n          stop: {\n            enabled:\n              state === ProgramState.PREPARING ||\n              state === ProgramState.STARTING ||\n              state === ProgramState.RUNNING ||\n              state === ProgramState.PAUSING ||\n              state === ProgramState.PAUSED,\n            label: t(\"ProgramControl.Stop.bt\"),\n            color: theme.palette.error.main,\n            onClick: onStop,\n          },\n        }\n\n        if (variant === \"without_pause\") {\n          return [baseConfigs.run, baseConfigs.stop]\n        }\n\n        return [baseConfigs.run, baseConfigs.pause, baseConfigs.stop]\n      }\n\n      const getButtonIcon = (index: number) => {\n        const iconProps = { sx: { fontSize: \"55px\" } }\n\n        if (variant === \"without_pause\") {\n          return index === 0 ? (\n            <PlayArrow {...iconProps} />\n          ) : (\n            <Stop {...iconProps} />\n          )\n        }\n\n        switch (index) {\n          case 0:\n            return <PlayArrow {...iconProps} />\n          case 1:\n            return <Pause {...iconProps} />\n          case 2:\n            return <Stop {...iconProps} />\n          default:\n            return null\n        }\n      }\n\n      const buttonConfigs = getButtonConfigs()\n\n      return (\n        <Box\n          className={className}\n          sx={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            gap: 2,\n          }}\n        >\n          <Box\n            sx={{\n              display: \"flex\",\n              gap: \"40px\",\n              flexWrap: \"wrap\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n            }}\n          >\n            {buttonConfigs.map((config, index) => (\n              <Box\n                key={config.label}\n                sx={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  alignItems: \"center\",\n                  gap: 1,\n                }}\n              >\n                <Button\n                  variant=\"contained\"\n                  disabled={\n                    !config.enabled ||\n                    state === ProgramState.PREPARING ||\n                    state === ProgramState.STARTING ||\n                    state === ProgramState.PAUSING ||\n                    (state === ProgramState.STOPPING && !requiresManualReset)\n                  }\n                  onClick={config.onClick}\n                  sx={{\n                    width: \"88px\",\n                    height: \"88px\",\n                    borderRadius: \"88px\",\n                    backgroundColor: config.color,\n                    opacity:\n                      config.enabled &&\n                      state !== ProgramState.PREPARING &&\n                      state !== ProgramState.STARTING &&\n                      state !== ProgramState.PAUSING &&\n                      !(state === ProgramState.STOPPING && !requiresManualReset)\n                        ? 1\n                        : 0.3,\n                    \"&:hover\": {\n                      backgroundColor: config.color,\n                      opacity:\n                        config.enabled &&\n                        state !== ProgramState.PREPARING &&\n                        state !== ProgramState.STARTING &&\n                        state !== ProgramState.PAUSING &&\n                        !(\n                          state === ProgramState.STOPPING &&\n                          !requiresManualReset\n                        )\n                          ? 0.8\n                          : 0.3,\n                    },\n                    \"&:disabled\": {\n                      backgroundColor: config.color,\n                      opacity: 0.3,\n                    },\n                    minWidth: \"88px\",\n                    flexShrink: 0,\n                  }}\n                >\n                  {getButtonIcon(index)}\n                </Button>\n\n                <Typography\n                  variant=\"body1\"\n                  sx={{\n                    color:\n                      config.enabled &&\n                      state !== ProgramState.PREPARING &&\n                      state !== ProgramState.STARTING &&\n                      state !== ProgramState.PAUSING &&\n                      !(state === ProgramState.STOPPING && !requiresManualReset)\n                        ? config.color\n                        : theme.palette.text.disabled,\n                    textAlign: \"center\",\n                    opacity:\n                      config.enabled &&\n                      state !== ProgramState.PREPARING &&\n                      state !== ProgramState.STARTING &&\n                      state !== ProgramState.PAUSING &&\n                      !(state === ProgramState.STOPPING && !requiresManualReset)\n                        ? 1\n                        : 0.3,\n                  }}\n                >\n                  {config.label}\n                </Typography>\n              </Box>\n            ))}\n          </Box>\n        </Box>\n      )\n    },\n  ),\n)\n\nexport default ProgramControl\n"],"names":["ProgramState","ProgramControl","externalizeComponent","observer","state","onRun","onPause","onStop","onReset","requiresManualReset","variant","className","theme","useTheme","t","useTranslation","getButtonConfigs","baseConfigs","getButtonIcon","index","iconProps","jsx","PlayArrow","Stop","Pause","buttonConfigs","Box","config","jsxs","Button","Typography"],"mappings":"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"}

package/dist/components/ProgramControl.d.ts

@@ -52,4 +52,5 @@ export interface ProgramControlProps {
 export declare const ProgramControl: (({ state, onRun, onPause, onStop, onReset, requiresManualReset, variant, className, }: ProgramControlProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
+export default ProgramControl;
 //# sourceMappingURL=ProgramControl.d.ts.map

package/dist/components/ProgramControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgramControl.d.ts","sourceRoot":"","sources":["../../src/components/ProgramControl.tsx"],"names":[],"mappings":"AAWA,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,YAAY,CAAA;IACnB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,qDAAqD;IACrD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,eAAe,CAAA;IACxC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AASD;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,0FAWpB,mBAAmB;;CAsLzB,CAAA"}
+{"version":3,"file":"ProgramControl.d.ts","sourceRoot":"","sources":["../../src/components/ProgramControl.tsx"],"names":[],"mappings":"AAWA,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,YAAY,CAAA;IACnB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,qDAAqD;IACrD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,eAAe,CAAA;IACxC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AASD;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,0FAWpB,mBAAmB;;CAsLzB,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/components/ProgramControl.js

@@ -0,0 +1,147 @@
+import { jsx as n, jsxs as C } from "react/jsx-runtime";
+import h from "@mui/icons-material/Pause";
+import c from "@mui/icons-material/PlayArrow";
+import s from "@mui/icons-material/Stop";
+import { useTheme as y } from "@mui/material/styles";
+import d from "@mui/material/Box";
+import I from "@mui/material/Button";
+import k from "@mui/material/Typography";
+import { observer as P } from "mobx-react-lite";
+import { useTranslation as E } from "react-i18next";
+import { externalizeComponent as T } from "../externalizeComponent.js";
+var w = /* @__PURE__ */ ((r) => (r.IDLE = "idle", r.PREPARING = "preparing", r.STARTING = "starting", r.RUNNING = "running", r.PAUSING = "pausing", r.PAUSED = "paused", r.STOPPING = "stopping", r.COMPLETED = "completed", r.FAILED = "failed", r.STOPPED = "stopped", r.ERROR = "error", r))(w || {});
+const _ = T(
+  P(
+    ({
+      state: r,
+      onRun: a,
+      onPause: t,
+      onStop: m,
+      onReset: A,
+      requiresManualReset: i = !1,
+      variant: u = "with_pause",
+      className: g
+    }) => {
+      const e = y(), { t: l } = E(), b = () => {
+        const o = {
+          run: {
+            enabled: r === "idle" || r === "stopped" || r === "paused" || r === "completed" || r === "failed" || r === "error",
+            label: l(r === "paused" ? "ProgramControl.Resume.bt" : r === "error" || r === "failed" ? "ProgramControl.Retry.bt" : "ProgramControl.Start.bt"),
+            color: e.palette.success.main,
+            onClick: a
+          },
+          pause: {
+            enabled: r === "running",
+            label: l("ProgramControl.Pause.bt"),
+            color: "#FFFFFF33",
+            onClick: t || (() => {
+            })
+          },
+          stop: {
+            enabled: r === "preparing" || r === "starting" || r === "running" || r === "pausing" || r === "paused",
+            label: l("ProgramControl.Stop.bt"),
+            color: e.palette.error.main,
+            onClick: m
+          }
+        };
+        return u === "without_pause" ? [o.run, o.stop] : [o.run, o.pause, o.stop];
+      }, x = (o) => {
+        const p = { sx: { fontSize: "55px" } };
+        if (u === "without_pause")
+          return o === 0 ? /* @__PURE__ */ n(c, { ...p }) : /* @__PURE__ */ n(s, { ...p });
+        switch (o) {
+          case 0:
+            return /* @__PURE__ */ n(c, { ...p });
+          case 1:
+            return /* @__PURE__ */ n(h, { ...p });
+          case 2:
+            return /* @__PURE__ */ n(s, { ...p });
+          default:
+            return null;
+        }
+      }, f = b();
+      return /* @__PURE__ */ n(
+        d,
+        {
+          className: g,
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2
+          },
+          children: /* @__PURE__ */ n(
+            d,
+            {
+              sx: {
+                display: "flex",
+                gap: "40px",
+                flexWrap: "wrap",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: f.map((o, p) => /* @__PURE__ */ C(
+                d,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ n(
+                      I,
+                      {
+                        variant: "contained",
+                        disabled: !o.enabled || r === "preparing" || r === "starting" || r === "pausing" || r === "stopping" && !i,
+                        onClick: o.onClick,
+                        sx: {
+                          width: "88px",
+                          height: "88px",
+                          borderRadius: "88px",
+                          backgroundColor: o.color,
+                          opacity: o.enabled && r !== "preparing" && r !== "starting" && r !== "pausing" && !(r === "stopping" && !i) ? 1 : 0.3,
+                          "&:hover": {
+                            backgroundColor: o.color,
+                            opacity: o.enabled && r !== "preparing" && r !== "starting" && r !== "pausing" && !(r === "stopping" && !i) ? 0.8 : 0.3
+                          },
+                          "&:disabled": {
+                            backgroundColor: o.color,
+                            opacity: 0.3
+                          },
+                          minWidth: "88px",
+                          flexShrink: 0
+                        },
+                        children: x(p)
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      k,
+                      {
+                        variant: "body1",
+                        sx: {
+                          color: o.enabled && r !== "preparing" && r !== "starting" && r !== "pausing" && !(r === "stopping" && !i) ? o.color : e.palette.text.disabled,
+                          textAlign: "center",
+                          opacity: o.enabled && r !== "preparing" && r !== "starting" && r !== "pausing" && !(r === "stopping" && !i) ? 1 : 0.3
+                        },
+                        children: o.label
+                      }
+                    )
+                  ]
+                },
+                o.label
+              ))
+            }
+          )
+        }
+      );
+    }
+  )
+);
+export {
+  _ as ProgramControl,
+  w as ProgramState,
+  _ as default
+};
+//# sourceMappingURL=ProgramControl.js.map

package/dist/components/ProgramControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramControl.js","sources":["../../src/components/ProgramControl.tsx"],"sourcesContent":["import Pause from \"@mui/icons-material/Pause\"\nimport PlayArrow from \"@mui/icons-material/PlayArrow\"\nimport Stop from \"@mui/icons-material/Stop\"\nimport { useTheme } from \"@mui/material/styles\"\nimport Box from \"@mui/material/Box\"\nimport Button from \"@mui/material/Button\"\nimport Typography from \"@mui/material/Typography\"\nimport { observer } from \"mobx-react-lite\"\nimport { useTranslation } from \"react-i18next\"\nimport { externalizeComponent } from \"../externalizeComponent\"\n\nexport enum ProgramState {\n  IDLE = \"idle\",\n  PREPARING = \"preparing\",\n  STARTING = \"starting\",\n  RUNNING = \"running\",\n  PAUSING = \"pausing\",\n  PAUSED = \"paused\",\n  STOPPING = \"stopping\",\n  COMPLETED = \"completed\",\n  FAILED = \"failed\",\n  STOPPED = \"stopped\",\n  ERROR = \"error\",\n}\n\nexport interface ProgramControlProps {\n  /** The current state of the program control */\n  state: ProgramState\n  /** Callback fired when the run/resume button is clicked */\n  onRun: () => void\n  /** Callback fired when the pause button is clicked (only available in 'with_pause' variant) */\n  onPause?: () => void\n  /** Callback fired when the stop button is clicked */\n  onStop: () => void\n  /**\n   * Function to reset the component from 'stopping' state back to 'idle'.\n   * This must be called manually by the user when requiresManualReset is true.\n   */\n  onReset?: () => void\n  /**\n   * When true, the component will stay in 'stopping' state until onReset is called manually.\n   * When false (default), auto-resets to 'idle' after 2 seconds.\n   */\n  requiresManualReset?: boolean\n  /**\n   * Variant of the component:\n   * - 'with_pause': Shows run/pause/stop buttons (default)\n   * - 'without_pause': Shows only run/stop buttons\n   */\n  variant?: \"with_pause\" | \"without_pause\"\n  /** Additional CSS class name */\n  className?: string\n}\n\ninterface ButtonConfig {\n  enabled: boolean\n  label: string\n  color: string\n  onClick: () => void\n}\n\n/**\n * A control component for program execution with run, pause, and stop functionality.\n *\n * Features:\n * - State machine with idle, preparing, starting, running, pausing, paused, stopping, completed, failed, stopped, and error states\n * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)\n * - Optional manual reset functionality\n * - Responsive design with 110px circular buttons\n * - Material-UI theming integration\n */\nexport const ProgramControl = externalizeComponent(\n  observer(\n    ({\n      state,\n      onRun,\n      onPause,\n      onStop,\n      onReset,\n      requiresManualReset = false,\n      variant = \"with_pause\",\n      className,\n    }: ProgramControlProps) => {\n      const theme = useTheme()\n      const { t } = useTranslation()\n\n      const getButtonConfigs = (): ButtonConfig[] => {\n        const baseConfigs: Record<string, ButtonConfig> = {\n          run: {\n            enabled:\n              state === ProgramState.IDLE ||\n              state === ProgramState.STOPPED ||\n              state === ProgramState.PAUSED ||\n              state === ProgramState.COMPLETED ||\n              state === ProgramState.FAILED ||\n              state === ProgramState.ERROR,\n            label:\n              state === ProgramState.PAUSED\n                ? t(\"ProgramControl.Resume.bt\")\n                : state === ProgramState.ERROR || state === ProgramState.FAILED\n                  ? t(\"ProgramControl.Retry.bt\")\n                  : t(\"ProgramControl.Start.bt\"),\n            color: theme.palette.success.main,\n            onClick: onRun,\n          },\n          pause: {\n            enabled: state === ProgramState.RUNNING,\n            label: t(\"ProgramControl.Pause.bt\"),\n            color: \"#FFFFFF33\",\n            onClick: onPause || (() => {}),\n          },\n          stop: {\n            enabled:\n              state === ProgramState.PREPARING ||\n              state === ProgramState.STARTING ||\n              state === ProgramState.RUNNING ||\n              state === ProgramState.PAUSING ||\n              state === ProgramState.PAUSED,\n            label: t(\"ProgramControl.Stop.bt\"),\n            color: theme.palette.error.main,\n            onClick: onStop,\n          },\n        }\n\n        if (variant === \"without_pause\") {\n          return [baseConfigs.run, baseConfigs.stop]\n        }\n\n        return [baseConfigs.run, baseConfigs.pause, baseConfigs.stop]\n      }\n\n      const getButtonIcon = (index: number) => {\n        const iconProps = { sx: { fontSize: \"55px\" } }\n\n        if (variant === \"without_pause\") {\n          return index === 0 ? (\n            <PlayArrow {...iconProps} />\n          ) : (\n            <Stop {...iconProps} />\n          )\n        }\n\n        switch (index) {\n          case 0:\n            return <PlayArrow {...iconProps} />\n          case 1:\n            return <Pause {...iconProps} />\n          case 2:\n            return <Stop {...iconProps} />\n          default:\n            return null\n        }\n      }\n\n      const buttonConfigs = getButtonConfigs()\n\n      return (\n        <Box\n          className={className}\n          sx={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            gap: 2,\n          }}\n        >\n          <Box\n            sx={{\n              display: \"flex\",\n              gap: \"40px\",\n              flexWrap: \"wrap\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n            }}\n          >\n            {buttonConfigs.map((config, index) => (\n              <Box\n                key={config.label}\n                sx={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  alignItems: \"center\",\n                  gap: 1,\n                }}\n              >\n                <Button\n                  variant=\"contained\"\n                  disabled={\n                    !config.enabled ||\n                    state === ProgramState.PREPARING ||\n                    state === ProgramState.STARTING ||\n                    state === ProgramState.PAUSING ||\n                    (state === ProgramState.STOPPING && !requiresManualReset)\n                  }\n                  onClick={config.onClick}\n                  sx={{\n                    width: \"88px\",\n                    height: \"88px\",\n                    borderRadius: \"88px\",\n                    backgroundColor: config.color,\n                    opacity:\n                      config.enabled &&\n                      state !== ProgramState.PREPARING &&\n                      state !== ProgramState.STARTING &&\n                      state !== ProgramState.PAUSING &&\n                      !(state === ProgramState.STOPPING && !requiresManualReset)\n                        ? 1\n                        : 0.3,\n                    \"&:hover\": {\n                      backgroundColor: config.color,\n                      opacity:\n                        config.enabled &&\n                        state !== ProgramState.PREPARING &&\n                        state !== ProgramState.STARTING &&\n                        state !== ProgramState.PAUSING &&\n                        !(\n                          state === ProgramState.STOPPING &&\n                          !requiresManualReset\n                        )\n                          ? 0.8\n                          : 0.3,\n                    },\n                    \"&:disabled\": {\n                      backgroundColor: config.color,\n                      opacity: 0.3,\n                    },\n                    minWidth: \"88px\",\n                    flexShrink: 0,\n                  }}\n                >\n                  {getButtonIcon(index)}\n                </Button>\n\n                <Typography\n                  variant=\"body1\"\n                  sx={{\n                    color:\n                      config.enabled &&\n                      state !== ProgramState.PREPARING &&\n                      state !== ProgramState.STARTING &&\n                      state !== ProgramState.PAUSING &&\n                      !(state === ProgramState.STOPPING && !requiresManualReset)\n                        ? config.color\n                        : theme.palette.text.disabled,\n                    textAlign: \"center\",\n                    opacity:\n                      config.enabled &&\n                      state !== ProgramState.PREPARING &&\n                      state !== ProgramState.STARTING &&\n                      state !== ProgramState.PAUSING &&\n                      !(state === ProgramState.STOPPING && !requiresManualReset)\n                        ? 1\n                        : 0.3,\n                  }}\n                >\n                  {config.label}\n                </Typography>\n              </Box>\n            ))}\n          </Box>\n        </Box>\n      )\n    },\n  ),\n)\n\nexport default ProgramControl\n"],"names":["ProgramState","ProgramControl","externalizeComponent","observer","state","onRun","onPause","onStop","onReset","requiresManualReset","variant","className","theme","useTheme","t","useTranslation","getButtonConfigs","baseConfigs","getButtonIcon","index","iconProps","jsx","PlayArrow","Stop","Pause","buttonConfigs","Box","config","jsxs","Button","Typography"],"mappings":"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"}

package/dist/components/ProgramStateIndicator.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),g=require("@mui/material/styles"),A=require("@mui/material/Chip"),u=require("@mui/material/Typography"),_=require("mobx-react-lite"),m=require("react-i18next"),b=require("../externalizeComponent.cjs"),a=require("./ProgramControl.cjs"),l=b.externalizeComponent(_.observer(({programState:T,safetyState:e,operationMode:i,className:c})=>{const t=g.useTheme(),{t:r}=m.useTranslation(),S=()=>{if(e==="SAFETY_STATE_DEVICE_EMERGENCY_STOP"||e==="SAFETY_STATE_ROBOT_EMERGENCY_STOP"||e==="SAFETY_STATE_STOP_0"||e==="SAFETY_STATE_STOP_1"||e==="SAFETY_STATE_STOP_2"||e==="SAFETY_STATE_PROTECTIVE_STOP"||e==="SAFETY_STATE_STOP"||e==="SAFETY_STATE_REDUCED"||e==="SAFETY_STATE_MASTERING"||e==="SAFETY_STATE_CONFIRM_SAFETY"||e==="SAFETY_STATE_OPERATOR_SAFETY"||e==="SAFETY_STATE_RECOVERY"||e==="SAFETY_STATE_VIOLATION")return{label:r("ProgramStateIndicator.EStop.lb"),color:t.palette.error.main};if(e==="SAFETY_STATE_UNKNOWN"||e==="SAFETY_STATE_FAULT")return{label:r("ProgramStateIndicator.Error.lb"),color:t.palette.error.main};if(e==="SAFETY_STATE_NORMAL")switch(T){case a.ProgramState.PREPARING:return{label:r("ProgramStateIndicator.Preparing.lb"),color:t.palette.warning.main};case a.ProgramState.STARTING:return{label:r("ProgramStateIndicator.Starting.lb"),color:t.palette.warning.main};case a.ProgramState.RUNNING:return{label:r("ProgramStateIndicator.Running.lb"),color:t.palette.success.main};case a.ProgramState.PAUSING:return{label:r("ProgramStateIndicator.Pausing.lb"),color:t.palette.warning.main};case a.ProgramState.PAUSED:return{label:r("ProgramStateIndicator.Paused.lb"),color:t.palette.grey[600]};case a.ProgramState.STOPPING:return{label:r("ProgramStateIndicator.Stopping.lb"),color:t.palette.warning.main};case a.ProgramState.COMPLETED:return{label:r("ProgramStateIndicator.Completed.lb"),color:t.palette.success.main};case a.ProgramState.FAILED:return{label:r("ProgramStateIndicator.Failed.lb"),color:t.palette.error.main};case a.ProgramState.STOPPED:return{label:r("ProgramStateIndicator.Stopped.lb"),color:t.palette.warning.main};case a.ProgramState.ERROR:return{label:r("ProgramStateIndicator.Error.lb"),color:t.palette.error.main};default:return{label:r("ProgramStateIndicator.Ready.lb"),color:t.palette.success.main}}return{label:r("ProgramStateIndicator.Idle.lb"),color:t.palette.grey[600]}},{label:E,color:o}=S(),P=`${E} / ${(()=>{switch(i){case"OPERATION_MODE_AUTO":return r("ProgramStateIndicator.Auto.lb");case"OPERATION_MODE_MANUAL":return r("ProgramStateIndicator.Manual.lb");case"OPERATION_MODE_MANUAL_T1":return r("ProgramStateIndicator.ManualT1.lb");case"OPERATION_MODE_MANUAL_T2":return r("ProgramStateIndicator.ManualT2.lb");default:return r("ProgramStateIndicator.Auto.lb")}})()}`;return n.jsx(A,{className:c,label:n.jsx(u,{variant:"body2",sx:{fontSize:"0.75rem",lineHeight:1.2},children:P}),variant:"filled",sx:{backgroundColor:o,color:t.palette.getContrastText(o),fontWeight:500,height:"auto","& .MuiChip-label":{paddingX:1.5,paddingY:.5}}})}));exports.ProgramStateIndicator=l;exports.default=l;
+//# sourceMappingURL=ProgramStateIndicator.cjs.map

package/dist/components/ProgramStateIndicator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramStateIndicator.cjs","sources":["../../src/components/ProgramStateIndicator.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\"\nimport Chip from \"@mui/material/Chip\"\nimport Typography from \"@mui/material/Typography\"\nimport type { OperationMode, SafetyStateType } from \"@wandelbots/nova-js/v2\"\nimport { observer } from \"mobx-react-lite\"\nimport { useTranslation } from \"react-i18next\"\nimport { externalizeComponent } from \"../externalizeComponent\"\nimport { ProgramState } from \"./ProgramControl\"\n\nexport interface ProgramStateIndicatorProps {\n  /** The current state of the program */\n  programState: ProgramState\n  /** The current safety state of the robot controller */\n  safetyState: SafetyStateType\n  /** The current operation mode of the robot controller */\n  operationMode: OperationMode\n  /** Additional CSS class name */\n  className?: string\n}\n\n/**\n * A state indicator component that displays the current program execution state\n * combined with robot controller safety and operation mode states.\n *\n * Features:\n * - Combines program state with safety and operation mode states\n * - Color-coded based on state severity (success, warning, error)\n * - Rendered as Material-UI filled chip\n * - Localization support via react-i18next\n */\nexport const ProgramStateIndicator = externalizeComponent(\n  observer(\n    ({\n      programState,\n      safetyState,\n      operationMode,\n      className,\n    }: ProgramStateIndicatorProps) => {\n      const theme = useTheme()\n      const { t } = useTranslation()\n\n      const getStateInfo = () => {\n        // First check for emergency stop or critical safety states\n        if (\n          safetyState === \"SAFETY_STATE_DEVICE_EMERGENCY_STOP\" ||\n          safetyState === \"SAFETY_STATE_ROBOT_EMERGENCY_STOP\" ||\n          safetyState === \"SAFETY_STATE_STOP_0\" ||\n          safetyState === \"SAFETY_STATE_STOP_1\" ||\n          safetyState === \"SAFETY_STATE_STOP_2\" ||\n          safetyState === \"SAFETY_STATE_PROTECTIVE_STOP\" ||\n          safetyState === \"SAFETY_STATE_STOP\" ||\n          safetyState === \"SAFETY_STATE_REDUCED\" ||\n          safetyState === \"SAFETY_STATE_MASTERING\" ||\n          safetyState === \"SAFETY_STATE_CONFIRM_SAFETY\" ||\n          safetyState === \"SAFETY_STATE_OPERATOR_SAFETY\" ||\n          safetyState === \"SAFETY_STATE_RECOVERY\" ||\n          safetyState === \"SAFETY_STATE_VIOLATION\"\n        ) {\n          return {\n            label: t(\"ProgramStateIndicator.EStop.lb\"),\n            color: theme.palette.error.main,\n          }\n        }\n\n        // Check for error states\n        if (\n          safetyState === \"SAFETY_STATE_UNKNOWN\" ||\n          safetyState === \"SAFETY_STATE_FAULT\"\n        ) {\n          return {\n            label: t(\"ProgramStateIndicator.Error.lb\"),\n            color: theme.palette.error.main,\n          }\n        }\n\n        // For normal safety states, check program state\n        if (safetyState === \"SAFETY_STATE_NORMAL\") {\n          switch (programState) {\n            case ProgramState.PREPARING:\n              return {\n                label: t(\"ProgramStateIndicator.Preparing.lb\"),\n                color: theme.palette.warning.main,\n              }\n            case ProgramState.STARTING:\n              return {\n                label: t(\"ProgramStateIndicator.Starting.lb\"),\n                color: theme.palette.warning.main,\n              }\n            case ProgramState.RUNNING:\n              return {\n                label: t(\"ProgramStateIndicator.Running.lb\"),\n                color: theme.palette.success.main,\n              }\n            case ProgramState.PAUSING:\n              return {\n                label: t(\"ProgramStateIndicator.Pausing.lb\"),\n                color: theme.palette.warning.main,\n              }\n            case ProgramState.PAUSED:\n              return {\n                label: t(\"ProgramStateIndicator.Paused.lb\"),\n                color: theme.palette.grey[600],\n              }\n            case ProgramState.STOPPING:\n              return {\n                label: t(\"ProgramStateIndicator.Stopping.lb\"),\n                color: theme.palette.warning.main,\n              }\n            case ProgramState.COMPLETED:\n              return {\n                label: t(\"ProgramStateIndicator.Completed.lb\"),\n                color: theme.palette.success.main,\n              }\n            case ProgramState.FAILED:\n              return {\n                label: t(\"ProgramStateIndicator.Failed.lb\"),\n                color: theme.palette.error.main,\n              }\n            case ProgramState.STOPPED:\n              return {\n                label: t(\"ProgramStateIndicator.Stopped.lb\"),\n                color: theme.palette.warning.main,\n              }\n            case ProgramState.ERROR:\n              return {\n                label: t(\"ProgramStateIndicator.Error.lb\"),\n                color: theme.palette.error.main,\n              }\n            default:\n              return {\n                label: t(\"ProgramStateIndicator.Ready.lb\"),\n                color: theme.palette.success.main,\n              }\n          }\n        }\n\n        // Default fallback\n        return {\n          label: t(\"ProgramStateIndicator.Idle.lb\"),\n          color: theme.palette.grey[600],\n        }\n      }\n\n      const { label, color } = getStateInfo()\n\n      // Add operation mode suffix if not automatic\n      const getOperationModeText = () => {\n        switch (operationMode) {\n          case \"OPERATION_MODE_AUTO\":\n            return t(\"ProgramStateIndicator.Auto.lb\")\n          case \"OPERATION_MODE_MANUAL\":\n            return t(\"ProgramStateIndicator.Manual.lb\")\n          case \"OPERATION_MODE_MANUAL_T1\":\n            return t(\"ProgramStateIndicator.ManualT1.lb\")\n          case \"OPERATION_MODE_MANUAL_T2\":\n            return t(\"ProgramStateIndicator.ManualT2.lb\")\n          default:\n            return t(\"ProgramStateIndicator.Auto.lb\") // Default to Auto for unknown modes\n        }\n      }\n\n      const fullLabel = `${label} / ${getOperationModeText()}`\n\n      return (\n        <Chip\n          className={className}\n          label={\n            <Typography\n              variant=\"body2\"\n              sx={{\n                fontSize: \"0.75rem\", // Smaller than body2\n                lineHeight: 1.2,\n              }}\n            >\n              {fullLabel}\n            </Typography>\n          }\n          variant=\"filled\"\n          sx={{\n            backgroundColor: color,\n            color: theme.palette.getContrastText(color),\n            fontWeight: 500,\n            height: \"auto\",\n            \"& .MuiChip-label\": {\n              paddingX: 1.5,\n              paddingY: 0.5,\n            },\n          }}\n        />\n      )\n    },\n  ),\n)\n\nexport default ProgramStateIndicator\n"],"names":["ProgramStateIndicator","externalizeComponent","observer","programState","safetyState","operationMode","className","theme","useTheme","t","useTranslation","getStateInfo","ProgramState","label","color","fullLabel","jsx","Chip","Typography"],"mappings":"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"}

package/dist/components/ProgramStateIndicator.d.ts

@@ -23,4 +23,5 @@ export interface ProgramStateIndicatorProps {
 export declare const ProgramStateIndicator: (({ programState, safetyState, operationMode, className, }: ProgramStateIndicatorProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
+export default ProgramStateIndicator;
 //# sourceMappingURL=ProgramStateIndicator.d.ts.map

package/dist/components/ProgramStateIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgramStateIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ProgramStateIndicator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAI5E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE/C,MAAM,WAAW,0BAA0B;IACzC,uCAAuC;IACvC,YAAY,EAAE,YAAY,CAAA;IAC1B,uDAAuD;IACvD,WAAW,EAAE,eAAe,CAAA;IAC5B,yDAAyD;IACzD,aAAa,EAAE,aAAa,CAAA;IAC5B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,8DAO3B,0BAA0B;;CA2JhC,CAAA"}
+{"version":3,"file":"ProgramStateIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ProgramStateIndicator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAI5E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE/C,MAAM,WAAW,0BAA0B;IACzC,uCAAuC;IACvC,YAAY,EAAE,YAAY,CAAA;IAC1B,uDAAuD;IACvD,WAAW,EAAE,eAAe,CAAA;IAC5B,yDAAyD;IACzD,aAAa,EAAE,aAAa,CAAA;IAC5B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,8DAO3B,0BAA0B;;CA2JhC,CAAA;AAED,eAAe,qBAAqB,CAAA"}