From 7db591da172d89533937eb8ecd5ea2f53da92461 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 3 Mar 2026 15:47:26 -0800
Subject: [PATCH] feat: add settings menus to all 4 decide/choice canvas
 elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each choice component now has a gear (⚙) settings panel for configuring
title, options, criteria, and tool-specific parameters inline on the canvas.

- folk-choice-vote: title, options (color+label), QV budget, reset votes
- folk-choice-conviction: title, options (color+label), reset stakes
- folk-choice-rank: title, options (label), reset rankings
- folk-choice-spider: title, options, criteria with weight sliders, reset scores

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lib/folk-choice-conviction.ts | 104 +++++++++++++++++++++++++
 lib/folk-choice-rank.ts       |  97 ++++++++++++++++++++++++
 lib/folk-choice-spider.ts     | 138 ++++++++++++++++++++++++++++++++++
 lib/folk-choice-vote.ts       | 115 ++++++++++++++++++++++++++++
 4 files changed, 454 insertions(+)

diff --git a/lib/folk-choice-conviction.ts b/lib/folk-choice-conviction.ts
index 36d2497..f1d2e24 100644
--- a/lib/folk-choice-conviction.ts
+++ b/lib/folk-choice-conviction.ts
@@ -277,6 +277,23 @@ const styles = css`
 	.participant-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; color: #475569; }
 	.participant-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 	.drawer-toggle.active { background: rgba(255,255,255,0.3); }
+	.settings-toggle.active { background: rgba(255,255,255,0.3); }
+	.settings-panel { display: none; flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; height: calc(100% - 36px); }
+	.settings-open .settings-panel { display: flex; }
+	.settings-open .body { display: none !important; }
+	.settings-open .results-drawer { display: none !important; }
+	.settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
+	.settings-input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; }
+	.settings-input:focus { border-color: #d97706; }
+	.settings-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
+	.settings-item input[type="text"] { flex: 1; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; min-width: 0; }
+	.settings-item input[type="color"] { width: 24px; height: 24px; border: none; border-radius: 4px; padding: 0; cursor: pointer; background: none; }
+	.settings-item .remove-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; }
+	.settings-item .remove-btn:hover { color: #ef4444; background: #fef2f2; }
+	.settings-danger { background: none; border: 1px solid #fca5a5; color: #ef4444; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 11px; width: 100%; margin-top: 4px; }
+	.settings-danger:hover { background: #fef2f2; }
+	.settings-done { background: #d97706; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 12px; font-weight: 500; width: 100%; margin-top: auto; }
+	.settings-done:hover { background: #b45309; }
 `;
 
 // -- Data types --
@@ -349,6 +366,7 @@ export class FolkChoiceConviction extends FolkShape {
 	#userId = "";
 	#userName = "";
 	#drawerOpen = false;
+	#settingsOpen = false;
 	#tickInterval: ReturnType<typeof setInterval> | null = null;
 
 	// DOM refs
@@ -359,6 +377,7 @@ export class FolkChoiceConviction extends FolkShape {
 	#votersEl: HTMLElement | null = null;
 	#drawerEl: HTMLElement | null = null;
 	#chartEl: HTMLElement | null = null;
+	#settingsEl: HTMLElement | null = null;
 
 	get title() { return this.#title; }
 	set title(v: string) { this.#title = v; this.requestUpdate("title"); }
@@ -442,6 +461,7 @@ export class FolkChoiceConviction extends FolkShape {
 					<span class="title-text">Conviction</span>
 				</span>
 				<div class="header-actions">
+					<button class="settings-toggle" title="Settings">&#x2699;</button>
 					<button class="drawer-toggle" title="Results &amp; Stats">&#x1F4CA;</button>
 					<button class="close-btn" title="Close">&times;</button>
 				</div>
@@ -457,6 +477,7 @@ export class FolkChoiceConviction extends FolkShape {
 				</div>
 			</div>
 			<div class="results-drawer"></div>
+			<div class="settings-panel"></div>
 			<div class="username-prompt" style="display: none;">
 				<p>Enter your name to stake:</p>
 				<input type="text" class="username-input" placeholder="Your name..." />
@@ -486,6 +507,17 @@ export class FolkChoiceConviction extends FolkShape {
 			if (this.#drawerOpen) this.#renderDrawer();
 		});
 
+		this.#settingsEl = wrapper.querySelector(".settings-panel") as HTMLElement;
+		const settingsToggle = wrapper.querySelector(".settings-toggle") as HTMLButtonElement;
+		settingsToggle.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#settingsOpen = !this.#settingsOpen;
+			this.#wrapperEl!.classList.toggle("settings-open", this.#settingsOpen);
+			settingsToggle.classList.toggle("active", this.#settingsOpen);
+			if (this.#settingsOpen) this.#renderSettings();
+			else this.#render();
+		});
+
 		const usernamePrompt = wrapper.querySelector(".username-prompt") as HTMLElement;
 		const usernameInput = wrapper.querySelector(".username-input") as HTMLInputElement;
 		const usernameBtn = wrapper.querySelector(".username-btn") as HTMLButtonElement;
@@ -840,6 +872,78 @@ export class FolkChoiceConviction extends FolkShape {
 		return div.innerHTML;
 	}
 
+	#renderSettings() {
+		if (!this.#settingsEl) return;
+		const esc = (s: string) => this.#escapeHtml(s);
+		let h = '<div><div class="settings-label">Title</div>';
+		h += `<input type="text" class="settings-input settings-title" value="${esc(this.#title)}" /></div>`;
+		h += '<div><div class="settings-label">Options</div>';
+		for (let i = 0; i < this.#options.length; i++) {
+			const opt = this.#options[i];
+			h += `<div class="settings-item" data-idx="${i}">`;
+			h += `<input type="color" class="opt-color" value="${opt.color}" />`;
+			h += `<input type="text" class="opt-label" value="${esc(opt.label)}" />`;
+			h += `<button class="remove-btn" title="Remove">&times;</button></div>`;
+		}
+		h += '</div>';
+		const uniqueStakers = new Set(this.#stakes.map((s) => s.userId)).size;
+		h += '<div><div class="settings-label">Danger Zone</div>';
+		h += `<button class="settings-danger clear-data-btn">Reset all stakes (${uniqueStakers} participant${uniqueStakers !== 1 ? "s" : ""})</button></div>`;
+		h += '<button class="settings-done">Done</button>';
+		this.#settingsEl.innerHTML = h;
+
+		const stop = (e: Event) => e.stopPropagation();
+		const titleInput = this.#settingsEl.querySelector(".settings-title") as HTMLInputElement;
+		titleInput.addEventListener("click", stop);
+		titleInput.addEventListener("input", () => {
+			this.#title = titleInput.value;
+			this.#wrapperEl!.querySelector(".title-text")!.textContent = this.#title;
+			this.dispatchEvent(new CustomEvent("content-change"));
+		});
+		this.#settingsEl.querySelectorAll(".opt-label").forEach((el) => {
+			const input = el as HTMLInputElement;
+			input.addEventListener("click", stop);
+			input.addEventListener("input", () => {
+				const idx = parseInt(input.closest(".settings-item")!.getAttribute("data-idx")!);
+				this.#options[idx].label = input.value;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelectorAll(".opt-color").forEach((el) => {
+			const input = el as HTMLInputElement;
+			input.addEventListener("click", stop);
+			input.addEventListener("input", () => {
+				const idx = parseInt(input.closest(".settings-item")!.getAttribute("data-idx")!);
+				this.#options[idx].color = input.value;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelectorAll(".remove-btn").forEach((btn) => {
+			btn.addEventListener("click", (e) => {
+				e.stopPropagation();
+				const idx = parseInt((btn as HTMLElement).closest(".settings-item")!.getAttribute("data-idx")!);
+				const removedId = this.#options[idx].id;
+				this.#options.splice(idx, 1);
+				this.#stakes = this.#stakes.filter((s) => s.optionId !== removedId);
+				this.#renderSettings();
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelector(".clear-data-btn")!.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#stakes = [];
+			this.#renderSettings();
+			this.dispatchEvent(new CustomEvent("content-change"));
+		});
+		this.#settingsEl.querySelector(".settings-done")!.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#settingsOpen = false;
+			this.#wrapperEl!.classList.remove("settings-open");
+			this.#wrapperEl!.querySelector(".settings-toggle")!.classList.remove("active");
+			this.#render();
+		});
+	}
+
 	override toJSON() {
 		return {
 			...super.toJSON(),
diff --git a/lib/folk-choice-rank.ts b/lib/folk-choice-rank.ts
index 5b5c0ac..b050a3b 100644
--- a/lib/folk-choice-rank.ts
+++ b/lib/folk-choice-rank.ts
@@ -315,6 +315,22 @@ const styles = css`
 	.participant-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; color: #475569; }
 	.participant-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 	.drawer-toggle.active { background: rgba(255,255,255,0.3); }
+	.settings-toggle.active { background: rgba(255,255,255,0.3); }
+	.settings-panel { display: none; flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; height: calc(100% - 36px); }
+	.settings-open .settings-panel { display: flex; }
+	.settings-open .body { display: none !important; }
+	.settings-open .results-drawer { display: none !important; }
+	.settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
+	.settings-input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; }
+	.settings-input:focus { border-color: #4f46e5; }
+	.settings-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
+	.settings-item input[type="text"] { flex: 1; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; min-width: 0; }
+	.settings-item .remove-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; }
+	.settings-item .remove-btn:hover { color: #ef4444; background: #fef2f2; }
+	.settings-danger { background: none; border: 1px solid #fca5a5; color: #ef4444; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 11px; width: 100%; margin-top: 4px; }
+	.settings-danger:hover { background: #fef2f2; }
+	.settings-done { background: #4f46e5; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 12px; font-weight: 500; width: 100%; margin-top: auto; }
+	.settings-done:hover { background: #4338ca; }
 `;
 
 // -- Data types --
@@ -537,6 +553,7 @@ export class FolkChoiceRank extends FolkShape {
 	#userName = "";
 	#activeTab: "rank" | "results" = "rank";
 	#drawerOpen = false;
+	#settingsOpen = false;
 
 	// Drag state
 	#dragIdx: number | null = null;
@@ -548,6 +565,7 @@ export class FolkChoiceRank extends FolkShape {
 	#rankPanel: HTMLElement | null = null;
 	#resultsPanel: HTMLElement | null = null;
 	#drawerEl: HTMLElement | null = null;
+	#settingsEl: HTMLElement | null = null;
 
 	get title() { return this.#title; }
 	set title(v: string) { this.#title = v; this.requestUpdate("title"); }
@@ -628,6 +646,7 @@ export class FolkChoiceRank extends FolkShape {
 					<span class="title-text">Rank</span>
 				</span>
 				<div class="header-actions">
+					<button class="settings-toggle" title="Settings">&#x2699;</button>
 					<button class="drawer-toggle" title="Results &amp; Stats">&#x1F4CA;</button>
 					<button class="close-btn" title="Close">&times;</button>
 				</div>
@@ -645,6 +664,7 @@ export class FolkChoiceRank extends FolkShape {
 				</div>
 			</div>
 			<div class="results-drawer"></div>
+			<div class="settings-panel"></div>
 			<div class="username-prompt" style="display: none;">
 				<p>Enter your name to rank:</p>
 				<input type="text" class="username-input" placeholder="Your name..." />
@@ -671,6 +691,17 @@ export class FolkChoiceRank extends FolkShape {
 			if (this.#drawerOpen) this.#renderDrawer();
 		});
 
+		this.#settingsEl = wrapper.querySelector(".settings-panel") as HTMLElement;
+		const settingsToggle = wrapper.querySelector(".settings-toggle") as HTMLButtonElement;
+		settingsToggle.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#settingsOpen = !this.#settingsOpen;
+			this.#wrapperEl!.classList.toggle("settings-open", this.#settingsOpen);
+			settingsToggle.classList.toggle("active", this.#settingsOpen);
+			if (this.#settingsOpen) this.#renderSettings();
+			else this.#render();
+		});
+
 		const usernamePrompt = wrapper.querySelector(".username-prompt") as HTMLElement;
 		const usernameInput = wrapper.querySelector(".username-input") as HTMLInputElement;
 		const usernameBtn = wrapper.querySelector(".username-btn") as HTMLButtonElement;
@@ -975,6 +1006,72 @@ export class FolkChoiceRank extends FolkShape {
 		return div.innerHTML;
 	}
 
+	#renderSettings() {
+		if (!this.#settingsEl) return;
+		const esc = (s: string) => this.#escapeHtml(s);
+		let h = '<div><div class="settings-label">Title</div>';
+		h += `<input type="text" class="settings-input settings-title" value="${esc(this.#title)}" /></div>`;
+		h += '<div><div class="settings-label">Options</div>';
+		for (let i = 0; i < this.#options.length; i++) {
+			const opt = this.#options[i];
+			h += `<div class="settings-item" data-idx="${i}">`;
+			h += `<input type="text" class="opt-label" value="${esc(opt.label)}" />`;
+			h += `<button class="remove-btn" title="Remove">&times;</button></div>`;
+		}
+		h += '</div>';
+		h += '<div><div class="settings-label">Danger Zone</div>';
+		h += `<button class="settings-danger clear-data-btn">Reset all rankings (${this.#rankings.length} voter${this.#rankings.length !== 1 ? "s" : ""})</button></div>`;
+		h += '<button class="settings-done">Done</button>';
+		this.#settingsEl.innerHTML = h;
+
+		const stop = (e: Event) => e.stopPropagation();
+		const titleInput = this.#settingsEl.querySelector(".settings-title") as HTMLInputElement;
+		titleInput.addEventListener("click", stop);
+		titleInput.addEventListener("input", () => {
+			this.#title = titleInput.value;
+			this.#wrapperEl!.querySelector(".title-text")!.textContent = this.#title;
+			this.dispatchEvent(new CustomEvent("content-change"));
+		});
+		this.#settingsEl.querySelectorAll(".opt-label").forEach((el) => {
+			const input = el as HTMLInputElement;
+			input.addEventListener("click", stop);
+			input.addEventListener("input", () => {
+				const idx = parseInt(input.closest(".settings-item")!.getAttribute("data-idx")!);
+				this.#options[idx].label = input.value;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelectorAll(".remove-btn").forEach((btn) => {
+			btn.addEventListener("click", (e) => {
+				e.stopPropagation();
+				const idx = parseInt((btn as HTMLElement).closest(".settings-item")!.getAttribute("data-idx")!);
+				const removedId = this.#options[idx].id;
+				this.#options.splice(idx, 1);
+				for (const r of this.#rankings) {
+					r.ordering = r.ordering.filter((id) => id !== removedId);
+				}
+				this.#myOrdering = this.#myOrdering.filter((id) => id !== removedId);
+				this.#renderSettings();
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelector(".clear-data-btn")!.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#rankings = [];
+			this.#myOrdering = this.#options.map((o) => o.id);
+			this.#renderSettings();
+			this.dispatchEvent(new CustomEvent("content-change"));
+		});
+		this.#settingsEl.querySelector(".settings-done")!.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#settingsOpen = false;
+			this.#wrapperEl!.classList.remove("settings-open");
+			this.#wrapperEl!.querySelector(".settings-toggle")!.classList.remove("active");
+			this.#syncMyOrdering();
+			this.#render();
+		});
+	}
+
 	override toJSON() {
 		return {
 			...super.toJSON(),
diff --git a/lib/folk-choice-spider.ts b/lib/folk-choice-spider.ts
index 4c4aeaf..05d988c 100644
--- a/lib/folk-choice-spider.ts
+++ b/lib/folk-choice-spider.ts
@@ -284,6 +284,25 @@ const styles = css`
 	.participant-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; color: #475569; }
 	.participant-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 	.drawer-toggle.active { background: rgba(255,255,255,0.3); }
+	.settings-toggle.active { background: rgba(255,255,255,0.3); }
+	.settings-panel { display: none; flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; height: calc(100% - 36px); }
+	.settings-open .settings-panel { display: flex; }
+	.settings-open .body { display: none !important; }
+	.settings-open .results-drawer { display: none !important; }
+	.settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
+	.settings-input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; }
+	.settings-input:focus { border-color: #059669; }
+	.settings-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
+	.settings-item input[type="text"] { flex: 1; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; min-width: 0; }
+	.settings-item input[type="range"] { width: 60px; height: 4px; -webkit-appearance: none; appearance: none; background: #e2e8f0; border-radius: 2px; outline: none; cursor: pointer; }
+	.settings-item input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #059669; cursor: pointer; }
+	.settings-item .weight-val { font-size: 10px; font-weight: 600; color: #059669; min-width: 12px; text-align: center; }
+	.settings-item .remove-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; }
+	.settings-item .remove-btn:hover { color: #ef4444; background: #fef2f2; }
+	.settings-danger { background: none; border: 1px solid #fca5a5; color: #ef4444; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 11px; width: 100%; margin-top: 4px; }
+	.settings-danger:hover { background: #fef2f2; }
+	.settings-done { background: #059669; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 12px; font-weight: 500; width: 100%; margin-top: auto; }
+	.settings-done:hover { background: #047857; }
 `;
 
 // -- Data types --
@@ -480,6 +499,7 @@ export class FolkChoiceSpider extends FolkShape {
 	#userName = "";
 	#selectedOptionId = "";
 	#drawerOpen = false;
+	#settingsOpen = false;
 
 	// DOM refs
 	#wrapperEl: HTMLElement | null = null;
@@ -490,6 +510,7 @@ export class FolkChoiceSpider extends FolkShape {
 	#summaryEl: HTMLElement | null = null;
 	#optionTabsEl: HTMLElement | null = null;
 	#drawerEl: HTMLElement | null = null;
+	#settingsEl: HTMLElement | null = null;
 
 	get title() { return this.#title; }
 	set title(v: string) { this.#title = v; this.requestUpdate("title"); }
@@ -570,6 +591,7 @@ export class FolkChoiceSpider extends FolkShape {
 					<span class="title-text">Spider</span>
 				</span>
 				<div class="header-actions">
+					<button class="settings-toggle" title="Settings">&#x2699;</button>
 					<button class="drawer-toggle" title="Results &amp; Stats">&#x1F4CA;</button>
 					<button class="close-btn" title="Close">&times;</button>
 				</div>
@@ -592,6 +614,7 @@ export class FolkChoiceSpider extends FolkShape {
 				</div>
 			</div>
 			<div class="results-drawer"></div>
+			<div class="settings-panel"></div>
 			<div class="username-prompt" style="display: none;">
 				<p>Enter your name to score:</p>
 				<input type="text" class="username-input" placeholder="Your name..." />
@@ -621,6 +644,17 @@ export class FolkChoiceSpider extends FolkShape {
 			if (this.#drawerOpen) this.#renderDrawer();
 		});
 
+		this.#settingsEl = wrapper.querySelector(".settings-panel") as HTMLElement;
+		const settingsToggle = wrapper.querySelector(".settings-toggle") as HTMLButtonElement;
+		settingsToggle.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#settingsOpen = !this.#settingsOpen;
+			this.#wrapperEl!.classList.toggle("settings-open", this.#settingsOpen);
+			settingsToggle.classList.toggle("active", this.#settingsOpen);
+			if (this.#settingsOpen) this.#renderSettings();
+			else this.#render();
+		});
+
 		const usernamePrompt = wrapper.querySelector(".username-prompt") as HTMLElement;
 		const usernameInput = wrapper.querySelector(".username-input") as HTMLInputElement;
 		const usernameBtn = wrapper.querySelector(".username-btn") as HTMLButtonElement;
@@ -948,6 +982,110 @@ export class FolkChoiceSpider extends FolkShape {
 		return div.innerHTML;
 	}
 
+	#renderSettings() {
+		if (!this.#settingsEl) return;
+		const esc = (s: string) => this.#escapeHtml(s);
+		let h = '<div><div class="settings-label">Title</div>';
+		h += `<input type="text" class="settings-input settings-title" value="${esc(this.#title)}" /></div>`;
+		h += '<div><div class="settings-label">Options</div>';
+		for (let i = 0; i < this.#options.length; i++) {
+			const opt = this.#options[i];
+			h += `<div class="settings-item" data-idx="${i}" data-kind="opt">`;
+			h += `<input type="text" class="opt-label" value="${esc(opt.label)}" />`;
+			h += `<button class="remove-btn" title="Remove">&times;</button></div>`;
+		}
+		h += '</div>';
+		h += '<div><div class="settings-label">Criteria &amp; Weights</div>';
+		for (let i = 0; i < this.#criteria.length; i++) {
+			const c = this.#criteria[i];
+			h += `<div class="settings-item" data-idx="${i}" data-kind="crit">`;
+			h += `<input type="text" class="crit-label" value="${esc(c.label)}" />`;
+			h += `<input type="range" class="crit-weight" min="1" max="5" value="${c.weight}" />`;
+			h += `<span class="weight-val">${c.weight}</span>`;
+			h += `<button class="remove-btn" title="Remove">&times;</button></div>`;
+		}
+		h += '</div>';
+		const allUsers = new Set(this.#scores.map((s) => s.userId));
+		h += '<div><div class="settings-label">Danger Zone</div>';
+		h += `<button class="settings-danger clear-data-btn">Reset all scores (${allUsers.size} participant${allUsers.size !== 1 ? "s" : ""})</button></div>`;
+		h += '<button class="settings-done">Done</button>';
+		this.#settingsEl.innerHTML = h;
+
+		const stop = (e: Event) => e.stopPropagation();
+		const titleInput = this.#settingsEl.querySelector(".settings-title") as HTMLInputElement;
+		titleInput.addEventListener("click", stop);
+		titleInput.addEventListener("input", () => {
+			this.#title = titleInput.value;
+			this.#wrapperEl!.querySelector(".title-text")!.textContent = this.#title;
+			this.dispatchEvent(new CustomEvent("content-change"));
+		});
+		this.#settingsEl.querySelectorAll(".opt-label").forEach((el) => {
+			const input = el as HTMLInputElement;
+			input.addEventListener("click", stop);
+			input.addEventListener("input", () => {
+				const idx = parseInt(input.closest(".settings-item")!.getAttribute("data-idx")!);
+				this.#options[idx].label = input.value;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelectorAll(".crit-label").forEach((el) => {
+			const input = el as HTMLInputElement;
+			input.addEventListener("click", stop);
+			input.addEventListener("input", () => {
+				const idx = parseInt(input.closest(".settings-item")!.getAttribute("data-idx")!);
+				this.#criteria[idx].label = input.value;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelectorAll(".crit-weight").forEach((el) => {
+			const input = el as HTMLInputElement;
+			input.addEventListener("click", stop);
+			input.addEventListener("pointerdown", stop);
+			input.addEventListener("input", () => {
+				const idx = parseInt(input.closest(".settings-item")!.getAttribute("data-idx")!);
+				this.#criteria[idx].weight = parseInt(input.value);
+				const valEl = input.parentElement!.querySelector(".weight-val") as HTMLElement;
+				valEl.textContent = input.value;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelectorAll(".remove-btn").forEach((btn) => {
+			btn.addEventListener("click", (e) => {
+				e.stopPropagation();
+				const item = (btn as HTMLElement).closest(".settings-item")!;
+				const idx = parseInt(item.getAttribute("data-idx")!);
+				const kind = item.getAttribute("data-kind");
+				if (kind === "opt") {
+					const removedId = this.#options[idx].id;
+					this.#options.splice(idx, 1);
+					this.#scores = this.#scores.filter((s) => s.optionId !== removedId);
+					if (this.#selectedOptionId === removedId) {
+						this.#selectedOptionId = this.#options[0]?.id || "";
+					}
+				} else {
+					const removedId = this.#criteria[idx].id;
+					this.#criteria.splice(idx, 1);
+					this.#scores = this.#scores.filter((s) => s.criterionId !== removedId);
+				}
+				this.#renderSettings();
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelector(".clear-data-btn")!.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#scores = [];
+			this.#renderSettings();
+			this.dispatchEvent(new CustomEvent("content-change"));
+		});
+		this.#settingsEl.querySelector(".settings-done")!.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#settingsOpen = false;
+			this.#wrapperEl!.classList.remove("settings-open");
+			this.#wrapperEl!.querySelector(".settings-toggle")!.classList.remove("active");
+			this.#render();
+		});
+	}
+
 	override toJSON() {
 		return {
 			...super.toJSON(),
diff --git a/lib/folk-choice-vote.ts b/lib/folk-choice-vote.ts
index 02e208c..9c34843 100644
--- a/lib/folk-choice-vote.ts
+++ b/lib/folk-choice-vote.ts
@@ -293,6 +293,24 @@ const styles = css`
 	.participant-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; color: #475569; }
 	.participant-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 	.drawer-toggle.active { background: rgba(255,255,255,0.3); }
+	.settings-toggle.active { background: rgba(255,255,255,0.3); }
+	.settings-panel { display: none; flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; height: calc(100% - 36px); }
+	.settings-open .settings-panel { display: flex; }
+	.settings-open .body { display: none !important; }
+	.settings-open .results-drawer { display: none !important; }
+	.settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
+	.settings-input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; }
+	.settings-input:focus { border-color: #0d9488; }
+	.settings-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
+	.settings-item input[type="text"] { flex: 1; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; min-width: 0; }
+	.settings-item input[type="color"] { width: 24px; height: 24px; border: none; border-radius: 4px; padding: 0; cursor: pointer; background: none; }
+	.settings-item input[type="number"] { width: 60px; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; }
+	.settings-item .remove-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; }
+	.settings-item .remove-btn:hover { color: #ef4444; background: #fef2f2; }
+	.settings-danger { background: none; border: 1px solid #fca5a5; color: #ef4444; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 11px; width: 100%; margin-top: 4px; }
+	.settings-danger:hover { background: #fef2f2; }
+	.settings-done { background: #0d9488; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 12px; font-weight: 500; width: 100%; margin-top: auto; }
+	.settings-done:hover { background: #0f766e; }
 `;
 
 // -- Data types --
@@ -396,6 +414,7 @@ export class FolkChoiceVote extends FolkShape {
 	#userId = "";
 	#userName = "";
 	#drawerOpen = false;
+	#settingsOpen = false;
 
 	// DOM refs
 	#wrapperEl: HTMLElement | null = null;
@@ -404,6 +423,7 @@ export class FolkChoiceVote extends FolkShape {
 	#budgetEl: HTMLElement | null = null;
 	#votersEl: HTMLElement | null = null;
 	#drawerEl: HTMLElement | null = null;
+	#settingsEl: HTMLElement | null = null;
 
 	get title() { return this.#title; }
 	set title(v: string) {
@@ -473,6 +493,7 @@ export class FolkChoiceVote extends FolkShape {
 					<span class="title-text">Poll</span>
 				</span>
 				<div class="header-actions">
+					<button class="settings-toggle" title="Settings">&#x2699;</button>
 					<button class="drawer-toggle" title="Results &amp; Stats">&#x1F4CA;</button>
 					<button class="close-btn" title="Close">&times;</button>
 				</div>
@@ -492,6 +513,7 @@ export class FolkChoiceVote extends FolkShape {
 				</div>
 			</div>
 			<div class="results-drawer"></div>
+			<div class="settings-panel"></div>
 			<div class="username-prompt" style="display: none;">
 				<p>Enter your name to vote:</p>
 				<input type="text" class="username-input" placeholder="Your name..." />
@@ -520,6 +542,17 @@ export class FolkChoiceVote extends FolkShape {
 			if (this.#drawerOpen) this.#renderDrawer();
 		});
 
+		this.#settingsEl = wrapper.querySelector(".settings-panel") as HTMLElement;
+		const settingsToggle = wrapper.querySelector(".settings-toggle") as HTMLButtonElement;
+		settingsToggle.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#settingsOpen = !this.#settingsOpen;
+			this.#wrapperEl!.classList.toggle("settings-open", this.#settingsOpen);
+			settingsToggle.classList.toggle("active", this.#settingsOpen);
+			if (this.#settingsOpen) this.#renderSettings();
+			else this.#render();
+		});
+
 		const usernamePrompt = wrapper.querySelector(".username-prompt") as HTMLElement;
 		const usernameInput = wrapper.querySelector(".username-input") as HTMLInputElement;
 		const usernameBtn = wrapper.querySelector(".username-btn") as HTMLButtonElement;
@@ -810,6 +843,88 @@ export class FolkChoiceVote extends FolkShape {
 		return div.innerHTML;
 	}
 
+	#renderSettings() {
+		if (!this.#settingsEl) return;
+		const esc = (s: string) => this.#escapeHtml(s);
+		let h = '<div><div class="settings-label">Title</div>';
+		h += `<input type="text" class="settings-input settings-title" value="${esc(this.#title)}" /></div>`;
+		h += '<div><div class="settings-label">Options</div>';
+		for (let i = 0; i < this.#options.length; i++) {
+			const opt = this.#options[i];
+			h += `<div class="settings-item" data-idx="${i}">`;
+			h += `<input type="color" class="opt-color" value="${opt.color}" />`;
+			h += `<input type="text" class="opt-label" value="${esc(opt.label)}" />`;
+			h += `<button class="remove-btn" title="Remove">&times;</button></div>`;
+		}
+		h += '</div>';
+		h += '<div><div class="settings-label">Quadratic Budget</div>';
+		h += `<div class="settings-item"><input type="number" class="settings-budget" value="${this.#budget}" min="1" max="10000" />`;
+		h += '<span style="font-size:11px;color:#64748b">credits per voter</span></div></div>';
+		h += '<div><div class="settings-label">Danger Zone</div>';
+		h += `<button class="settings-danger clear-data-btn">Reset all votes (${this.#votes.length})</button></div>`;
+		h += '<button class="settings-done">Done</button>';
+		this.#settingsEl.innerHTML = h;
+
+		const stop = (e: Event) => e.stopPropagation();
+		const titleInput = this.#settingsEl.querySelector(".settings-title") as HTMLInputElement;
+		titleInput.addEventListener("click", stop);
+		titleInput.addEventListener("input", () => {
+			this.#title = titleInput.value;
+			this.#wrapperEl!.querySelector(".title-text")!.textContent = this.#title;
+			this.dispatchEvent(new CustomEvent("content-change"));
+		});
+		this.#settingsEl.querySelectorAll(".opt-label").forEach((el) => {
+			const input = el as HTMLInputElement;
+			input.addEventListener("click", stop);
+			input.addEventListener("input", () => {
+				const idx = parseInt(input.closest(".settings-item")!.getAttribute("data-idx")!);
+				this.#options[idx].label = input.value;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelectorAll(".opt-color").forEach((el) => {
+			const input = el as HTMLInputElement;
+			input.addEventListener("click", stop);
+			input.addEventListener("input", () => {
+				const idx = parseInt(input.closest(".settings-item")!.getAttribute("data-idx")!);
+				this.#options[idx].color = input.value;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		this.#settingsEl.querySelectorAll(".remove-btn").forEach((btn) => {
+			btn.addEventListener("click", (e) => {
+				e.stopPropagation();
+				const idx = parseInt((btn as HTMLElement).closest(".settings-item")!.getAttribute("data-idx")!);
+				const removedId = this.#options[idx].id;
+				this.#options.splice(idx, 1);
+				for (const v of this.#votes) delete v.allocations[removedId];
+				this.#renderSettings();
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		});
+		const budgetInput = this.#settingsEl.querySelector(".settings-budget") as HTMLInputElement;
+		if (budgetInput) {
+			budgetInput.addEventListener("click", stop);
+			budgetInput.addEventListener("input", () => {
+				this.#budget = parseInt(budgetInput.value) || 100;
+				this.dispatchEvent(new CustomEvent("content-change"));
+			});
+		}
+		this.#settingsEl.querySelector(".clear-data-btn")!.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#votes = [];
+			this.#renderSettings();
+			this.dispatchEvent(new CustomEvent("content-change"));
+		});
+		this.#settingsEl.querySelector(".settings-done")!.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#settingsOpen = false;
+			this.#wrapperEl!.classList.remove("settings-open");
+			this.#wrapperEl!.querySelector(".settings-toggle")!.classList.remove("active");
+			this.#render();
+		});
+	}
+
 	override toJSON() {
 		return {
 			...super.toJSON(),