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

A contact/ticket form that reuses the base form controls, with an attachment dropzone and a confirmation state:

Open “Support — contact” in a new tab ↗

Tickets

A ticket-list table with status badges and priority indicators:

Open “Support — tickets” in a new tab ↗

Ticket detail

A conversation thread of stacked message cards (customer / agent / internal note), a reply composer, and a canned-reply picker:

Open “Support — ticket detail” in a new tab ↗

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

Usage

<!-- 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>