# Airexsus — Applied UI Kit (Operaciones HVAC)

A runnable, browser-rendered interface kit that applies the
Airexsus design system to its real product domain: monitoring
and dispatching commercial / industrial HVAC equipment.

This kit is **not** a static mock. `index.html` loads React,
ReactDOM, and Babel standalone, mounts a `#root`, then composes
six role-based components into one product surface.

## Structure

```
ui_kits/app/
├── index.html              ← entry; loads React + tokens + components, renders <App />
├── README.md               ← this file
└── components/
    ├── _kit.css            ← applied styles (consumes ../../colors_and_type.css tokens)
    ├── App.jsx             ← shell · composes the other 5 roles
    ├── Sidebar.jsx         ← brand mark + primary nav + account
    ├── EquipmentList.jsx   ← list/rail of monitored equipment
    ├── DashboardArea.jsx   ← main workspace · KPIs + chart + selected unit
    ├── EquipmentCard.jsx   ← detail card for the selected unit
    └── ActionBar.jsx       ← composer/quick-action footer
```

## Role mapping (vs. a chat/workspace kit)

| Chat kit role        | Airexsus role            | File                  |
|---------------------|---------------------------|------------------------|
| App shell           | Operations shell          | `App.jsx`              |
| Sidebar             | Sidebar (HVAC sections)   | `Sidebar.jsx`          |
| Assistants list     | Equipment rail            | `EquipmentList.jsx`    |
| Chat area           | Dashboard workspace       | `DashboardArea.jsx`    |
| Message bubble      | Equipment detail card     | `EquipmentCard.jsx`    |
| Input bar / composer| Quick-action / order bar  | `ActionBar.jsx`        |

The contract is the same as a chat kit (6 substantive role-based
components composed by an App shell) but adapted to the actual
product evidence: commercial/industrial HVAC operations, not a
chat interface.

## Usage workflow

1. **Browse the kit live** — open `ui_kits/app/index.html` in any
   modern browser (or in the Open Design preview pane). React +
   Babel standalone scripts transpile the JSX in the browser; no
   build step required.
2. **Reuse components** — copy any component file into another
   project. Each component publishes itself on `window` so other
   Babel `<script>` blocks can reference it:
   `window.Sidebar`, `window.EquipmentList`, `window.EquipmentCard`,
   `window.DashboardArea`, `window.ActionBar`, `window.App`.
3. **Apply tokens** — every component reads tokens from
   `../../colors_and_type.css` via CSS variables. Drop that file
   into a target project and you get the full Airexsus palette,
   type, spacing, and dark-mode support without touching JSX.
4. **Swap data** — `App.jsx` ships a `UNITS` constant with five
   realistic HVAC units (split, rooftop, evaporador industrial,
   cámara congelación, chiller) covering every status (operational,
   maintenance, fault, offline). Replace it with live data once
   the product API is wired up.

## Design notes

- **Sidebar lives on `--brand-ink`** instead of a frosted light
  surface — operators run this kit on multi-display walls, and a
  high-contrast left rail anchors the eye independent of
  brightness.
- **EquipmentList rail keeps SKU mono-spaced** so dispatchers can
  read them across rows without saccade jitter.
- **DashboardArea reserves the top band** (`<header>` + KPI row +
  chart) before showing the per-unit detail card, so the workspace
  always grounds the operator in fleet-level state first.
- **ActionBar is a composer, not a search**. It defaults to
  "Orden de servicio" creation; the type chips swap the placeholder
  and downstream submit semantics.
- **No CTA `translateY` on hover** anywhere — DESIGN.md §7 calls
  this out as an anti-pattern (mechanical instability is the
  wrong brand signal for HVAC).

## Source basis

No GitHub repo, local code folder, or design-system fixture was
provided at intake; see `../../assets/PROVENANCE.md` and
`../../context/source-context.md`. This applied kit was built
from the product context in `context/source-context.md`
("HVAC US market, commercial and industrial refrigeration,
diseño + instalación + mantenimiento") and the visual rules in
`../../DESIGN.md`. If a future intake brings real product source
(repo, Figma export, code snapshot), preserve original component
filenames under `source_examples/` and align this kit's component
names with them.