\n {field.label}\n
\n \n {formatValue(field, valueFormatter)}\n
\n \n );\n}\n\nfunction renderProgress(item, index, context) {\n const { classes, styles, tokens, resolvedAccent } = context;\n const value = getProgressValue(item);\n const color = item.color || resolvedAccent;\n\n return (\n \n
\n );\n}\n\nfunction renderSection(section, index, context) {\n const { classes, styles, tokens } = context;\n const rows = normalizeFieldCollection(section.rows || section.fields || section.metrics) || [];\n\n return (\n \n {item.label}\n {item.displayValue ?? `${Math.round(value)}%`}\n
\n \n \n
\n \n {section.title ?
\n );\n}\n\nexport function WidgetDetailCard({ children, widgetName = 'Widget', value, accentColor, status, config, details, className, style, widgetProps = {} }) {\n const normalized = normalizeDetails(details);\n if (!normalized) return children;\n\n const widgetLabel = toTitleCase(widgetName);\n const label = normalized.label || normalized.title || config?.label || widgetLabel;\n const subtitle = normalized.subtitle || normalized.description || config?.subtitle || config?.deviceName || 'Live telemetry';\n const density = normalized.density || 'compact';\n const layout = normalized.layout || normalized.orientation || 'split';\n const compact = density !== 'comfortable' || layout === 'compact' || layout === 'inline' || layout === 'split';\n const detailCard = isDetailCardLayout(layout, normalized);\n const showVisual = normalized.showVisual ?? true;\n const detailSplit = detailCard && showVisual;\n const dark = normalized.theme === 'dark' || normalized.variant === 'dark' || widgetProps.theme === 'dark' || widgetProps.variant === 'dark';\n const resolvedAccent = normalized.accentColor || accentColor || config?.color || getTelemetryAccentColor({ status, fallback: '#0ea5e9' });\n const tokens = buildTokens({ normalized, resolvedAccent, dark });\n const layoutStyles = getLayoutStyles(layout, compact);\n const styles = normalized.styles || {};\n const classes = normalized.classNames || {};\n const metrics = getDefaultMetrics({ props: { ...widgetProps, value, status, config, quantity: normalized.quantity ?? widgetProps.quantity, speed: normalized.speed ?? widgetProps.speed }, details: normalized, widgetName, value });\n const summaryMetric = normalized.summary || metrics[0];\n const showSummary = normalized.showSummary ?? !detailCard;\n const summaryKey = getComparableValue(summaryMetric);\n const detailMetrics = summaryKey && normalized.dedupeSummaryMetric !== false ? metrics.filter((metric) => getComparableValue(metric) !== summaryKey) : metrics;\n const maxVisibleMetrics = normalized.maxVisibleMetrics ?? (detailCard ? 3 : compact ? 2 : 4);\n const visibleMetrics = showSummary === false ? metrics.slice(0, maxVisibleMetrics) : detailMetrics.slice(0, maxVisibleMetrics);\n const progressItems = Array.isArray(normalized.progress) ? normalized.progress : normalized.progress ? [normalized.progress] : [];\n const progress = normalized.dedupeSummaryProgress === false ? progressItems : progressItems.filter((item) => !isDuplicateSummaryProgress(item, summaryMetric));\n const sections = normalized.showSections || normalized.expanded ? (Array.isArray(normalized.sections) ? normalized.sections : []) : [];\n const lastUpdate = formatLastUpdate(normalized.lastUpdate ?? normalized.lastUpdated ?? widgetProps.lastUpdate ?? widgetProps.lastUpdated ?? config?.lastUpdate ?? config?.lastUpdated);\n const footerText = normalized.footer || '';\n const context = { classes, styles, tokens, resolvedAccent, valueFormatter: normalized.valueFormatter, dark, detailCard, detailSplit };\n\n const visual = (\n {section.title}
: null}\n \n {rows.map((field, fieldIndex) => renderMetric(field, fieldIndex, context))}\n
\n \n {typeof normalized.renderVisual === 'function' ? normalized.renderVisual({ children, widgetProps, details: normalized }) : children}\n
\n \n );\n\n const content = (\n \n
\n );\n\n return (\n \n
\n\n \n\n {visibleMetrics.length ? \n
\n {showSummary === false ? null : (\n \n {normalized.showStatusDot === false ? null : }\n
\n {subtitle ? \n {label}\n
\n{subtitle}
: null}\n {lastUpdate ?Last update: {lastUpdate}
: null}\n\n {normalized.badge || normalized.badges ? (\n
\n )}\n \n {(Array.isArray(normalized.badges) ? normalized.badges : [normalized.badge]).filter(Boolean).map((badge, index) => {\n const nextBadge = typeof badge === 'object' ? badge : { label: badge };\n return {nextBadge.label};\n })}\n
\n ) : null}\n {summaryMetric?.label || 'Value'}
\n \n {formatValue(summaryMetric, normalized.valueFormatter)}\n
\n {visibleMetrics.map((field, index) => renderMetric(field, index, context))}
: null}\n {progress.length ? {progress.slice(0, normalized.maxProgressItems ?? 1).map((item, index) => renderProgress(item, index, context))}
: null}\n {sections.length ? {sections.map((section, index) => renderSection(section, index, context))}
: null}\n {typeof normalized.renderDetails === 'function' ? normalized.renderDetails({ metrics: detailMetrics, allMetrics: metrics, summaryMetric, widgetProps, details: normalized, tokens }) : normalized.children || null}\n {footerText || normalized.actions ? {footerText}{normalized.actions ?
: null}\n {normalized.actions}
: null}\n {visual}\n
\n ) : visual;\n }\n\n return (\n \n {widgetValueLabel || importantMetric.label || 'Value'}\n {formatValue(importantMetric, nextDetails?.valueFormatter)}\n
\n \n
\n \n \n {aqiValue} {config?.unit || 'index'}\n
\n \n \n
\n \n {AQI_TICKS.map((tick) => {\n const left = Math.min(100, (tick / setting.max) * 100);\n return (\n \n \n {tick}\n \n );\n })}\n
\n \r\n // \r\n //
\r\n // \r\n \r\n \r\n \r\n\r\n ) : null;\r\n}\r\nexport default Guage\r\n\r\n\r\n","import React from 'react'\r\nimport './gust.scss'\r\n\r\nfunction Gust({ width = '100%', height = '100%', className, style }) {\r\n return (\r\n \r\n )\r\n}\r\nexport default Gust\r\n\r\n","import React from 'react';\n\nconst HeartMonitorSVG = ({ width = '100%', height = '100%', title = 'Heart monitor', className, style }) => (\n \n);\n\nexport default HeartMonitorSVG;\n","import React from 'react';\n\nconst HospitalBedSVG = ({ width = '100%', height = '100%', title = 'Hospital bed', className, style }) => (\n \n);\n\nexport default HospitalBedSVG;\n","import React from 'react';\n\nconst HospitalBuildingSVG = ({ width = '100%', height = '100%', title = 'Hospital building', className, style }) => (\n \n);\n\nexport default HospitalBuildingSVG;\n","import React from 'react'\r\nimport \"./humidity.scss\"\r\n\r\nfunction Humidity({ width = '100%', height = '100%', className, style }) {\r\n return (\r\n \r\n )\r\n}\r\nexport default Humidity\r\n\r\n","import React from 'react'\r\nimport './illuminance.scss'\r\n\r\nfunction Illuminance({ width = '100%', height = '100%', className, style }) {\r\n return (\r\n\r\n \r\n )\r\n}\r\nexport default Illuminance\r\n\r\n\r\n","import React from 'react'\r\nconst InverterImg = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='14' fill='%23e5e7eb'/%3E%3Crect x='26' y='26' width='108' height='48' rx='8' fill='%23374151'/%3E%3Ccircle cx='48' cy='50' r='8' fill='%2322c55e'/%3E%3Cpath d='M72 42h42v6H72zm0 12h30v6H72z' fill='%23f8fafc'/%3E%3C/svg%3E\";const Inverter = () => {\r\n return (\r\n {state.config.minValue}
\r\n // {state.config.maxValue}
\r\n // {state.config.label} {value.toFixed(2)} {\"unit\" in props.config ? props.config.unit : \" \"}
\r\n // \r\n
\r\n )\r\n}\r\nexport default LinearProgress\r\n\r\n\r\n","import React, { useState } from \"react\";\r\nimport './machineATM.scss'\r\nimport { LatestEventHandler, getLegacyDisplayValue } from '../legacyVisualUtils';function MachineATM({ width = '100%', height = '100%', className, style, ...props } = {}) {\r\n const [liveValue, setLiveValue] = useState(null)\r\n let value = getLegacyDisplayValue({ props, liveValue })\r\n const onChangeHandler = (e) => {\r\n if(props?.config?.deviceId){\r\n const newData = e.target.value\r\n if(newData){\r\n setLiveValue(newData)\r\n }\r\n }else{\r\n setLiveValue(null)\r\n }\r\n }\r\n if (props.value === undefined && props?.config?.value === undefined && props?.config?.defaultValue === undefined && liveValue && props?.config?.param in liveValue) {\r\n if (liveValue[props.config.param] !== null) {\r\n value = liveValue[props.config.param]\r\n } else {\r\n value = 0\r\n }\r\n }\r\n\r\n return (\r\n \r\n )\r\n}\r\nexport default MachineATM\r\n\r\n\r\n\r\n","import React from 'react';\n\nconst MedicalCrossSVG = ({ width = '100%', height = '100%', title = 'Medical cross', className, style }) => (\n \n);\n\nexport default MedicalCrossSVG;\n","import React from 'react';\n\nconst MedicineBottleSVG = ({ width = '100%', height = '100%', title = 'Medicine bottle', className, style }) => (\n \n);\n\nexport default MedicineBottleSVG;\n","import { createDailyLifeDynamicSVG } from '../dailyLifeDynamicFactory';\n\nconst MicrowaveSVG = createDailyLifeDynamicSVG('microwave', 'Microwave');\n\nexport default MicrowaveSVG;\n","import React, { useState } from \"react\";\nimport './motor.scss'\nimport { LatestEventHandler } from '../legacyVisualUtils';import { sentEvent } from '../legacyVisualUtils';\nimport { firstFinite, getTelemetrySvgProps } from '../telemetryProps';\n\nfunction Motor({\n speed,\n rpm,\n value,\n status,\n theme,\n variant,\n showIcon = true,\n accentColor,\n width = '100%',\n height = '100%',\n className,\n style,\n ...props\n} = {}) {\n const [liveValue, setLiveValue] = useState(null)\n let motorValue = firstFinite(speed, rpm, value, props?.config?.value, props?.config?.defaultValue)\n const onChangeHandler = (e) => {\n if (props?.config?.deviceId) {\r\n const newData = e.target.value\r\n if (newData) {\r\n setLiveValue(newData)\r\n }\r\n } else {\r\n setLiveValue(null)\r\n }\r\n }\r\n if (speed === undefined && rpm === undefined && value === undefined && props?.config?.value === undefined && props?.config?.defaultValue === undefined && liveValue && props?.config?.param in liveValue) {\n if (liveValue[props.config.param] !== null) {\n motorValue = liveValue[props.config.param]\n } else {\n motorValue = 0\n }\n }\n const isRunning = status\n ? ['online', 'running', 'active'].includes(String(status).toLowerCase())\n : motorValue > 0\n const telemetrySvgProps = getTelemetrySvgProps({\n className: [className, props?.config?.isControllable ? \"controllable\" : \"\"].filter(Boolean).join(\" \"),\n style,\n theme,\n variant,\n status,\n accentColor,\n fallbackAccentColor: '#6CAADD',\n })\n\n\n return (\n \r\n )\r\n}\r\nexport default Motor\r\n\r\n\r\n\r\n","import { createDailyLifeDynamicSVG } from '../dailyLifeDynamicFactory';\n\nconst OvenHeatSVG = createDailyLifeDynamicSVG('oven', 'Oven heat');\n\nexport default OvenHeatSVG;\n","import React, { useEffect, useRef, useState } from \"react\";\r\nimport './packMachine.scss'\r\nimport { LatestEventHandler } from '../legacyVisualUtils';import { sentEvent } from '../legacyVisualUtils';\r\nconst PackMachine = ({ width = '100%', height = '100%', className, style, ...props } = {}) => {\r\n const [liveValue, setLiveValue] = useState(null)\r\n const rootRef = useRef(null)\r\n const configuredValue = props.value ?? props?.config?.value ?? props?.config?.defaultValue\r\n let sku = Boolean(Number(configuredValue))\r\n let play = Boolean(Number(configuredValue))\r\n // let night = false\r\n\r\n const onChangeHandler = (e) => {\r\n if (props?.config?.deviceId) {\r\n const newData = e.target.value\r\n if (newData) {\r\n setLiveValue(newData)\r\n }\r\n } else {\r\n setLiveValue(null)\r\n }\r\n }\r\n if (props.value === undefined && props?.config?.value === undefined && props?.config?.defaultValue === undefined && liveValue && props?.config?.param in liveValue) {\r\n if (liveValue[props.config.param] !== null) {\r\n sku = true\r\n play = liveValue[props.config.param]\r\n } else {\r\n sku = false\r\n play = false\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n const root = rootRef.current\r\n if (!root) return\r\n\r\n root.querySelectorAll(\".animationVisibility\").forEach(box => {\r\n box.style.visibility = sku ? \"visible\" : \"hidden\"\r\n })\r\n root.querySelectorAll(\".animationState\").forEach(box => {\r\n box.style.animationPlayState = sku && play ? \"running\" : \"paused\"\r\n })\r\n\r\n if (sku && !play) {\r\n root.querySelectorAll(\".boxMovement.animationVisibility,.boxMovement2.animationVisibility,.boxOpen.animationVisibility,.box90.animationVisibility\").forEach(box => {\r\n box.style.visibility = \"hidden\"\r\n })\r\n }\r\n }, [sku, play])\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\n// const mapStateToProps = (state) => ({\r\n// eventReducer: state.eventReducer\r\n// });\r\nexport default PackMachine\r\n\r\n\r\n\r\n","import React from 'react';\nimport { clampValue, getLevelColor } from '../dynamicSvgUtils';\n\nconst ParkingSlotSVG = ({ value = 0, width = '100%', height = '100%', title = 'Parking slot', className, style }) => {\n const level = clampValue(value);\n const occupied = level > 50;\n\n return (\n \n );\n};\n\nexport default ParkingSlotSVG;\n","import { createDailyLifeDynamicSVG } from '../dailyLifeDynamicFactory';\n\nconst PhoneChargingSVG = createDailyLifeDynamicSVG('phone', 'Phone charging');\n\nexport default PhoneChargingSVG;\n","import { createDailyLifeDynamicSVG } from '../dailyLifeDynamicFactory';\n\nconst PlantWateringSVG = createDailyLifeDynamicSVG('plant', 'Plant watering');\n\nexport default PlantWateringSVG;\n","import React from 'react';\nimport { hexToHsl, hslToHex } from '../legacyVisualUtils';\nimport { getTelemetryAccentColor } from '../telemetryProps';\n\nfunction clampStep(value) {\n const step = Number.parseInt(value, 10);\n return Number.isFinite(step) ? ((step % 4) + 4) % 4 : 0;\n}\n\nfunction getThickness(value) {\n const numericValue = Number(value);\n if (!Number.isFinite(numericValue)) return 22;\n return Math.min(42, Math.max(8, numericValue <= 8 ? numericValue * 10 : numericValue));\n}\n\nfunction darkenColor(color) {\n if (!color || !String(color).startsWith('#')) return '#014070';\n const hsl = hexToHsl(color);\n return hsl ? hslToHex(hsl.h, hsl.s, Math.max(18, hsl.l - 18)) : '#014070';\n}\n\nfunction rotatePoint([x, y], step) {\n if (step === 1) return [100 - y, x];\n if (step === 2) return [100 - x, 100 - y];\n if (step === 3) return [y, 100 - x];\n return [x, y];\n}\n\nfunction pointsToPath(points, step) {\n const rotated = points.map((point) => rotatePoint(point, step));\n return `M ${rotated.map(([x, y]) => `${x} ${y}`).join(' L ')}`;\n}\n\nfunction PipeBody({ shape, rotateStep, thickness, color, joinColor, animated }) {\n const center = 50;\n const paths = {\n i: [[center, 0], [center, 100]],\n l: [[center, 0], [center, center], [100, center]],\n t: [[center, 100], [center, center], [0, center], [center, center], [100, center]],\n };\n const path = pointsToPath(paths[shape] || paths.i, rotateStep);\n\n return (\n <>\n \r\n {config.label}\r\n
\r\n {value}%
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n\r\n if (!detailConfig) return visual;\r\n\r\n return (\r\n \r\n
\r\n