{#
  Hand-drawn SVG primitives.

  Paths are copied verbatim from design_handoff_agent_drop/prototype/tokens.jsx.
  The handoff says:

    "They're deliberately imperfect and shouldn't be re-drawn by hand."

  So don't tidy them up. Don't simplify. Don't regenerate.

  Whimsy is pinned at 10 for Agent Drop, so these render unconditionally — no
  threshold gating here. Call sites should wrap in a container with
  `position: relative` for the absolutely-positioned primitives
  (hand_circle, pen_underline).
#}

{# Imperfect hand-drawn circle — drawn behind the "N new" counter and similar
   emphasis marks. Absolutely positioned so it sits behind the foreground text;
   callers provide the `position: relative` context. #}
{% macro hand_circle(color="var(--color-peach-deep)", size=36, stroke_width=2) -%}
<svg
  width="{{ size }}"
  height="{{ size }}"
  viewBox="0 0 36 36"
  aria-hidden="true"
  focusable="false"
  style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;"
>
  <path
    d="M18 3 Q 28 4, 32 11 T 32 24 Q 28 33, 17 33 T 4 24 Q 2 14, 8 7 T 19 3"
    stroke="{{ color }}"
    stroke-width="{{ stroke_width }}"
    fill="none"
    stroke-linecap="round"
    opacity="0.9"
  />
</svg>
{%- endmacro %}


{# Wobbly pen underline — sits beneath source tags / meta labels.
   Width is driven by `length_chars * 7.3`, matching the prototype's ~7.3px
   per-char heuristic. Absolutely positioned at bottom: -4px of its container. #}
{% macro pen_underline(length_chars=10, color="var(--color-peach)") -%}
{%- set w = (length_chars * 7.3) | round(2) -%}
<svg
  width="{{ w }}"
  height="6"
  viewBox="0 0 {{ w }} 6"
  preserveAspectRatio="none"
  aria-hidden="true"
  focusable="false"
  style="display: block; position: absolute; left: 0; bottom: -4px; pointer-events: none;"
>
  <path
    d="M2 3 Q {{ (w * 0.3) | round(2) }} 1.5, {{ (w * 0.5) | round(2) }} 3 T {{ (w - 2) | round(2) }} 3"
    stroke="{{ color }}"
    stroke-width="1.2"
    fill="none"
    stroke-linecap="round"
    opacity="0.6"
  />
</svg>
{%- endmacro %}


{# Brush mark — decorative hand-drawn stroke for urgent / high priority.
   Two overlapping paths: main stroke (3.2 width, 0.85 opacity) + undertone
   (1.4 width, 0.35 opacity). Two size variants per the handoff: 48x14 for
   urgent, 28x10 for high. #}
{% macro brush_mark(variant="urgent", color="var(--color-peach-deep)") -%}
  {%- if variant == "high" -%}
    {%- set w = 28 -%}
    {%- set h = 10 -%}
  {%- else -%}
    {%- set w = 48 -%}
    {%- set h = 14 -%}
  {%- endif -%}
<svg
  width="{{ w }}"
  height="{{ h }}"
  viewBox="0 0 48 14"
  aria-hidden="true"
  focusable="false"
  style="display: inline-block; vertical-align: middle;"
>
  <path
    d="M2 7 Q 8 3, 14 6 T 26 7 Q 34 9, 42 5 L 46 8"
    stroke="{{ color }}"
    stroke-width="3.2"
    stroke-linecap="round"
    fill="none"
    opacity="0.85"
  />
  <path
    d="M3 9 Q 10 10, 18 8 T 34 9 Q 40 10, 45 10"
    stroke="{{ color }}"
    stroke-width="1.4"
    stroke-linecap="round"
    fill="none"
    opacity="0.35"
  />
</svg>
{%- endmacro %}


{# Accessible confirm dialog.

   Replaces `onsubmit="return confirm('…')"` with a native <dialog>
   role="alertdialog". The matching <form id="{form_id}"> on the page
   gets its submit intercepted: the dialog opens with showModal(), and
   only resolves to the form actually submitting when the user clicks
   the confirm button. Cancel / Escape / clicking the backdrop close
   without submission. Native <dialog> handles the focus trap and
   focus-return-to-trigger behaviour.

   Args:
     form_id      — DOM id of the <form> being guarded.
     title        — short heading shown at the top of the dialog.
     message      — body text under the heading.
     confirm_text — label on the destructive-confirm button.
     danger       — when true, confirm button uses .btn--danger.
#}
{% macro confirm_dialog(form_id, title, message, confirm_text, danger=true) -%}
{%- set dialog_id = form_id ~ "-confirm-dialog" -%}
{%- set title_id = dialog_id ~ "-title" -%}
{%- set msg_id = dialog_id ~ "-message" -%}
<dialog id="{{ dialog_id }}"
        class="confirm-dialog"
        role="alertdialog"
        aria-labelledby="{{ title_id }}"
        aria-describedby="{{ msg_id }}"
        data-confirm-for="{{ form_id }}">
  <form method="dialog" class="confirm-dialog__form">
    <h2 id="{{ title_id }}" class="confirm-dialog__title">{{ title }}</h2>
    <p id="{{ msg_id }}" class="confirm-dialog__message">{{ message }}</p>
    <div class="confirm-dialog__actions">
      <button type="submit"
              value="cancel"
              class="btn btn--ghost confirm-dialog__cancel">Cancel</button>
      <button type="submit"
              value="confirm"
              class="btn{% if danger %} btn--danger{% else %} btn--primary{% endif %} confirm-dialog__confirm"
              autofocus>{{ confirm_text }}</button>
    </div>
  </form>
</dialog>
<script>
  (function () {
    var formId = {{ form_id | tojson }};
    var dialogId = {{ dialog_id | tojson }};
    var form = document.getElementById(formId);
    var dialog = document.getElementById(dialogId);
    if (!form || !dialog) return;

    // Track explicit user confirmation so `requestSubmit()` re-entry
    // bypasses our submit handler instead of re-opening the dialog.
    var confirmed = false;

    form.addEventListener("submit", function (e) {
      if (confirmed) return;
      e.preventDefault();
      if (typeof dialog.showModal === "function") {
        dialog.showModal();
      } else {
        // Fallback for browsers without <dialog> support: native confirm().
        var msg = dialog.querySelector(".confirm-dialog__message");
        if (window.confirm((msg && msg.textContent) || "Are you sure?")) {
          confirmed = true;
          form.submit();
        }
      }
    });

    dialog.addEventListener("close", function () {
      if (dialog.returnValue === "confirm") {
        confirmed = true;
        // Use requestSubmit() so the form's submit event still fires
        // for any remaining handlers (e.g. validation), but our guard
        // above lets it through this time.
        if (typeof form.requestSubmit === "function") {
          form.requestSubmit();
        } else {
          form.submit();
        }
      }
      // Reset the return value so a subsequent open starts fresh.
      dialog.returnValue = "";
    });

    // Click on backdrop = cancel. Native <dialog> doesn't do this for
    // us; detect by comparing the click target to the dialog itself.
    dialog.addEventListener("click", function (e) {
      if (e.target === dialog) {
        dialog.close("cancel");
      }
    });
  })();
</script>
{%- endmacro %}


{# Loose arrow — empty-state curved arrow, rotated 8 degrees.
   Paths copied verbatim from tokens.jsx LooseArrow. #}
{% macro loose_arrow(color="var(--color-ink-mute)", width=90, height=60) -%}
<svg
  width="{{ width }}"
  height="{{ height }}"
  viewBox="0 0 90 60"
  aria-hidden="true"
  focusable="false"
  style="display: inline-block; transform: rotate(8deg);"
>
  <path
    d="M8 10 Q 30 14, 50 28 T 76 48"
    stroke="{{ color }}"
    stroke-width="1.6"
    fill="none"
    stroke-linecap="round"
  />
  <path
    d="M68 44 L 76 48 L 72 40"
    stroke="{{ color }}"
    stroke-width="1.6"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>
{%- endmacro %}