@procaaso/alphinity-ui-components 1.0.0 → 1.0.1

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,23 +17,58 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  CardHeader: () => CardHeader,
+  CardUnit: () => CardUnit,
+  CardValue: () => CardValue,
+  CircularGauge: () => CircularGauge,
   ControlPanel: () => ControlPanel,
+  DashboardCard: () => DashboardCard,
+  DisplayModeToggle: () => DisplayModeToggle,
+  EquipmentIndicator: () => EquipmentIndicator,
+  EquipmentIndicatorWithSparkline: () => EquipmentIndicatorWithSparkline,
+  FixedSVGContainer: () => FixedSVGContainer,
+  FooterPanel: () => FooterPanel,
+  FullscreenContainer: () => FullscreenContainer,
+  FullscreenWorkspace: () => FullscreenWorkspace,
+  LeftPanel: () => LeftPanel,
+  LeftToggleButton: () => LeftToggleButton,
+  LegacyValueEntry: () => LegacyValueEntry,
+  PanelContent: () => PanelContent,
+  PanelTabs: () => PanelTabs,
+  RightPanel: () => RightPanel,
+  RightToggleButton: () => RightToggleButton,
+  SVGArea: () => SVGArea,
+  SVGLockedOverlay: () => SVGLockedOverlay,
+  ScrollableSVGWrapper: () => ScrollableSVGWrapper,
   Selector: () => Selector,
+  Sparkline: () => Sparkline,
   StatusIndicator: () => StatusIndicator,
   ThemeProvider: () => ThemeProvider,
   ThemeToggle: () => ThemeToggle,
+  TrendLine: () => TrendLine,
   ValueEntry: () => ValueEntry,
+  ZoomButton: () => ZoomButton,
+  ZoomControls: () => ZoomControls,
+  overlayStyles: () => overlayStyles,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/Button.tsx
+// src/components/Button/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Button = ({
   variant = "primary",
@@ -39,14 +76,163 @@ var Button = ({
   className = "",
   ...props
 }) => {
-  const baseStyles = "h-20 min-w-[160px] px-12 py-5 rounded-3xl font-bold text-2xl transition-all duration-300 transform hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-offset-3 focus:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none shadow-2xl backdrop-blur-sm";
-  const variantStyles = variant === "primary" ? "bg-gradient-to-br from-blue-400 via-blue-600 to-purple-700 hover:from-blue-500 hover:via-blue-700 hover:to-purple-800 text-white shadow-blue-600/40 focus:ring-blue-400/70 border border-blue-300/40 hover:shadow-2xl hover:shadow-blue-600/60 hover:border-blue-200/50" : "bg-gradient-to-br from-slate-500 via-slate-700 to-slate-900 hover:from-slate-400 hover:via-slate-600 hover:to-slate-800 text-slate-100 shadow-slate-600/40 focus:ring-slate-400/70 border border-slate-400/40 hover:shadow-2xl hover:shadow-slate-600/60 hover:border-slate-300/50";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `${baseStyles} ${variantStyles} ${className}`.trim(), ...props, children });
+  const baseClass = "ui-btn";
+  const variantClass = variant ? `ui-btn--${variant}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `${baseClass} ${variantClass} ${className}`.trim(), ...props, children });
 };
 
-// src/TestValueEntry.tsx
+// src/components/ControlPanel/ControlPanel.tsx
+var import_react4 = require("react");
+
+// src/components/Selector/Selector.tsx
 var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var Selector = ({
+  value,
+  onChange,
+  options,
+  placeholder = "Select option...",
+  disabled = false,
+  status = "normal",
+  size = "medium",
+  label,
+  dropdownUp: _dropdownUp = false,
+  className = "",
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+  const selectorRef = (0, import_react.useRef)(null);
+  const dropdownRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (selectorRef.current && !selectorRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(
+            Math.max(
+              0,
+              options.findIndex((opt) => opt.value === value)
+            )
+          );
+        } else if (focusedIndex >= 0) {
+          const selectedOption2 = options[focusedIndex];
+          if (!selectedOption2.disabled) {
+            onChange(selectedOption2.value);
+            setIsOpen(false);
+            setFocusedIndex(-1);
+          }
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(
+            Math.max(
+              0,
+              options.findIndex((opt) => opt.value === value)
+            )
+          );
+        } else {
+          setFocusedIndex((prev) => {
+            const nextIndex = Math.min(prev + 1, options.length - 1);
+            return options[nextIndex]?.disabled ? prev : nextIndex;
+          });
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (isOpen) {
+          setFocusedIndex((prev) => {
+            const nextIndex = Math.max(prev - 1, 0);
+            return options[nextIndex]?.disabled ? prev : nextIndex;
+          });
+        }
+        break;
+    }
+  };
+  const baseClass = "ui-selector";
+  const statusClass = status ? `ui-selector--${status}` : "";
+  const sizeClass = size ? `ui-selector--${size}` : "";
+  const selectedOption = options.find((opt) => opt.value === value);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `ui-selector-container ${className}`.trim(), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "ui-selector-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: selectorRef, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: `${baseClass} ${statusClass} ${sizeClass}`.trim(),
+          onClick: () => !disabled && setIsOpen(!isOpen),
+          onKeyDown: handleKeyDown,
+          tabIndex: disabled ? -1 : 0,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ui-selector-value", children: selectedOption ? selectedOption.label : placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "ui-selector-arrow", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: dropdownRef, className: "ui-selector-dropdown", role: "listbox", children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: `ui-selector-option${option.disabled ? " is-disabled" : ""}${option.value === value ? " is-selected" : ""}`,
+          onClick: () => {
+            if (!option.disabled) {
+              onChange(option.value);
+              setIsOpen(false);
+              setFocusedIndex(-1);
+            }
+          },
+          onMouseEnter: () => !option.disabled && setFocusedIndex(index),
+          role: "option",
+          "aria-selected": option.value === value,
+          "aria-disabled": option.disabled,
+          title: option.description,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ui-selector-option-label", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: option.label }),
+              option.value === value && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "ui-selector-check", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                  clipRule: "evenodd"
+                }
+              ) })
+            ] }),
+            option.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ui-selector-option-desc", children: option.description })
+          ]
+        },
+        option.value
+      )) })
+    ] })
+  ] });
+};
+
+// src/components/ValueEntry/ValueEntry.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ValueEntry = ({
   value,
   onChange,
@@ -62,13 +248,103 @@ var ValueEntry = ({
   disabled,
   ...props
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react.useState)(String(value));
-  const [isEditing, setIsEditing] = (0, import_react.useState)(false);
-  const handleFocus = (0, import_react.useCallback)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react2.useState)(String(value));
+  const [isEditing, setIsEditing] = (0, import_react2.useState)(false);
+  const handleFocus = (0, import_react2.useCallback)(() => {
+    setIsEditing(true);
+    setDisplayValue(String(value));
+  }, [value]);
+  const handleBlur = (0, import_react2.useCallback)(() => {
+    setIsEditing(false);
+    let newValue = displayValue;
+    if (inputType === "numeric") {
+      const numValue = parseFloat(displayValue);
+      if (!isNaN(numValue)) {
+        let constrainedValue = numValue;
+        if (min !== void 0) constrainedValue = Math.max(min, constrainedValue);
+        if (max !== void 0) constrainedValue = Math.min(max, constrainedValue);
+        constrainedValue = parseFloat(constrainedValue.toFixed(precision));
+        newValue = constrainedValue;
+        setDisplayValue(String(constrainedValue));
+      } else {
+        setDisplayValue(String(value));
+        return;
+      }
+    }
+    if (newValue !== value) {
+      onChange(newValue);
+    }
+  }, [displayValue, inputType, min, max, precision, value, onChange]);
+  const handleChange = (0, import_react2.useCallback)((e) => {
+    setDisplayValue(e.target.value);
+  }, []);
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        e.currentTarget.blur();
+      }
+      if (e.key === "Escape") {
+        setDisplayValue(String(value));
+        e.currentTarget.blur();
+      }
+    },
+    [value]
+  );
+  const baseClass = "ui-value-entry";
+  const unitClass = unit ? "ui-value-entry--with-unit" : "";
+  const currentStatus = disabled || readOnly ? "disabled" : status;
+  const statusVariantClass = currentStatus ? `ui-value-entry--${currentStatus}` : "";
+  const displayText = isEditing ? displayValue : inputType === "numeric" ? Number(value).toFixed(precision) : String(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ui-value-entry-container", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "ui-value-entry-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ui-value-entry-wrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          type: inputType === "numeric" ? "text" : "text",
+          value: displayText,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onKeyDown: handleKeyDown,
+          disabled,
+          readOnly,
+          className: `${baseClass} ${statusVariantClass} ${unitClass} ${className}`.trim(),
+          ...props
+        }
+      ),
+      unit && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-value-entry-unit", children: unit }),
+      status === "alarm" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ui-value-entry-badge ui-value-entry-badge--alarm" }),
+      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ui-value-entry-badge ui-value-entry-badge--warning" })
+    ] })
+  ] });
+};
+
+// src/components/ValueEntry/LegacyValueEntry.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var LegacyValueEntry = ({
+  value,
+  onChange,
+  unit,
+  status = "normal",
+  min,
+  max,
+  precision = 2,
+  inputType = "numeric",
+  label,
+  readOnly = false,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const [displayValue, setDisplayValue] = (0, import_react3.useState)(String(value));
+  const [isEditing, setIsEditing] = (0, import_react3.useState)(false);
+  const handleFocus = (0, import_react3.useCallback)(() => {
     setIsEditing(true);
     setDisplayValue(String(value));
   }, [value]);
-  const handleBlur = (0, import_react.useCallback)(() => {
+  const handleBlur = (0, import_react3.useCallback)(() => {
     setIsEditing(false);
     let newValue = displayValue;
     if (inputType === "numeric") {
@@ -89,10 +365,10 @@ var ValueEntry = ({
       onChange(newValue);
     }
   }, [displayValue, inputType, min, max, precision, value, onChange]);
-  const handleChange = (0, import_react.useCallback)((e) => {
+  const handleChange = (0, import_react3.useCallback)((e) => {
     setDisplayValue(e.target.value);
   }, []);
-  const handleKeyDown = (0, import_react.useCallback)(
+  const handleKeyDown = (0, import_react3.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.currentTarget.blur();
@@ -176,7 +452,7 @@ var ValueEntry = ({
     zIndex: 10,
     boxShadow: "0 2px 8px rgba(59, 130, 246, 0.4)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       style: {
@@ -186,7 +462,7 @@ var ValueEntry = ({
         gap: "0.75rem"
       },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "label",
           {
             style: {
@@ -199,8 +475,8 @@ var ValueEntry = ({
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative", display: "inline-flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", display: "inline-flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
               type: "text",
@@ -221,8 +497,8 @@ var ValueEntry = ({
               ...props
             }
           ),
-          unit && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: unitStyle, children: unit }),
-          status === "alarm" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          unit && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: unitStyle, children: unit }),
+          status === "alarm" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
               style: {
@@ -238,7 +514,7 @@ var ValueEntry = ({
               }
             }
           ),
-          status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
               style: {
@@ -259,8 +535,174 @@ var ValueEntry = ({
   );
 };
 
-// src/StatusIndicator.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+// src/components/ControlPanel/ControlPanel.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ControlPanel = ({
+  title,
+  selectedMode,
+  modeOptions,
+  onModeChange,
+  setpointValue,
+  onSetpointChange,
+  secondSetpointValue,
+  onSecondSetpointChange,
+  modeConfigs = {},
+  defaultUnit = "Units",
+  defaultLabel = "Setpoint",
+  defaultMin = 0,
+  defaultMax = 100,
+  defaultPrecision = 2,
+  status = "normal",
+  collapsed = false,
+  onCollapseChange,
+  size = "medium",
+  setpointReadOnly = false,
+  showStartStopButtons = false,
+  isRunning = false,
+  onStart,
+  onStop,
+  startButtonText = "Start",
+  stopButtonText = "Stop",
+  className = "",
+  ...props
+}) => {
+  const [isExpanded, setIsExpanded] = (0, import_react4.useState)(!collapsed);
+  const toggleExpanded = () => {
+    const newExpanded = !isExpanded;
+    setIsExpanded(newExpanded);
+    onCollapseChange?.(!newExpanded);
+  };
+  const currentModeConfig = modeConfigs[selectedMode] || {};
+  const currentUnit = currentModeConfig.unit || defaultUnit;
+  const currentLabel = currentModeConfig.label || defaultLabel;
+  const currentMin = currentModeConfig.min ?? defaultMin;
+  const currentMax = currentModeConfig.max ?? defaultMax;
+  const currentPrecision = currentModeConfig.precision ?? defaultPrecision;
+  const hasSecondSetpoint = currentModeConfig.hasSecondSetpoint || false;
+  const baseClass = "ui-control-panel";
+  const statusClass = status ? `ui-control-panel--${status}` : "";
+  const sizeClass = size ? `ui-control-panel--${size}` : "";
+  const expandedClass = isExpanded ? "is-expanded" : "is-collapsed";
+  const collapsibleClass = onCollapseChange ? "is-collapsible" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: `${baseClass} ${statusClass} ${sizeClass} ${expandedClass} ${collapsibleClass} ${className}`.trim(),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `ui-control-panel-badge ui-control-panel-badge--${status}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            className: "ui-control-panel-header",
+            onClick: onCollapseChange ? toggleExpanded : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "ui-control-panel-title", children: title }),
+              onCollapseChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "svg",
+                {
+                  className: "ui-control-panel-chevron",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ui-control-panel-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Selector,
+            {
+              value: selectedMode,
+              onChange: onModeChange,
+              options: modeOptions,
+              label: "Control Mode",
+              status,
+              size: size === "small" ? "small" : size === "large" ? "large" : "medium",
+              disabled: status === "disabled"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            LegacyValueEntry,
+            {
+              value: setpointValue,
+              onChange: onSetpointChange,
+              label: currentLabel,
+              unit: currentUnit,
+              min: currentMin,
+              max: currentMax,
+              precision: currentPrecision,
+              status,
+              readOnly: setpointReadOnly || status === "disabled",
+              disabled: status === "disabled"
+            }
+          ) }),
+          hasSecondSetpoint && onSecondSetpointChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            LegacyValueEntry,
+            {
+              value: secondSetpointValue || 0,
+              onChange: onSecondSetpointChange,
+              label: currentModeConfig.secondLabel || "Time",
+              unit: currentModeConfig.secondUnit || "sec",
+              min: currentModeConfig.secondMin ?? 0,
+              max: currentModeConfig.secondMax ?? 999,
+              precision: currentModeConfig.secondPrecision ?? 0,
+              status,
+              readOnly: setpointReadOnly || status === "disabled",
+              disabled: status === "disabled"
+            }
+          ) }),
+          showStartStopButtons && (onStart || onStop) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ui-control-panel-buttons", children: [
+            onStart && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              Button,
+              {
+                variant: "primary",
+                onClick: onStart,
+                disabled: isRunning || status === "disabled",
+                className: isRunning ? "is-running" : "",
+                children: startButtonText
+              }
+            ),
+            onStop && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              Button,
+              {
+                variant: "secondary",
+                onClick: onStop,
+                disabled: !isRunning || status === "disabled",
+                className: `ui-control-panel-stop-btn${!isRunning ? " is-disabled" : ""}`,
+                children: stopButtonText
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ui-control-panel-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+              "Mode: ",
+              selectedMode.toUpperCase()
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ui-control-panel-info-values", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                "SP: ",
+                String(setpointValue),
+                currentUnit
+              ] }),
+              hasSecondSetpoint && secondSetpointValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                currentModeConfig.secondLabel,
+                ": ",
+                String(secondSetpointValue),
+                currentModeConfig.secondUnit
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/StatusIndicator/StatusIndicator.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var StatusIndicator = ({
   status,
   size = "medium",
@@ -272,712 +714,940 @@ var StatusIndicator = ({
   className = "",
   ...props
 }) => {
-  const sizeStyles = {
-    small: "w-5 h-5",
-    medium: "w-7 h-7",
-    large: "w-10 h-10"
-  };
-  const shapeStyles = {
-    circle: "rounded-full",
-    square: "rounded-lg",
-    diamond: "rotate-45 rounded-lg"
-  };
-  const statusStyles = {
-    off: "bg-gradient-to-br from-slate-500 to-slate-600 border-slate-400 shadow-slate-500/30",
-    normal: "bg-gradient-to-br from-emerald-400 via-green-500 to-green-600 border-emerald-300 shadow-green-500/70",
-    alarm: "bg-gradient-to-br from-red-400 via-red-500 to-red-600 border-red-300 shadow-red-500/70",
-    warning: "bg-gradient-to-br from-amber-400 via-yellow-500 to-orange-500 border-amber-300 shadow-yellow-500/70",
-    active: "bg-gradient-to-br from-blue-400 via-blue-500 to-indigo-600 border-blue-300 shadow-blue-500/70",
-    fault: "bg-gradient-to-br from-purple-400 via-purple-500 to-violet-600 border-purple-300 shadow-purple-500/70"
-  };
-  const animationStyles = {
-    none: "",
-    pulse: "animate-pulse",
-    blink: "animate-bounce",
-    flash: "animate-ping"
-  };
-  const ledEffect = led ? "shadow-lg border-2" : "border";
-  const glowEffect = status !== "off" && led ? "shadow-lg" : "";
-  const indicatorClasses = `
-    ${sizeStyles[size]}
-    ${shapeStyles[shape]}
-    ${statusStyles[status]}
-    ${animationStyles[animation]}
-    ${ledEffect}
-    ${glowEffect}
-    inline-block
-    transition-all
-    duration-300
-  `.trim().replace(/\s+/g, " ");
-  const labelClasses = "text-sm font-medium text-gray-700 uppercase tracking-wide select-none";
+  const baseClass = "ui-status-indicator";
+  const statusClass = status ? `ui-status-indicator--${status}` : "";
+  const sizeClass = size ? `ui-status-indicator--${size}` : "";
+  const shapeClass = shape ? `ui-status-indicator--${shape}` : "";
+  const animationClass = animation ? `ui-status-indicator--${animation}` : "";
+  const ledClass = led ? "ui-status-indicator--led" : "";
   const getContainerLayout = () => {
     switch (labelPosition) {
       case "left":
-        return "inline-flex items-center gap-2 flex-row-reverse";
+        return "ui-status-indicator-container ui-status-indicator-label-left";
       case "right":
-        return "inline-flex items-center gap-2";
+        return "ui-status-indicator-container ui-status-indicator-label-right";
       case "top":
-        return "inline-flex flex-col-reverse items-center gap-1";
+        return "ui-status-indicator-container ui-status-indicator-label-top";
       case "bottom":
-        return "inline-flex flex-col items-center gap-1";
+        return "ui-status-indicator-container ui-status-indicator-label-bottom";
       default:
-        return "inline-flex items-center gap-2";
-    }
-  };
-  const getAriaLabel = () => {
-    if (label) {
-      return `${label}: ${status}`;
+        return "ui-status-indicator-container ui-status-indicator-label-right";
     }
-    return `Status indicator: ${status}`;
   };
-  const getAriaDescription = () => {
-    const descriptions = {
-      off: "Inactive or disabled state",
-      normal: "Normal operating condition",
-      alarm: "Critical alarm condition requiring attention",
-      warning: "Warning condition that should be monitored",
-      active: "Currently active or running",
-      fault: "System fault or error condition"
-    };
-    return descriptions[status];
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${getContainerLayout()} ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: getContainerLayout(), children: [
+    label && (labelPosition === "left" || labelPosition === "top") && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ui-status-indicator-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
       {
-        className: indicatorClasses,
-        role: "status",
-        "aria-label": getAriaLabel(),
-        "aria-description": getAriaDescription(),
-        "data-status": status,
-        "data-testid": `status-indicator-${status}`
+        className: `
+          ${baseClass}
+          ${statusClass}
+          ${sizeClass}
+          ${shapeClass}
+          ${animationClass}
+          ${ledClass}
+          ${className}
+        `.replace(/\s+/g, " ").trim(),
+        ...props
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: labelClasses, children: label })
+    label && (labelPosition === "right" || labelPosition === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ui-status-indicator-label", children: label })
   ] });
 };
 
-// src/Selector.tsx
-var import_react2 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Selector = ({
-  value,
-  onChange,
-  options,
-  placeholder = "Select option...",
-  disabled = false,
-  status = "normal",
-  size = "medium",
-  label,
-  dropdownUp = false,
-  className = "",
-  ...props
-}) => {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
-  const selectorRef = (0, import_react2.useRef)(null);
-  const dropdownRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
-    const handleClickOutside = (event) => {
-      if (selectorRef.current && !selectorRef.current.contains(event.target)) {
-        setIsOpen(false);
-        setFocusedIndex(-1);
+// src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_material3 = require("@mui/material");
+
+// src/components/layout/FullscreenWorkspace/FullscreenWorkspace.styles.tsx
+var import_material = require("@mui/material");
+var import_styled = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FullscreenContainer = (0, import_styled.default)(import_material.Box)(
+  ({ leftCollapsed, rightCollapsed }) => {
+    const getGridTemplateAreas = () => {
+      if (leftCollapsed && rightCollapsed) {
+        return `"svg-area" "footer"`;
+      }
+      if (leftCollapsed) {
+        return `"svg-area right-panel" "footer footer"`;
       }
+      if (rightCollapsed) {
+        return `"left-panel svg-area" "footer footer"`;
+      }
+      return `"left-panel svg-area right-panel" "footer footer footer"`;
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const handleKeyDown = (e) => {
-    if (disabled) return;
-    switch (e.key) {
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-          setFocusedIndex(
-            Math.max(
-              0,
-              options.findIndex((opt) => opt.value === value)
-            )
-          );
-        } else if (focusedIndex >= 0) {
-          const selectedOption2 = options[focusedIndex];
-          if (!selectedOption2.disabled) {
-            onChange(selectedOption2.value);
-            setIsOpen(false);
-            setFocusedIndex(-1);
-          }
-        }
-        break;
-      case "Escape":
-        setIsOpen(false);
-        setFocusedIndex(-1);
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-          setFocusedIndex(
-            Math.max(
-              0,
-              options.findIndex((opt) => opt.value === value)
-            )
-          );
-        } else {
-          setFocusedIndex((prev) => {
-            const nextIndex = Math.min(prev + 1, options.length - 1);
-            return options[nextIndex]?.disabled ? prev : nextIndex;
-          });
-        }
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        if (isOpen) {
-          setFocusedIndex((prev) => {
-            const nextIndex = Math.max(prev - 1, 0);
-            return options[nextIndex]?.disabled ? prev : nextIndex;
-          });
-        }
-        break;
+    const getGridTemplateColumns = () => {
+      if (leftCollapsed && rightCollapsed) {
+        return "1fr";
+      }
+      if (leftCollapsed) {
+        return "1fr 380px";
+      }
+      if (rightCollapsed) {
+        return "420px 1fr";
+      }
+      return "420px 1fr 380px";
+    };
+    return {
+      width: "100vw",
+      height: "100vh",
+      background: "#f5f5f5",
+      display: "grid",
+      gridTemplateAreas: getGridTemplateAreas(),
+      gridTemplateRows: "1fr 100px",
+      gridTemplateColumns: getGridTemplateColumns(),
+      gap: "10px",
+      padding: "10px",
+      boxSizing: "border-box",
+      transition: "grid-template-columns 0.3s ease-in-out"
+    };
+  }
+);
+var LeftPanel = (0, import_styled.default)(import_material.Box)(({ collapsed }) => ({
+  gridArea: "left-panel",
+  background: "rgba(255, 255, 255, 0.0)",
+  border: "1px solid #ddd",
+  borderRadius: "8px",
+  padding: collapsed ? "0" : "15px",
+  overflowY: "auto",
+  display: collapsed ? "none" : "block",
+  transition: "all 0.3s ease-in-out"
+}));
+var RightPanel = (0, import_styled.default)(import_material.Box)(({ collapsed }) => ({
+  gridArea: "right-panel",
+  background: "rgba(255, 255, 255, 0.0)",
+  border: "1px solid #ddd",
+  borderRadius: "8px",
+  padding: collapsed ? "0" : "15px",
+  overflowY: "auto",
+  display: collapsed ? "none" : "block",
+  transition: "all 0.3s ease-in-out"
+}));
+var SVGArea = (0, import_styled.default)(import_material.Box)({
+  gridArea: "svg-area",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  position: "relative",
+  background: "rgba(255, 255, 255, 0.0)",
+  border: "1px solid #ddd",
+  borderRadius: "8px",
+  overflow: "auto",
+  width: "100%",
+  height: "100%"
+});
+var LeftToggleButton = (0, import_styled.default)(import_material.IconButton)(
+  ({ collapsed }) => ({
+    position: "absolute",
+    left: collapsed ? "10px" : "410px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1e3,
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    border: "1px solid #ddd",
+    transition: "left 0.3s ease-in-out",
+    "&:hover": {
+      backgroundColor: "rgba(255, 255, 255, 1)"
     }
-  };
-  const selectedOption = options.find((opt) => opt.value === value);
-  const getSizeStyles = () => {
-    switch (size) {
-      case "small":
-        return {
-          height: "2.5rem",
-          padding: "0.5rem 0.75rem",
-          fontSize: "0.875rem",
-          iconSize: "1rem"
-        };
-      case "large":
-        return {
-          height: "4rem",
-          padding: "1rem 1.5rem",
-          fontSize: "1.25rem",
-          iconSize: "1.5rem"
-        };
-      default:
-        return {
-          height: "3rem",
-          padding: "0.75rem 1rem",
-          fontSize: "1rem",
-          iconSize: "1.25rem"
-        };
+  })
+);
+var RightToggleButton = (0, import_styled.default)(import_material.IconButton)(
+  ({ collapsed }) => ({
+    position: "absolute",
+    right: collapsed ? "10px" : "370px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1e3,
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    border: "1px solid #ddd",
+    transition: "right 0.3s ease-in-out",
+    "&:hover": {
+      backgroundColor: "rgba(255, 255, 255, 1)"
     }
-  };
-  const getStatusStyles = () => {
-    switch (status) {
-      case "alarm":
-        return {
-          borderColor: "var(--selector-alarm-border, #ef4444)",
-          backgroundColor: "var(--selector-alarm-bg, rgba(239, 68, 68, 0.15))",
-          color: "var(--selector-alarm-text, #fecaca)",
-          boxShadow: "var(--selector-alarm-shadow, 0 0 20px rgba(239, 68, 68, 0.3))"
-        };
-      case "warning":
-        return {
-          borderColor: "var(--selector-warning-border, #f59e0b)",
-          backgroundColor: "var(--selector-warning-bg, rgba(245, 158, 11, 0.15))",
-          color: "var(--selector-warning-text, #fed7aa)",
-          boxShadow: "var(--selector-warning-shadow, 0 0 20px rgba(245, 158, 11, 0.3))"
-        };
-      case "disabled":
-        return {
-          borderColor: "var(--selector-disabled-border, #6b7280)",
-          backgroundColor: "var(--selector-disabled-bg, rgba(107, 114, 128, 0.1))",
-          color: "var(--selector-disabled-text, #9ca3af)",
-          cursor: "not-allowed"
-        };
-      default:
-        return {
-          borderColor: "var(--selector-normal-border, #64748b)",
-          backgroundColor: "var(--selector-normal-bg, rgba(30, 41, 59, 0.9))",
-          color: "var(--selector-normal-text, #f1f5f9)",
-          boxShadow: "var(--selector-normal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3))"
-        };
+  })
+);
+var DisplayModeToggle = (0, import_styled.default)(import_material.IconButton)(({ mode }) => ({
+  position: "absolute",
+  top: "50px",
+  left: "75%",
+  transform: "translateX(-50%)",
+  zIndex: 1e3,
+  backgroundColor: mode === "dashboard" ? "rgba(52, 152, 219, 0.9)" : "rgba(255, 255, 255, 0.9)",
+  color: mode === "dashboard" ? "white" : "#333",
+  border: "1px solid #ddd",
+  borderRadius: "20px",
+  padding: "8px 16px",
+  fontSize: "12px",
+  fontWeight: "600",
+  minWidth: "120px",
+  transition: "all 0.3s ease-in-out",
+  "&:hover": {
+    backgroundColor: mode === "dashboard" ? "rgba(52, 152, 219, 1)" : "rgba(255, 255, 255, 1)",
+    transform: "translateX(-50%) scale(1.05)"
+  }
+}));
+var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  "div",
+  {
+    style: {
+      width: 0,
+      height: 0,
+      borderTop: "6px solid transparent",
+      borderBottom: "6px solid transparent",
+      borderRight: "8px solid #666"
     }
-  };
-  const sizeStyles = getSizeStyles();
-  const statusStyles = getStatusStyles();
-  const selectorStyle = {
-    position: "relative",
-    width: "100%",
-    height: sizeStyles.height,
-    padding: sizeStyles.padding,
-    paddingRight: "3rem",
-    border: "2px solid",
-    borderRadius: "1rem",
-    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-    fontSize: sizeStyles.fontSize,
-    fontWeight: "bold",
-    outline: "none",
-    transition: "all 300ms ease",
-    backdropFilter: "blur(8px)",
-    cursor: disabled ? "not-allowed" : "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    userSelect: "none",
-    ...statusStyles
-  };
-  const dropdownStyle = {
+  }
+);
+var ChevronRight = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  "div",
+  {
+    style: {
+      width: 0,
+      height: 0,
+      borderTop: "6px solid transparent",
+      borderBottom: "6px solid transparent",
+      borderLeft: "8px solid #666"
+    }
+  }
+);
+var ZoomControls = (0, import_styled.default)(import_material.Box)({
+  position: "absolute",
+  top: "10px",
+  right: "10px",
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px",
+  zIndex: 1e3
+});
+var ZoomButton = (0, import_styled.default)(import_material.IconButton)({
+  backgroundColor: "rgba(255, 255, 255, 0.9)",
+  border: "1px solid #ddd",
+  width: "32px",
+  height: "32px",
+  fontSize: "14px",
+  fontWeight: "bold",
+  "&:hover": {
+    backgroundColor: "rgba(255, 255, 255, 1)"
+  }
+});
+var FooterPanel = (0, import_styled.default)(import_material.Box)({
+  gridArea: "footer",
+  background: "rgba(255, 255, 255, 0.95)",
+  border: "1px solid #ddd",
+  borderRadius: "8px",
+  padding: "10px",
+  display: "flex",
+  justifyContent: "space-around",
+  alignItems: "center"
+});
+var PanelTabs = (0, import_styled.default)(import_material.Tabs)({
+  minHeight: "36px",
+  "& .MuiTabs-indicator": {
+    backgroundColor: "#546e7a"
+  },
+  "& .MuiTab-root": {
+    minHeight: "36px",
+    padding: "6px 12px",
+    fontSize: "12px",
+    fontWeight: "600",
+    textTransform: "none",
+    color: "#666",
+    "&.Mui-selected": {
+      color: "#546e7a"
+    }
+  }
+});
+var PanelContent = (0, import_styled.default)(import_material.Box)({
+  flex: 1,
+  overflow: "auto",
+  padding: "10px"
+});
+var FixedSVGContainer = (0, import_styled.default)("div")({
+  position: "relative",
+  width: "1300px",
+  height: "400px",
+  minWidth: "1300px",
+  minHeight: "400px",
+  maxWidth: "1300px",
+  maxHeight: "400px",
+  border: "none",
+  backgroundColor: "transparent",
+  overflow: "visible",
+  "& .svg-locked-overlay": {
+    position: "absolute",
+    pointerEvents: "auto",
+    zIndex: 10
+  },
+  "& svg": {
     position: "absolute",
-    top: dropdownUp ? "auto" : "100%",
-    bottom: dropdownUp ? "100%" : "auto",
     left: 0,
-    right: 0,
-    marginTop: dropdownUp ? 0 : "0.25rem",
-    marginBottom: dropdownUp ? "0.25rem" : 0,
-    backgroundColor: "var(--selector-dropdown-bg, rgba(30, 41, 59, 0.95))",
-    border: "2px solid var(--selector-dropdown-border, #64748b)",
-    borderRadius: "1rem",
-    backdropFilter: "blur(12px)",
-    boxShadow: "var(--selector-dropdown-shadow, 0 12px 48px rgba(0, 0, 0, 0.4))",
-    zIndex: 50,
-    maxHeight: "12rem",
-    overflowY: "auto"
-  };
-  const optionStyle = (option, index) => ({
-    padding: sizeStyles.padding,
-    fontSize: sizeStyles.fontSize,
-    fontWeight: "600",
-    color: option.disabled ? "var(--selector-option-disabled-text, #6b7280)" : "var(--selector-option-text, #f1f5f9)",
-    backgroundColor: index === focusedIndex ? "var(--selector-option-focused-bg, rgba(59, 130, 246, 0.3))" : "transparent",
-    cursor: option.disabled ? "not-allowed" : "pointer",
-    transition: "all 150ms ease",
-    borderRadius: index === focusedIndex ? "0.5rem" : "0",
-    margin: index === focusedIndex ? "0.125rem" : "0"
-  });
-  const arrowStyle = {
+    top: 0,
+    width: "1300px",
+    height: "280px",
+    minWidth: "1300px",
+    minHeight: "280px",
+    maxWidth: "none",
+    maxHeight: "none",
+    objectFit: "none",
+    transform: "none",
+    border: "none"
+  }
+});
+var ScrollableSVGWrapper = (0, import_styled.default)("div")({
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  overflow: "auto",
+  transform: "rotateX(180deg)",
+  padding: "250px",
+  paddingTop: "200px",
+  boxSizing: "border-box",
+  "& > *": {
+    display: "block",
+    transform: "rotateX(180deg)"
+  }
+});
+
+// src/components/layout/FullscreenWorkspace/FullscreenWorkspace.overlays.tsx
+var import_react5 = require("react");
+var import_material2 = require("@mui/material");
+var import_styled2 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var baseOverlayStyles = {
+  tank: {
+    background: "linear-gradient(135deg, rgba(69, 90, 120, 0.95) 0%, rgba(52, 73, 94, 0.95) 100%)",
+    border: "1px solid #455a64",
+    color: "white",
+    borderRadius: "4px",
+    fontSize: "12px",
+    fontWeight: "500",
+    textAlign: "center",
+    padding: "8px",
+    minWidth: "60px",
+    boxShadow: "0 1px 4px rgba(69, 90, 120, 0.2)"
+  },
+  pressure: {
+    background: "linear-gradient(135deg, rgba(30, 50, 90, 0.75) 0%, rgba(20, 35, 70, 0.75) 100%)",
+    border: "1px solid #1e3a8a",
+    color: "white",
+    borderRadius: "4px",
+    fontSize: "11px",
+    fontWeight: "500",
+    textAlign: "center",
+    padding: "6px",
+    minWidth: "50px",
+    boxShadow: "0 1px 4px rgba(30, 50, 90, 0.15)"
+  },
+  vessel: {
+    background: "linear-gradient(135deg, rgba(84, 110, 122, 0.95) 0%, rgba(69, 90, 100, 0.95) 100%)",
+    border: "1px solid #546e7a",
+    color: "white",
+    borderRadius: "4px",
+    fontSize: "13px",
+    fontWeight: "500",
+    textAlign: "center",
+    padding: "8px",
+    minWidth: "70px",
+    boxShadow: "0 1px 4px rgba(84, 110, 122, 0.2)"
+  },
+  flow: {
+    background: "linear-gradient(135deg, rgba(102, 125, 102, 0.95) 0%, rgba(85, 107, 85, 0.95) 100%)",
+    border: "1px solid #689f38",
+    color: "white",
+    borderRadius: "4px",
+    fontSize: "11px",
+    fontWeight: "500",
+    textAlign: "center",
+    padding: "5px",
+    minWidth: "60px",
+    boxShadow: "0 1px 4px rgba(102, 125, 102, 0.2)"
+  }
+};
+var overlayStyles = baseOverlayStyles;
+var SVGLockedOverlay = ({
+  svgX,
+  svgY,
+  children,
+  theme,
+  style = {},
+  className = "",
+  onClick,
+  containerSelector = ".tff-svg-container"
+}) => {
+  const [svgOffset, setSvgOffset] = (0, import_react5.useState)({ x: 0, y: 0 });
+  (0, import_react5.useEffect)(() => {
+    const updateSvgOffset = () => {
+      const containerElement = document.querySelector(containerSelector);
+      const svgElement = containerElement?.querySelector("svg");
+      if (svgElement && containerElement) {
+        const svgRect = svgElement.getBoundingClientRect();
+        const containerRect = containerElement.getBoundingClientRect();
+        setSvgOffset({
+          x: svgRect.left - containerRect.left,
+          y: svgRect.top - containerRect.top
+        });
+      }
+    };
+    updateSvgOffset();
+    window.addEventListener("resize", updateSvgOffset);
+    return () => window.removeEventListener("resize", updateSvgOffset);
+  }, [containerSelector]);
+  const pixelX = svgX + svgOffset.x;
+  const pixelY = svgY + svgOffset.y;
+  const appliedStyle = theme ? { ...overlayStyles[theme], ...style } : style;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_material2.Box,
+    {
+      className: `svg-locked-overlay ${className}`.trim(),
+      onClick,
+      sx: {
+        position: "absolute",
+        left: `${pixelX}px`,
+        top: `${pixelY}px`,
+        cursor: onClick ? "pointer" : "default",
+        zIndex: 10,
+        pointerEvents: "auto",
+        ...appliedStyle
+      },
+      children
+    }
+  );
+};
+var DashboardCard = (0, import_styled2.default)(import_material2.Box)(
+  ({ svgX, svgY, cardType }) => ({
     position: "absolute",
-    right: "1rem",
-    top: "50%",
-    transform: `translateY(-50%) rotate(${isOpen ? "180deg" : "0deg"})`,
-    transition: "transform 200ms ease",
-    width: sizeStyles.iconSize,
-    height: sizeStyles.iconSize,
-    color: disabled ? "#6b7280" : "#94a3b8"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    left: svgX,
+    top: svgY,
+    background: cardType === "critical" ? "linear-gradient(135deg, rgba(220, 53, 69, 0.95) 0%, rgba(173, 20, 87, 0.95) 100%)" : cardType === "warning" ? "linear-gradient(135deg, rgba(255, 193, 7, 0.95) 0%, rgba(255, 143, 0, 0.95) 100%)" : cardType === "vessel" ? "linear-gradient(135deg, rgba(46, 204, 113, 0.95) 0%, rgba(39, 174, 96, 0.95) 100%)" : cardType === "process" ? "linear-gradient(135deg, rgba(155, 89, 182, 0.95) 0%, rgba(142, 68, 173, 0.95) 100%)" : cardType === "control" ? "linear-gradient(135deg, rgba(26, 188, 156, 0.95) 0%, rgba(22, 160, 133, 0.95) 100%)" : "linear-gradient(135deg, rgba(52, 152, 219, 0.95) 0%, rgba(41, 128, 185, 0.95) 100%)",
+    border: "1px solid rgba(255, 255, 255, 0.2)",
+    borderRadius: "12px",
+    padding: "12px",
+    minWidth: "140px",
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+    backdropFilter: "blur(10px)",
+    color: "white",
+    fontSize: "12px",
+    fontWeight: "600",
+    textAlign: "center",
+    transform: "translate(-50%, -50%)",
+    transition: "all 0.3s ease-in-out",
+    cursor: "pointer",
+    "&:hover": {
+      transform: "translate(-50%, -50%) scale(1.05)",
+      boxShadow: "0 12px 40px rgba(0, 0, 0, 0.4)"
+    }
+  })
+);
+var CardHeader = (0, import_styled2.default)("div")(({ color }) => ({
+  fontSize: "10px",
+  opacity: 0.9,
+  marginBottom: "4px",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  color: color || "inherit",
+  borderBottom: color ? `1px solid ${color}40` : "none",
+  paddingBottom: color ? "2px" : "0"
+}));
+var CardValue = (0, import_styled2.default)("div")({
+  fontSize: "16px",
+  fontWeight: "700",
+  marginBottom: "2px"
+});
+var CardUnit = (0, import_styled2.default)("div")({
+  fontSize: "9px",
+  opacity: 0.8
+});
+
+// src/components/layout/FullscreenWorkspace/FullscreenWorkspace.visuals.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var TrendLine = ({
+  values,
+  width = 60,
+  height = 20,
+  color = "#4fc3f7",
+  strokeWidth = 1.5,
+  backgroundColor = "rgba(255, 255, 255, 0.1)"
+}) => {
+  if (!values || values.length < 2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        style: {
+          width,
+          height,
+          backgroundColor,
+          borderRadius: "2px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "8px", color: "#ccc" }, children: "No data" })
+      }
+    );
+  }
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const range = maxValue - minValue;
+  const normalizedValues = range === 0 ? values.map(() => height / 2) : values.map((v) => height - 4 - (v - minValue) / range * (height - 8));
+  const pathData = normalizedValues.map((y, i) => {
+    const x = 4 + i / (values.length - 1) * (width - 8);
+    return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
+  }).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor,
+        borderRadius: "2px",
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width, height, style: { position: "absolute", top: 0, left: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "path",
+          {
+            d: pathData,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "circle",
+          {
+            cx: 4 + (width - 8),
+            cy: normalizedValues[normalizedValues.length - 1],
+            r: 1.5,
+            fill: color
+          }
+        )
+      ] })
+    }
+  );
+};
+var hexToRgba = (hex, alpha) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+var CircularGauge = ({
+  value,
+  max,
+  unit,
+  label,
+  size = 60,
+  color = "rgba(255, 255, 255, 0.9)"
+}) => {
+  const percentage = Math.min(value / max * 100, 100);
+  const strokeWidth = 4;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDasharray = circumference;
+  const strokeDashoffset = circumference - percentage / 100 * circumference;
+  const isHex = color.startsWith("#");
+  const innerCircleColor = isHex ? hexToRgba(color, 0.8) : color;
+  const borderColor = isHex ? hexToRgba(color, 0.9) : color;
+  const backgroundColor = isHex ? hexToRgba(color, 0.15) : color;
+  const borderStrokeColor = isHex ? hexToRgba(color, 0.4) : color;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
-      className: "selector-container",
-      style: { display: "flex", flexDirection: "column", gap: "0.5rem" },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "label",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
           {
-            className: "selector-label",
             style: {
-              fontSize: "0.875rem",
-              fontWeight: "600",
-              color: "var(--selector-label-color, #cbd5e1)",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em"
+              position: "relative",
+              width: size,
+              height: size,
+              borderRadius: "50%",
+              backgroundColor,
+              border: `1px solid ${borderStrokeColor}`
             },
-            children: label
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: selectorRef, style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "div",
-            {
-              className: `selector ${className}`,
-              style: selectorStyle,
-              onClick: () => !disabled && setIsOpen(!isOpen),
-              onKeyDown: handleKeyDown,
-              tabIndex: disabled ? -1 : 0,
-              role: "combobox",
-              "aria-expanded": isOpen,
-              "aria-haspopup": "listbox",
-              ...props,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "span",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "circle",
                   {
-                    style: {
-                      color: selectedOption ? statusStyles.color : "var(--selector-placeholder-text, #9ca3af)",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap"
-                    },
-                    children: selectedOption ? selectedOption.label : placeholder
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius - strokeWidth - 2,
+                    fill: innerCircleColor,
+                    stroke: borderColor,
+                    strokeWidth: 1
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { style: arrowStyle, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
-              ]
-            }
-          ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: dropdownRef, style: dropdownStyle, role: "listbox", children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "div",
-            {
-              style: optionStyle(option, index),
-              onClick: () => {
-                if (!option.disabled) {
-                  onChange(option.value);
-                  setIsOpen(false);
-                  setFocusedIndex(-1);
-                }
-              },
-              onMouseEnter: () => !option.disabled && setFocusedIndex(index),
-              role: "option",
-              "aria-selected": option.value === value,
-              "aria-disabled": option.disabled,
-              title: option.description,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                  "div",
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "circle",
                   {
-                    style: { display: "flex", justifyContent: "space-between", alignItems: "center" },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: option.label }),
-                      option.value === value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                        "svg",
-                        {
-                          style: { width: "1rem", height: "1rem", color: "#3b82f6" },
-                          fill: "currentColor",
-                          viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                            "path",
-                            {
-                              fillRule: "evenodd",
-                              d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-                              clipRule: "evenodd"
-                            }
-                          )
-                        }
-                      )
-                    ]
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    stroke: "rgba(255, 255, 255, 0.2)",
+                    strokeWidth,
+                    fill: "transparent"
                   }
                 ),
-                option.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "div",
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "circle",
                   {
-                    style: {
-                      fontSize: "0.75rem",
-                      color: "#9ca3af",
-                      marginTop: "0.25rem",
-                      fontWeight: "normal"
-                    },
-                    children: option.description
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    stroke: color,
+                    strokeWidth,
+                    fill: "transparent",
+                    strokeDasharray,
+                    strokeDashoffset,
+                    strokeLinecap: "round",
+                    style: { transition: "stroke-dashoffset 0.5s ease-in-out" }
                   }
                 )
-              ]
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    fontSize: "11px",
+                    fontWeight: "700",
+                    color: "white",
+                    textAlign: "center",
+                    textShadow: "0 1px 2px rgba(0, 0, 0, 0.5)"
+                  },
+                  children: [
+                    value.toFixed(1),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "8px", opacity: 0.9, color: "white" }, children: unit })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: "9px",
+              marginTop: "4px",
+              opacity: 0.9,
+              color: "white"
             },
-            option.value
-          )) })
-        ] })
+            children: label
+          }
+        )
       ]
     }
   );
 };
+var Sparkline = ({ data, width, height, color }) => {
+  if (!data || data.length < 2) {
+    return null;
+  }
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min;
+  if (range === 0) {
+    return null;
+  }
+  const points = data.map((value, index) => {
+    const x = index / (data.length - 1) * (width - 8);
+    const y = height - 8 - (value - min) / range * (height - 8);
+    return `${x + 4},${y + 4}`;
+  }).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        border: "1px solid rgba(255, 255, 255, 0.3)",
+        borderRadius: "4px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points, fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }) })
+    }
+  );
+};
+var EquipmentIndicatorWithSparkline = ({
+  svgX,
+  svgY,
+  color,
+  label,
+  size = 30,
+  sparklineData,
+  sparklineOffset = { x: 40, y: 0 }
+}) => {
+  const hasSparkline = sparklineData && sparklineData.length > 1 && Math.max(...sparklineData) !== Math.min(...sparklineData);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SVGLockedOverlay, { svgX, svgY, style: { transform: "translate(-50%, -50%)" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        style: {
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          backgroundColor: color,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "white",
+          fontSize: "7px",
+          fontWeight: "700",
+          textAlign: "center",
+          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
+          border: "2px solid rgba(255, 255, 255, 0.3)"
+        },
+        children: label
+      }
+    ) }),
+    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SVGLockedOverlay, { svgX: svgX + sparklineOffset.x, svgY: svgY + sparklineOffset.y, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Sparkline, { data: sparklineData, width: 60, height: 20, color }) })
+  ] });
+};
+var EquipmentIndicator = ({
+  svgX,
+  svgY,
+  color,
+  label,
+  size = 30,
+  style,
+  className
+}) => {
+  const overlayStyle = style !== void 0 ? { transform: "translate(-50%, -50%)", ...style } : { transform: "translate(-50%, -50%)" };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SVGLockedOverlay, { svgX, svgY, style: overlayStyle, className, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        backgroundColor: color,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "white",
+        fontSize: "7px",
+        fontWeight: "700",
+        textAlign: "center",
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
+        border: "2px solid rgba(255, 255, 255, 0.3)"
+      },
+      children: label
+    }
+  ) });
+};
 
-// src/ControlPanel.tsx
-var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ControlPanel = ({
-  title,
-  selectedMode,
-  modeOptions,
-  onModeChange,
-  setpointValue,
-  onSetpointChange,
-  secondSetpointValue,
-  onSecondSetpointChange,
-  modeConfigs = {},
-  defaultUnit = "Units",
-  defaultLabel = "Setpoint",
-  defaultMin = 0,
-  defaultMax = 100,
-  defaultPrecision = 2,
-  status = "normal",
-  collapsed = false,
-  onCollapseChange,
-  size = "medium",
-  setpointReadOnly = false,
-  showStartStopButtons = false,
-  isRunning = false,
-  onStart,
-  onStop,
-  startButtonText = "Start",
-  stopButtonText = "Stop",
+// src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function FullscreenWorkspace({
+  svgContent,
+  overlays,
+  leftPanel,
+  rightPanel,
+  footer,
+  tabs,
+  activeTab,
+  onTabChange,
+  defaultLeftCollapsed = false,
+  defaultRightCollapsed = false,
+  leftCollapsed: leftCollapsedProp,
+  rightCollapsed: rightCollapsedProp,
+  onLeftCollapseChange,
+  onRightCollapseChange,
+  displayMode,
+  defaultDisplayMode = "standard",
+  onDisplayModeChange,
+  showDisplayModeToggle = true,
+  showZoomControls = false,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  zoomDisabled = false,
   className = "",
-  ...props
-}) => {
-  const [isExpanded, setIsExpanded] = (0, import_react3.useState)(!collapsed);
-  const toggleExpanded = () => {
-    const newExpanded = !isExpanded;
-    setIsExpanded(newExpanded);
-    onCollapseChange?.(!newExpanded);
-  };
-  const currentModeConfig = modeConfigs[selectedMode] || {};
-  const currentUnit = currentModeConfig.unit || defaultUnit;
-  const currentLabel = currentModeConfig.label || defaultLabel;
-  const currentMin = currentModeConfig.min ?? defaultMin;
-  const currentMax = currentModeConfig.max ?? defaultMax;
-  const currentPrecision = currentModeConfig.precision ?? defaultPrecision;
-  const hasSecondSetpoint = currentModeConfig.hasSecondSetpoint || false;
-  const getSizeStyles = () => {
-    switch (size) {
-      case "small":
-        return {
-          padding: "1rem",
-          titleSize: "1rem",
-          gap: "0.75rem"
-        };
-      case "large":
-        return {
-          padding: "1.5rem",
-          titleSize: "1.5rem",
-          gap: "1.25rem"
-        };
-      default:
-        return {
-          padding: "1.25rem",
-          titleSize: "1.125rem",
-          gap: "1rem"
-        };
+  ...rest
+}) {
+  const [leftCollapsedState, setLeftCollapsedState] = import_react6.default.useState(defaultLeftCollapsed);
+  const [rightCollapsedState, setRightCollapsedState] = import_react6.default.useState(defaultRightCollapsed);
+  const [internalDisplayMode, setInternalDisplayMode] = import_react6.default.useState(displayMode ?? defaultDisplayMode);
+  const [internalTab, setInternalTab] = import_react6.default.useState(
+    tabs && tabs.length > 0 ? tabs[0].value : ""
+  );
+  const leftCollapsed = leftCollapsedProp ?? leftCollapsedState;
+  const rightCollapsed = rightCollapsedProp ?? rightCollapsedState;
+  const isDisplayModeControlled = displayMode !== void 0;
+  const currentDisplayMode = isDisplayModeControlled ? displayMode : internalDisplayMode;
+  const isTabControlled = activeTab !== void 0 && activeTab !== null;
+  const resolvedTabs = import_react6.default.useMemo(() => tabs ?? [], [tabs]);
+  const defaultTabValue = resolvedTabs.length > 0 ? resolvedTabs[0].value : "";
+  const currentTab = isTabControlled ? activeTab : internalTab || defaultTabValue;
+  import_react6.default.useEffect(() => {
+    if (resolvedTabs.length > 0) {
+      const values = resolvedTabs.map((tab) => tab.value);
+      if (!values.includes(currentTab)) {
+        const fallback = activeTab ?? defaultTabValue;
+        setInternalTab(fallback);
+      }
     }
-  };
-  const getStatusStyles = () => {
-    switch (status) {
-      case "alarm":
-        return {
-          borderColor: "var(--control-panel-alarm-border, #ef4444)",
-          backgroundColor: "var(--control-panel-alarm-bg, rgba(239, 68, 68, 0.1))",
-          titleColor: "var(--control-panel-alarm-text, #fecaca)",
-          boxShadow: "var(--control-panel-alarm-shadow, 0 0 20px rgba(239, 68, 68, 0.3))",
-          glowEffect: "var(--control-panel-alarm-glow, 0 0 30px rgba(239, 68, 68, 0.2))"
-        };
-      case "warning":
-        return {
-          borderColor: "var(--control-panel-warning-border, #f59e0b)",
-          backgroundColor: "var(--control-panel-warning-bg, rgba(245, 158, 11, 0.1))",
-          titleColor: "var(--control-panel-warning-text, #fed7aa)",
-          boxShadow: "var(--control-panel-warning-shadow, 0 0 20px rgba(245, 158, 11, 0.3))",
-          glowEffect: "var(--control-panel-warning-glow, 0 0 30px rgba(245, 158, 11, 0.2))"
-        };
-      case "disabled":
-        return {
-          borderColor: "var(--control-panel-disabled-border, #6b7280)",
-          backgroundColor: "var(--control-panel-disabled-bg, rgba(107, 114, 128, 0.1))",
-          titleColor: "var(--control-panel-disabled-text, #9ca3af)",
-          boxShadow: "var(--control-panel-disabled-shadow, 0 8px 32px rgba(0, 0, 0, 0.2))",
-          glowEffect: "var(--control-panel-disabled-glow, none)"
-        };
-      default:
-        return {
-          borderColor: "var(--control-panel-normal-border, #64748b)",
-          backgroundColor: "var(--control-panel-normal-bg, rgba(30, 41, 59, 0.9))",
-          titleColor: "var(--control-panel-normal-text, #f1f5f9)",
-          boxShadow: "var(--control-panel-normal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3))",
-          glowEffect: "var(--control-panel-normal-glow, 0 0 20px rgba(59, 130, 246, 0.1))"
-        };
+  }, [resolvedTabs, activeTab, currentTab, defaultTabValue]);
+  import_react6.default.useEffect(() => {
+    if (displayMode !== void 0) {
+      setInternalDisplayMode(displayMode);
     }
+  }, [displayMode]);
+  const handleLeftToggle = () => {
+    const next = !leftCollapsed;
+    if (leftCollapsedProp === void 0) {
+      setLeftCollapsedState(next);
+    }
+    onLeftCollapseChange?.(next);
   };
-  const sizeStyles = getSizeStyles();
-  const statusStyles = getStatusStyles();
-  const panelStyle = {
-    border: "2px solid",
-    borderRadius: "1.5rem",
-    backdropFilter: "blur(12px)",
-    transition: "all 400ms cubic-bezier(0.4, 0, 0.2, 1)",
-    position: "relative",
-    overflow: "hidden",
-    minWidth: "300px",
-    maxWidth: "400px",
-    minHeight: "400px",
-    width: "100%",
-    ...statusStyles,
-    boxShadow: isExpanded ? statusStyles.glowEffect : statusStyles.boxShadow
-  };
-  const headerStyle = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: sizeStyles.padding,
-    cursor: onCollapseChange ? "pointer" : "default",
-    borderBottom: isExpanded ? `1px solid ${statusStyles.borderColor}40` : "none",
-    transition: "all 300ms ease"
-  };
-  const titleStyle = {
-    fontSize: sizeStyles.titleSize,
-    fontWeight: "bold",
-    color: statusStyles.titleColor,
-    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-    letterSpacing: "0.05em",
-    margin: 0
-  };
-  const contentStyle = {
-    padding: isExpanded ? sizeStyles.padding : "0",
-    paddingTop: isExpanded ? sizeStyles.padding : "0",
-    maxHeight: isExpanded ? "500px" : "0",
-    opacity: isExpanded ? 1 : 0,
-    overflow: "hidden",
-    transition: "all 400ms cubic-bezier(0.4, 0, 0.2, 1)",
-    display: "flex",
-    flexDirection: "column",
-    gap: sizeStyles.gap,
-    justifyContent: "space-between",
-    flex: 1
+  const handleRightToggle = () => {
+    const next = !rightCollapsed;
+    if (rightCollapsedProp === void 0) {
+      setRightCollapsedState(next);
+    }
+    onRightCollapseChange?.(next);
   };
-  const chevronStyle = {
-    width: "1.5rem",
-    height: "1.5rem",
-    color: statusStyles.titleColor,
-    transform: `rotate(${isExpanded ? "180deg" : "0deg"})`,
-    transition: "transform 300ms ease",
-    opacity: onCollapseChange ? 1 : 0.3
+  const handleModeToggle = () => {
+    const nextMode = currentDisplayMode === "standard" ? "dashboard" : "standard";
+    if (!isDisplayModeControlled) {
+      setInternalDisplayMode(nextMode);
+    }
+    onDisplayModeChange?.(nextMode);
   };
-  const statusBadgeStyle = {
-    position: "absolute",
-    top: "0.5rem",
-    right: "0.5rem",
-    width: "0.75rem",
-    height: "0.75rem",
-    borderRadius: "50%",
-    backgroundColor: status === "alarm" ? "#ef4444" : status === "warning" ? "#f59e0b" : status === "disabled" ? "#6b7280" : "#22c55e",
-    boxShadow: `0 0 10px ${status === "alarm" ? "#ef4444" : status === "warning" ? "#f59e0b" : status === "disabled" ? "#6b7280" : "#22c55e"}80`,
-    animation: status === "alarm" ? "pulse 2s infinite" : "none"
+  const handleTabChangeInternal = (_, value) => {
+    if (!isTabControlled) {
+      setInternalTab(value);
+    }
+    onTabChange?.(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: panelStyle, className: `control-panel glass-card ${className}`, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: statusBadgeStyle }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: headerStyle, onClick: onCollapseChange ? toggleExpanded : void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: titleStyle, children: title }),
-      onCollapseChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { style: chevronStyle, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: contentStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Selector,
-        {
-          value: selectedMode,
-          onChange: onModeChange,
-          options: modeOptions,
-          label: "Control Mode",
-          status,
-          size: size === "small" ? "small" : size === "large" ? "large" : "medium",
-          disabled: status === "disabled"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        ValueEntry,
-        {
-          value: setpointValue,
-          onChange: onSetpointChange,
-          label: currentLabel,
-          unit: currentUnit,
-          min: currentMin,
-          max: currentMax,
-          precision: currentPrecision,
-          status,
-          readOnly: setpointReadOnly || status === "disabled",
-          disabled: status === "disabled"
-        }
-      ) }),
-      hasSecondSetpoint && onSecondSetpointChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        ValueEntry,
-        {
-          value: secondSetpointValue || 0,
-          onChange: onSecondSetpointChange,
-          label: currentModeConfig.secondLabel || "Time",
-          unit: currentModeConfig.secondUnit || "sec",
-          min: currentModeConfig.secondMin ?? 0,
-          max: currentModeConfig.secondMax ?? 999,
-          precision: currentModeConfig.secondPrecision ?? 0,
-          status,
-          readOnly: setpointReadOnly || status === "disabled",
-          disabled: status === "disabled"
-        }
-      ) }),
-      showStartStopButtons && (onStart || onStop) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "0.75rem" }, children: [
-        onStart && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          Button,
+  const currentTabContent = resolvedTabs.find((tab) => tab.value === currentTab)?.content ?? null;
+  const showLeftToggle = Boolean(leftPanel);
+  const showRightToggle = Boolean(rightPanel);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    FullscreenContainer,
+    {
+      leftCollapsed,
+      rightCollapsed,
+      className: `tff-svg-container ${className}`.trim(),
+      ...rest,
+      children: [
+        showLeftToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          LeftToggleButton,
           {
-            variant: "primary",
-            onClick: onStart,
-            disabled: isRunning || status === "disabled",
-            style: {
-              flex: 1,
-              fontSize: "0.875rem",
-              padding: "0.75rem 1rem",
-              backgroundColor: isRunning ? "#6b7280" : void 0
-            },
-            children: startButtonText
+            collapsed: leftCollapsed,
+            onClick: handleLeftToggle,
+            "aria-label": leftCollapsed ? "Expand left panel" : "Collapse left panel",
+            children: leftCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronRight, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronLeft, {})
           }
         ),
-        onStop && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          Button,
+        showRightToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          RightToggleButton,
           {
-            variant: "secondary",
-            onClick: onStop,
-            disabled: !isRunning || status === "disabled",
-            style: {
-              flex: 1,
-              fontSize: "0.875rem",
-              padding: "0.75rem 1rem",
-              backgroundColor: !isRunning ? "#6b7280" : "#dc2626",
-              borderColor: !isRunning ? "#6b7280" : "#dc2626"
-            },
-            children: stopButtonText
+            collapsed: rightCollapsed,
+            onClick: handleRightToggle,
+            "aria-label": rightCollapsed ? "Expand right panel" : "Collapse right panel",
+            children: rightCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronRight, {})
           }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        "div",
-        {
-          className: "control-panel-info",
-          style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: "0.5rem 0",
-            fontSize: "0.75rem",
-            color: "var(--control-panel-info-text, #9ca3af)",
-            borderTop: `1px solid ${statusStyles.borderColor}20`,
-            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
-              "Mode: ",
-              selectedMode.toUpperCase()
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "1rem" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
-                "SP: ",
-                String(setpointValue),
-                currentUnit
-              ] }),
-              hasSecondSetpoint && secondSetpointValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
-                currentModeConfig.secondLabel,
-                ": ",
-                String(secondSetpointValue),
-                currentModeConfig.secondUnit
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] })
-  ] });
-};
+        ),
+        showDisplayModeToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          DisplayModeToggle,
+          {
+            mode: currentDisplayMode,
+            onClick: handleModeToggle,
+            "aria-label": "Toggle display mode",
+            children: currentDisplayMode === "dashboard" ? "Dashboard Mode" : "Standard Mode"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SVGArea, { children: [
+          showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ZoomControls, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              ZoomButton,
+              {
+                onClick: onZoomIn,
+                disabled: zoomDisabled || !onZoomIn,
+                size: "small",
+                "aria-label": "Zoom in",
+                children: "+"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              ZoomButton,
+              {
+                onClick: onZoomOut,
+                disabled: zoomDisabled || !onZoomOut,
+                size: "small",
+                "aria-label": "Zoom out",
+                children: "-"
+              }
+            ),
+            onResetZoom && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              ZoomButton,
+              {
+                onClick: onResetZoom,
+                disabled: zoomDisabled,
+                size: "small",
+                "aria-label": "Reset zoom",
+                children: "Reset"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollableSVGWrapper, { className: "svg-scroll-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FixedSVGContainer, { className: "svg-container", children: [
+            svgContent,
+            overlays
+          ] }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LeftPanel, { collapsed: leftCollapsed, children: resolvedTabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            PanelTabs,
+            {
+              value: currentTab,
+              onChange: handleTabChangeInternal,
+              "aria-label": "Left panel tabs",
+              children: resolvedTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material3.Tab, { label: tab.label, value: tab.value }, tab.value))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PanelContent, { children: currentTabContent })
+        ] }) : leftPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RightPanel, { collapsed: rightCollapsed, children: rightPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FooterPanel, { children: footer })
+      ]
+    }
+  );
+}
 
-// src/ThemeContext.tsx
-var import_react4 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react4.createContext)(void 0);
+// src/theme/ThemeContext.tsx
+var import_react7 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react7.createContext)(void 0);
 var useTheme = () => {
-  const context = (0, import_react4.useContext)(ThemeContext);
+  const context = (0, import_react7.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 };
 var ThemeProvider = ({ children }) => {
-  const [theme, setThemeState] = (0, import_react4.useState)("modern");
-  (0, import_react4.useEffect)(() => {
+  const [theme, setThemeState] = (0, import_react7.useState)("modern");
+  (0, import_react7.useEffect)(() => {
     document.body.className = "";
     document.body.classList.add(`theme-${theme}`);
     document.documentElement.className = "";
@@ -989,11 +1659,11 @@ var ThemeProvider = ({ children }) => {
   const setTheme = (newTheme) => {
     setThemeState(newTheme);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
 };
 
-// src/ThemeToggle.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+// src/theme/ThemeToggle.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ThemeToggle = ({
   size = "medium",
   position = "top-right",
@@ -1064,21 +1734,48 @@ var ThemeToggle = ({
     transition: "all 0.2s ease",
     boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: thumbStyle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: thumbStyle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  CardHeader,
+  CardUnit,
+  CardValue,
+  CircularGauge,
   ControlPanel,
+  DashboardCard,
+  DisplayModeToggle,
+  EquipmentIndicator,
+  EquipmentIndicatorWithSparkline,
+  FixedSVGContainer,
+  FooterPanel,
+  FullscreenContainer,
+  FullscreenWorkspace,
+  LeftPanel,
+  LeftToggleButton,
+  LegacyValueEntry,
+  PanelContent,
+  PanelTabs,
+  RightPanel,
+  RightToggleButton,
+  SVGArea,
+  SVGLockedOverlay,
+  ScrollableSVGWrapper,
   Selector,
+  Sparkline,
   StatusIndicator,
   ThemeProvider,
   ThemeToggle,
+  TrendLine,
   ValueEntry,
+  ZoomButton,
+  ZoomControls,
+  overlayStyles,
   useTheme
 });
 //# sourceMappingURL=index.cjs.map