Component template

One UI component (React/Vue view, page or widget) or service component (worker, handler, background task). Lives at docs/repos/<repo>/components/<page-slug>.md.

Generated by npm run new:page -- <repo> component <page-slug> "<Title>".

Template

---
title: "{{title}}"
description: "TODO: One sentence on what this component does."
status: draft
---

# {{title}}

TODO: One-sentence summary of the component.

| Field | Value |
| --- | --- |
| Source | `TODO: path/to/Component` |
| Type | TODO: page / view / widget / service / worker |
| Rendered or used by | TODO |

## Purpose

TODO: What the component is for and where the user (or system) meets it.

## Inputs / Parameters

TODO: Props, arguments, context or configuration it reads.

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| TODO | TODO | TODO | TODO | TODO |

## Outputs / Return value

TODO: What it renders or returns, events or callbacks it emits, and side
effects (network calls, storage writes).

| Output | Kind | Description |
| --- | --- | --- |
| TODO | render / event / callback / side effect | TODO |

## State

TODO: Internal state, where shared state comes from, and what triggers
updates.

## Usage

```jsx
// TODO: usage example
```

## Implementation

TODO: Add implementation details/code. Explain the structure, the key hooks or
handlers, and anything non-obvious.

## Architecture

TODO: Add diagram or Mermaid diagram.

```mermaid
flowchart TD
  parent[TODO: Parent or caller] --> comp["{{title}}"]
  comp --> child[TODO: Child or collaborator]
  comp --> data[(TODO: Data source)]
```

## Dependencies

| Dependency | Kind | Why it's needed |
| --- | --- | --- |
| TODO | internal / external | TODO |

## Edge cases

- TODO: Empty, loading and error states, offline, permissions, very large
  inputs.

## Accessibility

TODO: Keyboard behavior, focus handling, labels. Write `Not applicable` for
non-UI components.

## Related components

- TODO: Links to related components, modules, functions or APIs.

Placeholders

{{title}}  Page title, usually the component name