{% comment %}
Hunked line-level diff. Expects Alpine scope with `leftText`, `rightText`,
`leftLabel`, `rightLabel` bindings. Uses computeHunks() from eval-diff.js.

leftText = current draft (shown as removals when lines differ)
rightText = comparison target (shown as additions when lines differ)
{% endcomment %}
<div class="pm-diff-panel border border-border rounded-md overflow-hidden"
     x-data="{ hunks: [] }"
     x-effect="hunks = computeHunks(leftText, rightText)">
    <div class="pm-diff-unified-header">
        <span class="text-red-600">−</span> <span x-text="leftLabel || 'Left'"></span>
        <span class="mx-2 text-muted-foreground">/</span>
        <span class="text-green-600">+</span> <span x-text="rightLabel || 'Right'"></span>
    </div>
    <div class="pm-diff-body">
        <template x-for="(hunk, hi) in hunks" :key="hi">
            <div>
                <div x-show="hunk.separator" class="pm-diff-separator">
                    <span class="pm-diff-separator-dots">···</span>
                </div>
                <template x-for="(line, li) in hunk.lines" :key="hi + '-' + li">
                    <div class="pm-diff-line"
                         :class="{
                             'pm-diff-line--add': line.type === 'add',
                             'pm-diff-line--remove': line.type === 'remove',
                         }">
                        <span class="pm-diff-gutter"
                              x-text="line.type === 'add' ? '+' : line.type === 'remove' ? '−' : ' '"></span>
                        <span class="pm-diff-text" x-text="line.text"></span>
                    </div>
                </template>
            </div>
        </template>
    </div>
</div>