From 6c24388e8f4948a95d94e4483cf8dd38ae933330 Mon Sep 17 00:00:00 2001
From: Richard Sauer <admin@sauer.com.au>
Date: Wed, 8 Apr 2026 16:28:06 +1000
Subject: [PATCH] Remove popup border, automation simulates linked controls,
 card resize button

---
 templates/editor.html | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/templates/editor.html b/templates/editor.html
index d6610dc..d210f1a 100644
--- a/templates/editor.html
+++ b/templates/editor.html
@@ -160,7 +160,7 @@ body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(
 /* Popup */
 #popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:500}
 #popup-overlay.active{display:flex}
-.popup{z-index:501;background:#0d1220;border:1px solid var(--border);border-radius:16px;padding:24px;width:500px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 16px 48px rgba(0,0,0,0.8)}
+.popup{z-index:501;background:#0d1220;border:none;border-radius:16px;padding:24px;width:500px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 16px 48px rgba(0,0,0,0.8)}
 .popup .title{font-size:24px;color:var(--text2)}
 .popup .live{font-size:32px;font-weight:700}
 .popup .sp-row{display:flex;align-items:center;gap:20px}
@@ -461,6 +461,7 @@ function createCardEl(c) {
 
   // Edit buttons
   el.innerHTML += `<div class="edit-overlay" style="position:absolute;top:4px;right:4px;gap:4px">
+    <button class="edit-btn" onclick="event.stopPropagation();toggleCardSize('${c.id}')" title="Resize">${c.width==='full'?'◧':'◻'}</button>
     <button class="edit-btn comment-btn" onclick="event.stopPropagation();openComments('${c.id}','${c.label}')">&#x1F4AC;</button>
     <button class="edit-btn" onclick="event.stopPropagation();deleteCard('${c.id}')">&#x2715;</button>
   </div>`;
@@ -736,12 +737,39 @@ function renameCard(id) {
   if (name) { card.label = name; renderCards(); }
 }
 
+function toggleCardSize(id) {
+  const page = layout.pages[currentPage];
+  const card = page.cards.find(c => c.id === id);
+  if (!card) return;
+  card.width = card.width === 'full' ? 'half' : 'full';
+  renderCards();
+}
+
 // ══════════════════════════════════════════════════════
 // SIMULATION (PREVIEW MODE)
 // ══════════════════════════════════════════════════════
 function toggleSim(id) {
   if (!simState[id]) simState[id] = {on: false, value: 0};
   simState[id].on = !simState[id].on;
+
+  // If this is an automation card, activate/deactivate all its rules
+  const card = findCard(id);
+  if (card && card.type === 'automation' && card.rules) {
+    card.rules.forEach(r => {
+      if (!r.target) return;
+      if (!simState[r.target]) simState[r.target] = {on: false, value: 0};
+      if (simState[id].on) {
+        // Activating: apply all rules
+        if (r.action === 'on') simState[r.target].on = true;
+        else if (r.action === 'off') simState[r.target].on = false;
+        else if (r.action === 'set') { simState[r.target].on = true; simState[r.target].value = r.value || 0; }
+      } else {
+        // Deactivating: turn everything off
+        if (r.action !== 'off') simState[r.target].on = false;
+      }
+    });
+  }
+
   renderCards();
   updateSchematicAnimations();
 }