progress towards getting ember s working again

.gitignore

@@ -3,6 +3,7 @@
 # compiled output
 dist/
 /tmp/
+/out/
 
 # dependencies
 /bower_components/
@@ -14,6 +15,7 @@ package-lock.json
 .env*
 .pnp*
 .eslintcache
+.turbo
 npm-debug.log*
 yarn-error.log
 

frontend/app/components/external-link.gts

@@ -0,0 +1,15 @@
+import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+
+<template>
+  <a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="#"
+    class="flex gap-2 items-baseline focus:ring-4 focus:outline-none focus-visible:outline-none rounded-sm"
+    ...attributes
+  >
+    <span>{{yield}}</span>
+
+    <FaIcon @icon="external-link-alt" />
+  </a>
+</template>

frontend/app/components/limber/building.gts

@@ -0,0 +1,17 @@
+import service from 'limber/helpers/service';
+
+<template>
+  {{#let (service 'editor') as |editor|}}
+    {{#if editor.isCompiling}}
+      <div class="
+        absolute top-0 inset-x-0
+        bg-opacity-95 p-10 bg-gray-100 shadow
+        text-black text-2xl font-bold z-20
+        flex gap-4 items-center"
+      >
+        <div class="loader animate-spin h-6 w-6"></div>
+        <span>Building...</span>
+      </div>
+    {{/if}}
+  {{/let}}
+</template>

frontend/app/components/limber/copy-menu/index.ts → frontend/app/components/limber/copy-menu.gts

@@ -1,14 +1,15 @@
 import Component from '@glimmer/component';
-import { setComponentTemplate } from '@ember/component';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
-import { hbs } from 'ember-cli-htmlbars';
 
 import { toBlob, toPng } from 'html-to-image';
 
+import Menu from './menu';
+
 /**
  * This component is injected via the markdown rendering
  */
-class CopyMenu extends Component {
+export default class CopyMenu extends Component {
   @action
   copyAsText(event: Event) {
     let code = getSnippetElement(event);
@@ -22,11 +23,9 @@ class CopyMenu extends Component {
 
     await withExtraStyles(code, () => toClipboard(code));
   }
-}
 
-export default setComponentTemplate(
-  hbs`
-    <Limber::Menu class="absolute top-3 right-4 z-10" data-test-copy-menu>
+  <template>
+    <Menu class="absolute top-3 right-4 z-10" data-test-copy-menu>
       <:trigger>
         📋
       </:trigger>
@@ -39,10 +38,10 @@ export default setComponentTemplate(
           Copy as image
         </Item>
       </:options>
-    </Limber::Menu>
-  `,
-  CopyMenu
-);
+    </Menu>
+  </template>
+}
+
 
 /*************************************************
  *

frontend/app/components/limber/demo-select.gts

@@ -0,0 +1,50 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { inject as service } from '@ember/service';
+import { waitFor } from '@ember/test-waiters';
+
+import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+
+import { getFromLabel, NAMES } from 'limber/snippets';
+import Menu from './menu';
+
+import type EditorService from 'limber/services/editor';
+
+export default class DemoSelect extends Component {
+  @service declare editor: EditorService;
+
+  demos = NAMES;
+
+  @action
+  @waitFor
+  async select(demoName: string) {
+    let demo = await getFromLabel(demoName);
+
+    this.editor.updateDemo(demo);
+  }
+
+  <template>
+    <Menu data-test-demo-select ...attributes>
+      <:trigger as |menu|>
+        <span class="grid grid-flow-col gap-2 items-center">
+          Select demo
+          {{#if menu.isOpen}}
+            <FaIcon @icon="angle-up" class="min-w-3" />
+          {{else}}
+            <FaIcon @icon="angle-right" class="min-w-3" />
+          {{/if}}
+        </span>
+      </:trigger>
+
+      <:options as |Item|>
+        {{#each this.demos as |demoName|}}
+          <Item {{on 'click' (fn this.select demoName)}} data-test-demo>
+            {{demoName}}
+          </Item>
+        {{/each}}
+      </:options>
+    </Menu>
+  </template>
+}

frontend/app/components/limber/editor-controls/index.gts

@@ -0,0 +1,79 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier'
+
+import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+
+import State from './state';
+
+import type { InterpreterFrom } from 'xstate';
+
+type Send = InterpreterFrom<typeof State>['send'];
+
+const container = (element: Element, send: Send) => {
+  send('CONTAINER_FOUND', { container: element as HTMLElement });
+
+  return () => send('CONTAINER_REMOVED');
+};
+
+const Button = <template>
+  <button
+    type='button'
+    class="
+      block select-none py-2 px-3 text-white text-xs
+      hover:bg-[#9b2918]
+      focus:ring-4 ring-inset focus:outline-none"
+    ...attributes
+  >
+    {{yield}}
+  </button>
+</template>;
+
+const Controls = <template>
+  {{#if @needsControls}}
+    <div
+      class='
+        absolute top-0 right-0 z-[1] flex lg:grid
+        {{if @isMinimized
+          'bg-ember-black h-full content-start'
+        }}
+      '
+    >
+      <Button
+        title={{if @isMaximized 'Back to split view' 'Maximize Editor'}}
+        {{on 'click' (fn @send 'MAXIMIZE')}}
+      >
+        {{#if @isMaximized}}
+          <FaIcon @icon='columns' />
+        {{else}}
+          <FaIcon @icon="window-maximize" @prefix='far' />
+        {{/if}}
+      </Button>
+      <Button
+        title={{if @isMinimized 'Back to split view' 'Minimize Editor'}}
+        {{on 'click' (fn @send 'MINIMIZE')}}
+      >
+        {{#if @isMinimized}}
+          <FaIcon @icon='columns' />
+        {{else}}
+          <FaIcon @icon='window-minimize' @prefix='far' />
+        {{/if}}
+      </Button>
+    </div>
+  {{/if}}
+</template>;
+
+<template>
+  <State as |state send|>
+    {{yield
+      (component
+        Controls
+        isMinimized=(state.matches 'hasContainer.minimized')
+        isMaximized=(state.matches 'hasContainer.maximized')
+        needsControls=state.context.container
+        send=send
+      )
+      (modifier container send)
+    }}
+  </State>
+</template>
+