51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T8441,"use client"; import { useState, useEffect, useMemo, useRef } from "react"; import { Slider } from "@/components/ha-ui/ui/slider"; import { Button } from "@/components/ui/button"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ha-ui/ui/accordion"; import { RgbColorPicker } from "react-colorful"; import { PowerIcon, SettingsIcon, ThermometerIcon, PaintbrushVerticalIcon, XIcon } from "lucide-react"; import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from "@/components/ha-ui/ui/popover"; import type { EntityId } from "@/types/entity-types"; import { haWebSocket } from "@/lib/haWebsocket"; export type LightVariants = "Default" | "Accordion" | "Popup" | "SeperatePopups"; export interface LightProps { /** * HomeAssistant Entity Name */ entity: EntityId; /** * Shows the RGB Colour Picker, overriding Home Assistant's supportedfeatures */ overrideSupportColorRGB?: boolean; /** * Variant of controls UI */ variant?: LightVariants; } // Common props passed to all variant UIs interface LightVariantProps { state: string; activeMode: string | null; setActiveMode: (mode: string) => void; supportsColor: boolean; supportsColorTemp: boolean; rgbColor: [number, number, number] | null; setRgbColor: (rgb: [number, number, number]) => void; colorTempK: number | null; setColorTempK: (val: number) => void; minTemp: number; maxTemp: number; throttledColorTemp: (val: number) => void; throttledRgb: (rgb: [number, number, number]) => void; overrideSupportColorRGB: boolean; entity: EntityId; } // ---------- Utility Functions ---------- function throttle void>(fn: F, limit: number) { let inThrottle = false; let lastArgs: Parameters | null = null; return (...args: Parameters) => { if (!inThrottle) { fn(...args); inThrottle = true; setTimeout(() => { inThrottle = false; if (lastArgs) { fn(...lastArgs); lastArgs = null; } }, limit); } else { lastArgs = args; } }; } // Approximate conversion Kelvin → RGB // Valid for ~1000K - 40000K function kelvinToRGB(kelvin: number): [number, number, number] { const temperature = kelvin / 100; let red, green, blue; if (temperature <= 66) { red = 255; green = 99.4708025861 * Math.log(temperature) - 161.1195681661; blue = temperature <= 19 ? 0 : 138.5177312231 * Math.log(temperature - 10) - 305.0447927307; } else { red = 329.698727446 * Math.pow(temperature - 60, -0.1332047592); green = 288.1221695283 * Math.pow(temperature - 60, -0.0755148492); blue = 255; } return [ Math.min(255, Math.max(0, Math.round(red))), Math.min(255, Math.max(0, Math.round(green))), Math.min(255, Math.max(0, Math.round(blue))), ]; } // ---------- Variant Components ---------- function DefaultVariant(props: LightVariantProps) { const minRGB = kelvinToRGB(props.minTemp); const maxRGB = kelvinToRGB(props.maxTemp); return (

{props.supportsColorTemp && ( { props.setColorTempK(val[0]); props.throttledColorTemp(val[0]); props.setActiveMode("color_temp"); }} className={props.activeMode !== "color_temp" ? "pointer-events-none opacity-40" : ""} /> )}

{props.overrideSupportColorRGB && !props.rgbColor && (

)} {props.supportsColor && props.rgbColor && (

{ const rgb: [number, number, number] = [c.r, c.g, c.b]; props.setRgbColor(rgb); props.throttledRgb(rgb); props.setActiveMode("rgb"); }} style={{ height: "100%" }} className={props.activeMode !== "rgb" ? "pointer-events-none opacity-40" : ""} />

)}

{props.supportsColor && (props.rgbColor || props.overrideSupportColorRGB) && props.supportsColorTemp && ( )}

); } function HiddenAccordionVariant(props: LightVariantProps) { const minRGB = kelvinToRGB(props.minTemp); const maxRGB = kelvinToRGB(props.maxTemp); return (

{props.supportsColorTemp && ( { props.setColorTempK(val[0]); props.throttledColorTemp(val[0]); props.setActiveMode("color_temp"); // force mode switch UI side }} className={props.activeMode !== "color_temp" ? "pointer-events-none opacity-40" : ""} /> )}

{props.overrideSupportColorRGB && !props.rgbColor && (

)} {props.supportsColor && props.rgbColor && (

{ const rgb: [number, number, number] = [c.r, c.g, c.b]; props.setRgbColor(rgb); props.throttledRgb(rgb); props.setActiveMode("rgb"); // force mode switch UI side }} style={{ height: "100%" }} className={props.activeMode !== "rgb" ? "pointer-events-none opacity-40" : ""} />

)}

{props.supportsColor && (props.rgbColor || props.overrideSupportColorRGB) && props.supportsColorTemp && ( )}

); } function PopupVariant(props: LightVariantProps) { const [open, setOpen] = useState(false); const minRGB = kelvinToRGB(props.minTemp); const maxRGB = kelvinToRGB(props.maxTemp); return (

Light Controls

{props.supportsColorTemp && (

{ props.setColorTempK(val[0]); props.throttledColorTemp(val[0]); props.setActiveMode("color_temp"); }} className={ props.activeMode !== "color_temp" ? "pointer-events-none opacity-40" : "" } />

)}

{props.overrideSupportColorRGB && !props.rgbColor && (

)} {props.supportsColor && props.rgbColor && (

)}

{props.supportsColor && (props.rgbColor || props.overrideSupportColorRGB) && props.supportsColorTemp && ( )}

); } function SeperatePopupVariant(props: LightVariantProps) { const [openColourTemp, setOpenColourTemp] = useState(false); const [openColourRGB, setOpenColourRGB] = useState(false); const minRGB = kelvinToRGB(props.minTemp); const maxRGB = kelvinToRGB(props.maxTemp); return (

{props.supportsColorTemp && ( { setOpenColourTemp(open); props.setActiveMode("color_temp"); }} >

{ props.setColorTempK(val[0]); props.throttledColorTemp(val[0]); }} className={props.activeMode !== "color_temp" ? "pointer-events-none opacity-40" : ""} />

)} {props.supportsColor && (props.rgbColor || props.overrideSupportColorRGB) && ( { setOpenColourRGB(open); props.setActiveMode("rgb"); }} >

{props.overrideSupportColorRGB && !props.rgbColor && (

)} {props.supportsColor && props.rgbColor && (

{ const rgb: [number, number, number] = [c.r, c.g, c.b]; props.setRgbColor(rgb); props.throttledRgb(rgb); }} style={{ height: "100%" }} className={props.activeMode !== "rgb" ? "pointer-events-none opacity-40" : ""} />

)} )}

); } export function Light({ entity, overrideSupportColorRGB = false, variant = "Default" }: LightProps) { const [brightness, setBrightness] = useState(128); const [colorTempK, setColorTempK] = useState(null); const [rgbColor, setRgbColor] = useState<[number, number, number] | null>(null); const [state, setState] = useState("off"); const [activeMode, setActiveMode] = useState(null); const [supportsColor, setSupportsColor] = useState(false); const [supportsColorTemp, setSupportsColorTemp] = useState(false); const [minTemp, setMinTemp] = useState(2000); const [maxTemp, setMaxTemp] = useState(6500); const pendingBrightness = useRef(null); const pendingTemp = useRef(null); const pendingRgb = useRef<[number, number, number] | null>(null); // Throttled API Calls const throttledSetBrightness = useMemo( () => throttle((value: number) => { pendingBrightness.current = value; haWebSocket.callService("light", "turn_on", { entity_id: entity, brightness: value, }); }, 150), // Throttle: 150ms per update [entity], ); const throttledColorTemp = useMemo( () => throttle((kelvin: number) => { pendingTemp.current = kelvin; haWebSocket.callService("light", "turn_on", { entity_id: entity, color_temp_kelvin: kelvin, }); }, 200), [entity], ); const throttledRgb = useMemo( () => throttle((rgb: [number, number, number]) => { pendingRgb.current = rgb; haWebSocket.callService("light", "turn_on", { entity_id: entity, rgb_color: rgb, }); }, 200), [entity], ); useEffect(() => { // Load Initial State haWebSocket.getState(entity).then((data) => { if (data) { const { attributes } = data; setState(data.state); if (attributes?.brightness !== undefined && attributes?.brightness !== null) { setBrightness(attributes.brightness); } if (attributes?.color_temp_kelvin && attributes?.color_temp_kelvin !== null) { setColorTempK(attributes.color_temp_kelvin); } if ( attributes?.rgb_color !== undefined && attributes?.rgb_color !== null && activeMode !== "color_temp" ) { setRgbColor(attributes.rgb_color); } if (attributes?.color_mode) { setActiveMode(attributes.color_mode); } // Detect supported Color Features const modes: string[] = attributes?.supported_color_modes || []; if (modes.includes("color_temp")) { setSupportsColorTemp(true); setMinTemp(attributes.min_color_temp_kelvin || 2000); setMaxTemp(attributes.max_color_temp_kelvin || 6500); } if ( modes.includes("hs") || modes.includes("rgb") || modes.includes("rgbw") || modes.includes("rgbww") || modes.includes("xy") ) { setSupportsColor(true); } } }); // Subscribe to state updates const handler = (newState: any) => { setState(newState.state); const { attributes } = newState; // Brightness confirm with tolerance if (attributes?.brightness !== undefined && attributes?.brightness !== null) { if (pendingBrightness.current !== null) { if (Math.abs(attributes.brightness - pendingBrightness.current) <= 2) { setBrightness(attributes.brightness); pendingBrightness.current = null; } else { return; // rollback -> ignore } } else { setBrightness(attributes.brightness); } } // Color Temp confirm with tolerance if (attributes?.color_temp_kelvin !== undefined && attributes?.color_temp_kelvin !== null) { if (pendingTemp.current !== null) { if (Math.abs(attributes.color_temp_kelvin - pendingTemp.current) <= 50) { setColorTempK(attributes.color_temp_kelvin); pendingTemp.current = null; } else { return; } } else { setColorTempK(attributes.color_temp_kelvin); } } // RGB confirm with tolerance if ( attributes?.rgb_color !== undefined && attributes?.rgb_color !== null && attributes.rgb_color.length === 3 ) { const [r, g, b] = attributes.rgb_color; if (pendingRgb.current !== null) { const [pr, pg, pb] = pendingRgb.current; if (Math.abs(r - pr) <= 2 && Math.abs(g - pg) <= 2 && Math.abs(b - pb) <= 2) { setRgbColor([r, g, b]); pendingRgb.current = null; } else { return; } } else { setRgbColor([r, g, b]); } } }; haWebSocket.addStateListener(entity, handler); return () => haWebSocket.removeStateListener(entity, handler); }, [entity]); const VariantMap: Record> = { Default: DefaultVariant, Accordion: HiddenAccordionVariant, Popup: PopupVariant, SeperatePopups: SeperatePopupVariant, }; const VariantUI = VariantMap[variant]; return (

{ setBrightness(value[0]); // Update UI in real-time throttledSetBrightness(value[0]); // Throttle updates to prevent desync issues }} />

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-colorful",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-colorful","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-colorful"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@ha-components","registryDependencies":["button","@ha-components/accordion","@ha-components/slider","@ha-components/popover","@ha-components/auth"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ha-ui/light.tsx","content":"$53","type":"registry:component","target":"components/ha-ui/light.tsx"}],"className":"h-[70svh] min-h-80"}]]}]