pi-design-deck 0.1.1 → 0.3.0

package/export-html.ts

@@ -0,0 +1,329 @@
+import { existsSync, readFileSync } from "node:fs";
+import { basename, dirname, extname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { deriveDeckStatusFromFolderName, type DeckOption, type DeckSlide, type PreviewBlock, type SavedDeckData } from "./deck-schema.js";
+
+const FORM_DIR = join(dirname(fileURLToPath(import.meta.url)), "form");
+const CSS_FILES = ["variables", "layout", "preview", "controls"];
+const EMBEDDED_CSS = CSS_FILES
+	.map((name) => readFileSync(join(FORM_DIR, "css", `${name}.css`), "utf-8"))
+	.join("\n");
+
+const GOOGLE_FONTS_LINK = "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";
+
+const IMAGE_MIME_TYPES: Record<string, string> = {
+	".png": "image/png",
+	".jpg": "image/jpeg",
+	".jpeg": "image/jpeg",
+	".gif": "image/gif",
+	".webp": "image/webp",
+	".svg": "image/svg+xml",
+	".avif": "image/avif",
+};
+
+const EXPORT_CSS = `
+body {
+	margin: 0;
+	background: var(--dk-bg);
+	color: var(--dk-text);
+}
+
+.deck {
+	min-height: 100vh;
+}
+
+.deck-header {
+	position: static;
+}
+
+.progress,
+.deck-footer,
+.deck-loading,
+.confirm-bar,
+.deck-close-overlay,
+.save-toast,
+.model-bar,
+.gen-bar {
+	display: none !important;
+}
+
+.slides-wrap {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	padding: 24px;
+}
+
+.slide {
+	display: block !important;
+	opacity: 1 !important;
+	transform: none !important;
+	max-width: 1400px;
+	margin: 0 auto;
+}
+
+.option {
+	cursor: default;
+}
+
+.option:hover {
+	transform: none;
+}
+
+.export-meta {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	margin-top: 12px;
+}
+
+.export-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 6px 10px;
+	border-radius: 999px;
+	border: 1px solid rgba(var(--dk-ink),0.12);
+	background: rgba(var(--dk-ink),0.06);
+	font: 11px var(--dk-font-mono);
+	color: var(--dk-text-secondary);
+}
+
+.export-chip-label {
+	color: var(--dk-text-hint);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+}
+
+.export-selected-badge {
+	margin-left: auto;
+	padding: 2px 8px;
+	border-radius: 999px;
+	background: rgba(52,211,153,0.12);
+	color: var(--dk-status-success);
+	font: 10px var(--dk-font-mono);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+}
+
+.export-final-notes {
+	max-width: 1400px;
+	margin: 0 auto 24px;
+}
+
+.export-final-notes-body {
+	margin-top: 12px;
+	padding: 16px 18px;
+	border-radius: 12px;
+	background: rgba(var(--dk-ink),0.06);
+	border: 1px solid rgba(var(--dk-ink),0.1);
+	white-space: pre-wrap;
+	line-height: 1.6;
+}
+
+.summary-notes {
+	margin-top: 12px;
+}
+
+.summary-notes-label {
+	font-weight: 600;
+}
+
+.preview-block-mermaid {
+	overflow: hidden;
+}
+
+.preview-block-mermaid svg {
+	max-width: 100%;
+	height: auto;
+}
+
+@media (max-width: 900px) {
+	.slides-wrap {
+		padding: 16px;
+	}
+
+	.export-meta {
+		gap: 8px;
+	}
+}
+`;
+
+function escapeHtml(value: string): string {
+	return value
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;");
+}
+
+function optionCountClass(count: number, columns?: 1 | 2 | 3): string {
+	if (columns === 1) return "cols-1";
+	if (columns && count >= columns && count % columns !== 1) {
+		return `cols-${columns}`;
+	}
+	if (count <= 1) return "cols-1";
+	if (count === 2 || count === 4) return "cols-2";
+	return "cols-3";
+}
+
+function formatTimestamp(value?: string): string {
+	if (!value) return "";
+	try {
+		return new Date(value).toLocaleString();
+	} catch {
+		return value;
+	}
+}
+
+function inlineImageSrc(src: string, baseDir: string): string {
+	if (/^(data:|https?:|file:|blob:)/i.test(src)) {
+		return src;
+	}
+
+	const absolutePath = resolve(baseDir, src);
+	if (!existsSync(absolutePath)) {
+		return src;
+	}
+
+	const mimeType = IMAGE_MIME_TYPES[extname(absolutePath).toLowerCase()] || "application/octet-stream";
+	const data = readFileSync(absolutePath).toString("base64");
+	return `data:${mimeType};base64,${data}`;
+}
+
+function renderPreviewBlocks(blocks: PreviewBlock[], baseDir: string): string {
+	return blocks.map((block) => {
+		if (block.type === "html") {
+			return `<div class="preview-block preview-block-html">${block.content}</div>`;
+		}
+		if (block.type === "mermaid") {
+			return `<div class="preview-block preview-block-mermaid"><div class="mermaid">${escapeHtml(block.content)}</div></div>`;
+		}
+		if (block.type === "code") {
+			return `<div class="preview-block preview-block-code"><pre><code class="language-${escapeHtml(block.lang)}">${escapeHtml(block.code)}</code></pre></div>`;
+		}
+		const imageSrc = inlineImageSrc(block.src, baseDir);
+		return `<div class="preview-block preview-block-image"><img src="${escapeHtml(imageSrc)}" alt="${escapeHtml(block.alt)}" loading="lazy">${block.caption ? `<div class="preview-block-caption">${escapeHtml(block.caption)}</div>` : ""}</div>`;
+	}).join("");
+}
+
+function renderOption(option: DeckOption, slideId: string, selectedLabel: string | undefined, note: string | undefined, baseDir: string): string {
+	const isSelected = selectedLabel === option.label;
+	const previewContent = Array.isArray(option.previewBlocks) && option.previewBlocks.length > 0
+		? renderPreviewBlocks(option.previewBlocks, baseDir)
+		: option.previewHtml || "";
+
+	return `
+		<article class="option${isSelected ? " selected" : ""}" role="presentation" data-slide-id="${escapeHtml(slideId)}">
+			<div class="option-check">&#10003;</div>
+			<div class="option-header">
+				<span class="option-radio"></span>
+				<span class="option-label">${escapeHtml(option.label)}</span>
+				${isSelected ? `<span class="export-selected-badge">Selected</span>` : option.recommended ? `<span class="rec-badge">Recommended</span>` : ""}
+			</div>
+			<div class="preview${Array.isArray(option.previewBlocks) && option.previewBlocks.length > 0 ? " preview-blocks" : ""}">${previewContent}</div>
+			<div class="option-footer">
+				${option.aside ? `<div class="option-aside">${escapeHtml(option.aside).replace(/\\n/g, "<br>").replace(/\n/g, "<br>")}</div>` : ""}
+				${isSelected && note ? `<div class="summary-notes"><span class="summary-notes-label">Your notes:</span> ${escapeHtml(note)}</div>` : ""}
+			</div>
+		</article>
+	`;
+}
+
+function renderSlide(slide: DeckSlide, savedDeck: SavedDeckData, slideIndex: number, baseDir: string): string {
+	const selectedLabel = savedDeck.selections[slide.id];
+	const note = savedDeck.notes?.[slide.id];
+	return `
+		<section class="slide active" data-id="${escapeHtml(slide.id)}" data-slide="${slideIndex}">
+			<span class="slide-step">${slideIndex + 1} / ${savedDeck.config.slides.length}</span>
+			<h2>${escapeHtml(slide.title)}</h2>
+			${slide.context ? `<p class="slide-context">${escapeHtml(slide.context)}</p>` : ""}
+			<div class="options ${optionCountClass(slide.options.length, slide.columns)}">
+				${slide.options.map((option) => renderOption(option, slide.id, selectedLabel, note, baseDir)).join("")}
+			</div>
+		</section>
+	`;
+}
+
+function renderMetaChip(label: string, value: string): string {
+	return `<div class="export-chip"><span class="export-chip-label">${escapeHtml(label)}</span><span>${escapeHtml(value)}</span></div>`;
+}
+
+export function buildStandaloneDeckHtml(deckPath: string, savedDeck: SavedDeckData): string {
+	const baseDir = dirname(deckPath);
+	const deckId = savedDeck.id || basename(baseDir) || "deck";
+	const status = savedDeck.status || deriveDeckStatusFromFolderName(deckId);
+	const hasMermaid = savedDeck.config.slides.some((slide) =>
+		slide.options.some((option) =>
+			Array.isArray(option.previewBlocks) && option.previewBlocks.some((block) => block.type === "mermaid")
+		)
+	);
+	const title = savedDeck.config.title || "Design Deck";
+	const metaChips = [
+		renderMetaChip("deck", deckId),
+		renderMetaChip("status", status),
+		renderMetaChip("saved", formatTimestamp(savedDeck.savedAt)),
+		renderMetaChip("modified", formatTimestamp(savedDeck.modifiedAt || savedDeck.savedAt)),
+	];
+	if (savedDeck.savedFrom?.cwd) {
+		metaChips.push(renderMetaChip("cwd", savedDeck.savedFrom.cwd));
+	}
+	if (savedDeck.savedFrom?.branch) {
+		metaChips.push(renderMetaChip("branch", savedDeck.savedFrom.branch));
+	}
+
+	const mermaidScript = hasMermaid
+		? `
+	<script type="module">
+		import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+		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",
+			}
+		});
+		mermaid.run({ querySelector: '.mermaid' });
+	</script>`
+		: "";
+
+	return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="theme-color" content="#18181e">
+	<title>${escapeHtml(title)} - Export</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="${GOOGLE_FONTS_LINK}" rel="stylesheet">
+	<style>${EMBEDDED_CSS}
+${EXPORT_CSS}</style>
+</head>
+<body>
+	<div class="deck">
+		<header class="deck-header">
+			<div class="deck-meta">
+				<h1 class="deck-title">${escapeHtml(title)}</h1>
+				<div class="export-meta">${metaChips.join("")}</div>
+			</div>
+		</header>
+		<div class="slides-wrap">
+			${savedDeck.config.slides.map((slide, index) => renderSlide(slide, savedDeck, index, baseDir)).join("")}
+			${savedDeck.finalNotes ? `<section class="slide active export-final-notes"><span class="slide-step">Notes</span><h2>Additional Instructions</h2><div class="export-final-notes-body">${escapeHtml(savedDeck.finalNotes)}</div></section>` : ""}
+		</div>
+	</div>
+	${mermaidScript}
+</body>
+</html>`;
+}

package/form/css/controls.css

@@ -27,6 +27,30 @@
 }
 .btn-gen-more:disabled { opacity: 0.3; cursor: not-allowed; }
 
+.gen-group { display: flex; align-items: center; gap: 6px; }
+
+.gen-count {
+  appearance: none;
+  -webkit-appearance: none;
+  background: rgba(var(--dk-ink),0.12);
+  border: 1px solid rgba(var(--dk-ink),0.15);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dk-accent-text);
+  cursor: pointer;
+  text-align: center;
+  min-width: 32px;
+}
+.gen-count:focus { outline: none; border-color: rgba(138,190,183,0.4); background: rgba(138,190,183,0.1); }
+.gen-count:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.gen-count-label {
+  font-size: 12px;
+  color: var(--dk-text-dim);
+}
+
 .btn-regen {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 14px; border-radius: 8px;
@@ -120,6 +144,102 @@
 }
 @keyframes skel-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
 
+/* Regeneration overlay - covers options grid during regenerate-all */
+.regen-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  gap: 20px;
+  padding: 0;
+  z-index: 10;
+  animation: regen-fade-in 0.3s ease-out;
+}
+.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; }
+
+@keyframes regen-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.regen-skeleton {
+  border: 2px dashed rgba(138,190,183,0.15);
+  border-radius: 12px;
+  background: var(--dk-surface);
+  min-height: 280px;
+  position: relative;
+  overflow: hidden;
+}
+.regen-skeleton::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 44px;
+  background: linear-gradient(110deg, rgba(var(--dk-ink),0.03) 30%, rgba(var(--dk-ink),0.07) 50%, rgba(var(--dk-ink),0.03) 70%);
+  background-size: 200% 100%;
+  animation: skel-shimmer 1.5s ease-in-out infinite;
+  border-bottom: 1px solid rgba(var(--dk-ink),0.06);
+}
+.regen-skeleton::after {
+  content: '';
+  position: absolute;
+  top: 45px; left: 0; right: 0; bottom: 0;
+  background: linear-gradient(110deg, var(--dk-surface) 30%, var(--dk-surface-shimmer) 50%, var(--dk-surface) 70%);
+  background-size: 200% 100%;
+  animation: skel-shimmer 1.5s ease-in-out infinite;
+  animation-delay: 0.1s;
+}
+.regen-skeleton:nth-child(2)::before,
+.regen-skeleton:nth-child(2)::after { animation-delay: 0.2s; }
+.regen-skeleton:nth-child(3)::before,
+.regen-skeleton:nth-child(3)::after { animation-delay: 0.3s; }
+.regen-skeleton:nth-child(4)::before,
+.regen-skeleton:nth-child(4)::after { animation-delay: 0.4s; }
+
+/* Regeneration status text */
+.regen-status {
+  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;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.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;
+}
+
+/* Options grid regenerating state */
+.options.regenerating {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease-out;
+}
+
+/* Regenerated options entry animation */
+.option-regenerated {
+  animation: opt-regen-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  opacity: 0;
+}
+.option-regenerated:nth-child(1) { animation-delay: 0.05s; }
+.option-regenerated:nth-child(2) { animation-delay: 0.1s; }
+.option-regenerated:nth-child(3) { animation-delay: 0.15s; }
+.option-regenerated:nth-child(4) { animation-delay: 0.2s; }
+@keyframes opt-regen-appear {
+  0% { opacity: 0; transform: translateY(12px) scale(0.96); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
 /* ─────────────────────────────────────────────────────────────
    MODEL BAR
    ───────────────────────────────────────────────────────────── */
@@ -303,11 +423,61 @@
 .btn-nav:focus-visible,
 .btn-gen-more:focus-visible,
 .btn-generate:focus-visible,
+.deck-save-btn:focus-visible,
 .confirm-bar-btn:focus-visible {
   outline: 2px solid var(--dk-accent);
   outline-offset: 2px;
 }
 
+/* ─────────────────────────────────────────────────────────────
+   SAVE CONTROLS
+   ───────────────────────────────────────────────────────────── */
+
+.deck-save-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(var(--dk-ink),0.16);
+  background: rgba(var(--dk-ink),0.06);
+  color: var(--dk-text-secondary);
+  font: 11px var(--dk-font-mono);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.deck-save-btn:hover {
+  border-color: rgba(138,190,183,0.28);
+  color: var(--dk-accent-text);
+  background: rgba(138,190,183,0.08);
+}
+
+.deck-save-btn.dirty {
+  border-color: rgba(251,191,36,0.28);
+  color: var(--dk-status-warn);
+  background: rgba(251,191,36,0.08);
+}
+
+.deck-save-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.deck-save-status {
+  font: 11px var(--dk-font-mono);
+  color: var(--dk-text-hint);
+  white-space: nowrap;
+}
+
+.deck-save-status.saved {
+  color: var(--dk-status-success);
+}
+
+.deck-save-status.dirty {
+  color: var(--dk-status-warn);
+}
+
 .deck {
   touch-action: manipulation;
   overscroll-behavior: contain;
@@ -331,6 +501,7 @@
   .slide { padding: 20px 16px 16px; }
   .summary-grid { grid-template-columns: 1fr; }
   .pv-layout-sidebar { grid-template-columns: 120px 1fr; }
+  .deck-save-status { display: none; }
 }
 
 /* ─────────────────────────────────────────────────────────────

package/form/css/layout.css

@@ -268,6 +268,21 @@ body {
   color: var(--dk-text-secondary); font-family: var(--dk-font-mono);
   font-style: italic;
 }
+.summary-notes {
+  margin-top: 10px; padding: 8px 10px;
+  font-size: 11px; line-height: 1.5;
+  color: var(--dk-accent-text);
+  background: rgba(138,190,183,0.08);
+  border-radius: 4px;
+  border-left: 2px solid rgba(138,190,183,0.3);
+}
+.summary-notes-label {
+  font-weight: 600;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  opacity: 0.8;
+}
 .summary-preview {
   margin-top: 12px; border-radius: 6px; overflow: hidden;
   border: 1px solid rgba(var(--dk-ink),0.12); max-height: 120px;
@@ -288,6 +303,47 @@ body {
 }
 .summary-mermaid svg { max-width: 100%; max-height: 100%; }
 
+/* Final notes input on summary slide */
+.final-notes {
+  width: 100%;
+  max-width: 560px;
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.final-notes-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--dk-text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.final-notes-input {
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(var(--dk-ink),0.12);
+  background: rgba(var(--dk-ink),0.04);
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--dk-text);
+  resize: vertical;
+  min-height: 60px;
+  max-height: 120px;
+  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+}
+.final-notes-input::placeholder {
+  color: var(--dk-text-placeholder);
+  font-style: italic;
+}
+.final-notes-input:focus {
+  outline: none;
+  border-color: rgba(138,190,183,0.4);
+  background: rgba(var(--dk-ink),0.06);
+  box-shadow: 0 0 0 3px rgba(138,190,183,0.1);
+}
+
 .btn-generate {
   display: inline-flex; align-items: center; justify-content: center; gap: 8px;
   padding: 14px 48px; border-radius: 10px; font-size: 14px; font-weight: 600;

package/form/css/preview.css

@@ -59,17 +59,71 @@ code[class*="language-"], pre[class*="language-"] {
    OPTION ASIDE
    ───────────────────────────────────────────────────────────── */
 
-.option-aside {
-  margin: 0 14px 14px;
+/* Option footer - contains aside + notes */
+.option-footer {
   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;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.option-aside {
+  padding: 8px 10px;
+  border-left: 2px solid rgba(138,190,183,0.2);
+  background: rgba(var(--dk-ink),0.02);
+  font-size: 11px; line-height: 1.55;
   color: var(--dk-text-aside);
   font-family: var(--dk-font-mono);
   font-style: italic;
   letter-spacing: -0.01em;
+  border-radius: 0 4px 4px 0;
+}
+
+/* Option notes input */
+.option-notes {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.option-notes-label {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--dk-text-hint);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+  opacity: 0.6;
+}
+.option-notes-input {
+  flex: 1;
+  padding: 5px 8px;
+  border-radius: 4px;
+  border: 1px dashed rgba(var(--dk-ink),0.12);
+  background: transparent;
+  font-size: 11px;
+  font-family: var(--dk-font-mono);
+  color: var(--dk-text);
+  resize: none;
+  min-height: 24px;
+  transition: border-color 0.2s, background 0.2s;
+}
+.option-notes-input::placeholder {
+  color: var(--dk-text-placeholder);
+  opacity: 0.4;
+  font-size: 10px;
+}
+.option-notes-input:focus {
+  outline: none;
+  border-style: solid;
+  border-color: rgba(138,190,183,0.3);
+  background: rgba(var(--dk-ink),0.02);
+}
+.option.selected .option-notes-input {
+  border-color: rgba(138,190,183,0.2);
+}
+.option-notes-input:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 /* ─────────────────────────────────────────────────────────────

package/form/deck.html

@@ -45,6 +45,8 @@
 				<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>
+				<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>
 				<span class="deck-key hidden" id="theme-shortcut"></span>
 			</div>
 			<button class="btn-nav primary" id="btn-next" type="button">Next &rarr;</button>