{# Region wrapper macro — shared card shell for all workspace/regions/* templates #}
{# Contract: ~/.claude/skills/ux-architect/components/region-wrapper.md (UX-035) #}
{#                                                                                #}
{# Usage:                                                                          #}
{#   {% from 'macros/region_wrapper.html' import region_card %}                    #}
{#   {% call region_card(title) %}                                                 #}
{#     ... region-specific content here ...                                        #}
{#   {% endcall %}                                                                 #}

{% macro region_card(title, name=None) %}
<div data-dz-region{% if name or region_name is defined %} data-dz-region-name="{{ name or region_name }}"{% endif %} class="bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[6px] shadow-[0_1px_3px_rgb(0_0_0/0.04)]" id="{% if name or region_name is defined %}region-{{ name or region_name }}{% endif %}">
  <div class="p-3">
    {% if title %}
    <h3 class="text-[14px] font-semibold text-[hsl(var(--foreground))] mb-3">{{ title }}</h3>
    {% endif %}
    {{ caller() }}
  </div>
</div>
{% endmacro %}