Support kit
The Support kit (@qazana/strata/support) is the helpdesk surface — where customers file
tickets and agents work them. It’s standalone on base.css (the form controls and .form-field
groups come from base), scoped under .support.
It stays on the generic side of the boundary: a contact form, a ticket list, and a ticket-detail
conversation thread. No SLA timers, agent routing, live send, or ticketing backend — those are
per-product/helpdesk concerns. Zero new behavior JS (the canned-reply picker is a native
<details> dropdown).
Contact
Section titled “Contact”A contact/ticket form that reuses the base form controls, with an attachment dropzone and a confirmation state:
Tickets
Section titled “Tickets”A ticket-list table with status badges and priority indicators:
Ticket detail
Section titled “Ticket detail”A conversation thread of stacked message cards (customer / agent / internal note), a reply composer, and a canned-reply picker:
What’s inside
Section titled “What’s inside”| Component | Class / hook | Notes |
|---|---|---|
| Contact form | .support-form |
reuses base .form-field + controls |
| Attachment | .attach |
dashed dropzone |
| Confirmation | .support-sent |
icon + .ref ticket number |
| Status badge | .badge.open/.pending/.solved/.closed |
info/warning/primary/muted |
| Priority | .prio.low/.normal/.high/.urgent |
leading dot, semantic tokens |
| Ticket list | .ticket-list |
rows link to ticket |
| Ticket header | .ticket-head |
title + meta + actions |
| Thread | .thread > .msg |
stacked cards |
| Message variants | .msg.agent · .msg.note |
agent + internal note |
| Composer | .composer |
textarea + toolbar |
| Macros | .macros (<details>) |
canned replies; insertion app-side |
<!-- support / helpdesk page --><link rel="stylesheet" href="@qazana/strata/support"><script type="module" src="@qazana/strata"></script>
<body class="support"> <!-- all support components live inside .support --></body>