@jjlmoya/utils-astronomy 1.28.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-astronomy",
-    "version": "1.28.0",
+    "version": "1.33.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,31 +1,31 @@
-import type { AstronomyCategoryEntry } from '../types';
-import { bortleVisualizer } from '../tool/bortleVisualizer/entry';
-import { deepSpaceScope } from '../tool/deepSpaceScope/entry';
-import { starExposureCalculator } from '../tool/starExposureCalculator/entry';
-import { telescopeResolution } from '../tool/telescopeResolution/entry';
+import type { AstronomyCategoryEntry } from '../types';
+import { bortleVisualizer } from '../tool/bortleVisualizer/entry';
+import { deepSpaceScope } from '../tool/deepSpaceScope/entry';
+import { starExposureCalculator } from '../tool/starExposureCalculator/entry';
+import { telescopeResolution } from '../tool/telescopeResolution/entry';
 import { eyepieceCalculator } from '../tool/smartEyepieceCalculator/entry';
 import { telescopeExitPupilPlanner } from '../tool/telescopeExitPupilPlanner/entry';
-
-export const toolsCategory: AstronomyCategoryEntry = {
-  icon: 'mdi:telescope',
-  tools: [bortleVisualizer, deepSpaceScope, starExposureCalculator, telescopeResolution, eyepieceCalculator, telescopeExitPupilPlanner],
-  i18n: {
-    de: () => import('./i18n/de').then((m) => m.content),
-    en: () => import('./i18n/en').then((m) => m.content),
-    es: () => import('./i18n/es').then((m) => m.content),
-    fr: () => import('./i18n/fr').then((m) => m.content),
-    id: () => import('./i18n/id').then((m) => m.content),
-    it: () => import('./i18n/it').then((m) => m.content),
-    ja: () => import('./i18n/ja').then((m) => m.content),
-    ko: () => import('./i18n/ko').then((m) => m.content),
-    nl: () => import('./i18n/nl').then((m) => m.content),
-    pl: () => import('./i18n/pl').then((m) => m.content),
-    pt: () => import('./i18n/pt').then((m) => m.content),
-    ru: () => import('./i18n/ru').then((m) => m.content),
-    sv: () => import('./i18n/sv').then((m) => m.content),
-    tr: () => import('./i18n/tr').then((m) => m.content),
-    zh: () => import('./i18n/zh').then((m) => m.content),
-  },
-};
-export const astronomyCategory = toolsCategory;
-
+import { meteorShowerObservingPlanner } from '../tool/meteorShowerObservingPlanner/entry';
+
+export const toolsCategory: AstronomyCategoryEntry = {
+  icon: 'mdi:telescope',
+  tools: [bortleVisualizer, deepSpaceScope, starExposureCalculator, telescopeResolution, eyepieceCalculator, telescopeExitPupilPlanner, meteorShowerObservingPlanner],
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};
+export const astronomyCategory = toolsCategory;

package/src/entries.ts

@@ -10,6 +10,8 @@ export { eyepieceCalculator } from './tool/smartEyepieceCalculator/entry';
 export type { EyepieceCalculatorUI, EyepieceCalculatorLocaleContent } from './tool/smartEyepieceCalculator/entry';
 export { telescopeExitPupilPlanner } from './tool/telescopeExitPupilPlanner/entry';
 export type { TelescopeExitPupilPlannerUI, TelescopeExitPupilPlannerLocaleContent } from './tool/telescopeExitPupilPlanner/entry';
+export { meteorShowerObservingPlanner } from './tool/meteorShowerObservingPlanner/entry';
+export type { MeteorShowerObservingPlannerUI, MeteorShowerObservingPlannerLocaleContent } from './tool/meteorShowerObservingPlanner/entry';
 export { toolsCategory, astronomyCategory } from './category';
 import { bortleVisualizer } from './tool/bortleVisualizer/entry';
 import { deepSpaceScope } from './tool/deepSpaceScope/entry';
@@ -17,4 +19,6 @@ import { starExposureCalculator } from './tool/starExposureCalculator/entry';
 import { telescopeResolution } from './tool/telescopeResolution/entry';
 import { eyepieceCalculator } from './tool/smartEyepieceCalculator/entry';
 import { telescopeExitPupilPlanner } from './tool/telescopeExitPupilPlanner/entry';
-export const ALL_ENTRIES = [bortleVisualizer, deepSpaceScope, starExposureCalculator, telescopeResolution, eyepieceCalculator, telescopeExitPupilPlanner];
+import { meteorShowerObservingPlanner } from './tool/meteorShowerObservingPlanner/entry';
+export const ALL_ENTRIES = [bortleVisualizer, deepSpaceScope, starExposureCalculator, telescopeResolution, eyepieceCalculator, telescopeExitPupilPlanner, meteorShowerObservingPlanner];
+

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './tool/bortleVisualizer';
 export * from './tool/deepSpaceScope';
 export * from './tool/starExposureCalculator';
 export * from './tool/telescopeResolution';
+export * from './tool/meteorShowerObservingPlanner';
 
 export { toolsCategory as astronomyCategory } from './category';
 export const AstronomyCategorySEO = () => import('./category/seo.astro').then((m) => m.default);

package/src/tests/locale_completeness.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { ALL_TOOLS } from '../tools';
 
 describe('Locale Completeness Validation', () => {
-  it('all 6 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(6);
+  it('all 7 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(7);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -1,147 +1,148 @@
-import { describe, it, expect } from 'vitest';
-import * as fs from 'fs';
-import * as path from 'path';
-import { ALL_TOOLS } from '../tools';
-import { astronomyCategory } from '../data';
-import type { ToolDefinition } from '../types';
-
-function extractSeoText(sections: any[]): string {
-  return sections
-    .map((section) => extractSectionText(section))
-    .join(' ');
-}
-
-function extractHtmlOrText(section: any): string {
-  const hasContent = 'html' in section || 'text' in section;
-  const isNotTable = section.type !== 'table';
-  return hasContent && isNotTable ? (section.html || section.text || '') : '';
-}
-
-function extractListItems(section: any): string {
-  return 'items' in section && Array.isArray(section.items) ? section.items.join(' ') : '';
-}
-
-function extractTableRows(section: any): string {
-  return 'rows' in section && Array.isArray(section.rows) ? section.rows.flat().join(' ') : '';
-}
-
-function extractSectionText(section: any): string {
-  let text = '';
-  text += extractHtmlOrText(section);
-  text += extractListItems(section);
-  text += extractTableRows(section);
-  return text;
-}
-
-function countWords(text: string): number {
-  const cleanText = text.replace(/<[^>]*>/g, '').trim();
-  const standardWords = cleanText.split(/\s+/).filter((w) => w.length > 0).length;
-  const cjkChars = cleanText.match(/[\u4e00-\u9fa5\u3040-\u30ff\uac00-\ud7af]/g)?.length || 0;
-  const cjkBlocks = cleanText.split(/[^\u4e00-\u9fa5\u3040-\u30ff\uac00-\ud7af]+/).filter(w => w.length > 0).length;
-  return standardWords - cjkBlocks + cjkChars;
-}
-
-describe('Tool Validation Suite', () => {
-  describe('Strict Tool Definition Validation', () => {
-    ALL_TOOLS.forEach((tool: ToolDefinition) => {
-      const { entry } = tool;
-
-      describe(`${entry.id} structure`, () => {
-        it('should fulfill ToolDefinition interface', () => {
-          expect(tool.entry).toBeDefined();
-          expect(tool.Component).toBeDefined();
-          expect(tool.SEOComponent).toBeDefined();
-          expect(tool.BibliographyComponent).toBeDefined();
-        });
-
-        it('should have valid ID in kebab-case', () => {
-          expect(entry.id).toMatch(/^[a-z0-9]+(-[a-z0-9]+)*$/);
-        });
-
-        it('should have valid icons with bg and fg', () => {
-          expect(entry.icons.bg).toMatch(/^mdi:/);
-          expect(entry.icons.fg).toMatch(/^mdi:/);
-        });
-
-        describe('i18n Content Validation', () => {
-          Object.entries(entry.i18n).forEach(([locale, loader]) => {
-            it(`should load ${locale} content and follow slug rules`, async () => {
-              const content = await loader();
-              expect(content.slug).toBeDefined();
-              expect(content.slug).toMatch(/^[a-z0-9]+(-[a-z0-9]+)*$/);
-
-              if (locale === 'es') {
-                const validSlugs = [
-                  'simulador-cielo-oscuro',
-                  'alcance-telescopio',
-                  'calculadora-regla-500',
+import { describe, it, expect } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+import { ALL_TOOLS } from '../tools';
+import { astronomyCategory } from '../category';
+import type { ToolDefinition } from '../types';
+
+function extractSeoText(sections: any[]): string {
+  return sections
+    .map((section) => extractSectionText(section))
+    .join(' ');
+}
+
+function extractHtmlOrText(section: any): string {
+  const hasContent = 'html' in section || 'text' in section;
+  const isNotTable = section.type !== 'table';
+  return hasContent && isNotTable ? (section.html || section.text || '') : '';
+}
+
+function extractListItems(section: any): string {
+  return 'items' in section && Array.isArray(section.items) ? section.items.join(' ') : '';
+}
+
+function extractTableRows(section: any): string {
+  return 'rows' in section && Array.isArray(section.rows) ? section.rows.flat().join(' ') : '';
+}
+
+function extractSectionText(section: any): string {
+  let text = '';
+  text += extractHtmlOrText(section);
+  text += extractListItems(section);
+  text += extractTableRows(section);
+  return text;
+}
+
+function countWords(text: string): number {
+  const cleanText = text.replace(/<[^>]*>/g, '').trim();
+  const standardWords = cleanText.split(/\s+/).filter((w) => w.length > 0).length;
+  const cjkChars = cleanText.match(/[\u4e00-\u9fa5\u3040-\u30ff\uac00-\ud7af]/g)?.length || 0;
+  const cjkBlocks = cleanText.split(/[^\u4e00-\u9fa5\u3040-\u30ff\uac00-\ud7af]+/).filter((w) => w.length > 0).length;
+  return standardWords - cjkBlocks + cjkChars;
+}
+
+describe('Tool Validation Suite', () => {
+  describe('Strict Tool Definition Validation', () => {
+    ALL_TOOLS.forEach((tool: ToolDefinition) => {
+      const { entry } = tool;
+
+      describe(`${entry.id} structure`, () => {
+        it('should fulfill ToolDefinition interface', () => {
+          expect(tool.entry).toBeDefined();
+          expect(tool.Component).toBeDefined();
+          expect(tool.SEOComponent).toBeDefined();
+          expect(tool.BibliographyComponent).toBeDefined();
+        });
+
+        it('should have valid ID in kebab-case', () => {
+          expect(entry.id).toMatch(/^[a-z0-9]+(-[a-z0-9]+)*$/);
+        });
+
+        it('should have valid icons with bg and fg', () => {
+          expect(entry.icons.bg).toMatch(/^mdi:/);
+          expect(entry.icons.fg).toMatch(/^mdi:/);
+        });
+
+        describe('i18n Content Validation', () => {
+          Object.entries(entry.i18n).forEach(([locale, loader]) => {
+            it(`should load ${locale} content and follow slug rules`, async () => {
+              const content = await loader();
+              expect(content.slug).toBeDefined();
+              expect(content.slug).toMatch(/^[a-z0-9]+(-[a-z0-9]+)*$/);
+
+              if (locale === 'es') {
+                const validSlugs = [
+                  'simulador-cielo-oscuro',
+                  'alcance-telescopio',
+                  'calculadora-regla-500',
                   'calculadora-resolucion-telescopio',
                   'calculadora-oculares',
                   'planificador-pupila-salida-aumentos-telescopio',
+                  'planificador-observacion-lluvia-meteoros',
+                  'meteor-shower-observing-planner',
                 ];
-                expect(validSlugs).toContain(content.slug);
-              }
-            });
-
-            it(`should have valid basic content in ${locale}`, async () => {
-              const content = await loader();
-              expect(content.title.length).toBeGreaterThan(0);
-              expect(content.description.length).toBeGreaterThan(0);
-              expect(Object.keys(content.ui).length).toBeGreaterThan(0);
-            });
-
-            it(`should have SEO content with > 300 words in ${locale}`, async () => {
-              const content = await loader();
-              const seoText = extractSeoText(content.seo);
-              const wordCount = countWords(seoText);
-              expect(wordCount).toBeGreaterThanOrEqual(300);
-            });
-          });
-        });
-      });
-    });
-  });
-
-  describe('Library Registration', () => {
-    it('should have 6 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(6);
-    });
-
-    it('should have all tools in astronomyCategory', () => {
-      expect(astronomyCategory.tools.length).toBe(6);
-      ALL_TOOLS.forEach(({ entry }) => {
-        const exists = astronomyCategory.tools.some((t: any) => t.id === entry.id);
-        expect(exists).toBe(true);
-      });
-    });
-  });
-
-  describe('Binary Consistency', () => {
-    ALL_TOOLS.forEach(({ entry }) => {
-      it(`${entry.id} files should exist in the tool folder`, () => {
-        const toolVarName = (entry.id ?? '').replace(/-([a-z])/g, (_: string, g: string) => g.toUpperCase());
-        const toolDir = path.join('src', 'tool', toolVarName);
-
-        expect(fs.existsSync(path.join(toolDir, 'component.astro'))).toBe(true);
-        expect(fs.existsSync(path.join(toolDir, 'seo.astro'))).toBe(true);
-        expect(fs.existsSync(path.join(toolDir, 'bibliography.astro'))).toBe(true);
-        expect(fs.existsSync(path.join(toolDir, 'index.ts'))).toBe(true);
-      });
-    });
-  });
-
-  describe('Bibliography Components Structure', () => {
-    ALL_TOOLS.forEach(({ entry }) => {
-      it(`${entry.id} should have a standard bibliography structure`, () => {
-        const toolVarName = (entry.id ?? '').replace(/-([a-z])/g, (_: string, g: string) => g.toUpperCase());
-        const componentPath = path.join('src', 'tool', toolVarName, 'bibliography.astro');
-        const content = fs.readFileSync(componentPath, 'utf-8');
-
-        expect(content).toContain("import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared'");
-        expect(content).toContain(`import { ${toolVarName} } from './index'`);
-        expect(content).toContain('<SharedBibliography links={content.bibliography} />');
-      });
-    });
-  });
-});
-
+                expect(validSlugs).toContain(content.slug);
+              }
+            });
+
+            it(`should have valid basic content in ${locale}`, async () => {
+              const content = await loader();
+              expect(content.title.length).toBeGreaterThan(0);
+              expect(content.description.length).toBeGreaterThan(0);
+              expect(Object.keys(content.ui).length).toBeGreaterThan(0);
+            });
+
+            it(`should have SEO content with > 300 words in ${locale}`, async () => {
+              const content = await loader();
+              const seoText = extractSeoText(content.seo);
+              const wordCount = countWords(seoText);
+              expect(wordCount).toBeGreaterThanOrEqual(300);
+            });
+          });
+        });
+      });
+    });
+  });
+
+  describe('Library Registration', () => {
+    it('should have 7 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(7);
+    });
+
+    it('should have all tools in astronomyCategory', () => {
+      expect(astronomyCategory.tools.length).toBe(7);
+      ALL_TOOLS.forEach(({ entry }) => {
+        const exists = astronomyCategory.tools.some((t: any) => t.id === entry.id);
+        expect(exists).toBe(true);
+      });
+    });
+  });
+
+  describe('Binary Consistency', () => {
+    ALL_TOOLS.forEach(({ entry }) => {
+      it(`${entry.id} files should exist in the tool folder`, () => {
+        const toolVarName = (entry.id ?? '').replace(/-([a-z])/g, (_: string, g: string) => g.toUpperCase());
+        const toolDir = path.join('src', 'tool', toolVarName);
+
+        expect(fs.existsSync(path.join(toolDir, 'component.astro'))).toBe(true);
+        expect(fs.existsSync(path.join(toolDir, 'seo.astro'))).toBe(true);
+        expect(fs.existsSync(path.join(toolDir, 'bibliography.astro'))).toBe(true);
+        expect(fs.existsSync(path.join(toolDir, 'index.ts'))).toBe(true);
+      });
+    });
+  });
+
+  describe('Bibliography Components Structure', () => {
+    ALL_TOOLS.forEach(({ entry }) => {
+      it(`${entry.id} should have a standard bibliography structure`, () => {
+        const toolVarName = (entry.id ?? '').replace(/-([a-z])/g, (_: string, g: string) => g.toUpperCase());
+        const componentPath = path.join('src', 'tool', toolVarName, 'bibliography.astro');
+        const content = fs.readFileSync(componentPath, 'utf-8');
+
+        expect(content).toContain("import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared'");
+        expect(content).toContain(`import { ${toolVarName} } from './index'`);
+        expect(content).toContain('<SharedBibliography links={content.bibliography} />');
+      });
+    });
+  });
+});

package/src/tool/meteorShowerObservingPlanner/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { meteorShowerObservingPlanner } from './index';
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+const entry = await meteorShowerObservingPlanner.i18n[locale as keyof typeof meteorShowerObservingPlanner.i18n]();
+const content = entry();
+---
+
+<SharedBibliography links={content.bibliography} />

package/src/tool/meteorShowerObservingPlanner/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const METEOR_PLANNER_BIBLIOGRAPHY: BibliographyEntry[] = [
+  {
+    name: 'International Meteor Organization (IMO) - Meteor Shower Calendar',
+    url: 'https://www.imo.net/resources/calendar/',
+  },
+  {
+    name: 'NASA Space Place - Meteor Showers and Their Parent Comets',
+    url: 'https://spaceplace.nasa.gov/meteor-shower/en/',
+  },
+];

package/src/tool/meteorShowerObservingPlanner/component.astro

@@ -0,0 +1,165 @@
+---
+import { meteorShowerObservingPlanner } from './index';
+import type { MeteorShowerObservingPlannerUI } from './ui';
+import './meteor-shower-observing-planner.css';
+
+interface Props {
+  ui?: MeteorShowerObservingPlannerUI;
+  locale?: string;
+}
+
+const { ui: passedUi, locale } = Astro.props;
+
+let ui = passedUi;
+if (!ui) {
+  const currentLocale = locale || 'en';
+  const entryLoader = meteorShowerObservingPlanner.i18n[currentLocale as keyof typeof meteorShowerObservingPlanner.i18n] || meteorShowerObservingPlanner.i18n.en;
+  const localeModule = await entryLoader();
+  const content = typeof localeModule === 'function' ? localeModule() : localeModule;
+  ui = content.ui;
+}
+---
+
+<div class="meteor-shower-planner-card" id="meteor-shower-planner-root">
+  <div class="planner-layout-grid">
+    <div class="planner-control-section">
+      <div class="input-control-group">
+        <span class="input-label-row">{ui.presetLabel}</span>
+        <div class="presets-chip-grid">
+          <button type="button" class="preset-chip-btn active" data-shower-id="perseids">{ui.presets['perseids'] || 'Perseids'}</button>
+          <button type="button" class="preset-chip-btn" data-shower-id="geminids">{ui.presets['geminids'] || 'Geminids'}</button>
+          <button type="button" class="preset-chip-btn" data-shower-id="quadrantids">{ui.presets['quadrantids'] || 'Quadrantids'}</button>
+          <button type="button" class="preset-chip-btn" data-shower-id="lyrids">{ui.presets['lyrids'] || 'Lyrids'}</button>
+          <button type="button" class="preset-chip-btn" data-shower-id="orionids">{ui.presets['orionids'] || 'Orionids'}</button>
+          <button type="button" class="preset-chip-btn" data-shower-id="eta-aquariids">{ui.presets['eta-aquariids'] || 'Eta Aquariids'}</button>
+          <button type="button" class="preset-chip-btn" data-shower-id="custom">{ui.presets['custom'] || 'Custom'}</button>
+        </div>
+      </div>
+
+      <div class="input-control-group custom-zhr-group" style="display: none;">
+        <label for="planner-custom-zhr-input" class="input-label-row">{ui.customZhrLabel}</label>
+        <input type="number" id="planner-custom-zhr-input" class="hours-select-input" value="100" min="1" max="1000" aria-label={ui.customZhrLabel} />
+      </div>
+
+      <div class="input-control-group">
+        <label for="planner-latitude-input" class="input-label-row">
+          <span>{ui.latitudeLabel}</span>
+          <span class="input-val-badge" id="planner-latitude-val">+40°</span>
+        </label>
+        <input type="range" id="planner-latitude-input" class="planner-slider-range" min="-80" max="80" value="40" step="1" aria-label={ui.latitudeLabel} />
+      </div>
+
+      <div class="input-control-group">
+        <label for="planner-bortle-input" class="input-label-row">
+          <span>{ui.bortleLabel}</span>
+          <span class="input-val-badge" id="planner-bortle-val">{ui.classLabel || 'Class'} 4</span>
+        </label>
+        <input type="range" id="planner-bortle-input" class="planner-slider-range" min="1" max="9" value="4" step="1" aria-label={ui.bortleLabel} />
+      </div>
+
+      <div class="input-control-group">
+        <label for="planner-moon-input" class="input-label-row">
+          <span>{ui.moonPhaseLabel}</span>
+          <span class="input-val-badge" id="planner-moon-val">15%</span>
+        </label>
+        <input type="range" id="planner-moon-input" class="planner-slider-range" min="0" max="1" value="0.15" step="0.05" aria-label={ui.moonPhaseLabel} />
+      </div>
+
+      <div class="input-control-group">
+        <span class="input-label-row">{ui.sessionHoursLabel}</span>
+        <div class="hours-select-row">
+          <div class="custom-select-wrap">
+            <button type="button" class="custom-select-trigger" id="planner-start-hour-btn" aria-haspopup="listbox" aria-expanded="false" aria-label="Start Hour">
+              <span id="planner-start-hour-label">22:00</span>
+              <svg class="select-arrow-icon" viewBox="0 0 20 20" fill="currentColor" width="14" height="14"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+            </button>
+            <div class="custom-select-menu" id="planner-start-hour-menu" role="listbox" hidden>
+              {[20, 21, 22, 23, 0, 1, 2].map((h) => (
+                <button type="button" class={`custom-select-opt ${h === 22 ? 'active' : ''}`} data-val={h}>
+                  {String(h).padStart(2, '0')}:00
+                </button>
+              ))}
+            </div>
+          </div>
+          <span class="hours-sep-txt">{ui.toLabel || 'to'}</span>
+          <div class="custom-select-wrap">
+            <button type="button" class="custom-select-trigger" id="planner-end-hour-btn" aria-haspopup="listbox" aria-expanded="false" aria-label="End Hour">
+              <span id="planner-end-hour-label">05:00</span>
+              <svg class="select-arrow-icon" viewBox="0 0 20 20" fill="currentColor" width="14" height="14"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+            </button>
+            <div class="custom-select-menu" id="planner-end-hour-menu" role="listbox" hidden>
+              {[3, 4, 5, 6, 7].map((h) => (
+                <button type="button" class={`custom-select-opt ${h === 5 ? 'active' : ''}`} data-val={h}>
+                  {String(h).padStart(2, '0')}:00
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="planner-results-section">
+      <div class="results-metrics-grid">
+        <div class="metric-card-box">
+          <div class="metric-lbl-txt">{ui.bestWindowLabel}</div>
+          <div class="metric-val-txt res-best-window">02:00 - 04:00</div>
+        </div>
+        <div class="metric-card-box">
+          <div class="metric-lbl-txt">{ui.maxRateLabel}</div>
+          <div class="metric-val-txt res-max-rate">45.0 {ui.hrUnit || '/ hr'}</div>
+        </div>
+        <div class="metric-card-box">
+          <div class="metric-lbl-txt">{ui.skyQualityLabel}</div>
+          <div class="metric-val-txt res-score-val badge-excellent">85/100</div>
+        </div>
+      </div>
+
+      <div class="res-badges-list"></div>
+
+      <div class="sky-dome-container"></div>
+
+      <div class="hourly-timeline-panel">
+        <div class="panel-title-lbl">{ui.hourlyChartTitle}</div>
+        <div class="hourly-bars-track"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="checklist-card-panel">
+    <div class="panel-title-lbl">{ui.checklistTitle}</div>
+    <ul class="checklist-ul">
+      {ui.checklistItems.map((item) => (
+        <li class="checklist-li">
+          <span class="checklist-icon-bullet"></span>
+          <span>{item}</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+
+  <script is:inline type="application/json" id="meteor-planner-ui-data" set:html={JSON.stringify(ui)}></script>
+</div>
+
+<script>
+  import { MeteorShowerPlannerController } from './controller';
+  import { loadSavedInput } from './storage';
+
+  function initPlanner() {
+    const root = document.getElementById('meteor-shower-planner-root');
+    const dataEl = document.getElementById('meteor-planner-ui-data');
+    if (root && dataEl) {
+      try {
+        const ui = JSON.parse(dataEl.textContent || '{}');
+        const input = loadSavedInput();
+        new MeteorShowerPlannerController(root, input, ui);
+      } catch {}
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPlanner);
+  } else {
+    initPlanner();
+  }
+</script>