▦
Pick a pattern and click Generate
`;
const slot = root.querySelector("slot");
const containerDiv = slot?.parentElement as HTMLElement;
if (containerDiv) containerDiv.replaceWith(wrapper);
this.#promptInput = wrapper.querySelector(".prompt-input");
this.#patternSelect = wrapper.querySelector(".pattern-select");
this.#paletteSelect = wrapper.querySelector(".palette-select");
this.#widthInput = wrapper.querySelector('input[title="Width"]');
this.#heightInput = wrapper.querySelector('input[title="Height"]');
this.#previewArea = wrapper.querySelector(".preview-area");
this.#generateBtn = wrapper.querySelector(".generate-btn");
this.#actionsBar = wrapper.querySelector(".actions-bar");
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
const copyTextBtn = wrapper.querySelector(".copy-text-btn") as HTMLButtonElement;
const copyHtmlBtn = wrapper.querySelector(".copy-html-btn") as HTMLButtonElement;
this.#generateBtn?.addEventListener("click", (e) => {
e.stopPropagation();
this.#generate();
});
this.#promptInput?.addEventListener("keydown", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.#generate();
}
});
copyTextBtn?.addEventListener("click", (e) => {
e.stopPropagation();
if (this.#textOutput) navigator.clipboard.writeText(this.#textOutput);
});
copyHtmlBtn?.addEventListener("click", (e) => {
e.stopPropagation();
if (this.#htmlOutput) navigator.clipboard.writeText(this.#htmlOutput);
});
closeBtn?.addEventListener("click", (e) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent("close"));
});
// Prevent canvas drag
this.#previewArea?.addEventListener("pointerdown", (e) => e.stopPropagation());
this.#promptInput?.addEventListener("pointerdown", (e) => e.stopPropagation());
return root;
}
async #generate() {
if (this.#isLoading) return;
const pattern = this.#patternSelect?.value || "plasma";
const prompt = this.#promptInput?.value.trim() || pattern;
const palette = this.#paletteSelect?.value || "classic";
const width = parseInt(this.#widthInput?.value || "80") || 80;
const height = parseInt(this.#heightInput?.value || "40") || 40;
this.#isLoading = true;
this.#error = null;
if (this.#generateBtn) this.#generateBtn.disabled = true;
this.#renderLoading();
try {
const res = await fetch("/api/ascii-gen", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt, pattern, palette, width, height, output_format: "html" }),
});
if (!res.ok) {
const data = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
throw new Error(data.error || `HTTP ${res.status}`);
}
const data = await res.json();
this.#htmlOutput = data.html || null;
this.#textOutput = data.text || null;
this.#renderResult();
// Emit to output port
if (this.#textOutput) {
this.dispatchEvent(new CustomEvent("port-output", {
detail: { port: "ascii", value: this.#textOutput },
bubbles: true,
}));
}
} catch (e: any) {
this.#error = e.message || "Generation failed";
this.#renderError();
} finally {
this.#isLoading = false;
if (this.#generateBtn) this.#generateBtn.disabled = false;
}
}
#renderLoading() {
if (!this.#previewArea) return;
this.#previewArea.innerHTML = `