From 1aa584e69cbcf76745143079bfc41db9a7c7d131 Mon Sep 17 00:00:00 2001
From: Matei <tools@matei.work>
Date: Thu, 11 Jun 2026 21:59:19 -0400
Subject: [PATCH] fix(mapgen-studio): grid toggle renders its lucide glyph (was
 an empty placeholder)

---
 .../src/ui/components/ViewControls.tsx        |  4 +--
 .../mapgen-studio-grid-icon/proposal.md       | 28 +++++++++++++++++++
 .../specs/mapgen-studio/spec.md               | 19 +++++++++++++
 .../changes/mapgen-studio-grid-icon/tasks.md  | 12 ++++++++
 4 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 openspec/changes/mapgen-studio-grid-icon/proposal.md
 create mode 100644 openspec/changes/mapgen-studio-grid-icon/specs/mapgen-studio/spec.md
 create mode 100644 openspec/changes/mapgen-studio-grid-icon/tasks.md

diff --git a/apps/mapgen-studio/src/ui/components/ViewControls.tsx b/apps/mapgen-studio/src/ui/components/ViewControls.tsx
index 86685c5bd9..a47756fec0 100644
--- a/apps/mapgen-studio/src/ui/components/ViewControls.tsx
+++ b/apps/mapgen-studio/src/ui/components/ViewControls.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 // `bg-accent` on hover / `bg-muted` when active. Native `title=` hints are now
 // the shadcn Tooltip (token-styled, delay-grouped under the shell provider).
 // ============================================================================
-import { Sun, Moon, Monitor } from 'lucide-react';
+import { Grid3x3, Sun, Moon, Monitor } from 'lucide-react';
 import { cn } from '../utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/ui';
 import type { ThemePreference } from '../types';
@@ -106,7 +106,7 @@ export const ViewControls: React.FC<ViewControlsProps> = ({
             aria-pressed={showGrid}
             className={showGrid ? iconBtnActive : iconBtn}>
 
-            <div className="w-4 h-4" />
+            <Grid3x3 className="w-4 h-4" />
           </button>
         </TooltipTrigger>
         <TooltipContent>{gridTooltip}</TooltipContent>
diff --git a/openspec/changes/mapgen-studio-grid-icon/proposal.md b/openspec/changes/mapgen-studio-grid-icon/proposal.md
new file mode 100644
index 0000000000..a273cf5627
--- /dev/null
+++ b/openspec/changes/mapgen-studio-grid-icon/proposal.md
@@ -0,0 +1,28 @@
+# Grid toggle icon + icon-rendering consistency
+
+## Why
+
+The ViewControls grid toggle rendered a literal empty `<div className="w-4
+h-4" />` where its glyph belongs — an invisible button body (the user saw an
+empty "Hide grid" control). Treated categorically per the standing rule:
+icons must render through the one icon system, with no empty placeholders.
+
+## Target Authority Refs
+
+- `docs/projects/mapgen-studio-redesign/pass-5-design-fixes.md` (X2)
+- `apps/mapgen-studio/.interface-design/system.md` (icon contract: lucide-react
+  is the sole icon system)
+
+## What Changes
+
+- `ViewControls` grid toggle renders `Grid3x3` (lucide, `w-4 h-4` matching
+  its cluster).
+- Categorical sweep (src + live DOM): no other empty icon-sized
+  placeholders, no inline `<svg>`, no non-lucide icon libraries. The only
+  other glyph-less visible button is the overrides `Switch`, whose thumb is
+  its body by design.
+
+## Impact
+
+- Affected specs: `mapgen-studio`
+- Affected code: `apps/mapgen-studio/src/ui/components/ViewControls.tsx`
diff --git a/openspec/changes/mapgen-studio-grid-icon/specs/mapgen-studio/spec.md b/openspec/changes/mapgen-studio-grid-icon/specs/mapgen-studio/spec.md
new file mode 100644
index 0000000000..975fa902ca
--- /dev/null
+++ b/openspec/changes/mapgen-studio-grid-icon/specs/mapgen-studio/spec.md
@@ -0,0 +1,19 @@
+## ADDED Requirements
+
+### Requirement: Icon Controls Always Render A Glyph From The Icon System
+
+Every icon-only control SHALL render a visible lucide-react glyph — no empty
+icon-sized placeholders and no second icon system — with the grid visibility
+toggle rendering the grid glyph.
+
+#### Scenario: Grid toggle shows its glyph
+
+- **WHEN** the view controls render
+- **THEN** the grid visibility toggle contains a lucide grid icon sized to
+  its cluster (`w-4 h-4`)
+
+#### Scenario: No empty icon placeholders anywhere
+
+- **WHEN** the app shell renders
+- **THEN** no visible icon-only button has an empty body (excluding switch
+  primitives, whose thumb is the body)
diff --git a/openspec/changes/mapgen-studio-grid-icon/tasks.md b/openspec/changes/mapgen-studio-grid-icon/tasks.md
new file mode 100644
index 0000000000..1f03c7f876
--- /dev/null
+++ b/openspec/changes/mapgen-studio-grid-icon/tasks.md
@@ -0,0 +1,12 @@
+## 1. Implementation
+
+- [x] 1.1 `ViewControls`: grid toggle renders `Grid3x3` (lucide, `w-4 h-4`).
+- [x] 1.2 Categorical sweep: src grep (empty icon-sized divs, inline svg,
+      non-lucide libs) + live-DOM scan for glyph-less visible buttons.
+
+## 2. Verification
+
+- [x] 2.1 `bun run openspec -- validate mapgen-studio-grid-icon --strict`
+- [x] 2.2 tsc + vitest green
+- [x] 2.3 Live DOM: grid toggle contains an `svg`; only the overrides
+      Switch is legitimately glyph-less.