@jjlmoya/utils-home 1.31.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-home",
-    "version": "1.31.0",
+    "version": "1.33.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -44,6 +44,7 @@
         "@jjlmoya/utils-shared": "1.2.0",
         "astro": "^6.1.2",
         "astro-icon": "^1.1.0",
+        "jspdf": "^4.2.1",
         "qrcode": "^1.5.4"
     },
     "devDependencies": {

package/src/entries.ts

@@ -26,6 +26,8 @@ export { applianceCostCalculator } from './tool/applianceCostCalculator/entry';
 export type { ApplianceCostCalculatorLocaleContent } from './tool/applianceCostCalculator/entry';
 export { tileLayoutCalculator } from './tool/tileLayoutCalculator/entry';
 export type { TileLayoutCalculatorLocaleContent } from './tool/tileLayoutCalculator/entry';
+export { lightingCalculator } from './tool/lightingCalculator/entry';
+export type { LightingCalculatorLocaleContent } from './tool/lightingCalculator/entry';
 export { homeCategory } from './category';
 import { dewPointCalculator } from './tool/dewPointCalculator/entry';
 import { heatingComparator } from './tool/heatingComparator/entry';
@@ -41,4 +43,5 @@ import { vampireDrawSimulator } from './tool/vampireDrawSimulator/entry';
 import { deskErgonomics } from './tool/deskErgonomics/entry';
 import { applianceCostCalculator } from './tool/applianceCostCalculator/entry';
 import { tileLayoutCalculator } from './tool/tileLayoutCalculator/entry';
-export const ALL_ENTRIES = [dewPointCalculator, heatingComparator, ledSavingCalculator, projectorCalculator, qrGenerator, solarCalculator, tariffComparator, wifiRangeSimulator, acTonnageCalculator, wallPaintingCalculator, vampireDrawSimulator, deskErgonomics, applianceCostCalculator, tileLayoutCalculator];
+import { lightingCalculator } from './tool/lightingCalculator/entry';
+export const ALL_ENTRIES = [dewPointCalculator, heatingComparator, ledSavingCalculator, projectorCalculator, qrGenerator, solarCalculator, tariffComparator, wifiRangeSimulator, acTonnageCalculator, wallPaintingCalculator, vampireDrawSimulator, deskErgonomics, applianceCostCalculator, tileLayoutCalculator, lightingCalculator];

package/src/tests/locale_completeness.test.ts

@@ -17,8 +17,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('should have 14 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(14);
+  it('should have 15 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(15);
   });
 });
 

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { homeCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 14 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(14);
+    it('should have 15 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(15);
     });
 
     it('homeCategory should be defined', () => {

package/src/tool/lightingCalculator/bibliography.astro

@@ -0,0 +1,36 @@
+---
+import type { BibliographyEntry } from '../../types';
+import { bibliography } from './bibliography';
+
+interface Props {
+  title?: string;
+  links?: BibliographyEntry[];
+}
+
+const { links = bibliography } = Astro.props;
+---
+
+<ul class="lighting-bibliography">
+  {links.map((link) => (
+    <li>
+      <a href={link.url} target="_blank" rel="noopener noreferrer">
+        {link.name}
+      </a>
+    </li>
+  ))}
+</ul>
+
+<style>
+  .lighting-bibliography {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .lighting-bibliography li {
+    margin-bottom: 0.5rem;
+  }
+  .lighting-bibliography a {
+    color: var(--text-primary);
+    text-decoration: underline;
+  }
+</style>

package/src/tool/lightingCalculator/bibliography.ts

@@ -0,0 +1,10 @@
+export const bibliography = [
+  {
+    name: 'IES Lighting Handbook 10th Edition',
+    url: 'https://www.ies.org/publications/ies-lighting-handbook/',
+  },
+  {
+    name: 'EN 12464-1:2021 Light and Lighting - Indoor Work Places',
+    url: 'https://standards.cencenelec.eu/',
+  },
+];

package/src/tool/lightingCalculator/component.astro

@@ -0,0 +1,308 @@
+---
+import type { LightingCalculatorUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui = {} } = Astro.props;
+const lUI = ui as LightingCalculatorUI;
+
+const INIT_R_W = 4, INIT_R_L = 5, INIT_H = 2.7, INIT_W = 9, INIT_F = 6;
+---
+
+<div class="lc-wrap">
+  <div class="lc-card">
+    <div class="lc-head">
+      <span class="lc-title">{lUI.sectionTitle}</span>
+      <div class="lc-unit-toggle">
+        <button class="lc-unit-btn lc-unit-active" data-unit="metric">{lUI.btnMetric}</button>
+        <button class="lc-unit-btn" data-unit="imperial">{lUI.btnImperial}</button>
+      </div>
+    </div>
+    <div class="lc-row">
+      <div class="lc-input-group">
+        <label class="lc-input-label" for="lc-w">{lUI.labelRoomWidth}</label>
+        <div class="lc-input-wrap">
+          <input id="lc-w" type="number" value={INIT_R_W} min="0.1" max="50" step="0.1" class="lc-input" />
+          <span class="lc-input-unit" id="lc-w-u">{lUI.unitMetricRoom}</span>
+        </div>
+      </div>
+      <div class="lc-input-group">
+        <label class="lc-input-label" for="lc-l">{lUI.labelRoomLength}</label>
+        <div class="lc-input-wrap">
+          <input id="lc-l" type="number" value={INIT_R_L} min="0.1" max="50" step="0.1" class="lc-input" />
+          <span class="lc-input-unit" id="lc-l-u">{lUI.unitMetricRoom}</span>
+        </div>
+      </div>
+      <div class="lc-input-group">
+        <label class="lc-input-label" for="lc-h">{lUI.labelHeight}</label>
+        <div class="lc-input-wrap">
+          <input id="lc-h" type="number" value={INIT_H} min="1.5" max="10" step="0.1" class="lc-input" />
+          <span class="lc-input-unit" id="lc-h-u">{lUI.unitHeight}</span>
+        </div>
+      </div>
+    </div>
+    <div class="lc-row">
+      <div class="lc-chips">
+        <button class="lc-chip lc-chip-active" data-room="living">
+          <svg class="lc-chip-icon" viewBox="0 0 24 24"><path d="M7 6h10v3h-2V7H9v2H7V6zm-2 5h14v8h-2v-6H9v6H7v-8z"/></svg>
+          <span>{lUI.btnLiving}</span>
+        </button>
+        <button class="lc-chip" data-room="kitchen">
+          <svg class="lc-chip-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+          <span>{lUI.btnKitchen}</span>
+        </button>
+        <button class="lc-chip" data-room="bedroom">
+          <svg class="lc-chip-icon" viewBox="0 0 24 24"><path d="M7 14c1.66 0 3-1.34 3-3S8.66 8 7 8s-3 1.34-3 3 1.34 3 3 3zm12-3c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3zm-3 4H7c-2.21 0-4 1.79-4 4v2h16v-2c0-2.21-1.79-4-4-4z"/></svg>
+          <span>{lUI.btnBedroom}</span>
+        </button>
+        <button class="lc-chip" data-room="bathroom">
+          <svg class="lc-chip-icon" viewBox="0 0 24 24"><path d="M7 7c0-2.21 1.79-4 4-4s4 1.79 4 4v3H7V7zm12 4H5v8c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-8z"/></svg>
+          <span>{lUI.btnBathroom}</span>
+        </button>
+        <button class="lc-chip" data-room="office">
+          <svg class="lc-chip-icon" viewBox="0 0 24 24"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM4 5h16v11H4V5z"/></svg>
+          <span>{lUI.btnOffice}</span>
+        </button>
+        <button class="lc-chip" data-room="hallway">
+          <svg class="lc-chip-icon" viewBox="0 0 24 24"><path d="M19 19V5c0-1.1-.9-2-2-2H7c-1.1 0-2 .9-2 2v14H3v2h18v-2h-2zm-2 0H7V5h10v14z"/></svg>
+          <span>{lUI.btnHallway}</span>
+        </button>
+      </div>
+    </div>
+    <div class="lc-row">
+      <div class="lc-input-group">
+        <label class="lc-input-label">{lUI.labelAmbient}</label>
+        <div class="lc-bulb-bar">
+          <button class="lc-ambient-btn" data-ambient="0.7">{lUI.btnAmbientCozy}</button>
+          <button class="lc-ambient-btn lc-ambient-active" data-ambient="1">{lUI.btnAmbientNormal}</button>
+          <button class="lc-ambient-btn" data-ambient="1.3">{lUI.btnAmbientBright}</button>
+        </div>
+      </div>
+      <div class="lc-input-group lc-grow">
+        <label class="lc-input-label">{lUI.labelBulbType}</label>
+        <div class="lc-bulb-bar">
+          <button class="lc-bulb lc-bulb-active" data-bulb="led">
+            <span class="lc-bulb-dot" style="background:#22c55e;box-shadow:0 0 8px #22c55e"></span>
+            <span>{lUI.btnBulbLED}</span>
+          </button>
+          <button class="lc-bulb" data-bulb="cfl">
+            <span class="lc-bulb-dot" style="background:#f59e0b;box-shadow:0 0 8px #f59e0b"></span>
+            <span>{lUI.btnBulbCFL}</span>
+          </button>
+          <button class="lc-bulb" data-bulb="halogen">
+            <span class="lc-bulb-dot" style="background:#f97316;box-shadow:0 0 8px #f97316"></span>
+            <span>{lUI.btnBulbHalogen}</span>
+          </button>
+          <button class="lc-bulb" data-bulb="incandescent">
+            <span class="lc-bulb-dot" style="background:#ef4444;box-shadow:0 0 8px #ef4444"></span>
+            <span>{lUI.btnBulbIncandescent}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="lc-plan-wrap" id="lc-plan-wrap">
+      <svg class="lc-plan" viewBox="0 0 300 200" id="lc-plan"></svg>
+    </div>
+    <div class="lc-dial-row">
+      <div class="lc-dial-wrap">
+        <svg class="lc-dial" viewBox="0 0 120 70" id="lc-dial-lux"></svg>
+        <span class="lc-dial-label">{lUI.labelCurrentLux}</span>
+      </div>
+    </div>
+    <div class="lc-status" id="lc-status">
+      <span class="lc-status-dot" id="lc-status-dot"></span>
+      <div class="lc-status-body">
+        <span class="lc-status-text" id="lc-status-text">{lUI.statusOptimal}</span>
+        <span class="lc-status-desc" id="lc-status-desc"></span>
+      </div>
+    </div>
+    <div class="lc-victory" id="lc-victory">
+      <div class="lc-victory-title">{lUI.labelSummary}</div>
+      <div class="lc-victory-row">
+        <span class="lc-victory-label">{lUI.labelTotalLumens}</span>
+        <span class="lc-victory-value" id="lc-v-lumens">0</span>
+      </div>
+      <div class="lc-victory-row">
+        <span class="lc-victory-label">{lUI.labelSuggestedSetup}</span>
+        <span class="lc-victory-value" id="lc-v-setup">-</span>
+      </div>
+      <button class="lc-export-btn" id="lc-export">{lUI.btnExport}</button>
+    </div>
+    <div class="lc-manual-toggle" id="lc-manual-toggle">
+      <svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
+      {lUI.labelManualAdjust}
+    </div>
+    <div class="lc-manual" id="lc-manual">
+      <div class="lc-row">
+        <div class="lc-input-group">
+          <label class="lc-input-label" for="lc-bw">{lUI.labelBulbWatt}</label>
+          <div class="lc-input-wrap">
+            <input id="lc-bw" type="number" value={INIT_W} min="1" max="200" step="1" class="lc-input" />
+            <span class="lc-input-unit">{lUI.unitWatt}</span>
+          </div>
+        </div>
+        <div class="lc-input-group">
+          <label class="lc-input-label" for="lc-f">{lUI.labelFixtures}</label>
+          <div class="lc-input-wrap">
+            <input id="lc-f" type="number" value={INIT_F} min="1" max="50" step="1" class="lc-input" />
+            <span class="lc-input-unit">{lUI.unitBulbs}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { loadState, saveState, restoreInputs, runCalc, updateUnitLabels, convertValue } from './state';
+  import { drawPlan, drawDial, generatePDF } from './draw';
+  import type { State } from './state';
+  import type { LightingResult } from './logic';
+
+  const st: State = loadState();
+
+  function el(id: string) { return document.getElementById(id); }
+  function setTxt(id: string, v: string) { const e = el(id); if (e) e.textContent = v; }
+  function getNum(id: string): number { const e = el(id) as HTMLInputElement | null; return e ? parseFloat(e.value) || 0 : 0; }
+  function setVal(id: string, v: string) { const e = el(id) as HTMLInputElement | null; if (e) e.value = v; }
+
+  function updateStatus(r: LightingResult) {
+    const statusEl = el('lc-status');
+    const stText = el('lc-status-text');
+    const stDesc = el('lc-status-desc');
+    const planWrap = el('lc-plan-wrap');
+    if (statusEl) statusEl.className = 'lc-status ' + r.status;
+    if (planWrap) planWrap.className = 'lc-plan-wrap ' + r.status;
+    if (stText) {
+      if (r.status === 'optimal') stText.textContent = 'Perfect';
+      else if (r.status === 'insufficient') stText.textContent = 'Too Dim';
+      else stText.textContent = 'Too Bright';
+    }
+    if (stDesc) stDesc.textContent = r.sensoryContext;
+  }
+
+  function updateVictory(r: LightingResult) {
+    setTxt('lc-v-lumens', String(r.requiredLumens));
+    setTxt('lc-v-setup', r.suggestedProducts);
+  }
+
+  function render() {
+    const r = runCalc(st, getNum);
+    const f = st.unitSys === 'metric' ? 1 : 0.3048;
+    const w = getNum('lc-w') * f;
+    const l = getNum('lc-l') * f;
+    const plan = el('lc-plan') as SVGSVGElement | null;
+    if (plan) drawPlan(plan, { widthM: w, lengthM: l, optimalBulbs: r.optimalBulbs, luxRatio: r.luxRatio, ambiance: st.luxMultiplier, status: r.status });
+    const maxDial = Math.max(r.targetLux, r.currentLux) * 1.2;
+    const dialLux = el('lc-dial-lux') as SVGSVGElement | null;
+    if (dialLux) drawDial(dialLux, { value: r.currentLux, target: r.targetLux, max: maxDial, label: 'LUX' });
+    updateStatus(r);
+    updateVictory(r);
+  }
+
+  function persist() { saveState(st, getNum); }
+
+  function applyUnit(s: 'metric' | 'imperial') {
+    st.unitSys = s;
+    persist();
+    document.querySelectorAll('.lc-unit-btn').forEach((b) => b.classList.toggle('lc-unit-active', (b as HTMLElement).dataset.unit === s));
+    const toMetric = s === 'metric';
+    convertValue('lc-w', getNum, setVal, toMetric);
+    convertValue('lc-l', getNum, setVal, toMetric);
+    convertValue('lc-h', getNum, setVal, toMetric);
+    updateUnitLabels(st.unitSys, setTxt);
+    render();
+  }
+
+  function setRoom(type: string) {
+    st.roomType = type;
+    persist();
+    document.querySelectorAll('.lc-chip').forEach((b) => b.classList.toggle('lc-chip-active', (b as HTMLElement).dataset.room === type));
+    render();
+  }
+
+  function setBulb(type: string) {
+    st.bulbType = type;
+    persist();
+    document.querySelectorAll('.lc-bulb').forEach((b) => b.classList.toggle('lc-bulb-active', (b as HTMLElement).dataset.bulb === type));
+    render();
+  }
+
+  function setAmbient(m: string) {
+    st.luxMultiplier = parseFloat(m);
+    persist();
+    document.querySelectorAll('.lc-ambient-btn').forEach((b) => b.classList.toggle('lc-ambient-active', (b as HTMLElement).dataset.ambient === m));
+    render();
+  }
+
+  function init() {
+    restoreInputs(getNum, setVal);
+    updateUnitLabels(st.unitSys, setTxt);
+    document.querySelectorAll('.lc-unit-btn').forEach((b) => b.classList.toggle('lc-unit-active', (b as HTMLElement).dataset.unit === st.unitSys));
+    document.querySelectorAll('.lc-chip').forEach((b) => b.classList.toggle('lc-chip-active', (b as HTMLElement).dataset.room === st.roomType));
+    document.querySelectorAll('.lc-bulb').forEach((b) => b.classList.toggle('lc-bulb-active', (b as HTMLElement).dataset.bulb === st.bulbType));
+    document.querySelectorAll('.lc-ambient-btn').forEach((b) => b.classList.toggle('lc-ambient-active', (b as HTMLElement).dataset.ambient === String(st.luxMultiplier)));
+    const fInput = el('lc-f') as HTMLInputElement | null;
+    if (fInput && !fInput.value) {
+      const calc = runCalc(st, getNum);
+      setVal('lc-f', String(calc.optimalBulbs));
+    }
+    document.querySelectorAll('.lc-unit-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const u = (btn as HTMLElement).dataset.unit as 'metric' | 'imperial';
+        if (u) applyUnit(u);
+      });
+    });
+    document.querySelectorAll('.lc-chip').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const t = (btn as HTMLElement).dataset.room || 'living';
+        setRoom(t);
+      });
+    });
+    document.querySelectorAll('.lc-bulb').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const t = (btn as HTMLElement).dataset.bulb || 'led';
+        setBulb(t);
+      });
+    });
+    document.querySelectorAll('.lc-ambient-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const m = (btn as HTMLElement).dataset.ambient || '1';
+        setAmbient(m);
+      });
+    });
+    ['lc-w', 'lc-l', 'lc-h', 'lc-bw', 'lc-f'].forEach((id) => {
+      const e = el(id);
+      if (e) e.addEventListener('input', () => { persist(); render(); });
+    });
+    const manualToggle = el('lc-manual-toggle');
+    const manual = el('lc-manual');
+    if (manualToggle && manual) {
+      manualToggle.addEventListener('click', () => {
+        manual.classList.toggle('lc-manual-open');
+      });
+    }
+    const exportBtn = el('lc-export');
+    if (exportBtn) {
+      exportBtn.addEventListener('click', () => {
+        const r = runCalc(st, getNum);
+        const unitLabel = st.unitSys === 'metric' ? 'm' : 'ft';
+        generatePDF({
+          roomType: st.roomType,
+          width: getNum('lc-w'),
+          length: getNum('lc-l'),
+          height: getNum('lc-h'),
+          r,
+          unitSys: st.unitSys,
+          unitLabel,
+        });
+      });
+    }
+    render();
+  }
+
+  document.addEventListener('astro:page-load', init);
+  init();
+</script>

package/src/tool/lightingCalculator/draw.ts

@@ -0,0 +1,247 @@
+import type { LightingResult } from './logic';
+
+interface PlanConfig {
+  widthM: number;
+  lengthM: number;
+  optimalBulbs: number;
+  luxRatio: number;
+  ambiance: number;
+  status: 'optimal' | 'insufficient' | 'excess';
+}
+
+interface DialConfig {
+  value: number;
+  target: number;
+  max: number;
+  label: string;
+}
+
+function addRect(svg: SVGSVGElement, cfg: { x: number; y: number; w: number; h: number; fill: string; stroke: string; strokeWidth: number }) {
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('x', String(cfg.x));
+  rect.setAttribute('y', String(cfg.y));
+  rect.setAttribute('width', String(cfg.w));
+  rect.setAttribute('height', String(cfg.h));
+  rect.setAttribute('rx', '16');
+  rect.setAttribute('fill', cfg.fill);
+  rect.setAttribute('stroke', cfg.stroke);
+  rect.setAttribute('stroke-width', String(cfg.strokeWidth));
+  svg.appendChild(rect);
+}
+
+function addGlow(svg: SVGSVGElement, cfg: { cx: number; cy: number; color: string; opacity: number; luxRatio: number; ambiance: number }) {
+  const radius = (6 + cfg.luxRatio * 18) * cfg.ambiance;
+  const gradientId = `glow-${cfg.cx}-${cfg.cy}`.replace(/\./g, '_');
+  const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+  const radial = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
+  radial.setAttribute('id', gradientId);
+  radial.setAttribute('cx', '50%');
+  radial.setAttribute('cy', '50%');
+  radial.setAttribute('r', '50%');
+  const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+  stop1.setAttribute('offset', '0%');
+  stop1.setAttribute('stop-color', cfg.color);
+  stop1.setAttribute('stop-opacity', String(cfg.opacity * 0.6));
+  const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+  stop2.setAttribute('offset', '100%');
+  stop2.setAttribute('stop-color', cfg.color);
+  stop2.setAttribute('stop-opacity', '0');
+  radial.appendChild(stop1);
+  radial.appendChild(stop2);
+  defs.appendChild(radial);
+  svg.appendChild(defs);
+  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  circle.setAttribute('cx', String(cfg.cx));
+  circle.setAttribute('cy', String(cfg.cy));
+  circle.setAttribute('r', String(radius));
+  circle.setAttribute('fill', `url(#${gradientId})`);
+  circle.setAttribute('pointer-events', 'none');
+  svg.appendChild(circle);
+}
+
+function addFixture(svg: SVGSVGElement, cfg: { cx: number; cy: number; color: string; opacity: number }) {
+  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  circle.setAttribute('cx', String(cfg.cx));
+  circle.setAttribute('cy', String(cfg.cy));
+  circle.setAttribute('r', '3');
+  circle.setAttribute('fill', cfg.color);
+  circle.setAttribute('opacity', String(cfg.opacity));
+  svg.appendChild(circle);
+}
+
+function addOverlay(svg: SVGSVGElement, cfg: { x: number; y: number; w: number; h: number; opacity: number }) {
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('x', String(cfg.x));
+  rect.setAttribute('y', String(cfg.y));
+  rect.setAttribute('width', String(cfg.w));
+  rect.setAttribute('height', String(cfg.h));
+  rect.setAttribute('rx', '8');
+  rect.setAttribute('fill', `rgba(0,0,0,${cfg.opacity})`);
+  rect.setAttribute('pointer-events', 'none');
+  svg.appendChild(rect);
+}
+
+function getAmbianceColor(ambiance: number): string {
+  if (ambiance < 0.9) return '#f59e0b';
+  if (ambiance > 1.1) return '#fff';
+  return '#facc15';
+}
+
+function getPositions(count: number, w: number, h: number): Array<{ x: number; y: number }> {
+  const positions: Array<{ x: number; y: number }> = [];
+  const pad = 20;
+  const effW = w - pad * 2;
+  const effH = h - pad * 2;
+  if (count <= 1) {
+    positions.push({ x: w / 2, y: h / 2 });
+    return positions;
+  }
+  const cols = Math.ceil(Math.sqrt(count * (effW / effH)));
+  let rows = Math.ceil(count / cols);
+  if (rows * cols < count) rows += 1;
+  const cellW = effW / cols;
+  const cellH = effH / rows;
+  for (let i = 0; i < count; i++) {
+    const c = i % cols;
+    const r = Math.floor(i / cols);
+    const x = pad + cellW * c + cellW / 2;
+    const y = pad + cellH * r + cellH / 2;
+    positions.push({ x, y });
+  }
+  return positions;
+}
+
+function drawFixtures(svg: SVGSVGElement, cfg: PlanConfig, origin: { cx: number; cy: number; rx: number; ry: number }) {
+  const w = origin.rx * 2;
+  const h = origin.ry * 2;
+  const opacity = 0.6 + cfg.luxRatio * 0.4;
+  const haloColor = getAmbianceColor(cfg.ambiance);
+  const positions = getPositions(cfg.optimalBulbs, w, h);
+  positions.forEach((p) => {
+    const bx = origin.cx - origin.rx + p.x;
+    const by = origin.cy - origin.ry + p.y;
+    addGlow(svg, { cx: bx, cy: by, color: haloColor, opacity, luxRatio: cfg.luxRatio, ambiance: cfg.ambiance });
+    addFixture(svg, { cx: bx, cy: by, color: '#fff', opacity });
+  });
+}
+
+export function drawPlan(svg: SVGSVGElement, cfg: PlanConfig) {
+  svg.innerHTML = '';
+  const maxDim = Math.max(cfg.widthM, cfg.lengthM);
+  const scale = 280 / maxDim;
+  const w = cfg.widthM * scale;
+  const h = cfg.lengthM * scale;
+  const cx = 150;
+  const cy = 100;
+  const rx = w / 2;
+  const ry = h / 2;
+  addRect(svg, { x: 0, y: 0, w: 300, h: 200, fill: '#ffffff', stroke: '#ffffff', strokeWidth: 0 });
+  const opacity = Math.min(0.85, Math.max(0, 1 - cfg.luxRatio));
+  addOverlay(svg, { x: cx - rx, y: cy - ry, w, h, opacity });
+  drawFixtures(svg, cfg, { cx, cy, rx, ry });
+}
+
+function addDialArc(svg: SVGSVGElement, cfg: { radius: number; color: string; dash: string; offset: number }) {
+  const cx = 60;
+  const cy = 55;
+  const arc = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  arc.setAttribute('d', `M ${cx - cfg.radius} ${cy} A ${cfg.radius} ${cfg.radius} 0 0 1 ${cx + cfg.radius} ${cy}`);
+  arc.setAttribute('fill', 'none');
+  arc.setAttribute('stroke', cfg.color);
+  arc.setAttribute('stroke-width', '8');
+  arc.setAttribute('stroke-linecap', 'round');
+  arc.setAttribute('stroke-dasharray', cfg.dash);
+  if (cfg.offset !== 0) arc.setAttribute('stroke-dashoffset', String(cfg.offset));
+  svg.appendChild(arc);
+}
+
+function addDialText(svg: SVGSVGElement, cfg: { x: number; y: number; text: string; size: string; color: string; weight: string }) {
+  const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  t.setAttribute('x', String(cfg.x));
+  t.setAttribute('y', String(cfg.y));
+  t.setAttribute('text-anchor', 'middle');
+  t.setAttribute('fill', cfg.color);
+  t.setAttribute('font-size', cfg.size);
+  t.setAttribute('font-weight', cfg.weight);
+  t.textContent = cfg.text;
+  svg.appendChild(t);
+}
+
+function getDialColor(value: number, target: number): string {
+  const minOk = target * 0.9;
+  const maxOk = target * 1.3;
+  if (value >= minOk && value <= maxOk) return '#22c55e';
+  if (value < minOk) return '#f59e0b';
+  return '#ef4444';
+}
+
+export function drawDial(svg: SVGSVGElement, cfg: DialConfig) {
+  svg.innerHTML = '';
+  const radius = 45;
+  const arcLen = Math.PI * radius;
+  const minOk = cfg.target * 0.9;
+  const maxOk = cfg.target * 1.3;
+  const minOkLen = (minOk / cfg.max) * arcLen;
+  const maxOkLen = (maxOk / cfg.max) * arcLen;
+  const valueLen = (cfg.value / cfg.max) * arcLen;
+  addDialArc(svg, { radius, color: 'var(--border-color)', dash: `${minOkLen} ${arcLen - minOkLen}`, offset: 0 });
+  addDialArc(svg, { radius, color: 'rgba(34, 197, 94, 0.2)', dash: `${maxOkLen - minOkLen} ${arcLen - (maxOkLen - minOkLen)}`, offset: -minOkLen });
+  addDialArc(svg, { radius, color: 'var(--border-color)', dash: `${arcLen - maxOkLen} ${maxOkLen}`, offset: -maxOkLen });
+  addDialArc(svg, { radius, color: getDialColor(cfg.value, cfg.target), dash: `${valueLen} ${arcLen - valueLen}`, offset: 0 });
+  addDialText(svg, { x: 60, y: 53, text: String(Math.round(cfg.value)), size: '12', color: 'var(--text-main)', weight: '700' });
+  addDialText(svg, { x: 60, y: 65, text: cfg.label, size: '7', color: 'var(--text-muted)', weight: '500' });
+}
+
+export function drawBulbs(container: HTMLElement, optimal: number) {
+  container.innerHTML = '';
+  const maxVisible = Math.min(optimal, 20);
+  const activeColor = '#facc15';
+  for (let i = 0; i < maxVisible; i++) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('width', '20');
+    svg.setAttribute('height', '20');
+    svg.style.filter = 'drop-shadow(0 0 3px rgba(250, 204, 21, 0.5))';
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7z');
+    path.setAttribute('fill', activeColor);
+    path.setAttribute('stroke', activeColor);
+    path.setAttribute('stroke-width', '1');
+    svg.appendChild(path);
+    container.appendChild(svg);
+  }
+  if (optimal > maxVisible) {
+    const span = document.createElement('span');
+    span.style.cssText = 'font-size:0.75rem;color:var(--text-muted);align-self:center;';
+    span.textContent = `+${optimal - maxVisible}`;
+    container.appendChild(span);
+  }
+}
+
+interface PDFData {
+  roomType: string;
+  width: number;
+  length: number;
+  height: number;
+  r: LightingResult;
+  unitSys: string;
+  unitLabel: string;
+}
+
+export function generatePDF(data: PDFData) {
+  import('jspdf').then(({ jsPDF }) => {
+    const doc = new jsPDF();
+    doc.setFontSize(18);
+    doc.text('Lighting Plan', 14, 20);
+    doc.setFontSize(12);
+    doc.text(`Room: ${data.roomType}`, 14, 35);
+    doc.text(`Dimensions: ${data.width}${data.unitLabel} × ${data.length}${data.unitLabel} × ${data.height}${data.unitLabel}`, 14, 45);
+    doc.text(`Area: ${Math.round(data.r.roomArea)} m²`, 14, 55);
+    doc.text(`Target lux: ${data.r.targetLux}`, 14, 65);
+    doc.text(`Current lux: ${data.r.currentLux}`, 14, 75);
+    doc.text(`Required lumens: ${data.r.requiredLumens}`, 14, 85);
+    doc.text(`Recommended: ${data.r.suggestedProducts}`, 14, 95);
+    doc.text(`Status: ${data.r.status}`, 14, 105);
+    doc.save('lighting-plan.pdf');
+  });
+}