define('a-row', {
  $({ columns, data }) {
    let { div } = mx;
    return columns.map(col => {
      let value = col.fn?.(data[col.key], data) || data[col.key];
      return div({ class: 'table-cell' }, value);
    });
  }
});

// Use it
let columns = [
  { key: 'name', label: 'Name' },
  { key: 'age', label: 'Age' }
];
let user = { name: 'Alice', age: 25 };

document.body.render(
  mx.aRow( { columns, data: user })
);

define('a-table', {
  $({ columns = [], data = [], rowHeight = 48, static = false }) {
    let { div } = mx;

    let header = div({ class: 'table-header' },
      ...columns.map(col => div({ class: 'table-cell' }, col.label || col.key))
    );

    let rows = data.map((item, index) =>
      mx.aRow({ columns, data: item, index })
    );

    if (static) {
      return [header].concat(rows);
    } else {
      return [header, mx.virtualContainer({ height: 400, rowHeight, rows })];
    }
  }
});

// Use it
document.body.render(
  mx.aTable( {
    columns: [{ key: 'name' }, { key: 'age' }],
    data: [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]
  })
);

define('my-card', {
    $({ title }) {
        return mx.div({ class: 'card' },
            mx.h2(title)
            // ... where would the children go?
        );
    }
});

// ✗ mx.p('body text') is dropped - the component never sees it
mx.myCard({ title: 'Hello' }, mx.p('body text'))

// The component's $ receives only { title: 'Hello' }.
// Positional children are intentionally not forwarded.

define('my-card', {
    $({ header, body, footer }) {
        return mx.div({ class: 'card' },
            mx.div({ class: 'card__header' }, header),
            mx.div({ class: 'card__body' },   body),
            mx.div({ class: 'card__footer' }, footer)
        );
    }
});

mx.myCard({
    header: mx.h2('Title'),
    body:   mx.p('Body text'),
    footer: mx.button('OK')
})

// ✓ Correct - kebab-case in define(), either form at call site
define('my-button', { $() {...} });
mx.myButton()       // → <my-button>
mx('my-button')     // → <my-button>

// ✗ Wrong - camelCase in define() silently breaks
define('myButton', { $() {...} });   // stored as 'mybutton'
mx.myButton()                         // looks up 'my-button' (mismatch - no $ runs)

// ✗ Wrong - PascalCase produces a leading hyphen
mx.MyButton()       // tag "-my-button" (invalid custom element name)

// ✓ Single description
define('greeting', {
    $({ name }) {
        return mx.div('Hello, ' + name);
    }
});

// ✓ Array of children
define('counter', {
    $({ count }) {
        return [
            mx.button('-'),
            mx.span(count),
            mx.button('+')
        ];
    }
});

// ✓ Empty array to render nothing
define('conditional', {
    $({ visible }) {
        if (!visible) return [];
        return mx.div('visible content');
    }
});

// ✗ Forgot the return keyword - crashes
define('broken', {
    $({ msg }) {
        mx.div(msg);   // not returned!
    }
});

define('video-player', {
    $({ src, playing }) {
        this._video ||= dom.video({ src });
        if (playing) this._video.play();
        else this._video.pause();
        return [this._video];
    },

    // Imperative API methods - available on every instance
    playPause() {
        let v = this._video;
        v.paused ? v.play() : v.pause();
    },

    seek(seconds) {
        if (this._video) this._video.currentTime = seconds;
    },

    reset() {
        this.$state = {};
        this._video = null;
    }
});

// Later, from anywhere:
let player = document.querySelector('video-player');
player.playPause();
player.seek(30);

define('a', {
    $attrs(attrs) {
        if (attrs.target === '_blank' && !attrs.rel)
            attrs = { ...attrs, rel: 'noopener noreferrer' };
        return Element.prototype.$attrs.call(this, attrs);
    }
});

// Now every link is safe by construction
mx.a({ href: 'https://example.com', target: '_blank' }, 'Link')
// → <a href="..." target="_blank" rel="noopener noreferrer">Link</a>

define('img', {
    $attrs(attrs) {
        if (attrs.src && /\.png$/.test(attrs.src) && !attrs.srcset) {
            let base = attrs.src.replace(/\.png$/, '');
            attrs = { ...attrs,
                srcset: `${base}.png 1x, ${base}@2x.png 2x, ${base}@3x.png 3x`
            };
        }
        return Element.prototype.$attrs.call(this, attrs);
    }
});

mx.img({ src: '/hero.png', alt: 'Hero' })
// → <img src="/hero.png" srcset="/hero.png 1x, /hero@2x.png 2x, /hero@3x.png 3x" alt="Hero">

define('video', {
    $attrs(attrs) {
        attrs = { muted: true, playsinline: true, preload: 'metadata', ...attrs };
        return Element.prototype.$attrs.call(this, attrs);
    }
});

define('form', {
    $({ action, onsubmit }) {
        this.onsubmit = e => { e.preventDefault(); onsubmit?.(e); };
        return [];
    }
});

define('player', {
    $({ track, playing, progress = 0, onEnded }) {
        // $state: props surface. The parent controls track + playing + progress.
        // Sibling components can read them: player.$state.track, .progress, etc.

        // _interval: internal bookkeeping. The parent has no business seeing it.
        clearInterval(this._interval);
        if (playing) {
            this._interval = setInterval(() => {
                let next = progress + 1;
                if (next >= track.duration) onEnded?.();
                this.$({ progress: next });
            }, 1000);
        }

        // _waveCache: memoized per-track computation. Purely private.
        if (track && this._waveTrack !== track.id) {
            this._waveTrack = track.id;
            this._waveBars = computeBars(track);
        }

        return [mx.div(track.title), mx.progress({ value: progress, max: track.duration })];
    }
});