Stub out unibox

static/2024-05-30-app-skeleton-lit/index.html

@@ -13,23 +13,24 @@
             <com-thread slot="main">
                 <com-thread-group>
                     <com-prompt slot="prompt">
-                        Hello world
+                        <com-editor value="Henlo world"></com-editor>
                     </com-prompt>
                     <com-response slot="response">
-                        Henlo world
+                        <com-editor value="Hello world"></com-editor>
                     </com-response>
                 </com-thread-group>
                 <com-thread-group>
                     <com-prompt slot="prompt">
-                        Hello world
+                        <com-editor value="Henlo world"></com-editor>
                     </com-prompt>
                     <com-response slot="response">
-                        Henlo world
+                        <com-editor value="Hello world"></com-editor>
                     </com-response>
                 </com-thread-group>
             </com-thread>
             <div slot="footer">
                 <com-unibox>
+                    <com-editor slot="main"></com-editor>
                     <com-button slot="end">Send</com-button>
                 </com-unibox>
             </div>

static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts

@@ -5,42 +5,48 @@ import {base} from '../styles'
 const styles = css`
   :host {
     display: block;
+  }
 
+  .layout {
     display: grid;
     grid-template-rows: 1fr min-content;
     grid-template-areas:
       "main"
       "footer";
-    height: 100cqh;
+      height: 100cqh;
+  }
 
-    > com-chat-main {
-      grid-area: main;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
+  .main {
+    grid-area: main;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--gap);
+  }
 
-    > com-chat-footer {
-      grid-area: footer;
-    }
+  .footer {
+    grid-area: footer;
+    padding: 0 var(--gap) var(--gap);
   }
 `
 
 @customElement('com-chat')
-export class ComAppGrid extends LitElement {
+export class ComChat extends LitElement {
   static styles = [base, styles]
 
   render() {
     return html`
-      <com-chat-main>
+    <div class="layout">
+      <div class="main">
         <com-content>
           <slot name="main"></slot>
         </com-content>
-      </com-chat-main>
-      <com-chat-footer>
+      </div>
+      <div class="footer">
         <com-content>
           <slot name="footer"></slot>
         </com-content>
-      </com-chat-footer>
+      </div>
+    </div>
     `
   }
 }

static/2024-05-30-app-skeleton-lit/src/components/com-editor.ts

@@ -0,0 +1,30 @@
+import {LitElement, html, css} from 'lit-element'
+import {customElement, property} from 'lit/decorators.js'
+import {base} from '../styles'
+
+const styles = css`
+  :host {
+    display: block;
+  }
+
+  .editor {
+    display: block;
+
+    &:focus {
+      outline: none;
+    }
+  }
+`
+
+@customElement('com-editor')
+export class ComEditor extends LitElement {
+  static styles = [base, styles]
+
+  @property({type: String}) value = ''
+
+  render() {
+    return html`
+    <div class="editor" contenteditable="plaintext-only">${this.value}</div>
+    `
+  }
+}

static/2024-05-30-app-skeleton-lit/src/components/com-unibox.ts

@@ -9,17 +9,17 @@ const styles = css`
 
   .unibox {
     display: grid;
-    grid-template-columns: min-content 1fr min-content;
-    grid-template-areas: "start main end";
+    background-color: var(--color-white);
+    border-radius: var(--radius);
+    grid-template-columns: 1fr min-content;
+    grid-template-areas: "main end";
     gap: var(--gap);
+    padding: calc(var(--unit) * 2);  
   }
 
   .unibox-main {
     grid-area: main;
-  }
-
-  .unibox-start {
-    grid-area: start;
+    align-self: center;
   }
 
   .unibox-end {
@@ -33,17 +33,14 @@ export class ComUnibox extends LitElement {
 
   render() {
     return html`
-    <menu class="unibox">
-      <li class="unibox-start">
-        <slot name="start"></slot>
-      </li>
-      <li class="unibox-main">
+    <div class="unibox">
+      <div class="unibox-main">
         <slot name="main"></slot>
-      </li>
-      <li class="unibox-end">
+      </div>
+      <div class="unibox-end">
         <slot name="end"></slot>
-      </li>
-    </menu>
+      </div>
+    </div>
     `
   }
 }

static/2024-05-30-app-skeleton-lit/src/main.ts

@@ -6,4 +6,5 @@ export * as ComPrompt from './components/com-prompt'
 export * as ComResponse from './components/com-response'
 export * as ComThreadGroup from './components/com-thread-group'
 export * as ComButton from './components/com-button'
-export * as ComUnibox from './components/com-unibox'
+export * as ComUnibox from './components/com-unibox'
+export * as ComEditor from './components/com-editor'