@jjlmoya/utils-home 1.30.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-home",
-    "version": "1.30.0",
+    "version": "1.32.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

@@ -24,6 +24,10 @@ export { deskErgonomics } from './tool/deskErgonomics/entry';
 export type { DeskErgonomicsLocaleContent } from './tool/deskErgonomics/entry';
 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';
@@ -38,4 +42,6 @@ import { wallPaintingCalculator } from './tool/wallPaintingCalculator/entry';
 import { vampireDrawSimulator } from './tool/vampireDrawSimulator/entry';
 import { deskErgonomics } from './tool/deskErgonomics/entry';
 import { applianceCostCalculator } from './tool/applianceCostCalculator/entry';
-export const ALL_ENTRIES = [dewPointCalculator, heatingComparator, ledSavingCalculator, projectorCalculator, qrGenerator, solarCalculator, tariffComparator, wifiRangeSimulator, acTonnageCalculator, wallPaintingCalculator, vampireDrawSimulator, deskErgonomics, applianceCostCalculator];
+import { tileLayoutCalculator } from './tool/tileLayoutCalculator/entry';
+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/index.ts

@@ -28,4 +28,5 @@ export { WALL_PAINTING_CALCULATOR_TOOL } from './tool/wallPaintingCalculator';
 export { VAMPIRE_DRAW_SIMULATOR_TOOL } from './tool/vampireDrawSimulator';
 export { DESK_ERGONOMICS_TOOL } from './tool/deskErgonomics';
 export { APPLIANCE_COST_CALCULATOR_TOOL } from './tool/applianceCostCalculator';
+export { TILE_LAYOUT_CALCULATOR_TOOL } from './tool/tileLayoutCalculator';
 

package/src/tests/locale_completeness.test.ts

@@ -17,8 +17,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('should have 13 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(13);
+  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 13 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(13);
+    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>