{"id":15365,"date":"2026-10-17T02:18:34","date_gmt":"2026-10-17T02:18:34","guid":{"rendered":"https:\/\/hondellighting.com\/?page_id=15365"},"modified":"2026-10-17T02:52:21","modified_gmt":"2026-10-17T02:52:21","slug":"elementor-15365","status":"publish","type":"page","link":"https:\/\/hondellighting.com\/ar\/elementor-15365.html","title":{"rendered":"Elementor #15365"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"15365\" class=\"elementor elementor-15365\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b4f60b e-con-full e-flex e-con e-parent\" data-id=\"9b4f60b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-677c43c elementor-widget elementor-widget-html\" data-id=\"677c43c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>ARCHILUX PRO | Photoshop-Style Architectural Lighting Studio<\/title>\r\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n  <!-- jsPDF & html2canvas for PDF Report generation -->\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n  <style>\r\n    body { font-family: 'Inter', sans-serif; user-select: none; }\r\n    .font-mono { font-family: 'JetBrains Mono', monospace; }\r\n    ::-webkit-scrollbar { width: 4px; height: 4px; }\r\n    ::-webkit-scrollbar-track { background: #1e2024; }\r\n    ::-webkit-scrollbar-thumb { background: #3c4048; border-radius: 3px; }\r\n    ::-webkit-scrollbar-thumb:hover { background: #555b66; }\r\n\r\n    \/* Photoshop Classic UI Theme Colors *\/\r\n    .ps-bg-dark { background-color: #262626; }\r\n    .ps-bg-canvas { background-color: #1e1e1e; }\r\n    .ps-bg-panel { background-color: #2c2c2c; }\r\n    .ps-bg-input { background-color: #181818; }\r\n    .ps-border { border-color: #3b3b3b; }\r\n\r\n    \/* Ultra-Slim Photoshop Left Tool Button *\/\r\n    .ps-icon-btn {\r\n      width: 32px;\r\n      height: 32px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      border-radius: 4px;\r\n      color: #b3b3b3;\r\n      font-size: 0.85rem;\r\n      transition: all 0.12s ease;\r\n      cursor: pointer;\r\n      position: relative;\r\n    }\r\n    .ps-icon-btn:hover {\r\n      background: #3e3e3e;\r\n      color: #ffffff;\r\n    }\r\n    .ps-icon-btn.active {\r\n      background: #007acc;\r\n      color: #ffffff;\r\n      box-shadow: inset 0 0 2px rgba(255,255,255,0.4);\r\n    }\r\n\r\n    \/* Flyout sub-menu *\/\r\n    .ps-popover {\r\n      display: none;\r\n      position: absolute;\r\n      left: 44px;\r\n      top: 0;\r\n      background: #282828;\r\n      border: 1px solid #444;\r\n      box-shadow: 0 10px 25px rgba(0,0,0,0.65);\r\n      border-radius: 6px;\r\n      padding: 6px;\r\n      z-index: 100;\r\n      width: 210px;\r\n    }\r\n    .ps-popover.show {\r\n      display: block;\r\n    }\r\n\r\n    input[type=range] {\r\n      -webkit-appearance: none;\r\n      background: #181818;\r\n      border-radius: 9999px;\r\n      height: 4px;\r\n    }\r\n    input[type=range]::-webkit-slider-thumb {\r\n      -webkit-appearance: none;\r\n      height: 12px;\r\n      width: 12px;\r\n      border-radius: 50%;\r\n      background: #0098ff;\r\n      cursor: pointer;\r\n      box-shadow: 0 0 4px rgba(0, 152, 255, 0.8);\r\n      border: 1px solid #101010;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body class=\"bg-[#1e1e1e] text-neutral-300 h-screen w-screen flex flex-col overflow-hidden text-xs\">\r\n\r\n  <!-- ================= TOP PHOTOSHOP MENU & OPTIONS BAR ================= -->\r\n  <header class=\"h-10 bg-[#2b2b2b] border-b border-[#3c3c3c] px-3 flex items-center justify-between shrink-0 z-30 select-none shadow\">\r\n    \r\n    <!-- Left: Photoshop Brand & Flat Selector & Bedroom Summary -->\r\n    <div class=\"flex items-center space-x-3\">\r\n      <div class=\"flex items-center gap-2 pr-3 border-r border-[#3e3e3e]\">\r\n        <div class=\"w-6 h-6 rounded bg-[#001e36] border border-[#0098ff] flex items-center justify-center font-bold text-xs text-[#0098ff] shadow-sm\">\r\n          Ps\r\n        <\/div>\r\n        <span class=\"text-xs font-semibold text-neutral-200 tracking-wide\">ARCHILUX <span class=\"text-[#0098ff]\">CC<\/span><\/span>\r\n      <\/div>\r\n\r\n      <!-- Layout Preset -->\r\n      <div class=\"flex items-center bg-[#202020] px-2 py-0.5 rounded border border-[#3e3e3e]\">\r\n        <span class=\"text-[10px] text-neutral-400 font-medium mr-1.5\"><i class=\"fa-solid fa-layer-group text-amber-400\"><\/i> Flat:<\/span>\r\n        <select id=\"templateSelector\" class=\"bg-transparent text-[11px] text-cyan-300 font-semibold outline-none cursor-pointer\">\r\n          <option value=\"threeBedDream\">3-Bed Luxury Villa (9.35m \u00d7 16.25m - Dream House)<\/option>\r\n          <option value=\"twoBedModern\">2-Bed Modern Home (Maramani ID 12209)<\/option>\r\n          <option value=\"oneBedSuite\">1-Bed Urban Flat (Maramani ID 11104)<\/option>\r\n          <option value=\"masterStudio\">Luxury Master Suite (16' \u00d7 15' + Walk-in Wardrobe)<\/option>\r\n          <option value=\"emptyCustom\">Custom Empty Flat (Freeform Drawing)<\/option>\r\n        <\/select>\r\n      <\/div>\r\n\r\n      <!-- Bedroom Details Tag (Top Bar) -->\r\n      <div id=\"roomMetaTags\" class=\"hidden lg:flex items-center space-x-2 text-[10px] font-mono bg-[#202020] px-2 py-0.5 rounded border border-[#383838] text-neutral-300\">\r\n        <span class=\"text-cyan-400 font-semibold\"><i class=\"fa-solid fa-bed mr-1\"><\/i>3 Beds<\/span>\r\n        <span class=\"text-neutral-600\">|<\/span>\r\n        <span class=\"text-amber-400 font-semibold\"><i class=\"fa-solid fa-couch mr-1\"><\/i>1 Living<\/span>\r\n        <span class=\"text-neutral-600\">|<\/span>\r\n        <span class=\"text-indigo-400 font-semibold\"><i class=\"fa-solid fa-utensils mr-1\"><\/i>1 Dining<\/span>\r\n        <span class=\"text-neutral-600\">|<\/span>\r\n        <span class=\"text-emerald-400 font-semibold\"><i class=\"fa-solid fa-bath mr-1\"><\/i>3 Baths<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Center: Render Mode Switcher -->\r\n    <div class=\"flex items-center bg-[#1f1f1f] p-0.5 rounded border border-[#383838]\">\r\n      <button id=\"btnModeRealistic\" class=\"px-2.5 py-1 rounded bg-[#007acc] text-white font-medium flex items-center gap-1 transition text-[11px]\">\r\n        <i class=\"fa-solid fa-eye text-[10px]\"><\/i> <span>Realistic<\/span>\r\n      <\/button>\r\n      <button id=\"btnModeHeatmap\" class=\"px-2.5 py-1 rounded text-neutral-400 hover:text-white font-medium flex items-center gap-1 transition text-[11px]\">\r\n        <i class=\"fa-solid fa-fire text-amber-400 text-[10px]\"><\/i> <span>Lux Heatmap<\/span>\r\n      <\/button>\r\n      <button id=\"btnModeBlueprint\" class=\"px-2.5 py-1 rounded text-neutral-400 hover:text-white font-medium flex items-center gap-1 transition text-[11px]\">\r\n        <i class=\"fa-solid fa-drafting-compass text-sky-400 text-[10px]\"><\/i> <span>CAD Grid<\/span>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <!-- Right: Viewport Controls, Toggle Panels & Export -->\r\n    <div class=\"flex items-center space-x-2\">\r\n      <!-- Zoom Navigation -->\r\n      <div class=\"flex items-center space-x-1 bg-[#202020] p-0.5 rounded border border-[#3a3a3a]\">\r\n        <button id=\"btnZoomIn\" title=\"Zoom In (+)\" class=\"w-6 h-5 text-[10px] text-neutral-300 hover:text-white\"><i class=\"fa-solid fa-magnifying-glass-plus\"><\/i><\/button>\r\n        <button id=\"btnZoomOut\" title=\"Zoom Out (-)\" class=\"w-6 h-5 text-[10px] text-neutral-300 hover:text-white\"><i class=\"fa-solid fa-magnifying-glass-minus\"><\/i><\/button>\r\n        <button id=\"btnZoomFit\" title=\"Fit Screen (Ctrl+0)\" class=\"px-1.5 h-5 text-[10px] text-neutral-300 hover:text-white font-mono\">Fit<\/button>\r\n        <button id=\"btnSnapToggle\" title=\"Toggle Grid Snap\" class=\"px-1.5 h-5 text-[10px] text-cyan-400 bg-[#2b2b2b] rounded font-mono\"><i class=\"fa-solid fa-magnet mr-1\"><\/i>Snap<\/button>\r\n      <\/div>\r\n\r\n      <!-- Right Panel Toggle Button -->\r\n      <button id=\"btnToggleRightPanel\" title=\"Toggle Panels (Tab)\" class=\"px-2 h-6 rounded bg-[#353535] hover:bg-[#404040] text-neutral-300 border border-[#484848] text-[10px] flex items-center gap-1 transition\">\r\n        <i class=\"fa-solid fa-table-columns text-cyan-400\"><\/i>\r\n        <span id=\"lblToggleRight\">Panels<\/span>\r\n      <\/button>\r\n\r\n      <!-- Export PDF Report -->\r\n      <button id=\"btnGeneratePDF\" class=\"px-2.5 py-1 rounded bg-[#0078d4] hover:bg-[#1084d8] text-white text-[11px] font-semibold shadow flex items-center gap-1.5 transition\">\r\n        <i class=\"fa-solid fa-file-pdf\"><\/i> <span>Export PDF<\/span>\r\n      <\/button>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <!-- Photoshop Document Tab Bar -->\r\n  <div class=\"h-6 bg-[#212121] border-b border-[#353535] px-3 flex items-center text-[11px] text-neutral-400 select-none\">\r\n    <div class=\"bg-[#2c2c2c] text-neutral-200 px-3 py-0.5 rounded-t border-t-2 border-t-[#007acc] border-x border-[#383838] flex items-center gap-2\">\r\n      <i class=\"fa-regular fa-image text-[10px] text-cyan-400\"><\/i>\r\n      <span id=\"tabFileName\">DreamHouse_3Bed_Villa.plan @ 100% (RGB\/8)<\/span>\r\n      <span class=\"text-neutral-500 hover:text-neutral-300 cursor-pointer ml-1\">&times;<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ================= WORKSPACE BODY: SLIM LEFT TOOLSTRIP + HUGE CANVAS + COMPACT RIGHT DOCK ================= -->\r\n  <div class=\"flex-1 flex overflow-hidden relative\">\r\n\r\n    <!-- ================= PHOTOSHOP CLASSIC ULTRA-SLIM LEFT TOOLBAR (40px) ================= -->\r\n    <aside class=\"w-11 bg-[#282828] border-r border-[#3a3a3a] flex flex-col items-center py-2 shrink-0 z-20 space-y-1 select-none\">\r\n      \r\n      <!-- Tool 1: Move \/ Select (V) -->\r\n      <div data-tool=\"select\" class=\"ps-icon-btn active\" title=\"Move Tool [V]\">\r\n        <i class=\"fa-solid fa-arrow-pointer\"><\/i>\r\n      <\/div>\r\n\r\n      <!-- Tool 2: Draw Wall (W) -->\r\n      <div data-tool=\"wall\" class=\"ps-icon-btn\" title=\"Pen \/ Partition Wall [W]\">\r\n        <i class=\"fa-solid fa-pen-nib text-amber-400\"><\/i>\r\n      <\/div>\r\n\r\n      <!-- Tool 3: Door Opening (D) -->\r\n      <div data-tool=\"door\" class=\"ps-icon-btn\" title=\"Door Aperture [D]\">\r\n        <i class=\"fa-solid fa-door-open text-sky-400\"><\/i>\r\n      <\/div>\r\n\r\n      <div class=\"w-6 h-px bg-[#3e3e3e] my-1\"><\/div>\r\n\r\n      <!-- Tool 4: Luminaire Library Popover Trigger -->\r\n      <div id=\"btnLightLibraryTrigger\" class=\"ps-icon-btn text-amber-400\" title=\"Add Luminaire (Click to open menu)\">\r\n        <i class=\"fa-solid fa-lightbulb\"><\/i>\r\n        <span class=\"absolute bottom-0.5 right-0.5 w-1 h-1 bg-amber-400 rounded-full\"><\/span>\r\n\r\n        <!-- Floating Quick Luminaire Menu -->\r\n        <div id=\"luminairePopover\" class=\"ps-popover text-left select-none\">\r\n          <div class=\"text-[10px] font-bold text-neutral-400 uppercase tracking-wider mb-1.5 pb-1 border-b border-neutral-700 flex justify-between items-center\">\r\n            <span>Add Luminaire<\/span>\r\n            <span class=\"text-[9px] text-cyan-400\">Click to place<\/span>\r\n          <\/div>\r\n          <div class=\"space-y-1\">\r\n            <button onclick=\"spawnLuminaire('downlight')\" class=\"w-full text-left px-2 py-1 rounded bg-[#333] hover:bg-[#3d3d3d] text-neutral-200 flex items-center justify-between text-[11px] transition\">\r\n              <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-bullseye text-cyan-400\"><\/i> Ceiling Downlight<\/span>\r\n              <span class=\"text-[9px] font-mono text-cyan-300\">14 \u0648\u0627\u0637<\/span>\r\n            <\/button>\r\n            <button onclick=\"spawnLuminaire('pendant')\" class=\"w-full text-left px-2 py-1 rounded bg-[#333] hover:bg-[#3d3d3d] text-neutral-200 flex items-center justify-between text-[11px] transition\">\r\n              <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-ring text-indigo-400\"><\/i> Chandelier Pendant<\/span>\r\n              <span class=\"text-[9px] font-mono text-indigo-300\">22W<\/span>\r\n            <\/button>\r\n            <button onclick=\"spawnLuminaire('tablelamp')\" class=\"w-full text-left px-2 py-1 rounded bg-[#333] hover:bg-[#3d3d3d] text-neutral-200 flex items-center justify-between text-[11px] transition\">\r\n              <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-lamp text-amber-400\"><\/i> Bedside Lamp<\/span>\r\n              <span class=\"text-[9px] font-mono text-amber-300\">6 \u0648\u0627\u0637<\/span>\r\n            <\/button>\r\n            <button onclick=\"spawnLuminaire('floorlamp')\" class=\"w-full text-left px-2 py-1 rounded bg-[#333] hover:bg-[#3d3d3d] text-neutral-200 flex items-center justify-between text-[11px] transition\">\r\n              <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-tower-broadcast text-emerald-400\"><\/i> Floor Lamp<\/span>\r\n              <span class=\"text-[9px] font-mono text-emerald-300\">14 \u0648\u0627\u0637<\/span>\r\n            <\/button>\r\n            <button onclick=\"spawnLuminaire('cove')\" class=\"w-full text-left px-2 py-1 rounded bg-[#333] hover:bg-[#3d3d3d] text-neutral-200 flex items-center justify-between text-[11px] transition\">\r\n              <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-grip-lines text-amber-300\"><\/i> Linear LED Strip<\/span>\r\n              <span class=\"text-[9px] font-mono text-amber-200\">18 \u0648\u0627\u0637<\/span>\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Tool 5: Furniture Flyout Trigger -->\r\n      <div id=\"btnFurniturePopoverTrigger\" class=\"ps-icon-btn text-indigo-400\" title=\"Quick Furniture Catalog\">\r\n        <i class=\"fa-solid fa-couch\"><\/i>\r\n        <span class=\"absolute bottom-0.5 right-0.5 w-1 h-1 bg-indigo-400 rounded-full\"><\/span>\r\n\r\n        <!-- Floating Quick Furniture Menu -->\r\n        <div id=\"furniturePopover\" class=\"ps-popover text-left select-none w-56\">\r\n          <div class=\"text-[10px] font-bold text-neutral-400 uppercase tracking-wider mb-1.5 pb-1 border-b border-neutral-700 flex justify-between items-center\">\r\n            <span>Furniture Catalog<\/span>\r\n            <span class=\"text-[9px] text-indigo-400\">2.5D Models<\/span>\r\n          <\/div>\r\n          <div class=\"grid grid-cols-2 gap-1 text-[10px]\">\r\n            <button onclick=\"spawnFurniture('kingbed')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-bed text-indigo-400\"><\/i> King Suite<\/button>\r\n            <button onclick=\"spawnFurniture('queenbed')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-bed text-neutral-400\"><\/i> Queen Bed<\/button>\r\n            <button onclick=\"spawnFurniture('sofa')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-couch text-sky-400\"><\/i> Sectional<\/button>\r\n            <button onclick=\"spawnFurniture('curtain')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-scroll text-amber-200\"><\/i> Curtains<\/button>\r\n            <button onclick=\"spawnFurniture('plant')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-leaf text-emerald-400\"><\/i> Green Plant<\/button>\r\n            <button onclick=\"spawnFurniture('diningtable')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-utensils text-amber-400\"><\/i> Dining Table<\/button>\r\n            <button onclick=\"spawnFurniture('kitchenisland')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-kitchen-set text-emerald-400\"><\/i> Island Bar<\/button>\r\n            <button onclick=\"spawnFurniture('bathtub')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-bath text-cyan-400\"><\/i> Soak Tub<\/button>\r\n            <button onclick=\"spawnFurniture('coffeetable')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-table text-neutral-400\"><\/i> Marble Table<\/button>\r\n            <button onclick=\"spawnFurniture('wardrobe')\" class=\"p-1.5 rounded bg-[#333] hover:bg-[#3e3e3e] flex items-center gap-1.5 text-neutral-200\"><i class=\"fa-solid fa-door-closed text-neutral-400\"><\/i> Wardrobe<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"w-6 h-px bg-[#3e3e3e] my-1\"><\/div>\r\n\r\n      <!-- Tool 6: Eraser (X) -->\r\n      <div data-tool=\"erase\" class=\"ps-icon-btn hover:text-rose-400\" title=\"Eraser Tool [X]\">\r\n        <i class=\"fa-solid fa-eraser text-rose-400\"><\/i>\r\n      <\/div>\r\n\r\n      <!-- Spacer -->\r\n      <div class=\"flex-1\"><\/div>\r\n\r\n      <!-- Reset \/ Clear All -->\r\n      <div id=\"btnClearAll\" class=\"ps-icon-btn hover:text-rose-400 text-neutral-500\" title=\"Clear Canvas Elements\">\r\n        <i class=\"fa-solid fa-trash-can\"><\/i>\r\n      <\/div>\r\n    <\/aside>\r\n\r\n    <!-- ================= HUGE EXPANSIVE DRAWING CANVAS VIEWPORT ================= -->\r\n    <main class=\"flex-1 h-full relative bg-[#181818] overflow-hidden cursor-crosshair\">\r\n\r\n      <!-- Dynamic In-Canvas Status Tips (Top-Left HUD) -->\r\n      <div class=\"absolute top-2.5 left-2.5 z-10 pointer-events-none flex items-center space-x-2\">\r\n        <div class=\"bg-[#242424]\/90 backdrop-blur-md px-2.5 py-1 rounded border border-[#3c3c3c] shadow-lg flex items-center space-x-2\">\r\n          <span class=\"w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping\"><\/span>\r\n          <span id=\"hudActionTip\" class=\"text-[10px] text-neutral-300 font-medium font-mono uppercase\">MOVE TOOL [V]<\/span>\r\n        <\/div>\r\n        <div class=\"bg-[#242424]\/90 backdrop-blur-md px-2 py-1 rounded border border-[#3c3c3c] text-[10px] font-mono text-cyan-300 font-semibold\">\r\n          <span id=\"hudAreaName\">3,000 SQFT (278 m\u00b2)<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Live Cursor Photometric Telemetry Probe (Top-Right HUD) -->\r\n      <div class=\"absolute top-2.5 right-2.5 z-10 pointer-events-none\">\r\n        <div class=\"bg-[#242424]\/90 backdrop-blur-md px-3 py-1.5 rounded-lg border border-[#3c3c3c] shadow-xl flex items-center gap-2.5\">\r\n          <i class=\"fa-solid fa-crosshairs text-amber-400 text-xs\"><\/i>\r\n          <div class=\"flex flex-col\">\r\n            <div class=\"flex items-baseline space-x-2 font-mono\">\r\n              <span id=\"probeLux\" class=\"text-xs font-bold text-amber-400\">-- lx<\/span>\r\n              <span id=\"probeFc\" class=\"text-[10px] text-neutral-400\">(-- fc)<\/span>\r\n            <\/div>\r\n            <div class=\"text-[9px] font-mono text-neutral-400\">\r\n              Pos: <span id=\"probeCoord\" class=\"text-cyan-400\">X: 0.0m Y: 0.0m<\/span> | <span id=\"probeSurface\">White Tile<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Heatmap Color Gradient Bar -->\r\n      <div id=\"heatmapLegendBar\" class=\"hidden absolute bottom-4 left-4 z-10 bg-[#242424]\/95 backdrop-blur-md border border-[#3c3c3c] rounded-lg p-2.5 shadow-2xl w-56\">\r\n        <div class=\"flex justify-between text-[9px] font-bold uppercase tracking-wider text-neutral-400 mb-1\">\r\n          <span>Photometric Scale<\/span>\r\n          <span class=\"text-cyan-400 font-mono\">IESNA<\/span>\r\n        <\/div>\r\n        <div class=\"h-2 w-full rounded-sm\" style=\"background: linear-gradient(to right, #000033, #0000ff, #00ffff, #00ff00, #ffff00, #ff7700, #ff0000, #ffffff);\"><\/div>\r\n        <div class=\"flex justify-between text-[8px] font-mono text-neutral-300 mt-1\">\r\n          <span>0 lx<\/span>\r\n          <span>150 lx<\/span>\r\n          <span>300 lx<\/span>\r\n          <span>500+ lx<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Fullscreen High-DPI Drawing Canvas -->\r\n      <canvas id=\"cadCanvas\" class=\"w-full h-full block\"><\/canvas>\r\n    <\/main>\r\n\r\n    <!-- ================= PHOTOSHOP SLIM DOCKED STUDIO PANEL (RIGHT) ================= -->\r\n    <aside id=\"rightDockPanel\" class=\"w-60 bg-[#282828] border-l border-[#3a3a3a] flex flex-col shrink-0 z-20 overflow-y-auto select-none transition-all duration-200\">\r\n      \r\n      <!-- Panel Header Tabs -->\r\n      <div class=\"h-8 bg-[#212121] border-b border-[#353535] px-3 flex items-center justify-between text-[11px] text-neutral-300 font-semibold\">\r\n        <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-sliders text-cyan-400 text-xs\"><\/i> Inspector &amp; Properties<\/span>\r\n        <button id=\"btnMinimizeRight\" class=\"text-neutral-500 hover:text-neutral-200 text-xs\" title=\"Hide Panel\"><i class=\"fa-solid fa-chevron-right\"><\/i><\/button>\r\n      <\/div>\r\n\r\n      <!-- Section 1: Live Photometric Audit -->\r\n      <div class=\"p-2.5 border-b border-[#353535]\">\r\n        <div class=\"text-[10px] font-bold uppercase tracking-wider text-neutral-400 mb-2 flex items-center justify-between\">\r\n          <span>Photometric Telemetry<\/span>\r\n          <i class=\"fa-solid fa-chart-line text-emerald-400\"><\/i>\r\n        <\/div>\r\n        <div class=\"grid grid-cols-2 gap-1.5 text-xs font-mono\">\r\n          <div class=\"bg-[#1f1f1f] p-1.5 rounded border border-[#333]\">\r\n            <span class=\"text-[8px] text-neutral-500 uppercase block\">Total Watts<\/span>\r\n            <span id=\"statTotalWatts\" class=\"text-cyan-400 font-bold text-xs\">0 W<\/span>\r\n          <\/div>\r\n          <div class=\"bg-[#1f1f1f] p-1.5 rounded border border-[#333]\">\r\n            <span class=\"text-[8px] text-neutral-500 uppercase block\">Power Density<\/span>\r\n            <span id=\"statLPD\" class=\"text-emerald-400 font-bold text-xs\">0.00 W\/m\u00b2<\/span>\r\n          <\/div>\r\n          <div class=\"bg-[#1f1f1f] p-1.5 rounded border border-[#333]\">\r\n            <span class=\"text-[8px] text-neutral-500 uppercase block\">Avg Lux<\/span>\r\n            <span id=\"statAvgLux\" class=\"text-amber-400 font-bold text-xs\">0 lx<\/span>\r\n          <\/div>\r\n          <div class=\"bg-[#1f1f1f] p-1.5 rounded border border-[#333]\">\r\n            <span class=\"text-[8px] text-neutral-500 uppercase block\">Uniformity U\u2080<\/span>\r\n            <span id=\"statUniformity\" class=\"text-sky-300 font-bold text-xs\">0.00<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Section 2: Active Selected Fixture \/ Furniture Property Controls -->\r\n      <div class=\"p-2.5 border-b border-[#353535] flex-1\">\r\n        <div class=\"text-[10px] font-bold uppercase tracking-wider text-neutral-400 mb-2 flex items-center justify-between\">\r\n          <span id=\"lblActiveSelectionHeader\">Active Selection<\/span>\r\n          <span id=\"lblSelectionTag\" class=\"text-[9px] font-mono text-cyan-400\">None<\/span>\r\n        <\/div>\r\n\r\n        <!-- Empty selection state -->\r\n        <div id=\"inspectorEmptyState\" class=\"text-center py-8 text-[11px] text-neutral-500 italic\">\r\n          Click any light fixture or furniture item to modify wattage, beam, Kelvin, or rotation\r\n        <\/div>\r\n\r\n        <!-- Fixture Controls (Visible when fixture selected) -->\r\n        <div id=\"fixtureControlsGroup\" class=\"hidden space-y-2.5\">\r\n          <!-- Wattage -->\r\n          <div>\r\n            <div class=\"flex justify-between text-[11px] mb-0.5\">\r\n              <span class=\"text-neutral-400\">Power Rating:<\/span>\r\n              <span id=\"lblWattage\" class=\"text-cyan-400 font-mono font-bold\">14 \u0648\u0627\u0637<\/span>\r\n            <\/div>\r\n            <input type=\"range\" id=\"sliderWattage\" min=\"3\" max=\"65\" step=\"1\" value=\"14\" class=\"w-full\">\r\n          <\/div>\r\n\r\n          <!-- Beam Angle -->\r\n          <div>\r\n            <div class=\"flex justify-between text-[11px] mb-0.5\">\r\n              <span class=\"text-neutral-400\">\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0634\u0639\u0627\u0639:<\/span>\r\n              <span id=\"lblBeam\" class=\"text-amber-400 font-mono font-bold\">36\u00b0<\/span>\r\n            <\/div>\r\n            <input type=\"range\" id=\"sliderBeam\" min=\"15\" max=\"110\" step=\"1\" value=\"36\" class=\"w-full\">\r\n          <\/div>\r\n\r\n          <!-- CCT -->\r\n          <div>\r\n            <div class=\"flex justify-between text-[11px] mb-0.5\">\r\n              <span class=\"text-neutral-400\">Color Temp:<\/span>\r\n              <span id=\"lblCCT\" class=\"text-amber-300 font-mono font-bold\">2700 \u0623\u0644\u0641<\/span>\r\n            <\/div>\r\n            <input type=\"range\" id=\"sliderCCT\" min=\"2000\" max=\"6500\" step=\"50\" value=\"2700\" class=\"w-full\">\r\n          <\/div>\r\n\r\n          <!-- Dimmer -->\r\n          <div>\r\n            <div class=\"flex justify-between text-[11px] mb-0.5\">\r\n              <span class=\"text-neutral-400\">Dimmer Level:<\/span>\r\n              <span id=\"lblDimmer\" class=\"text-sky-300 font-mono font-bold\">100%<\/span>\r\n            <\/div>\r\n            <input type=\"range\" id=\"sliderDimmer\" min=\"5\" max=\"100\" step=\"1\" value=\"100\" class=\"w-full\">\r\n          <\/div>\r\n\r\n          <!-- Height Z -->\r\n          <div>\r\n            <div class=\"flex justify-between text-[11px] mb-0.5\">\r\n              <span class=\"text-neutral-400\">Mount Height (Z):<\/span>\r\n              <span id=\"lblHeightZ\" class=\"text-emerald-400 font-mono font-bold\">2.80m<\/span>\r\n            <\/div>\r\n            <input type=\"range\" id=\"sliderHeightZ\" min=\"0.5\" max=\"3.5\" step=\"0.05\" value=\"2.8\" class=\"w-full\">\r\n          <\/div>\r\n\r\n          <button id=\"btnDeleteActiveFixture\" class=\"w-full mt-2 py-1 rounded bg-[#3b181e] hover:bg-[#4d1f27] text-rose-300 border border-rose-900\/60 text-[10px] font-semibold flex items-center justify-center gap-1 transition\">\r\n            <i class=\"fa-regular fa-trash-can\"><\/i> Delete Luminaire\r\n          <\/button>\r\n        <\/div>\r\n\r\n        <!-- Furniture Controls (Visible when furniture selected) -->\r\n        <div id=\"furnitureControlsGroup\" class=\"hidden space-y-2\">\r\n          <div class=\"flex items-center justify-between text-[11px]\">\r\n            <span class=\"text-neutral-400\">Rotation:<\/span>\r\n            <span id=\"lblFurnRotation\" class=\"text-cyan-400 font-mono font-bold\">0\u00b0<\/span>\r\n          <\/div>\r\n          <div class=\"grid grid-cols-3 gap-1\">\r\n            <button onclick=\"rotateActiveFurn(-45)\" class=\"py-1 bg-[#1f1f1f] hover:bg-[#333] rounded text-[10px] text-neutral-300 border border-[#3e3e3e]\">-45\u00b0<\/button>\r\n            <button onclick=\"rotateActiveFurn(45)\" class=\"py-1 bg-[#1f1f1f] hover:bg-[#333] rounded text-[10px] text-neutral-300 border border-[#3e3e3e]\">+45\u00b0<\/button>\r\n            <button onclick=\"rotateActiveFurn(90)\" class=\"py-1 bg-[#1f1f1f] hover:bg-[#333] rounded text-[10px] text-neutral-300 border border-[#3e3e3e]\">+90\u00b0<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"flex items-center justify-between text-[11px] pt-1\">\r\n            <span class=\"text-neutral-400\">Object Height (Z):<\/span>\r\n            <span id=\"lblFurnHeight\" class=\"text-amber-400 font-mono font-bold\">0.65m<\/span>\r\n          <\/div>\r\n          <input type=\"range\" id=\"sliderFurnHeight\" min=\"0.02\" max=\"2.6\" step=\"0.05\" value=\"0.65\" class=\"w-full\">\r\n\r\n          <button id=\"btnDeleteActiveFurniture\" class=\"w-full mt-2 py-1 rounded bg-[#3b181e] hover:bg-[#4d1f27] text-rose-300 border border-rose-900\/60 text-[10px] font-medium flex items-center justify-center gap-1\">\r\n            <i class=\"fa-regular fa-trash-can\"><\/i> Delete Object\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Section 3: Compact Quick Insert Grid -->\r\n      <div class=\"p-2.5 bg-[#242424] border-t border-[#353535]\">\r\n        <div class=\"text-[9px] font-bold uppercase tracking-wider text-neutral-400 mb-1.5 flex justify-between\">\r\n          <span>Quick Insert<\/span>\r\n          <span class=\"text-neutral-500\">Click to add<\/span>\r\n        <\/div>\r\n        <div class=\"grid grid-cols-4 gap-1 text-center\">\r\n          <button onclick=\"spawnLuminaire('downlight')\" title=\"Ceiling Downlight\" class=\"p-1.5 rounded bg-[#1f1f1f] hover:bg-[#333] border border-[#3a3a3a] text-cyan-400\"><i class=\"fa-solid fa-bullseye text-xs\"><\/i><span class=\"text-[8px] block text-neutral-400\">Spot<\/span><\/button>\r\n          <button onclick=\"spawnLuminaire('pendant')\" title=\"Chandelier\" class=\"p-1.5 rounded bg-[#1f1f1f] hover:bg-[#333] border border-[#3a3a3a] text-indigo-400\"><i class=\"fa-solid fa-ring text-xs\"><\/i><span class=\"text-[8px] block text-neutral-400\">Pend<\/span><\/button>\r\n          <button onclick=\"spawnLuminaire('tablelamp')\" title=\"Bed Lamp\" class=\"p-1.5 rounded bg-[#1f1f1f] hover:bg-[#333] border border-[#3a3a3a] text-amber-400\"><i class=\"fa-solid fa-lamp text-xs\"><\/i><span class=\"text-[8px] block text-neutral-400\">Lamp<\/span><\/button>\r\n          <button onclick=\"spawnFurniture('plant')\" title=\"Green Plant\" class=\"p-1.5 rounded bg-[#1f1f1f] hover:bg-[#333] border border-[#3a3a3a] text-emerald-400\"><i class=\"fa-solid fa-leaf text-xs\"><\/i><span class=\"text-[8px] block text-neutral-400\">Plant<\/span><\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/aside>\r\n\r\n  <\/div>\r\n\r\n  <!-- Offscreen buffer for clean export -->\r\n  <div id=\"pdfExportContainer\" class=\"fixed -left-[9999px] top-0 bg-[#0d1117] text-slate-100 p-8 w-[1000px] font-sans\"><\/div>\r\n\r\n  <!-- ================= APPLICATION LOGIC & PHYSICAL ENGINE ================= -->\r\n  <script>\r\n    \/**\r\n     * ARCHILUX PRO STUDIO - PHOTOSHOP EXPANSIVE WORKSPACE EDITION\r\n     * Ultra-slim Left Toolstrip (40px) & Collapsible Right Inspector Dock\r\n     * Maximizes Canvas Viewport for 3,000 SQFT Luxury Penthouse\r\n     *\/\r\n\r\n    const state = {\r\n      \/\/ Dimensions\r\n      widthM: 20.0,\r\n      heightM: 14.0,\r\n      ceilingZ: 2.9,\r\n\r\n      \/\/ CAD Topology\r\n      walls: [], \r\n      doors: [], \r\n      furniture: [], \r\n      fixtures: [], \r\n\r\n      \/\/ Selection & Active Tools\r\n      activeTool: 'select', \r\n      selectedEntity: null, \r\n      isDraggingEntity: false,\r\n      dragOffset: { x: 0, y: 0 },\r\n\r\n      \/\/ Wall Drafting Buffer\r\n      wallStart: null,\r\n      tempWallEnd: null,\r\n\r\n      \/\/ Visualization State\r\n      viewMode: 'realistic', \r\n      showShadows: true,\r\n      showCones: true,\r\n      snapToGrid: true,\r\n      gridStepM: 0.25,\r\n\r\n      \/\/ Navigation Transform\r\n      zoom: 1.0,\r\n      pan: { x: 0, y: 0 },\r\n      isPanning: false,\r\n      lastMouse: { x: 0, y: 0 },\r\n      hoverM: { x: 0, y: 0 },\r\n\r\n      nextId: 1\r\n    };\r\n\r\n    const canvas = document.getElementById('cadCanvas');\r\n    const ctx = canvas.getContext('2d');\r\n    const mainEl = document.querySelector('main');\r\n\r\n    \/\/ Heatmap low-res computation canvas\r\n    const calcCanvas = document.createElement('canvas');\r\n    const calcCtx = calcCanvas.getContext('2d');\r\n\r\n    let baseScale = 1;\r\n    let baseOffsetX = 0;\r\n    let baseOffsetY = 0;\r\n\r\n    \/\/ Coordinate Math\r\n    function updateBaseTransform() {\r\n      const pad = 24; \/\/ Compact padding for expansive view\r\n      const availW = canvas.width - pad * 2;\r\n      const availH = canvas.height - pad * 2;\r\n      const scaleX = availW \/ state.widthM;\r\n      const scaleY = availH \/ state.heightM;\r\n      baseScale = Math.min(scaleX, scaleY);\r\n      baseOffsetX = (canvas.width - state.widthM * baseScale) \/ 2;\r\n      baseOffsetY = (canvas.height - state.heightM * baseScale) \/ 2;\r\n    }\r\n\r\n    function roomToScreen(xM, yM) {\r\n      const screenX = baseOffsetX + (xM * baseScale);\r\n      const screenY = baseOffsetY + (yM * baseScale);\r\n      const centerX = canvas.width \/ 2;\r\n      const centerY = canvas.height \/ 2;\r\n      return {\r\n        x: centerX + (screenX - centerX) * state.zoom + state.pan.x,\r\n        y: centerY + (screenY - centerY) * state.zoom + state.pan.y\r\n      };\r\n    }\r\n\r\n    function screenToRoom(screenX, screenY) {\r\n      const centerX = canvas.width \/ 2;\r\n      const centerY = canvas.height \/ 2;\r\n      const unzoomedX = (screenX - centerX - state.pan.x) \/ state.zoom + centerX;\r\n      const unzoomedY = (screenY - centerY - state.pan.y) \/ state.zoom + centerY;\r\n      return {\r\n        x: (unzoomedX - baseOffsetX) \/ baseScale,\r\n        y: (unzoomedY - baseOffsetY) \/ baseScale\r\n      };\r\n    }\r\n\r\n    function snap(val, step = state.gridStepM) {\r\n      if (!state.snapToGrid) return val;\r\n      return Math.round(val \/ step) * step;\r\n    }\r\n\r\n    function snapPoint(xM, yM) {\r\n      return { x: snap(xM), y: snap(yM) };\r\n    }\r\n\r\n    \/\/ Kelvin to RGB conversion\r\n    function kelvinToRGB(kelvin) {\r\n      let temp = kelvin \/ 100;\r\n      let red, green, blue;\r\n      if (temp <= 66) {\r\n        red = 255;\r\n        green = 99.4708025861 * Math.log(temp) - 161.1195681661;\r\n        blue = temp <= 19 ? 0 : 138.5177312231 * Math.log(temp - 10) - 305.0447927307;\r\n      } else {\r\n        red = 329.698727446 * Math.pow(temp - 60, -0.1332047592);\r\n        green = 288.1221695283 * Math.pow(temp - 60, -0.0755148492);\r\n        blue = 255;\r\n      }\r\n      return {\r\n        r: Math.max(0, Math.min(255, Math.round(red))),\r\n        g: Math.max(0, Math.min(255, Math.round(green))),\r\n        b: Math.max(0, Math.min(255, Math.round(blue)))\r\n      };\r\n    }\r\n\r\n    function luxToHeatmapColor(lux) {\r\n      const t = Math.max(0, Math.min(1, lux \/ 500));\r\n      let r = 0, g = 0, b = 0;\r\n      if (t < 0.2) {\r\n        const f = t \/ 0.2;\r\n        r = 0; g = Math.round(f * 200); b = Math.round(140 + f * 115);\r\n      } else if (t < 0.4) {\r\n        const f = (t - 0.2) \/ 0.2;\r\n        r = 0; g = 200 + Math.round(f * 55); b = Math.round((1 - f) * 255);\r\n      } else if (t < 0.65) {\r\n        const f = (t - 0.4) \/ 0.25;\r\n        r = Math.round(f * 255); g = 255; b = 0;\r\n      } else if (t < 0.85) {\r\n        const f = (t - 0.65) \/ 0.2;\r\n        r = 255; g = Math.round((1 - f) * 200); b = 0;\r\n      } else {\r\n        const f = (t - 0.85) \/ 0.15;\r\n        r = 255; g = Math.round(f * 255); b = Math.round(f * 255);\r\n      }\r\n      return { r, g, b };\r\n    }\r\n\r\n    \/\/ =========================================================================\r\n    \/\/ PHYSICAL RAYCAST VISIBILITY POLYGON & WALL OCCLUSION\r\n    \/\/ =========================================================================\r\n\r\n    function getOccludingSegments() {\r\n      const segments = [];\r\n\r\n      for (const w of state.walls) {\r\n        const wallDoors = state.doors.filter(d => d.wallId === w.id);\r\n        if (wallDoors.length === 0) {\r\n          segments.push({ x1: w.x1, y1: w.y1, x2: w.x2, y2: w.y2 });\r\n          continue;\r\n        }\r\n\r\n        const dx = w.x2 - w.x1;\r\n        const dy = w.y2 - w.y1;\r\n        const wallLen = Math.hypot(dx, dy);\r\n        if (wallLen < 0.05) continue;\r\n\r\n        const doorPositions = wallDoors.map(d => {\r\n          const t = ((d.x - w.x1) * dx + (d.y - w.y1) * dy) \/ (wallLen * wallLen);\r\n          return { t: Math.max(0, Math.min(1, t)), widthRatio: (d.width || 0.9) \/ wallLen };\r\n        }).sort((a, b) => a.t - b.t);\r\n\r\n        let currentT = 0;\r\n        for (const dp of doorPositions) {\r\n          const startT = Math.max(0, dp.t - dp.widthRatio \/ 2);\r\n          const endT = Math.min(1, dp.t + dp.widthRatio \/ 2);\r\n\r\n          if (startT > currentT + 0.02) {\r\n            segments.push({\r\n              x1: w.x1 + dx * currentT,\r\n              y1: w.y1 + dy * currentT,\r\n              x2: w.x1 + dx * startT,\r\n              y2: w.y1 + dy * startT\r\n            });\r\n          }\r\n          currentT = Math.max(currentT, endT);\r\n        }\r\n\r\n        if (currentT < 0.98) {\r\n          segments.push({\r\n            x1: w.x1 + dx * currentT,\r\n            y1: w.y1 + dy * currentT,\r\n            x2: w.x2,\r\n            y2: w.y2\r\n          });\r\n        }\r\n      }\r\n\r\n      \/\/ Outer room boundaries\r\n      segments.push({ x1: 0, y1: 0, x2: state.widthM, y2: 0 });\r\n      segments.push({ x1: state.widthM, y1: 0, x2: state.widthM, y2: state.heightM });\r\n      segments.push({ x1: state.widthM, y1: state.heightM, x2: 0, y2: state.heightM });\r\n      segments.push({ x1: 0, y1: state.heightM, x2: 0, y2: 0 });\r\n\r\n      return segments;\r\n    }\r\n\r\n    function getRayIntersection(rayOrigin, rayDir, seg) {\r\n      const r_px = rayOrigin.x;\r\n      const r_py = rayOrigin.y;\r\n      const r_dx = rayDir.x;\r\n      const r_dy = rayDir.y;\r\n\r\n      const s_px = seg.x1;\r\n      const s_py = seg.y1;\r\n      const s_dx = seg.x2 - seg.x1;\r\n      const s_dy = seg.y2 - seg.y1;\r\n\r\n      const r_mag = Math.hypot(r_dx, r_dy);\r\n      const s_mag = Math.hypot(s_dx, s_dy);\r\n\r\n      if (r_mag === 0 || s_mag === 0) return null;\r\n      if (r_dx \/ r_mag === s_dx \/ s_mag && r_dy \/ r_mag === s_dy \/ s_mag) return null;\r\n\r\n      const denom = s_dx * r_dy - s_dy * r_dx;\r\n      if (denom === 0) return null;\r\n\r\n      const T2 = (r_dx * (s_py - r_py) + r_dy * (r_px - s_px)) \/ denom;\r\n      const T1 = (s_px + s_dx * T2 - r_px) \/ r_dx;\r\n\r\n      if (T1 > 0.001 && T2 >= 0 && T2 <= 1) {\r\n        return {\r\n          x: r_px + r_dx * T1,\r\n          y: r_py + r_dy * T1,\r\n          param: T1\r\n        };\r\n      }\r\n      return null;\r\n    }\r\n\r\n    function computeVisibilityPolygon(lightX, lightY, maxRadius = 18.0) {\r\n      const segments = getOccludingSegments();\r\n      const points = [];\r\n\r\n      for (const seg of segments) {\r\n        points.push({ x: seg.x1, y: seg.y1 });\r\n        points.push({ x: seg.x2, y: seg.y2 });\r\n      }\r\n\r\n      const angles = [];\r\n      for (const pt of points) {\r\n        const angle = Math.atan2(pt.y - lightY, pt.x - lightX);\r\n        angles.push(angle - 0.00001);\r\n        angles.push(angle);\r\n        angles.push(angle + 0.00001);\r\n      }\r\n\r\n      for (let a = 0; a < 36; a++) {\r\n        angles.push((a \/ 36) * Math.PI * 2 - Math.PI);\r\n      }\r\n\r\n      const intersects = [];\r\n\r\n      for (const angle of angles) {\r\n        const dx = Math.cos(angle);\r\n        const dy = Math.sin(angle);\r\n        const rayDir = { x: dx, y: dy };\r\n\r\n        let closest = null;\r\n        let minT = maxRadius;\r\n\r\n        for (const seg of segments) {\r\n          const hit = getRayIntersection({ x: lightX, y: lightY }, rayDir, seg);\r\n          if (hit && hit.param < minT) {\r\n            minT = hit.param;\r\n            closest = hit;\r\n          }\r\n        }\r\n\r\n        if (closest) {\r\n          intersects.push({ x: closest.x, y: closest.y, angle });\r\n        } else {\r\n          intersects.push({ x: lightX + dx * maxRadius, y: lightY + dy * maxRadius, angle });\r\n        }\r\n      }\r\n\r\n      intersects.sort((a, b) => a.angle - b.angle);\r\n      return intersects;\r\n    }\r\n\r\n    function isLineBlockedByWall(x1, y1, x2, y2) {\r\n      const dx = x2 - x1;\r\n      const dy = y2 - y1;\r\n      const dist = Math.hypot(dx, dy);\r\n      if (dist < 0.01) return false;\r\n\r\n      const rayDir = { x: dx \/ dist, y: dy \/ dist };\r\n      const segments = getOccludingSegments();\r\n\r\n      for (const seg of segments) {\r\n        const hit = getRayIntersection({ x: x1, y: y1 }, rayDir, seg);\r\n        if (hit && hit.param > 0.03 && hit.param < dist - 0.03) {\r\n          return true; \/\/ Ray blocked by wall\r\n        }\r\n      }\r\n      return false;\r\n    }\r\n\r\n    function getWorkplaneHeightAt(xM, yM) {\r\n      for (let i = state.furniture.length - 1; i >= 0; i--) {\r\n        const f = state.furniture[i];\r\n        if (xM >= f.x && xM <= f.x + f.w && yM >= f.y && yM <= f.y + f.h) {\r\n          return f.zHeight || 0.76;\r\n        }\r\n      }\r\n      return 0.0;\r\n    }\r\n\r\n    function calculateFixtureLuxAt(fixture, xM, yM, targetZ) {\r\n      if (isLineBlockedByWall(fixture.x, fixture.y, xM, yM)) {\r\n        return 0; \/\/ Solid wall blocks photons completely!\r\n      }\r\n\r\n      const dz = fixture.mountZ - targetZ;\r\n      if (dz <= 0) return 0;\r\n\r\n      const dx = xM - fixture.x;\r\n      const dy = yM - fixture.y;\r\n      const distSq = dx * dx + dy * dy + dz * dz;\r\n      const dist = Math.sqrt(distSq);\r\n\r\n      const cosTheta = Math.max(0, dz \/ dist);\r\n\r\n      \/\/ Beam angle cosine power falloff\r\n      const halfBeamRad = (fixture.beamAngle * Math.PI) \/ 360;\r\n      const cosHalf = Math.cos(halfBeamRad);\r\n      let n = 1;\r\n      if (cosHalf > 0.001 && cosHalf < 0.9999) {\r\n        n = Math.log(0.5) \/ Math.log(cosHalf);\r\n      }\r\n\r\n      const totalLumens = fixture.wattage * fixture.efficacy * (fixture.dimmer \/ 100);\r\n      const I_0 = (totalLumens * (n + 1)) \/ (2 * Math.PI);\r\n      const intensity = I_0 * Math.pow(cosTheta, n);\r\n\r\n      let lux = (intensity * cosTheta) \/ distSq;\r\n\r\n      \/\/ 2.5D Drop Shadows\r\n      if (state.showShadows && isPointInFurnitureShadow(fixture, xM, yM, targetZ)) {\r\n        lux *= 0.12;\r\n      }\r\n\r\n      return isNaN(lux) ? 0 : lux;\r\n    }\r\n\r\n    function isPointInFurnitureShadow(fixture, targetX, targetY, targetZ) {\r\n      const vx = targetX - fixture.x;\r\n      const vy = targetY - fixture.y;\r\n      const totalDist = Math.hypot(vx, vy);\r\n      if (totalDist < 0.05) return false;\r\n\r\n      const normX = vx \/ totalDist;\r\n      const normY = vy \/ totalDist;\r\n\r\n      for (const f of state.furniture) {\r\n        if (f.type === 'rug' || f.type === 'curtain') continue;\r\n        if ((f.zHeight || 0) <= targetZ + 0.05) continue;\r\n\r\n        const minX = f.x;\r\n        const maxX = f.x + f.w;\r\n        const minY = f.y;\r\n        const maxY = f.y + f.h;\r\n\r\n        if (targetX >= minX && targetX <= maxX && targetY >= minY && targetY <= maxY) {\r\n          continue;\r\n        }\r\n\r\n        const enterT = Math.max((minX - fixture.x) \/ normX, (minY - fixture.y) \/ normY);\r\n        const exitT = Math.min((maxX - fixture.x) \/ normX, (maxY - fixture.y) \/ normY);\r\n\r\n        if (exitT > 0 && enterT < totalDist) {\r\n          const lightH = fixture.mountZ;\r\n          const rayHAtCaster = lightH - (lightH - targetZ) * (enterT \/ totalDist);\r\n          if (f.zHeight >= rayHAtCaster) {\r\n            return true;\r\n          }\r\n        }\r\n      }\r\n      return false;\r\n    }\r\n\r\n    function getTotalLuxAt(xM, yM, explicitZ = null) {\r\n      const z = explicitZ !== null ? explicitZ : getWorkplaneHeightAt(xM, yM);\r\n      let total = 0;\r\n      for (const f of state.fixtures) {\r\n        total += calculateFixtureLuxAt(f, xM, yM, z);\r\n      }\r\n      return total;\r\n    }\r\n\r\n    \/\/ =========================================================================\r\n    \/\/ TEMPLATE GENERATOR: MATCHING EXACT REFERENCE IMAGES (1, 2, 3, 4)\r\n    \/\/ =========================================================================\r\n\r\n    function loadTemplate(name) {\r\n      state.walls = [];\r\n      state.doors = [];\r\n      state.furniture = [];\r\n      state.fixtures = [];\r\n      state.selectedEntity = null;\r\n      state.nextId = 1;\r\n\r\n      const metaTags = document.getElementById('roomMetaTags');\r\n      const tabTitle = document.getElementById('tabFileName');\r\n\r\n      if (name === 'threeBedDream') {\r\n        \/\/ IMAGE 3: 3-Bed Luxury Villa (9.35m \u00d7 16.25m)\r\n        state.widthM = 9.35;\r\n        state.heightM = 16.25;\r\n        document.getElementById('hudAreaName').textContent = '9.35m \u00d7 16.25m (152 m\u00b2 \/ 1,635 SQFT)';\r\n        tabTitle.textContent = 'DreamHouse_3Bed_Villa.plan @ 100% (RGB\/8)';\r\n        metaTags.innerHTML = `\r\n          <span class=\"text-cyan-400 font-semibold\"><i class=\"fa-solid fa-bed mr-1\"><\/i>3 Beds<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-amber-400 font-semibold\"><i class=\"fa-solid fa-couch mr-1\"><\/i>1 Living<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-indigo-400 font-semibold\"><i class=\"fa-solid fa-utensils mr-1\"><\/i>1 Dining<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-emerald-400 font-semibold\"><i class=\"fa-solid fa-bath mr-1\"><\/i>2 Baths<\/span>\r\n        `;\r\n\r\n        \/\/ Central vertical division (Left bed wing vs Right living\/kitchen wing)\r\n        addWall(4.2, 0, 4.2, 8.8);\r\n        addWall(4.2, 10.4, 4.2, 14.5);\r\n        addDoor(4.2, 9.6, 0.9); \/\/ Corridor lobby passage\r\n\r\n        \/\/ Master Bedroom 02 (Top Left)\r\n        addWall(0, 4.5, 4.2, 4.5);\r\n        addDoor(3.2, 4.5, 0.9);\r\n\r\n        \/\/ Bedroom 03 (Middle Left)\r\n        addWall(0, 7.8, 4.2, 7.8);\r\n        addDoor(3.2, 7.8, 0.9);\r\n\r\n        \/\/ Twin Toilets (Between Bed 3 & Master Bed 1)\r\n        addWall(0, 9.6, 3.1, 9.6);\r\n        addWall(0, 11.4, 3.1, 11.4);\r\n        addWall(3.1, 7.8, 3.1, 11.4);\r\n        addDoor(3.1, 8.7, 0.75);\r\n        addDoor(3.1, 10.5, 0.75);\r\n\r\n        \/\/ Master Bedroom 01 (Bottom Left)\r\n        addDoor(3.3, 11.4, 0.85);\r\n\r\n        \/\/ Kitchen & Dining (Top Right)\r\n        addWall(5.0, 0, 5.0, 4.8);\r\n        addWall(5.0, 4.8, 8.0, 4.8);\r\n        addWall(8.0, 0, 8.0, 2.5);\r\n\r\n        \/\/ Back Veranda (Top)\r\n        addWall(5.0, 2.2, 9.35, 2.2);\r\n        addDoor(7.2, 2.2, 0.9);\r\n\r\n        \/\/ Front Porch (Bottom Right)\r\n        addWall(4.2, 14.2, 9.35, 14.2);\r\n        addDoor(6.8, 14.2, 1.0);\r\n\r\n        \/\/ --- FURNITURE ACCORDING TO IMAGE 3 ---\r\n        \/\/ Master Bed 02 (Top Left)\r\n        addFurniture('kingbed', 0.8, 0.5, 2.2, 2.2, 0.65, 0, 'Master Bed 2');\r\n        addFurniture('wardrobe', 0.2, 2.9, 0.7, 1.4, 2.4, 0, 'Wardrobe');\r\n        addFurniture('desk', 0.2, 0.5, 0.6, 1.2, 0.76, 0, 'Dressing Unit');\r\n        addFurniture('plant', 3.4, 0.3, 0.6, 0.6, 1.2, 0);\r\n\r\n        \/\/ Bedroom 03 (Middle Left)\r\n        addFurniture('queenbed', 1.0, 5.0, 1.8, 2.1, 0.65, 0, 'Bed 3');\r\n        addFurniture('wardrobe', 3.3, 5.2, 0.7, 1.8, 2.4, 0, 'Closet');\r\n        addFurniture('plant', 0.3, 4.8, 0.6, 0.6, 1.2, 0);\r\n\r\n        \/\/ Master Bedroom 01 (Bottom Left)\r\n        addFurniture('kingbed', 0.8, 11.8, 2.3, 2.3, 0.68, 0, 'Master Bed 1');\r\n        addFurniture('curtain', 0.4, 15.9, 3.2, 0.3, 2.6, 0, 'Sheer Drapery');\r\n        addFurniture('wardrobe', 3.1, 9.8, 0.7, 1.5, 2.4, 0, 'Walk-in Closet');\r\n        addFurniture('plant', 3.3, 13.4, 0.65, 0.65, 1.3, 0);\r\n\r\n        \/\/ Toilets (Left Center)\r\n        addFurniture('toilet', 1.0, 8.4, 0.5, 0.7, 0.45, 0, 'Toilet');\r\n        addFurniture('sink', 2.0, 8.3, 0.7, 0.5, 0.85, 0, 'Vanity');\r\n        addFurniture('toilet', 1.0, 10.2, 0.5, 0.7, 0.45, 0, 'Toilet');\r\n        addFurniture('sink', 2.0, 10.2, 0.7, 0.5, 0.85, 0, 'Vanity');\r\n\r\n        \/\/ Kitchen & Dining (Right Upper)\r\n        addFurniture('kitchenisland', 5.4, 2.4, 2.6, 1.4, 0.92, 0, 'U-Kitchen Bar');\r\n        addFurniture('diningtable', 5.6, 5.8, 2.4, 1.4, 0.78, 0, '6-Seat Dining');\r\n        addFurniture('plant', 5.2, 5.2, 0.6, 0.6, 1.2, 0);\r\n\r\n        \/\/ Living Room Lounge (Right Center)\r\n        addFurniture('sofa', 5.6, 9.2, 2.6, 2.5, 0.85, 0, 'U-Sectional Sofa');\r\n        addFurniture('coffeetable', 6.2, 10.2, 1.1, 0.7, 0.42, 0, 'Oval Table');\r\n        addFurniture('sofa', 5.2, 12.8, 1.4, 0.7, 0.78, 0, 'Lounge Bench');\r\n        addFurniture('sofa', 6.8, 12.8, 1.4, 0.7, 0.78, 0, 'Lounge Bench');\r\n        addFurniture('plant', 4.8, 8.9, 0.7, 0.7, 1.5, 0, 'Indoor Palm');\r\n        addFurniture('plant', 7.8, 8.5, 0.7, 0.7, 1.5, 0, 'Indoor Plant');\r\n\r\n        \/\/ Front Porch Greenery\r\n        addFurniture('plant', 4.6, 14.6, 0.8, 0.8, 1.4, 0);\r\n        addFurniture('plant', 8.2, 14.8, 0.75, 0.75, 1.3, 0);\r\n\r\n        \/\/ Luminaires: Calibrated to Image 3\r\n        addFixture('downlight', 2.0, 2.0, 14, 40, 2700, 2.8);\r\n        addFixture('tablelamp', 0.5, 0.6, 6, 60, 2400, 0.65);\r\n        addFixture('downlight', 2.0, 6.2, 14, 40, 2700, 2.8);\r\n        addFixture('downlight', 2.0, 13.2, 14, 40, 2700, 2.8);\r\n        addFixture('tablelamp', 0.5, 12.0, 6, 60, 2400, 0.65);\r\n        addFixture('downlight', 6.8, 3.2, 18, 50, 3000, 2.8);\r\n        addFixture('pendant', 6.8, 6.4, 20, 55, 2700, 2.1);\r\n        addFixture('downlight', 6.8, 10.4, 16, 45, 2700, 2.8);\r\n        addFixture('downlight', 6.8, 15.0, 12, 60, 2700, 2.8);\r\n      }\r\n      else if (name === 'twoBedModern') {\r\n        \/\/ IMAGE 1: 2-Bed Flat (Maramani ID 12209)\r\n        state.widthM = 10.5;\r\n        state.heightM = 11.0;\r\n        document.getElementById('hudAreaName').textContent = '2-Bed Modern Plan (Maramani ID 12209)';\r\n        tabTitle.textContent = 'Maramani_ID12209_2Bed.plan @ 100% (RGB\/8)';\r\n        metaTags.innerHTML = `\r\n          <span class=\"text-cyan-400 font-semibold\"><i class=\"fa-solid fa-bed mr-1\"><\/i>2 Beds<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-amber-400 font-semibold\"><i class=\"fa-solid fa-couch mr-1\"><\/i>1 Living<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-indigo-400 font-semibold\"><i class=\"fa-solid fa-kitchen-set mr-1\"><\/i>Kitchen<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-emerald-400 font-semibold\"><i class=\"fa-solid fa-bath mr-1\"><\/i>2 Baths<\/span>\r\n        `;\r\n\r\n        \/\/ Left bedroom wing partition\r\n        addWall(3.6, 0, 3.6, 4.2);\r\n        addWall(3.6, 4.2, 3.6, 8.8);\r\n        addDoor(3.6, 3.4, 0.85); \/\/ Bed 2 door\r\n        addDoor(3.6, 5.4, 0.85); \/\/ Master bed door\r\n\r\n        \/\/ Bed 2 \/ Bath partition\r\n        addWall(0, 4.2, 3.6, 4.2);\r\n        addWall(0, 5.8, 3.6, 5.8);\r\n\r\n        \/\/ En-suite \/ Lobby Bath 2\r\n        addWall(4.2, 5.8, 4.2, 9.2);\r\n        addWall(4.2, 9.2, 5.6, 9.2);\r\n        addDoor(4.2, 6.8, 0.8);\r\n\r\n        \/\/ Store & Linen (Top Center)\r\n        addWall(3.6, 2.4, 5.8, 2.4);\r\n        addWall(5.8, 0, 5.8, 4.2);\r\n        addDoor(5.0, 2.4, 0.75);\r\n\r\n        \/\/ Kitchen Veranda & Counter (Top Right)\r\n        addWall(8.8, 0, 8.8, 3.8);\r\n        addDoor(8.8, 2.2, 0.85);\r\n\r\n        \/\/ Front Porch (Bottom Right)\r\n        addWall(5.8, 8.2, 10.5, 8.2);\r\n        addDoor(6.2, 8.2, 0.95);\r\n\r\n        \/\/ Furniture\r\n        addFurniture('queenbed', 0.6, 0.6, 2.0, 2.1, 0.65, 0, 'Bedroom 12.1m\u00b2');\r\n        addFurniture('queenbed', 0.6, 6.4, 2.0, 2.1, 0.65, 0, 'Master Bed 12.5m\u00b2');\r\n        addFurniture('curtain', 0.2, 10.4, 2.8, 0.3, 2.6, 0);\r\n\r\n        addFurniture('toilet', 0.3, 4.6, 0.5, 0.65, 0.45, 0);\r\n        addFurniture('sink', 1.4, 4.5, 0.6, 0.5, 0.85, 0);\r\n        addFurniture('bathtub', 2.4, 4.4, 1.0, 1.2, 0.6, 0);\r\n\r\n        addFurniture('kitchenisland', 6.2, 3.0, 3.0, 1.1, 0.92, 0, 'Kitchen Counter');\r\n        addFurniture('sofa', 7.8, 5.0, 1.2, 2.4, 0.85, 0, 'Living Sofa');\r\n        addFurniture('armchair', 6.2, 5.2, 0.8, 0.8, 0.78, 0);\r\n        addFurniture('armchair', 6.2, 6.4, 0.8, 0.8, 0.78, 0);\r\n        addFurniture('coffeetable', 7.0, 5.6, 0.6, 1.3, 0.42, 0);\r\n\r\n        \/\/ Porch table & chairs\r\n        addFurniture('coffeetable', 7.2, 9.2, 0.8, 0.8, 0.5, 0, 'Porch Cafe');\r\n\r\n        \/\/ Luminaires\r\n        addFixture('downlight', 2.0, 2.0, 14, 45, 2700, 2.8);\r\n        addFixture('downlight', 2.0, 7.8, 14, 45, 2700, 2.8);\r\n        addFixture('downlight', 7.4, 2.2, 16, 50, 3000, 2.8);\r\n        addFixture('pendant', 7.4, 3.6, 18, 55, 2700, 2.1);\r\n        addFixture('downlight', 7.4, 6.2, 16, 45, 2700, 2.8);\r\n      }\r\n      else if (name === 'oneBedSuite') {\r\n        \/\/ IMAGE 2: 1-Bed Home (Maramani ID 11104)\r\n        state.widthM = 9.0;\r\n        state.heightM = 10.5;\r\n        document.getElementById('hudAreaName').textContent = '1-Bed Urban Plan (Maramani ID 11104)';\r\n        tabTitle.textContent = 'Maramani_ID11104_1Bed.plan @ 100% (RGB\/8)';\r\n        metaTags.innerHTML = `\r\n          <span class=\"text-cyan-400 font-semibold\"><i class=\"fa-solid fa-bed mr-1\"><\/i>1 Bed<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-amber-400 font-semibold\"><i class=\"fa-solid fa-couch mr-1\"><\/i>1 Living<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-indigo-400 font-semibold\"><i class=\"fa-solid fa-kitchen-set mr-1\"><\/i>Kitchen<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-emerald-400 font-semibold\"><i class=\"fa-solid fa-bath mr-1\"><\/i>1 Bath<\/span>\r\n        `;\r\n\r\n        \/\/ Left bedroom & bath boundary\r\n        addWall(3.8, 0, 3.8, 4.4);\r\n        addWall(0, 4.4, 3.8, 4.4);\r\n        addWall(0, 2.2, 2.0, 2.2); \/\/ Store\r\n        addWall(2.0, 0, 2.0, 2.2);\r\n\r\n        \/\/ Bedroom (Bottom Left)\r\n        addWall(3.8, 4.4, 3.8, 9.2);\r\n        addDoor(3.8, 5.2, 0.9);\r\n\r\n        \/\/ Kitchen Veranda & Wall (Top Right)\r\n        addWall(7.2, 0, 7.2, 3.4);\r\n        addDoor(7.2, 2.0, 0.8);\r\n\r\n        \/\/ Kitchen partition\r\n        addWall(3.8, 3.4, 6.2, 3.4);\r\n\r\n        \/\/ Living Hall divider\r\n        addWall(5.0, 4.4, 5.0, 8.2);\r\n\r\n        \/\/ Front Porch\r\n        addWall(5.0, 8.2, 9.0, 8.2);\r\n        addDoor(5.4, 8.2, 0.95);\r\n\r\n        \/\/ Furniture\r\n        addFurniture('kingbed', 0.6, 5.4, 2.2, 2.2, 0.68, 0, 'Bedroom 12.5m\u00b2');\r\n        addFurniture('curtain', 0.2, 9.0, 3.2, 0.3, 2.6, 0);\r\n\r\n        addFurniture('bathtub', 0.4, 2.4, 1.4, 0.9, 0.6, 0);\r\n        addFurniture('toilet', 0.4, 3.5, 0.5, 0.65, 0.45, 0);\r\n        addFurniture('sink', 1.4, 3.8, 0.6, 0.45, 0.85, 0);\r\n\r\n        addFurniture('kitchenisland', 3.8, 2.4, 2.4, 1.0, 0.92, 0, 'Kitchen & Dining 12.8m\u00b2');\r\n        addFurniture('sofa', 6.2, 6.4, 2.4, 1.0, 0.85, 0, 'Living Lounge');\r\n        addFurniture('armchair', 6.4, 4.8, 0.8, 0.8, 0.78, 0);\r\n        addFurniture('armchair', 7.4, 4.8, 0.8, 0.8, 0.78, 0);\r\n        addFurniture('coffeetable', 6.6, 5.7, 1.2, 0.55, 0.42, 0);\r\n\r\n        \/\/ Luminaires\r\n        addFixture('downlight', 2.0, 7.0, 14, 45, 2700, 2.8);\r\n        addFixture('downlight', 5.2, 1.8, 16, 50, 3000, 2.8);\r\n        addFixture('pendant', 5.2, 2.8, 16, 50, 2700, 2.1);\r\n        addFixture('downlight', 7.0, 5.6, 16, 45, 2700, 2.8);\r\n      }\r\n      else if (name === 'masterStudio') {\r\n        \/\/ IMAGE 4: Luxury Master Suite (16'0\" \u00d7 15'0\" + Walk-in Wardrobe + Washroom)\r\n        state.widthM = 8.5;\r\n        state.heightM = 7.5;\r\n        document.getElementById('hudAreaName').textContent = \"16'0\\\" \u00d7 15'0\\\" Master Bedroom Suite (Image 4)\";\r\n        tabTitle.textContent = 'Master_Suite_2_Wardrobe_Washroom.plan @ 100% (RGB\/8)';\r\n        metaTags.innerHTML = `\r\n          <span class=\"text-cyan-400 font-semibold\"><i class=\"fa-solid fa-bed mr-1\"><\/i>1 King Suite<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-amber-400 font-semibold\"><i class=\"fa-solid fa-couch mr-1\"><\/i>Lounge Sofa<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-indigo-400 font-semibold\"><i class=\"fa-solid fa-door-closed mr-1\"><\/i>Walk-in Closet (6'\u00d79')<\/span>\r\n          <span class=\"text-neutral-600\">|<\/span>\r\n          <span class=\"text-emerald-400 font-semibold\"><i class=\"fa-solid fa-bath mr-1\"><\/i>Washroom (6'\u00d78')<\/span>\r\n        `;\r\n\r\n        \/\/ Washroom partition (Top Right 6'0\" \u00d7 8'0\")\r\n        addWall(5.4, 0, 5.4, 2.6);\r\n        addWall(5.4, 2.6, 8.5, 2.6);\r\n        addDoor(5.4, 1.8, 0.8);\r\n\r\n        \/\/ Walk-in Wardrobe Room (Bottom Right 6'0\" \u00d7 9'0\")\r\n        addWall(5.4, 2.6, 5.4, 6.2);\r\n        addWall(5.4, 6.2, 8.5, 6.2);\r\n        addDoor(5.4, 5.4, 0.8);\r\n\r\n        \/\/ Balcony \/ Veranda bottom boundary\r\n        addWall(0, 6.2, 5.4, 6.2);\r\n        addDoor(2.4, 6.2, 1.2); \/\/ Sliding glass door to balcony\r\n\r\n        \/\/ --- LUXURY FURNITURE FROM IMAGE 4 ---\r\n        \/\/ Tufted King Bed with dual nightstands & rugs\r\n        addFurniture('kingbed', 1.0, 2.0, 2.4, 2.4, 0.72, 0, 'Tufted King Bed');\r\n        addFurniture('rug', 0.7, 1.8, 2.9, 2.8, 0.02, 0, 'Wool Accent Rug');\r\n        addFurniture('tablelamp', 0.4, 2.2, 0.4, 0.4, 0.65, 0, 'Left Nightstand');\r\n        addFurniture('tablelamp', 0.4, 4.0, 0.4, 0.4, 0.65, 0, 'Right Nightstand');\r\n\r\n        \/\/ Bedroom Lounge Sofa & Coffee Table (Top Left)\r\n        addFurniture('sofa', 1.2, 0.3, 2.0, 0.8, 0.82, 0, 'Velvet 2-Seater');\r\n        addFurniture('coffeetable', 1.8, 1.2, 0.8, 0.8, 0.42, 0, 'Round Table');\r\n        addFurniture('plant', 0.3, 0.4, 0.6, 0.6, 1.4, 0, 'Fiddle-Leaf Fig');\r\n\r\n        \/\/ Floating TV Media Unit (Facing Bed)\r\n        addFurniture('desk', 4.8, 2.2, 0.5, 2.2, 0.55, 0, 'Floating TV Console');\r\n\r\n        \/\/ Walk-in Wardrobe (6' \u00d7 9') with open garment racks\r\n        addFurniture('wardrobe', 5.6, 2.8, 2.7, 0.65, 2.4, 0, 'Garment Rail A');\r\n        addFurniture('wardrobe', 7.7, 3.4, 0.65, 2.6, 2.4, 0, 'Garment Rail B');\r\n        addFurniture('rug', 6.0, 3.8, 1.5, 2.0, 0.02, 0, 'Runner Rug');\r\n\r\n        \/\/ Washroom (6' \u00d7 8')\r\n        addFurniture('toilet', 7.4, 0.4, 0.5, 0.7, 0.45, 0, 'Wall-hung WC');\r\n        addFurniture('sink', 7.4, 1.6, 0.7, 0.5, 0.85, 0, 'Floating Basin');\r\n        addFurniture('bathtub', 5.6, 0.4, 1.2, 1.2, 0.6, 0, 'Walk-in Shower');\r\n\r\n        \/\/ Balcony Greenery (Bottom)\r\n        addFurniture('plant', 0.5, 6.5, 0.7, 0.7, 1.3, 0);\r\n        addFurniture('plant', 4.4, 6.5, 0.7, 0.7, 1.3, 0);\r\n\r\n        \/\/ Calibrated Fixtures (Downlights, Chandelier & Bedside Lamps)\r\n        addFixture('pendant', 2.8, 3.2, 22, 50, 2700, 2.2);\r\n        addFixture('tablelamp', 0.6, 2.3, 6, 60, 2400, 0.65);\r\n        addFixture('tablelamp', 0.6, 4.1, 6, 60, 2400, 0.65);\r\n        addFixture('downlight', 2.2, 0.7, 14, 45, 2700, 2.8);\r\n        addFixture('downlight', 4.6, 3.2, 12, 36, 3000, 2.8);\r\n        addFixture('downlight', 6.8, 4.4, 14, 45, 3000, 2.8);\r\n        addFixture('downlight', 6.8, 1.2, 12, 45, 3000, 2.8);\r\n      }\r\n      else if (name === 'emptyCustom') {\r\n        state.widthM = 16.0;\r\n        state.heightM = 12.0;\r\n        document.getElementById('hudAreaName').textContent = 'Custom Freeform Canvas';\r\n        tabTitle.textContent = 'Untitled_Custom_Plan.plan @ 100% (RGB\/8)';\r\n        metaTags.innerHTML = `<span class=\"text-cyan-400 font-semibold\"><i class=\"fa-solid fa-pen-nib mr-1\"><\/i>Freeform CAD Mode<\/span>`;\r\n        setTool('wall');\r\n      }\r\n\r\n      state.selectedEntity = state.fixtures[0] ? { type: 'fixture', id: state.fixtures[0].id } : null;\r\n      updateInspectorUI();\r\n      updateBaseTransform();\r\n      render();\r\n    }\r\n\r\n    \/\/ Add CAD Elements\r\n    function addWall(x1, y1, x2, y2) {\r\n      const wall = { id: state.nextId++, x1, y1, x2, y2, thickness: 0.18 };\r\n      state.walls.push(wall);\r\n      return wall;\r\n    }\r\n\r\n    function addDoor(x, y, width = 0.9) {\r\n      let nearestWall = null;\r\n      let minDist = Infinity;\r\n      for (const w of state.walls) {\r\n        const dx = w.x2 - w.x1;\r\n        const dy = w.y2 - w.y1;\r\n        const len = Math.hypot(dx, dy);\r\n        if (len < 0.1) continue;\r\n        const t = Math.max(0, Math.min(1, ((x - w.x1) * dx + (y - w.y1) * dy) \/ (len * len)));\r\n        const projX = w.x1 + t * dx;\r\n        const projY = w.y1 + t * dy;\r\n        const d = Math.hypot(x - projX, y - projY);\r\n        if (d < minDist && d < 0.8) {\r\n          minDist = d;\r\n          nearestWall = w;\r\n        }\r\n      }\r\n      const door = { id: state.nextId++, wallId: nearestWall ? nearestWall.id : null, x, y, width };\r\n      state.doors.push(door);\r\n      return door;\r\n    }\r\n\r\n    function addFurniture(type, x, y, w, h, zHeight, rotation = 0, label = '') {\r\n      const furn = {\r\n        id: state.nextId++,\r\n        type, x, y, w, h,\r\n        zHeight: zHeight || 0.65,\r\n        rotation,\r\n        label: label || type,\r\n        color: type === 'rug' ? '#e2ddd4' : '#475569'\r\n      };\r\n      state.furniture.push(furn);\r\n      state.selectedEntity = { type: 'furniture', id: furn.id };\r\n      updateInspectorUI();\r\n      render();\r\n      return furn;\r\n    }\r\n\r\n    function spawnFurniture(type) {\r\n      const cx = snap(state.widthM \/ 2 - 1.0);\r\n      const cy = snap(state.heightM \/ 2 - 0.8);\r\n      switch(type) {\r\n        case 'kingbed': addFurniture('kingbed', cx, cy, 2.3, 2.3, 0.68, 0, 'Master King Suite'); break;\r\n        case 'queenbed': addFurniture('queenbed', cx, cy, 1.85, 2.2, 0.65, 0, 'Queen Bed'); break;\r\n        case 'sofa': addFurniture('sofa', cx, cy, 3.4, 2.3, 0.85, 0, 'L-Sectional Boucl\u00e9'); break;\r\n        case 'armchair': addFurniture('armchair', cx, cy, 0.88, 0.85, 0.78, 0, 'Lounge Armchair'); break;\r\n        case 'coffeetable': addFurniture('coffeetable', cx, cy, 1.5, 0.8, 0.42, 0, 'Marble Coffee Table'); break;\r\n        case 'diningtable': addFurniture('diningtable', cx, cy, 2.8, 1.2, 0.78, 0, '8-Seat Walnut Dining'); break;\r\n        case 'kitchenisland': addFurniture('kitchenisland', cx, cy, 3.2, 1.1, 0.92, 0, 'Calacatta Island'); break;\r\n        case 'plant': addFurniture('plant', cx, cy, 0.75, 0.75, 1.4, 0, 'Indoor Plant'); break;\r\n        case 'curtain': addFurniture('curtain', cx, cy, 3.0, 0.35, 2.6, 0, 'Window Drapery'); break;\r\n        case 'desk': addFurniture('desk', cx, cy, 1.7, 0.75, 0.76, 0, 'Executive Desk'); break;\r\n        case 'wardrobe': addFurniture('wardrobe', cx, cy, 2.4, 0.65, 2.4, 0, 'Built-in Wardrobe'); break;\r\n        case 'bathtub': addFurniture('bathtub', cx, cy, 1.85, 0.88, 0.62, 0, 'Freestanding Tub'); break;\r\n      }\r\n      closePopovers();\r\n    }\r\n\r\n    function addFixture(type, x, y, wattage = 14, beamAngle = 36, cct = 2700, mountZ = 2.8) {\r\n      const fixture = {\r\n        id: state.nextId++,\r\n        type, x, y,\r\n        wattage,\r\n        efficacy: 100,\r\n        beamAngle,\r\n        cct,\r\n        dimmer: 100,\r\n        mountZ\r\n      };\r\n      state.fixtures.push(fixture);\r\n      state.selectedEntity = { type: 'fixture', id: fixture.id };\r\n      updateInspectorUI();\r\n      render();\r\n      return fixture;\r\n    }\r\n\r\n    function spawnLuminaire(type) {\r\n      const cx = snap(state.widthM \/ 2);\r\n      const cy = snap(state.heightM \/ 2);\r\n      switch(type) {\r\n        case 'downlight': addFixture('downlight', cx, cy, 14, 36, 2700, 2.8); break;\r\n        case 'pendant': addFixture('pendant', cx, cy, 22, 60, 2700, 2.1); break;\r\n        case 'tablelamp': addFixture('tablelamp', cx, cy, 6, 60, 2400, 0.65); break;\r\n        case 'floorlamp': addFixture('floorlamp', cx, cy, 14, 80, 2700, 1.55); break;\r\n        case 'cove': addFixture('cove', cx, cy, 18, 90, 3000, 2.7); break;\r\n      }\r\n      closePopovers();\r\n    }\r\n\r\n    function closePopovers() {\r\n      document.getElementById('luminairePopover').classList.remove('show');\r\n      document.getElementById('furniturePopover').classList.remove('show');\r\n    }\r\n\r\n    \/\/ =========================================================================\r\n    \/\/ RENDERING PIPELINE: WHITE MARBLE TILES, 2.5D ASSETS, VISIBILITY POLYGON\r\n    \/\/ =========================================================================\r\n\r\n    function drawFloorFinish() {\r\n      const p0 = roomToScreen(0, 0);\r\n      const wPx = state.widthM * baseScale * state.zoom;\r\n      const hPx = state.heightM * baseScale * state.zoom;\r\n\r\n      ctx.save();\r\n\r\n      if (state.viewMode === 'blueprint') {\r\n        ctx.fillStyle = '#0f172a';\r\n        ctx.fillRect(p0.x, p0.y, wPx, hPx);\r\n        ctx.strokeStyle = 'rgba(56, 189, 248, 0.15)';\r\n        ctx.lineWidth = 1;\r\n        for (let x = 0; x <= state.widthM; x += 0.5) {\r\n          const pt = roomToScreen(x, 0);\r\n          ctx.beginPath(); ctx.moveTo(pt.x, p0.y); ctx.lineTo(pt.x, p0.y + hPx); ctx.stroke();\r\n        }\r\n        for (let y = 0; y <= state.heightM; y += 0.5) {\r\n          const pt = roomToScreen(0, y);\r\n          ctx.beginPath(); ctx.moveTo(p0.x, pt.y); ctx.lineTo(p0.x + wPx, pt.y); ctx.stroke();\r\n        }\r\n        ctx.restore();\r\n        return;\r\n      }\r\n\r\n      \/\/ --- POLISHED CREAM \/ WHITE PORCELAIN MARBLE TILES (from Image 3 & 4) ---\r\n      const tileSizeM = 0.8;\r\n      const tileCols = Math.ceil(state.widthM \/ tileSizeM);\r\n      const tileRows = Math.ceil(state.heightM \/ tileSizeM);\r\n\r\n      for (let r = 0; r < tileRows; r++) {\r\n        for (let c = 0; c < tileCols; c++) {\r\n          const tx = c * tileSizeM;\r\n          const ty = r * tileSizeM;\r\n          const p = roomToScreen(tx, ty);\r\n          const tw = Math.min(tileSizeM, state.widthM - tx) * baseScale * state.zoom;\r\n          const th = Math.min(tileSizeM, state.heightM - ty) * baseScale * state.zoom;\r\n\r\n          const seed = (c * 17 + r * 31) % 5;\r\n          const tileGrad = ctx.createLinearGradient(p.x, p.y, p.x + tw, p.y + th);\r\n          if (seed === 0) {\r\n            tileGrad.addColorStop(0, '#f9f6f0');\r\n            tileGrad.addColorStop(1, '#ece6dc');\r\n          } else if (seed === 1) {\r\n            tileGrad.addColorStop(0, '#f6f2ea');\r\n            tileGrad.addColorStop(1, '#e8e2d6');\r\n          } else {\r\n            tileGrad.addColorStop(0, '#fbf8f2');\r\n            tileGrad.addColorStop(1, '#ebe4da');\r\n          }\r\n\r\n          ctx.fillStyle = tileGrad;\r\n          ctx.fillRect(p.x, p.y, tw, th);\r\n\r\n          \/\/ Natural vein texture\r\n          if (seed % 2 === 0) {\r\n            ctx.save();\r\n            ctx.strokeStyle = 'rgba(180, 165, 150, 0.15)';\r\n            ctx.lineWidth = 1;\r\n            ctx.beginPath();\r\n            ctx.moveTo(p.x + tw * 0.1, p.y + th * 0.2);\r\n            ctx.quadraticCurveTo(p.x + tw * 0.5, p.y + th * 0.7, p.x + tw * 0.9, p.y + th * 0.85);\r\n            ctx.stroke();\r\n            ctx.restore();\r\n          }\r\n\r\n          \/\/ Crisp Grout lines\r\n          ctx.strokeStyle = '#dfd7cc';\r\n          ctx.lineWidth = 0.8;\r\n          ctx.strokeRect(p.x, p.y, tw, th);\r\n        }\r\n      }\r\n\r\n      ctx.restore();\r\n    }\r\n\r\n    function drawFurnitureItems() {\r\n      for (const f of state.furniture) {\r\n        const p = roomToScreen(f.x, f.y);\r\n        const w = f.w * baseScale * state.zoom;\r\n        const h = f.h * baseScale * state.zoom;\r\n        const isSelected = state.selectedEntity && state.selectedEntity.type === 'furniture' && state.selectedEntity.id === f.id;\r\n\r\n        ctx.save();\r\n        ctx.translate(p.x + w \/ 2, p.y + h \/ 2);\r\n        ctx.rotate((f.rotation || 0) * Math.PI \/ 180);\r\n        ctx.translate(-w \/ 2, -h \/ 2);\r\n\r\n        \/\/ Contact Ambient Occlusion Shadow\r\n        if (state.viewMode !== 'blueprint' && f.type !== 'curtain' && f.type !== 'rug') {\r\n          ctx.save();\r\n          ctx.shadowColor = 'rgba(25, 20, 15, 0.28)';\r\n          ctx.shadowBlur = 12 * state.zoom;\r\n          ctx.shadowOffsetY = 4 * state.zoom;\r\n          ctx.fillStyle = 'rgba(25, 20, 15, 0.18)';\r\n          roundRect(ctx, 2, 2, w - 4, h - 4, 6 * state.zoom, true, false);\r\n          ctx.restore();\r\n        }\r\n\r\n        \/\/ --- ASSET: RUG (from Image 3 & 4) ---\r\n        if (f.type === 'rug') {\r\n          const rGrad = ctx.createLinearGradient(0, 0, w, h);\r\n          rGrad.addColorStop(0, '#d9d2c5');\r\n          rGrad.addColorStop(0.5, '#eae5db');\r\n          rGrad.addColorStop(1, '#cfc7b8');\r\n          ctx.fillStyle = rGrad;\r\n          roundRect(ctx, 0, 0, w, h, 4 * state.zoom, true, false);\r\n\r\n          \/\/ Perimeter woven border\r\n          ctx.strokeStyle = 'rgba(120, 105, 90, 0.25)';\r\n          ctx.lineWidth = 1.5;\r\n          ctx.strokeRect(4 * state.zoom, 4 * state.zoom, w - 8 * state.zoom, h - 8 * state.zoom);\r\n        }\r\n        \/\/ --- ASSET: LUXURY TUFTED KING \/ QUEEN BED (Exact from Images 3 & 4) ---\r\n        else if (f.type === 'kingbed' || f.type === 'queenbed') {\r\n          const headH = 18 * state.zoom;\r\n\r\n          \/\/ Bed Platform base\r\n          ctx.fillStyle = '#2f2824';\r\n          roundRect(ctx, 0, 0, w, h, 6 * state.zoom, true, false);\r\n\r\n          \/\/ Deep Tufted Headboard\r\n          const hbGrad = ctx.createLinearGradient(0, 0, 0, headH);\r\n          hbGrad.addColorStop(0, '#58493f');\r\n          hbGrad.addColorStop(1, '#3b2f28');\r\n          ctx.fillStyle = hbGrad;\r\n          roundRect(ctx, 0, 0, w, headH, 4 * state.zoom, true, false);\r\n\r\n          \/\/ Headboard Tufting Buttons & Stitch lines\r\n          ctx.strokeStyle = '#221a15';\r\n          ctx.lineWidth = 1.5;\r\n          const tuftCols = 4;\r\n          for (let i = 1; i < tuftCols; i++) {\r\n            const tx = (w \/ tuftCols) * i;\r\n            ctx.beginPath(); ctx.moveTo(tx, 0); ctx.lineTo(tx, headH); ctx.stroke();\r\n            ctx.fillStyle = '#1a130f';\r\n            ctx.beginPath(); ctx.arc(tx, headH \/ 2, 2 * state.zoom, 0, Math.PI * 2); ctx.fill();\r\n          }\r\n\r\n          \/\/ Mattress Sheet\r\n          const sheetY = headH + 1;\r\n          const sheetH = h - headH - 2;\r\n          ctx.fillStyle = '#f7f4ee';\r\n          roundRect(ctx, 3, sheetY, w - 6, sheetH, 4 * state.zoom, true, false);\r\n\r\n          \/\/ Multi-layer Sleeping Pillows\r\n          const pillowW = (w - 24 * state.zoom) \/ 2;\r\n          const pillowH = 22 * state.zoom;\r\n          const pY1 = sheetY + 4 * state.zoom;\r\n\r\n          const drawPillow = (px, py, pw, ph, color, angle = 0) => {\r\n            ctx.save();\r\n            ctx.translate(px + pw \/ 2, py + ph \/ 2);\r\n            ctx.rotate(angle);\r\n            ctx.fillStyle = color;\r\n            ctx.shadowColor = 'rgba(0,0,0,0.15)';\r\n            ctx.shadowBlur = 5 * state.zoom;\r\n            roundRect(ctx, -pw\/2, -ph\/2, pw, ph, 4 * state.zoom, true, false);\r\n            ctx.strokeStyle = 'rgba(0,0,0,0.1)';\r\n            ctx.strokeRect(-pw\/2 + 1, -ph\/2 + 1, pw - 2, ph - 2);\r\n            ctx.restore();\r\n          };\r\n\r\n          \/\/ Base White Pillows\r\n          drawPillow(6 * state.zoom, pY1, pillowW, pillowH, '#ffffff', -0.02);\r\n          drawPillow(w - 6 * state.zoom - pillowW, pY1, pillowW, pillowH, '#ffffff', 0.02);\r\n\r\n          \/\/ Accent Pillows (from Image 3: Terracotta \/ Blush Pink \/ Warm Grey)\r\n          const pY2 = pY1 + 10 * state.zoom;\r\n          drawPillow(10 * state.zoom, pY2, pillowW * 0.85, pillowH * 0.75, '#c97a63', 0.03); \/\/ Terracotta\r\n          drawPillow(w - 10 * state.zoom - pillowW * 0.85, pY2, pillowW * 0.85, pillowH * 0.75, '#5a6b7c', -0.03); \/\/ Slate Blue\r\n\r\n          \/\/ Lumbar throw pillow\r\n          const pY3 = pY2 + 9 * state.zoom;\r\n          drawPillow(w \/ 2 - 20 * state.zoom, pY3, 40 * state.zoom, 14 * state.zoom, '#d2a088', 0.0);\r\n\r\n          \/\/ Duvet Blanket & Fold (from Image 3 & 4)\r\n          const duvetY = pY1 + pillowH + 14 * state.zoom;\r\n          const duvetH = h - duvetY - 2;\r\n\r\n          const duvetGrad = ctx.createLinearGradient(0, duvetY, 0, h);\r\n          duvetGrad.addColorStop(0, '#e8e2d8');\r\n          duvetGrad.addColorStop(0.5, '#ddd6cb');\r\n          duvetGrad.addColorStop(1, '#cec5b8');\r\n          ctx.fillStyle = duvetGrad;\r\n          roundRect(ctx, 4, duvetY, w - 8, duvetH, 4 * state.zoom, true, false);\r\n\r\n          \/\/ Casual Folded Blanket Throw (Vertical Terracotta\/Pink Runner from Image 3)\r\n          const throwW = w * 0.38;\r\n          const throwGrad = ctx.createLinearGradient(w - throwW - 6, duvetY, w - 6, duvetY);\r\n          throwGrad.addColorStop(0, '#bf6e58');\r\n          throwGrad.addColorStop(1, '#a85a46');\r\n          ctx.fillStyle = throwGrad;\r\n          roundRect(ctx, w - throwW - 6, duvetY + 1, throwW, duvetH - 2, 3 * state.zoom, true, false);\r\n\r\n          \/\/ Fabric Creases\r\n          ctx.strokeStyle = 'rgba(70, 50, 40, 0.2)';\r\n          ctx.lineWidth = 1.2;\r\n          ctx.beginPath();\r\n          ctx.moveTo(8, duvetY + 18 * state.zoom);\r\n          ctx.quadraticCurveTo(w * 0.35, duvetY + 28 * state.zoom, w * 0.6, duvetY + 14 * state.zoom);\r\n          ctx.stroke();\r\n        }\r\n        \/\/ --- ASSET: SOFA \/ SECTIONAL (from Image 3 & 4) ---\r\n        else if (f.type === 'sofa') {\r\n          ctx.fillStyle = '#d5cdc1';\r\n          roundRect(ctx, 0, 0, w, h, 8 * state.zoom, true, false);\r\n\r\n          const borderThick = 18 * state.zoom;\r\n          ctx.fillStyle = '#b8ad9e';\r\n          roundRect(ctx, 0, 0, w, borderThick, 6 * state.zoom, true, false);\r\n          roundRect(ctx, 0, 0, borderThick, h, 6 * state.zoom, true, false);\r\n\r\n          const seatW = (w - borderThick - 6) \/ 2;\r\n          const seatH = h - borderThick - 6;\r\n\r\n          for (let i = 0; i < 2; i++) {\r\n            const sx = borderThick + 3 + i * seatW;\r\n            const sy = borderThick + 3;\r\n            ctx.fillStyle = '#ded7cc';\r\n            roundRect(ctx, sx + 2, sy + 2, seatW - 4, seatH - 4, 5 * state.zoom, true, false);\r\n            ctx.strokeStyle = '#a49887';\r\n            ctx.lineWidth = 1;\r\n            roundRect(ctx, sx + 2, sy + 2, seatW - 4, seatH - 4, 5 * state.zoom, false, true);\r\n\r\n            \/\/ Throw cushion on sofa\r\n            ctx.fillStyle = i === 0 ? '#b86b53' : '#4a5b6d';\r\n            roundRect(ctx, sx + 6, sy + 6, 16 * state.zoom, 14 * state.zoom, 3 * state.zoom, true, false);\r\n          }\r\n        }\r\n        \/\/ --- ASSET: COFFEE TABLE (Marble \/ Oak live edge) ---\r\n        else if (f.type === 'coffeetable') {\r\n          const mGrad = ctx.createLinearGradient(0, 0, w, h);\r\n          mGrad.addColorStop(0, '#ffffff');\r\n          mGrad.addColorStop(1, '#e3ded5');\r\n          ctx.fillStyle = mGrad;\r\n          ctx.beginPath();\r\n          ctx.ellipse(w \/ 2, h \/ 2, w \/ 2 - 2, h \/ 2 - 2, 0, 0, Math.PI * 2);\r\n          ctx.fill();\r\n\r\n          ctx.strokeStyle = '#b89255'; \/\/ Champagne Brass edge\r\n          ctx.lineWidth = 2 * state.zoom;\r\n          ctx.stroke();\r\n\r\n          \/\/ Coffee book & tray\r\n          ctx.fillStyle = '#2f2723';\r\n          roundRect(ctx, w\/2 - 10 * state.zoom, h\/2 - 6 * state.zoom, 20 * state.zoom, 12 * state.zoom, 2, true, false);\r\n        }\r\n        \/\/ --- ASSET: DINING TABLE & 6\/8 CHAIRS (from Image 3) ---\r\n        else if (f.type === 'diningtable') {\r\n          const chairW = 16 * state.zoom;\r\n          const chairD = 14 * state.zoom;\r\n          ctx.fillStyle = '#b86550'; \/\/ Terracotta upholstered chairs (from Image 3)\r\n          for (let i = 0; i < 3; i++) {\r\n            const cx = w * 0.2 + i * (w * 0.3);\r\n            roundRect(ctx, cx - chairW\/2, -chairD * 0.75, chairW, chairD, 4 * state.zoom, true, false);\r\n            roundRect(ctx, cx - chairW\/2, h - chairD * 0.25, chairW, chairD, 4 * state.zoom, true, false);\r\n          }\r\n          \/\/ Warm Walnut table surface\r\n          const woodGrad = ctx.createLinearGradient(0, 0, w, 0);\r\n          woodGrad.addColorStop(0, '#533b2a');\r\n          woodGrad.addColorStop(0.5, '#6e5039');\r\n          woodGrad.addColorStop(1, '#533b2a');\r\n          ctx.fillStyle = woodGrad;\r\n          roundRect(ctx, 0, 0, w, h, 6 * state.zoom, true, false);\r\n\r\n          \/\/ Center floral centerpiece (from Image 3)\r\n          ctx.fillStyle = '#ffffff';\r\n          ctx.beginPath(); ctx.arc(w \/ 2, h \/ 2, 8 * state.zoom, 0, Math.PI * 2); ctx.fill();\r\n          ctx.fillStyle = '#22c55e';\r\n          ctx.beginPath(); ctx.arc(w \/ 2, h \/ 2, 5 * state.zoom, 0, Math.PI * 2); ctx.fill();\r\n        }\r\n        \/\/ --- ASSET: KITCHEN COUNTER \/ ISLAND (from Image 1, 2, 3) ---\r\n        else if (f.type === 'kitchenisland') {\r\n          ctx.fillStyle = '#ffffff';\r\n          roundRect(ctx, 0, 0, w, h, 4 * state.zoom, true, false);\r\n          ctx.strokeStyle = '#d0c8bd';\r\n          ctx.strokeRect(0, 0, w, h);\r\n\r\n          \/\/ Sink & Double Bowl\r\n          ctx.fillStyle = '#94a3b8';\r\n          roundRect(ctx, w * 0.1, h * 0.2, 28 * state.zoom, 16 * state.zoom, 2, true, false);\r\n\r\n          \/\/ Gas Range Cooktop (4 burners)\r\n          ctx.fillStyle = '#1e293b';\r\n          roundRect(ctx, w * 0.5, h * 0.2, 28 * state.zoom, 16 * state.zoom, 2, true, false);\r\n\r\n          \/\/ Counter Stools (from Image 1 & 3)\r\n          ctx.fillStyle = '#d5cdc1';\r\n          ctx.strokeStyle = '#6e5039';\r\n          ctx.lineWidth = 1.5;\r\n          const stoolCount = 3;\r\n          for (let i = 0; i < stoolCount; i++) {\r\n            const sx = w * 0.25 + i * (w * 0.25);\r\n            ctx.beginPath();\r\n            ctx.arc(sx, h - 3, 7 * state.zoom, 0, Math.PI * 2);\r\n            ctx.fill();\r\n            ctx.stroke();\r\n          }\r\n        }\r\n        \/\/ --- ASSET: BOTANICAL GREEN PLANT (from Images 3 & 4) ---\r\n        else if (f.type === 'plant') {\r\n          const r = Math.min(w, h) \/ 2;\r\n\r\n          ctx.fillStyle = '#4a3728'; \/\/ Planter pot\r\n          ctx.beginPath(); ctx.arc(w \/ 2, h \/ 2, r * 0.52, 0, Math.PI * 2); ctx.fill();\r\n          ctx.fillStyle = '#22160d';\r\n          ctx.beginPath(); ctx.arc(w \/ 2, h \/ 2, r * 0.44, 0, Math.PI * 2); ctx.fill();\r\n\r\n          const leaves = 9;\r\n          for (let i = 0; i < leaves; i++) {\r\n            const angle = (i \/ leaves) * Math.PI * 2;\r\n            const leafLen = r * 0.95;\r\n\r\n            ctx.save();\r\n            ctx.translate(w \/ 2, h \/ 2);\r\n            ctx.rotate(angle);\r\n\r\n            const leafGrad = ctx.createLinearGradient(0, 0, leafLen, 0);\r\n            leafGrad.addColorStop(0, '#166534');\r\n            leafGrad.addColorStop(0.7, '#22c55e');\r\n            leafGrad.addColorStop(1, '#15803d');\r\n            ctx.fillStyle = leafGrad;\r\n\r\n            ctx.beginPath();\r\n            ctx.ellipse(leafLen * 0.5, 0, leafLen * 0.48, r * 0.22, 0, 0, Math.PI * 2);\r\n            ctx.fill();\r\n\r\n            ctx.strokeStyle = '#86efac';\r\n            ctx.lineWidth = 1;\r\n            ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(leafLen * 0.9, 0); ctx.stroke();\r\n            ctx.restore();\r\n          }\r\n        }\r\n        \/\/ --- ASSET: SANITARY WARE (Toilet & Vanity Sink from Images 1, 2, 3, 4) ---\r\n        else if (f.type === 'toilet') {\r\n          ctx.fillStyle = '#ffffff';\r\n          roundRect(ctx, 0, 0, w, h * 0.4, 3 * state.zoom, true, false); \/\/ Tank\r\n          ctx.beginPath();\r\n          ctx.ellipse(w \/ 2, h * 0.65, w \/ 2 - 2, h * 0.35, 0, 0, Math.PI * 2);\r\n          ctx.fill();\r\n          ctx.strokeStyle = '#cbd5e1';\r\n          ctx.stroke();\r\n        }\r\n        else if (f.type === 'sink') {\r\n          ctx.fillStyle = '#475569'; \/\/ Countertop\r\n          roundRect(ctx, 0, 0, w, h, 3 * state.zoom, true, false);\r\n          ctx.fillStyle = '#ffffff'; \/\/ Basin bowl\r\n          ctx.beginPath();\r\n          ctx.ellipse(w \/ 2, h \/ 2, w * 0.38, h * 0.35, 0, 0, Math.PI * 2);\r\n          ctx.fill();\r\n        }\r\n        \/\/ --- ASSET: WARDROBE (Hanger Rails from Image 3 & 4) ---\r\n        else if (f.type === 'wardrobe') {\r\n          ctx.fillStyle = '#2f241d';\r\n          roundRect(ctx, 0, 0, w, h, 3 * state.zoom, true, false);\r\n\r\n          \/\/ Internal Hanger Rails & Clothing Hangers (from Image 4)\r\n          ctx.strokeStyle = '#d5c7b5';\r\n          ctx.lineWidth = 1;\r\n          const slots = Math.floor(w \/ (8 * state.zoom));\r\n          for (let i = 1; i < slots; i++) {\r\n            const hx = i * 8 * state.zoom;\r\n            ctx.beginPath(); ctx.moveTo(hx, 4 * state.zoom); ctx.lineTo(hx, h - 4 * state.zoom); ctx.stroke();\r\n          }\r\n        }\r\n        \/\/ Fallback generic\r\n        else {\r\n          ctx.fillStyle = '#64748b';\r\n          roundRect(ctx, 0, 0, w, h, 3 * state.zoom, true, false);\r\n        }\r\n\r\n        \/\/ Selection border\r\n        if (isSelected) {\r\n          ctx.strokeStyle = '#0098ff';\r\n          ctx.lineWidth = 2;\r\n          ctx.strokeRect(-4, -4, w + 8, h + 8);\r\n        }\r\n\r\n        ctx.restore();\r\n      }\r\n    }\r\n\r\n    function draw25DFurnitureShadows() {\r\n      if (!state.showShadows || state.viewMode === 'blueprint') return;\r\n\r\n      const p0 = roomToScreen(0, 0);\r\n      const wPx = state.widthM * baseScale * state.zoom;\r\n      const hPx = state.heightM * baseScale * state.zoom;\r\n\r\n      ctx.save();\r\n      ctx.beginPath();\r\n      ctx.rect(p0.x, p0.y, wPx, hPx);\r\n      ctx.clip();\r\n\r\n      for (const f of state.fixtures) {\r\n        if (f.mountZ <= 0.8) continue;\r\n\r\n        for (const furn of state.furniture) {\r\n          if (furn.type === 'curtain') continue;\r\n\r\n          const furnH = furn.zHeight || 0.65;\r\n          const deltaZ = f.mountZ - furnH;\r\n          if (deltaZ <= 0.1) continue;\r\n\r\n          const furnCenterX = furn.x + furn.w \/ 2;\r\n          const furnCenterY = furn.y + furn.h \/ 2;\r\n          if (isLineBlockedByWall(f.x, f.y, furnCenterX, furnCenterY)) continue;\r\n\r\n          const shadowScale = furnH \/ deltaZ;\r\n          const maxProjectionM = 2.4;\r\n\r\n          const corners = [\r\n            { x: furn.x, y: furn.y },\r\n            { x: furn.x + furn.w, y: furn.y },\r\n            { x: furn.x + furn.w, y: furn.y + furn.h },\r\n            { x: furn.x, y: furn.y + furn.h }\r\n          ];\r\n\r\n          const projected = corners.map(pt => {\r\n            const dx = pt.x - f.x;\r\n            const dy = pt.y - f.y;\r\n            const dist = Math.hypot(dx, dy);\r\n            const clampDist = Math.min(dist * shadowScale, maxProjectionM);\r\n            const factor = dist > 0.001 ? clampDist \/ dist : 0;\r\n            return { x: pt.x + dx * factor, y: pt.y + dy * factor };\r\n          });\r\n\r\n          const sc0 = roomToScreen(corners[0].x, corners[0].y);\r\n          const sc1 = roomToScreen(corners[1].x, corners[1].y);\r\n          const sc2 = roomToScreen(corners[2].x, corners[2].y);\r\n          const sc3 = roomToScreen(corners[3].x, corners[3].y);\r\n\r\n          const sp0 = roomToScreen(projected[0].x, projected[0].y);\r\n          const sp1 = roomToScreen(projected[1].x, projected[1].y);\r\n          const sp2 = roomToScreen(projected[2].x, projected[2].y);\r\n          const sp3 = roomToScreen(projected[3].x, projected[3].y);\r\n\r\n          ctx.fillStyle = 'rgba(15, 23, 42, 0.2)';\r\n\r\n          const drawQuad = (pA, pB, pC, pD) => {\r\n            ctx.beginPath();\r\n            ctx.moveTo(pA.x, pA.y);\r\n            ctx.lineTo(pB.x, pB.y);\r\n            ctx.lineTo(pC.x, pC.y);\r\n            ctx.lineTo(pD.x, pD.y);\r\n            ctx.closePath();\r\n            ctx.fill();\r\n          };\r\n\r\n          drawQuad(sc0, sc1, sp1, sp0);\r\n          drawQuad(sc1, sc2, sp2, sp1);\r\n          drawQuad(sc2, sc3, sp3, sp2);\r\n          drawQuad(sc3, sc0, sp0, sp3);\r\n        }\r\n      }\r\n\r\n      ctx.restore();\r\n    }\r\n\r\n    function drawWallsAndDoors() {\r\n      ctx.save();\r\n      const p0 = roomToScreen(0, 0);\r\n      const wPx = state.widthM * baseScale * state.zoom;\r\n      const hPx = state.heightM * baseScale * state.zoom;\r\n\r\n      \/\/ Outer room border\r\n      ctx.strokeStyle = state.viewMode === 'blueprint' ? '#0284c7' : '#334155';\r\n      ctx.lineWidth = 3;\r\n      ctx.strokeRect(p0.x, p0.y, wPx, hPx);\r\n\r\n      \/\/ Walls\r\n      for (const w of state.walls) {\r\n        const p1 = roomToScreen(w.x1, w.y1);\r\n        const p2 = roomToScreen(w.x2, w.y2);\r\n        const isSel = state.selectedEntity && state.selectedEntity.type === 'wall' && state.selectedEntity.id === w.id;\r\n\r\n        ctx.strokeStyle = isSel ? '#0098ff' : (state.viewMode === 'blueprint' ? '#0ea5e9' : '#1e293b');\r\n        ctx.lineWidth = Math.max(3, 8 * state.zoom);\r\n        ctx.lineCap = 'square';\r\n        ctx.beginPath();\r\n        ctx.moveTo(p1.x, p1.y);\r\n        ctx.lineTo(p2.x, p2.y);\r\n        ctx.stroke();\r\n\r\n        ctx.strokeStyle = state.viewMode === 'blueprint' ? '#082f49' : '#0f172a';\r\n        ctx.lineWidth = Math.max(1, 4 * state.zoom);\r\n        ctx.beginPath();\r\n        ctx.moveTo(p1.x, p1.y);\r\n        ctx.lineTo(p2.x, p2.y);\r\n        ctx.stroke();\r\n      }\r\n\r\n      \/\/ Doors\r\n      for (const d of state.doors) {\r\n        const p = roomToScreen(d.x, d.y);\r\n        const sizePx = (d.width || 0.9) * baseScale * state.zoom;\r\n        ctx.save();\r\n        ctx.strokeStyle = '#0098ff';\r\n        ctx.lineWidth = 1.2;\r\n        ctx.setLineDash([3, 3]);\r\n        ctx.beginPath();\r\n        ctx.arc(p.x, p.y, sizePx, 0, Math.PI \/ 2);\r\n        ctx.stroke();\r\n        ctx.setLineDash([]);\r\n        ctx.beginPath();\r\n        ctx.moveTo(p.x, p.y);\r\n        ctx.lineTo(p.x + sizePx, p.y);\r\n        ctx.stroke();\r\n        ctx.restore();\r\n      }\r\n\r\n      \/\/ In-progress wall preview\r\n      if (state.wallStart && state.tempWallEnd) {\r\n        const pt1 = roomToScreen(state.wallStart.x, state.wallStart.y);\r\n        const pt2 = roomToScreen(state.tempWallEnd.x, state.tempWallEnd.y);\r\n        ctx.strokeStyle = '#0098ff';\r\n        ctx.lineWidth = Math.max(3, 7 * state.zoom);\r\n        ctx.setLineDash([5, 5]);\r\n        ctx.beginPath();\r\n        ctx.moveTo(pt1.x, pt1.y);\r\n        ctx.lineTo(pt2.x, pt2.y);\r\n        ctx.stroke();\r\n        ctx.setLineDash([]);\r\n      }\r\n\r\n      ctx.restore();\r\n    }\r\n\r\n    function drawRealisticLighting() {\r\n      const p0 = roomToScreen(0, 0);\r\n      const wPx = state.widthM * baseScale * state.zoom;\r\n      const hPx = state.heightM * baseScale * state.zoom;\r\n\r\n      ctx.save();\r\n      ctx.beginPath();\r\n      ctx.rect(p0.x, p0.y, wPx, hPx);\r\n      ctx.clip();\r\n\r\n      \/\/ Soft architectural ambient room shading\r\n      ctx.fillStyle = 'rgba(15, 23, 42, 0.45)';\r\n      ctx.fillRect(p0.x, p0.y, wPx, hPx);\r\n\r\n      ctx.globalCompositeOperation = 'screen';\r\n\r\n      for (const f of state.fixtures) {\r\n        const center = roomToScreen(f.x, f.y);\r\n        const rgb = kelvinToRGB(f.cct);\r\n        const zDist = Math.max(0.2, f.mountZ > 0.76 ? (f.mountZ - 0.76) : f.mountZ);\r\n\r\n        const halfAngleRad = (f.beamAngle * Math.PI) \/ 360;\r\n        const beamSpreadM = Math.max(0.15, zDist * Math.tan(halfAngleRad));\r\n        const radiusPx = Math.max(2, beamSpreadM * baseScale * state.zoom);\r\n        const outerHaloPx = Math.max(radiusPx * 2.8, 70 * state.zoom);\r\n\r\n        const lumens = f.wattage * f.efficacy * (f.dimmer \/ 100);\r\n        const alphaPeak = Math.min(0.9, (lumens \/ 1400) * 0.7 + 0.2);\r\n\r\n        \/\/ 100% WALL OCCLUSION: Clip raycast visibility polygon\r\n        const visPolygon = computeVisibilityPolygon(f.x, f.y, 18.0);\r\n        if (visPolygon.length > 2) {\r\n          ctx.save();\r\n          ctx.beginPath();\r\n          const firstScreen = roomToScreen(visPolygon[0].x, visPolygon[0].y);\r\n          ctx.moveTo(firstScreen.x, firstScreen.y);\r\n          for (let i = 1; i < visPolygon.length; i++) {\r\n            const sp = roomToScreen(visPolygon[i].x, visPolygon[i].y);\r\n            ctx.lineTo(sp.x, sp.y);\r\n          }\r\n          ctx.closePath();\r\n          ctx.clip();\r\n\r\n          const grad = ctx.createRadialGradient(center.x, center.y, 2, center.x, center.y, Math.max(3, outerHaloPx));\r\n          grad.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaPeak})`);\r\n          grad.addColorStop(0.35, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaPeak * 0.7})`);\r\n          grad.addColorStop(0.7, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaPeak * 0.25})`);\r\n          grad.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);\r\n\r\n          ctx.fillStyle = grad;\r\n          ctx.beginPath();\r\n          ctx.arc(center.x, center.y, Math.max(3, outerHaloPx), 0, Math.PI * 2);\r\n          ctx.fill();\r\n\r\n          ctx.restore();\r\n        }\r\n      }\r\n\r\n      ctx.restore();\r\n    }\r\n\r\n    function drawHeatmap() {\r\n      const p0 = roomToScreen(0, 0);\r\n      const wPx = state.widthM * baseScale * state.zoom;\r\n      const hPx = state.heightM * baseScale * state.zoom;\r\n\r\n      const cols = 90;\r\n      const rows = 60;\r\n      calcCanvas.width = cols;\r\n      calcCanvas.height = rows;\r\n\r\n      const imgData = calcCtx.createImageData(cols, rows);\r\n      const data = imgData.data;\r\n\r\n      for (let r = 0; r < rows; r++) {\r\n        const yM = (r \/ (rows - 1)) * state.heightM;\r\n        for (let c = 0; c < cols; c++) {\r\n          const xM = (c \/ (cols - 1)) * state.widthM;\r\n          const lux = getTotalLuxAt(xM, yM);\r\n          const rgb = luxToHeatmapColor(lux);\r\n\r\n          const idx = (r * cols + c) * 4;\r\n          data[idx] = rgb.r;\r\n          data[idx + 1] = rgb.g;\r\n          data[idx + 2] = rgb.b;\r\n          data[idx + 3] = 205;\r\n        }\r\n      }\r\n\r\n      calcCtx.putImageData(imgData, 0, 0);\r\n\r\n      ctx.save();\r\n      ctx.beginPath();\r\n      ctx.rect(p0.x, p0.y, wPx, hPx);\r\n      ctx.clip();\r\n      ctx.imageSmoothingEnabled = true;\r\n      ctx.drawImage(calcCanvas, p0.x, p0.y, wPx, hPx);\r\n      ctx.restore();\r\n    }\r\n\r\n    function drawFixtures() {\r\n      for (const f of state.fixtures) {\r\n        const p = roomToScreen(f.x, f.y);\r\n        const isSelected = state.selectedEntity && state.selectedEntity.type === 'fixture' && state.selectedEntity.id === f.id;\r\n        const rgb = kelvinToRGB(f.cct);\r\n\r\n        if (state.showCones && state.viewMode !== 'heatmap') {\r\n          const zDist = Math.max(0.2, f.mountZ > 0.76 ? (f.mountZ - 0.76) : f.mountZ);\r\n          const halfAngleRad = (f.beamAngle * Math.PI) \/ 360;\r\n          const beamSpreadM = Math.max(0.15, zDist * Math.tan(halfAngleRad));\r\n          const radiusPx = Math.max(2, beamSpreadM * baseScale * state.zoom);\r\n\r\n          const visPolygon = computeVisibilityPolygon(f.x, f.y, 18.0);\r\n          ctx.save();\r\n          if (visPolygon.length > 2) {\r\n            ctx.beginPath();\r\n            const first = roomToScreen(visPolygon[0].x, visPolygon[0].y);\r\n            ctx.moveTo(first.x, first.y);\r\n            for (let i = 1; i < visPolygon.length; i++) {\r\n              const sp = roomToScreen(visPolygon[i].x, visPolygon[i].y);\r\n              ctx.lineTo(sp.x, sp.y);\r\n            }\r\n            ctx.closePath();\r\n            ctx.clip();\r\n          }\r\n\r\n          ctx.beginPath();\r\n          ctx.arc(p.x, p.y, radiusPx, 0, Math.PI * 2);\r\n          ctx.strokeStyle = isSelected ? '#0098ff' : 'rgba(251, 191, 36, 0.45)';\r\n          ctx.lineWidth = isSelected ? 2 : 1;\r\n          ctx.setLineDash([4, 4]);\r\n          ctx.stroke();\r\n          ctx.restore();\r\n        }\r\n\r\n        ctx.save();\r\n        if (isSelected) {\r\n          ctx.beginPath();\r\n          ctx.arc(p.x, p.y, Math.max(4, 16 * state.zoom), 0, Math.PI * 2);\r\n          ctx.fillStyle = 'rgba(0, 152, 255, 0.25)';\r\n          ctx.fill();\r\n          ctx.strokeStyle = '#0098ff';\r\n          ctx.lineWidth = 2;\r\n          ctx.stroke();\r\n        }\r\n\r\n        \/\/ Symbol\r\n        ctx.beginPath();\r\n        ctx.arc(p.x, p.y, Math.max(3, 9 * state.zoom), 0, Math.PI * 2);\r\n        ctx.fillStyle = '#0f172a';\r\n        ctx.fill();\r\n        ctx.strokeStyle = isSelected ? '#0098ff' : '#e2e8f0';\r\n        ctx.lineWidth = 2;\r\n        ctx.stroke();\r\n\r\n        ctx.beginPath();\r\n        ctx.arc(p.x, p.y, Math.max(1.5, 5 * state.zoom), 0, Math.PI * 2);\r\n        ctx.fillStyle = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\r\n        ctx.fill();\r\n\r\n        ctx.fillStyle = '#0f172a';\r\n        ctx.font = `bold ${Math.max(8, 9 * state.zoom)}px JetBrains Mono`;\r\n        ctx.textAlign = 'center';\r\n        ctx.fillText(`L${f.id}`, p.x, p.y - 12 * state.zoom);\r\n\r\n        ctx.restore();\r\n      }\r\n    }\r\n\r\n    function drawHoverSensor() {\r\n      const p = roomToScreen(state.hoverM.x, state.hoverM.y);\r\n      if (state.hoverM.x < 0 || state.hoverM.x > state.widthM || state.hoverM.y < 0 || state.hoverM.y > state.heightM) return;\r\n\r\n      const currentH = getWorkplaneHeightAt(state.hoverM.x, state.hoverM.y);\r\n      const lux = getTotalLuxAt(state.hoverM.x, state.hoverM.y, currentH);\r\n\r\n      ctx.save();\r\n      ctx.strokeStyle = '#d97706';\r\n      ctx.lineWidth = 1.5;\r\n      ctx.beginPath();\r\n      ctx.arc(p.x, p.y, 8, 0, Math.PI * 2);\r\n      ctx.moveTo(p.x - 12, p.y); ctx.lineTo(p.x + 12, p.y);\r\n      ctx.moveTo(p.x - 12, p.y); ctx.lineTo(p.x + 12, p.y);\r\n      ctx.stroke();\r\n\r\n      ctx.fillStyle = 'rgba(24, 24, 24, 0.95)';\r\n      ctx.strokeStyle = '#383838';\r\n      ctx.lineWidth = 1;\r\n      roundRect(ctx, p.x + 14, p.y - 24, 76, 26, 4, true, true);\r\n\r\n      ctx.fillStyle = '#fbbf24';\r\n      ctx.font = 'bold 10px JetBrains Mono';\r\n      ctx.textAlign = 'left';\r\n      ctx.fillText(`${Math.round(lux)} lx`, p.x + 20, p.y - 7);\r\n      ctx.restore();\r\n    }\r\n\r\n    function roundRect(ctx, x, y, width, height, radius, fill, stroke) {\r\n      ctx.beginPath();\r\n      ctx.moveTo(x + radius, y);\r\n      ctx.lineTo(x + width - radius, y);\r\n      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);\r\n      ctx.lineTo(x + width, y + height - radius);\r\n      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\r\n      ctx.lineTo(x + radius, y + height);\r\n      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);\r\n      ctx.lineTo(x, y + radius);\r\n      ctx.quadraticCurveTo(x, y, x + radius, y);\r\n      ctx.closePath();\r\n      if (fill) ctx.fill();\r\n      if (stroke) ctx.stroke();\r\n    }\r\n\r\n    function render() {\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n      drawFloorFinish();\r\n      drawFurnitureItems();\r\n      draw25DFurnitureShadows();\r\n      drawWallsAndDoors();\r\n\r\n      if (state.viewMode === 'realistic') {\r\n        drawRealisticLighting();\r\n      } else if (state.viewMode === 'heatmap') {\r\n        drawHeatmap();\r\n      }\r\n\r\n      drawFixtures();\r\n      drawHoverSensor();\r\n\r\n      recalculateMetrics();\r\n    }\r\n\r\n    function recalculateMetrics() {\r\n      let totalWatts = 0;\r\n      for (const f of state.fixtures) {\r\n        totalWatts += f.wattage * (f.dimmer \/ 100);\r\n      }\r\n\r\n      const areaM2 = state.widthM * state.heightM;\r\n      const lpd = totalWatts \/ areaM2;\r\n\r\n      let sumLux = 0;\r\n      let minLux = Infinity;\r\n      let count = 0;\r\n\r\n      const cols = 22;\r\n      const rows = 15;\r\n      for (let r = 0; r < rows; r++) {\r\n        const yM = (r \/ (rows - 1)) * (state.heightM - 0.6) + 0.3;\r\n        for (let c = 0; c < cols; c++) {\r\n          const xM = (c \/ (cols - 1)) * (state.widthM - 0.6) + 0.3;\r\n          const lux = getTotalLuxAt(xM, yM);\r\n          sumLux += lux;\r\n          if (lux < minLux) minLux = lux;\r\n          count++;\r\n        }\r\n      }\r\n\r\n      const avgLux = count > 0 ? sumLux \/ count : 0;\r\n      minLux = minLux === Infinity ? 0 : minLux;\r\n      const uniformity = avgLux > 0 ? (minLux \/ avgLux) : 0;\r\n\r\n      document.getElementById('statTotalWatts').textContent = `${Math.round(totalWatts)} W`;\r\n      document.getElementById('statLPD').textContent = `${lpd.toFixed(2)} W\/m\u00b2`;\r\n      document.getElementById('statAvgLux').textContent = `${Math.round(avgLux)} lx`;\r\n      document.getElementById('statUniformity').textContent = uniformity.toFixed(2);\r\n    }\r\n\r\n    \/\/ =========================================================================\r\n    \/\/ UI INSPECTOR & TOOLBAR CONTROLS\r\n    \/\/ =========================================================================\r\n\r\n    function updateInspectorUI() {\r\n      const emptyState = document.getElementById('inspectorEmptyState');\r\n      const fixtureGroup = document.getElementById('fixtureControlsGroup');\r\n      const furnGroup = document.getElementById('furnitureControlsGroup');\r\n      const tagLabel = document.getElementById('lblSelectionTag');\r\n\r\n      if (!state.selectedEntity) {\r\n        emptyState.classList.remove('hidden');\r\n        fixtureGroup.classList.add('hidden');\r\n        furnGroup.classList.add('hidden');\r\n        tagLabel.textContent = 'None';\r\n        return;\r\n      }\r\n\r\n      if (state.selectedEntity.type === 'fixture') {\r\n        emptyState.classList.add('hidden');\r\n        fixtureGroup.classList.remove('hidden');\r\n        furnGroup.classList.add('hidden');\r\n\r\n        const f = state.fixtures.find(fi => fi.id === state.selectedEntity.id);\r\n        if (f) {\r\n          tagLabel.textContent = `Light L${f.id} (${f.type.toUpperCase()})`;\r\n          document.getElementById('sliderWattage').value = f.wattage;\r\n          document.getElementById('lblWattage').textContent = `${f.wattage}W`;\r\n          document.getElementById('sliderBeam').value = f.beamAngle;\r\n          document.getElementById('lblBeam').textContent = `${f.beamAngle}\u00b0`;\r\n          document.getElementById('sliderCCT').value = f.cct;\r\n          document.getElementById('lblCCT').textContent = `${f.cct}K`;\r\n          document.getElementById('sliderDimmer').value = f.dimmer;\r\n          document.getElementById('lblDimmer').textContent = `${f.dimmer}%`;\r\n          document.getElementById('sliderHeightZ').value = f.mountZ;\r\n          document.getElementById('lblHeightZ').textContent = `${f.mountZ.toFixed(2)}m`;\r\n        }\r\n      } else if (state.selectedEntity.type === 'furniture') {\r\n        emptyState.classList.add('hidden');\r\n        fixtureGroup.classList.add('hidden');\r\n        furnGroup.classList.remove('hidden');\r\n\r\n        const fu = state.furniture.find(item => item.id === state.selectedEntity.id);\r\n        if (fu) {\r\n          tagLabel.textContent = fu.label || fu.type;\r\n          document.getElementById('lblFurnRotation').textContent = `${fu.rotation || 0}\u00b0`;\r\n          document.getElementById('sliderFurnHeight').value = fu.zHeight || 0.65;\r\n          document.getElementById('lblFurnHeight').textContent = `${(fu.zHeight || 0.65).toFixed(2)}m`;\r\n        }\r\n      }\r\n    }\r\n\r\n    function rotateActiveFurn(deltaDeg) {\r\n      if (!state.selectedEntity || state.selectedEntity.type !== 'furniture') return;\r\n      const fu = state.furniture.find(item => item.id === state.selectedEntity.id);\r\n      if (fu) {\r\n        fu.rotation = ((fu.rotation || 0) + deltaDeg) % 360;\r\n        updateInspectorUI();\r\n        render();\r\n      }\r\n    }\r\n\r\n    function setTool(toolName) {\r\n      state.activeTool = toolName;\r\n      document.querySelectorAll('[data-tool]').forEach(btn => {\r\n        btn.classList.toggle('active', btn.dataset.tool === toolName);\r\n      });\r\n\r\n      const tip = document.getElementById('hudActionTip');\r\n      if (toolName === 'select') tip.textContent = 'MOVE TOOL [V]';\r\n      if (toolName === 'wall') tip.textContent = 'PEN \/ WALL [W] (Click start, click end)';\r\n      if (toolName === 'door') tip.textContent = 'DOOR [D] (Click any wall)';\r\n      if (toolName === 'erase') tip.textContent = 'ERASER [X] (Click any entity)';\r\n    }\r\n\r\n    \/\/ Toggle popovers\r\n    document.getElementById('btnLightLibraryTrigger').addEventListener('click', (e) => {\r\n      e.stopPropagation();\r\n      document.getElementById('furniturePopover').classList.remove('show');\r\n      document.getElementById('luminairePopover').classList.toggle('show');\r\n    });\r\n\r\n    document.getElementById('btnFurniturePopoverTrigger').addEventListener('click', (e) => {\r\n      e.stopPropagation();\r\n      document.getElementById('luminairePopover').classList.remove('show');\r\n      document.getElementById('furniturePopover').classList.toggle('show');\r\n    });\r\n\r\n    window.addEventListener('click', (e) => {\r\n      if (!e.target.closest('.ps-popover') && !e.target.closest('#btnLightLibraryTrigger') && !e.target.closest('#btnFurniturePopoverTrigger')) {\r\n        closePopovers();\r\n      }\r\n    });\r\n\r\n    \/\/ Toggle Right Dock Panel for maximum viewport\r\n    const rightDock = document.getElementById('rightDockPanel');\r\n    const btnToggleRight = document.getElementById('btnToggleRightPanel');\r\n    const btnMinRight = document.getElementById('btnMinimizeRight');\r\n\r\n    function toggleRightPanel() {\r\n      const isHidden = rightDock.classList.contains('hidden');\r\n      if (isHidden) {\r\n        rightDock.classList.remove('hidden');\r\n        document.getElementById('lblToggleRight').textContent = 'Panels';\r\n      } else {\r\n        rightDock.classList.add('hidden');\r\n        document.getElementById('lblToggleRight').textContent = 'Show Panels';\r\n      }\r\n      setTimeout(() => {\r\n        resizeCanvas();\r\n      }, 50);\r\n    }\r\n\r\n    btnToggleRight.addEventListener('click', toggleRightPanel);\r\n    btnMinRight.addEventListener('click', toggleRightPanel);\r\n\r\n    \/\/ =========================================================================\r\n    \/\/ CANVAS POINTER INTERACTIONS & EVENT LISTENERS\r\n    \/\/ =========================================================================\r\n\r\n    function findEntityAtScreen(screenX, screenY) {\r\n      for (let i = state.fixtures.length - 1; i >= 0; i--) {\r\n        const f = state.fixtures[i];\r\n        const p = roomToScreen(f.x, f.y);\r\n        if (Math.hypot(p.x - screenX, p.y - screenY) <= 18) {\r\n          return { type: 'fixture', id: f.id, entity: f };\r\n        }\r\n      }\r\n\r\n      const roomPos = screenToRoom(screenX, screenY);\r\n      for (let i = state.furniture.length - 1; i >= 0; i--) {\r\n        const fu = state.furniture[i];\r\n        if (roomPos.x >= fu.x && roomPos.x <= fu.x + fu.w && roomPos.y >= fu.y && roomPos.y <= fu.y + fu.h) {\r\n          return { type: 'furniture', id: fu.id, entity: fu };\r\n        }\r\n      }\r\n\r\n      for (let i = state.walls.length - 1; i >= 0; i--) {\r\n        const w = state.walls[i];\r\n        const dx = w.x2 - w.x1;\r\n        const dy = w.y2 - w.y1;\r\n        const len = Math.hypot(dx, dy);\r\n        if (len < 0.1) continue;\r\n\r\n        const t = Math.max(0, Math.min(1, ((roomPos.x - w.x1) * dx + (roomPos.y - w.y1) * dy) \/ (len * len)));\r\n        const projX = w.x1 + t * dx;\r\n        const projY = w.y1 + t * dy;\r\n        if (Math.hypot(roomPos.x - projX, roomPos.y - projY) <= 0.3) {\r\n          return { type: 'wall', id: w.id, entity: w };\r\n        }\r\n      }\r\n\r\n      return null;\r\n    }\r\n\r\n    function onPointerDown(e) {\r\n      const rect = canvas.getBoundingClientRect();\r\n      const clientX = e.clientX || (e.touches && e.touches[0].clientX);\r\n      const clientY = e.clientY || (e.touches && e.touches[0].clientY);\r\n      const canvasX = clientX - rect.left;\r\n      const canvasY = clientY - rect.top;\r\n\r\n      if (e.button === 1 || e.button === 2 || e.altKey || (e.touches && e.touches.length === 2)) {\r\n        state.isPanning = true;\r\n        state.lastMouse = { x: canvasX, y: canvasY };\r\n        return;\r\n      }\r\n\r\n      const roomPos = screenToRoom(canvasX, canvasY);\r\n      const snapped = snapPoint(roomPos.x, roomPos.y);\r\n\r\n      if (state.activeTool === 'wall') {\r\n        if (!state.wallStart) {\r\n          state.wallStart = snapped;\r\n        } else {\r\n          if (Math.hypot(snapped.x - state.wallStart.x, snapped.y - state.wallStart.y) > 0.4) {\r\n            addWall(state.wallStart.x, state.wallStart.y, snapped.x, snapped.y);\r\n          }\r\n          state.wallStart = null;\r\n          state.tempWallEnd = null;\r\n          render();\r\n        }\r\n        return;\r\n      }\r\n\r\n      if (state.activeTool === 'door') {\r\n        addDoor(roomPos.x, roomPos.y, 0.9);\r\n        render();\r\n        return;\r\n      }\r\n\r\n      if (state.activeTool === 'erase') {\r\n        const hit = findEntityAtScreen(canvasX, canvasY);\r\n        if (hit) {\r\n          if (hit.type === 'fixture') state.fixtures = state.fixtures.filter(f => f.id !== hit.id);\r\n          if (hit.type === 'furniture') state.furniture = state.furniture.filter(f => f.id !== hit.id);\r\n          if (hit.type === 'wall') {\r\n            state.walls = state.walls.filter(w => w.id !== hit.id);\r\n            state.doors = state.doors.filter(d => d.wallId !== hit.id);\r\n          }\r\n          state.selectedEntity = null;\r\n          updateInspectorUI();\r\n          render();\r\n        }\r\n        return;\r\n      }\r\n\r\n      \/\/ Select \/ Move\r\n      const hit = findEntityAtScreen(canvasX, canvasY);\r\n      if (hit) {\r\n        state.selectedEntity = { type: hit.type, id: hit.id };\r\n        state.isDraggingEntity = true;\r\n\r\n        if (hit.type === 'fixture' || hit.type === 'furniture') {\r\n          state.dragOffset = { x: roomPos.x - hit.entity.x, y: roomPos.y - hit.entity.y };\r\n        }\r\n        updateInspectorUI();\r\n        render();\r\n      } else {\r\n        state.selectedEntity = null;\r\n        updateInspectorUI();\r\n        render();\r\n      }\r\n    }\r\n\r\n    function onPointerMove(e) {\r\n      const rect = canvas.getBoundingClientRect();\r\n      const clientX = e.clientX || (e.touches && e.touches[0].clientX);\r\n      const clientY = e.clientY || (e.touches && e.touches[0].clientY);\r\n      const canvasX = clientX - rect.left;\r\n      const canvasY = clientY - rect.top;\r\n\r\n      if (state.isPanning) {\r\n        state.pan.x += canvasX - state.lastMouse.x;\r\n        state.pan.y += canvasY - state.lastMouse.y;\r\n        state.lastMouse = { x: canvasX, y: canvasY };\r\n        render();\r\n        return;\r\n      }\r\n\r\n      const roomPos = screenToRoom(canvasX, canvasY);\r\n      state.hoverM = roomPos;\r\n\r\n      \/\/ Update Probe\r\n      if (roomPos.x >= 0 && roomPos.x <= state.widthM && roomPos.y >= 0 && roomPos.y <= state.heightM) {\r\n        const currentH = getWorkplaneHeightAt(roomPos.x, roomPos.y);\r\n        const lux = getTotalLuxAt(roomPos.x, roomPos.y, currentH);\r\n        const fc = lux * 0.092903;\r\n        document.getElementById('probeLux').textContent = `${Math.round(lux)} lx`;\r\n        document.getElementById('probeFc').textContent = `(${fc.toFixed(1)} fc)`;\r\n        document.getElementById('probeCoord').textContent = `X: ${roomPos.x.toFixed(1)}m Y: ${roomPos.y.toFixed(1)}m`;\r\n        document.getElementById('probeSurface').textContent = `${currentH > 0.05 ? 'Furniture' : 'White Tile'} (Z: ${currentH.toFixed(2)}m)`;\r\n      } else {\r\n        document.getElementById('probeLux').textContent = '-- lx';\r\n        document.getElementById('probeFc').textContent = '(-- fc)';\r\n      }\r\n\r\n      if (state.activeTool === 'wall' && state.wallStart) {\r\n        state.tempWallEnd = snapPoint(roomPos.x, roomPos.y);\r\n        render();\r\n        return;\r\n      }\r\n\r\n      if (state.isDraggingEntity && state.selectedEntity) {\r\n        if (state.selectedEntity.type === 'fixture') {\r\n          const f = state.fixtures.find(fi => fi.id === state.selectedEntity.id);\r\n          if (f) {\r\n            f.x = snap(Math.max(0.2, Math.min(state.widthM - 0.2, roomPos.x - state.dragOffset.x)));\r\n            f.y = snap(Math.max(0.2, Math.min(state.heightM - 0.2, roomPos.y - state.dragOffset.y)));\r\n            render();\r\n          }\r\n        } else if (state.selectedEntity.type === 'furniture') {\r\n          const fu = state.furniture.find(item => item.id === state.selectedEntity.id);\r\n          if (fu) {\r\n            fu.x = snap(Math.max(0, Math.min(state.widthM - fu.w, roomPos.x - state.dragOffset.x)));\r\n            fu.y = snap(Math.max(0, Math.min(state.heightM - fu.h, roomPos.y - state.dragOffset.y)));\r\n            render();\r\n          }\r\n        }\r\n      } else {\r\n        const hit = findEntityAtScreen(canvasX, canvasY);\r\n        canvas.style.cursor = hit ? 'grab' : (state.activeTool === 'wall' ? 'crosshair' : 'default');\r\n      }\r\n    }\r\n\r\n    function onPointerUp() {\r\n      state.isDraggingEntity = false;\r\n      state.isPanning = false;\r\n    }\r\n\r\n    canvas.addEventListener('mousedown', onPointerDown);\r\n    canvas.addEventListener('mousemove', onPointerMove);\r\n    window.addEventListener('mouseup', onPointerUp);\r\n    canvas.addEventListener('contextmenu', e => e.preventDefault());\r\n\r\n    canvas.addEventListener('touchstart', e => { onPointerDown(e); e.preventDefault(); }, { passive: false });\r\n    canvas.addEventListener('touchmove', e => { onPointerMove(e); e.preventDefault(); }, { passive: false });\r\n    window.addEventListener('touchend', onPointerUp);\r\n\r\n    canvas.addEventListener('wheel', e => {\r\n      e.preventDefault();\r\n      const zoomFactor = e.deltaY < 0 ? 1.08 : 0.92;\r\n      state.zoom = Math.max(0.4, Math.min(4.5, state.zoom * zoomFactor));\r\n      render();\r\n    }, { passive: false });\r\n\r\n    \/\/ Keyboard Shortcuts\r\n    window.addEventListener('keydown', e => {\r\n      if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;\r\n      if (e.key === 'v' || e.key === 'V') setTool('select');\r\n      if (e.key === 'w' || e.key === 'W') setTool('wall');\r\n      if (e.key === 'd' || e.key === 'D') setTool('door');\r\n      if (e.key === 'x' || e.key === 'X') setTool('erase');\r\n      if (e.key === 'Tab') {\r\n        e.preventDefault();\r\n        toggleRightPanel();\r\n      }\r\n      if (e.key === 'Delete' || e.key === 'Backspace') {\r\n        if (state.selectedEntity) {\r\n          if (state.selectedEntity.type === 'fixture') {\r\n            state.fixtures = state.fixtures.filter(f => f.id !== state.selectedEntity.id);\r\n          } else if (state.selectedEntity.type === 'furniture') {\r\n            state.furniture = state.furniture.filter(f => f.id !== state.selectedEntity.id);\r\n          }\r\n          state.selectedEntity = null;\r\n          updateInspectorUI();\r\n          render();\r\n        }\r\n      }\r\n    });\r\n\r\n    \/\/ Toolbar Tools Click\r\n    document.querySelectorAll('[data-tool]').forEach(btn => {\r\n      btn.addEventListener('click', () => setTool(btn.dataset.tool));\r\n    });\r\n\r\n    \/\/ Clear All\r\n    document.getElementById('btnClearAll').addEventListener('click', () => {\r\n      state.walls = [];\r\n      state.doors = [];\r\n      state.furniture = [];\r\n      state.fixtures = [];\r\n      state.selectedEntity = null;\r\n      updateInspectorUI();\r\n      render();\r\n    });\r\n\r\n    \/\/ Template Picker\r\n    document.getElementById('templateSelector').addEventListener('change', e => {\r\n      loadTemplate(e.target.value);\r\n    });\r\n\r\n    \/\/ Render Mode Toggles\r\n    const btnReal = document.getElementById('btnModeRealistic');\r\n    const btnHeat = document.getElementById('btnModeHeatmap');\r\n    const btnBlue = document.getElementById('btnModeBlueprint');\r\n    const heatLegend = document.getElementById('heatmapLegendBar');\r\n\r\n    btnReal.addEventListener('click', () => {\r\n      state.viewMode = 'realistic';\r\n      btnReal.className = 'px-2.5 py-1 rounded bg-[#007acc] text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      btnHeat.className = 'px-2.5 py-1 rounded text-neutral-400 hover:text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      btnBlue.className = 'px-2.5 py-1 rounded text-neutral-400 hover:text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      heatLegend.classList.add('hidden');\r\n      render();\r\n    });\r\n\r\n    btnHeat.addEventListener('click', () => {\r\n      state.viewMode = 'heatmap';\r\n      btnHeat.className = 'px-2.5 py-1 rounded bg-gradient-to-r from-amber-500 to-rose-600 text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      btnReal.className = 'px-2.5 py-1 rounded text-neutral-400 hover:text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      btnBlue.className = 'px-2.5 py-1 rounded text-neutral-400 hover:text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      heatLegend.classList.remove('hidden');\r\n      render();\r\n    });\r\n\r\n    btnBlue.addEventListener('click', () => {\r\n      state.viewMode = 'blueprint';\r\n      btnBlue.className = 'px-2.5 py-1 rounded bg-sky-700 text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      btnReal.className = 'px-2.5 py-1 rounded text-neutral-400 hover:text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      btnHeat.className = 'px-2.5 py-1 rounded text-neutral-400 hover:text-white font-medium flex items-center gap-1 transition text-[11px]';\r\n      heatLegend.classList.add('hidden');\r\n      render();\r\n    });\r\n\r\n    \/\/ Zoom Controls\r\n    document.getElementById('btnZoomIn').addEventListener('click', () => { state.zoom = Math.min(4.5, state.zoom * 1.2); render(); });\r\n    document.getElementById('btnZoomOut').addEventListener('click', () => { state.zoom = Math.max(0.4, state.zoom \/ 1.2); render(); });\r\n    document.getElementById('btnZoomFit').addEventListener('click', () => { state.zoom = 1.0; state.pan = { x: 0, y: 0 }; updateBaseTransform(); render(); });\r\n\r\n    \/\/ Grid Snap Toggle\r\n    const btnSnap = document.getElementById('btnSnapToggle');\r\n    btnSnap.addEventListener('click', () => {\r\n      state.snapToGrid = !state.snapToGrid;\r\n      btnSnap.classList.toggle('active', state.snapToGrid);\r\n      btnSnap.innerHTML = state.snapToGrid ? '<i class=\"fa-solid fa-magnet mr-1 text-cyan-400\"><\/i>Snap' : '<i class=\"fa-solid fa-magnet mr-1 text-neutral-500\"><\/i>Off';\r\n    });\r\n\r\n    \/\/ Right Inspector Sliders\r\n    document.getElementById('sliderWattage').addEventListener('input', e => {\r\n      if (state.selectedEntity?.type === 'fixture') {\r\n        const f = state.fixtures.find(fi => fi.id === state.selectedEntity.id);\r\n        if (f) { f.wattage = parseFloat(e.target.value); updateInspectorUI(); render(); }\r\n      }\r\n    });\r\n    document.getElementById('sliderBeam').addEventListener('input', e => {\r\n      if (state.selectedEntity?.type === 'fixture') {\r\n        const f = state.fixtures.find(fi => fi.id === state.selectedEntity.id);\r\n        if (f) { f.beamAngle = parseFloat(e.target.value); updateInspectorUI(); render(); }\r\n      }\r\n    });\r\n    document.getElementById('sliderCCT').addEventListener('input', e => {\r\n      if (state.selectedEntity?.type === 'fixture') {\r\n        const f = state.fixtures.find(fi => fi.id === state.selectedEntity.id);\r\n        if (f) { f.cct = parseInt(e.target.value); updateInspectorUI(); render(); }\r\n      }\r\n    });\r\n    document.getElementById('sliderDimmer').addEventListener('input', e => {\r\n      if (state.selectedEntity?.type === 'fixture') {\r\n        const f = state.fixtures.find(fi => fi.id === state.selectedEntity.id);\r\n        if (f) { f.dimmer = parseInt(e.target.value); updateInspectorUI(); render(); }\r\n      }\r\n    });\r\n    document.getElementById('sliderHeightZ').addEventListener('input', e => {\r\n      if (state.selectedEntity?.type === 'fixture') {\r\n        const f = state.fixtures.find(fi => fi.id === state.selectedEntity.id);\r\n        if (f) { f.mountZ = parseFloat(e.target.value); updateInspectorUI(); render(); }\r\n      }\r\n    });\r\n\r\n    \/\/ Furniture Height Slider\r\n    document.getElementById('sliderFurnHeight').addEventListener('input', e => {\r\n      if (state.selectedEntity?.type === 'furniture') {\r\n        const fu = state.furniture.find(item => item.id === state.selectedEntity.id);\r\n        if (fu) { fu.zHeight = parseFloat(e.target.value); updateInspectorUI(); render(); }\r\n      }\r\n    });\r\n\r\n    document.getElementById('btnDeleteActiveFixture').addEventListener('click', () => {\r\n      if (state.selectedEntity?.type === 'fixture') {\r\n        state.fixtures = state.fixtures.filter(f => f.id !== state.selectedEntity.id);\r\n        state.selectedEntity = null;\r\n        updateInspectorUI();\r\n        render();\r\n      }\r\n    });\r\n    document.getElementById('btnDeleteActiveFurniture').addEventListener('click', () => {\r\n      if (state.selectedEntity?.type === 'furniture') {\r\n        state.furniture = state.furniture.filter(f => f.id !== state.selectedEntity.id);\r\n        state.selectedEntity = null;\r\n        updateInspectorUI();\r\n        render();\r\n      }\r\n    });\r\n\r\n    \/\/ =========================================================================\r\n    \/\/ MULTI-PAGE PDF REPORT EXPORT\r\n    \/\/ =========================================================================\r\n\r\n    async function generatePDFReport() {\r\n      const btn = document.getElementById('btnGeneratePDF');\r\n      const originalHTML = btn.innerHTML;\r\n      btn.innerHTML = '<i class=\"fa-solid fa-spinner fa-spin\"><\/i> Rendering PDF...';\r\n      btn.classList.add('opacity-70', 'pointer-events-none');\r\n\r\n      try {\r\n        const { jsPDF } = window.jspdf;\r\n        const doc = new jsPDF('p', 'mm', 'a4');\r\n        const pdfWidth = doc.internal.pageSize.getWidth();\r\n        const pdfHeight = doc.internal.pageSize.getHeight();\r\n\r\n        \/\/ 1. Capture Realistic Render\r\n        const savedMode = state.viewMode;\r\n        state.viewMode = 'realistic';\r\n        render();\r\n        const realisticDataUrl = canvas.toDataURL('image\/jpeg', 0.95);\r\n\r\n        \/\/ 2. Capture Heatmap Render\r\n        state.viewMode = 'heatmap';\r\n        render();\r\n        const heatmapDataUrl = canvas.toDataURL('image\/jpeg', 0.95);\r\n\r\n        \/\/ Restore view\r\n        state.viewMode = savedMode;\r\n        render();\r\n\r\n        let totalWatts = 0;\r\n        let totalLumens = 0;\r\n        for (const f of state.fixtures) {\r\n          const w = f.wattage * (f.dimmer \/ 100);\r\n          totalWatts += w;\r\n          totalLumens += w * f.efficacy;\r\n        }\r\n        const areaM2 = state.widthM * state.heightM;\r\n        const areaSqft = areaM2 * 10.7639;\r\n        const lpd = totalWatts \/ areaM2;\r\n\r\n        let sumLux = 0;\r\n        let minLux = Infinity;\r\n        let maxLux = 0;\r\n        let count = 0;\r\n        for (let r = 0; r < 25; r++) {\r\n          const yM = (r \/ 24) * (state.heightM - 0.6) + 0.3;\r\n          for (let c = 0; c < 35; c++) {\r\n            const xM = (c \/ 34) * (state.widthM - 0.6) + 0.3;\r\n            const lux = getTotalLuxAt(xM, yM);\r\n            sumLux += lux;\r\n            if (lux < minLux) minLux = lux;\r\n            if (lux > maxLux) maxLux = lux;\r\n            count++;\r\n          }\r\n        }\r\n        const avgLux = count > 0 ? sumLux \/ count : 0;\r\n        minLux = minLux === Infinity ? 0 : minLux;\r\n        const uniformity = avgLux > 0 ? (minLux \/ avgLux) : 0;\r\n\r\n        \/\/ --- PAGE 1: Architectural Cover & Realistic Render ---\r\n        doc.setFillColor(33, 33, 33);\r\n        doc.rect(0, 0, pdfWidth, 38, 'F');\r\n\r\n        doc.setFont('helvetica', 'bold');\r\n        doc.setFontSize(16);\r\n        doc.setTextColor(255, 255, 255);\r\n        doc.text('ARCHILUX STUDIO | PHOTOMETRIC AUDIT REPORT', 14, 18);\r\n\r\n        doc.setFont('helvetica', 'normal');\r\n        doc.setFontSize(9);\r\n        doc.setTextColor(0, 152, 255);\r\n        doc.text(`PROJECT: Residential Lighting & Occlusion Simulation (${document.getElementById('templateSelector').selectedOptions[0].text})`, 14, 25);\r\n        doc.setTextColor(180, 180, 180);\r\n        doc.text(`Generated: ${new Date().toLocaleString()} | Standards: CIBSE SLL \/ IESNA RP-11`, 14, 31);\r\n\r\n        doc.setFont('helvetica', 'bold');\r\n        doc.setFontSize(11);\r\n        doc.setTextColor(20, 20, 20);\r\n        doc.text('1. Architectural Lighting & Depth Shadow Render', 14, 48);\r\n\r\n        const imgW = pdfWidth - 28;\r\n        const imgH = (canvas.height \/ canvas.width) * imgW;\r\n        doc.addImage(realisticDataUrl, 'JPEG', 14, 52, imgW, Math.min(imgH, 115));\r\n\r\n        const startY = 52 + Math.min(imgH, 115) + 10;\r\n        doc.setFont('helvetica', 'bold');\r\n        doc.setFontSize(11);\r\n        doc.text('2. Executive Energy & Compliance Summary', 14, startY);\r\n\r\n        doc.setDrawColor(226, 232, 240);\r\n        doc.setFillColor(248, 250, 252);\r\n        doc.rect(14, startY + 4, pdfWidth - 28, 55, 'FD');\r\n\r\n        doc.setFontSize(9);\r\n        doc.setTextColor(71, 85, 105);\r\n        const col1 = 20, col2 = 80, col3 = 135;\r\n        let ty = startY + 12;\r\n\r\n        doc.text(`Total Floor Footprint:`, col1, ty);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(15, 23, 42);\r\n        doc.text(`${areaSqft.toFixed(0)} SQFT (${areaM2.toFixed(1)} m\u00b2)`, col2, ty);\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Ceiling Height Z:`, col3, ty);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(15, 23, 42);\r\n        doc.text(`${state.ceilingZ} m`, col3 + 40, ty);\r\n\r\n        ty += 10;\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Connected Load (Watts):`, col1, ty);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(15, 23, 42);\r\n        doc.text(`${Math.round(totalWatts)} W`, col2, ty);\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Total Luminous Flux:`, col3, ty);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(15, 23, 42);\r\n        doc.text(`${Math.round(totalLumens)} lm`, col3 + 40, ty);\r\n\r\n        ty += 10;\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Lighting Power Density:`, col1, ty);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(lpd <= 7.5 ? 16 : 220, lpd <= 7.5 ? 185 : 38, lpd <= 7.5 ? 129 : 38);\r\n        doc.text(`${lpd.toFixed(2)} W\/m\u00b2 (Target: < 7.5 W\/m\u00b2)`, col2, ty);\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Energy Code Compliance:`, col3, ty);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(16, 185, 129);\r\n        doc.text(`PASS (ASHRAE 90.1)`, col3 + 40, ty);\r\n\r\n        ty += 10;\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Partition Wall Occlusion:`, col1, ty);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(15, 23, 42);\r\n        doc.text(`100% Raycast Visibility`, col2, ty);\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Fixtures Installed:`, col3, ty);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(15, 23, 42);\r\n        doc.text(`${state.fixtures.length} Luminaires`, col3 + 40, ty);\r\n\r\n        \/\/ --- PAGE 2: Photometric Heatmap & Illuminance Analysis ---\r\n        doc.addPage();\r\n        doc.setFillColor(33, 33, 33);\r\n        doc.rect(0, 0, pdfWidth, 24, 'F');\r\n        doc.setFont('helvetica', 'bold');\r\n        doc.setFontSize(13);\r\n        doc.setTextColor(255, 255, 255);\r\n        doc.text('PHOTOMETRIC HEATMAP & LUX UNIFORMITY AUDIT', 14, 16);\r\n\r\n        doc.setFontSize(11);\r\n        doc.setTextColor(15, 23, 42);\r\n        doc.text('3. False-Color Lux Illuminance Distribution', 14, 34);\r\n\r\n        doc.addImage(heatmapDataUrl, 'JPEG', 14, 38, imgW, Math.min(imgH, 115));\r\n\r\n        const startY2 = 38 + Math.min(imgH, 115) + 12;\r\n        doc.text('4. Workplane Photometric Performance', 14, startY2);\r\n\r\n        doc.setFillColor(248, 250, 252);\r\n        doc.rect(14, startY2 + 4, pdfWidth - 28, 48, 'FD');\r\n\r\n        let ty2 = startY2 + 12;\r\n        doc.setFontSize(9);\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Average Illuminance (E_avg):`, col1, ty2);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(217, 119, 6);\r\n        doc.text(`${Math.round(avgLux)} lx (${(avgLux * 0.0929).toFixed(1)} fc)`, col2, ty2);\r\n\r\n        ty2 += 9;\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Minimum Illuminance (E_min):`, col1, ty2);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(15, 23, 42);\r\n        doc.text(`${Math.round(minLux)} lx`, col2, ty2);\r\n\r\n        ty2 += 9;\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Maximum Illuminance (E_max):`, col1, ty2);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(15, 23, 42);\r\n        doc.text(`${Math.round(maxLux)} lx`, col2, ty2);\r\n\r\n        ty2 += 9;\r\n        doc.setFont('helvetica', 'normal'); doc.setTextColor(71, 85, 105);\r\n        doc.text(`Uniformity Ratio (U_0 = E_min \/ E_avg):`, col1, ty2);\r\n        doc.setFont('helvetica', 'bold'); doc.setTextColor(2, 132, 199);\r\n        doc.text(`${uniformity.toFixed(2)} (Standard: > 0.40)`, col2, ty2);\r\n\r\n        \/\/ --- PAGE 3: Luminaire Bill of Quantities (BOQ) ---\r\n        doc.addPage();\r\n        doc.setFillColor(33, 33, 33);\r\n        doc.rect(0, 0, pdfWidth, 24, 'F');\r\n        doc.setFont('helvetica', 'bold');\r\n        doc.setFontSize(13);\r\n        doc.setTextColor(255, 255, 255);\r\n        doc.text('LUMINAIRE SCHEDULE & BILL OF QUANTITIES (BOQ)', 14, 16);\r\n\r\n        doc.setFontSize(10);\r\n        doc.setTextColor(15, 23, 42);\r\n        doc.text('5. Itemized Lighting Specification Schedule', 14, 34);\r\n\r\n        let boqY = 40;\r\n        doc.setFillColor(38, 38, 38);\r\n        doc.rect(14, boqY, pdfWidth - 28, 8, 'F');\r\n\r\n        doc.setFontSize(8);\r\n        doc.setFont('helvetica', 'bold');\r\n        doc.setTextColor(255, 255, 255);\r\n        doc.text('ID', 17, boqY + 5.5);\r\n        doc.text('Type', 28, boqY + 5.5);\r\n        doc.text('Wattage', 68, boqY + 5.5);\r\n        doc.text('Beam', 92, boqY + 5.5);\r\n        doc.text('CCT', 112, boqY + 5.5);\r\n        doc.text('Dimmer', 132, boqY + 5.5);\r\n        doc.text('Mount Z', 152, boqY + 5.5);\r\n        doc.text('Position (X,Y)', 174, boqY + 5.5);\r\n\r\n        boqY += 8;\r\n        doc.setFont('helvetica', 'normal');\r\n        doc.setFontSize(8);\r\n\r\n        state.fixtures.forEach((f, idx) => {\r\n          doc.setFillColor(idx % 2 === 0 ? 255 : 248, idx % 2 === 0 ? 255 : 250, idx % 2 === 0 ? 255 : 252);\r\n          doc.rect(14, boqY, pdfWidth - 28, 7, 'F');\r\n          doc.setDrawColor(226, 232, 240);\r\n          doc.line(14, boqY + 7, pdfWidth - 14, boqY + 7);\r\n\r\n          doc.setTextColor(15, 23, 42);\r\n          doc.text(`L${f.id}`, 17, boqY + 5);\r\n          doc.text(`${f.type.toUpperCase()}`, 28, boqY + 5);\r\n          doc.text(`${f.wattage} W`, 68, boqY + 5);\r\n          doc.text(`${f.beamAngle}\u00b0`, 92, boqY + 5);\r\n          doc.text(`${f.cct} K`, 112, boqY + 5);\r\n          doc.text(`${f.dimmer}%`, 132, boqY + 5);\r\n          doc.text(`${f.mountZ.toFixed(2)} m`, 152, boqY + 5);\r\n          doc.text(`${f.x.toFixed(1)}m, ${f.y.toFixed(1)}m`, 174, boqY + 5);\r\n\r\n          boqY += 7;\r\n        });\r\n\r\n        const signY = 240;\r\n        doc.setDrawColor(203, 213, 225);\r\n        doc.line(20, signY, 80, signY);\r\n        doc.line(120, signY, 180, signY);\r\n\r\n        doc.setFontSize(8);\r\n        doc.setTextColor(100, 116, 139);\r\n        doc.text('Certified Architectural Lighting Designer', 20, signY + 5);\r\n        doc.text('Electrical Engineer Approval', 120, signY + 5);\r\n\r\n        doc.save(`ARCHILUX_Report_${document.getElementById('templateSelector').value}_${Date.now()}.pdf`);\r\n      } catch (err) {\r\n        console.error('PDF Generation Failed:', err);\r\n      } finally {\r\n        btn.innerHTML = originalHTML;\r\n        btn.classList.remove('opacity-70', 'pointer-events-none');\r\n      }\r\n    }\r\n\r\n    document.getElementById('btnGeneratePDF').addEventListener('click', generatePDFReport);\r\n\r\n    \/\/ =========================================================================\r\n    \/\/ RESPONSIVE RESIZE & INITIALIZATION\r\n    \/\/ =========================================================================\r\n\r\n    function resizeCanvas() {\r\n      const rect = mainEl.getBoundingClientRect();\r\n      const dpr = window.devicePixelRatio || 1;\r\n      canvas.width = rect.width * dpr;\r\n      canvas.height = rect.height * dpr;\r\n      ctx.resetTransform?.();\r\n      ctx.scale(dpr, dpr);\r\n      canvas.style.width = `${rect.width}px`;\r\n      canvas.style.height = `${rect.height}px`;\r\n\r\n      updateBaseTransform();\r\n      render();\r\n    }\r\n\r\n    window.addEventListener('resize', resizeCanvas);\r\n    window.onload = () => {\r\n      resizeCanvas();\r\n      loadTemplate('threeBedDream');\r\n    };\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-33f9de1 e-flex e-con-boxed e-con e-parent\" data-id=\"33f9de1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>ARCHILUX PRO | Photoshop-Style Architectural Lighting Studio Ps ARCHILUX CC Flat: 3-Bed Luxury Villa (9.35m \u00d7 16.25m &#8211; Dream House)2-Bed Modern Home (Maramani ID 12209)1-Bed Urban Flat (Maramani ID 11104)Luxury Master Suite (16&#8242; \u00d7 15&#8242; + Walk-in Wardrobe)Custom Empty Flat (Freeform Drawing) 3 Beds | 1 Living | 1 Dining | 3 Baths Realistic Lux [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-15365","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v28.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Elementor #15365 - Hondel Lighting Limited<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hondellighting.com\/ar\/elementor-15365.html\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor #15365\" \/>\n<meta property=\"og:description\" content=\"ARCHILUX PRO | Photoshop-Style Architectural Lighting Studio Ps ARCHILUX CC Flat: 3-Bed Luxury Villa (9.35m \u00d7 16.25m &#8211; Dream House)2-Bed Modern Home (Maramani ID 12209)1-Bed Urban Flat (Maramani ID 11104)Luxury Master Suite (16&#8242; \u00d7 15&#8242; + Walk-in Wardrobe)Custom Empty Flat (Freeform Drawing) 3 Beds | 1 Living | 1 Dining | 3 Baths Realistic Lux [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hondellighting.com\/ar\/elementor-15365.html\/\" \/>\n<meta property=\"og:site_name\" content=\"Hondel Lighting Limited\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-17T02:52:21+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hondellighting.com\\\/elementor-15365.html\",\"url\":\"https:\\\/\\\/hondellighting.com\\\/elementor-15365.html\",\"name\":\"Elementor #15365 - Hondel Lighting Limited\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hondellighting.com\\\/#website\"},\"datePublished\":\"2026-10-17T02:18:34+00:00\",\"dateModified\":\"2026-10-17T02:52:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hondellighting.com\\\/elementor-15365.html#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hondellighting.com\\\/elementor-15365.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hondellighting.com\\\/elementor-15365.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hondellighting.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor #15365\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hondellighting.com\\\/#website\",\"url\":\"https:\\\/\\\/hondellighting.com\\\/\",\"name\":\"Hondel Lighting\",\"description\":\"Facade Lighting Manufacturer\",\"publisher\":{\"@id\":\"https:\\\/\\\/hondellighting.com\\\/#organization\"},\"alternateName\":\"Hondel\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hondellighting.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hondellighting.com\\\/#organization\",\"name\":\"Hondel Lighting Limited\",\"url\":\"https:\\\/\\\/hondellighting.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/hondellighting.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hondellighting.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/hondel-logo-black-png.png\",\"contentUrl\":\"https:\\\/\\\/hondellighting.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/hondel-logo-black-png.png\",\"width\":86,\"height\":40,\"caption\":\"Hondel Lighting Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/hondellighting.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Elementor #15365 - Hondel Lighting Limited","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hondellighting.com\/ar\/elementor-15365.html\/","og_locale":"ar_AR","og_type":"article","og_title":"Elementor #15365","og_description":"ARCHILUX PRO | Photoshop-Style Architectural Lighting Studio Ps ARCHILUX CC Flat: 3-Bed Luxury Villa (9.35m \u00d7 16.25m &#8211; Dream House)2-Bed Modern Home (Maramani ID 12209)1-Bed Urban Flat (Maramani ID 11104)Luxury Master Suite (16&#8242; \u00d7 15&#8242; + Walk-in Wardrobe)Custom Empty Flat (Freeform Drawing) 3 Beds | 1 Living | 1 Dining | 3 Baths Realistic Lux [&hellip;]","og_url":"https:\/\/hondellighting.com\/ar\/elementor-15365.html\/","og_site_name":"Hondel Lighting Limited","article_modified_time":"2026-10-17T02:52:21+00:00","twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hondellighting.com\/elementor-15365.html","url":"https:\/\/hondellighting.com\/elementor-15365.html","name":"Elementor #15365 - Hondel Lighting Limited","isPartOf":{"@id":"https:\/\/hondellighting.com\/#website"},"datePublished":"2026-10-17T02:18:34+00:00","dateModified":"2026-10-17T02:52:21+00:00","breadcrumb":{"@id":"https:\/\/hondellighting.com\/elementor-15365.html#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hondellighting.com\/elementor-15365.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hondellighting.com\/elementor-15365.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hondellighting.com\/"},{"@type":"ListItem","position":2,"name":"Elementor #15365"}]},{"@type":"WebSite","@id":"https:\/\/hondellighting.com\/#website","url":"https:\/\/hondellighting.com\/","name":"Hondel Lighting","description":"Facade Lighting Manufacturer","publisher":{"@id":"https:\/\/hondellighting.com\/#organization"},"alternateName":"Hondel","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hondellighting.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/hondellighting.com\/#organization","name":"Hondel Lighting Limited","url":"https:\/\/hondellighting.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/hondellighting.com\/#\/schema\/logo\/image\/","url":"https:\/\/hondellighting.com\/wp-content\/uploads\/2023\/10\/hondel-logo-black-png.png","contentUrl":"https:\/\/hondellighting.com\/wp-content\/uploads\/2023\/10\/hondel-logo-black-png.png","width":86,"height":40,"caption":"Hondel Lighting Limited"},"image":{"@id":"https:\/\/hondellighting.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hondellighting.com\/ar\/wp-json\/wp\/v2\/pages\/15365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hondellighting.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hondellighting.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hondellighting.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hondellighting.com\/ar\/wp-json\/wp\/v2\/comments?post=15365"}],"version-history":[{"count":5,"href":"https:\/\/hondellighting.com\/ar\/wp-json\/wp\/v2\/pages\/15365\/revisions"}],"predecessor-version":[{"id":15370,"href":"https:\/\/hondellighting.com\/ar\/wp-json\/wp\/v2\/pages\/15365\/revisions\/15370"}],"wp:attachment":[{"href":"https:\/\/hondellighting.com\/ar\/wp-json\/wp\/v2\/media?parent=15365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}