@plotinus/matrix-package-observable-coordinator/dist/presentation/coordinator-presentation.js

Observable coordinator pattern components using IntrospectableBaseCommunicationComponent and proper presentation architecture

export class CoordinatorPresentationElement extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }
    bindTo(commComponent) {
        this.commComponent = commComponent;
        // Subscribe to state changes
        if (commComponent.eventBus) {
            const stateKey = `cmp:${commComponent.id}:_stateChanged`;
            commComponent.eventBus.on(stateKey, () => this.render());
        }
        this.render();
    }
    render() {
        const state = this.commComponent?.state || {};
        this.shadowRoot.innerHTML = `
            <style>
                :host { display: block; }
                .coordinator { border: 2px solid #58a6ff; padding: 16px; margin: 8px; border-radius: 8px; }
            </style>
            <div class="coordinator">
                <h3>Coordinator: ${this.commComponent?.id}</h3>
                <div>Workers: ${state.workerCount || 0}</div>
                <slot></slot>
            </div>
        `;
    }
}