Implement common-picker and stacked layout manager

Author: bfollington

typescript/package-lock.json

@@ -13,3 +13,4 @@ export * as CommonDroppable from "./common-droppable.js";
 export * as CommonDraggable from "./common-draggable.js";
 export * as CommonSpellEditor from "./common-spell-editor.js";
 export * as CommonMermaid from "./mermaid.js";
+export * as CommonPicker from "./picker.js";

typescript/packages/lookslike-high-level/src/components/index.ts

@@ -0,0 +1,129 @@
+import { LitElement, html, css } from "lit-element";
+import { customElement, property } from "lit/decorators.js";
+
+interface Item {
+  value: string;
+  label: string;
+}
+
+@customElement("common-picker")
+export default class PickerElement extends LitElement {
+  @property({ type: Array }) items: Item[] = [];
+  @property({ type: String, reflect: true }) value = "";
+  @property({ type: String }) filter = "";
+  @property({ type: Boolean }) hasFocus = false;
+
+  static override styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    .picker {
+      position: relative;
+    }
+
+    input {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      max-height: 200px;
+      overflow-y: auto;
+      background: white;
+      border: 1px solid #ccc;
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+      display: none;
+    }
+
+    .dropdown.show {
+      display: block;
+    }
+
+    .item {
+      padding: 8px;
+      cursor: pointer;
+    }
+
+    .item:hover {
+      background: #f5f5f5;
+    }
+
+    .selected-value {
+      margin-top: 8px;
+      padding: 4px;
+      color: #666;
+    }
+  `;
+
+  private get filteredItems() {
+    const filterLower = this.filter.toLowerCase();
+    return this.items.filter(
+      item =>
+        item.label.toLowerCase().includes(filterLower) ||
+        item.value.toString().toLowerCase().includes(filterLower),
+    );
+  }
+
+  private handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.filter = input.value;
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+  }
+
+  private selectItem(item: Item) {
+    this.value = item.value;
+    this.filter = item.label;
+    this.hasFocus = false;
+    this.dispatchEvent(
+      new CustomEvent("pick", {
+        detail: item,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  override render() {
+    const showDropdown = this.hasFocus;
+    const items = this.filteredItems;
+    const selectedItem = this.items.find(item => item.value === this.value);
+
+    return html`
+      <div class="picker">
+        <input
+          type="text"
+          .value=${this.filter}
+          @input=${this.handleInput}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          placeholder="Search..."
+        />
+        <div class="dropdown ${showDropdown ? "show" : ""}">
+          ${items.map(
+            item => html`
+              <div class="item" @mousedown=${this.selectItem.bind(this, item)}>
+                ${item.label}
+              </div>
+            `,
+          )}
+        </div>
+      </div>
+    `;
+  }
+}

typescript/packages/lookslike-high-level/src/components/picker.ts

@@ -58,14 +58,15 @@ import { emailComposer } from "./spells/15_email_composer.jsx";
 import { addressBook } from "./spells/16_contacts.jsx";
 import { formTest } from "./spells/17_complex_form.jsx";
 import { musicLibrary } from "./spells/18_music.jsx";
-import { spellManager } from './spells/19_process_manager.jsx'
-import { shaderManager } from './spells/20_shader_editor.jsx'
-import { schemaGenerator } from './spells/21_model_builder.jsx'
-import { search } from './spells/22_search.jsx'
-import { notebook } from './spells/23_notes.jsx'
-import { quotedb } from './spells/24_quotes.jsx'
-import { activity } from './spells/25_activity.jsx'
+import { spellManager } from "./spells/19_process_manager.jsx";
+import { shaderManager } from "./spells/20_shader_editor.jsx";
+import { schemaGenerator } from "./spells/21_model_builder.jsx";
+import { search } from "./spells/22_search.jsx";
+import { notebook } from "./spells/23_notes.jsx";
+import { quotedb } from "./spells/24_quotes.jsx";
+import { activity } from "./spells/25_activity.jsx";
 import { activityRef } from "./sugar/activity.js";
+import { stackLayout } from "./spells/26_stacks.jsx";
 
 export type Charm = {
   [NAME]?: string;
@@ -269,6 +270,7 @@ addCharms([
   notebook.spawn({ notes: 1 }),
   quotedb.spawn({ quotes: 1 }),
   activity.spawn(activityRef),
+  stackLayout.spawn({ stack: 1 }),
   FetchService.spawn() as any,
   GmailService.spawn() as any,
   ViewService.spawn() as any,