Consolidate Lit repositories: figma-to-lit, figma_lit_example, lit-3d-piano, lit-calculator, lit-code-editor, lit-draggable-dom, lit-file-based-routing, lit-force-graph, lit-html-editor, lit-html-table, lit-modules, lit-native, lit-node-editor, lit-sheet-music, lit-starter-ts, lit-vscode-extension, lit-wmr, vite-lit-capacitor, vite-lit-element-starter, vite-rxdb-lit

figma_lit_example/src/my-app.ts

@@ -0,0 +1,34 @@
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+@customElement("my-app")
+export class MyApp extends LitElement {
+  @property() amount = "5"; // <-- Pass in a value for the number of rectangles to create
+  @query("#count") countInput!: HTMLInputElement;
+
+  render() {
+    return html`
+      <div>
+        <h2>Rectangle Creator</h2>
+        <!-- Pass in the amount to the input value -->
+        <p>Count: <input id="count" value="${this.amount}" /></p>
+        <button id="create" @click=${this.create}>Create</button>
+        <button id="cancel" @click=${this.cancel}>Cancel</button>
+      </div>
+    `;
+  }
+
+  create() {
+    const count = parseInt(this.countInput.value, 10);
+    this.sendMessage("create-rectangles", { count });
+  }
+
+  cancel() {
+    this.sendMessage("cancel");
+  }
+
+  private sendMessage(type: string, content: Object = {}) {
+    const message = { pluginMessage: { type: type, ...content } };
+    parent.postMessage(message, "*");
+  }
+}