This page documents the modular UI component system of the EVE Companion App. It outlines how components are designed, templated, and rendered dynamically using HTML <template> elements and how they can be reused, themed, and previewed.

• Components are modular and atomic
• Each component has its own folder under components/
• Components use native HTML templates for declarative structure
• Styling is applied via Halfmoon, Topcoat, and Augmented UI
• All components are previewable in isolation via iframe or test shell

src/components/
├── WindowFrame/
│   └── index.html        # Template + slots for framing
├── FitViewer/
│   └── index.html        # Displays a ship fitting with stats
├── Sidebar/
│   └── index.html        # Navigation and info panel
├── TitleBar/
│   └── index.html        # Styled app title or section heading

Each index.html file contains a <template> block with optional nested slots:

<template id="fit-viewer">
  <div class="window" data-augmented-ui="tl-clip br-clip inlay">
    <div class="header">
      <slot name="title">Fit Viewer</slot>
    </div>
    <div class="content">
      <slot name="fit-details"></slot>
    </div>
  </div>
</template>

This allows components to be:

• Composed declaratively
• Injected dynamically at runtime
• Easily styled or themed per empire skin

Templates are loaded on app init and registered globally. Components are inserted like this:

const tpl = document.getElementById('fit-viewer');
const instance = tpl.content.cloneNode(true);
instance.querySelector('[slot="fit-details"]').textContent = 'Retribution - PvP';
document.body.appendChild(instance);

• Panels use data-augmented-ui with inherited layout
• Sizes and spacing follow Halfmoon grid units
• Class naming is consistent: window, header, content, footer
• Components reset inherited styles with data-augmented-ui-reset when needed

Each component can be loaded into an isolated iframe for visual testing.

Optional: Include a minimal test.html in each folder to sandbox the component during development.

• Themed variants (WindowFrame--amarr, WindowFrame--caldari)
• JS modules for component behavior where needed
• Dynamic component registry and lazy loading
• Support for render triggers (e.g., renderFitViewer(fitData))

• Components live in src/components/ as folder-per-template
• Templates use native <template> blocks with slots
• Augmented UI, Halfmoon, and Topcoat shape the visuals
• Scripts dynamically inject and control component structure