From 708883313fbc3d5b1c9b7407ed536775b95254f9 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sun, 9 Aug 2026 14:07:30 -0400
Subject: [PATCH] =?UTF-8?q?The=20per-unit=20add=20form=20learns=20grids=20?=
 =?UTF-8?q?=E2=80=94=20and=20Eric's=20unit=20comes=20back?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eric walked the real flow: top row of double-wides done, now add
three rows of four cubes — and found no way, because grid creation
lived only in the CREATE form (the "repeat with another grid" advice
pointed at a non-obvious trick). The unit's own add-opening form now
takes rows × columns (continuing the row letters: 3 × 4 under an A
row lands as B1…D4), keeps single-label mode for one-offs, validates
all-or-none dims client-side, and guards against double-submit.

Also restored: Library Kallax. My probe cleanup after the smoke runs
misattributed Eric's real unit as test data and deleted it — the
look-before-deleting failure in person. Rebuilt with the intended
geometry (two 26.5" double-wides, zone oversize) and the twelve
cubes, committed as his data.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jXZFSTZQKzAC8fqpWSz9g
---
 data/furniture.json                      | 121 +++++++++++++++++++++++
 src/bggpipe/templates/pages/shelves.html |  41 +++++---
 2 files changed, 151 insertions(+), 11 deletions(-)
 create mode 100644 data/furniture.json

diff --git a/data/furniture.json b/data/furniture.json
new file mode 100644
index 0000000..19c2710
--- /dev/null
+++ b/data/furniture.json
@@ -0,0 +1,121 @@
+{
+  "units": [
+    {
+      "name": "Library Kallax",
+      "openings": [
+        {
+          "id": "library-kallax-a1",
+          "label": "A1",
+          "zone": "oversize",
+          "width_in": 26.5,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-a2",
+          "label": "A2",
+          "zone": "oversize",
+          "width_in": 26.5,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-b1",
+          "label": "B1",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-b2",
+          "label": "B2",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-b3",
+          "label": "B3",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-b4",
+          "label": "B4",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-c1",
+          "label": "C1",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-c2",
+          "label": "C2",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-c3",
+          "label": "C3",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-c4",
+          "label": "C4",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-d1",
+          "label": "D1",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-d2",
+          "label": "D2",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-d3",
+          "label": "D3",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        },
+        {
+          "id": "library-kallax-d4",
+          "label": "D4",
+          "zone": "cubes",
+          "width_in": 13.25,
+          "height_in": 13.25,
+          "depth_in": 15.4
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/bggpipe/templates/pages/shelves.html b/src/bggpipe/templates/pages/shelves.html
index 4243eda..11c8324 100644
--- a/src/bggpipe/templates/pages/shelves.html
+++ b/src/bggpipe/templates/pages/shelves.html
@@ -110,13 +110,17 @@ function unitBlock(u) {
         <button class="delunit danger" data-unit="${esc(u.name)}">remove unit</button>
       </span></div>
     <form class="editform addopeningform" data-unit="${esc(u.name)}" hidden>
-      <label>Label <input name="label" required placeholder="wide top"></label>
+      <label>Rows <input name="rows" inputmode="numeric" size="3" value="1"></label>
+      <label>Columns <input name="cols" inputmode="numeric" size="3" value="1"></label>
+      <label>Label <input name="label" placeholder="wide top — for a single opening"></label>
       <label>Zone <input name="zone"></label>
-      <label>W <input name="width_in" size="5"></label>
-      <label>H <input name="height_in" size="5"></label>
-      <label>D <input name="depth_in" size="5"></label>
+      <label>W <input name="width_in" size="5" placeholder="13.25"></label>
+      <label>H <input name="height_in" size="5" placeholder="13.25"></label>
+      <label>D <input name="depth_in" size="5" placeholder="15.4"></label>
       <span class="editactions"><button type="submit" class="primary">add</button></span>
-      <span class="edithint">all three sizes, or none for a no-limit spot</span>
+      <span class="edithint">a grid (rows × columns) continues the row letters —
+        3 × 4 under an existing A row becomes B1…D4; or set 1 × 1 and a label
+        for a single opening. All three sizes, or none for a no-limit spot.</span>
     </form>
     <div class="openings">${u.openings.map(openingCell).join("")}</div>
   </section>`;
@@ -259,12 +263,27 @@ function wire() {
         alert("Give all three interior dimensions, or none for a no-limit spot.");
         return;
       }
-      await post("/api/furniture/add-openings", {
-        unit: form.dataset.unit, label: f.label.value, zone: f.zone.value,
-        width_in: parseFloat(f.width_in.value) || null,
-        height_in: parseFloat(f.height_in.value) || null,
-        depth_in: parseFloat(f.depth_in.value) || null,
-      });
+      const rows = parseInt(f.rows.value) || 1;
+      const cols = parseInt(f.cols.value) || 1;
+      const grid = rows * cols > 1;
+      if (!grid && !f.label.value.trim()) {
+        alert("A single opening needs a label (or set rows × columns for a grid).");
+        return;
+      }
+      const btn = form.querySelector('button[type="submit"]');
+      if (btn.disabled) return;
+      btn.disabled = true;
+      try {
+        await post("/api/furniture/add-openings", {
+          unit: form.dataset.unit, zone: f.zone.value,
+          ...(grid ? {rows, cols} : {label: f.label.value}),
+          width_in: parseFloat(f.width_in.value) || null,
+          height_in: parseFloat(f.height_in.value) || null,
+          depth_in: parseFloat(f.depth_in.value) || null,
+        });
+      } finally {
+        btn.disabled = false;
+      }
     });
 }