@tekyzinc/gsd-t 2.73.14 → 2.73.20

package/CHANGELOG.md

@@ -2,6 +2,51 @@
 
 All notable changes to GSD-T are documented here. Updated with each release.
 
+## [2.73.20] - 2026-04-09
+
+### Added
+- **Editable fixture data** — segment label, value, and color fields in the Data Props tree are now clickable to edit. Color fields use a color picker. Changes tracked alongside CSS/SVG changes in the review output.
+- **Better SVG tree labels** — circle/arc nodes show stroke color, width, and radius. Path nodes show fill/stroke color. SVG root shows viewBox.
+- **Deeper SVG tree traversal** — SVG subtrees traverse up to depth 8 (was 4), ensuring individual arc segments appear in the element tree.
+
+### Removed
+- **`percentages_shown`** from donut chart fixture — redundant with `segments[].value`.
+
+## [2.73.19] - 2026-04-09
+
+### Added
+- **SVG attribute inspector** — SVG elements (`circle`, `path`, `rect`, `line`, `ellipse`, `text`, `g`, `polyline`, `polygon`) now show an "SVG Attributes" property group with all relevant attributes (stroke-width, r, fill, stroke, stroke-dasharray, viewBox, etc.). Attributes are editable inline with `setAttribute()`. Visual flash zones highlight stroke-width (blue), stroke/fill (matching color), dash patterns (amber dashed), and generic attrs (cyan).
+- **SVG permitted value dropdowns** — `stroke-linecap`, `stroke-linejoin`, `text-anchor`, `dominant-baseline` show `<select>` dropdowns with valid SVG values.
+
+### Fixed
+- **Dropdown flash-on-click** — clicking a permitted-value `<select>` dropdown no longer re-triggers `startEdit()`, which was recreating the dropdown and causing it to flash on/off. Added re-entry guard checking for existing `select`/`input` inside the value element.
+
+## [2.73.18] - 2026-04-09
+
+### Added
+- **Permitted value dropdowns** for enum CSS properties — `display`, `flexDirection`, `textAlign`, `alignItems`, `justifyContent`, `fontWeight`, `overflow`, `position` now show a `<select>` dropdown with valid options instead of a free-text input. Select commits on change.
+- **Enhanced visual cue** — generic flashZone fallback now shows a bright blue outline with a computed-value label overlay. All property name clicks flash the element.
+- **More editable properties** — added `overflow`, `position`, `top`, `left`, `boxShadow`, `fontFamily` to the editable set.
+
+## [2.73.17] - 2026-04-08
+
+### Added
+- **Fixture data tree in property inspector** — when a component is selected, the inspector fetches its test fixture data from `/review/api/fixture` and renders it as an expandable tree. Shows columns, rows, segments, and all nested data with color swatches for hex values. Collapsible at every level.
+
+## [2.73.16] - 2026-04-08
+
+### Added
+- **Gallery view** — `/review/gallery?cols=N` renders all queued components in a grid layout, proxied through Vite. Vue error boundaries isolate per-component failures so one broken component doesn't crash the gallery. Gallery button in review UI header toggles between single-component and gallery views.
+- **Fixture unwrapping** — when a contract test fixture wraps props in an array (e.g., `{cards: [{value, label}]}`) but the component expects flat props, the first item is auto-unwrapped. Fixes StatCardWithIcon rendering blank in preview.
+
+## [2.73.15] - 2026-04-08
+
+### Added
+- **Reviewer output logging** — review and fix outputs now saved to `build-logs/` as `{phase}-review-{id}-c{cycle}.log` and `{phase}-fix-{id}-c{cycle}.log`. Enables auditing whether reviewers actually ran Playwright, what issues were found, and what fixes were applied.
+
+### Changed
+- **Default parallelism now all-items** — per-item pipeline runs all items concurrently by default (was sequential). Bottleneck is API latency, not CPU/RAM. Use `--parallel N` to limit if needed.
+
 ## [2.73.14] - 2026-04-08
 
 ### Fixed (review UI — component preview rendering)

package/bin/design-orchestrator.js

@@ -518,7 +518,7 @@ ${BOLD}Options:${RESET}
   --skip-measure    Skip Playwright measurement (human-review only)
   --clean           Clear all stale artifacts before starting
   --verbose, -v     Show Claude's tool calls and prompts in terminal
-  --parallel <N>    Run N items concurrently (default: 1 = sequential)
+  --parallel <N>    Run N items concurrently (default: all items in parallel)
   --help            Show this help
 
 ${BOLD}Pipeline:${RESET}

package/bin/orchestrator.js

@@ -164,7 +164,7 @@ ${BOLD}Options:${RESET}
   --timeout <sec>       Claude timeout per phase in seconds (default: 600)
   --skip-measure        Skip automated measurement (human-review only)
   --clean               Clear all artifacts from previous runs + delete build output
-  --parallel <N>        Run N items concurrently (default: 1, recommended: 3)
+  --parallel <N>        Run N items concurrently (default: all items in parallel)
   --verbose, -v         Show Claude's tool calls and prompts in terminal
   --help                Show this help
 
@@ -784,7 +784,7 @@ ${BOLD}Phases:${RESET} ${this.wf.phases.join(" → ")}
       // Each item is independent: 1 contract + 1 source = tiny context.
       // With --parallel N, runs N items concurrently.
       if (this.wf.buildSingleItemPrompt && this.wf.buildSingleItemReviewPrompt) {
-        const concurrency = opts.parallel || 1;
+        const concurrency = opts.parallel || items.length;
         if (concurrency > 1) {
           log(`\n${CYAN}  ⚙${RESET} Building and reviewing ${items.length} ${phase} (${concurrency} parallel)...`);
         } else {
@@ -819,6 +819,12 @@ ${BOLD}Phases:${RESET} ${this.wf.phases.join(" → ")}
             const reviewPrompt = this.wf.buildSingleItemReviewPrompt(phase, item, {}, projectDir, { devPort, reviewPort });
             const reviewResult = await this.spawnClaudeAsync(projectDir, reviewPrompt, perItemTimeout, { label: `${phase}-review-${item.id}-c${cycle}` });
 
+            // Save review output for auditing (was the reviewer thorough? did it use Playwright?)
+            fs.writeFileSync(
+              path.join(buildLogDir, `${phase}-review-${item.id}-c${cycle}.log`),
+              `Exit code: ${reviewResult.exitCode}\nDuration: ${reviewResult.duration}s\n\n--- REVIEW OUTPUT ---\n${reviewResult.output.slice(0, 10000)}`
+            );
+
             const isCrash = reviewResult.exitCode !== 0 && reviewResult.duration < 10;
             const isKilled = [143, 137].includes(reviewResult.exitCode);
             const isEmptyFail = reviewResult.exitCode !== 0 && !reviewResult.output.trim();
@@ -849,6 +855,10 @@ ${BOLD}Phases:${RESET} ${this.wf.phases.join(" → ")}
                   : this._defaultAutoFixPrompt(phase, itemIssues);
                 dim(`  ${item.componentName}: fixing...`);
                 const fixResult = await this.spawnClaudeAsync(projectDir, fixPrompt, perItemTimeout, { label: `${phase}-fix-${item.id}-c${cycle}` });
+                fs.writeFileSync(
+                  path.join(buildLogDir, `${phase}-fix-${item.id}-c${cycle}.log`),
+                  `Exit code: ${fixResult.exitCode}\nDuration: ${fixResult.duration}s\n\n--- FIX OUTPUT ---\n${fixResult.output.slice(0, 10000)}`
+                );
                 if (fixResult.exitCode === 0) success(`  ${item.componentName}: fixed (${fixResult.duration}s)`);
                 else warn(`  ${item.componentName}: fix exit ${fixResult.exitCode}`);
               }
@@ -924,6 +934,14 @@ ${BOLD}Phases:${RESET} ${this.wf.phases.join(" → ")}
                 const reviewResult = this.spawnClaude(projectDir, reviewPrompt, Math.min(reviewTimeout, perItemTimeout), { label: `${phase}-review-c${autoReviewCycle}-${item.id}` });
                 totalDuration += reviewResult.duration;
 
+                // Save review output for auditing
+                const reviewLogDir = path.join(this.getReviewDir(projectDir), "build-logs");
+                ensureDir(reviewLogDir);
+                fs.writeFileSync(
+                  path.join(reviewLogDir, `${phase}-review-c${autoReviewCycle}-${item.id}.log`),
+                  `Exit code: ${reviewResult.exitCode}\nDuration: ${reviewResult.duration}s\n\n--- REVIEW OUTPUT ---\n${reviewResult.output.slice(0, 10000)}`
+                );
+
                 const isCrash = reviewResult.exitCode !== 0 && reviewResult.duration < 10;
                 const isKilled = [143, 137].includes(reviewResult.exitCode);
                 const isEmptyFail = reviewResult.exitCode !== 0 && !reviewResult.output.trim();

package/commands/gsd-t-design-build.md

@@ -34,7 +34,7 @@ Pass any of these as `$ARGUMENTS`:
 | `--timeout <sec>`   | Claude timeout per tier in seconds (default: 600) |
 | `--skip-measure`    | Skip Playwright measurement (human-review only) |
 | `--clean`           | Clear all stale artifacts + delete build output before each phase |
-| `--parallel <N>`    | Run N items concurrently (default: 1, recommended: 3) |
+| `--parallel <N>`    | Run N items concurrently (default: all items in parallel) |
 | `--verbose`, `-v`   | Show Claude's tool calls and prompts in terminal |
 
 ## Prerequisites

package/package.json

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

@@ -333,12 +333,67 @@
         backgroundColor: "rgba(148, 163, 184, 0.08)",
       });
 
-    // ── Generic fallback ──
+    // ── SVG attribute zones (prefixed with "svg:") ──
+    } else if (property.startsWith("svg:")) {
+      const attr = property.slice(4);
+      if (attr === "stroke-width" || attr === "r" || attr === "rx" || attr === "ry") {
+        // Dimension attribute — blue outline with measurement label
+        addFlashDiv(rect.top - 2, rect.left - 2, rect.width + 4, rect.height + 4, {
+          border: "2px solid #3b82f6",
+          backgroundColor: "rgba(59, 130, 246, 0.15)",
+          borderRadius: "50%",
+        });
+        const val = el.getAttribute(attr) || "";
+        if (val) {
+          const lbl = addFlashDiv(rect.top - 18, rect.left, Math.max(val.length * 8, 40), 16, {
+            backgroundColor: "#1e293b", borderRadius: "3px",
+            fontSize: "10px", color: "#3b82f6", fontFamily: "monospace",
+            fontWeight: "600", textAlign: "center", lineHeight: "16px",
+          });
+          lbl.textContent = val;
+        }
+      } else if (attr === "stroke" || attr === "fill") {
+        // Color attribute — colored border matching the value
+        const color = el.getAttribute(attr) || getComputedStyle(el)[attr] || "#888";
+        addFlashDiv(rect.top - 3, rect.left - 3, rect.width + 6, rect.height + 6, {
+          border: "3px solid " + color,
+          backgroundColor: "transparent",
+          borderRadius: "2px",
+        });
+      } else if (attr === "stroke-dasharray" || attr === "stroke-dashoffset") {
+        // Dash pattern — dashed outline
+        addFlashDiv(rect.top - 2, rect.left - 2, rect.width + 4, rect.height + 4, {
+          border: "2px dashed #f59e0b",
+          backgroundColor: "rgba(245, 158, 11, 0.1)",
+          borderRadius: "2px",
+        });
+      } else {
+        // Generic SVG attr — cyan outline
+        addFlashDiv(rect.top - 2, rect.left - 2, rect.width + 4, rect.height + 4, {
+          border: "2px solid #06b6d4",
+          backgroundColor: "rgba(6, 182, 212, 0.1)",
+          borderRadius: "2px",
+        });
+      }
+
+    // ── Generic fallback — bright outline + pulse for any unhandled property ──
     } else {
-      addFlashDiv(rect.top, rect.left, rect.width, rect.height, {
-        backgroundColor: "rgba(59, 130, 246, 0.2)",
-        border: "1px solid rgba(59, 130, 246, 0.4)",
+      addFlashDiv(rect.top - 2, rect.left - 2, rect.width + 4, rect.height + 4, {
+        backgroundColor: "rgba(59, 130, 246, 0.15)",
+        border: "2px solid rgba(59, 130, 246, 0.7)",
+        borderRadius: "4px",
       });
+      // Property value label
+      const propVal = s.getPropertyValue(property.replace(/([A-Z])/g, "-$1").toLowerCase()) || s[property] || "";
+      if (propVal && propVal.length < 30) {
+        const lbl = addFlashDiv(rect.top - 20, rect.left, Math.max(propVal.length * 7, 50), 16, {
+          backgroundColor: "#1e293b", borderRadius: "3px",
+          fontSize: "10px", color: "#60a5fa", fontFamily: "monospace",
+          fontWeight: "600", textAlign: "center", lineHeight: "16px",
+          padding: "0 4px", whiteSpace: "nowrap",
+        });
+        lbl.textContent = propVal;
+      }
     }
 
     scheduleFlashFade();
@@ -408,6 +463,44 @@
     };
   }
 
+  // SVG attribute names to extract per element type
+  const SVG_ATTRS = {
+    svg: ["viewBox", "width", "height"],
+    circle: ["cx", "cy", "r", "stroke", "stroke-width", "fill", "opacity", "stroke-dasharray", "stroke-dashoffset", "transform"],
+    ellipse: ["cx", "cy", "rx", "ry", "stroke", "stroke-width", "fill", "opacity"],
+    rect: ["x", "y", "width", "height", "rx", "ry", "stroke", "stroke-width", "fill", "opacity"],
+    line: ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "opacity"],
+    path: ["d", "stroke", "stroke-width", "fill", "opacity", "stroke-linecap", "stroke-linejoin", "transform"],
+    text: ["x", "y", "font-size", "font-weight", "fill", "text-anchor", "dominant-baseline"],
+    g: ["transform", "opacity", "fill", "stroke"],
+    polyline: ["points", "stroke", "stroke-width", "fill"],
+    polygon: ["points", "stroke", "stroke-width", "fill"],
+  };
+
+  function extractSvgAttrs(el) {
+    const tag = el.tagName.toLowerCase();
+    const attrNames = SVG_ATTRS[tag];
+    if (!attrNames) return null;
+    const attrs = {};
+    let hasAny = false;
+    for (const name of attrNames) {
+      const val = el.getAttribute(name);
+      if (val !== null && val !== undefined) {
+        attrs[name] = val;
+        hasAny = true;
+      }
+    }
+    // Also grab computed stroke/fill from CSS if not in attributes
+    if (el instanceof SVGElement) {
+      const s = getComputedStyle(el);
+      if (!attrs["stroke"] && s.stroke && s.stroke !== "none") { attrs["stroke"] = s.stroke; hasAny = true; }
+      if (!attrs["fill"] && s.fill && s.fill !== "none") { attrs["fill"] = s.fill; hasAny = true; }
+      if (!attrs["stroke-width"] && s.strokeWidth) { attrs["stroke-width"] = s.strokeWidth; hasAny = true; }
+      if (!attrs["opacity"] && s.opacity !== "1") { attrs["opacity"] = s.opacity; hasAny = true; }
+    }
+    return hasAny ? attrs : null;
+  }
+
   function extractBoxModel(el) {
     const s = getComputedStyle(el);
     const rect = el.getBoundingClientRect();
@@ -536,6 +629,7 @@
       path: getElementPath(el),
       styles: extractStyles(el),
       boxModel: extractBoxModel(el),
+      svgAttrs: extractSvgAttrs(el),
       tagName: el.tagName.toLowerCase(),
       className: typeof el.className === "string" ? el.className : "",
       textContent: (el.textContent || "").trim().substring(0, 100),
@@ -573,6 +667,7 @@
       path: getElementPath(el),
       styles: extractStyles(el),
       boxModel: extractBoxModel(el),
+      svgAttrs: extractSvgAttrs(el),
       tagName: el.tagName.toLowerCase(),
       className: typeof el.className === "string" ? el.className : "",
       textContent: (el.textContent || "").trim().substring(0, 100),
@@ -735,6 +830,7 @@
             value: msg.value,
             styles: extractStyles(lockedEl),
             boxModel: extractBoxModel(lockedEl),
+            svgAttrs: extractSvgAttrs(lockedEl),
             propagated: propagatedCount,
             propagateScope,
           }, "*");
@@ -760,6 +856,7 @@
             path: getElementPath(lockedEl),
             styles: extractStyles(lockedEl),
             boxModel: extractBoxModel(lockedEl),
+            svgAttrs: extractSvgAttrs(lockedEl),
           }, "*");
         }
         break;
@@ -801,7 +898,9 @@
             let keyCounter = 0;
 
             function buildTree(el, depth) {
-              if (depth > 4) return null; // limit depth
+              // SVG subtrees get deeper traversal (arcs are nested)
+              const isSvgSubtree = el instanceof SVGElement || el.closest("svg");
+              if (depth > (isSvgSubtree ? 8 : 4)) return null;
               const tag = el.tagName.toLowerCase();
               const s = getComputedStyle(el);
               const rect = el.getBoundingClientRect();
@@ -836,11 +935,20 @@
                 label = "Col " + colIdx;
                 if (text && text.length < 15) label += ' "' + text + '"';
               } else if (tag === "svg") {
-                label = "svg";
+                const vb = el.getAttribute("viewBox");
+                label = "svg" + (vb ? ` [${vb}]` : "");
               } else if (tag === "circle") {
-                label = "arc/circle";
+                const stroke = el.getAttribute("stroke") || "";
+                const fill = el.getAttribute("fill") || "";
+                const color = stroke && stroke !== "none" ? stroke : fill && fill !== "none" ? fill : "";
+                const r = el.getAttribute("r") || "";
+                const sw = el.getAttribute("stroke-width") || "";
+                label = "arc" + (color ? " " + color : "") + (sw ? " w:" + sw : "") + (r ? " r:" + r : "");
               } else if (tag === "path") {
-                label = "path";
+                const stroke = el.getAttribute("stroke") || "";
+                const fill = el.getAttribute("fill") || "";
+                const color = stroke && stroke !== "none" ? stroke : fill && fill !== "none" ? fill : "";
+                label = "path" + (color ? " " + color : "");
               } else if (s.display === "flex" || s.display === "inline-flex") {
                 label = "flex " + (s.flexDirection === "column" ? "col" : "row");
               } else if (s.display === "grid") {
@@ -876,10 +984,16 @@
                 node.props.fontWeight = s.fontWeight;
                 if (tag === "th") node.props.background = s.backgroundColor;
               }
-              if (tag === "circle") {
+              if (tag === "circle" || tag === "ellipse") {
                 node.props.stroke = el.getAttribute("stroke");
                 node.props.strokeWidth = el.getAttribute("stroke-width");
                 node.props.r = el.getAttribute("r");
+                node.props.fill = el.getAttribute("fill");
+                node.props.strokeDasharray = el.getAttribute("stroke-dasharray");
+              } else if (tag === "path" || tag === "line" || tag === "rect") {
+                node.props.stroke = el.getAttribute("stroke");
+                node.props.strokeWidth = el.getAttribute("stroke-width");
+                node.props.fill = el.getAttribute("fill");
               }
               if (s.display === "flex" || s.display === "inline-flex") {
                 node.props.gap = s.gap;
@@ -926,6 +1040,7 @@
             path: getElementPath(el),
             styles: extractStyles(el),
             boxModel: extractBoxModel(el),
+            svgAttrs: extractSvgAttrs(el),
             tagName: el.tagName.toLowerCase(),
             className: typeof el.className === "string" ? el.className : "",
             textContent: (el.textContent || "").trim().substring(0, 100),
@@ -933,6 +1048,23 @@
           }, "*");
         }
         break;
+
+      case "gsdt-set-svg-attr":
+        // Apply an SVG attribute change to the locked element
+        if (lockedEl && msg.attribute && msg.value !== undefined) {
+          lockedEl.setAttribute(msg.attribute, msg.value);
+          positionOverlay(lockedEl);
+          window.parent.postMessage({
+            type: "gsdt-style-updated",
+            path: getElementPath(lockedEl),
+            property: "svg:" + msg.attribute,
+            value: msg.value,
+            styles: extractStyles(lockedEl),
+            boxModel: extractBoxModel(lockedEl),
+            svgAttrs: extractSvgAttrs(lockedEl),
+          }, "*");
+        }
+        break;
     }
   });
 

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

@@ -69,6 +69,23 @@ function extractFixtureFromContract(componentPath) {
     for (const [k, v] of Object.entries(fixture)) {
       if (!k.startsWith("__")) props[k] = v;
     }
+    // Check if component expects different props than fixture provides.
+    // If fixture has a single array-of-objects key (e.g., "cards": [{value, label}]),
+    // and the component file's defineProps doesn't reference that key,
+    // unwrap the first item as individual props.
+    const propKeys = Object.keys(props);
+    if (propKeys.length === 1) {
+      const val = props[propKeys[0]];
+      if (Array.isArray(val) && val.length > 0 && typeof val[0] === "object") {
+        try {
+          const compSource = fs.readFileSync(path.join(PROJECT_DIR, componentPath), "utf8");
+          // If the component doesn't reference this array key in defineProps, unwrap first item
+          if (!compSource.includes(propKeys[0])) {
+            return val[0];
+          }
+        } catch { /* can't read component, use fixture as-is */ }
+      }
+    }
     return props;
   } catch { return null; }
 }
@@ -123,6 +140,112 @@ ${linkTags}
 </html>`;
 }
 
+function generateGalleryHtml(queueItems, cols) {
+  const linkTags = GLOBAL_STYLES.map(s => `  <link rel="stylesheet" href="/${s}">`).join("\n");
+  // Only include items with source paths (actual components)
+  const components = queueItems.filter(item => item.sourcePath);
+
+  const imports = components.map((item, i) => {
+    return `    import Comp${i} from '/${item.sourcePath}'`;
+  }).join("\n");
+
+  const propsData = components.map((item) => {
+    const fixture = extractFixtureFromContract(item.sourcePath);
+    return fixture ? JSON.stringify(fixture) : "{}";
+  });
+
+  let mountScript;
+  if (FRAMEWORK === "vue") {
+    mountScript = `
+  <script type="module">
+    import { createApp, h, defineComponent, onErrorCaptured, ref } from 'vue'
+${imports}
+
+    const components = [${components.map((_, i) => `Comp${i}`).join(", ")}];
+    const names = ${JSON.stringify(components.map(c => c.name || c.id))};
+    const allProps = [${propsData.join(", ")}];
+
+    // Error boundary wrapper — catches render errors per-component
+    const SafeCell = defineComponent({
+      props: { comp: Object, compProps: Object, label: String },
+      setup(props) {
+        const error = ref(null)
+        onErrorCaptured((err) => { error.value = err.message; return false })
+        return () => h('div', { class: 'gallery-cell' }, [
+          h('div', { class: 'gallery-label' }, props.label),
+          h('div', { class: 'gallery-component' }, [
+            error.value
+              ? h('div', { style: 'color:#ef4444;font-size:12px;padding:8px' }, '⚠ ' + error.value)
+              : h(props.comp, props.compProps)
+          ])
+        ])
+      }
+    })
+
+    const Gallery = defineComponent({
+      render() {
+        return h('div', { class: 'gallery-grid' },
+          components.map((Comp, i) =>
+            h(SafeCell, { comp: Comp, compProps: allProps[i], label: names[i], key: i })
+          )
+        )
+      }
+    })
+    createApp(Gallery).mount('#app')
+  </script>`;
+  } else if (FRAMEWORK === "react") {
+    mountScript = `
+  <script type="module">
+    import React from 'react'
+    import { createRoot } from 'react-dom/client'
+${imports}
+
+    const components = [${components.map((_, i) => `Comp${i}`).join(", ")}];
+    const names = ${JSON.stringify(components.map(c => c.name || c.id))};
+    const allProps = [${propsData.join(", ")}];
+
+    function Gallery() {
+      return React.createElement('div', { className: 'gallery-grid' },
+        components.map((Comp, i) =>
+          React.createElement('div', { className: 'gallery-cell', key: i },
+            React.createElement('div', { className: 'gallery-label' }, names[i]),
+            React.createElement('div', { className: 'gallery-component' },
+              React.createElement(Comp, allProps[i])
+            )
+          )
+        )
+      )
+    }
+    createRoot(document.getElementById('app')).render(React.createElement(Gallery))
+  </script>`;
+  } else {
+    mountScript = `<script type="module">/* unsupported framework */</script>`;
+  }
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GSD-T Design Gallery</title>
+${linkTags}
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #f1f5f9; min-height: 100vh; padding: 24px; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; }
+    #app { width: 100%; }
+    .gallery-grid { display: grid; grid-template-columns: repeat(${cols}, 1fr); gap: 20px; }
+    .gallery-cell { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; overflow: hidden; }
+    .gallery-label { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; font-family: monospace; }
+    .gallery-component { min-height: 60px; }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  ${mountScript}
+</body>
+</html>`;
+}
+
 // ── Ensure coordination directory ─────────────────────────────────────
 function ensureDir(dir) {
   try { fs.mkdirSync(dir, { recursive: true }); } catch { /* exists */ }
@@ -360,6 +483,49 @@ const server = http.createServer((req, res) => {
     return;
   }
 
+  // Gallery — all queued components in a grid, proxied through Vite
+  if (pathname === "/review/gallery") {
+    const queueItems = readQueue();
+    const cols = parseInt(parsed.query.cols || "3", 10);
+    if (queueItems.length === 0) {
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end("<html><body><h2>No components queued yet</h2></body></html>");
+      return;
+    }
+    const html = generateGalleryHtml(queueItems, cols);
+    const previewFile = path.join(PROJECT_DIR, "__gsd-preview.html");
+    try { fs.writeFileSync(previewFile, html); } catch { /* ignore */ }
+    const proxyOpts = {
+      hostname: targetUrl.hostname,
+      port: targetUrl.port,
+      path: "/__gsd-preview.html",
+      method: "GET",
+      headers: { ...req.headers, host: `${targetUrl.hostname}:${targetUrl.port}` },
+    };
+    const proxyReq = http.request(proxyOpts, (proxyRes) => {
+      const chunks = [];
+      proxyRes.on("data", (chunk) => chunks.push(chunk));
+      proxyRes.on("end", () => {
+        const transformed = Buffer.concat(chunks).toString("utf8");
+        const buf = Buffer.from(transformed, "utf8");
+        res.writeHead(proxyRes.statusCode, {
+          ...proxyRes.headers,
+          "content-length": buf.length,
+          "cache-control": "no-cache",
+        });
+        res.end(buf);
+        try { fs.unlinkSync(previewFile); } catch { /* ignore */ }
+      });
+    });
+    proxyReq.on("error", () => {
+      res.writeHead(502, { "Content-Type": "text/html" });
+      res.end("<h1>Dev server unreachable</h1>");
+      try { fs.unlinkSync(previewFile); } catch { /* ignore */ }
+    });
+    proxyReq.end();
+    return;
+  }
+
   // Component preview — writes temp HTML to project, proxies through Vite for module resolution
   if (pathname === "/review/preview") {
     const component = parsed.query.component;
@@ -422,6 +588,14 @@ const server = http.createServer((req, res) => {
     return;
   }
 
+  if (pathname === "/review/api/fixture") {
+    const component = parsed.query.component;
+    const fixture = component ? extractFixtureFromContract(component) : null;
+    res.writeHead(200, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+    res.end(JSON.stringify(fixture || {}));
+    return;
+  }
+
   if (pathname === "/review/api/feedback" && req.method === "GET") {
     res.writeHead(200, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
     res.end(JSON.stringify(readFeedback()));

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

@@ -705,6 +705,12 @@
     <span class="phase-badge" id="phase-badge">Elements</span>
   </div>
   <div class="header-right">
+    <button class="inspect-toggle" id="gallery-toggle" title="Show all components in a grid" style="margin-right:4px">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
+      </svg>
+      Gallery
+    </button>
     <button class="inspect-toggle" id="inspect-toggle" title="Toggle inspect mode (Ctrl+Shift+I)">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"/>
@@ -1045,6 +1051,18 @@
       renderAIReview(item.aiReview);
     }
 
+    // Fetch and render fixture data (columns, rows, segments, etc.)
+    if (item.sourcePath) {
+      fetch(`/review/api/fixture?component=${encodeURIComponent(item.sourcePath)}`)
+        .then(r => r.json())
+        .then(fixture => {
+          if (fixture && Object.keys(fixture).length > 0) {
+            renderFixtureTree(fixture);
+          }
+        })
+        .catch(() => {});
+    }
+
     // Hint
     if (item.selector) {
       const hint = document.createElement("div");
@@ -1054,6 +1072,128 @@
     }
   }
 
+  function renderFixtureTree(fixture) {
+    const container = document.createElement("div");
+    container.className = "prop-group";
+    container.innerHTML = `<div class="prop-group-header">▸ Data Props</div>`;
+    const body = document.createElement("div");
+    body.style.cssText = "padding-left:8px;";
+
+    function renderValue(key, val, parent, depth, propPath) {
+      if (Array.isArray(val)) {
+        const row = document.createElement("div");
+        row.className = "prop-group-header";
+        row.style.paddingLeft = (depth * 12) + "px";
+        row.style.fontSize = "11px";
+        row.innerHTML = `<span style="color:#93c5fd">▸ ${key}</span> <span style="color:var(--text-dim);font-size:10px">[${val.length}]</span>`;
+        let expanded = depth < 1;
+        const items = document.createElement("div");
+        items.style.display = expanded ? "" : "none";
+        row.addEventListener("click", () => { expanded = !expanded; items.style.display = expanded ? "" : "none"; row.querySelector("span").textContent = (expanded ? "▾ " : "▸ ") + key; });
+        if (expanded) row.querySelector("span").textContent = "▾ " + key;
+        parent.appendChild(row);
+        val.forEach((item, i) => {
+          const itemPath = propPath + "." + key + "[" + i + "]";
+          if (typeof item === "object" && item !== null) {
+            const itemRow = document.createElement("div");
+            itemRow.style.paddingLeft = ((depth + 1) * 12) + "px";
+            itemRow.style.cssText += "font-size:10px;color:var(--text-dim);margin:2px 0;";
+            itemRow.textContent = `[${i}]`;
+            items.appendChild(itemRow);
+            for (const [k, v] of Object.entries(item)) {
+              renderValue(k, v, items, depth + 2, itemPath);
+            }
+          } else {
+            const itemRow = document.createElement("div");
+            itemRow.className = "prop-row";
+            itemRow.style.paddingLeft = ((depth + 1) * 12) + "px";
+            itemRow.innerHTML = `<span class="prop-name">[${i}]</span><span class="prop-value">${escapeHtml(String(item))}</span>`;
+            items.appendChild(itemRow);
+          }
+        });
+        parent.appendChild(items);
+      } else if (typeof val === "object" && val !== null) {
+        const row = document.createElement("div");
+        row.className = "prop-group-header";
+        row.style.paddingLeft = (depth * 12) + "px";
+        row.style.fontSize = "11px";
+        row.innerHTML = `<span style="color:#93c5fd">▸ ${key}</span>`;
+        let expanded = depth < 1;
+        const items = document.createElement("div");
+        items.style.display = expanded ? "" : "none";
+        row.addEventListener("click", () => { expanded = !expanded; items.style.display = expanded ? "" : "none"; row.querySelector("span").textContent = (expanded ? "▾ " : "▸ ") + key; });
+        if (expanded) row.querySelector("span").textContent = "▾ " + key;
+        parent.appendChild(row);
+        for (const [k, v] of Object.entries(val)) {
+          renderValue(k, v, items, depth + 1, propPath + "." + key);
+        }
+        parent.appendChild(items);
+      } else {
+        const row = document.createElement("div");
+        row.className = "prop-row";
+        row.style.paddingLeft = (depth * 12) + "px";
+        const isColor = typeof val === "string" && val.match(/^#[0-9a-fA-F]{3,8}$/);
+        const displayVal = isColor
+          ? `<span class="color-swatch" style="background:${val}"></span>${val}`
+          : escapeHtml(String(val));
+
+        const nameEl = document.createElement("span");
+        nameEl.className = "prop-name";
+        nameEl.textContent = key;
+        row.appendChild(nameEl);
+
+        const valEl = document.createElement("span");
+        valEl.className = "prop-value editable";
+        valEl.setAttribute("data-prop", "fixture:" + propPath + "." + key);
+        valEl.setAttribute("data-original", String(val));
+        valEl.innerHTML = displayVal;
+
+        valEl.addEventListener("click", () => startFixtureEdit(valEl, propPath + "." + key, String(val), isColor));
+        row.appendChild(valEl);
+        parent.appendChild(row);
+      }
+    }
+
+    for (const [k, v] of Object.entries(fixture)) {
+      renderValue(k, v, body, 0, "");
+    }
+    container.appendChild(body);
+
+    // Toggle data props section
+    let dataExpanded = true;
+    container.querySelector(".prop-group-header").addEventListener("click", () => {
+      dataExpanded = !dataExpanded;
+      body.style.display = dataExpanded ? "" : "none";
+      container.querySelector(".prop-group-header").textContent = (dataExpanded ? "▾" : "▸") + " Data Props";
+    });
+    container.querySelector(".prop-group-header").textContent = "▾ Data Props";
+
+    inspectorInfo.appendChild(container);
+  }
+
+  function escapeHtml(str) {
+    return str.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+  }
+
+  // ── Gallery mode ──────────────────────────────────
+  const galleryToggle = document.getElementById("gallery-toggle");
+  let galleryActive = false;
+
+  galleryToggle.addEventListener("click", () => {
+    galleryActive = !galleryActive;
+    galleryToggle.classList.toggle("active", galleryActive);
+    if (galleryActive) {
+      previewIframe.src = "/review/gallery?cols=3";
+      previewUrl.textContent = "Gallery — all components";
+    } else if (selectedIdx >= 0 && filteredQueue[selectedIdx]) {
+      const item = filteredQueue[selectedIdx];
+      if (item.sourcePath) {
+        previewIframe.src = `/review/preview?component=${encodeURIComponent(item.sourcePath)}`;
+        previewUrl.textContent = item.sourcePath;
+      }
+    }
+  });
+
   // ── Inspect mode ──────────────────────────────────
   inspectToggle.addEventListener("click", () => {
     inspectActive = !inspectActive;
@@ -1105,6 +1245,7 @@
 
       case "gsdt-style-updated":
         currentStyles = msg.styles;
+        if (msg.svgAttrs) currentSvgAttrs = msg.svgAttrs;
         renderPropertyValues(msg.styles);
         // Show propagation feedback with scope
         if (msg.propagated > 0) {
@@ -1130,9 +1271,12 @@
   });
 
   // ── Inspector rendering ───────────────────────────
+  let currentSvgAttrs = null;
+
   function renderInspector(msg) {
     const styles = msg.styles;
     const boxModel = msg.boxModel;
+    currentSvgAttrs = msg.svgAttrs || null;
 
     // Only update props zone — preserve tree
     inspectorProps.innerHTML = "";
@@ -1186,8 +1330,9 @@
       "width", "height",
       "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
       "marginTop", "marginRight", "marginBottom", "marginLeft",
-      "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign",
+      "fontSize", "fontWeight", "fontFamily", "lineHeight", "letterSpacing", "textAlign",
       "backgroundColor", "color", "borderRadius", "border", "opacity",
+      "overflow", "position", "top", "left", "boxShadow",
     ]);
 
     for (const [groupName, props] of Object.entries(groups)) {
@@ -1283,6 +1428,267 @@
         inspectorProps.appendChild(group);
       }
     }
+
+    // SVG Attributes group (if element is SVG)
+    if (currentSvgAttrs) {
+      const svgGroup = document.createElement("div");
+      svgGroup.className = "prop-group";
+
+      const svgHeader = document.createElement("div");
+      svgHeader.className = "prop-group-header";
+      svgHeader.innerHTML = `<span>▾</span> SVG Attributes`;
+      svgHeader.style.color = "#06b6d4";
+      svgGroup.appendChild(svgHeader);
+
+      const svgRows = document.createElement("div");
+      svgRows.style.display = "block";
+
+      svgHeader.addEventListener("click", () => {
+        const visible = svgRows.style.display !== "none";
+        svgRows.style.display = visible ? "none" : "block";
+        svgHeader.innerHTML = `<span>${visible ? "▸" : "▾"}</span> SVG Attributes`;
+      });
+
+      const svgColorAttrs = new Set(["stroke", "fill"]);
+      const svgNumericAttrs = new Set(["stroke-width", "r", "rx", "ry", "cx", "cy", "x", "y",
+        "x1", "y1", "x2", "y2", "width", "height", "opacity", "stroke-dashoffset"]);
+
+      for (const [attr, val] of Object.entries(currentSvgAttrs)) {
+        const row = document.createElement("div");
+        row.className = "prop-row";
+        row.setAttribute("data-prop", "svg:" + attr);
+
+        const nameEl = document.createElement("span");
+        nameEl.className = "prop-name";
+        nameEl.textContent = attr;
+        nameEl.title = `Click to highlight ${attr}`;
+        nameEl.style.cursor = "pointer";
+        nameEl.addEventListener("click", () => {
+          if (previewIframe.contentWindow) {
+            previewIframe.contentWindow.postMessage({
+              type: "gsdt-highlight-zone",
+              property: "svg:" + attr,
+            }, "*");
+          }
+        });
+        row.appendChild(nameEl);
+
+        const valEl = document.createElement("span");
+        valEl.className = "prop-value editable";
+        valEl.setAttribute("data-prop", "svg:" + attr);
+        valEl.setAttribute("data-original", val);
+
+        if (svgColorAttrs.has(attr) && val && val !== "none") {
+          valEl.innerHTML = `<span class="color-swatch" style="background:${val}"></span>${val}`;
+        } else {
+          valEl.textContent = val;
+        }
+
+        // Check if changed
+        const compId = filteredQueue[selectedIdx]?.id;
+        const compChanges = changes.get(compId) || [];
+        const existing = compChanges.find(c => c.path === currentElementPath && c.property === "svg:" + attr);
+        if (existing) {
+          valEl.classList.add("changed");
+          valEl.textContent = existing.newValue;
+        }
+
+        valEl.addEventListener("click", () => startSvgEdit(valEl, attr));
+        row.appendChild(valEl);
+        svgRows.appendChild(row);
+      }
+
+      svgGroup.appendChild(svgRows);
+      if (svgRows.children.length > 0) {
+        inspectorProps.appendChild(svgGroup);
+      }
+    }
+  }
+
+  function startSvgEdit(valEl, attr) {
+    if (valEl.querySelector("select, input")) return;
+
+    const currentVal = valEl.getAttribute("data-original");
+    const compChanges = changes.get(filteredQueue[selectedIdx]?.id) || [];
+    const existing = compChanges.find(c => c.path === currentElementPath && c.property === "svg:" + attr);
+    const displayVal = existing ? existing.newValue : currentVal;
+
+    const permitted = PERMITTED_VALUES[attr];
+    let inputEl;
+
+    if (permitted) {
+      inputEl = document.createElement("select");
+      inputEl.className = "prop-edit-input";
+      for (const opt of permitted) {
+        const option = document.createElement("option");
+        option.value = opt;
+        option.textContent = opt;
+        if (opt === displayVal) option.selected = true;
+        inputEl.appendChild(option);
+      }
+    } else {
+      inputEl = document.createElement("input");
+      inputEl.className = "prop-edit-input";
+      inputEl.type = "text";
+      inputEl.value = displayVal;
+    }
+
+    valEl.innerHTML = "";
+    valEl.appendChild(inputEl);
+    inputEl.focus();
+    if (!permitted) {
+      const numMatch = displayVal.match(/^(-?[\d.]+)/);
+      if (numMatch) {
+        inputEl.setSelectionRange(0, numMatch[1].length);
+      } else {
+        inputEl.select();
+      }
+    }
+
+    let cancelled = false;
+    function commit() {
+      if (cancelled) return;
+      const newVal = inputEl.value.trim();
+      if (newVal && newVal !== currentVal) {
+        previewIframe.contentWindow.postMessage({
+          type: "gsdt-set-svg-attr",
+          attribute: attr,
+          value: newVal,
+        }, "*");
+
+        const compId = filteredQueue[selectedIdx]?.id;
+        if (compId) {
+          if (!changes.has(compId)) changes.set(compId, []);
+          const list = changes.get(compId);
+          const existingIdx = list.findIndex(c => c.path === currentElementPath && c.property === "svg:" + attr);
+          const change = {
+            path: currentElementPath,
+            property: "svg:" + attr,
+            oldValue: currentVal,
+            newValue: newVal,
+          };
+          if (existingIdx >= 0) {
+            list[existingIdx] = change;
+          } else {
+            list.push(change);
+          }
+          renderChanges(compId);
+          renderComponentList();
+        }
+
+        valEl.textContent = newVal;
+        valEl.classList.add("changed");
+      } else {
+        valEl.textContent = existing ? existing.newValue : currentVal;
+        if (existing) valEl.classList.add("changed");
+      }
+    }
+
+    if (permitted) {
+      inputEl.addEventListener("change", () => { commit(); cancelled = true; });
+      inputEl.addEventListener("blur", () => { if (!cancelled) { valEl.textContent = existing ? existing.newValue : currentVal; } });
+    } else {
+      inputEl.addEventListener("blur", () => { if (!cancelled) commit(); });
+    }
+    inputEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") { commit(); cancelled = true; inputEl.blur(); }
+      if (e.key === "Escape") {
+        cancelled = true;
+        if (inputEl.parentElement) inputEl.remove();
+        valEl.textContent = existing ? existing.newValue : currentVal;
+        if (existing) valEl.classList.add("changed");
+      }
+    });
+  }
+
+  function startFixtureEdit(valEl, fixturePath, currentVal, isColor) {
+    if (valEl.querySelector("select, input")) return;
+
+    const compId = filteredQueue[selectedIdx]?.id;
+    const compChanges = changes.get(compId) || [];
+    const prop = "fixture:" + fixturePath;
+    const existing = compChanges.find(c => c.property === prop);
+    const displayVal = existing ? existing.newValue : currentVal;
+
+    const inputEl = document.createElement("input");
+    inputEl.className = "prop-edit-input";
+    inputEl.type = isColor ? "color" : "text";
+    inputEl.value = displayVal;
+
+    valEl.innerHTML = "";
+    valEl.appendChild(inputEl);
+    inputEl.focus();
+    if (!isColor) {
+      const numMatch = displayVal.match(/^(-?[\d.]+)/);
+      if (numMatch) {
+        inputEl.setSelectionRange(0, numMatch[1].length);
+      } else {
+        inputEl.select();
+      }
+    }
+
+    let cancelled = false;
+    function commit() {
+      if (cancelled) return;
+      const newVal = inputEl.value.trim();
+      if (newVal && newVal !== currentVal) {
+        // Track as a fixture data change
+        if (compId) {
+          if (!changes.has(compId)) changes.set(compId, []);
+          const list = changes.get(compId);
+          const existingIdx = list.findIndex(c => c.property === prop);
+          const change = {
+            path: "(fixture data)",
+            property: prop,
+            oldValue: currentVal,
+            newValue: newVal,
+          };
+          if (existingIdx >= 0) {
+            list[existingIdx] = change;
+          } else {
+            list.push(change);
+          }
+          renderChanges(compId);
+          renderComponentList();
+        }
+
+        if (isColor) {
+          valEl.innerHTML = `<span class="color-swatch" style="background:${newVal}"></span>${newVal}`;
+        } else {
+          valEl.textContent = newVal;
+        }
+        valEl.classList.add("changed");
+      } else {
+        if (isColor && (existing ? existing.newValue : currentVal).match(/^#/)) {
+          const v = existing ? existing.newValue : currentVal;
+          valEl.innerHTML = `<span class="color-swatch" style="background:${v}"></span>${v}`;
+        } else {
+          valEl.textContent = existing ? existing.newValue : currentVal;
+        }
+        if (existing) valEl.classList.add("changed");
+      }
+    }
+
+    if (isColor) {
+      inputEl.addEventListener("change", () => { commit(); cancelled = true; });
+      inputEl.addEventListener("blur", () => { if (!cancelled) { valEl.innerHTML = `<span class="color-swatch" style="background:${currentVal}"></span>${currentVal}`; } });
+    } else {
+      inputEl.addEventListener("blur", () => { if (!cancelled) commit(); });
+    }
+    inputEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") { commit(); cancelled = true; inputEl.blur(); }
+      if (e.key === "Escape") {
+        cancelled = true;
+        if (inputEl.parentElement) inputEl.remove();
+        if (isColor) {
+          const v = existing ? existing.newValue : currentVal;
+          valEl.innerHTML = `<span class="color-swatch" style="background:${v}"></span>${v}`;
+        } else {
+          valEl.textContent = existing ? existing.newValue : currentVal;
+        }
+        if (existing) valEl.classList.add("changed");
+      }
+    });
   }
 
   function renderPropertyValues(styles) {
@@ -1408,32 +1814,71 @@
   }
 
   // ── Property editing ──────────────────────────────
+  // Permitted values for enum-style CSS properties
+  const PERMITTED_VALUES = {
+    display: ["block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block", "none", "contents"],
+    flexDirection: ["row", "row-reverse", "column", "column-reverse"],
+    alignItems: ["stretch", "flex-start", "flex-end", "center", "baseline"],
+    justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"],
+    textAlign: ["left", "center", "right", "justify"],
+    fontWeight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+    overflow: ["visible", "hidden", "scroll", "auto", "clip"],
+    position: ["static", "relative", "absolute", "fixed", "sticky"],
+    // SVG attribute permitted values (used by startSvgEdit)
+    "stroke-linecap": ["butt", "round", "square"],
+    "stroke-linejoin": ["miter", "round", "bevel"],
+    "text-anchor": ["start", "middle", "end"],
+    "dominant-baseline": ["auto", "middle", "hanging", "central", "text-top", "text-bottom"],
+  };
+
   function startEdit(valEl, prop) {
+    // Prevent re-entry: if already editing (select/input inside), do nothing
+    if (valEl.querySelector("select, input")) return;
+
     const currentVal = valEl.getAttribute("data-original");
     const compChanges = changes.get(filteredQueue[selectedIdx]?.id) || [];
     const existing = compChanges.find(c => c.path === currentElementPath && c.property === prop);
     const displayVal = existing ? existing.newValue : currentVal;
 
-    const input = document.createElement("input");
-    input.className = "prop-edit-input";
-    input.type = "text";
-    input.value = displayVal;
+    const permitted = PERMITTED_VALUES[prop];
+    let inputEl;
     let cancelled = false;
 
-    valEl.innerHTML = "";
-    valEl.appendChild(input);
-    input.focus();
-    // Select just the numeric part for values like "24px", "1.5em", "600"
-    const numMatch = displayVal.match(/^(-?[\d.]+)/);
-    if (numMatch) {
-      input.setSelectionRange(0, numMatch[1].length);
+    if (permitted) {
+      // Dropdown for enum properties
+      inputEl = document.createElement("select");
+      inputEl.className = "prop-edit-input";
+      for (const opt of permitted) {
+        const option = document.createElement("option");
+        option.value = opt;
+        option.textContent = opt;
+        if (opt === displayVal) option.selected = true;
+        inputEl.appendChild(option);
+      }
     } else {
-      input.select();
+      // Text input for free-form values
+      inputEl = document.createElement("input");
+      inputEl.className = "prop-edit-input";
+      inputEl.type = "text";
+      inputEl.value = displayVal;
+    }
+
+    valEl.innerHTML = "";
+    valEl.appendChild(inputEl);
+    inputEl.focus();
+    if (!permitted) {
+      // Select just the numeric part for values like "24px", "1.5em", "600"
+      const numMatch = displayVal.match(/^(-?[\d.]+)/);
+      if (numMatch) {
+        inputEl.setSelectionRange(0, numMatch[1].length);
+      } else {
+        inputEl.select();
+      }
     }
 
     function commit() {
       if (cancelled) return;
-      const newVal = input.value.trim();
+      const newVal = inputEl.value.trim();
       if (newVal && newVal !== currentVal) {
         // Apply the style change to the iframe
         previewIframe.contentWindow.postMessage({
@@ -1472,13 +1917,18 @@
       }
     }
 
-    input.addEventListener("blur", () => { if (!cancelled) commit(); });
-    input.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") { commit(); cancelled = true; input.blur(); }
+    if (permitted) {
+      // For select: commit on change, close on blur
+      inputEl.addEventListener("change", () => { commit(); cancelled = true; });
+      inputEl.addEventListener("blur", () => { if (!cancelled) { valEl.textContent = existing ? existing.newValue : currentVal; } });
+    } else {
+      inputEl.addEventListener("blur", () => { if (!cancelled) commit(); });
+    }
+    inputEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") { commit(); cancelled = true; inputEl.blur(); }
       if (e.key === "Escape") {
         cancelled = true;
-        // Remove input first, then restore text (avoids blur→commit race)
-        if (input.parentElement) input.remove();
+        if (inputEl.parentElement) inputEl.remove();
         valEl.textContent = existing ? existing.newValue : currentVal;
         if (existing) valEl.classList.add("changed");
       }