# Widgets

_An implementation of the CXWidgets I helped build at Statista._

CXWidgets brings contextual guidance to the Homepage, placing useful information beside the control it explains. This page will grow into a hands-on showcase as more CXWidgets formats are integrated.

## Current integration [v]

_Where the Homepage currently uses CXWidgets._

The Homepage uses a tooltip beside the OpenAI API key field in Preferences → APIs → Keys. It explains where the key is used and links to the Images App and OpenAI Platform.

The Homepage also uses the tooltip below as a working example. Its content includes links to the [Themes](https://homepage.sefzig-net.workers.dev/docs/themes) and [Toasts](https://homepage.sefzig-net.workers.dev/docs/toasts) manuals.

## Try the tooltip [try-the-tooltip] [v]

_Explore a working example with text and Homepage links._

Select **Click me** to open and dismiss the tooltip. Hover over **Hover me** to open the same content; it closes when your pointer leaves the button and tooltip. Keyboard focus also opens it.

## Maintenance [v]

_Where the integration is configured, styled, and updated._

The integration lives in `/work/frontend/app/widgets/`. `configuration.ts` defines the three Homepage tooltips. `theme.css` maps live Homepage colors and typography into CXWidgets; `shadow-theme.ts` aligns tooltip elevation with the Homepage's brightness-aware shadow or glow, including the arrow, and styles links inside the tooltip. `mtam-agent.js` loads the pinned runtime through the consent-independent `Widgets` agent.

To fix or update the library, make the change in the 2026 source project at `/Users/sefzig/Development/Projects/cxwidgets/2026/program` and build it there with `npm run build`. Copy the versioned production bundle into the Homepage integration; do not hand-edit the copied bundle. Update the runtime URL and SHA-256 in the route and requirement, then run the Homepage checks and browser verification. Keep the 2024 source tree unchanged.