npm - @procaaso/alphinity-ui-components - Versions diffs - 1.0.0 → 1.0.1 - Mend

@procaaso/alphinity-ui-components 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/Button.tsx","../src/TestValueEntry.tsx","../src/StatusIndicator.tsx","../src/Selector.tsx","../src/ControlPanel.tsx","../src/ThemeContext.tsx","../src/ThemeToggle.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n variant?: 'primary' \| 'secondary';\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n variant = 'primary',\r\n children,\r\n className = '',\r\n ...props\r\n}) => {\r\n // Large, touch-friendly button styles with enhanced visual presence\r\n const baseStyles =\r\n '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';\r\n\r\n const variantStyles =\r\n variant === 'primary'\r\n ? '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'\r\n : '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';\r\n\r\n return (\r\n <button className={`${baseStyles} ${variantStyles} ${className}`.trim()} {...props}>\r\n {children}\r\n </button>\r\n );\r\n};\r\n","import React, { useState, useCallback } from 'react';\r\n\r\nexport interface ValueEntryProps\r\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> {\r\n /** Current value /\r\n value: number \| string;\r\n /* Callback when value changes /\r\n onChange: (value: number \| string) => void;\r\n /* Unit of measurement to display /\r\n unit?: string;\r\n /* Status state for visual feedback /\r\n status?: 'normal' \| 'alarm' \| 'warning' \| 'disabled';\r\n /* Minimum allowed value (for numeric inputs) /\r\n min?: number;\r\n /* Maximum allowed value (for numeric inputs) /\r\n max?: number;\r\n /* Number of decimal places (for numeric inputs) /\r\n precision?: number;\r\n /* Input type - numeric or text /\r\n inputType?: 'numeric' \| 'text';\r\n /* Label for the input /\r\n label?: string;\r\n /* Whether the input is read-only /\r\n readOnly?: boolean;\r\n}\r\n\r\nexport const ValueEntry: React.FC<ValueEntryProps> = ({\r\n value,\r\n onChange,\r\n unit,\r\n status = 'normal',\r\n min,\r\n max,\r\n precision = 2,\r\n inputType = 'numeric',\r\n label,\r\n readOnly = false,\r\n className = '',\r\n disabled,\r\n ...props\r\n}) => {\r\n const [displayValue, setDisplayValue] = useState(String(value));\r\n const [isEditing, setIsEditing] = useState(false);\r\n\r\n const handleFocus = useCallback(() => {\r\n setIsEditing(true);\r\n setDisplayValue(String(value));\r\n }, [value]);\r\n\r\n const handleBlur = useCallback(() => {\r\n setIsEditing(false);\r\n let newValue: number \| string = displayValue;\r\n\r\n if (inputType === 'numeric') {\r\n const numValue = parseFloat(displayValue);\r\n if (!isNaN(numValue)) {\r\n // Apply min/max constraints\r\n let constrainedValue = numValue;\r\n if (min !== undefined) constrainedValue = Math.max(min, constrainedValue);\r\n if (max !== undefined) constrainedValue = Math.min(max, constrainedValue);\r\n\r\n // Apply precision\r\n constrainedValue = parseFloat(constrainedValue.toFixed(precision));\r\n newValue = constrainedValue;\r\n setDisplayValue(String(constrainedValue));\r\n } else {\r\n // Invalid number, revert to original value\r\n setDisplayValue(String(value));\r\n return;\r\n }\r\n }\r\n\r\n if (newValue !== value) {\r\n onChange(newValue);\r\n }\r\n }, [displayValue, inputType, min, max, precision, value, onChange]);\r\n\r\n const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n setDisplayValue(e.target.value);\r\n }, []);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === 'Enter') {\r\n e.currentTarget.blur();\r\n }\r\n if (e.key === 'Escape') {\r\n setDisplayValue(String(value));\r\n e.currentTarget.blur();\r\n }\r\n },\r\n [value]\r\n );\r\n\r\n // Create the display text\r\n const displayText = isEditing\r\n ? displayValue\r\n : inputType === 'numeric'\r\n ? Number(value).toFixed(precision)\r\n : String(value);\r\n\r\n // Status-based styling with modern industrial colors\r\n const getStatusStyles = () => {\r\n switch (status) {\r\n case 'alarm':\r\n return {\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.15)',\r\n color: '#fecaca',\r\n boxShadow: '0 0 20px rgba(239, 68, 68, 0.3)',\r\n };\r\n case 'warning':\r\n return {\r\n borderColor: '#f59e0b',\r\n backgroundColor: 'rgba(245, 158, 11, 0.15)',\r\n color: '#fed7aa',\r\n boxShadow: '0 0 20px rgba(245, 158, 11, 0.3)',\r\n };\r\n case 'disabled':\r\n return {\r\n borderColor: '#6b7280',\r\n backgroundColor: 'rgba(107, 114, 128, 0.1)',\r\n color: '#9ca3af',\r\n cursor: 'not-allowed',\r\n };\r\n default:\r\n return {\r\n borderColor: '#64748b',\r\n backgroundColor: 'rgba(30, 41, 59, 0.9)',\r\n color: '#f1f5f9',\r\n boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',\r\n };\r\n }\r\n };\r\n\r\n const statusStyles = getStatusStyles();\r\n\r\n const inputStyle: React.CSSProperties = {\r\n width: '12rem',\r\n height: '4rem',\r\n padding: unit ? '1rem 4rem 1rem 1.5rem' : '1rem 1.5rem',\r\n border: '2px solid',\r\n borderRadius: '1.5rem',\r\n fontFamily:\r\n 'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n fontSize: '1.25rem',\r\n fontWeight: 'bold',\r\n textAlign: 'center',\r\n outline: 'none',\r\n transition: 'all 300ms ease',\r\n backdropFilter: 'blur(8px)',\r\n ...statusStyles,\r\n };\r\n\r\n const inputStyleFocus: React.CSSProperties = {\r\n ...inputStyle,\r\n borderColor: '#60a5fa',\r\n boxShadow:\r\n '0 0 0 4px rgba(96, 165, 250, 0.3), ' +\r\n (statusStyles.boxShadow \|\| '0 8px 32px rgba(0, 0, 0, 0.3)'),\r\n transform: 'scale(1.02)',\r\n };\r\n\r\n const unitStyle: React.CSSProperties = {\r\n position: 'absolute',\r\n right: '0.75rem',\r\n top: '50%',\r\n transform: 'translateY(-50%)',\r\n padding: '0.5rem 0.75rem',\r\n fontSize: '1rem',\r\n fontWeight: 'bold',\r\n color: '#ffffff',\r\n backgroundColor: '#3b82f6',\r\n borderRadius: '0.5rem',\r\n border: '2px solid #60a5fa',\r\n backdropFilter: 'blur(4px)',\r\n pointerEvents: 'none' as const,\r\n zIndex: 10,\r\n boxShadow: '0 2px 8px rgba(59, 130, 246, 0.4)',\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n display: 'inline-flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n gap: '0.75rem',\r\n }}\r\n >\r\n {label && (\r\n <label\r\n style={{\r\n fontSize: '0.875rem',\r\n fontWeight: '600',\r\n color: '#cbd5e1',\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n }}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>\r\n <input\r\n type=\"text\"\r\n value={displayText}\r\n onChange={handleChange}\r\n onFocus={(e) => {\r\n Object.assign(e.target.style, inputStyleFocus);\r\n handleFocus();\r\n }}\r\n onBlur={(e) => {\r\n Object.assign(e.target.style, inputStyle);\r\n handleBlur();\r\n }}\r\n onKeyDown={handleKeyDown}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n style={inputStyle}\r\n {...props}\r\n />\r\n {unit && <span style={unitStyle}>{unit}</span>}\r\n {status === 'alarm' && (\r\n <div\r\n style={{\r\n position: 'absolute',\r\n top: '-8px',\r\n right: '-8px',\r\n width: '1rem',\r\n height: '1rem',\r\n backgroundColor: '#ef4444',\r\n borderRadius: '50%',\r\n boxShadow: '0 0 10px rgba(239, 68, 68, 0.8)',\r\n animation: 'pulse 2s infinite',\r\n }}\r\n />\r\n )}\r\n {status === 'warning' && (\r\n <div\r\n style={{\r\n position: 'absolute',\r\n top: '-8px',\r\n right: '-8px',\r\n width: '1rem',\r\n height: '1rem',\r\n backgroundColor: '#f59e0b',\r\n borderRadius: '50%',\r\n boxShadow: '0 0 10px rgba(245, 158, 11, 0.8)',\r\n }}\r\n />\r\n )}\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import React from 'react';\r\n\r\nexport interface StatusIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\r\n /* Status state determining color and behavior /\r\n status: 'off' \| 'normal' \| 'alarm' \| 'warning' \| 'active' \| 'fault';\r\n /* Size of the indicator /\r\n size?: 'small' \| 'medium' \| 'large';\r\n /* Animation behavior /\r\n animation?: 'none' \| 'pulse' \| 'blink' \| 'flash';\r\n /* Label text to display next to indicator /\r\n label?: string;\r\n /* Position of label relative to indicator /\r\n labelPosition?: 'left' \| 'right' \| 'top' \| 'bottom';\r\n /* Shape of the indicator /\r\n shape?: 'circle' \| 'square' \| 'diamond';\r\n /* Whether the indicator should have a 3D LED effect /\r\n led?: boolean;\r\n}\r\n\r\nexport const StatusIndicator: React.FC<StatusIndicatorProps> = ({\r\n status,\r\n size = 'medium',\r\n animation = 'none',\r\n label,\r\n labelPosition = 'right',\r\n shape = 'circle',\r\n led = true,\r\n className = '',\r\n ...props\r\n}) => {\r\n // Touch-friendly size styles - larger for better visibility\r\n const sizeStyles = {\r\n small: 'w-5 h-5',\r\n medium: 'w-7 h-7',\r\n large: 'w-10 h-10',\r\n };\r\n\r\n // Modern shape styles with more rounded corners\r\n const shapeStyles = {\r\n circle: 'rounded-full',\r\n square: 'rounded-lg',\r\n diamond: 'rotate-45 rounded-lg',\r\n };\r\n\r\n // Enhanced status colors with richer gradients and better contrast\r\n const statusStyles = {\r\n off: 'bg-gradient-to-br from-slate-500 to-slate-600 border-slate-400 shadow-slate-500/30',\r\n normal:\r\n 'bg-gradient-to-br from-emerald-400 via-green-500 to-green-600 border-emerald-300 shadow-green-500/70',\r\n alarm: 'bg-gradient-to-br from-red-400 via-red-500 to-red-600 border-red-300 shadow-red-500/70',\r\n warning:\r\n 'bg-gradient-to-br from-amber-400 via-yellow-500 to-orange-500 border-amber-300 shadow-yellow-500/70',\r\n active:\r\n 'bg-gradient-to-br from-blue-400 via-blue-500 to-indigo-600 border-blue-300 shadow-blue-500/70',\r\n fault:\r\n 'bg-gradient-to-br from-purple-400 via-purple-500 to-violet-600 border-purple-300 shadow-purple-500/70',\r\n };\r\n\r\n // Animation styles\r\n const animationStyles = {\r\n none: '',\r\n pulse: 'animate-pulse',\r\n blink: 'animate-bounce',\r\n flash: 'animate-ping',\r\n };\r\n\r\n // LED effect styles\r\n const ledEffect = led ? 'shadow-lg border-2' : 'border';\r\n\r\n // Get glow effect for active states\r\n const glowEffect = status !== 'off' && led ? 'shadow-lg' : '';\r\n\r\n const indicatorClasses = `\r\n ${sizeStyles[size]}\r\n ${shapeStyles[shape]}\r\n ${statusStyles[status]}\r\n ${animationStyles[animation]}\r\n ${ledEffect}\r\n ${glowEffect}\r\n inline-block\r\n transition-all\r\n duration-300\r\n `\r\n .trim()\r\n .replace(/\\s+/g, ' ');\r\n\r\n // Label styles\r\n const labelClasses = 'text-sm font-medium text-gray-700 uppercase tracking-wide select-none';\r\n\r\n // Container layout based on label position\r\n const getContainerLayout = () => {\r\n switch (labelPosition) {\r\n case 'left':\r\n return 'inline-flex items-center gap-2 flex-row-reverse';\r\n case 'right':\r\n return 'inline-flex items-center gap-2';\r\n case 'top':\r\n return 'inline-flex flex-col-reverse items-center gap-1';\r\n case 'bottom':\r\n return 'inline-flex flex-col items-center gap-1';\r\n default:\r\n return 'inline-flex items-center gap-2';\r\n }\r\n };\r\n\r\n // ARIA attributes for accessibility\r\n const getAriaLabel = () => {\r\n if (label) {\r\n return `${label}: ${status}`;\r\n }\r\n return `Status indicator: ${status}`;\r\n };\r\n\r\n const getAriaDescription = () => {\r\n const descriptions = {\r\n off: 'Inactive or disabled state',\r\n normal: 'Normal operating condition',\r\n alarm: 'Critical alarm condition requiring attention',\r\n warning: 'Warning condition that should be monitored',\r\n active: 'Currently active or running',\r\n fault: 'System fault or error condition',\r\n };\r\n return descriptions[status];\r\n };\r\n\r\n return (\r\n <div className={`${getContainerLayout()} ${className}`.trim()} {...props}>\r\n <div\r\n className={indicatorClasses}\r\n role=\"status\"\r\n aria-label={getAriaLabel()}\r\n aria-description={getAriaDescription()}\r\n data-status={status}\r\n data-testid={`status-indicator-${status}`}\r\n />\r\n {label && <span className={labelClasses}>{label}</span>}\r\n </div>\r\n );\r\n};\r\n","import React, { useState, useRef, useEffect } from 'react';\r\n\r\nexport interface SelectorOption {\r\n /* Unique value for the option /\r\n value: string;\r\n /* Display label for the option /\r\n label: string;\r\n /* Whether this option is disabled /\r\n disabled?: boolean;\r\n /* Optional description for tooltip or additional context /\r\n description?: string;\r\n}\r\n\r\nexport interface SelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n /* Currently selected value /\r\n value: string;\r\n /* Callback when selection changes /\r\n onChange: (value: string) => void;\r\n /* List of available options /\r\n options: SelectorOption[];\r\n /* Placeholder text when no option is selected /\r\n placeholder?: string;\r\n /* Whether the selector is disabled /\r\n disabled?: boolean;\r\n /* Status state for visual feedback /\r\n status?: 'normal' \| 'alarm' \| 'warning' \| 'disabled';\r\n /* Size variant /\r\n size?: 'small' \| 'medium' \| 'large';\r\n /* Label for the selector /\r\n label?: string;\r\n /* Whether the dropdown should open upward /\r\n dropdownUp?: boolean;\r\n}\r\n\r\nexport const Selector: React.FC<SelectorProps> = ({\r\n value,\r\n onChange,\r\n options,\r\n placeholder = 'Select option...',\r\n disabled = false,\r\n status = 'normal',\r\n size = 'medium',\r\n label,\r\n dropdownUp = false,\r\n className = '',\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [focusedIndex, setFocusedIndex] = useState(-1);\r\n const selectorRef = useRef<HTMLDivElement>(null);\r\n const dropdownRef = useRef<HTMLDivElement>(null);\r\n\r\n // Close dropdown when clicking outside\r\n useEffect(() => {\r\n const handleClickOutside = (event: MouseEvent) => {\r\n if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {\r\n setIsOpen(false);\r\n setFocusedIndex(-1);\r\n }\r\n };\r\n\r\n document.addEventListener('mousedown', handleClickOutside);\r\n return () => document.removeEventListener('mousedown', handleClickOutside);\r\n }, []);\r\n\r\n // Handle keyboard navigation\r\n const handleKeyDown = (e: React.KeyboardEvent) => {\r\n if (disabled) return;\r\n\r\n switch (e.key) {\r\n case 'Enter':\r\n case ' ':\r\n e.preventDefault();\r\n if (!isOpen) {\r\n setIsOpen(true);\r\n setFocusedIndex(\r\n Math.max(\r\n 0,\r\n options.findIndex((opt) => opt.value === value)\r\n )\r\n );\r\n } else if (focusedIndex >= 0) {\r\n const selectedOption = options[focusedIndex];\r\n if (!selectedOption.disabled) {\r\n onChange(selectedOption.value);\r\n setIsOpen(false);\r\n setFocusedIndex(-1);\r\n }\r\n }\r\n break;\r\n case 'Escape':\r\n setIsOpen(false);\r\n setFocusedIndex(-1);\r\n break;\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n if (!isOpen) {\r\n setIsOpen(true);\r\n setFocusedIndex(\r\n Math.max(\r\n 0,\r\n options.findIndex((opt) => opt.value === value)\r\n )\r\n );\r\n } else {\r\n setFocusedIndex((prev) => {\r\n const nextIndex = Math.min(prev + 1, options.length - 1);\r\n return options[nextIndex]?.disabled ? prev : nextIndex;\r\n });\r\n }\r\n break;\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n if (isOpen) {\r\n setFocusedIndex((prev) => {\r\n const nextIndex = Math.max(prev - 1, 0);\r\n return options[nextIndex]?.disabled ? prev : nextIndex;\r\n });\r\n }\r\n break;\r\n }\r\n };\r\n\r\n // Get current selected option\r\n const selectedOption = options.find((opt) => opt.value === value);\r\n\r\n // Size-based styling\r\n const getSizeStyles = () => {\r\n switch (size) {\r\n case 'small':\r\n return {\r\n height: '2.5rem',\r\n padding: '0.5rem 0.75rem',\r\n fontSize: '0.875rem',\r\n iconSize: '1rem',\r\n };\r\n case 'large':\r\n return {\r\n height: '4rem',\r\n padding: '1rem 1.5rem',\r\n fontSize: '1.25rem',\r\n iconSize: '1.5rem',\r\n };\r\n default:\r\n return {\r\n height: '3rem',\r\n padding: '0.75rem 1rem',\r\n fontSize: '1rem',\r\n iconSize: '1.25rem',\r\n };\r\n }\r\n };\r\n\r\n // Status-based styling with CSS custom properties for theme override\r\n const getStatusStyles = () => {\r\n switch (status) {\r\n case 'alarm':\r\n return {\r\n borderColor: 'var(--selector-alarm-border, #ef4444)',\r\n backgroundColor: 'var(--selector-alarm-bg, rgba(239, 68, 68, 0.15))',\r\n color: 'var(--selector-alarm-text, #fecaca)',\r\n boxShadow: 'var(--selector-alarm-shadow, 0 0 20px rgba(239, 68, 68, 0.3))',\r\n };\r\n case 'warning':\r\n return {\r\n borderColor: 'var(--selector-warning-border, #f59e0b)',\r\n backgroundColor: 'var(--selector-warning-bg, rgba(245, 158, 11, 0.15))',\r\n color: 'var(--selector-warning-text, #fed7aa)',\r\n boxShadow: 'var(--selector-warning-shadow, 0 0 20px rgba(245, 158, 11, 0.3))',\r\n };\r\n case 'disabled':\r\n return {\r\n borderColor: 'var(--selector-disabled-border, #6b7280)',\r\n backgroundColor: 'var(--selector-disabled-bg, rgba(107, 114, 128, 0.1))',\r\n color: 'var(--selector-disabled-text, #9ca3af)',\r\n cursor: 'not-allowed',\r\n };\r\n default:\r\n return {\r\n borderColor: 'var(--selector-normal-border, #64748b)',\r\n backgroundColor: 'var(--selector-normal-bg, rgba(30, 41, 59, 0.9))',\r\n color: 'var(--selector-normal-text, #f1f5f9)',\r\n boxShadow: 'var(--selector-normal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3))',\r\n };\r\n }\r\n };\r\n\r\n const sizeStyles = getSizeStyles();\r\n const statusStyles = getStatusStyles();\r\n\r\n const selectorStyle: React.CSSProperties = {\r\n position: 'relative',\r\n width: '100%',\r\n height: sizeStyles.height,\r\n padding: sizeStyles.padding,\r\n paddingRight: '3rem',\r\n border: '2px solid',\r\n borderRadius: '1rem',\r\n fontFamily:\r\n 'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n fontSize: sizeStyles.fontSize,\r\n fontWeight: 'bold',\r\n outline: 'none',\r\n transition: 'all 300ms ease',\r\n backdropFilter: 'blur(8px)',\r\n cursor: disabled ? 'not-allowed' : 'pointer',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n userSelect: 'none',\r\n ...statusStyles,\r\n };\r\n\r\n const dropdownStyle: React.CSSProperties = {\r\n position: 'absolute',\r\n top: dropdownUp ? 'auto' : '100%',\r\n bottom: dropdownUp ? '100%' : 'auto',\r\n left: 0,\r\n right: 0,\r\n marginTop: dropdownUp ? 0 : '0.25rem',\r\n marginBottom: dropdownUp ? '0.25rem' : 0,\r\n backgroundColor: 'var(--selector-dropdown-bg, rgba(30, 41, 59, 0.95))',\r\n border: '2px solid var(--selector-dropdown-border, #64748b)',\r\n borderRadius: '1rem',\r\n backdropFilter: 'blur(12px)',\r\n boxShadow: 'var(--selector-dropdown-shadow, 0 12px 48px rgba(0, 0, 0, 0.4))',\r\n zIndex: 50,\r\n maxHeight: '12rem',\r\n overflowY: 'auto',\r\n };\r\n\r\n const optionStyle = (option: SelectorOption, index: number): React.CSSProperties => ({\r\n padding: sizeStyles.padding,\r\n fontSize: sizeStyles.fontSize,\r\n fontWeight: '600',\r\n color: option.disabled\r\n ? 'var(--selector-option-disabled-text, #6b7280)'\r\n : 'var(--selector-option-text, #f1f5f9)',\r\n backgroundColor:\r\n index === focusedIndex\r\n ? 'var(--selector-option-focused-bg, rgba(59, 130, 246, 0.3))'\r\n : 'transparent',\r\n cursor: option.disabled ? 'not-allowed' : 'pointer',\r\n transition: 'all 150ms ease',\r\n borderRadius: index === focusedIndex ? '0.5rem' : '0',\r\n margin: index === focusedIndex ? '0.125rem' : '0',\r\n });\r\n\r\n const arrowStyle: React.CSSProperties = {\r\n position: 'absolute',\r\n right: '1rem',\r\n top: '50%',\r\n transform: `translateY(-50%) rotate(${isOpen ? '180deg' : '0deg'})`,\r\n transition: 'transform 200ms ease',\r\n width: sizeStyles.iconSize,\r\n height: sizeStyles.iconSize,\r\n color: disabled ? '#6b7280' : '#94a3b8',\r\n };\r\n\r\n return (\r\n <div\r\n className=\"selector-container\"\r\n style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}\r\n >\r\n {label && (\r\n <label\r\n className=\"selector-label\"\r\n style={{\r\n fontSize: '0.875rem',\r\n fontWeight: '600',\r\n color: 'var(--selector-label-color, #cbd5e1)',\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n }}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n <div ref={selectorRef} style={{ position: 'relative' }}>\r\n <div\r\n className={`selector ${className}`}\r\n style={selectorStyle}\r\n onClick={() => !disabled && setIsOpen(!isOpen)}\r\n onKeyDown={handleKeyDown}\r\n tabIndex={disabled ? -1 : 0}\r\n role=\"combobox\"\r\n aria-expanded={isOpen}\r\n aria-haspopup=\"listbox\"\r\n {...props}\r\n >\r\n <span\r\n style={{\r\n color: selectedOption\r\n ? statusStyles.color\r\n : 'var(--selector-placeholder-text, #9ca3af)',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n }}\r\n >\r\n {selectedOption ? selectedOption.label : placeholder}\r\n </span>\r\n\r\n {/ Arrow Icon /}\r\n <svg style={arrowStyle} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\r\n </svg>\r\n </div>\r\n\r\n {/ Dropdown /}\r\n {isOpen && (\r\n <div ref={dropdownRef} style={dropdownStyle} role=\"listbox\">\r\n {options.map((option, index) => (\r\n <div\r\n key={option.value}\r\n style={optionStyle(option, index)}\r\n onClick={() => {\r\n if (!option.disabled) {\r\n onChange(option.value);\r\n setIsOpen(false);\r\n setFocusedIndex(-1);\r\n }\r\n }}\r\n onMouseEnter={() => !option.disabled && setFocusedIndex(index)}\r\n role=\"option\"\r\n aria-selected={option.value === value}\r\n aria-disabled={option.disabled}\r\n title={option.description}\r\n >\r\n <div\r\n style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}\r\n >\r\n <span>{option.label}</span>\r\n {option.value === value && (\r\n <svg\r\n style={{ width: '1rem', height: '1rem', color: '#3b82f6' }}\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 20 20\"\r\n >\r\n <path\r\n fillRule=\"evenodd\"\r\n 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\"\r\n clipRule=\"evenodd\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n {option.description && (\r\n <div\r\n style={{\r\n fontSize: '0.75rem',\r\n color: '#9ca3af',\r\n marginTop: '0.25rem',\r\n fontWeight: 'normal',\r\n }}\r\n >\r\n {option.description}\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import React, { useState } from 'react';\r\nimport { Selector, SelectorOption } from './Selector';\r\nimport { ValueEntry } from './TestValueEntry';\r\nimport { Button } from './Button';\r\n\r\nexport interface ModeConfig {\r\n /* Units for this mode /\r\n unit?: string;\r\n /* Label for the primary setpoint /\r\n label?: string;\r\n /* Minimum value for primary setpoint /\r\n min?: number;\r\n /* Maximum value for primary setpoint /\r\n max?: number;\r\n /* Precision for primary setpoint /\r\n precision?: number;\r\n /* Whether this mode has a second setpoint (like ramp time) /\r\n hasSecondSetpoint?: boolean;\r\n /* Label for the second setpoint /\r\n secondLabel?: string;\r\n /* Units for the second setpoint /\r\n secondUnit?: string;\r\n /* Min value for second setpoint /\r\n secondMin?: number;\r\n /* Max value for second setpoint /\r\n secondMax?: number;\r\n /* Precision for second setpoint /\r\n secondPrecision?: number;\r\n}\r\n\r\nexport interface ControlPanelProps extends React.HTMLAttributes<HTMLDivElement> {\r\n /* Panel title/identifier /\r\n title: string;\r\n /* Currently selected mode /\r\n selectedMode: string;\r\n /* Available mode options /\r\n modeOptions: SelectorOption[];\r\n /* Callback when mode changes /\r\n onModeChange: (mode: string) => void;\r\n /* Current setpoint value /\r\n setpointValue: number \| string;\r\n /* Callback when setpoint changes /\r\n onSetpointChange: (value: number \| string) => void;\r\n /* Current second setpoint value (for ramp mode, etc.) /\r\n secondSetpointValue?: number \| string;\r\n /* Callback when second setpoint changes /\r\n onSecondSetpointChange?: (value: number \| string) => void;\r\n /* Configuration for each mode /\r\n modeConfigs?: Record<string, ModeConfig>;\r\n /* Default unit when no mode config is found /\r\n defaultUnit?: string;\r\n /* Default label when no mode config is found /\r\n defaultLabel?: string;\r\n /* Default min when no mode config is found /\r\n defaultMin?: number;\r\n /* Default max when no mode config is found /\r\n defaultMax?: number;\r\n /* Default precision when no mode config is found /\r\n defaultPrecision?: number;\r\n /* Status state for the entire panel /\r\n status?: 'normal' \| 'alarm' \| 'warning' \| 'disabled';\r\n /* Whether the panel is collapsed /\r\n collapsed?: boolean;\r\n /* Callback when collapse state changes /\r\n onCollapseChange?: (collapsed: boolean) => void;\r\n /* Panel size variant /\r\n size?: 'small' \| 'medium' \| 'large';\r\n /* Whether setpoint is read-only /\r\n setpointReadOnly?: boolean;\r\n /* Whether to show start/stop buttons /\r\n showStartStopButtons?: boolean;\r\n /* Whether the process is currently running /\r\n isRunning?: boolean;\r\n /* Callback when start button is clicked /\r\n onStart?: () => void;\r\n /* Callback when stop button is clicked /\r\n onStop?: () => void;\r\n /* Custom start button text /\r\n startButtonText?: string;\r\n /* Custom stop button text /\r\n stopButtonText?: string;\r\n}\r\n\r\nexport const ControlPanel: React.FC<ControlPanelProps> = ({\r\n title,\r\n selectedMode,\r\n modeOptions,\r\n onModeChange,\r\n setpointValue,\r\n onSetpointChange,\r\n secondSetpointValue,\r\n onSecondSetpointChange,\r\n modeConfigs = {},\r\n defaultUnit = 'Units',\r\n defaultLabel = 'Setpoint',\r\n defaultMin = 0,\r\n defaultMax = 100,\r\n defaultPrecision = 2,\r\n status = 'normal',\r\n collapsed = false,\r\n onCollapseChange,\r\n size = 'medium',\r\n setpointReadOnly = false,\r\n showStartStopButtons = false,\r\n isRunning = false,\r\n onStart,\r\n onStop,\r\n startButtonText = 'Start',\r\n stopButtonText = 'Stop',\r\n className = '',\r\n ...props\r\n}) => {\r\n const [isExpanded, setIsExpanded] = useState(!collapsed);\r\n\r\n const toggleExpanded = () => {\r\n const newExpanded = !isExpanded;\r\n setIsExpanded(newExpanded);\r\n onCollapseChange?.(!newExpanded);\r\n };\r\n\r\n // Get current mode configuration\r\n const currentModeConfig = modeConfigs[selectedMode] \|\| {};\r\n const currentUnit = currentModeConfig.unit \|\| defaultUnit;\r\n const currentLabel = currentModeConfig.label \|\| defaultLabel;\r\n const currentMin = currentModeConfig.min ?? defaultMin;\r\n const currentMax = currentModeConfig.max ?? defaultMax;\r\n const currentPrecision = currentModeConfig.precision ?? defaultPrecision;\r\n const hasSecondSetpoint = currentModeConfig.hasSecondSetpoint \|\| false;\r\n\r\n // Size-based styling\r\n const getSizeStyles = () => {\r\n switch (size) {\r\n case 'small':\r\n return {\r\n padding: '1rem',\r\n titleSize: '1rem',\r\n gap: '0.75rem',\r\n };\r\n case 'large':\r\n return {\r\n padding: '1.5rem',\r\n titleSize: '1.5rem',\r\n gap: '1.25rem',\r\n };\r\n default:\r\n return {\r\n padding: '1.25rem',\r\n titleSize: '1.125rem',\r\n gap: '1rem',\r\n };\r\n }\r\n };\r\n\r\n // Status-based styling with CSS custom properties for theme override\r\n const getStatusStyles = () => {\r\n switch (status) {\r\n case 'alarm':\r\n return {\r\n borderColor: 'var(--control-panel-alarm-border, #ef4444)',\r\n backgroundColor: 'var(--control-panel-alarm-bg, rgba(239, 68, 68, 0.1))',\r\n titleColor: 'var(--control-panel-alarm-text, #fecaca)',\r\n boxShadow: 'var(--control-panel-alarm-shadow, 0 0 20px rgba(239, 68, 68, 0.3))',\r\n glowEffect: 'var(--control-panel-alarm-glow, 0 0 30px rgba(239, 68, 68, 0.2))',\r\n };\r\n case 'warning':\r\n return {\r\n borderColor: 'var(--control-panel-warning-border, #f59e0b)',\r\n backgroundColor: 'var(--control-panel-warning-bg, rgba(245, 158, 11, 0.1))',\r\n titleColor: 'var(--control-panel-warning-text, #fed7aa)',\r\n boxShadow: 'var(--control-panel-warning-shadow, 0 0 20px rgba(245, 158, 11, 0.3))',\r\n glowEffect: 'var(--control-panel-warning-glow, 0 0 30px rgba(245, 158, 11, 0.2))',\r\n };\r\n case 'disabled':\r\n return {\r\n borderColor: 'var(--control-panel-disabled-border, #6b7280)',\r\n backgroundColor: 'var(--control-panel-disabled-bg, rgba(107, 114, 128, 0.1))',\r\n titleColor: 'var(--control-panel-disabled-text, #9ca3af)',\r\n boxShadow: 'var(--control-panel-disabled-shadow, 0 8px 32px rgba(0, 0, 0, 0.2))',\r\n glowEffect: 'var(--control-panel-disabled-glow, none)',\r\n };\r\n default:\r\n return {\r\n borderColor: 'var(--control-panel-normal-border, #64748b)',\r\n backgroundColor: 'var(--control-panel-normal-bg, rgba(30, 41, 59, 0.9))',\r\n titleColor: 'var(--control-panel-normal-text, #f1f5f9)',\r\n boxShadow: 'var(--control-panel-normal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3))',\r\n glowEffect: 'var(--control-panel-normal-glow, 0 0 20px rgba(59, 130, 246, 0.1))',\r\n };\r\n }\r\n };\r\n\r\n const sizeStyles = getSizeStyles();\r\n const statusStyles = getStatusStyles();\r\n\r\n const panelStyle: React.CSSProperties = {\r\n border: '2px solid',\r\n borderRadius: '1.5rem',\r\n backdropFilter: 'blur(12px)',\r\n transition: 'all 400ms cubic-bezier(0.4, 0, 0.2, 1)',\r\n position: 'relative',\r\n overflow: 'hidden',\r\n minWidth: '300px',\r\n maxWidth: '400px',\r\n minHeight: '400px',\r\n width: '100%',\r\n ...statusStyles,\r\n boxShadow: isExpanded ? statusStyles.glowEffect : statusStyles.boxShadow,\r\n };\r\n\r\n const headerStyle: React.CSSProperties = {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n padding: sizeStyles.padding,\r\n cursor: onCollapseChange ? 'pointer' : 'default',\r\n borderBottom: isExpanded ? `1px solid ${statusStyles.borderColor}40` : 'none',\r\n transition: 'all 300ms ease',\r\n };\r\n\r\n const titleStyle: React.CSSProperties = {\r\n fontSize: sizeStyles.titleSize,\r\n fontWeight: 'bold',\r\n color: statusStyles.titleColor,\r\n fontFamily:\r\n 'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n letterSpacing: '0.05em',\r\n margin: 0,\r\n };\r\n\r\n const contentStyle: React.CSSProperties = {\r\n padding: isExpanded ? sizeStyles.padding : '0',\r\n paddingTop: isExpanded ? sizeStyles.padding : '0',\r\n maxHeight: isExpanded ? '500px' : '0',\r\n opacity: isExpanded ? 1 : 0,\r\n overflow: 'hidden',\r\n transition: 'all 400ms cubic-bezier(0.4, 0, 0.2, 1)',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: sizeStyles.gap,\r\n justifyContent: 'space-between',\r\n flex: 1,\r\n };\r\n\r\n const chevronStyle: React.CSSProperties = {\r\n width: '1.5rem',\r\n height: '1.5rem',\r\n color: statusStyles.titleColor,\r\n transform: `rotate(${isExpanded ? '180deg' : '0deg'})`,\r\n transition: 'transform 300ms ease',\r\n opacity: onCollapseChange ? 1 : 0.3,\r\n };\r\n\r\n const statusBadgeStyle: React.CSSProperties = {\r\n position: 'absolute',\r\n top: '0.5rem',\r\n right: '0.5rem',\r\n width: '0.75rem',\r\n height: '0.75rem',\r\n borderRadius: '50%',\r\n backgroundColor:\r\n status === 'alarm'\r\n ? '#ef4444'\r\n : status === 'warning'\r\n ? '#f59e0b'\r\n : status === 'disabled'\r\n ? '#6b7280'\r\n : '#22c55e',\r\n boxShadow: `0 0 10px ${status === 'alarm' ? '#ef4444' : status === 'warning' ? '#f59e0b' : status === 'disabled' ? '#6b7280' : '#22c55e'}80`,\r\n animation: status === 'alarm' ? 'pulse 2s infinite' : 'none',\r\n };\r\n\r\n return (\r\n <div style={panelStyle} className={`control-panel glass-card ${className}`} {...props}>\r\n {/ Status Badge /}\r\n <div style={statusBadgeStyle} />\r\n\r\n {/ Header /}\r\n <div style={headerStyle} onClick={onCollapseChange ? toggleExpanded : undefined}>\r\n <h3 style={titleStyle}>{title}</h3>\r\n {onCollapseChange && (\r\n <svg style={chevronStyle} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\r\n </svg>\r\n )}\r\n </div>\r\n\r\n {/ Content /}\r\n <div style={contentStyle}>\r\n {/ Mode Selector /}\r\n <div>\r\n <Selector\r\n value={selectedMode}\r\n onChange={onModeChange}\r\n options={modeOptions}\r\n label=\"Control Mode\"\r\n status={status}\r\n size={size === 'small' ? 'small' : size === 'large' ? 'large' : 'medium'}\r\n disabled={status === 'disabled'}\r\n />\r\n </div>\r\n\r\n {/ Primary Setpoint Value Entry /}\r\n <div>\r\n <ValueEntry\r\n value={setpointValue}\r\n onChange={onSetpointChange}\r\n label={currentLabel}\r\n unit={currentUnit}\r\n min={currentMin}\r\n max={currentMax}\r\n precision={currentPrecision}\r\n status={status}\r\n readOnly={setpointReadOnly \|\| status === 'disabled'}\r\n disabled={status === 'disabled'}\r\n />\r\n </div>\r\n\r\n {/ Second Setpoint (for ramp mode, etc.) /}\r\n {hasSecondSetpoint && onSecondSetpointChange && (\r\n <div>\r\n <ValueEntry\r\n value={secondSetpointValue \|\| 0}\r\n onChange={onSecondSetpointChange}\r\n label={currentModeConfig.secondLabel \|\| 'Time'}\r\n unit={currentModeConfig.secondUnit \|\| 'sec'}\r\n min={currentModeConfig.secondMin ?? 0}\r\n max={currentModeConfig.secondMax ?? 999}\r\n precision={currentModeConfig.secondPrecision ?? 0}\r\n status={status}\r\n readOnly={setpointReadOnly \|\| status === 'disabled'}\r\n disabled={status === 'disabled'}\r\n />\r\n </div>\r\n )}\r\n\r\n {/ Start/Stop Buttons /}\r\n {showStartStopButtons && (onStart \|\| onStop) && (\r\n <div style={{ display: 'flex', gap: '0.75rem' }}>\r\n {onStart && (\r\n <Button\r\n variant=\"primary\"\r\n onClick={onStart}\r\n disabled={isRunning \|\| status === 'disabled'}\r\n style={{\r\n flex: 1,\r\n fontSize: '0.875rem',\r\n padding: '0.75rem 1rem',\r\n backgroundColor: isRunning ? '#6b7280' : undefined,\r\n }}\r\n >\r\n {startButtonText}\r\n </Button>\r\n )}\r\n {onStop && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={onStop}\r\n disabled={!isRunning \|\| status === 'disabled'}\r\n style={{\r\n flex: 1,\r\n fontSize: '0.875rem',\r\n padding: '0.75rem 1rem',\r\n backgroundColor: !isRunning ? '#6b7280' : '#dc2626',\r\n borderColor: !isRunning ? '#6b7280' : '#dc2626',\r\n }}\r\n >\r\n {stopButtonText}\r\n </Button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {/ Additional Info Row /}\r\n <div\r\n className=\"control-panel-info\"\r\n style={{\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n padding: '0.5rem 0',\r\n fontSize: '0.75rem',\r\n color: 'var(--control-panel-info-text, #9ca3af)',\r\n borderTop: `1px solid ${statusStyles.borderColor}20`,\r\n fontFamily:\r\n 'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n }}\r\n >\r\n <span>Mode: {selectedMode.toUpperCase()}</span>\r\n <div style={{ display: 'flex', gap: '1rem' }}>\r\n <span>\r\n SP: {String(setpointValue)}\r\n {currentUnit}\r\n </span>\r\n {hasSecondSetpoint && secondSetpointValue && (\r\n <span>\r\n {currentModeConfig.secondLabel}: {String(secondSetpointValue)}\r\n {currentModeConfig.secondUnit}\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import React, { createContext, useContext, useState, useEffect } from 'react';\r\n\r\ntype Theme = 'modern' \| 'hmi';\r\n\r\ninterface ThemeContextType {\r\n theme: Theme;\r\n toggleTheme: () => void;\r\n setTheme: (theme: Theme) => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType \| undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n const context = useContext(ThemeContext);\r\n if (!context) {\r\n throw new Error('useTheme must be used within a ThemeProvider');\r\n }\r\n return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {\r\n const [theme, setThemeState] = useState<Theme>('modern');\r\n\r\n useEffect(() => {\r\n // Apply theme classes to document body\r\n document.body.className = '';\r\n document.body.classList.add(`theme-${theme}`);\r\n\r\n // Also apply to html element for global styling\r\n document.documentElement.className = '';\r\n document.documentElement.classList.add(`theme-${theme}`);\r\n }, [theme]);\r\n\r\n const toggleTheme = () => {\r\n setTheme(theme === 'modern' ? 'hmi' : 'modern');\r\n };\r\n\r\n const setTheme = (newTheme: Theme) => {\r\n setThemeState(newTheme);\r\n };\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n","import React from 'react';\r\nimport { useTheme } from './ThemeContext';\r\n\r\nexport interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {\r\n /* Size of the toggle /\r\n size?: 'small' \| 'medium' \| 'large';\r\n /* Position of the toggle */\r\n position?: 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'inline';\r\n}\r\n\r\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({\r\n size = 'medium',\r\n position = 'top-right',\r\n className = '',\r\n ...props\r\n}) => {\r\n const { theme, toggleTheme } = useTheme();\r\n\r\n const sizeStyles = {\r\n small: { padding: '0.5rem 1rem', fontSize: '0.75rem' },\r\n medium: { padding: '0.75rem 1.5rem', fontSize: '0.875rem' },\r\n large: { padding: '1rem 2rem', fontSize: '1rem' },\r\n };\r\n\r\n const positionStyles = {\r\n 'top-left': { position: 'fixed' as const, top: '1rem', left: '1rem', zIndex: 1000 },\r\n 'top-right': { position: 'fixed' as const, top: '1rem', right: '1rem', zIndex: 1000 },\r\n 'bottom-left': { position: 'fixed' as const, bottom: '1rem', left: '1rem', zIndex: 1000 },\r\n 'bottom-right': { position: 'fixed' as const, bottom: '1rem', right: '1rem', zIndex: 1000 },\r\n inline: { position: 'relative' as const },\r\n };\r\n\r\n const baseStyle: React.CSSProperties = {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '0.75rem',\r\n cursor: 'pointer',\r\n borderRadius: '0.5rem',\r\n border: '2px solid',\r\n fontFamily:\r\n 'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n fontWeight: 600,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n transition: 'all 0.2s ease',\r\n userSelect: 'none',\r\n ...sizeStyles[size],\r\n ...positionStyles[position],\r\n };\r\n\r\n const modernStyle: React.CSSProperties = {\r\n ...baseStyle,\r\n background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%)',\r\n borderColor: 'rgba(59, 130, 246, 0.4)',\r\n color: '#ffffff',\r\n boxShadow: '0 8px 32px rgba(59, 130, 246, 0.3)',\r\n };\r\n\r\n const hmiStyle: React.CSSProperties = {\r\n ...baseStyle,\r\n backgroundColor: '#666666',\r\n borderColor: '#999999',\r\n color: '#ffffff',\r\n boxShadow: 'none',\r\n };\r\n\r\n const currentStyle = theme === 'modern' ? modernStyle : hmiStyle;\r\n\r\n const toggleStyle: React.CSSProperties = {\r\n position: 'relative',\r\n width: '3rem',\r\n height: '1.5rem',\r\n borderRadius: '0.75rem',\r\n transition: 'all 0.2s ease',\r\n backgroundColor: theme === 'modern' ? '#3b82f6' : '#808080',\r\n border: `2px solid ${theme === 'modern' ? '#2563eb' : '#666666'}`,\r\n };\r\n\r\n const thumbStyle: React.CSSProperties = {\r\n position: 'absolute',\r\n top: '0.125rem',\r\n left: theme === 'modern' ? '0.125rem' : '1.375rem',\r\n width: '1rem',\r\n height: '1rem',\r\n borderRadius: '50%',\r\n backgroundColor: '#ffffff',\r\n transition: 'all 0.2s ease',\r\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',\r\n };\r\n\r\n return (\r\n <div style={currentStyle} onClick={toggleTheme} className={className} {...props}>\r\n <span>{theme === 'modern' ? '🎨 Modern' : '🏭 HMI'}</span>\r\n <div style={toggleStyle}>\r\n <div style={thumbStyle} />\r\n </div>\r\n <span style={{ fontSize: '0.75rem', opacity: 0.8 }}>\r\n {theme === 'modern' ? 'Industrial Design' : 'High Performance'}\r\n </span>\r\n </div>\r\n );\r\n};\r\n"],"mappings":"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","names":["jsx","jsx","jsxs","useState","jsx","jsxs","selectedOption","useState","jsx","jsxs","useState","useState","useEffect","jsx","jsx","jsxs"]}
1	+ {"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/ControlPanel/ControlPanel.tsx","../src/components/Selector/Selector.tsx","../src/components/ValueEntry/ValueEntry.tsx","../src/components/ValueEntry/LegacyValueEntry.tsx","../src/components/StatusIndicator/StatusIndicator.tsx","../src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx","../src/components/layout/FullscreenWorkspace/FullscreenWorkspace.styles.tsx","../src/components/layout/FullscreenWorkspace/FullscreenWorkspace.overlays.tsx","../src/components/layout/FullscreenWorkspace/FullscreenWorkspace.visuals.tsx","../src/theme/ThemeContext.tsx","../src/theme/ThemeToggle.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n variant?: 'primary' \| 'secondary';\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n variant = 'primary',\r\n children,\r\n className = '',\r\n ...props\r\n}) => {\r\n // Use CSS classes for base and variant styles\r\n const baseClass = 'ui-btn';\r\n const variantClass = variant ? `ui-btn--${variant}` : '';\r\n return (\r\n <button className={`${baseClass} ${variantClass} ${className}`.trim()} {...props}>\r\n {children}\r\n </button>\r\n );\r\n};\r\n","import React, { useState } from 'react';\r\nimport { Selector, SelectorOption } from '../Selector';\r\nimport { LegacyValueEntry as ValueEntry } from '../ValueEntry';\r\nimport { Button } from '../Button';\r\n\r\nexport interface ModeConfig {\r\n /** Units for this mode /\r\n unit?: string;\r\n /* Label for the primary setpoint /\r\n label?: string;\r\n /* Minimum value for primary setpoint /\r\n min?: number;\r\n /* Maximum value for primary setpoint /\r\n max?: number;\r\n /* Precision for primary setpoint /\r\n precision?: number;\r\n /* Whether this mode has a second setpoint (like ramp time) /\r\n hasSecondSetpoint?: boolean;\r\n /* Label for the second setpoint /\r\n secondLabel?: string;\r\n /* Units for the second setpoint /\r\n secondUnit?: string;\r\n /* Min value for second setpoint /\r\n secondMin?: number;\r\n /* Max value for second setpoint /\r\n secondMax?: number;\r\n /* Precision for second setpoint /\r\n secondPrecision?: number;\r\n}\r\n\r\nexport interface ControlPanelProps extends React.HTMLAttributes<HTMLDivElement> {\r\n /* Panel title/identifier /\r\n title: string;\r\n /* Currently selected mode /\r\n selectedMode: string;\r\n /* Available mode options /\r\n modeOptions: SelectorOption[];\r\n /* Callback when mode changes /\r\n onModeChange: (mode: string) => void;\r\n /* Current setpoint value /\r\n setpointValue: number \| string;\r\n /* Callback when setpoint changes /\r\n onSetpointChange: (value: number \| string) => void;\r\n /* Current second setpoint value (for ramp mode, etc.) /\r\n secondSetpointValue?: number \| string;\r\n /* Callback when second setpoint changes /\r\n onSecondSetpointChange?: (value: number \| string) => void;\r\n /* Configuration for each mode /\r\n modeConfigs?: Record<string, ModeConfig>;\r\n /* Default unit when no mode config is found /\r\n defaultUnit?: string;\r\n /* Default label when no mode config is found /\r\n defaultLabel?: string;\r\n /* Default min when no mode config is found /\r\n defaultMin?: number;\r\n /* Default max when no mode config is found /\r\n defaultMax?: number;\r\n /* Default precision when no mode config is found /\r\n defaultPrecision?: number;\r\n /* Status state for the entire panel /\r\n status?: 'normal' \| 'alarm' \| 'warning' \| 'disabled';\r\n /* Whether the panel is collapsed /\r\n collapsed?: boolean;\r\n /* Callback when collapse state changes /\r\n onCollapseChange?: (collapsed: boolean) => void;\r\n /* Panel size variant /\r\n size?: 'small' \| 'medium' \| 'large';\r\n /* Whether setpoint is read-only /\r\n setpointReadOnly?: boolean;\r\n /* Whether to show start/stop buttons /\r\n showStartStopButtons?: boolean;\r\n /* Whether the process is currently running /\r\n isRunning?: boolean;\r\n /* Callback when start button is clicked /\r\n onStart?: () => void;\r\n /* Callback when stop button is clicked /\r\n onStop?: () => void;\r\n /* Custom start button text /\r\n startButtonText?: string;\r\n /* Custom stop button text /\r\n stopButtonText?: string;\r\n}\r\n\r\nexport const ControlPanel: React.FC<ControlPanelProps> = ({\r\n title,\r\n selectedMode,\r\n modeOptions,\r\n onModeChange,\r\n setpointValue,\r\n onSetpointChange,\r\n secondSetpointValue,\r\n onSecondSetpointChange,\r\n modeConfigs = {},\r\n defaultUnit = 'Units',\r\n defaultLabel = 'Setpoint',\r\n defaultMin = 0,\r\n defaultMax = 100,\r\n defaultPrecision = 2,\r\n status = 'normal',\r\n collapsed = false,\r\n onCollapseChange,\r\n size = 'medium',\r\n setpointReadOnly = false,\r\n showStartStopButtons = false,\r\n isRunning = false,\r\n onStart,\r\n onStop,\r\n startButtonText = 'Start',\r\n stopButtonText = 'Stop',\r\n className = '',\r\n ...props\r\n}) => {\r\n const [isExpanded, setIsExpanded] = useState(!collapsed);\r\n\r\n const toggleExpanded = () => {\r\n const newExpanded = !isExpanded;\r\n setIsExpanded(newExpanded);\r\n onCollapseChange?.(!newExpanded);\r\n };\r\n\r\n // Get current mode configuration\r\n const currentModeConfig = modeConfigs[selectedMode] \|\| {};\r\n const currentUnit = currentModeConfig.unit \|\| defaultUnit;\r\n const currentLabel = currentModeConfig.label \|\| defaultLabel;\r\n const currentMin = currentModeConfig.min ?? defaultMin;\r\n const currentMax = currentModeConfig.max ?? defaultMax;\r\n const currentPrecision = currentModeConfig.precision ?? defaultPrecision;\r\n const hasSecondSetpoint = currentModeConfig.hasSecondSetpoint \|\| false;\r\n\r\n // Use CSS classes for base, status, size, and expanded state\r\n const baseClass = 'ui-control-panel';\r\n const statusClass = status ? `ui-control-panel--${status}` : '';\r\n const sizeClass = size ? `ui-control-panel--${size}` : '';\r\n const expandedClass = isExpanded ? 'is-expanded' : 'is-collapsed';\r\n const collapsibleClass = onCollapseChange ? 'is-collapsible' : '';\r\n\r\n return (\r\n <div\r\n className={`${baseClass} ${statusClass} ${sizeClass} ${expandedClass} ${collapsibleClass} ${className}`.trim()}\r\n {...props}\r\n >\r\n {/ Status Badge /}\r\n <div className={`ui-control-panel-badge ui-control-panel-badge--${status}`} />\r\n\r\n {/ Header /}\r\n <div\r\n className=\"ui-control-panel-header\"\r\n onClick={onCollapseChange ? toggleExpanded : undefined}\r\n >\r\n <h3 className=\"ui-control-panel-title\">{title}</h3>\r\n {onCollapseChange && (\r\n <svg\r\n className=\"ui-control-panel-chevron\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n >\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\r\n </svg>\r\n )}\r\n </div>\r\n\r\n {/ Content /}\r\n <div className=\"ui-control-panel-content\">\r\n {/ Mode Selector /}\r\n <div>\r\n <Selector\r\n value={selectedMode}\r\n onChange={onModeChange}\r\n options={modeOptions}\r\n label=\"Control Mode\"\r\n status={status}\r\n size={size === 'small' ? 'small' : size === 'large' ? 'large' : 'medium'}\r\n disabled={status === 'disabled'}\r\n />\r\n </div>\r\n\r\n {/ Primary Setpoint Value Entry /}\r\n <div>\r\n <ValueEntry\r\n value={setpointValue}\r\n onChange={onSetpointChange}\r\n label={currentLabel}\r\n unit={currentUnit}\r\n min={currentMin}\r\n max={currentMax}\r\n precision={currentPrecision}\r\n status={status}\r\n readOnly={setpointReadOnly \|\| status === 'disabled'}\r\n disabled={status === 'disabled'}\r\n />\r\n </div>\r\n\r\n {/ Second Setpoint (for ramp mode, etc.) /}\r\n {hasSecondSetpoint && onSecondSetpointChange && (\r\n <div>\r\n <ValueEntry\r\n value={secondSetpointValue \|\| 0}\r\n onChange={onSecondSetpointChange}\r\n label={currentModeConfig.secondLabel \|\| 'Time'}\r\n unit={currentModeConfig.secondUnit \|\| 'sec'}\r\n min={currentModeConfig.secondMin ?? 0}\r\n max={currentModeConfig.secondMax ?? 999}\r\n precision={currentModeConfig.secondPrecision ?? 0}\r\n status={status}\r\n readOnly={setpointReadOnly \|\| status === 'disabled'}\r\n disabled={status === 'disabled'}\r\n />\r\n </div>\r\n )}\r\n\r\n {/ Start/Stop Buttons /}\r\n {showStartStopButtons && (onStart \|\| onStop) && (\r\n <div className=\"ui-control-panel-buttons\">\r\n {onStart && (\r\n <Button\r\n variant=\"primary\"\r\n onClick={onStart}\r\n disabled={isRunning \|\| status === 'disabled'}\r\n className={isRunning ? 'is-running' : ''}\r\n >\r\n {startButtonText}\r\n </Button>\r\n )}\r\n {onStop && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={onStop}\r\n disabled={!isRunning \|\| status === 'disabled'}\r\n className={`ui-control-panel-stop-btn${!isRunning ? ' is-disabled' : ''}`}\r\n >\r\n {stopButtonText}\r\n </Button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {/ Additional Info Row /}\r\n <div className=\"ui-control-panel-info\">\r\n <span>Mode: {selectedMode.toUpperCase()}</span>\r\n <div className=\"ui-control-panel-info-values\">\r\n <span>\r\n SP: {String(setpointValue)}\r\n {currentUnit}\r\n </span>\r\n {hasSecondSetpoint && secondSetpointValue && (\r\n <span>\r\n {currentModeConfig.secondLabel}: {String(secondSetpointValue)}\r\n {currentModeConfig.secondUnit}\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import React, { useState, useRef, useEffect } from 'react';\r\n\r\nexport interface SelectorOption {\r\n /* Unique value for the option /\r\n value: string;\r\n /* Display label for the option /\r\n label: string;\r\n /* Whether this option is disabled /\r\n disabled?: boolean;\r\n /* Optional description for tooltip or additional context /\r\n description?: string;\r\n}\r\n\r\nexport interface SelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n /* Currently selected value /\r\n value: string;\r\n /* Callback when selection changes /\r\n onChange: (value: string) => void;\r\n /* List of available options /\r\n options: SelectorOption[];\r\n /* Placeholder text when no option is selected /\r\n placeholder?: string;\r\n /* Whether the selector is disabled /\r\n disabled?: boolean;\r\n /* Status state for visual feedback /\r\n status?: 'normal' \| 'alarm' \| 'warning' \| 'disabled';\r\n /* Size variant /\r\n size?: 'small' \| 'medium' \| 'large';\r\n /* Label for the selector /\r\n label?: string;\r\n /* Whether the dropdown should open upward /\r\n dropdownUp?: boolean;\r\n}\r\n\r\nexport const Selector: React.FC<SelectorProps> = ({\r\n value,\r\n onChange,\r\n options,\r\n placeholder = 'Select option...',\r\n disabled = false,\r\n status = 'normal',\r\n size = 'medium',\r\n label,\r\n dropdownUp: _dropdownUp = false,\r\n className = '',\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [focusedIndex, setFocusedIndex] = useState(-1);\r\n const selectorRef = useRef<HTMLDivElement>(null);\r\n const dropdownRef = useRef<HTMLDivElement>(null);\r\n\r\n // Close dropdown when clicking outside\r\n useEffect(() => {\r\n const handleClickOutside = (event: MouseEvent) => {\r\n if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {\r\n setIsOpen(false);\r\n setFocusedIndex(-1);\r\n }\r\n };\r\n document.addEventListener('mousedown', handleClickOutside);\r\n return () => document.removeEventListener('mousedown', handleClickOutside);\r\n }, []);\r\n\r\n // Handle keyboard navigation\r\n const handleKeyDown = (e: React.KeyboardEvent) => {\r\n if (disabled) return;\r\n switch (e.key) {\r\n case 'Enter':\r\n case ' ':\r\n e.preventDefault();\r\n if (!isOpen) {\r\n setIsOpen(true);\r\n setFocusedIndex(\r\n Math.max(\r\n 0,\r\n options.findIndex((opt) => opt.value === value)\r\n )\r\n );\r\n } else if (focusedIndex >= 0) {\r\n const selectedOption = options[focusedIndex];\r\n if (!selectedOption.disabled) {\r\n onChange(selectedOption.value);\r\n setIsOpen(false);\r\n setFocusedIndex(-1);\r\n }\r\n }\r\n break;\r\n case 'Escape':\r\n setIsOpen(false);\r\n setFocusedIndex(-1);\r\n break;\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n if (!isOpen) {\r\n setIsOpen(true);\r\n setFocusedIndex(\r\n Math.max(\r\n 0,\r\n options.findIndex((opt) => opt.value === value)\r\n )\r\n );\r\n } else {\r\n setFocusedIndex((prev) => {\r\n const nextIndex = Math.min(prev + 1, options.length - 1);\r\n return options[nextIndex]?.disabled ? prev : nextIndex;\r\n });\r\n }\r\n break;\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n if (isOpen) {\r\n setFocusedIndex((prev) => {\r\n const nextIndex = Math.max(prev - 1, 0);\r\n return options[nextIndex]?.disabled ? prev : nextIndex;\r\n });\r\n }\r\n break;\r\n }\r\n };\r\n\r\n // CSS class names for base, status, and size\r\n const baseClass = 'ui-selector';\r\n const statusClass = status ? `ui-selector--${status}` : '';\r\n const sizeClass = size ? `ui-selector--${size}` : '';\r\n\r\n // Get current selected option\r\n const selectedOption = options.find((opt) => opt.value === value);\r\n\r\n return (\r\n <div className={`ui-selector-container ${className}`.trim()}>\r\n {label && <label className=\"ui-selector-label\">{label}</label>}\r\n <div ref={selectorRef} style={{ position: 'relative' }}>\r\n <div\r\n className={`${baseClass} ${statusClass} ${sizeClass}`.trim()}\r\n onClick={() => !disabled && setIsOpen(!isOpen)}\r\n onKeyDown={handleKeyDown}\r\n tabIndex={disabled ? -1 : 0}\r\n role=\"combobox\"\r\n aria-expanded={isOpen}\r\n aria-haspopup=\"listbox\"\r\n {...props}\r\n >\r\n <span className=\"ui-selector-value\">\r\n {selectedOption ? selectedOption.label : placeholder}\r\n </span>\r\n {/ Arrow Icon /}\r\n <svg className=\"ui-selector-arrow\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\r\n </svg>\r\n </div>\r\n\r\n {/ Dropdown /}\r\n {isOpen && (\r\n <div ref={dropdownRef} className=\"ui-selector-dropdown\" role=\"listbox\">\r\n {options.map((option, index) => (\r\n <div\r\n key={option.value}\r\n className={`ui-selector-option${option.disabled ? ' is-disabled' : ''}${option.value === value ? ' is-selected' : ''}`}\r\n onClick={() => {\r\n if (!option.disabled) {\r\n onChange(option.value);\r\n setIsOpen(false);\r\n setFocusedIndex(-1);\r\n }\r\n }}\r\n onMouseEnter={() => !option.disabled && setFocusedIndex(index)}\r\n role=\"option\"\r\n aria-selected={option.value === value}\r\n aria-disabled={option.disabled}\r\n title={option.description}\r\n >\r\n <div className=\"ui-selector-option-label\">\r\n <span>{option.label}</span>\r\n {option.value === value && (\r\n <svg className=\"ui-selector-check\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path\r\n fillRule=\"evenodd\"\r\n 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\"\r\n clipRule=\"evenodd\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n {option.description && (\r\n <div className=\"ui-selector-option-desc\">{option.description}</div>\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import React, { useState, useCallback } from 'react';\r\n\r\nexport interface ValueEntryProps\r\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> {\r\n /* Current value /\r\n value: number \| string;\r\n /* Callback when value changes /\r\n onChange: (value: number \| string) => void;\r\n /* Unit of measurement to display /\r\n unit?: string;\r\n /* Status state for visual feedback /\r\n status?: 'normal' \| 'alarm' \| 'warning' \| 'disabled';\r\n /* Minimum allowed value (for numeric inputs) /\r\n min?: number;\r\n /* Maximum allowed value (for numeric inputs) /\r\n max?: number;\r\n /* Number of decimal places (for numeric inputs) /\r\n precision?: number;\r\n /* Input type - numeric or text /\r\n inputType?: 'numeric' \| 'text';\r\n /* Label for the input /\r\n label?: string;\r\n /* Whether the input is read-only /\r\n readOnly?: boolean;\r\n}\r\n\r\nexport const ValueEntry: React.FC<ValueEntryProps> = ({\r\n value,\r\n onChange,\r\n unit,\r\n status = 'normal',\r\n min,\r\n max,\r\n precision = 2,\r\n inputType = 'numeric',\r\n label,\r\n readOnly = false,\r\n className = '',\r\n disabled,\r\n ...props\r\n}) => {\r\n const [displayValue, setDisplayValue] = useState(String(value));\r\n const [isEditing, setIsEditing] = useState(false);\r\n\r\n const handleFocus = useCallback(() => {\r\n setIsEditing(true);\r\n setDisplayValue(String(value));\r\n }, [value]);\r\n\r\n const handleBlur = useCallback(() => {\r\n setIsEditing(false);\r\n let newValue: number \| string = displayValue;\r\n\r\n if (inputType === 'numeric') {\r\n const numValue = parseFloat(displayValue);\r\n if (!isNaN(numValue)) {\r\n // Apply min/max constraints\r\n let constrainedValue = numValue;\r\n if (min !== undefined) constrainedValue = Math.max(min, constrainedValue);\r\n if (max !== undefined) constrainedValue = Math.min(max, constrainedValue);\r\n\r\n // Apply precision\r\n constrainedValue = parseFloat(constrainedValue.toFixed(precision));\r\n newValue = constrainedValue;\r\n setDisplayValue(String(constrainedValue));\r\n } else {\r\n // Invalid number, revert to original value\r\n setDisplayValue(String(value));\r\n return;\r\n }\r\n }\r\n\r\n if (newValue !== value) {\r\n onChange(newValue);\r\n }\r\n }, [displayValue, inputType, min, max, precision, value, onChange]);\r\n\r\n const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n setDisplayValue(e.target.value);\r\n }, []);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === 'Enter') {\r\n e.currentTarget.blur();\r\n }\r\n if (e.key === 'Escape') {\r\n setDisplayValue(String(value));\r\n e.currentTarget.blur();\r\n }\r\n },\r\n [value]\r\n );\r\n\r\n // Use CSS classes for base, status, and unit styles\r\n const baseClass = 'ui-value-entry';\r\n const unitClass = unit ? 'ui-value-entry--with-unit' : '';\r\n const currentStatus = disabled \|\| readOnly ? 'disabled' : status;\r\n const statusVariantClass = currentStatus ? `ui-value-entry--${currentStatus}` : '';\r\n\r\n const displayText = isEditing\r\n ? displayValue\r\n : inputType === 'numeric'\r\n ? Number(value).toFixed(precision)\r\n : String(value);\r\n\r\n return (\r\n <div className=\"ui-value-entry-container\">\r\n {label && <label className=\"ui-value-entry-label\">{label}</label>}\r\n <div className=\"ui-value-entry-wrapper\">\r\n <input\r\n type={inputType === 'numeric' ? 'text' : 'text'}\r\n value={displayText}\r\n onChange={handleChange}\r\n onFocus={handleFocus}\r\n onBlur={handleBlur}\r\n onKeyDown={handleKeyDown}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n className={`${baseClass} ${statusVariantClass} ${unitClass} ${className}`.trim()}\r\n {...props}\r\n />\r\n {unit && <span className=\"ui-value-entry-unit\">{unit}</span>}\r\n {status === 'alarm' && <div className=\"ui-value-entry-badge ui-value-entry-badge--alarm\" />}\r\n {status === 'warning' && (\r\n <div className=\"ui-value-entry-badge ui-value-entry-badge--warning\" />\r\n )}\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import React, { useState, useCallback } from 'react';\n\nexport interface LegacyValueEntryProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> {\n /* Current value /\n value: number \| string;\n /* Callback when value changes /\r\n onChange: (value: number \| string) => void;\r\n /* Unit of measurement to display /\r\n unit?: string;\r\n /* Status state for visual feedback /\r\n status?: 'normal' \| 'alarm' \| 'warning' \| 'disabled';\r\n /* Minimum allowed value (for numeric inputs) /\r\n min?: number;\r\n /* Maximum allowed value (for numeric inputs) /\r\n max?: number;\r\n /* Number of decimal places (for numeric inputs) /\r\n precision?: number;\r\n /* Input type - numeric or text /\r\n inputType?: 'numeric' \| 'text';\r\n /* Label for the input /\n label?: string;\n /* Whether the input is read-only /\n readOnly?: boolean;\n}\n\nexport const LegacyValueEntry: React.FC<LegacyValueEntryProps> = ({\n value,\n onChange,\n unit,\n status = 'normal',\n min,\r\n max,\r\n precision = 2,\r\n inputType = 'numeric',\r\n label,\r\n readOnly = false,\r\n className = '',\r\n disabled,\r\n ...props\r\n}) => {\r\n const [displayValue, setDisplayValue] = useState(String(value));\r\n const [isEditing, setIsEditing] = useState(false);\r\n\r\n const handleFocus = useCallback(() => {\r\n setIsEditing(true);\r\n setDisplayValue(String(value));\r\n }, [value]);\r\n\r\n const handleBlur = useCallback(() => {\r\n setIsEditing(false);\r\n let newValue: number \| string = displayValue;\r\n\r\n if (inputType === 'numeric') {\r\n const numValue = parseFloat(displayValue);\r\n if (!isNaN(numValue)) {\r\n // Apply min/max constraints\r\n let constrainedValue = numValue;\r\n if (min !== undefined) constrainedValue = Math.max(min, constrainedValue);\r\n if (max !== undefined) constrainedValue = Math.min(max, constrainedValue);\r\n\r\n // Apply precision\r\n constrainedValue = parseFloat(constrainedValue.toFixed(precision));\r\n newValue = constrainedValue;\r\n setDisplayValue(String(constrainedValue));\r\n } else {\r\n // Invalid number, revert to original value\r\n setDisplayValue(String(value));\r\n return;\r\n }\r\n }\r\n\r\n if (newValue !== value) {\r\n onChange(newValue);\r\n }\r\n }, [displayValue, inputType, min, max, precision, value, onChange]);\r\n\r\n const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n setDisplayValue(e.target.value);\r\n }, []);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === 'Enter') {\r\n e.currentTarget.blur();\r\n }\r\n if (e.key === 'Escape') {\r\n setDisplayValue(String(value));\r\n e.currentTarget.blur();\r\n }\r\n },\r\n [value]\r\n );\r\n\r\n // Create the display text\r\n const displayText = isEditing\r\n ? displayValue\r\n : inputType === 'numeric'\r\n ? Number(value).toFixed(precision)\r\n : String(value);\r\n\r\n // Status-based styling with modern industrial colors\r\n const getStatusStyles = () => {\r\n switch (status) {\r\n case 'alarm':\r\n return {\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.15)',\r\n color: '#fecaca',\r\n boxShadow: '0 0 20px rgba(239, 68, 68, 0.3)',\r\n };\r\n case 'warning':\r\n return {\r\n borderColor: '#f59e0b',\r\n backgroundColor: 'rgba(245, 158, 11, 0.15)',\r\n color: '#fed7aa',\r\n boxShadow: '0 0 20px rgba(245, 158, 11, 0.3)',\r\n };\r\n case 'disabled':\r\n return {\r\n borderColor: '#6b7280',\r\n backgroundColor: 'rgba(107, 114, 128, 0.1)',\r\n color: '#9ca3af',\r\n cursor: 'not-allowed',\r\n };\r\n default:\r\n return {\r\n borderColor: '#64748b',\r\n backgroundColor: 'rgba(30, 41, 59, 0.9)',\r\n color: '#f1f5f9',\r\n boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',\r\n };\r\n }\r\n };\r\n\r\n const statusStyles = getStatusStyles();\r\n\r\n const inputStyle: React.CSSProperties = {\r\n width: '12rem',\r\n height: '4rem',\r\n padding: unit ? '1rem 4rem 1rem 1.5rem' : '1rem 1.5rem',\r\n border: '2px solid',\r\n borderRadius: '1.5rem',\r\n fontFamily:\r\n 'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n fontSize: '1.25rem',\r\n fontWeight: 'bold',\r\n textAlign: 'center',\r\n outline: 'none',\r\n transition: 'all 300ms ease',\r\n backdropFilter: 'blur(8px)',\r\n ...statusStyles,\r\n };\r\n\r\n const inputStyleFocus: React.CSSProperties = {\r\n ...inputStyle,\r\n borderColor: '#60a5fa',\r\n boxShadow:\r\n '0 0 0 4px rgba(96, 165, 250, 0.3), ' +\r\n (statusStyles.boxShadow \|\| '0 8px 32px rgba(0, 0, 0, 0.3)'),\r\n transform: 'scale(1.02)',\r\n };\r\n\r\n const unitStyle: React.CSSProperties = {\r\n position: 'absolute',\r\n right: '0.75rem',\r\n top: '50%',\r\n transform: 'translateY(-50%)',\r\n padding: '0.5rem 0.75rem',\r\n fontSize: '1rem',\r\n fontWeight: 'bold',\r\n color: '#ffffff',\r\n backgroundColor: '#3b82f6',\r\n borderRadius: '0.5rem',\r\n border: '2px solid #60a5fa',\r\n backdropFilter: 'blur(4px)',\r\n pointerEvents: 'none' as const,\r\n zIndex: 10,\r\n boxShadow: '0 2px 8px rgba(59, 130, 246, 0.4)',\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n display: 'inline-flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n gap: '0.75rem',\r\n }}\r\n >\r\n {label && (\r\n <label\r\n style={{\r\n fontSize: '0.875rem',\r\n fontWeight: '600',\r\n color: '#cbd5e1',\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n }}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>\r\n <input\r\n type=\"text\"\r\n value={displayText}\r\n onChange={handleChange}\r\n onFocus={(e) => {\r\n Object.assign(e.target.style, inputStyleFocus);\r\n handleFocus();\r\n }}\r\n onBlur={(e) => {\r\n Object.assign(e.target.style, inputStyle);\r\n handleBlur();\r\n }}\r\n onKeyDown={handleKeyDown}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n style={inputStyle}\r\n {...props}\r\n />\r\n {unit && <span style={unitStyle}>{unit}</span>}\r\n {status === 'alarm' && (\r\n <div\r\n style={{\r\n position: 'absolute',\r\n top: '-8px',\r\n right: '-8px',\r\n width: '1rem',\r\n height: '1rem',\r\n backgroundColor: '#ef4444',\r\n borderRadius: '50%',\r\n boxShadow: '0 0 10px rgba(239, 68, 68, 0.8)',\r\n animation: 'pulse 2s infinite',\r\n }}\r\n />\r\n )}\r\n {status === 'warning' && (\r\n <div\r\n style={{\r\n position: 'absolute',\r\n top: '-8px',\r\n right: '-8px',\r\n width: '1rem',\r\n height: '1rem',\r\n backgroundColor: '#f59e0b',\r\n borderRadius: '50%',\r\n boxShadow: '0 0 10px rgba(245, 158, 11, 0.8)',\r\n }}\r\n />\r\n )}\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import React from 'react';\r\n\r\nexport interface StatusIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\r\n /* Status state determining color and behavior /\r\n status: 'off' \| 'normal' \| 'alarm' \| 'warning' \| 'active' \| 'fault';\r\n /* Size of the indicator /\r\n size?: 'small' \| 'medium' \| 'large';\r\n /* Animation behavior /\r\n animation?: 'none' \| 'pulse' \| 'blink' \| 'flash';\r\n /* Label text to display next to indicator /\r\n label?: string;\r\n /* Position of label relative to indicator /\r\n labelPosition?: 'left' \| 'right' \| 'top' \| 'bottom';\r\n /* Shape of the indicator /\r\n shape?: 'circle' \| 'square' \| 'diamond';\r\n /* Whether the indicator should have a 3D LED effect /\r\n led?: boolean;\r\n}\r\n\r\nexport const StatusIndicator: React.FC<StatusIndicatorProps> = ({\r\n status,\r\n size = 'medium',\r\n animation = 'none',\r\n label,\r\n labelPosition = 'right',\r\n shape = 'circle',\r\n led = true,\r\n className = '',\r\n ...props\r\n}) => {\r\n // Use CSS classes for base, status, size, shape, animation, led\r\n const baseClass = 'ui-status-indicator';\r\n const statusClass = status ? `ui-status-indicator--${status}` : '';\r\n const sizeClass = size ? `ui-status-indicator--${size}` : '';\r\n const shapeClass = shape ? `ui-status-indicator--${shape}` : '';\r\n const animationClass = animation ? `ui-status-indicator--${animation}` : '';\r\n const ledClass = led ? 'ui-status-indicator--led' : '';\r\n\r\n // Container layout based on label position\r\n const getContainerLayout = () => {\r\n switch (labelPosition) {\r\n case 'left':\r\n return 'ui-status-indicator-container ui-status-indicator-label-left';\r\n case 'right':\r\n return 'ui-status-indicator-container ui-status-indicator-label-right';\r\n case 'top':\r\n return 'ui-status-indicator-container ui-status-indicator-label-top';\r\n case 'bottom':\r\n return 'ui-status-indicator-container ui-status-indicator-label-bottom';\r\n default:\r\n return 'ui-status-indicator-container ui-status-indicator-label-right';\r\n }\r\n };\r\n\r\n return (\r\n <span className={getContainerLayout()}>\r\n {label && (labelPosition === 'left' \|\| labelPosition === 'top') && (\r\n <span className=\"ui-status-indicator-label\">{label}</span>\r\n )}\r\n <span\r\n className={`\r\n ${baseClass}\r\n ${statusClass}\r\n ${sizeClass}\r\n ${shapeClass}\r\n ${animationClass}\r\n ${ledClass}\r\n ${className}\r\n `\r\n .replace(/\\s+/g, ' ')\r\n .trim()}\r\n {...props}\r\n />\r\n {label && (labelPosition === 'right' \|\| labelPosition === 'bottom') && (\r\n <span className=\"ui-status-indicator-label\">{label}</span>\r\n )}\r\n </span>\r\n );\r\n};\r\n","import React from 'react';\nimport { Tab } from '@mui/material';\nimport {\n ChevronLeft,\n ChevronRight,\n DisplayModeToggle,\n FixedSVGContainer,\n FooterPanel,\n FullscreenContainer,\n LeftPanel,\n LeftToggleButton,\n PanelContent,\n PanelTabs,\n RightPanel,\n RightToggleButton,\n SVGArea,\n ScrollableSVGWrapper,\n ZoomButton,\n ZoomControls,\n} from './FullscreenWorkspace.styles';\nimport type { DisplayMode, FullscreenWorkspaceProps } from './types';\n\nexport function FullscreenWorkspace({\n svgContent,\n overlays,\n leftPanel,\n rightPanel,\n footer,\n tabs,\n activeTab,\n onTabChange,\n defaultLeftCollapsed = false,\n defaultRightCollapsed = false,\n leftCollapsed: leftCollapsedProp,\n rightCollapsed: rightCollapsedProp,\n onLeftCollapseChange,\n onRightCollapseChange,\n displayMode,\n defaultDisplayMode = 'standard',\n onDisplayModeChange,\n showDisplayModeToggle = true,\n showZoomControls = false,\n onZoomIn,\n onZoomOut,\n onResetZoom,\n zoomDisabled = false,\n className = '',\n ...rest\n}: FullscreenWorkspaceProps): React.ReactElement {\n const [leftCollapsedState, setLeftCollapsedState] = React.useState(defaultLeftCollapsed);\n const [rightCollapsedState, setRightCollapsedState] = React.useState(defaultRightCollapsed);\n const [internalDisplayMode, setInternalDisplayMode] =\n React.useState<DisplayMode>(displayMode ?? defaultDisplayMode);\n const [internalTab, setInternalTab] = React.useState<string>(\n tabs && tabs.length > 0 ? tabs[0].value : ''\n );\n\n const leftCollapsed = leftCollapsedProp ?? leftCollapsedState;\n const rightCollapsed = rightCollapsedProp ?? rightCollapsedState;\n const isDisplayModeControlled = displayMode !== undefined;\n const currentDisplayMode = isDisplayModeControlled ? displayMode : internalDisplayMode;\n const isTabControlled = activeTab !== undefined && activeTab !== null;\n\n const resolvedTabs = React.useMemo(() => tabs ?? [], [tabs]);\n const defaultTabValue = resolvedTabs.length > 0 ? resolvedTabs[0].value : '';\n const currentTab = isTabControlled ? (activeTab as string) : internalTab \|\| defaultTabValue;\n\n React.useEffect(() => {\n if (resolvedTabs.length > 0) {\n const values = resolvedTabs.map((tab) => tab.value);\n if (!values.includes(currentTab)) {\n const fallback = activeTab ?? defaultTabValue;\n setInternalTab(fallback);\n }\n }\n }, [resolvedTabs, activeTab, currentTab, defaultTabValue]);\n\n React.useEffect(() => {\n if (displayMode !== undefined) {\n setInternalDisplayMode(displayMode);\n }\n }, [displayMode]);\n\n const handleLeftToggle = () => {\n const next = !leftCollapsed;\n if (leftCollapsedProp === undefined) {\n setLeftCollapsedState(next);\n }\n onLeftCollapseChange?.(next);\n };\n\n const handleRightToggle = () => {\n const next = !rightCollapsed;\n if (rightCollapsedProp === undefined) {\n setRightCollapsedState(next);\n }\n onRightCollapseChange?.(next);\n };\n\n const handleModeToggle = () => {\n const nextMode = currentDisplayMode === 'standard' ? 'dashboard' : 'standard';\n if (!isDisplayModeControlled) {\n setInternalDisplayMode(nextMode);\n }\n onDisplayModeChange?.(nextMode);\n };\n\n const handleTabChangeInternal = (_: React.SyntheticEvent, value: string) => {\n if (!isTabControlled) {\n setInternalTab(value);\n }\n onTabChange?.(value);\n };\n\n const currentTabContent =\n resolvedTabs.find((tab) => tab.value === currentTab)?.content ?? null;\n\n const showLeftToggle = Boolean(leftPanel);\n const showRightToggle = Boolean(rightPanel);\n\n return (\n <FullscreenContainer\n leftCollapsed={leftCollapsed}\n rightCollapsed={rightCollapsed}\n className={`tff-svg-container ${className}`.trim()}\n {...rest}\n >\n {showLeftToggle && (\n <LeftToggleButton\n collapsed={leftCollapsed}\n onClick={handleLeftToggle}\n aria-label={leftCollapsed ? 'Expand left panel' : 'Collapse left panel'}\n >\n {leftCollapsed ? <ChevronRight /> : <ChevronLeft />}\n </LeftToggleButton>\n )}\n\n {showRightToggle && (\n <RightToggleButton\n collapsed={rightCollapsed}\n onClick={handleRightToggle}\n aria-label={rightCollapsed ? 'Expand right panel' : 'Collapse right panel'}\n >\n {rightCollapsed ? <ChevronLeft /> : <ChevronRight />}\n </RightToggleButton>\n )}\n\n {showDisplayModeToggle && (\n <DisplayModeToggle\n mode={currentDisplayMode}\n onClick={handleModeToggle}\n aria-label=\"Toggle display mode\"\n >\n {currentDisplayMode === 'dashboard' ? 'Dashboard Mode' : 'Standard Mode'}\n </DisplayModeToggle>\n )}\n\n <SVGArea>\n {showZoomControls && (\n <ZoomControls>\n <ZoomButton\n onClick={onZoomIn}\n disabled={zoomDisabled \|\| !onZoomIn}\n size=\"small\"\n aria-label=\"Zoom in\"\n >\n +\n </ZoomButton>\n <ZoomButton\n onClick={onZoomOut}\n disabled={zoomDisabled \|\| !onZoomOut}\n size=\"small\"\n aria-label=\"Zoom out\"\n >\n -\n </ZoomButton>\n {onResetZoom && (\n <ZoomButton\n onClick={onResetZoom}\n disabled={zoomDisabled}\n size=\"small\"\n aria-label=\"Reset zoom\"\n >\n Reset\n </ZoomButton>\n )}\n </ZoomControls>\n )}\n\n <ScrollableSVGWrapper className=\"svg-scroll-wrapper\">\n <FixedSVGContainer className=\"svg-container\">\n {svgContent}\n {overlays}\n </FixedSVGContainer>\n </ScrollableSVGWrapper>\n </SVGArea>\n\n <LeftPanel collapsed={leftCollapsed}>\n {resolvedTabs.length > 0 ? (\n <>\n <PanelTabs\n value={currentTab}\n onChange={handleTabChangeInternal}\n aria-label=\"Left panel tabs\"\n >\n {resolvedTabs.map((tab) => (\n <Tab key={tab.value} label={tab.label} value={tab.value} />\n ))}\n </PanelTabs>\n <PanelContent>{currentTabContent}</PanelContent>\n </>\n ) : (\n leftPanel\n )}\n </LeftPanel>\n\n <RightPanel collapsed={rightCollapsed}>{rightPanel}</RightPanel>\n\n <FooterPanel>{footer}</FooterPanel>\n </FullscreenContainer>\n );\n}\n\nexport type {\n DisplayMode,\n FullscreenContainerProps,\n FullscreenWorkspaceProps,\n FullscreenWorkspaceTab,\n OverlayTheme,\n SVGLockedOverlayProps,\n TrendLineProps,\n CircularGaugeProps,\n SparklineProps,\n EquipmentIndicatorProps,\n EquipmentIndicatorWithSparklineProps,\n} from './types';\n\nexport {\n FullscreenContainer,\n LeftPanel,\n RightPanel,\n SVGArea,\n LeftToggleButton,\n RightToggleButton,\n DisplayModeToggle,\n ZoomControls,\n ZoomButton,\n FooterPanel,\n PanelTabs,\n PanelContent,\n FixedSVGContainer,\n ScrollableSVGWrapper,\n ChevronLeft,\n ChevronRight,\n} from './FullscreenWorkspace.styles';\n\nexport {\n overlayStyles,\n SVGLockedOverlay,\n DashboardCard,\n CardHeader,\n CardValue,\n CardUnit,\n} from './FullscreenWorkspace.overlays';\n\nexport {\n TrendLine,\n Sparkline,\n CircularGauge,\n EquipmentIndicator,\n EquipmentIndicatorWithSparkline,\n} from './FullscreenWorkspace.visuals';\n","import { Box, IconButton, Tabs } from '@mui/material';\nimport styled from '@emotion/styled';\nimport type { DisplayMode, FullscreenContainerProps } from './types';\n\nexport const FullscreenContainer = styled(Box)<FullscreenContainerProps>(\n ({ leftCollapsed, rightCollapsed }) => {\n const getGridTemplateAreas = () => {\n if (leftCollapsed && rightCollapsed) {\n return `\"svg-area\" \"footer\"`;\n }\n if (leftCollapsed) {\n return `\"svg-area right-panel\" \"footer footer\"`;\n }\n if (rightCollapsed) {\n return `\"left-panel svg-area\" \"footer footer\"`;\n }\n return `\"left-panel svg-area right-panel\" \"footer footer footer\"`;\n };\n\n const getGridTemplateColumns = () => {\n if (leftCollapsed && rightCollapsed) {\n return '1fr';\n }\n if (leftCollapsed) {\n return '1fr 380px';\n }\n if (rightCollapsed) {\n return '420px 1fr';\n }\n return '420px 1fr 380px';\n };\n\n return {\n width: '100vw',\n height: '100vh',\n background: '#f5f5f5',\n display: 'grid',\n gridTemplateAreas: getGridTemplateAreas(),\n gridTemplateRows: '1fr 100px',\n gridTemplateColumns: getGridTemplateColumns(),\n gap: '10px',\n padding: '10px',\n boxSizing: 'border-box',\n transition: 'grid-template-columns 0.3s ease-in-out',\n };\n }\n);\n\nexport const LeftPanel = styled(Box)<{ collapsed: boolean }>(({ collapsed }) => ({\n gridArea: 'left-panel',\n background: 'rgba(255, 255, 255, 0.0)',\n border: '1px solid #ddd',\n borderRadius: '8px',\n padding: collapsed ? '0' : '15px',\n overflowY: 'auto',\n display: collapsed ? 'none' : 'block',\n transition: 'all 0.3s ease-in-out',\n}));\n\nexport const RightPanel = styled(Box)<{ collapsed: boolean }>(({ collapsed }) => ({\n gridArea: 'right-panel',\n background: 'rgba(255, 255, 255, 0.0)',\n border: '1px solid #ddd',\n borderRadius: '8px',\n padding: collapsed ? '0' : '15px',\n overflowY: 'auto',\n display: collapsed ? 'none' : 'block',\n transition: 'all 0.3s ease-in-out',\n}));\n\nexport const SVGArea = styled(Box)({\n gridArea: 'svg-area',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n position: 'relative',\n background: 'rgba(255, 255, 255, 0.0)',\n border: '1px solid #ddd',\n borderRadius: '8px',\n overflow: 'auto',\n width: '100%',\n height: '100%',\n});\n\nexport const LeftToggleButton = styled(IconButton)<{ collapsed: boolean }>(\n ({ collapsed }) => ({\n position: 'absolute',\n left: collapsed ? '10px' : '410px',\n top: '50%',\n transform: 'translateY(-50%)',\n zIndex: 1000,\n backgroundColor: 'rgba(255, 255, 255, 0.9)',\n border: '1px solid #ddd',\n transition: 'left 0.3s ease-in-out',\n '&:hover': {\n backgroundColor: 'rgba(255, 255, 255, 1)',\n },\n })\n);\n\nexport const RightToggleButton = styled(IconButton)<{ collapsed: boolean }>(\n ({ collapsed }) => ({\n position: 'absolute',\n right: collapsed ? '10px' : '370px',\n top: '50%',\n transform: 'translateY(-50%)',\n zIndex: 1000,\n backgroundColor: 'rgba(255, 255, 255, 0.9)',\n border: '1px solid #ddd',\n transition: 'right 0.3s ease-in-out',\n '&:hover': {\n backgroundColor: 'rgba(255, 255, 255, 1)',\n },\n })\n);\n\nexport const DisplayModeToggle = styled(IconButton)<{ mode: DisplayMode }>(({ mode }) => ({\n position: 'absolute',\n top: '50px',\n left: '75%',\n transform: 'translateX(-50%)',\n zIndex: 1000,\n backgroundColor:\n mode === 'dashboard' ? 'rgba(52, 152, 219, 0.9)' : 'rgba(255, 255, 255, 0.9)',\n color: mode === 'dashboard' ? 'white' : '#333',\n border: '1px solid #ddd',\n borderRadius: '20px',\n padding: '8px 16px',\n fontSize: '12px',\n fontWeight: '600',\n minWidth: '120px',\n transition: 'all 0.3s ease-in-out',\n '&:hover': {\n backgroundColor:\n mode === 'dashboard' ? 'rgba(52, 152, 219, 1)' : 'rgba(255, 255, 255, 1)',\n transform: 'translateX(-50%) scale(1.05)',\n },\n}));\n\nexport const ChevronLeft = () => (\n <div\n style={{\n width: 0,\n height: 0,\n borderTop: '6px solid transparent',\n borderBottom: '6px solid transparent',\n borderRight: '8px solid #666',\n }}\n />\n);\n\nexport const ChevronRight = () => (\n <div\n style={{\n width: 0,\n height: 0,\n borderTop: '6px solid transparent',\n borderBottom: '6px solid transparent',\n borderLeft: '8px solid #666',\n }}\n />\n);\n\nexport const ZoomControls = styled(Box)({\n position: 'absolute',\n top: '10px',\n right: '10px',\n display: 'flex',\n flexDirection: 'column',\n gap: '5px',\n zIndex: 1000,\n});\n\nexport const ZoomButton = styled(IconButton)({\n backgroundColor: 'rgba(255, 255, 255, 0.9)',\n border: '1px solid #ddd',\n width: '32px',\n height: '32px',\n fontSize: '14px',\n fontWeight: 'bold',\n '&:hover': {\n backgroundColor: 'rgba(255, 255, 255, 1)',\n },\n});\n\nexport const FooterPanel = styled(Box)({\n gridArea: 'footer',\n background: 'rgba(255, 255, 255, 0.95)',\n border: '1px solid #ddd',\n borderRadius: '8px',\n padding: '10px',\n display: 'flex',\n justifyContent: 'space-around',\n alignItems: 'center',\n});\n\nexport const PanelTabs = styled(Tabs)({\n minHeight: '36px',\n '& .MuiTabs-indicator': {\n backgroundColor: '#546e7a',\n },\n '& .MuiTab-root': {\n minHeight: '36px',\n padding: '6px 12px',\n fontSize: '12px',\n fontWeight: '600',\n textTransform: 'none',\n color: '#666',\n '&.Mui-selected': {\n color: '#546e7a',\n },\n },\n});\n\nexport const PanelContent = styled(Box)({\n flex: 1,\n overflow: 'auto',\n padding: '10px',\n});\n\nexport const FixedSVGContainer = styled('div')({\n position: 'relative',\n width: '1300px',\n height: '400px',\n minWidth: '1300px',\n minHeight: '400px',\n maxWidth: '1300px',\n maxHeight: '400px',\n border: 'none',\n backgroundColor: 'transparent',\n overflow: 'visible',\n '& .svg-locked-overlay': {\n position: 'absolute',\n pointerEvents: 'auto',\n zIndex: 10,\n },\n '& svg': {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '1300px',\n height: '280px',\n minWidth: '1300px',\n minHeight: '280px',\n maxWidth: 'none',\n maxHeight: 'none',\n objectFit: 'none',\n transform: 'none',\n border: 'none',\n },\n});\n\nexport const ScrollableSVGWrapper = styled('div')({\n position: 'relative',\n width: '100%',\n height: '100%',\n overflow: 'auto',\n transform: 'rotateX(180deg)',\n padding: '250px',\n paddingTop: '200px',\n boxSizing: 'border-box',\n '& > ': {\n display: 'block',\n transform: 'rotateX(180deg)',\n },\n});\n","import { useEffect, useState } from 'react';\nimport { Box } from '@mui/material';\nimport styled from '@emotion/styled';\nimport type { OverlayTheme, SVGLockedOverlayProps } from './types';\n\nconst baseOverlayStyles = {\n tank: {\n background:\n 'linear-gradient(135deg, rgba(69, 90, 120, 0.95) 0%, rgba(52, 73, 94, 0.95) 100%)',\n border: '1px solid #455a64',\n color: 'white',\n borderRadius: '4px',\n fontSize: '12px',\n fontWeight: '500',\n textAlign: 'center' as const,\n padding: '8px',\n minWidth: '60px',\n boxShadow: '0 1px 4px rgba(69, 90, 120, 0.2)',\n },\n pressure: {\n background:\n 'linear-gradient(135deg, rgba(30, 50, 90, 0.75) 0%, rgba(20, 35, 70, 0.75) 100%)',\n border: '1px solid #1e3a8a',\n color: 'white',\n borderRadius: '4px',\n fontSize: '11px',\n fontWeight: '500',\n textAlign: 'center' as const,\n padding: '6px',\n minWidth: '50px',\n boxShadow: '0 1px 4px rgba(30, 50, 90, 0.15)',\n },\n vessel: {\n background:\n 'linear-gradient(135deg, rgba(84, 110, 122, 0.95) 0%, rgba(69, 90, 100, 0.95) 100%)',\n border: '1px solid #546e7a',\n color: 'white',\n borderRadius: '4px',\n fontSize: '13px',\n fontWeight: '500',\n textAlign: 'center' as const,\n padding: '8px',\n minWidth: '70px',\n boxShadow: '0 1px 4px rgba(84, 110, 122, 0.2)',\n },\n flow: {\n background:\n 'linear-gradient(135deg, rgba(102, 125, 102, 0.95) 0%, rgba(85, 107, 85, 0.95) 100%)',\n border: '1px solid #689f38',\n color: 'white',\n borderRadius: '4px',\n fontSize: '11px',\n fontWeight: '500',\n textAlign: 'center' as const,\n padding: '5px',\n minWidth: '60px',\n boxShadow: '0 1px 4px rgba(102, 125, 102, 0.2)',\n },\n} as const;\n\nexport const overlayStyles: Record<OverlayTheme, typeof baseOverlayStyles[OverlayTheme]> =\n baseOverlayStyles;\n\nexport const SVGLockedOverlay = ({\n svgX,\n svgY,\n children,\n theme,\n style = {},\n className = '',\n onClick,\n containerSelector = '.tff-svg-container',\n}: SVGLockedOverlayProps) => {\n const [svgOffset, setSvgOffset] = useState({ x: 0, y: 0 });\n\n useEffect(() => {\n const updateSvgOffset = () => {\n const containerElement = document.querySelector(containerSelector);\n const svgElement = containerElement?.querySelector('svg');\n\n if (svgElement && containerElement) {\n const svgRect = svgElement.getBoundingClientRect();\n const containerRect = containerElement.getBoundingClientRect();\n\n setSvgOffset({\n x: svgRect.left - containerRect.left,\n y: svgRect.top - containerRect.top,\n });\n }\n };\n\n updateSvgOffset();\n window.addEventListener('resize', updateSvgOffset);\n return () => window.removeEventListener('resize', updateSvgOffset);\n }, [containerSelector]);\n\n const pixelX = svgX + svgOffset.x;\n const pixelY = svgY + svgOffset.y;\n\n const appliedStyle = theme ? { ...overlayStyles[theme], ...style } : style;\n\n return (\n <Box\n className={`svg-locked-overlay ${className}`.trim()}\n onClick={onClick}\n sx={{\n position: 'absolute',\n left: `${pixelX}px`,\n top: `${pixelY}px`,\n cursor: onClick ? 'pointer' : 'default',\n zIndex: 10,\n pointerEvents: 'auto',\n ...appliedStyle,\n }}\n >\n {children}\n </Box>\n );\n};\n\nexport const DashboardCard = styled(Box)<{ svgX: number; svgY: number; cardType?: string }>(\n ({ svgX, svgY, cardType }) => ({\n position: 'absolute',\n left: svgX,\n top: svgY,\n background:\n cardType === 'critical'\n ? 'linear-gradient(135deg, rgba(220, 53, 69, 0.95) 0%, rgba(173, 20, 87, 0.95) 100%)'\n : cardType === 'warning'\n ? 'linear-gradient(135deg, rgba(255, 193, 7, 0.95) 0%, rgba(255, 143, 0, 0.95) 100%)'\n : cardType === 'vessel'\n ? 'linear-gradient(135deg, rgba(46, 204, 113, 0.95) 0%, rgba(39, 174, 96, 0.95) 100%)'\n : cardType === 'process'\n ? 'linear-gradient(135deg, rgba(155, 89, 182, 0.95) 0%, rgba(142, 68, 173, 0.95) 100%)'\n : cardType === 'control'\n ? 'linear-gradient(135deg, rgba(26, 188, 156, 0.95) 0%, rgba(22, 160, 133, 0.95) 100%)'\n : 'linear-gradient(135deg, rgba(52, 152, 219, 0.95) 0%, rgba(41, 128, 185, 0.95) 100%)',\n border: '1px solid rgba(255, 255, 255, 0.2)',\n borderRadius: '12px',\n padding: '12px',\n minWidth: '140px',\n boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',\n backdropFilter: 'blur(10px)',\n color: 'white',\n fontSize: '12px',\n fontWeight: '600',\n textAlign: 'center',\n transform: 'translate(-50%, -50%)',\n transition: 'all 0.3s ease-in-out',\n cursor: 'pointer',\n '&:hover': {\n transform: 'translate(-50%, -50%) scale(1.05)',\n boxShadow: '0 12px 40px rgba(0, 0, 0, 0.4)',\n },\n })\n);\n\nexport const CardHeader = styled('div')<{ color?: string }>(({ color }) => ({\n fontSize: '10px',\n opacity: 0.9,\n marginBottom: '4px',\n textTransform: 'uppercase',\n letterSpacing: '0.5px',\n color: color \|\| 'inherit',\n borderBottom: color ? `1px solid ${color}40` : 'none',\n paddingBottom: color ? '2px' : '0',\n}));\n\nexport const CardValue = styled('div')({\n fontSize: '16px',\n fontWeight: '700',\n marginBottom: '2px',\n});\n\nexport const CardUnit = styled('div')({\n fontSize: '9px',\n opacity: 0.8,\n});\n\n","import type {\n CircularGaugeProps,\n EquipmentIndicatorProps,\n EquipmentIndicatorWithSparklineProps,\n SparklineProps,\n TrendLineProps,\n} from './types';\nimport { SVGLockedOverlay } from './FullscreenWorkspace.overlays';\n\nexport const TrendLine = ({\n values,\n width = 60,\n height = 20,\n color = '#4fc3f7',\n strokeWidth = 1.5,\n backgroundColor = 'rgba(255, 255, 255, 0.1)',\n}: TrendLineProps) => {\n if (!values \|\| values.length < 2) {\n return (\n <div\n style={{\n width,\n height,\n backgroundColor,\n borderRadius: '2px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <span style={{ fontSize: '8px', color: '#ccc' }}>No data</span>\n </div>\n );\n }\n\n const minValue = Math.min(...values);\n const maxValue = Math.max(...values);\n const range = maxValue - minValue;\n\n const normalizedValues =\n range === 0\n ? values.map(() => height / 2)\n : values.map((v) => height - 4 - ((v - minValue) / range) * (height - 8));\n\n const pathData = normalizedValues\n .map((y, i) => {\n const x = 4 + (i / (values.length - 1)) * (width - 8);\n return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;\n })\n .join(' ');\n\n return (\n <div\n style={{\n width,\n height,\n backgroundColor,\n borderRadius: '2px',\n position: 'relative',\n overflow: 'hidden',\n }}\n >\n <svg width={width} height={height} style={{ position: 'absolute', top: 0, left: 0 }}>\n <path\n d={pathData}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <circle\n cx={4 + (width - 8)}\n cy={normalizedValues[normalizedValues.length - 1]}\n r={1.5}\n fill={color}\n />\n </svg>\n </div>\n );\n};\n\nconst hexToRgba = (hex: string, alpha: number) => {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n};\n\nexport const CircularGauge = ({\n value,\n max,\n unit,\n label,\n size = 60,\n color = 'rgba(255, 255, 255, 0.9)',\n}: CircularGaugeProps) => {\n const percentage = Math.min((value / max) * 100, 100);\n const strokeWidth = 4;\n const radius = (size - strokeWidth) / 2;\n const circumference = radius * 2 * Math.PI;\n const strokeDasharray = circumference;\n const strokeDashoffset = circumference - (percentage / 100) * circumference;\n\n const isHex = color.startsWith('#');\n const innerCircleColor = isHex ? hexToRgba(color, 0.8) : color;\n const borderColor = isHex ? hexToRgba(color, 0.9) : color;\n const backgroundColor = isHex ? hexToRgba(color, 0.15) : color;\n const borderStrokeColor = isHex ? hexToRgba(color, 0.4) : color;\n\n return (\n <div\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n }}\n >\n <div\n style={{\n position: 'relative',\n width: size,\n height: size,\n borderRadius: '50%',\n backgroundColor,\n border: `1px solid ${borderStrokeColor}`,\n }}\n >\n <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n <circle\n cx={size / 2}\n cy={size / 2}\n r={radius - strokeWidth - 2}\n fill={innerCircleColor}\n stroke={borderColor}\n strokeWidth={1}\n />\n <circle\n cx={size / 2}\n cy={size / 2}\n r={radius}\n stroke=\"rgba(255, 255, 255, 0.2)\"\n strokeWidth={strokeWidth}\n fill=\"transparent\"\n />\n <circle\n cx={size / 2}\n cy={size / 2}\n r={radius}\n stroke={color}\n strokeWidth={strokeWidth}\n fill=\"transparent\"\n strokeDasharray={strokeDasharray}\n strokeDashoffset={strokeDashoffset}\n strokeLinecap=\"round\"\n style={{ transition: 'stroke-dashoffset 0.5s ease-in-out' }}\n />\n </svg>\n <div\n style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n fontSize: '11px',\n fontWeight: '700',\n color: 'white',\n textAlign: 'center',\n textShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',\n }}\n >\n {value.toFixed(1)}\n <div style={{ fontSize: '8px', opacity: 0.9, color: 'white' }}>{unit}</div>\n </div>\n </div>\n <div\n style={{\n fontSize: '9px',\n marginTop: '4px',\n opacity: 0.9,\n color: 'white',\n }}\n >\n {label}\n </div>\n </div>\n );\n};\n\nexport const Sparkline = ({ data, width, height, color }: SparklineProps) => {\n if (!data \|\| data.length < 2) {\n return null;\n }\n\n const max = Math.max(...data);\n const min = Math.min(...data);\n const range = max - min;\n\n if (range === 0) {\n return null;\n }\n\n const points = data\n .map((value, index) => {\n const x = (index / (data.length - 1)) * (width - 8);\n const y = height - 8 - ((value - min) / range) * (height - 8);\n return `${x + 4},${y + 4}`;\n })\n .join(' ');\n\n return (\n <div\n style={{\n width,\n height,\n backgroundColor: 'rgba(0, 0, 0, 0.7)',\n border: '1px solid rgba(255, 255, 255, 0.3)',\n borderRadius: '4px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',\n }}\n >\n <svg width={width} height={height}>\n <polyline points={points} fill=\"none\" stroke={color} strokeWidth=\"1.5\" opacity=\"0.9\" />\n </svg>\n </div>\n );\n};\n\nexport const EquipmentIndicatorWithSparkline = ({\n svgX,\n svgY,\n color,\n label,\n size = 30,\n sparklineData,\n sparklineOffset = { x: 40, y: 0 },\n}: EquipmentIndicatorWithSparklineProps) => {\n const hasSparkline =\n sparklineData &&\n sparklineData.length > 1 &&\n Math.max(...sparklineData) !== Math.min(...sparklineData);\n\n return (\n <>\n <SVGLockedOverlay svgX={svgX} svgY={svgY} style={{ transform: 'translate(-50%, -50%)' }}>\n <div\n style={{\n width: size,\n height: size,\n borderRadius: '50%',\n backgroundColor: color,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'white',\n fontSize: '7px',\n fontWeight: '700',\n textAlign: 'center',\n boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',\n border: '2px solid rgba(255, 255, 255, 0.3)',\n }}\n >\n {label}\n </div>\n </SVGLockedOverlay>\n\n {hasSparkline && (\n <SVGLockedOverlay svgX={svgX + sparklineOffset.x} svgY={svgY + sparklineOffset.y}>\n <Sparkline data={sparklineData!} width={60} height={20} color={color} />\n </SVGLockedOverlay>\n )}\n </>\n );\n};\n\nexport const EquipmentIndicator = ({\n svgX,\n svgY,\n color,\n label,\n size = 30,\n style,\n className,\n}: EquipmentIndicatorProps) => {\n const overlayStyle =\n style !== undefined\n ? { transform: 'translate(-50%, -50%)', ...style }\n : { transform: 'translate(-50%, -50%)' };\n\n return (\n <SVGLockedOverlay svgX={svgX} svgY={svgY} style={overlayStyle} className={className}>\n <div\n style={{\n width: size,\n height: size,\n borderRadius: '50%',\n backgroundColor: color,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'white',\n fontSize: '7px',\n fontWeight: '700',\n textAlign: 'center',\n boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',\n border: '2px solid rgba(255, 255, 255, 0.3)',\n }}\n >\n {label}\n </div>\n </SVGLockedOverlay>\n );\n};\n","import React, { createContext, useContext, useState, useEffect } from 'react';\r\n\r\ntype Theme = 'modern' \| 'hmi';\r\n\r\ninterface ThemeContextType {\r\n theme: Theme;\r\n toggleTheme: () => void;\r\n setTheme: (theme: Theme) => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType \| undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n const context = useContext(ThemeContext);\r\n if (!context) {\r\n throw new Error('useTheme must be used within a ThemeProvider');\r\n }\r\n return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {\r\n const [theme, setThemeState] = useState<Theme>('modern');\r\n\r\n useEffect(() => {\r\n // Apply theme classes to document body\r\n document.body.className = '';\r\n document.body.classList.add(`theme-${theme}`);\r\n\r\n // Also apply to html element for global styling\r\n document.documentElement.className = '';\r\n document.documentElement.classList.add(`theme-${theme}`);\r\n }, [theme]);\r\n\r\n const toggleTheme = () => {\r\n setTheme(theme === 'modern' ? 'hmi' : 'modern');\r\n };\r\n\r\n const setTheme = (newTheme: Theme) => {\r\n setThemeState(newTheme);\r\n };\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n","import React from 'react';\r\nimport { useTheme } from './ThemeContext';\r\n\r\nexport interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {\r\n /** Size of the toggle /\r\n size?: 'small' \| 'medium' \| 'large';\r\n /* Position of the toggle */\r\n position?: 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'inline';\r\n}\r\n\r\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({\r\n size = 'medium',\r\n position = 'top-right',\r\n className = '',\r\n ...props\r\n}) => {\r\n const { theme, toggleTheme } = useTheme();\r\n\r\n const sizeStyles = {\r\n small: { padding: '0.5rem 1rem', fontSize: '0.75rem' },\r\n medium: { padding: '0.75rem 1.5rem', fontSize: '0.875rem' },\r\n large: { padding: '1rem 2rem', fontSize: '1rem' },\r\n };\r\n\r\n const positionStyles = {\r\n 'top-left': { position: 'fixed' as const, top: '1rem', left: '1rem', zIndex: 1000 },\r\n 'top-right': { position: 'fixed' as const, top: '1rem', right: '1rem', zIndex: 1000 },\r\n 'bottom-left': { position: 'fixed' as const, bottom: '1rem', left: '1rem', zIndex: 1000 },\r\n 'bottom-right': { position: 'fixed' as const, bottom: '1rem', right: '1rem', zIndex: 1000 },\r\n inline: { position: 'relative' as const },\r\n };\r\n\r\n const baseStyle: React.CSSProperties = {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '0.75rem',\r\n cursor: 'pointer',\r\n borderRadius: '0.5rem',\r\n border: '2px solid',\r\n fontFamily:\r\n 'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n fontWeight: 600,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n transition: 'all 0.2s ease',\r\n userSelect: 'none',\r\n ...sizeStyles[size],\r\n ...positionStyles[position],\r\n };\r\n\r\n const modernStyle: React.CSSProperties = {\r\n ...baseStyle,\r\n background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%)',\r\n borderColor: 'rgba(59, 130, 246, 0.4)',\r\n color: '#ffffff',\r\n boxShadow: '0 8px 32px rgba(59, 130, 246, 0.3)',\r\n };\r\n\r\n const hmiStyle: React.CSSProperties = {\r\n ...baseStyle,\r\n backgroundColor: '#666666',\r\n borderColor: '#999999',\r\n color: '#ffffff',\r\n boxShadow: 'none',\r\n };\r\n\r\n const currentStyle = theme === 'modern' ? modernStyle : hmiStyle;\r\n\r\n const toggleStyle: React.CSSProperties = {\r\n position: 'relative',\r\n width: '3rem',\r\n height: '1.5rem',\r\n borderRadius: '0.75rem',\r\n transition: 'all 0.2s ease',\r\n backgroundColor: theme === 'modern' ? '#3b82f6' : '#808080',\r\n border: `2px solid ${theme === 'modern' ? '#2563eb' : '#666666'}`,\r\n };\r\n\r\n const thumbStyle: React.CSSProperties = {\r\n position: 'absolute',\r\n top: '0.125rem',\r\n left: theme === 'modern' ? '0.125rem' : '1.375rem',\r\n width: '1rem',\r\n height: '1rem',\r\n borderRadius: '50%',\r\n backgroundColor: '#ffffff',\r\n transition: 'all 0.2s ease',\r\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',\r\n };\r\n\r\n return (\r\n <div style={currentStyle} onClick={toggleTheme} className={className} {...props}>\r\n <span>{theme === 'modern' ? '🎨 Modern' : '🏭 HMI'}</span>\r\n <div style={toggleStyle}>\r\n <div style={thumbStyle} />\r\n </div>\r\n <span style={{ fontSize: '0.75rem', opacity: 0.8 }}>\r\n {theme === 'modern' ? 'Industrial Design' : 'High Performance'}\r\n </span>\r\n </div>\r\n );\r\n};\r\n"],"mappings":"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","names":["useState","jsx","selectedOption","useState","jsx","jsxs","useState","useCallback","jsx","jsxs","jsx","jsxs","useState","jsx","jsxs","React","jsx","useEffect","useState","Box","styled","jsx","jsx","jsxs","Fragment","jsx","jsxs","React","useState","useEffect","jsx","jsx","jsxs"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@procaaso/alphinity-ui-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "access": "public",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,6 @@
     "@eslint/js": "^9.37.0",
     "@procaaso/pc-piral-instance": "0.8.4",
     "@procaaso/procaaso-views-client": "^1.0.17",
-    "@tailwindcss/postcss": "^4.1.14",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.2",
@@ -61,17 +60,22 @@
     "eslint-plugin-react-refresh": "^0.4.23",
     "globals": "^16.4.0",
     "jsdom": "^27.0.0",
+    "lucide-react": "^0.451.0",
     "piral-cli": "^0.14.29",
     "piral-cli-webpack5": "^0.14.29",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "tailwindcss": "^4.1.14",
+    "recharts": "^2.15.4",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.0",
     "vite": "^5.4.0",
     "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.4"
   }
 }