const selectedApplet = APPLETS.find(a => a.id === applet.appletId);
div.style.cssText = div.onmousedown = (e) => e.stopPropagation();
// Resize handles
edges.forEach(({ cls, edge }) => {
const handle = document.createElement("div");
handle.className = cls;
handle.onmousedown = (e) => startResizeApplet(applet.id, edge, e);
div.appendChild(handle);
});
// Header
const header = document.createElement("div");
header.className = "flex items-center justify-between bg-zinc-700 px-3 py-2 shrink-0 cursor-move select-none";
header.onmousedown = (e) => startDragApplet(applet.id, e);
const title = document.createElement("span");
title.className = "text-sm text-white truncate pointer-events-none";
title.textContent = selectedApplet ? `${selectedApplet.icon} ${selectedApplet.name}` : "Select an Applet";
header.appendChild(title);
const closeBtn = document.createElement("button");
closeBtn.className = "ml-2 text-zinc-400 hover:text-red-400 transition-colors text-lg leading-none";
closeBtn.textContent = "×";
closeBtn.title = "Delete applet";
closeBtn.onclick = () => deleteApplet(applet.id);
closeBtn.onmousedown = (e) => e.stopPropagation();
header.appendChild(closeBtn);
div.appendChild(header);
// Content
const content = document.createElement("div");
content.className = "flex-1 overflow-hidden";
if (!applet.appletId) {
// Applet selector grid
const selector = document.createElement("div");
selector.className = "h-full overflow-auto p-3 bg-zinc-900/50";
const grid = document.createElement("div");
grid.className = "grid grid-cols-4 gap-2";
APPLETS.forEach(app => {
const btn = document.createElement("button");
btn.className = "flex flex-col items-center gap-1.5 p-2 rounded-lg hover:bg-zinc-700/50 transition-colors group";
btn.onclick = () => selectApplet(applet.id, app.id);
const icon = document.createElement("span");
icon.className = "text-2xl group-hover:scale-110 transition-transform";
icon.textContent = app.icon;
btn.appendChild(icon);
const name = document.createElement("span");
name.className = "text-xs text-zinc-300 text-center leading-tight truncate w-full";
name.textContent = app.name;
btn.appendChild(name);
grid.appendChild(btn);
});
selector.appendChild(grid);
content.appendChild(selector);
} else if (selectedApplet) {
// Iframe
const iframe = document.createElement("iframe");
iframe.src = selectedApplet.url;
iframe.className = "w-full h-full border-0";
iframe.title = selectedApplet.name;
iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups");
content.appendChild(iframe);
} else {
const placeholder = document.createElement("div");
placeholder.className = "flex items-center justify-center h-full text-zinc-500";
placeholder.textContent = "Loading...";
content.appendChild(placeholder);
}
div.appendChild(content);
container.appendChild(div);