`;
const slot = root.querySelector("slot");
const containerDiv = slot?.parentElement as HTMLElement;
if (containerDiv) {
containerDiv.replaceWith(wrapper);
}
this.#canvas = wrapper.querySelector(".canvas-area canvas") as HTMLCanvasElement;
this.#ctx = this.#canvas.getContext("2d");
this.#promptInput = wrapper.querySelector(".prompt-input") as HTMLInputElement;
this.#generateBtn = wrapper.querySelector(".generate-btn") as HTMLButtonElement;
this.#resultArea = wrapper.querySelector(".result-area") as HTMLElement;
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
const sizeSlider = wrapper.querySelector(".size-slider") as HTMLInputElement;
const sizeLabel = wrapper.querySelector(".size-label") as HTMLElement;
const canvasArea = wrapper.querySelector(".canvas-area") as HTMLElement;
const frameworkSelect = wrapper.querySelector(".framework-select") as HTMLSelectElement;
// Tool buttons
wrapper.querySelectorAll(".tool-btn").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.stopPropagation();
const tool = (btn as HTMLElement).dataset.tool;
if (tool === "clear") {
this.#strokes = [];
this.#redraw();
return;
}
this.#tool = tool || "pen";
wrapper.querySelectorAll(".tool-btn").forEach((b) => b.classList.remove("active"));
if (tool !== "clear") btn.classList.add("active");
});
});
// Color swatches
wrapper.querySelectorAll(".color-swatch").forEach((swatch) => {
swatch.addEventListener("click", (e) => {
e.stopPropagation();
this.#color = (swatch as HTMLElement).dataset.color || "#0f172a";
wrapper.querySelectorAll(".color-swatch").forEach((s) => s.classList.remove("active"));
swatch.classList.add("active");
this.#tool = "pen";
wrapper.querySelectorAll(".tool-btn").forEach((b) => b.classList.remove("active"));
wrapper.querySelector('[data-tool="pen"]')?.classList.add("active");
});
});
// Size slider
sizeSlider.addEventListener("input", (e) => {
e.stopPropagation();
this.#brushSize = parseInt(sizeSlider.value);
sizeLabel.textContent = sizeSlider.value;
});
sizeSlider.addEventListener("pointerdown", (e) => e.stopPropagation());
// Framework select
frameworkSelect.addEventListener("change", (e) => {
e.stopPropagation();
this.#framework = frameworkSelect.value;
});
frameworkSelect.addEventListener("pointerdown", (e) => e.stopPropagation());
// Drawing events โ pen takes priority over touch (palm rejection).
this.#canvas.addEventListener("pointerdown", (e) => {
if (this.#penIsActive && e.pointerType === "touch") {
e.preventDefault();
return;
}
if (this.#isDrawing) return;
e.stopPropagation();
e.preventDefault();
this.#isDrawing = true;
this.#activePointerId = e.pointerId;
if (e.pointerType === "pen") this.#penIsActive = true;
this.#canvas!.setPointerCapture(e.pointerId);
const pos = this.#getCanvasPos(e);
const pressure = e.pointerType === "pen" ? (e.pressure || 0.5) : 0.5;
this.#currentStroke = {
points: [{ ...pos, pressure }],
color: this.#tool === "eraser" ? "#ffffff" : this.#color,
size: this.#tool === "eraser" ? this.#brushSize * 3 : this.#brushSize,
tool: this.#tool,
};
});
this.#canvas.addEventListener("pointermove", (e) => {
if (!this.#isDrawing || !this.#currentStroke) return;
if (e.pointerId !== this.#activePointerId) return;
e.stopPropagation();
const pos = this.#getCanvasPos(e);
const pressure = e.pointerType === "pen" ? (e.pressure || 0.5) : 0.5;
this.#currentStroke.points.push({ ...pos, pressure });
this.#drawStroke(this.#currentStroke);
});
const endDraw = (e: PointerEvent) => {
if (!this.#isDrawing) return;
if (e.pointerId !== this.#activePointerId) return;
this.#isDrawing = false;
this.#activePointerId = null;
if (e.pointerType === "pen") this.#penIsActive = false;
if (this.#currentStroke && this.#currentStroke.points.length > 0) {
this.#strokes.push(this.#currentStroke);
}
this.#currentStroke = null;
};
this.#canvas.addEventListener("pointerup", endDraw);
this.#canvas.addEventListener("pointerleave", endDraw);
this.#canvas.addEventListener("pointercancel", endDraw);
// Generate button
this.#generateBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.#generate();
});
// Enter key in prompt
this.#promptInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
e.preventDefault();
this.#generate();
}
});
this.#promptInput.addEventListener("pointerdown", (e) => e.stopPropagation());
closeBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent("close"));
});
// Size canvas on next frame
requestAnimationFrame(() => {
this.#resizeCanvas(canvasArea);
this.#redraw();
});
this.#resizeObserver = new ResizeObserver(() => {
this.#resizeCanvas(canvasArea);
this.#redraw();
});
this.#resizeObserver.observe(canvasArea);
return root;
}
async #generate() {
const prompt = this.#promptInput?.value.trim() || "Convert this wireframe into a working UI";
if (this.#isGenerating || !this.#canvas) return;
this.#isGenerating = true;
if (this.#generateBtn) this.#generateBtn.disabled = true;
this.#showCode = false;
this.#renderLoading();
try {
const sketchImage = this.#canvas.toDataURL("image/jpeg", 0.85);
const response = await fetch("/api/makereal", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
sketch_image: sketchImage,
prompt,
framework: this.#framework,
}),
});
if (!response.ok) {
const err = await response.json().catch(() => ({ error: response.statusText }));
throw new Error(err.error || `Generation failed: ${response.statusText}`);
}
const result = await response.json();
if (!result.html) throw new Error("No HTML returned");
this.#lastHtml = result.html;
this.#renderResult();
this.dispatchEvent(new CustomEvent("html-generated", {
detail: { html: result.html, prompt },
}));
} catch (error) {
const msg = error instanceof Error ? error.message : "Generation failed";
this.#renderError(msg);
} finally {
this.#isGenerating = false;
if (this.#generateBtn) this.#generateBtn.disabled = false;
}
}
#renderLoading() {
if (!this.#resultArea) return;
this.#resultArea.innerHTML = `