pi-design-deck 0.1.0

package/form/css/preview.css

@@ -0,0 +1,357 @@
+/**
+ * preview.css
+ * Preview blocks (mermaid, code, image, html) and .pv-* UI mockup components
+ */
+
+/* ─────────────────────────────────────────────────────────────
+   PREVIEW BLOCKS
+   ───────────────────────────────────────────────────────────── */
+
+.preview {
+  padding: 0;
+  font-family: var(--p-f, 'Albert Sans', sans-serif);
+  background: var(--p-bg);
+  color: var(--p-t);
+  overflow: hidden;
+  min-height: 260px;
+}
+
+.preview.preview-blocks { padding: 16px; min-height: auto; }
+
+.preview-block { border-radius: 8px; overflow: hidden; }
+.preview-block + .preview-block { margin-top: 8px; }
+
+.preview-block-mermaid {
+  background: #1a1a22; padding: 20px;
+  display: flex; justify-content: center; align-items: center;
+  overflow-x: auto; min-height: 180px;
+}
+.preview-block-mermaid svg { max-width: 100%; height: auto; }
+
+.preview-block-code { background: #141420; }
+.preview-block-code pre {
+  margin: 0; padding: 12px 14px;
+  font-family: var(--dk-font-mono); font-size: 12px; line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+.preview-block-code pre code { background: transparent; }
+
+.preview-block-image { background: #1a1a22; border-radius: 8px; overflow: hidden; }
+.preview-block-image img { width: 100%; height: auto; display: block; }
+
+.preview-block-caption {
+  padding: 8px 12px; font-size: 11px; color: var(--dk-text);
+  font-family: var(--dk-font-mono); letter-spacing: 0.2px;
+  border-top: 1px solid rgba(var(--dk-ink),0.12);
+}
+
+.preview-block-html { padding: 0; }
+
+code[class*="language-"], pre[class*="language-"] {
+  background: transparent !important;
+  white-space: pre-wrap !important;
+  overflow-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   OPTION ASIDE
+   ───────────────────────────────────────────────────────────── */
+
+.option-aside {
+  margin: 0 14px 14px;
+  padding: 12px 14px;
+  border-left: 2px solid rgba(138,190,183,0.25);
+  border-radius: 0 6px 6px 0;
+  background: rgba(var(--dk-ink),0.04);
+  font-size: 12px; line-height: 1.7;
+  color: var(--dk-text-aside);
+  font-family: var(--dk-font-mono);
+  font-style: italic;
+  letter-spacing: -0.01em;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   PREVIEW COMPONENT SYSTEM (.pv-* classes for generated mockups)
+   ───────────────────────────────────────────────────────────── */
+
+.pv-header {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 14px;
+  background: color-mix(in srgb, var(--p-bg) 80%, var(--p-s));
+  border-bottom: 1px solid var(--p-b);
+  font-size: 11px;
+}
+.pv-brand { font-weight: 700; font-size: 12px; color: var(--p-t); display: flex; align-items: center; gap: 5px; }
+.pv-brand svg { width: 12px; height: 12px; }
+.pv-sep { width: 1px; height: 14px; background: var(--p-b); }
+.pv-task { color: var(--p-td); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
+.pv-metrics { font-family: var(--p-fm, monospace); font-size: 9px; color: var(--p-td); white-space: nowrap; }
+.pv-approve {
+  font-size: 10px; font-weight: 600; padding: 3px 10px;
+  border-radius: 4px; border: none;
+  background: var(--p-a); color: #fff;
+}
+
+.pv-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+
+/* Dispatch card */
+.pv-dispatch {
+  border: 1px solid color-mix(in srgb, var(--p-warn, #f59e0b) 25%, transparent);
+  border-left: 3px solid var(--p-warn, #f59e0b);
+  border-radius: 6px; padding: 10px 12px;
+}
+.pv-dispatch-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
+.pv-dispatch-spinner {
+  width: 10px; height: 10px; border: 1.5px solid var(--p-b);
+  border-top-color: var(--p-warn, #f59e0b); border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg) } }
+.pv-dispatch-label { font-size: 10px; font-weight: 600; color: var(--p-warn, #f59e0b); }
+.pv-dispatch-task {
+  font-size: 9px; color: var(--p-td); padding: 5px 8px;
+  background: color-mix(in srgb, var(--p-bg) 70%, var(--p-s));
+  border-radius: 4px; line-height: 1.4;
+  border-left: 2px solid color-mix(in srgb, var(--p-warn, #f59e0b) 20%, transparent);
+}
+.pv-dispatch-bar { height: 3px; background: var(--p-b); border-radius: 2px; margin-top: 6px; overflow: hidden; }
+.pv-dispatch-fill {
+  height: 100%; width: 60%; border-radius: 2px;
+  background: linear-gradient(90deg, var(--p-warn, #f59e0b), var(--p-warn, #f59e0b) 45%, transparent 45%);
+  background-size: 200% 100%; animation: shimmer 2s linear infinite;
+}
+@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+
+/* Finding card */
+.pv-card {
+  background: var(--p-s);
+  border: 1px solid var(--p-b);
+  border-left: 3px solid var(--p-a);
+  border-radius: 6px; overflow: hidden;
+}
+.pv-card-head {
+  display: flex; align-items: center; gap: 6px;
+  padding: 8px 10px 0;
+}
+.pv-toggle {
+  width: 14px; height: 14px; border-radius: 3px;
+  background: var(--p-a); color: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 9px; font-weight: 700; flex-shrink: 0;
+  border: none;
+}
+.pv-num { font-family: var(--p-fm, monospace); font-size: 9px; color: var(--p-td); font-weight: 600; }
+.pv-title { font-size: 11px; font-weight: 600; color: var(--p-t); flex: 1; min-width: 0; }
+.pv-badge {
+  font-family: var(--p-fm, monospace); font-size: 8px; font-weight: 600;
+  padding: 1px 5px; border-radius: 3px; white-space: nowrap;
+  text-transform: uppercase; letter-spacing: 0.3px;
+}
+.pv-badge-iter { background: color-mix(in srgb, var(--p-purple, #8b5cf6) 12%, transparent); color: var(--p-purple, #8b5cf6); }
+.pv-badge-new { background: color-mix(in srgb, var(--p-warn, #f59e0b) 12%, transparent); color: var(--p-warn, #f59e0b); }
+
+.pv-card-text {
+  padding: 6px 10px 0 30px;
+  font-size: 10px; line-height: 1.5; color: var(--p-td);
+}
+.pv-card-text code {
+  font-family: var(--p-fm, monospace); font-size: 9px;
+  padding: 0 3px; border-radius: 2px;
+  background: color-mix(in srgb, var(--p-a) 10%, transparent);
+  color: var(--p-a);
+}
+.pv-card-sources {
+  display: flex; gap: 3px; flex-wrap: wrap;
+  padding: 5px 10px 0 30px;
+}
+.pv-src {
+  font-family: var(--p-fm, monospace); font-size: 8px;
+  padding: 1px 5px; border-radius: 2px;
+  background: color-mix(in srgb, var(--p-link, #8abeb7) 10%, transparent);
+  color: var(--p-link, #8abeb7);
+}
+.pv-card-actions {
+  display: flex; gap: 3px; padding: 6px 10px 8px 30px;
+}
+.pv-act {
+  font-size: 9px; font-weight: 500; padding: 2px 7px;
+  border-radius: 3px; border: 1px solid var(--p-b);
+  background: transparent; color: var(--p-td);
+}
+.pv-annotation {
+  margin: 0 10px 8px 30px; padding: 5px 8px;
+  border-radius: 4px; font-size: 9px; line-height: 1.4;
+  background: color-mix(in srgb, var(--p-warn, #f59e0b) 8%, transparent);
+  border-left: 2px solid var(--p-warn, #f59e0b);
+  color: var(--p-warn, #f59e0b);
+}
+.pv-ann-icon { font-family: var(--p-fm, monospace); font-size: 8px; font-weight: 600; }
+.pv-card-new { border-left-color: var(--p-warn, #f59e0b); }
+
+/* ─────────────────────────────────────────────────────────────
+   LAYOUT VARIANTS
+   ───────────────────────────────────────────────────────────── */
+
+.pv-layout-sidebar {
+  display: grid; grid-template-columns: 160px 1fr;
+  min-height: 370px;
+}
+.pv-layout-full {
+  display: flex; flex-direction: column;
+  min-height: 370px;
+}
+
+.pv-sidebar {
+  background: color-mix(in srgb, var(--p-bg) 60%, var(--p-s));
+  border-right: 1px solid var(--p-b);
+  padding: 8px 0;
+}
+.pv-sb-label {
+  font-family: var(--p-fm, monospace); font-size: 8px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.8px;
+  color: var(--p-td); padding: 4px 10px;
+}
+.pv-sb-item {
+  display: flex; align-items: center; gap: 5px;
+  padding: 3px 10px; font-size: 9px; color: var(--p-td);
+}
+.pv-sb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--p-a); flex-shrink: 0; }
+.pv-sb-link { color: var(--p-link, #8abeb7); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pv-sb-iter { font-family: var(--p-fm, monospace); font-size: 7px; color: var(--p-td); margin-left: auto; background: var(--p-b); padding: 0 3px; border-radius: 2px; }
+
+.pv-sources-row {
+  display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 14px;
+  border-bottom: 1px solid var(--p-b);
+}
+.pv-sources-row .pv-src { font-size: 8px; }
+
+/* ─────────────────────────────────────────────────────────────
+   KANBAN LAYOUT
+   ───────────────────────────────────────────────────────────── */
+
+.pv-kanban {
+  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
+  padding: 10px; min-height: 370px;
+}
+.pv-kanban-col {
+  background: color-mix(in srgb, var(--p-bg) 60%, var(--p-s));
+  border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 5px;
+}
+.pv-kanban-label {
+  font-family: var(--p-fm, monospace); font-size: 8px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.8px; padding: 4px 6px;
+  display: flex; align-items: center; gap: 4px;
+}
+.pv-kanban-label .dot { width: 5px; height: 5px; border-radius: 50%; }
+.pv-kanban-card {
+  background: var(--p-s); border: 1px solid var(--p-b);
+  border-radius: 4px; padding: 6px 8px; font-size: 9px; color: var(--p-t);
+  line-height: 1.3; cursor: grab;
+}
+.pv-kanban-card .pv-badge { font-size: 7px; margin-top: 3px; display: inline-block; }
+.pv-kanban-card .pv-src { font-size: 7px; margin-top: 2px; display: inline-block; }
+.pv-kanban-card-dim { opacity: 0.4; border-style: dashed; }
+.pv-kanban-drop {
+  border: 1px dashed var(--p-b); border-radius: 4px;
+  padding: 8px; font-size: 8px; color: var(--p-td);
+  text-align: center; font-style: italic;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   TABLE LAYOUT
+   ───────────────────────────────────────────────────────────── */
+
+.pv-table { min-height: 370px; }
+.pv-tbl {
+  width: 100%; border-collapse: collapse; font-size: 9px;
+}
+.pv-tbl th {
+  font-family: var(--p-fm, monospace); font-size: 8px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.5px; color: var(--p-td);
+  text-align: left; padding: 6px 8px;
+  border-bottom: 2px solid var(--p-b); background: color-mix(in srgb, var(--p-bg) 70%, var(--p-s));
+}
+.pv-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--p-b); color: var(--p-t); vertical-align: middle; }
+.pv-tbl tr:hover { background: rgba(255,255,255,0.02); }
+.pv-tbl .pv-tbl-check {
+  width: 12px; height: 12px; border-radius: 3px; border: none;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 8px; font-weight: 700; color: #fff;
+}
+.pv-tbl .pv-tbl-title { font-weight: 600; }
+.pv-tbl .pv-badge { font-size: 7px; }
+.pv-tbl .pv-tbl-expand {
+  font-size: 8px; color: var(--p-td); background: none; border: 1px solid var(--p-b);
+  padding: 1px 5px; border-radius: 3px; cursor: pointer;
+}
+.pv-tbl-actions {
+  display: flex; gap: 8px; padding: 8px;
+  border-top: 1px solid var(--p-b); font-size: 9px;
+}
+.pv-tbl-batch {
+  font-size: 9px; padding: 3px 8px; border-radius: 3px;
+  border: 1px solid var(--p-b); background: transparent; color: var(--p-td);
+}
+.pv-tbl-batch-primary { background: var(--p-a); color: #fff; border-color: var(--p-a); }
+
+/* ─────────────────────────────────────────────────────────────
+   SPLIT DISPATCH VIEW
+   ───────────────────────────────────────────────────────────── */
+
+.pv-split {
+  display: grid; grid-template-columns: 1fr 1fr;
+  min-height: 370px;
+}
+.pv-split-left { border-right: 1px solid var(--p-b); }
+.pv-split-right {
+  background: color-mix(in srgb, var(--p-bg) 60%, var(--p-s));
+  display: flex; flex-direction: column;
+}
+.pv-terminal-header {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--p-b);
+  font-family: var(--p-fm, monospace); font-size: 9px; color: var(--p-td);
+}
+.pv-terminal-dot { width: 6px; height: 6px; border-radius: 50%; }
+.pv-terminal-body {
+  flex: 1; padding: 8px 10px;
+  font-family: var(--p-fm, monospace); font-size: 8px; line-height: 1.6;
+  color: var(--p-td); overflow: hidden;
+}
+.pv-terminal-line { display: block; }
+.pv-terminal-line .cmd { color: var(--p-a); }
+.pv-terminal-line .out { color: var(--p-td); opacity: 0.7; }
+.pv-terminal-line .active { color: var(--p-warn, #f59e0b); }
+
+/* ─────────────────────────────────────────────────────────────
+   PALETTE THEMES
+   ───────────────────────────────────────────────────────────── */
+
+.preview[data-theme="midnight-rose"] {
+  --p-bg: #13111c; --p-s: #1e1a2e; --p-a: #f43f5e;
+  --p-t: #e4e0f0; --p-td: #8b85a3; --p-b: rgba(255,255,255,0.06);
+  --p-link: #a78bfa; --p-warn: #fb923c; --p-purple: #c084fc;
+}
+.preview[data-theme="slate-jade"] {
+  --p-bg: #0c0f17; --p-s: #171b28; --p-a: #10b981;
+  --p-t: #dfe1eb; --p-td: #8e92a6; --p-b: rgba(255,255,255,0.06);
+  --p-link: #8abeb7; --p-warn: #f59e0b; --p-purple: #8b5cf6;
+}
+.preview[data-theme="warm-copper"] {
+  --p-bg: #f7f3ee; --p-s: #ffffff; --p-a: #b5652b;
+  --p-t: #2d2826; --p-td: #847a72; --p-b: rgba(0,0,0,0.08);
+  --p-link: #2563eb; --p-warn: #d97706; --p-purple: #7c3aed;
+}
+.preview[data-theme="ocean-cyan"] {
+  --p-bg: #0a1628; --p-s: #12203a; --p-a: #22d3ee;
+  --p-t: #e2e8f0; --p-td: #64748b; --p-b: rgba(255,255,255,0.08);
+  --p-link: #818cf8; --p-warn: #fbbf24; --p-purple: #c084fc;
+}
+
+/* Font themes */
+.preview[data-fonts="albert"] { --p-f: 'Albert Sans', sans-serif; --p-fm: 'JetBrains Mono', monospace; }
+.preview[data-fonts="jakarta"] { --p-f: 'Plus Jakarta Sans', sans-serif; --p-fm: 'Fira Code', monospace; }
+.preview[data-fonts="grotesk"] { --p-f: 'Space Grotesk', sans-serif; --p-fm: 'IBM Plex Mono', monospace; }

package/form/css/variables.css

@@ -0,0 +1,54 @@
+/**
+ * variables.css
+ * Theme tokens for dark and light modes
+ */
+
+:root {
+  --dk-font: 'Outfit', system-ui, -apple-system, sans-serif;
+  --dk-font-mono: 'Space Mono', 'SF Mono', Consolas, monospace;
+  --dk-accent: #8abeb7;
+
+  --dk-ink: 255,255,255;
+  --dk-bg: #18181e;
+  --dk-glow: rgba(138,190,183,0.06);
+  --dk-surface: #1e1e24;
+  --dk-surface-shimmer: #262630;
+  --dk-elevated: #252530;
+  --dk-elevated-hover: #2b2b37;
+  --dk-text: #b0b0b0;
+  --dk-text-strong: #e0e0e0;
+  --dk-text-label: #c8c8c8;
+  --dk-text-secondary: #808080;
+  --dk-text-aside: #888888;
+  --dk-text-hint: #666666;
+  --dk-text-dim: #555555;
+  --dk-text-placeholder: #404040;
+  --dk-accent-text: #9dcec7;
+  --dk-status-success: #34d399;
+  --dk-status-warn: #f0c674;
+  --dk-status-error: #f87171;
+  --dk-overlay: rgba(24,24,30,0.95);
+}
+
+[data-theme="light"] {
+  --dk-ink: 0,0,0;
+  --dk-bg: #f8f8f8;
+  --dk-glow: rgba(95,135,135,0.08);
+  --dk-surface: #ffffff;
+  --dk-surface-shimmer: #ececec;
+  --dk-elevated: #f0f0f0;
+  --dk-elevated-hover: #e8e8e8;
+  --dk-text: #6c6c6c;
+  --dk-text-strong: #1a1a1a;
+  --dk-text-label: #3a3a3a;
+  --dk-text-secondary: #808080;
+  --dk-text-aside: #7a7a7a;
+  --dk-text-hint: #8a8a8a;
+  --dk-text-dim: #a0a0a0;
+  --dk-text-placeholder: #c8c8c8;
+  --dk-accent-text: #4a7a73;
+  --dk-status-success: #059669;
+  --dk-status-warn: #d97706;
+  --dk-status-error: #af5f5f;
+  --dk-overlay: rgba(255,255,255,0.95);
+}

package/form/deck.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="theme-color" content="#18181e">
+	<title>Design Deck</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&family=Space+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css">
+	<script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
+	<link rel="stylesheet" href="/deck.css">
+</head>
+<body>
+	<div class="deck">
+		<div class="deck-header">
+			<div class="progress"><div class="progress-fill" id="progress-fill" style="width: 0%"></div></div>
+			<div class="deck-meta" id="deck-meta"><h1 class="deck-title" id="deck-title">Design Decisions</h1></div>
+		</div>
+
+		<div class="slides-wrap" id="slides-wrap"></div>
+
+		<!-- Loading overlay - fades out when deck is ready -->
+		<div class="deck-loading" id="deck-loading">
+			<div class="deck-loading-spinner"></div>
+			<div class="deck-loading-text">Loading deck...</div>
+		</div>
+
+		<div class="confirm-bar" id="confirm-bar">
+			<span class="confirm-bar-text">Cancel deck? Selections will be lost.</span>
+			<button class="confirm-bar-btn confirm-bar-cancel" id="confirm-cancel" type="button">Cancel</button>
+			<button class="confirm-bar-btn confirm-bar-keep" id="confirm-keep" type="button">Keep Going</button>
+		</div>
+
+		<div class="deck-close-overlay" id="close-overlay">
+			<div class="close-overlay-content" id="close-overlay-content"></div>
+		</div>
+
+		<div class="deck-footer">
+			<button class="btn-nav" id="btn-back" type="button" disabled>&larr; Back</button>
+			<div class="deck-keys">
+				<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>
+				<span class="deck-key"><kbd class="mod-key">⌘</kbd><kbd>S</kbd> Save</span>
+				<span class="deck-key hidden" id="theme-shortcut"></span>
+			</div>
+			<button class="btn-nav primary" id="btn-next" type="button">Next &rarr;</button>
+		</div>
+	</div>
+
+	<div id="save-toast" class="save-toast hidden" aria-live="polite"></div>
+
+	<script>
+		window.__DECK_DATA__ = /* __DECK_DATA_PLACEHOLDER__ */;
+	</script>
+	<script src="/deck.js"></script>
+	<script type="module">
+		import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+		window.__mermaid = mermaid;
+		mermaid.initialize({
+			startOnLoad: false,
+			theme: 'base',
+			themeVariables: {
+				background: '#1a1a22',
+				primaryColor: '#2a3f3d',
+				primaryTextColor: '#e0e0e0',
+				primaryBorderColor: '#8abeb7',
+				lineColor: '#555555',
+				secondaryColor: '#1e2a2e',
+				tertiaryColor: '#1a1a22',
+				noteBkgColor: '#222230',
+				noteTextColor: '#b0b0b0',
+				fontSize: '13px',
+				fontFamily: "'Space Mono', monospace",
+			}
+		});
+		window.dispatchEvent(new Event('mermaid-ready'));
+	</script>
+</body>
+</html>

package/form/js/deck-core.js

@@ -0,0 +1,199 @@
+// ─── STATE & CONFIGURATION ───────────────────────────────────
+
+const deckData = window.__DECK_DATA__ || {};
+const config =
+	deckData && typeof deckData === "object" && deckData.config && typeof deckData.config === "object"
+		? deckData.config
+		: { slides: [] };
+
+const sessionToken = typeof deckData.sessionToken === "string" ? deckData.sessionToken : "";
+
+const slides = Array.isArray(config.slides)
+	? config.slides.map((slide) => ({
+			...slide,
+			options: Array.isArray(slide.options) ? [...slide.options] : [],
+		}))
+	: [];
+
+const totalSlides = slides.length + 1;
+let current = 0;
+let events = null;
+let heartbeatTimer = null;
+let isClosed = false;
+let isSubmitting = false;
+
+const selections = {};
+const pendingGenerate = new Map();
+let selectedModel = "";
+let selectedThinking = "off";
+let hasModelBar = false;
+
+// DOM references
+const progressFill = document.getElementById("progress-fill");
+const slidesWrap = document.getElementById("slides-wrap");
+const btnBack = document.getElementById("btn-back");
+const btnNext = document.getElementById("btn-next");
+
+// ─── UTILITIES ───────────────────────────────────────────────
+
+function createElement(tag, className, text) {
+	const el = document.createElement(tag);
+	if (className) el.className = className;
+	if (text !== undefined) el.textContent = text;
+	return el;
+}
+
+function escapeHtml(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function equalizeBlockHeights(container) {
+	const types = ["mermaid", "code", "html", "image"];
+	for (const type of types) {
+		const blocks = container.querySelectorAll(`.preview-block-${type}`);
+		if (blocks.length < 2) continue;
+		blocks.forEach((b) => { b.style.height = ""; });
+		let maxH = 0;
+		blocks.forEach((b) => { maxH = Math.max(maxH, b.offsetHeight); });
+		if (maxH > 0) blocks.forEach((b) => { b.style.height = maxH + "px"; });
+	}
+}
+
+function setMetaLabel() {
+	const deckTitle = document.getElementById("deck-title");
+	if (!deckTitle) return;
+	const title = typeof config.title === "string" && config.title ? config.title : "Design Decisions";
+	const cwd = typeof deckData.cwd === "string" ? deckData.cwd : "";
+	const gitBranch = typeof deckData.gitBranch === "string" ? deckData.gitBranch : "";
+	if (cwd) {
+		deckTitle.textContent = `${title} - ${cwd}${gitBranch ? ` (${gitBranch})` : ""}`;
+		return;
+	}
+	deckTitle.textContent = title;
+}
+
+// ─── THEME SYSTEM ────────────────────────────────────────────
+
+const themeConfig = deckData && typeof deckData === "object" && deckData.theme && typeof deckData.theme === "object" ? deckData.theme : {};
+const themeMode = typeof themeConfig.mode === "string" ? themeConfig.mode : "dark";
+const themeToggleHotkey = typeof themeConfig.toggleHotkey === "string" ? themeConfig.toggleHotkey : "";
+const THEME_OVERRIDE_KEY = "pi-deck-theme-override";
+
+function getSystemTheme() {
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function getStoredThemeOverride() {
+	try {
+		const value = localStorage.getItem(THEME_OVERRIDE_KEY);
+		return value === "light" || value === "dark" ? value : null;
+	} catch { return null; }
+}
+
+function setStoredThemeOverride(value) {
+	try {
+		if (!value) { localStorage.removeItem(THEME_OVERRIDE_KEY); return; }
+		localStorage.setItem(THEME_OVERRIDE_KEY, value);
+	} catch {}
+}
+
+function getEffectiveTheme() {
+	const override = getStoredThemeOverride();
+	if (override) return override;
+	if (themeMode === "auto") return getSystemTheme();
+	return themeMode;
+}
+
+function applyTheme(mode) {
+	document.documentElement.dataset.theme = mode;
+	document.documentElement.style.colorScheme = mode;
+	const meta = document.querySelector('meta[name="theme-color"]');
+	if (meta) meta.content = mode === "light" ? "#f8f8f8" : "#18181e";
+}
+
+function toggleTheme() {
+	const currentTheme = getEffectiveTheme();
+	const next = currentTheme === "dark" ? "light" : "dark";
+	if (themeMode === "auto") {
+		setStoredThemeOverride(next === getSystemTheme() ? null : next);
+	} else {
+		setStoredThemeOverride(next);
+	}
+	applyTheme(next);
+}
+
+function parseHotkey(value) {
+	if (!value) return null;
+	const parts = value.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+	if (parts.length === 0) return null;
+	const key = parts[parts.length - 1];
+	const mods = parts.slice(0, -1);
+	const hotkey = { key, mod: false, shift: false, alt: false };
+	mods.forEach((m) => {
+		if (m === "mod" || m === "cmd" || m === "meta" || m === "ctrl" || m === "control") hotkey.mod = true;
+		else if (m === "shift") hotkey.shift = true;
+		else if (m === "alt" || m === "option") hotkey.alt = true;
+	});
+	return key ? hotkey : null;
+}
+
+function matchesHotkey(event, hotkey) {
+	if (event.key.toLowerCase() !== hotkey.key) return false;
+	const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+	const modPressed = isMac ? event.metaKey : event.ctrlKey;
+	if (hotkey.mod !== modPressed) return false;
+	if (hotkey.shift !== event.shiftKey) return false;
+	if (hotkey.alt !== event.altKey) return false;
+	if (!hotkey.mod && (event.metaKey || event.ctrlKey)) return false;
+	if (!hotkey.shift && event.shiftKey) return false;
+	if (!hotkey.alt && event.altKey) return false;
+	return true;
+}
+
+function initTheme() {
+	applyTheme(getEffectiveTheme());
+
+	if (themeMode === "auto") {
+		const media = window.matchMedia("(prefers-color-scheme: dark)");
+		media.addEventListener("change", () => {
+			if (!getStoredThemeOverride()) applyTheme(getSystemTheme());
+		});
+	}
+
+	const hotkey = parseHotkey(themeToggleHotkey);
+	if (hotkey) {
+		const shortcut = document.getElementById("theme-shortcut");
+		if (shortcut) {
+			const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+			const parts = [];
+			if (hotkey.mod) parts.push(isMac ? "⌘" : "Ctrl");
+			if (hotkey.shift) parts.push("Shift");
+			if (hotkey.alt) parts.push(isMac ? "Option" : "Alt");
+			parts.push(hotkey.key.length === 1 ? hotkey.key.toUpperCase() : hotkey.key);
+			shortcut.innerHTML = parts.map((p) => `<kbd>${p}</kbd>`).join("") + " Theme";
+			shortcut.classList.remove("hidden");
+		}
+		document.addEventListener("keydown", (event) => {
+			if (matchesHotkey(event, hotkey)) { event.preventDefault(); toggleTheme(); }
+		});
+	}
+}
+
+// ─── SELECTION PERSISTENCE ────────────────────────────────────
+
+const SELECTIONS_KEY = `pi-deck-${typeof deckData.sessionId === "string" ? deckData.sessionId : "unknown"}`;
+
+function saveSelectionsToStorage() {
+	try { localStorage.setItem(SELECTIONS_KEY, JSON.stringify(selections)); } catch {}
+}
+
+function loadSelectionsFromStorage() {
+	try {
+		const saved = localStorage.getItem(SELECTIONS_KEY);
+		return saved ? JSON.parse(saved) : null;
+	} catch { return null; }
+}
+
+function clearSelectionsStorage() {
+	try { localStorage.removeItem(SELECTIONS_KEY); } catch {}
+}