# HTML-Artifact Channel Templates

Reference implementations for single-file HTML deliverables.
2 artefacts ship in this channel, in `examples/`:

- `audit-dashboard-v1.html` — **Dashboard** (chrome: `dashboard`).
  SaaS-shape deliverable. Scanning surface, densely-tabular,
  interactive navigation. Inspired by Nuxt UI Pro Dashboard.
- `kb-processing-report-v1.html` — **Interactive report** (chrome:
  `interactive-report`). Linear readable shape. Client summaries, audit
  narratives, KB processing reports. Inspired by Nuxt UI's Page / Prose
  / Toc kits.


Both artefacts share the same runtime stack (vue3+tailwind),
per-asset-family delivery contract, and Lucide icon sprite — only the
chrome, artefact-specific components, and content differ.

## Runtime (D-HTML-1)

- **Stack**: Vue 3.x + Tailwind 3.x CDN, no bundler, no build step
- **Delivery**: single HTML file, one URL, one page (D-HTML-5 forbids routing)
- **Theme**: default light, dark opt-in via `html.dark` class

## Shared partials (`shared/`)

The artefacts in `examples/` inline these at render time. Re-generated
from brand.json on every `task build`:

- `tokens.css` — palette CSS vars byte-identical with
  `packages/layers/nuxt-layer-ui/app/assets/css/ontopix.css` (D-HTML-6
  byte_identity_with contract). Also emits per-family shade-shifting
  semantic token vars honoring `brand/theme/color_modes.yaml`.
- `tailwind-config.html` — inline Tailwind CDN config with `fontFamily`
  from `brand.typography.config.fonts` and the full palette from
  `brand.color.data.palette.colors`.
- `safelist.html` — Tailwind CDN JIT safelist sentinel enumerating
  every `bg-<tone>` / `text-<tone>` class literal consumed by badges,
  pipeline dots, and histogram bars.
- `icons.svg` — Lucide SVG symbol sprite (inline per D-HTML-7
  `assets.icons.delivery: inline`).
- `fonts.html` — Google Fonts `<link>` block (inline woff2 base64 is
  tracked as followup F-1).

## Artefacts (D-HTML-2, cap = 2)

### `dashboard` — Dashboard

- **Chrome** (D-HTML-3): `dashboard`
- **Font context**: `ui`
- **Surface type**: `scanning`
- **Hero device** (Q-V.1): `forbidden`
- **Components** (D-HTML-4): data-table, tabs, chat-messages, collapsible, pagination, card, badge, button, kbd

### `interactive-report` — Interactive report

- **Chrome** (D-HTML-3): `interactive-report`
- **Font context**: `docs`
- **Surface type**: `reading`
- **Hero device** (Q-V.1): `allowed`
- **Components** (D-HTML-4): data-table, timeline, chat-messages, collapsible, card, badge

## D-HTML decisions honored by these templates

| # | Decision | How templates honor it |
|---|----------|------------------------|
| D-HTML-1 | Vue+Tailwind CDN single-file runtime | No bundler, no build step; artefacts are `.html` delivered as-is |
| D-HTML-2 | Artefact enum capped at 2 | `examples/` directory has exactly 2 files |
| D-HTML-3 | Two chrome contracts | `shared/chrome.yaml` enumerates the 2 chrome shells |
| D-HTML-4 | Component vocabulary capped at ~10 | `shared/components.yaml` + `safelist.html` enumerate used families |
| D-HTML-5 | Interactivity primitives locked | No routing, no localStorage, no telemetry in any template |
| D-HTML-6 | Theme inherits brand/theme/ | `tokens.css` is byte-identical with `ontopix.css` for palette block |
| D-HTML-7 | Inline-by-default assets | Icons + logo inline; fonts CDN pending F-1 |

## Editing guidance

Templates expect to be edited by a human or an AI agent who is:

1. **Replacing sample content** (Meridian Q1 2026 calls, Xenos KB pipeline
   milestones) with client-specific content — the JSON data blocks inside
   `<script type="application/json">` are the primary edit surface. The
   Vue runtime below reads them; don't rewrite the runtime.
2. **Keeping the chrome** — do not add a sidebar to `interactive-report`,
   do not add a masthead to `dashboard`. Those boundaries are enforced
   in `chrome.yaml` (`forbidden_slots`).
3. **Staying within the component vocabulary** — if you find yourself
   reaching for a modal, dialog, toast, or notification, that's the
   wrong channel (see `components.yaml` `forbidden_components`).

## Re-generating from brand

```bash
task build                      # regenerates packages/channels/html-artifact/
                                # plus shared/ from brand.json
```

## Provenance

Generated from brand.json (version `2.0.0`).
Channel version: `2.0.0`, status `stable`.
See `brand/channels/html-artifact/metadata.yaml` for the source contract.