Q: what should a gts version of flexi-layouts look like?

[runspired]

I think we can simplify things by dong a runtime-only replacement with an option build-plugin to compile away unused variations.

Something like:

import { Layout } from '@html-next/flexi-layouts';

const MyComponent = <template>
  <Layout>
    <:mobile></:mobile>
    <:desktop></:desktop>
  </Layout>
</template>;

export default MyComponent;

Alternatively we might be able to use the template-tag infrastructure to rewrite something like this:

import { Layout } from '@html-next/flexi-layouts';

const MyComponent = <layout>
  <mobile></mobile>
  <desktop></desktop>
</layout>;

export default MyComponent;

Or like this

import { Layout } from '@html-next/flexi-layouts';

class MyComponent extends Component {
  <mobile></mobile>
  <desktop></desktop>
}

export default MyComponent;

Downside of the former is we would no longer be able to do dynamic breakpoints. Names and total breakpoints would have to be preset. Downside of the latter is we might be taking on a lot of tooling support for TS/Glint/LanguageServers etc.