@tekyzinc/gsd-t 2.73.20 → 2.73.22

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to GSD-T are documented here. Updated with each release.
 
+## [2.73.22] - 2026-04-09
+
+### Added
+- **Stack-level border-radius** — setting `borderRadius` on a flex/grid bar column container auto-sets `overflow: hidden` (so rounded corners clip child segments) and propagates to all sibling columns. One change rounds all stacked bars.
+
+## [2.73.21] - 2026-04-09
+
+### Fixed
+- **Undo All / Cmd+Z now reverts display** — undo properly sends `gsdt-set-svg-attr` for SVG changes and skips fixture changes. Undo All individually reverts each change before resetting CSS, so the preview updates correctly.
+- **Can re-enter original value** — changing a property back to its original value now removes the tracked change and reverts the style (previously rejected as "no change").
+- **Gap propagation for bar charts** — setting `gap` on a flex/grid container propagates to all sibling containers with the same display type (e.g., all bar columns). Shows "→ N all columns" feedback.
+
 ## [2.73.20] - 2026-04-09
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekyzinc/gsd-t",
-  "version": "2.73.20",
+  "version": "2.73.22",
   "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

@@ -790,10 +790,35 @@
                 }
               }
             } else if (tag === "div" && parent) {
-              // For bar segments: propagate to sibling divs in the same flex container
+              const elStyle = getComputedStyle(lockedEl);
               const parentStyle = getComputedStyle(parent);
-              if ((parentStyle.display === "flex" || parentStyle.display === "inline-flex") &&
+              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") {
+                  // 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");
+                  }
+                  for (const sib of parent.children) {
+                    if (sib === lockedEl || sib.tagName !== "DIV") continue;
+                    const sibStyle = getComputedStyle(sib);
+                    if (sibStyle.display === elDisplay) {
+                      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");
+                      }
+                      propagatedCount++;
+                    }
+                  }
+                }
+              } else if ((parentStyle.display === "flex" || parentStyle.display === "inline-flex") &&
                   parent.classList.contains("overflow-hidden")) {
+                // For bar segments: propagate to sibling divs in the same flex container
                 for (const sib of parent.children) {
                   if (sib === lockedEl || sib.tagName !== "DIV") continue;
                   sib.style.setProperty(cssName, msg.value, "important");
@@ -809,6 +834,7 @@
             const tag = lockedEl.tagName.toLowerCase();
             const columnProps = new Set(["text-align", "width", "min-width", "max-width"]);
             const rowProps = new Set(["height", "min-height", "max-height"]);
+            const containerPropsLabel = new Set(["gap", "row-gap", "column-gap", "border-radius", "overflow"]);
             if ((tag === "td" || tag === "th") && columnProps.has(cssName)) {
               const row = lockedEl.closest("tr");
               const colIdx = row ? Array.from(row.children).indexOf(lockedEl) + 1 : 0;
@@ -817,6 +843,8 @@
               propagateScope = "all rows";
             } else if (tag === "tr") {
               propagateScope = "all rows";
+            } else if (containerPropsLabel.has(cssName)) {
+              propagateScope = "all columns";
             } else {
               propagateScope = "similar";
             }

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

@@ -1879,17 +1879,35 @@
     function commit() {
       if (cancelled) return;
       const newVal = inputEl.value.trim();
-      if (newVal && newVal !== currentVal) {
-        // Apply the style change to the iframe
-        previewIframe.contentWindow.postMessage({
-          type: "gsdt-set-style",
-          property: prop,
-          value: newVal,
-          propagate: true,
-        }, "*");
+      if (!newVal) {
+        valEl.textContent = existing ? existing.newValue : currentVal;
+        if (existing) valEl.classList.add("changed");
+        return;
+      }
 
+      // Apply the style change to the iframe (always, even if reverting to original)
+      previewIframe.contentWindow.postMessage({
+        type: "gsdt-set-style",
+        property: prop,
+        value: newVal,
+        propagate: true,
+      }, "*");
+
+      const compId = filteredQueue[selectedIdx]?.id;
+      if (newVal === currentVal) {
+        // Reverting to original — remove tracked change
+        if (compId && existing) {
+          const list = changes.get(compId);
+          const idx = list.findIndex(c => c.path === currentElementPath && c.property === prop);
+          if (idx >= 0) list.splice(idx, 1);
+          if (list.length === 0) changes.delete(compId);
+          renderChanges(compId);
+          renderComponentList();
+        }
+        valEl.textContent = currentVal;
+        valEl.classList.remove("changed");
+      } else {
         // Track the change
-        const compId = filteredQueue[selectedIdx]?.id;
         if (compId) {
           if (!changes.has(compId)) changes.set(compId, []);
           const list = changes.get(compId);
@@ -1908,12 +1926,8 @@
           renderChanges(compId);
           renderComponentList();
         }
-
         valEl.textContent = newVal;
         valEl.classList.add("changed");
-      } else {
-        valEl.textContent = existing ? existing.newValue : currentVal;
-        if (existing) valEl.classList.add("changed");
       }
     }
 
@@ -1941,14 +1955,22 @@
     if (!list || index < 0 || index >= list.length) return;
     const change = list[index];
 
-    // Revert in iframe
+    // Revert in iframe based on property type
     if (previewIframe.contentWindow) {
-      previewIframe.contentWindow.postMessage({
-        type: "gsdt-set-style",
-        property: change.property,
-        value: change.oldValue,
-        propagate: true,
-      }, "*");
+      if (change.property.startsWith("svg:")) {
+        previewIframe.contentWindow.postMessage({
+          type: "gsdt-set-svg-attr",
+          attribute: change.property.slice(4),
+          value: change.oldValue,
+        }, "*");
+      } else if (!change.property.startsWith("fixture:")) {
+        previewIframe.contentWindow.postMessage({
+          type: "gsdt-set-style",
+          property: change.property,
+          value: change.oldValue,
+          propagate: true,
+        }, "*");
+      }
     }
 
     // Remove from change list
@@ -2189,14 +2211,32 @@
   undoAllChanges.addEventListener("click", () => {
     const compId = filteredQueue[selectedIdx]?.id;
     if (compId) {
+      // Revert each change individually (SVG attrs need setAttribute, not cssText reset)
+      const list = changes.get(compId) || [];
+      if (previewIframe.contentWindow) {
+        for (const change of list) {
+          if (change.property.startsWith("svg:")) {
+            previewIframe.contentWindow.postMessage({
+              type: "gsdt-set-svg-attr",
+              attribute: change.property.slice(4),
+              value: change.oldValue,
+            }, "*");
+          } else if (!change.property.startsWith("fixture:")) {
+            previewIframe.contentWindow.postMessage({
+              type: "gsdt-set-style",
+              property: change.property,
+              value: change.oldValue,
+              propagate: true,
+            }, "*");
+          }
+        }
+        // Also reset inline CSS overrides
+        previewIframe.contentWindow.postMessage({ type: "gsdt-reset-styles" }, "*");
+      }
       changes.delete(compId);
       renderChanges(compId);
       renderComponentList();
       refreshPropHighlights(compId);
-      // Reset iframe styles
-      if (previewIframe.contentWindow) {
-        previewIframe.contentWindow.postMessage({ type: "gsdt-reset-styles" }, "*");
-      }
     }
   });