{% extends "base.html" %}

{% block title %}Playground · The Bundle{% endblock %}

{% import "components/macros.html" as component_macros with context %}

{% block styles %}
{{ component_macros.styles(component_assets) }}
<link rel="stylesheet" href="{{ url_for('playground', path='styles.css') }}?v={{ asset_version }}" />
{% endblock %}

{% block content %}
<main class="playground">
    <header class="playground__intro">
        <p class="eyebrow">Playground</p>
        <h1>Component sandbox</h1>
        <p class="muted">Prototype components with synchronized backend + frontend hooks.</p>
    </header>

    {{ component_macros.render(components) }}
</main>
{% endblock %}

{% block scripts %}
{{ component_macros.scripts(component_assets) }}
<script type="module" src="{{ url_for('playground', path='ws-status.js') }}?v={{ asset_version }}"></script>
{% endblock %}