pi-design-deck 0.3.0 → 0.3.1

package/README.md

@@ -96,7 +96,7 @@ The browser opens, the user picks "JWT + Refresh Tokens", and the agent receives
 - **Generate-more loop**: Users click "Generate another option" and the agent pushes a new option into the live deck via SSE. No page reload.
 - **Model selector**: Dropdown to pick which model generates new options. Save as default, or override per-request.
 - **Thinking level**: Adjust reasoning effort for option generation when the selected model supports it.
-- **Slide columns**: `columns` property (1, 2, or 3) per slide. Auto-detected from option count if omitted.
+- **Slide columns**: `columns` property (1, 2, 3, or 4) per slide. Auto-detected from option count if omitted.
 - **Smart rebalancing**: Grid layout recalculates after generate-more adds options to minimize orphans.
 - **Option aside**: Explanatory text rendered below the preview. Supports `\n` for line breaks.
 - **Save/load snapshots**: `Cmd+S` saves the deck to disk. Use `action: "list"` to enumerate saved decks, `action: "open"` to reopen one by deck ID, or pass a file path to `slides`.
@@ -156,7 +156,7 @@ Image blocks reference absolute file paths. The server copies each file into a t
 
 ### Columns
 
-Each slide supports `columns: 1 | 2 | 3` to control the grid layout. Omit it and the deck auto-detects based on option count. Use `columns: 1` for wide architecture diagrams, `columns: 2` for side-by-side comparisons.
+Each slide supports `columns: 1 | 2 | 3 | 4` to control the grid layout. Omit it and the deck auto-detects based on option count. Use `columns: 1` for wide architecture diagrams, `columns: 2` for side-by-side comparisons, `columns: 4` for many small items.
 
 ### Aside
 

package/deck-schema.ts

@@ -17,7 +17,7 @@ export interface DeckSlide {
 	id: string;
 	title: string;
 	context?: string;
-	columns?: 1 | 2 | 3;
+	columns?: 1 | 2 | 3 | 4;
 	options: DeckOption[];
 }
 
@@ -155,8 +155,8 @@ function validateDeckSlide(slide: unknown, index: number): DeckSlide {
 	}
 
 	if (obj.columns !== undefined) {
-		if (obj.columns !== 1 && obj.columns !== 2 && obj.columns !== 3) {
-			throw new Error(`Slide "${obj.id}": columns must be 1, 2, or 3`);
+		if (obj.columns !== 1 && obj.columns !== 2 && obj.columns !== 3 && obj.columns !== 4) {
+			throw new Error(`Slide "${obj.id}": columns must be 1, 2, 3, or 4`);
 		}
 	}
 

package/export-html.ts

@@ -157,7 +157,7 @@ function escapeHtml(value: string): string {
 		.replace(/"/g, """);
 }
 
-function optionCountClass(count: number, columns?: 1 | 2 | 3): string {
+function optionCountClass(count: number, columns?: 1 | 2 | 3 | 4): string {
 	if (columns === 1) return "cols-1";
 	if (columns && count >= columns && count % columns !== 1) {
 		return `cols-${columns}`;

package/form/css/controls.css

@@ -154,10 +154,17 @@
   z-index: 10;
   animation: regen-fade-in 0.3s ease-out;
 }
+.regen-overlay.cols-4 { grid-template-columns: repeat(4, 1fr); }
 .regen-overlay.cols-3 { grid-template-columns: repeat(3, 1fr); }
 .regen-overlay.cols-2 { grid-template-columns: repeat(2, 1fr); }
 .regen-overlay.cols-1 { grid-template-columns: 1fr; }
 
+/* Regen overlay respects layout override */
+.deck[data-layout="1"] .regen-overlay { grid-template-columns: 1fr; }
+.deck[data-layout="2"] .regen-overlay { grid-template-columns: repeat(2, 1fr); }
+.deck[data-layout="3"] .regen-overlay { grid-template-columns: repeat(3, 1fr); }
+.deck[data-layout="4"] .regen-overlay { grid-template-columns: repeat(4, 1fr); }
+
 @keyframes regen-fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
@@ -197,26 +204,60 @@
 .regen-skeleton:nth-child(4)::before,
 .regen-skeleton:nth-child(4)::after { animation-delay: 0.4s; }
 
-/* Regeneration status text */
-.regen-status {
+/* ─────────────────────────────────────────────────────────────
+   LOADING SPINNER
+   ───────────────────────────────────────────────────────────── */
+
+.spinner {
+  width: 28px;
+  height: 28px;
+  border: 2.5px solid rgba(138,190,183,0.12);
+  border-top-color: var(--dk-accent);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+/* Spinner inside skeleton cards */
+.option-skeleton .spinner {
   position: absolute;
-  bottom: 16px; left: 50%;
-  transform: translateX(-50%);
-  font-family: var(--dk-font-mono);
-  font-size: 11px;
-  color: var(--dk-accent-text);
-  letter-spacing: 0.3px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+}
+
+/* Centered loading overlay for regenerate-all */
+.regen-center {
+  position: absolute;
+  inset: 0;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  gap: 14px;
+  z-index: 5;
+  pointer-events: none;
+  background: rgba(24,24,30,0.5);
+  backdrop-filter: blur(2px);
+  border-radius: 12px;
 }
-.regen-status::before {
-  content: '';
-  width: 14px; height: 14px;
-  border: 2px solid rgba(138,190,183,0.2);
-  border-top-color: var(--dk-accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+
+[data-theme="light"] .regen-center {
+  background: rgba(248,248,248,0.6);
+}
+
+.regen-center .spinner {
+  width: 36px;
+  height: 36px;
+  border-width: 3px;
+}
+
+.regen-center-text {
+  font-family: var(--dk-font-mono);
+  font-size: 12px;
+  color: var(--dk-accent-text);
+  letter-spacing: 0.3px;
 }
 
 /* Options grid regenerating state */
@@ -240,6 +281,49 @@
   100% { opacity: 1; transform: translateY(0) scale(1); }
 }
 
+/* ─────────────────────────────────────────────────────────────
+   LAYOUT TOGGLE
+   ───────────────────────────────────────────────────────────── */
+
+.layout-toggle {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  background: rgba(var(--dk-ink),0.06);
+  border-radius: 6px;
+  padding: 2px;
+  margin-right: 8px;
+}
+
+.layout-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--dk-text-hint);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.layout-btn:hover {
+  background: rgba(var(--dk-ink),0.08);
+  color: var(--dk-text);
+}
+
+.layout-btn.active {
+  background: rgba(138,190,183,0.15);
+  color: var(--dk-accent-text);
+}
+
+.layout-btn svg {
+  width: 12px;
+  height: 12px;
+}
+
 /* ─────────────────────────────────────────────────────────────
    MODEL BAR
    ───────────────────────────────────────────────────────────── */
@@ -468,6 +552,7 @@
   font: 11px var(--dk-font-mono);
   color: var(--dk-text-hint);
   white-space: nowrap;
+  padding: 6px 12px;
 }
 
 .deck-save-status.saved {

package/form/css/layout.css

@@ -148,10 +148,17 @@ body {
    ───────────────────────────────────────────────────────────── */
 
 .options { display: grid; column-gap: 20px; row-gap: 0; counter-reset: opt; }
+.options.cols-4 { grid-template-columns: repeat(4, 1fr); }
 .options.cols-3 { grid-template-columns: repeat(3, 1fr); }
 .options.cols-2 { grid-template-columns: repeat(2, 1fr); }
 .options.cols-1 { grid-template-columns: 1fr; }
 
+/* Layout override - global toggle overrides per-slide classes */
+.deck[data-layout="1"] .options { grid-template-columns: 1fr; }
+.deck[data-layout="2"] .options { grid-template-columns: repeat(2, 1fr); }
+.deck[data-layout="3"] .options { grid-template-columns: repeat(3, 1fr); }
+.deck[data-layout="4"] .options { grid-template-columns: repeat(4, 1fr); }
+
 .option {
   border: 2px solid rgba(var(--dk-ink),0.12);
   border-radius: 12px; overflow: hidden;

package/form/deck.html

@@ -44,6 +44,20 @@
 				<span class="deck-key"><kbd>&larr;</kbd><kbd>&rarr;</kbd> Navigate</span>
 				<span class="deck-key"><kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> Select</span>
 				<span class="deck-key"><kbd>Enter</kbd> Confirm</span>
+				<div class="layout-toggle" id="layout-toggle" role="toolbar" aria-label="Grid columns">
+					<button class="layout-btn" data-cols="1" type="button" title="1 column" aria-label="1 column" aria-pressed="false">
+						<svg viewBox="0 0 12 12"><rect x="3" y="1" width="6" height="10" rx="1" fill="currentColor"/></svg>
+					</button>
+					<button class="layout-btn" data-cols="2" type="button" title="2 columns" aria-label="2 columns" aria-pressed="false">
+						<svg viewBox="0 0 12 12"><rect x="1" y="1" width="4" height="10" rx="0.75" fill="currentColor"/><rect x="7" y="1" width="4" height="10" rx="0.75" fill="currentColor"/></svg>
+					</button>
+					<button class="layout-btn" data-cols="3" type="button" title="3 columns" aria-label="3 columns" aria-pressed="false">
+						<svg viewBox="0 0 12 12"><rect x="0.5" y="1" width="3" height="10" rx="0.5" fill="currentColor"/><rect x="4.5" y="1" width="3" height="10" rx="0.5" fill="currentColor"/><rect x="8.5" y="1" width="3" height="10" rx="0.5" fill="currentColor"/></svg>
+					</button>
+					<button class="layout-btn" data-cols="4" type="button" title="4 columns" aria-label="4 columns" aria-pressed="false">
+						<svg viewBox="0 0 12 12"><rect x="0" y="1" width="2.4" height="10" rx="0.5" fill="currentColor"/><rect x="3.2" y="1" width="2.4" height="10" rx="0.5" fill="currentColor"/><rect x="6.4" y="1" width="2.4" height="10" rx="0.5" fill="currentColor"/><rect x="9.6" y="1" width="2.4" height="10" rx="0.5" fill="currentColor"/></svg>
+					</button>
+				</div>
 				<span class="deck-key"><kbd class="mod-key">⌘</kbd><kbd>S</kbd> Save</span>
 				<button class="deck-save-btn" id="btn-save" type="button">Save</button>
 				<span class="deck-save-status" id="save-status" role="status" aria-live="polite">No unsaved changes</span>

package/form/js/deck-core.js

@@ -227,6 +227,78 @@ function initTheme() {
 	}
 }
 
+// ─── LAYOUT TOGGLE ───────────────────────────────────────────
+
+const LAYOUT_KEY = "pi-deck-layout";
+
+function getStoredLayout() {
+	try {
+		const value = localStorage.getItem(LAYOUT_KEY);
+		return value === "1" || value === "2" || value === "3" || value === "4" ? value : null;
+	} catch { return null; }
+}
+
+function setStoredLayout(value) {
+	try {
+		if (!value) {
+			localStorage.removeItem(LAYOUT_KEY);
+		} else {
+			localStorage.setItem(LAYOUT_KEY, value);
+		}
+	} catch {}
+}
+
+function applyLayout(cols) {
+	const deck = document.querySelector(".deck");
+	if (!deck) return;
+	if (cols) {
+		deck.dataset.layout = cols;
+	} else {
+		delete deck.dataset.layout;
+	}
+}
+
+function updateLayoutButtons(activeCols) {
+	const toggle = document.getElementById("layout-toggle");
+	if (!toggle) return;
+	toggle.querySelectorAll(".layout-btn").forEach((btn) => {
+		const isActive = btn.dataset.cols === activeCols;
+		btn.classList.toggle("active", isActive);
+		btn.setAttribute("aria-pressed", isActive ? "true" : "false");
+		// Update title to show "Auto" hint when clicking would reset
+		const cols = btn.dataset.cols;
+		btn.title = isActive ? `${cols} column${cols === "1" ? "" : "s"} (click for auto)` : `${cols} column${cols === "1" ? "" : "s"}`;
+	});
+}
+
+function initLayoutToggle() {
+	const stored = getStoredLayout();
+	if (stored) {
+		applyLayout(stored);
+		updateLayoutButtons(stored);
+	}
+
+	const toggle = document.getElementById("layout-toggle");
+	if (!toggle) return;
+
+	toggle.addEventListener("click", (event) => {
+		const btn = event.target.closest(".layout-btn");
+		if (!btn) return;
+		const cols = btn.dataset.cols;
+		const current = getStoredLayout();
+		if (cols === current) {
+			// Clicking active button toggles back to auto
+			setStoredLayout(null);
+			applyLayout(null);
+			updateLayoutButtons(null);
+		} else {
+			setStoredLayout(cols);
+			applyLayout(cols);
+			updateLayoutButtons(cols);
+		}
+	});
+}
+
 // ─── SELECTION PERSISTENCE ────────────────────────────────────
 
 const SELECTIONS_KEY = `pi-deck-${typeof deckData.sessionId === "string" ? deckData.sessionId : "unknown"}`;

package/form/js/deck-session.js

@@ -507,6 +507,7 @@ async function generateMore(button, slideId, input, countSelect) {
 	const skeletons = [];
 	for (let i = 0; i < count; i++) {
 		const skeleton = createElement("div", "option-skeleton");
+		skeleton.innerHTML = '<div class="spinner"></div>';
 		optionsGrid.appendChild(skeleton);
 		skeletons.push(skeleton);
 	}
@@ -563,7 +564,7 @@ async function regenerateSlide(button, slideId) {
 	const prompt = input ? input.value.trim() : "";
 	if (input) input.value = "";
 
-	// Create skeleton overlay
+	// Create skeleton overlay with centered spinner
 	const optionCount = slide.options?.length || 2;
 	const colClass = optionsGrid.classList.contains("cols-3") ? "cols-3" :
 	                 optionsGrid.classList.contains("cols-1") ? "cols-1" : "cols-2";
@@ -571,8 +572,9 @@ async function regenerateSlide(button, slideId) {
 	for (let i = 0; i < optionCount; i++) {
 		overlay.appendChild(createElement("div", "regen-skeleton"));
 	}
-	const status = createElement("div", "regen-status", "Regenerating options...");
-	overlay.appendChild(status);
+	const center = createElement("div", "regen-center");
+	center.innerHTML = '<div class="spinner"></div><div class="regen-center-text">Regenerating options...</div>';
+	overlay.appendChild(center);
 
 	// Position overlay relative to options grid
 	optionsGrid.style.position = "relative";
@@ -670,6 +672,7 @@ function hideLoadingOverlay() {
 
 function init() {
 	initTheme();
+	initLayoutToggle();
 	setMetaLabel();
 	renderSlides();
 	restoreSelections();

package/index.ts

@@ -88,7 +88,7 @@ const DeckParams = Type.Object(
 		slides: Type.Optional(
 			Type.String({
 				description:
-					"JSON string of deck config. Each slide has id, title, context?, columns? (1|2|3, omit for auto-layout), and options[]. " +
+					"JSON string of deck config. Each slide has id, title, context?, columns? (1|2|3|4, omit for auto-layout), and options[]. " +
 					"Each option has label, description?, aside?, recommended?, and either previewHtml (raw HTML string) or " +
 					"previewBlocks (array of typed blocks: {type:'html',content}, {type:'mermaid',content,theme?}, " +
 					"{type:'code',code,lang}, {type:'image',src,alt,caption?}). Exactly one of previewHtml or previewBlocks required per option.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-design-deck",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Visual design deck for presenting multi-slide options with high-fidelity previews",
   "author": "Nico Bailon",
   "license": "MIT",

package/skills/design-deck/SKILL.md

@@ -44,7 +44,7 @@ Build 1 decision per slide.
 
 Provide 2-4 options per slide that are genuinely distinct in direction, not tiny variants.
 
-Each slide supports an optional `columns` property (1, 2, or 3) to override the auto-detected grid. **Omit `columns` by default** — the auto-layout picks 2 or 3 columns based on option count, which is correct for most content. Only override to `columns: 1` when options contain wide architecture diagrams or detailed code that genuinely needs full viewport width. Never use `columns: 1` for text comparisons or simple previews.
+Each slide supports an optional `columns` property (1, 2, 3, or 4) to override the auto-detected grid. **Omit `columns` by default** — the auto-layout picks 2 or 3 columns based on option count, which is correct for most content. Only override to `columns: 1` when options contain wide architecture diagrams or detailed code that genuinely needs full viewport width. Use `columns: 4` when presenting many small, comparable items (e.g., icon sets, color swatches).
 
 Each slide supports an optional `context` property — a string displayed below the title that frames the decision for the user.