{#
  The feedback layer: what the page says while it is busy, and afterwards.

  0.6 fills the rest in (alert, toast, skeleton). 0.1 lands `spinner` and
  `dialog`, because htmx makes both first-week states: "a request is in flight"
  and "show me this row without leaving the page". Without a component for
  either, the app writes its own <svg> and its own overlay — a colour literal
  and a stack of utilities outside the closed vocabulary.
#}
{% from "ui/attrs.html" import attrs %}
{% from "ui/icon.html" import icon %}

{#
  spinner(size, tone, label, indicator, **html_attrs)

  size:  xs | sm | default | lg
  tone:  muted | primary | success | warning | info | destructive

  One Lucide arc plus `animate-spin`: no second SVG asset and no runtime JS.
  `stroke="currentColor"` takes the colour of whatever it sits in, so a spinner
  inside a primary button needs no tone.

  `label` chooses between two accessibility modes:

  * no label — the glyph stays `aria-hidden` and decorative. Correct when text
    beside it already says what is happening ("Saving…"): announcing the glyph
    as well says it twice.
  * a label  — `role="status"` and a visually hidden name. Correct when the
    spinner is the only announcement. `role="status"` implies a polite live
    region, so `aria-live` would repeat it.

  `indicator=true` adds htmx's `htmx-indicator` class, which is all
  `hx-indicator` needs: htmx injects the show/hide rule itself, so the spinner
  renders hidden and appears only while the request naming it is in flight — a
  loading state with no JavaScript of ours and no round trip to reveal it.

      {{ button("Start", hx_post=…, hx_indicator="#busy") }}
      {{ spinner(indicator=true, id="busy", label="Starting") }}
#}
{% macro spinner(size="default", tone="muted", label=none, indicator=false) -%}
  {#
    Closed lookups, not interpolation. Tailwind finds a class by scanning this
    file's text, so `text-{{ tone }}` renders happily and is absent from the
    stylesheet. Every value below appears here literally, and an unknown key
    falls back rather than emitting a class that does not exist.
  #}
  {%- set sizes = {"xs": 12, "sm": 14, "default": 16, "lg": 24} -%}
  {%- set tones = {
    "muted": "text-muted-foreground",
    "primary": "text-primary",
    "success": "text-success",
    "warning": "text-warning",
    "info": "text-info",
    "destructive": "text-destructive",
    "current": "",
  } -%}
  {%- set tone_class = tones.get(tone, tones["muted"]) -%}
  <span class="inline-flex items-center{% if tone_class %} {{ tone_class }}{% endif %}{% if indicator %} htmx-indicator{% endif %}"
    {%- if label %} role="status"{% endif %}
    {%- if kwargs %}{{ attrs(kwargs) }}{% endif %}>
    {{- icon("loader-circle", sizes.get(size, 16), "animate-spin") -}}
    {%- if label %}<span class="sr-only">{{ label }}</span>{% endif -%}
  </span>
{%- endmacro %}

{#
  dialog(id, title, description, size, footer, dismissible, **html_attrs)

  size: sm | default | lg

  A panel over the page, opened and closed by the browser, with no JavaScript
  from us and none from the app:

      {{ button("Details", popovertarget="task-7") }}

      {% call dialog("task-7", title="Ship the render benchmark") %}
        …
      {% endcall %}

  `popovertarget` is a plain HTML attribute and needs no macro of its own: it
  passes through `**attrs` on whatever button you already have. Closing is the
  same attribute plus `popovertargetaction="hide"`, which is what the ✕ in the
  corner uses.

  What the Popover API provides: open state, the top layer, the backdrop,
  Escape-to-close, click-outside-to-close, and focus returned to the trigger.
  What it lacks against `showModal()` is modality — the page behind stays
  reachable by Tab and by a screen reader — so this is `role="dialog"` without
  `aria-modal`, the honest label for what the markup does. That trade is right
  for showing a record and wrong for a confirmation that must not be dodged:
  `hx-confirm` covers that case, and a real modal is a decision to ship
  JavaScript (CHARTER.md §11.3) rather than something to fake with CSS.

  The body carries `id="<id>-body"`, the seam htmx needs: the trigger fetches
  the content and targets that id, so a list of rows renders one shell per row
  and pays for the contents only when one is opened.

      {{ button("Details", popovertarget="task-7",
                hx_get=url_for(request, "task_detail", task_id=7),
                hx_target="#task-7-body") }}

  Both happen on the one click, in the order that reads best: the panel opens
  immediately with whatever the shell holds (a spinner), and the response
  replaces it. htmx cancels the click's default action only for anchors and
  submit buttons, so the popover on a plain button still opens.

  A shell per row also keeps an open panel from showing the previous row's data
  while a request is in flight. One shared dialog re-targeted at each row is
  the right shape for a long list, and it has to accept that flash.

  One trap, and it is silent: `hx-swap` is inherited. A trigger nested inside an
  element that swaps itself with `outerHTML` — a row that polls, say — replaces
  the body element rather than its contents, id and all, so the first open works
  and none of the others do. Spell out `hx_swap="innerHTML"` there.
#}
{% macro dialog(id, title=none, description=none, size="default", footer=none, dismissible=true) -%}
  {#
    Basecoat sizes `.dialog > *` and gives `.alert-dialog` a `data-size`; the
    two extra widths extend that same attribute API rather than inventing a
    `dialog-lg` class. `default` emits nothing, so the common case inherits
    Basecoat's own rule.
  #}
  {%- set sizes = {"sm": "sm", "default": "", "lg": "lg"} -%}
  {%- set size_attr = sizes.get(size, "") -%}
  <div class="dialog" popover id="{{ id }}" role="dialog"
    {%- if size_attr %} data-size="{{ size_attr }}"{% endif %}
    {%- if title %} aria-labelledby="{{ id }}-title"{% endif %}
    {%- if description %} aria-describedby="{{ id }}-description"{% endif %}
    {%- if kwargs %}{{ attrs(kwargs) }}{% endif %}>
    {#
      The inner element is the panel. Basecoat styles `.dialog > *`, so this
      wrapper is load-bearing: the outer element is only a positioning context
      and the backdrop's owner. That is also why it can be a <div> rather than
      a <dialog> — nothing here calls `showModal()`, and `<dialog popover>`
      mixes two open-state mechanisms for no gain.
    #}
    <div>
      {%- if title or description %}
      <header>
        {% if title %}<h2 id="{{ id }}-title">{{ title }}</h2>{% endif %}
        {% if description %}<p id="{{ id }}-description">{{ description }}</p>{% endif %}
      </header>
      {%- endif %}
      <section id="{{ id }}-body">{{ caller() }}</section>
      {%- if footer %}<footer>{{ footer }}</footer>{% endif %}
      {%- if dismissible %}
      {#
        `autofocus` moves focus into the panel when it opens: a popover does
        not do that on its own, and a screen reader never announces a dialog
        nobody is focused in. It stays inert until the panel is shown, because
        a closed popover is `display:none` and so not focusable — eight of
        these on a page contend over nothing.
      #}
      <button class="btn" data-variant="ghost" data-size="icon-sm" type="button"
              popovertarget="{{ id }}" popovertargetaction="hide"
              aria-label="Close" autofocus>{{ icon("x", 16) }}</button>
      {%- endif %}
    </div>
  </div>
{%- endmacro %}

{#
  toaster(align) — the region toasts appear in. One per page, in the shell.

  `id="toaster"` is fixed: Basecoat registers its controller against `#toaster`
  and writes its CSS as `.toaster .toast`, so a toast outside this element gets
  neither the behaviour nor the skin.

  Empty is the normal state. It costs one element and no CSS, and keeping it
  always present lets a server-rendered toast arrive on a page that did not
  know in advance one was coming.
#}
{% macro toaster(align="end") -%}
  <div id="toaster" class="toaster" data-align="{{ align }}">{{ caller() if caller else "" }}</div>
{%- endmacro %}

{#
  toast(title, description, category, duration, action_label, action_href)

  category: info | success | warning | error

  Server-rendered, which is the point. Basecoat scans the DOM for `.toast` and
  initialises whatever it finds, so a toast written into the page by a template
  behaves like one raised by script: it animates in, times out, and dismisses
  on click. No JavaScript of ours, and nothing to call after the page loads.

  That is how a message survives a redirect. `HX-Trigger` cannot: the document
  it would fire into is replaced before it arrives. Markup in the next page is
  the only carrier a full navigation leaves intact.

  `duration` is milliseconds, or -1 to stay until dismissed. Left unset,
  Basecoat uses 3 s, and 5 s for `error`.

  The icon is fjkit's rather than Basecoat's inline SVG: one icon set keeps
  stroke weight and corner radius consistent across the page, and it costs
  nothing because `icon()` is already resolved per render.
#}
{% set _TOAST_ICONS = {
  "info": "info",
  "success": "circle-check",
  "warning": "triangle-alert",
  "error": "circle-x",
} %}

{% macro toast(title, description=none, category="info", duration=none, action_label=none, action_href=none) -%}
  <div class="toast"
       role="{{ "alert" if category == "error" else "status" }}"
       aria-atomic="true"
       data-category="{{ category }}"
       {%- if duration is not none %} data-duration="{{ duration }}"{% endif %}>
    <div class="toast-content">
      {{ icon(_TOAST_ICONS.get(category, "info"), 16) }}
      <section>
        <h2>{{ title }}</h2>
        {% if description %}<p>{{ description }}</p>{% endif %}
      </section>
      {% if action_label and action_href %}
        <footer>
          <a href="{{ action_href }}" class="btn" data-toast-action>{{ action_label }}</a>
        </footer>
      {% endif %}
    </div>
  </div>
{%- endmacro %}

{#
  alert(title, body, variant, icon_name)

  Basecoat's alert is four optional slots under one `.alert` root: an icon, a
  heading, a `<section>` of prose, and a `<footer>` of actions. The footer is
  positioned absolutely against the root, so actions arrive through `{% call %}`
  rather than as a parameter — a caller block is the only shape that lets a
  button carry its own `hx-*` attributes.

  `variant` is Basecoat's own `data-variant` plus the three fjkit adds in
  `fjkit.css`, so the vocabulary matches `badge`. The icon follows the variant
  when the caller names none: an alert marked "destructive" showing a tick is
  worse than an alert with no icon.
#}
{% set _ALERT_ICONS = {
  "destructive": "circle-alert",
  "success": "circle-check",
  "warning": "triangle-alert",
  "info": "info",
} %}

{% macro alert(title, body=none, variant="", icon_name=none) -%}
  {%- set glyph = icon_name if icon_name is not none else _ALERT_ICONS.get(variant) -%}
  <div class="alert"
       {%- if variant %} data-variant="{{ variant }}"{% endif %}
       {#
         `alert` for destructive, `status` for the rest: a screen reader
         interrupts for the first and waits for a pause on the second, which is
         the distinction the variant already draws.
       #}
       role="{{ "alert" if variant == "destructive" else "status" }}"
       {%- if kwargs %}{{ attrs(kwargs) }}{% endif %}>
    {%- if glyph %}{{ icon(glyph, 16) }}{% endif %}
    <h2>{{ title }}</h2>
    {%- if body %}<section>{{ body }}</section>{% endif %}
    {%- if caller is defined %}<footer>{{ caller() }}</footer>{% endif %}
  </div>
{%- endmacro %}

{#
  skeleton(shape, width, lines)

  Upstream's skeleton is a bare `.skeleton` sized by whatever utilities the
  caller writes — `h-4 w-[150px]`, `size-10 rounded-full`. An app template
  cannot write those (A2), so the sizes are parameters: `shape` picks the
  geometry, `width` picks one of five fractions. Both are closed lookups, which
  also keeps the classes in the stylesheet — Tailwind scans this file's text,
  and an interpolated `w-{{ width }}` renders happily while missing from the
  build.

  `lines` > 1 renders a paragraph with a short last line. That is the shape
  real text has; a placeholder that ignores it reads as a table.
#}
{% set _SKELETON_SHAPES = {
  "text": "h-4 rounded-md",
  "heading": "h-6 rounded-md",
  "control": "h-9 rounded-md",
  "avatar": "size-10 shrink-0 rounded-full",
  "block": "aspect-video rounded-lg",
} %}
{% set _SKELETON_WIDTHS = {
  "full": "w-full",
  "three-quarters": "w-3/4",
  "half": "w-1/2",
  "third": "w-1/3",
  "quarter": "w-1/4",
} %}

{% macro skeleton(shape="text", width="full", lines=1, label=none) -%}
  {%- set geometry = _SKELETON_SHAPES.get(shape, _SKELETON_SHAPES["text"]) -%}
  {%- set span = _SKELETON_WIDTHS.get(width, "w-full") -%}
  {#
    One `role="status"` on the group, not on every bar: a placeholder made of
    six bars is one thing loading, and six live regions would be announced six
    times. `aria-hidden` on the bars keeps their emptiness out of the tree.
  #}
  <div role="status"{% if label %} aria-label="{{ label }}"{% else %} aria-label="Loading"{% endif %}
       class="flex flex-col gap-2"{% if kwargs %}{{ attrs(kwargs) }}{% endif %}>
    {%- for line in range(lines) %}
      {#
        The last line of a multi-line block is short, so the paragraph ends
        where a paragraph ends rather than squaring off.
      #}
      <div aria-hidden="true"
           class="skeleton {{ geometry }} {{ "w-3/4" if lines > 1 and loop.last else span }}"></div>
    {%- endfor %}
  </div>
{%- endmacro %}