@tekyzinc/gsd-t 2.73.22 → 2.73.24

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to GSD-T are documented here. Updated with each release.
 
+## [2.73.24] - 2026-04-09
+
+### Added
+- **Remove element button** — hover over any component in the list to reveal a red × button. Clicking it excludes the element from review and auto-comments "EXCLUDED — not in Figma design". Excluded count shown in submit stats.
+
+### Fixed
+- **Comment validation removed** — all comments are now accepted (questions, exclusions, feedback). The "don't suggest specific changes" popup no longer blocks submission.
+
+### Changed
+- **Submit stats** show removed count alongside changed/commented.
+
+## [2.73.23] - 2026-04-09
+
+### Fixed
+- **Container props auto-redirect to parent** — setting `gap`, `borderRadius`, or `overflow` on a bar segment (child) now auto-targets the parent flex/grid container. Previously only worked when the container itself was selected.
+
 ## [2.73.22] - 2026-04-09
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekyzinc/gsd-t",
-  "version": "2.73.22",
+  "version": "2.73.24",
   "description": "GSD-T: Contract-Driven Development for Claude Code — 56 slash commands with headless CI/CD mode, graph-powered code analysis, real-time agent dashboard, execution intelligence, task telemetry, doc-ripple enforcement, backlog management, impact analysis, test sync, milestone archival, and PRD generation",
   "author": "Tekyz, Inc.",
   "license": "MIT",

package/scripts/gsd-t-design-review-inject.js

@@ -712,8 +712,22 @@
           const propagate = msg.propagate !== false; // default true
           let propagatedCount = 0;
 
-          // Apply to primary element
-          lockedEl.style.setProperty(cssName, msg.value, "important");
+          // Container-only props: if applied to a non-container child, redirect to parent
+          const containerOnlyProps = new Set(["gap", "row-gap", "column-gap", "border-radius"]);
+          let targetEl = lockedEl;
+          if (containerOnlyProps.has(cssName)) {
+            const elStyle = getComputedStyle(lockedEl);
+            const isContainer = elStyle.display === "flex" || elStyle.display === "inline-flex" || elStyle.display === "grid";
+            if (!isContainer && lockedEl.parentElement) {
+              const parentStyle = getComputedStyle(lockedEl.parentElement);
+              if (parentStyle.display === "flex" || parentStyle.display === "inline-flex" || parentStyle.display === "grid") {
+                targetEl = lockedEl.parentElement;
+              }
+            }
+          }
+
+          // Apply to target element (may be parent for container-only props)
+          targetEl.style.setProperty(cssName, msg.value, "important");
 
           // Typography props cascade to descendants
           const inheritProps = new Set(["font-size", "font-weight", "font-family", "line-height",
@@ -792,22 +806,24 @@
             } else if (tag === "div" && parent) {
               const elStyle = getComputedStyle(lockedEl);
               const parentStyle = getComputedStyle(parent);
-              const layoutProps = new Set(["gap", "row-gap", "column-gap"]);
 
               // Props that propagate across sibling containers (all bar columns)
               const containerProps = new Set(["gap", "row-gap", "column-gap", "border-radius", "overflow"]);
 
               if (containerProps.has(cssName)) {
-                const elDisplay = elStyle.display;
-                if (elDisplay === "flex" || elDisplay === "inline-flex" || elDisplay === "grid") {
+                // Use targetEl (may be parent if redirected) for container propagation
+                const containerEl = targetEl;
+                const containerParent = containerEl.parentElement;
+                const containerDisplay = getComputedStyle(containerEl).display;
+                if (containerParent && (containerDisplay === "flex" || containerDisplay === "inline-flex" || containerDisplay === "grid")) {
                   // Auto-set overflow:hidden when border-radius is applied to a container
                   if (cssName === "border-radius" && msg.value && msg.value !== "0px" && msg.value !== "0") {
-                    lockedEl.style.setProperty("overflow", "hidden", "important");
+                    containerEl.style.setProperty("overflow", "hidden", "important");
                   }
-                  for (const sib of parent.children) {
-                    if (sib === lockedEl || sib.tagName !== "DIV") continue;
+                  for (const sib of containerParent.children) {
+                    if (sib === containerEl || sib.tagName !== "DIV") continue;
                     const sibStyle = getComputedStyle(sib);
-                    if (sibStyle.display === elDisplay) {
+                    if (sibStyle.display === containerDisplay) {
                       sib.style.setProperty(cssName, msg.value, "important");
                       if (cssName === "border-radius" && msg.value && msg.value !== "0px" && msg.value !== "0") {
                         sib.style.setProperty("overflow", "hidden", "important");

package/scripts/gsd-t-design-review.html

@@ -195,6 +195,12 @@
 
   .component-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .component-type { font-size: 10px; color: #94a3b8; }
+  .remove-btn {
+    display: none; background: none; border: none; color: #ef4444; font-size: 16px;
+    cursor: pointer; padding: 0 4px; line-height: 1; opacity: 0.6;
+  }
+  .remove-btn:hover { opacity: 1; }
+  .component-item:hover .remove-btn { display: block; }
 
   /* ── Submit bar ─────────────────────────────────── */
   .submit-bar {
@@ -801,6 +807,7 @@
   let inspectActive = false;
   const changes = new Map();     // componentId → [{path, property, oldValue, newValue}]
   const comments = new Map();   // componentId → string
+  const excluded = new Set();   // componentIds removed from review
   let currentElementPath = null;
   let currentStyles = null;
 
@@ -952,14 +959,28 @@
         statusClass = "rejected";
       }
 
+      if (excluded.has(item.id)) return; // skip excluded elements
+
       const div = document.createElement("div");
       div.className = `component-item${idx === selectedIdx ? " selected" : ""}`;
       div.innerHTML = `
         <div class="component-status ${statusClass}"></div>
         <div class="component-name">${item.name || item.id}</div>
         <div class="component-type">${item.type || ""}</div>
+        <button class="remove-btn" title="Remove from review">×</button>
       `;
-      div.addEventListener("click", () => selectComponent(idx));
+      div.querySelector(".component-name").addEventListener("click", () => selectComponent(idx));
+      div.querySelector(".component-status").addEventListener("click", () => selectComponent(idx));
+      div.querySelector(".remove-btn").addEventListener("click", (e) => {
+        e.stopPropagation();
+        excluded.add(item.id);
+        comments.set(item.id, "EXCLUDED — not in Figma design");
+        if (selectedIdx === idx) {
+          selectedIdx = Math.min(idx, filteredQueue.filter(q => !excluded.has(q.id)).length - 1);
+        }
+        renderComponentList();
+        updateSubmitStats();
+      });
       componentList.appendChild(div);
     });
   }
@@ -2110,21 +2131,20 @@
   // ── Submit ────────────────────────────────────────
   function updateSubmitStats() {
     const total = queue.length;
+    const excludedCount = excluded.size;
     const changed = Array.from(changes.keys()).filter(id => (changes.get(id) || []).length > 0).length;
-    const commented = comments.size;
-
-    if (changed > 0 || commented > 0) {
-      submitStats.innerHTML = `
-        <span><span class="component-status changed" style="display:inline-block"></span> ${changed} changed</span>
-        <span><span class="component-status rejected" style="display:inline-block"></span> ${commented} commented</span>
-        <span style="color:var(--text-dim)">${total} total</span>
-      `;
-    } else {
-      submitStats.innerHTML = `<span style="color:var(--text-dim)">${total} elements — no changes</span>`;
-    }
-
-    submitAll.textContent = changed > 0 || commented > 0
-      ? `Submit (${changed} changes, ${commented} comments)`
+    const commented = Array.from(comments.keys()).filter(id => !excluded.has(id)).length;
+
+    const parts = [];
+    if (changed > 0) parts.push(`<span><span class="component-status changed" style="display:inline-block"></span> ${changed} changed</span>`);
+    if (commented > 0) parts.push(`<span><span class="component-status rejected" style="display:inline-block"></span> ${commented} commented</span>`);
+    if (excludedCount > 0) parts.push(`<span style="color:#ef4444">${excludedCount} removed</span>`);
+    parts.push(`<span style="color:var(--text-dim)">${total - excludedCount} of ${total}</span>`);
+    submitStats.innerHTML = parts.join(" ");
+
+    const actionCount = changed + commented + excludedCount;
+    submitAll.textContent = actionCount > 0
+      ? `Submit (${changed} changes, ${commented} comments, ${excludedCount} removed)`
       : "Submit — Approve All";
   }
 
@@ -2136,28 +2156,7 @@
       else comments.delete(filteredQueue[selectedIdx].id);
     }
 
-    // Check for non-actionable comments (documentation, not change requests)
-    const actionWords = /change|make|set|move|add|remove|reduce|increase|fix|use|switch|replace|adjust|align|center|should be|needs to|too |bigger|smaller|wider|narrower|thicker|thinner|lighter|darker|bolder|px|rem|%|#[0-9a-f]/i;
-    const docComments = [];
-    for (const [compId, comment] of comments) {
-      if (!actionWords.test(comment)) {
-        const item = queue.find(q => q.id === compId);
-        docComments.push(item ? item.name : compId);
-      }
-    }
-    if (docComments.length > 0) {
-      const proceed = confirm(
-        "These comments don't suggest specific changes:\n\n" +
-        docComments.map(n => "  \u2022 " + n).join("\n") +
-        "\n\nComments should describe what to change, e.g.:\n" +
-        '  "make padding 8px"\n  "use darker blue"\n  "reduce gap between title and chart"\n\n' +
-        "Non-actionable comments will be discarded.\n\nSubmit anyway?"
-      );
-      if (!proceed) return;
-      for (const [compId, comment] of comments) {
-        if (!actionWords.test(comment)) comments.delete(compId);
-      }
-    }
+    // All comments are accepted — questions, exclusions, and change requests alike
 
     // Build feedback: each element gets its changes and comments
     const feedback = queue.map(item => ({