{# Island mount point — client-hydrated ES module. Contract:
   ~/.claude/skills/ux-architect/components/island.md (UX-059).
   Server renders this shell + fallback; dz-islands.js
   (runtime/static/js/dz-islands.js) consumes the data-island-*
   attrs to dynamic-import the module and call mount({el, props,
   apiBase}). DSL authors reach this via the `island` construct. #}
<div data-island="{{ island.name }}"
     data-island-src="{{ island.src }}"
     data-island-props='{{ island.props_json }}'
     data-island-api-base="{{ island.api_base }}"
     class="dz-island">
  {% if island.fallback %}
  {{ island.fallback }}
  {% else %}
  {# v0.62 CSS refactor: .dz-skeleton in components/fragments.css already
     supplies the muted-bg + pulse animation; per-element Tailwind utilities
     are no longer needed. .dz-island-skeleton sets the fixed-height stub. #}
  <div class="dz-skeleton dz-island-skeleton"></div>
  {% endif %}
</div>