<div class="docs-content" data-render>
# Components overview

DevPlace ships a set of reusable **custom HTML web components** (custom elements). They
are plain ES6 modules under `static/js/components/`, registered once through
`components/index.js` (imported by `Application.js`, which loads on every page), so each element
is available everywhere, including these documentation pages.

## Conventions

- **Prefix.** Project components use the `dp-` prefix (`dp-avatar`, `dp-code`, `dp-toast`,
  `dp-dialog`, `dp-context-menu`). The assistant ships its own `devii-` elements, and the
  emoji picker is a vendored third-party element.
- **Light DOM.** Components render into the light DOM (no shadow root) so the site's global CSS
  applies to them directly, matching the existing `devii-*` elements.
- **Base class.** Most extend `Component` (`static/js/components/Component.js`), a thin
  `HTMLElement` subclass with attribute helpers (`attr`, `boolAttr`, `intAttr`).
- **Singletons.** Behavioural singletons (`dp-dialog`, `dp-context-menu`, `dp-toast`,
  `dp-lightbox`) are created once by `Application.js` and reachable as `app.dialog`,
  `app.contextMenu`, `app.toast`, and `app.lightbox`.

## Catalog

| Component | Purpose |
|---|---|
| [dp-avatar](/docs/component-dp-avatar.html) | User avatar image from a username seed. |
| [dp-code](/docs/component-dp-code.html) | Syntax-highlighted code block with copy button. |
| [dp-content](/docs/component-dp-content.html) | Render markdown/emoji/media as safe sanitised HTML (client-side; live content only - server content uses the backend `render_content`). |
| [dp-title](/docs/component-dp-title.html) | Render a single-line title as safe inline emoji/markdown (client-side; live titles only - server titles use the backend `render_title`). |
| [dp-upload](/docs/component-dp-upload.html) | Clean file upload button with count and removable chips. |
| [dp-toast](/docs/component-dp-toast.html) | Transient corner notifications. |
| [dp-dialog](/docs/component-dp-dialog.html) | Promise-based confirm, prompt, and alert modal. |
| [dp-context-menu](/docs/component-dp-context-menu.html) | Right-click / long-press context menu. |
| [dp-lightbox](/docs/component-dp-lightbox.html) | Full-screen image viewer opened by clicking a thumbnail. |
| [devii-terminal](/docs/component-devii-terminal.html) | The Devii assistant terminal window. |
| [devii-avatar](/docs/component-devii-avatar.html) | The Devii animated avatar character. |
| [emoji-picker](/docs/component-emoji-picker.html) | Vendored emoji picker element. |

## A note on scope

Components are the self-contained, presentational UI pieces. The rest of the frontend is
plain ES6 modules: page controllers that enhance server-rendered partials (votes,
reactions, comments, polls, which share the `OptimisticAction` base) and small utilities (`Http`
for fetch, `Poller` and `JobPoller` for live and job-status polling, plus DOM helpers). Those are
not custom elements because they operate on server-side markup rather than rendering
standalone UI.
</div>