# Changelog

> New collections, components and changes to the registry, newest first.

Source: https://elements.lumesec.ai/docs/changelog



## 0.2.0 · 2026-10-02

Every component is now real, strict TypeScript.

* **Interaction and Pixel UI are native React components.** 41 components rewritten as React 19 function components styled with Tailwind CSS v4 and `cn()`, in the way of shadcn/ui: controlled and uncontrolled state (`value` / `defaultValue` / `onValueChange`, `checked` / `onCheckedChange`), typed callbacks instead of `CustomEvent`s, `ref` handles for imperative actions, `data-slot` and `data-state` attributes, full server rendering. Pixel UI inputs submit with native forms.
* **Pixel Lab, Pixel HD, Network and Service Map are typed custom elements.** 170 elements and their three engines converted from JavaScript to strict TypeScript, with typed attributes, methods and event maps, and their tags registered in `HTMLElementTagNameMap`. The React wrappers are typed from the element classes.
* **Your shadcn theme drives everything.** Components read `--background`, `--card`, `--foreground`, `--muted`, `--border` and the other shadcn tokens directly, in any colour format including `oklch()`. The new `lumesec-theme` item adds the `--lumesec` accent tokens and their Tailwind colours. The `--ui-*` properties remain as optional overrides for the custom elements.
* **Shared React modules** in `lib/lumesec`: theme colour reading for canvas, motion hooks that pause off screen, sparks, rolling labels, the pixel font and controllable state. Each is its own registry item and installs once.
* **No type escape hatches.** The registry contains no `any`, `@ts-ignore` or `@ts-nocheck`, and every usage snippet in the docs type-checks.
* **Docs**: React API reference (props, ref handles, subcomponents) for the React components, a React playground, updated guides for React, plain HTML and theming.
* **Breaking.** React users of Interaction and Pixel UI move from event objects to callbacks (`onChange={(e) => e.detail.value}` becomes `onValueChange={(value) => …}`) and from attributes to props. The plain-HTML builds of Interaction and Pixel UI are retired; the other collections keep theirs.

## 0.1.0 · 2026-10-01

The first public release of LumeSec Elements.

* **211 components in six collections**: Interaction (11), Pixel Lab (50), Pixel UI (30), Pixel HD (60), Network (30) and Service Map (30).
* **shadcn registry** under `@lumesec`, with shared engines and React bindings as their own items so they install once.
* **Typed React wrappers** for every component: props from attributes, `on` handlers from events, refs with methods.
* **Plain HTML modules** on the CDN, one per component and one per collection.
* **One theming contract.** Every collection now reads the same `--ui-*` tokens with Screen Line fallbacks. The `lumesec-theme` item maps them onto shadcn themes.
* **Server-safe modules.** Importing a component on the server no longer touches the DOM.
* **Documentation** for every component: live preview, install, usage, API reference, keyboard and accessibility.
* **Machine-readable docs**: Markdown twins, `llms.txt` and `llms-full.txt`.

### Collections by date

| Date       | Added                 |
| ---------- | --------------------- |
| 2026-10-01 | Network, Service Map  |
| 2026-09-30 | Pixel HD, second set  |
| 2026-09-29 | Pixel HD              |
| 2026-09-28 | Pixel UI              |
| 2026-09-27 | Pixel Lab, second set |
| 2026-09-26 | Pixel Lab             |
| 2026-09-25 | Interaction           |
| 2026-09-24 | Ultracode slider      |