diffing 0.18.1 → 0.18.3

package/dist/{server-BRQdb64n.mjs → server-CH-UPGFR.mjs}

@@ -1,18 +1,19 @@
 import { C as listRepoFiles, D as toSafeRelativePath, E as isSafePath, S as isGitRepo, T as revertHunk, _ as getShowDiff, a as getCommitSeriesSummary, b as getUntrackedFilePathsAsync, d as getMergeStatus, f as getProjectStorageDir, h as getRepoRoot, l as getGitDiffAsync, m as getRepoMetadataAsync, o as getCustomGitDiffAsync, s as getFileContent, u as getHunkHistory, x as gitAddFile, y as getTabSizeForFilesAsync } from "./git-BGj31GX-.mjs";
 import { a as searchFiles, i as searchContent, o as searchSymbols, r as searchAll, s as trackSelection, t as getSearchStatus } from "./search-3R2E5xxr.mjs";
-import { i as loadSettings, s as saveSettings } from "./settings-DkPDB_hS.mjs";
-import { a as MOCKUP_MAX_SCREEN_BYTES, c as defaultScreenLabel, d as normalizeSubmitScreens, i as sectionTitleForLine, l as isMockupViewport, n as extractPlanLines, o as MOCKUP_SCREEN_ID_RE, r as formatPlanReview, s as commentViewport, t as formatMockupReview, u as normalizeMockupViewport } from "./mockup-format-D4Ln0WxJ.mjs";
-import { t as formatComments } from "./comment-format-D4mCqr7T.mjs";
-import { g as createServerAuthMiddleware, h as buildSessionTokenSetCookieValue, v as injectSessionTokenIntoHtml } from "./server-lock-CdaUNZyX.mjs";
-import { D as setPrReviewThreadResolved, E as resolvedFromSession, O as submitReview, i as deletePrReviewComment, k as updatePrReviewComment, l as fetchExistingCommentsViaGh, p as fetchPrFileContentViaGh, t as buildPrSession, u as fetchExistingReviewsViaGh, w as refreshPrSession } from "./github-CToLsvPu.mjs";
-import { execFileSync } from "node:child_process";
+import { c as writeJsonAtomically, i as loadSettings, s as saveSettings } from "./settings-DIa-3C8o.mjs";
+import { a as formatPlanReview, c as MOCKUP_SCREEN_ID_RE, d as isMockupViewport, f as normalizeMockupViewport, i as extractPlanLines, l as commentViewport, n as lintMockupScreens, o as sectionTitleForLine, p as normalizeSubmitScreens, r as formatMockupReview, s as MOCKUP_MAX_SCREEN_BYTES, u as defaultScreenLabel } from "./mockup-lint-BRjhxXSw.mjs";
+import { a as slugifyDesignId, i as emptyTokens, o as snapshotRevision, r as cloneTokens, s as tokensToCss, t as DEFAULT_DESIGN_SYSTEM_ID } from "./design-system-types-uiP9W2uj.mjs";
+import { t as formatComments } from "./comment-format-DS1wOWj_.mjs";
+import { g as createServerAuthMiddleware, h as buildSessionTokenSetCookieValue, v as injectSessionTokenIntoHtml } from "./server-lock-ACw2cKDI.mjs";
+import { D as setPrReviewThreadResolved, E as resolvedFromSession, O as submitReview, i as deletePrReviewComment, k as updatePrReviewComment, l as fetchExistingCommentsViaGh, p as fetchPrFileContentViaGh, t as buildPrSession, u as fetchExistingReviewsViaGh, w as refreshPrSession } from "./github-BtABlwOZ.mjs";
+import { execFile, execFileSync } from "node:child_process";
 import { createHash } from "node:crypto";
 import { fileURLToPath } from "node:url";
-import { dirname, extname, join, resolve } from "node:path";
+import { dirname, extname, join, relative, resolve } from "node:path";
 import { existsSync, mkdirSync, readFileSync, watch } from "node:fs";
-import { parseArgs } from "node:util";
-import { mkdir, readFile, readdir, rename, rm, stat, unlink, writeFile } from "node:fs/promises";
-import { homedir } from "node:os";
+import { parseArgs, promisify } from "node:util";
+import { mkdir, mkdtemp, readFile, readdir, rename, rm, stat, unlink, writeFile } from "node:fs/promises";
+import { homedir, tmpdir } from "node:os";
 import { Hono } from "hono";
 import { streamSSE } from "hono/streaming";
 import { serve } from "@hono/node-server";
@@ -1446,7 +1447,7 @@ function isReviewCommentSide(value) {
 function planSourceFilePath(storageDir, planId) {
 	return join(storageDir, "plan-sources", `${planId}.md`);
 }
-function newId$1() {
+function newId$2() {
 	return crypto.randomUUID();
 }
 /**
@@ -1512,7 +1513,7 @@ function applyUpsert$1(plans, input, now) {
 		}
 	}
 	const plan = {
-		id: input.id || newId$1(),
+		id: input.id || newId$2(),
 		title: input.title,
 		body: input.body,
 		source: input.source,
@@ -1744,20 +1745,174 @@ var FilePlanStore = class {
 	}
 };
 //#endregion
+//#region src/lib/mockup-region.ts
+/**
+* Replace the inner HTML of the first `[data-diffing="<region>"]` element.
+* Used by revise_mockup op=replace-region. Not a general HTML rewriter —
+* good enough for agent-authored mockup fragments.
+*/
+const VOID_TAGS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+function scanOpenTag(html, at) {
+	if (html[at] !== "<" || html[at + 1] === "/" || html[at + 1] === "!") return null;
+	const nameMatch = /^<([A-Za-z][\w:-]*)/.exec(html.slice(at));
+	if (!nameMatch) return null;
+	let quote = null;
+	for (let i = at + 1; i < html.length; i++) {
+		const ch = html[i];
+		if (quote) {
+			if (ch === quote) quote = null;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") {
+			quote = ch;
+			continue;
+		}
+		if (ch === ">") {
+			const selfClosing = html[i - 1] === "/" || VOID_TAGS.has(nameMatch[1].toLowerCase());
+			return {
+				start: at,
+				end: i + 1,
+				name: nameMatch[1],
+				selfClosing
+			};
+		}
+	}
+	return null;
+}
+function findOpenTagContaining(html, attrIndex) {
+	let i = attrIndex;
+	while (i >= 0 && html[i] !== "<") i--;
+	if (i < 0) return null;
+	const tag = scanOpenTag(html, i);
+	if (!tag || attrIndex >= tag.end) return null;
+	return tag;
+}
+function findMatchingClose(html, afterOpen, tagName) {
+	const lower = tagName.toLowerCase();
+	let depth = 1;
+	let i = afterOpen;
+	while (i < html.length) {
+		if (html[i] !== "<") {
+			i++;
+			continue;
+		}
+		if (html.startsWith("<!--", i)) {
+			const end = html.indexOf("-->", i + 4);
+			i = end === -1 ? html.length : end + 3;
+			continue;
+		}
+		const close = /^<\/([A-Za-z][\w:-]*)\s*>/.exec(html.slice(i));
+		if (close) {
+			if (close[1].toLowerCase() === lower) {
+				depth--;
+				if (depth === 0) return i;
+			}
+			i += close[0].length;
+			continue;
+		}
+		const open = scanOpenTag(html, i);
+		if (open) {
+			if (!open.selfClosing && open.name.toLowerCase() === lower) depth++;
+			i = open.end;
+			continue;
+		}
+		i++;
+	}
+	return null;
+}
+const ATTR_RE = /data-diffing\s*=\s*(["'])([^"']*)\1/gi;
+/** Count how many `data-diffing="<region>"` attributes appear. */
+function countDataDiffingRegion(html, region) {
+	ATTR_RE.lastIndex = 0;
+	let count = 0;
+	let match;
+	while (match = ATTR_RE.exec(html)) if (match[2] === region) count++;
+	return count;
+}
+/**
+* Replace inner HTML of the first element whose `data-diffing` equals `region`.
+* `occurrences` is how many matching attributes existed before the replace.
+*/
+function replaceDataDiffingRegion(html, region, replacement) {
+	if (!region) return {
+		ok: false,
+		error: "region is required"
+	};
+	const occurrences = countDataDiffingRegion(html, region);
+	if (occurrences === 0) return {
+		ok: false,
+		error: `Region "${region}" not found`
+	};
+	ATTR_RE.lastIndex = 0;
+	let match;
+	while (match = ATTR_RE.exec(html)) {
+		if (match[2] !== region) continue;
+		const tag = findOpenTagContaining(html, match.index);
+		if (!tag) return {
+			ok: false,
+			error: `Region "${region}" is not on an element`
+		};
+		if (tag.selfClosing) return {
+			ok: false,
+			error: `Region "${region}" is on a void/self-closing <${tag.name}> — give it a wrapper with inner HTML`
+		};
+		const closeStart = findMatchingClose(html, tag.end, tag.name);
+		if (closeStart === null) return {
+			ok: false,
+			error: `Region "${region}" has no matching </${tag.name}>`
+		};
+		return {
+			ok: true,
+			html: html.slice(0, tag.end) + replacement + html.slice(closeStart),
+			occurrences
+		};
+	}
+	return {
+		ok: false,
+		error: `Region "${region}" not found`
+	};
+}
+//#endregion
 //#region src/lib/mockups.ts
 function mockupSourceDir(storageDir, mockupId) {
 	return join(storageDir, "mockup-sources", mockupId);
 }
-function newId() {
+function newId$1() {
 	return crypto.randomUUID();
 }
 function snapshotScreens(screens) {
 	return screens.map((s) => ({
 		id: s.id,
 		label: s.label,
-		html: s.html
+		html: s.html,
+		stateOf: s.stateOf,
+		flow: s.flow
 	}));
 }
+function snapshotBinding(input) {
+	return {
+		designSystemId: input.designSystemId,
+		designRevision: input.designRevision,
+		mode: input.mode,
+		planId: input.planId,
+		flows: input.flows
+	};
+}
 function backfillMockup(mockup) {
 	const currentVersion = mockup.version ?? 1;
 	const have = Array.isArray(mockup.versions) ? mockup.versions.length : 0;
@@ -1793,6 +1948,11 @@ function applyUpsert(mockups, input, now) {
 			existing.screens = snapshotScreens(input.screens);
 			if (input.source !== void 0) existing.source = input.source;
 			if (input.model !== void 0) existing.model = input.model;
+			if (input.designSystemId !== void 0) existing.designSystemId = input.designSystemId;
+			if (input.designRevision !== void 0) existing.designRevision = input.designRevision;
+			if (input.mode !== void 0) existing.mode = input.mode;
+			if (input.planId !== void 0) existing.planId = input.planId;
+			if (input.flows !== void 0) existing.flows = input.flows;
 			existing.version += 1;
 			existing.updatedAt = now;
 			if (!existing.versions) existing.versions = [];
@@ -1802,7 +1962,8 @@ function applyUpsert(mockups, input, now) {
 				screens: snapshotScreens(existing.screens),
 				source: existing.source,
 				model: existing.model,
-				createdAt: now
+				createdAt: now,
+				...snapshotBinding(existing)
 			});
 			existing.decision = "pending";
 			existing.decisionComment = void 0;
@@ -1811,7 +1972,7 @@ function applyUpsert(mockups, input, now) {
 		}
 	}
 	const mockup = {
-		id: input.id || newId(),
+		id: input.id || newId$1(),
 		title: input.title,
 		screens: snapshotScreens(input.screens),
 		source: input.source,
@@ -1821,13 +1982,15 @@ function applyUpsert(mockups, input, now) {
 		version: 1,
 		decision: "pending",
 		comments: [],
+		...snapshotBinding(input),
 		versions: [{
 			version: 1,
 			title: input.title,
 			screens: snapshotScreens(input.screens),
 			source: input.source,
 			model: input.model,
-			createdAt: now
+			createdAt: now,
+			...snapshotBinding(input)
 		}]
 	};
 	mockups.push(mockup);
@@ -1851,6 +2014,7 @@ function syncCurrentVersion(mockup) {
 	last.screens = snapshotScreens(mockup.screens);
 	last.source = mockup.source;
 	last.model = mockup.model;
+	Object.assign(last, snapshotBinding(mockup));
 }
 function versionMismatch(expected, current) {
 	if (expected === void 0) return void 0;
@@ -1869,7 +2033,8 @@ function bumpMockupVersion(mockup, now) {
 		screens: snapshotScreens(mockup.screens),
 		source: mockup.source,
 		model: mockup.model,
-		createdAt: now
+		createdAt: now,
+		...snapshotBinding(mockup)
 	});
 }
 function applyScreenUpsert(mockup, screen, now) {
@@ -1878,10 +2043,14 @@ function applyScreenUpsert(mockup, screen, now) {
 	if (existing) {
 		existing.html = html;
 		if (screen.label?.trim()) existing.label = screen.label.trim();
+		if (screen.stateOf !== void 0) existing.stateOf = screen.stateOf;
+		if (screen.flow !== void 0) existing.flow = screen.flow;
 	} else mockup.screens.push({
 		id: screen.id,
 		label: screen.label?.trim() || defaultScreenLabel(screen.id),
-		html
+		html,
+		stateOf: screen.stateOf,
+		flow: screen.flow
 	});
 	bumpMockupVersion(mockup, now);
 }
@@ -1892,6 +2061,12 @@ function applyScreenPatch(screen, patch) {
 	screen.html = screen.html.slice(0, idx) + patch.replacement + screen.html.slice(idx + patch.expectedText.length);
 	return count;
 }
+function applyScreenRegion(screen, patch) {
+	const result = replaceDataDiffingRegion(screen.html, patch.region, patch.replacement);
+	if (!result.ok) return { error: result.error };
+	screen.html = result.html;
+	return { occurrences: result.occurrences };
+}
 /** Validate every op against the mockup before applying any (all-or-nothing). */
 function validateThreadBatch(mockup, ops) {
 	const comments = mockup.comments ?? [];
@@ -2318,6 +2493,36 @@ var FileMockupStore = class {
 			occurrences
 		};
 	}
+	async replaceRegion(id, screenId, patch, opts) {
+		const mockups = await this.getAll();
+		const mockup = mockups.find((m) => m.id === id);
+		if (!mockup) return {
+			mockup: null,
+			error: "Mockup not found"
+		};
+		const vm = versionMismatch(opts?.expectedVersion, mockup.version);
+		if (vm) return {
+			mockup: null,
+			versionMismatch: vm
+		};
+		const screen = mockup.screens.find((s) => s.id === screenId);
+		if (!screen) return {
+			mockup: null,
+			error: `Screen ${screenId} not found`
+		};
+		const applied = applyScreenRegion(screen, patch);
+		if ("error" in applied) return {
+			mockup: null,
+			error: applied.error
+		};
+		bumpMockupVersion(mockup, Date.now());
+		await this.writeSourceMirror(mockup);
+		await this.save(mockups);
+		return {
+			mockup,
+			occurrences: applied.occurrences
+		};
+	}
 	async applyThreadBatch(mockupId, ops) {
 		const mockups = await this.getAll();
 		const mockup = mockups.find((m) => m.id === mockupId);
@@ -2594,7 +2799,7 @@ function buildMockupProbeScript(opts = {}) {
   function payloadFor(el, ev, kindOverride) {
     // Nearest named [data-diffing] ancestor only — sections never nest deeper.
     const section = el && el.closest ? el.closest('[data-diffing]') : null;
-    const kind = kindOverride || (tool === 'pin' ? 'point' : tool === 'section' && section ? 'section' : 'block');
+    const kind = kindOverride || ((tool === 'pin' || tool === 'point') ? 'point' : tool === 'section' && section ? 'section' : 'block');
     const hitEl = deepestBlock(el);
     const outlineEl = kind === 'section' && section ? section : hitEl;
     const pt = ev ? pointPct(ev) : { x: 0, y: 0 };
@@ -2705,7 +2910,7 @@ function buildMockupProbeScript(opts = {}) {
 
     shield.addEventListener('mousemove', (ev) => {
       const target = targetAt(ev);
-      if (tool === 'pin') {
+      if (tool === 'pin' || tool === 'point') {
         post('hover', Object.assign(payloadFor(target, ev, 'point'), { kind: 'point' }));
         return;
       }
@@ -2734,7 +2939,7 @@ function buildMockupProbeScript(opts = {}) {
       const dy = ev.clientY - drag.y;
       const dist = Math.hypot(dx, dy);
       drag = null;
-      if (tool === 'pin') {
+      if (tool === 'pin' || tool === 'point') {
         post('click', payloadFor(target, ev, 'point'));
         return;
       }
@@ -2754,11 +2959,18 @@ function buildMockupProbeScript(opts = {}) {
       ev.preventDefault();
       ev.stopPropagation();
     }, true);
-    post('ready', { sections: sections() });
+    post('ready', { sections: sections(), height: docHeight() });
+  }
+
+  function docHeight() {
+    return Math.max(
+      document.documentElement.scrollHeight,
+      document.body ? document.body.scrollHeight : 0,
+    );
   }
 
   function announce() {
-    post('ready', { sections: sections() });
+    post('ready', { sections: sections(), height: docHeight() });
   }
 
   const boot = PASSIVE ? announce : installShield;
@@ -2767,6 +2979,14 @@ function buildMockupProbeScript(opts = {}) {
   } else {
     boot();
   }
+  // Keep the parent's frame height in sync after late-loading media and on
+  // any reflow (the frame is sized to the full document so nothing is cropped).
+  window.addEventListener('load', function () {
+    post('height', { height: docHeight() });
+  });
+  window.addEventListener('resize', function () {
+    post('height', { height: docHeight() });
+  });
 })();`;
 }
 buildMockupProbeScript();
@@ -2786,98 +3006,641 @@ function injectMockupProbe(html, opts = {}) {
 	return script + html;
 }
 //#endregion
-//#region src/lib/mockup-lint.ts
-const RULES$1 = [
-	{
-		label: "tabs",
-		re: /role\s*=\s*["']tab(list|panel)?["']/i
-	},
-	{
-		label: "tabs",
-		re: /aria-selected\s*=/i
-	},
-	{
-		label: "tabs",
-		re: /data-(?:bs-)?toggle\s*=\s*["'](?:tab|pill)["']/i
-	},
-	{
-		label: "tabs",
-		re: /\bdata-tabs?\s*=/i
-	},
-	{
-		label: "accordion",
-		re: /<details[\s>]/i
-	},
-	{
-		label: "accordion",
-		re: /data-(?:bs-)?toggle\s*=\s*["']collapse["']/i
-	},
-	{
-		label: "accordion",
-		re: /class\s*=\s*["'][^"']*\baccordion\b/i
-	},
-	{
-		label: "modal",
-		re: /role\s*=\s*["'](?:alert)?dialog["']/i
-	},
-	{
-		label: "modal",
-		re: /data-(?:bs-)?toggle\s*=\s*["']modal["']/i
-	},
-	{
-		label: "modal",
-		re: /class\s*=\s*["'][^"']*\bmodal\b/i
-	},
-	{
-		label: "dropdown",
-		re: /role\s*=\s*["']menu(?:bar)?["']/i
-	},
-	{
-		label: "dropdown",
-		re: /data-(?:bs-)?toggle\s*=\s*["']dropdown["']/i
-	},
-	{
-		label: "dropdown",
-		re: /class\s*=\s*["'][^"']*\bdropdown\b/i
-	},
-	{
-		label: "toggle",
-		re: /role\s*=\s*["']switch["']/i
-	},
-	{
-		label: "toggle",
-		re: /class\s*=\s*["'][^"']*\b(?:toggle|switch)\b/i
+//#region src/lib/design-system.ts
+function newId() {
+	return crypto.randomUUID();
+}
+function backfill(system) {
+	if (!system.tokens) system.tokens = emptyTokens();
+	if (!system.tokens.raw) system.tokens.raw = {};
+	if (!system.tokens.color) system.tokens.color = {};
+	if (!system.tokens.font) system.tokens.font = {};
+	if (!system.tokens.radius) system.tokens.radius = {};
+	if (!system.tokens.shadow) system.tokens.shadow = {};
+	if (!system.tokens.space) system.tokens.space = {
+		unit: 4,
+		scale: [
+			4,
+			8,
+			12,
+			16,
+			24,
+			32,
+			48
+		]
+	};
+	if (!system.components) system.components = [];
+	if (!system.sources) system.sources = [];
+	if (!system.comments) system.comments = [];
+	if (!system.revisions) system.revisions = [];
+	if (!system.guidelines) system.guidelines = "";
+	if (!system.status) system.status = system.revision > 0 ? "published" : "draft";
+}
+function applyFields(system, input, now) {
+	if (input.title?.trim()) system.title = input.title.trim();
+	if (input.tokens) system.tokens = cloneTokens(input.tokens);
+	if (input.guidelines !== void 0) system.guidelines = input.guidelines;
+	if (input.components) system.components = input.components.map((c) => ({ ...c }));
+	if (input.sources) system.sources = input.sources.map((s) => ({ ...s }));
+	if (input.status) system.status = input.status;
+	system.updatedAt = now;
+}
+var InMemoryDesignSystemStore = class {
+	systems = [];
+	async getAll() {
+		for (const s of this.systems) backfill(s);
+		return this.systems;
 	}
+	async get(id) {
+		const system = this.systems.find((s) => s.id === id) ?? null;
+		if (system) backfill(system);
+		return system;
+	}
+	async getDefault() {
+		const published = this.systems.find((s) => s.id === "default" && s.status === "published");
+		if (published) {
+			backfill(published);
+			return published;
+		}
+		const any = this.systems.find((s) => s.status === "published") ?? this.systems[0];
+		if (any) backfill(any);
+		return any ?? null;
+	}
+	async upsert(input) {
+		const now = Date.now();
+		const id = slugifyDesignId(input.id ?? "default") ?? "default";
+		const existing = this.systems.find((s) => s.id === id);
+		if (existing) {
+			applyFields(existing, input, now);
+			return existing;
+		}
+		const system = {
+			id,
+			title: input.title?.trim() || "Default",
+			revision: 0,
+			status: input.status ?? "draft",
+			tokens: input.tokens ? cloneTokens(input.tokens) : emptyTokens(),
+			guidelines: input.guidelines ?? "",
+			components: (input.components ?? []).map((c) => ({ ...c })),
+			sources: (input.sources ?? []).map((s) => ({ ...s })),
+			createdAt: now,
+			updatedAt: now,
+			revisions: [],
+			comments: []
+		};
+		this.systems.push(system);
+		return system;
+	}
+	async propose(id, input) {
+		const system = await this.get(id);
+		if (!system) return null;
+		applyFields(system, input, Date.now());
+		system.status = "draft";
+		return system;
+	}
+	async publish(id) {
+		const system = await this.get(id);
+		if (!system) return null;
+		const now = Date.now();
+		system.revision += 1;
+		system.status = "published";
+		system.updatedAt = now;
+		system.publishedAt = now;
+		system.revisions.push(snapshotRevision(system));
+		return system;
+	}
+	async remove(id) {
+		const idx = this.systems.findIndex((s) => s.id === id);
+		if (idx === -1) return false;
+		this.systems.splice(idx, 1);
+		return true;
+	}
+	async addComponent(id, component) {
+		const system = await this.get(id);
+		if (!system) return null;
+		const slug = slugifyDesignId(component.id);
+		if (!slug) return null;
+		const next = {
+			...component,
+			id: slug,
+			createdAt: component.createdAt ?? Date.now()
+		};
+		const idx = system.components.findIndex((c) => c.id === slug);
+		if (idx >= 0) system.components[idx] = next;
+		else system.components.push(next);
+		system.updatedAt = Date.now();
+		system.status = "draft";
+		return system;
+	}
+	async removeComponent(id, componentId) {
+		const system = await this.get(id);
+		if (!system) return null;
+		const before = system.components.length;
+		system.components = system.components.filter((c) => c.id !== componentId);
+		if (system.components.length === before) return system;
+		system.updatedAt = Date.now();
+		system.status = "draft";
+		return system;
+	}
+	async addComment(id, comment) {
+		const system = await this.get(id);
+		if (!system) return null;
+		system.comments.push({
+			id: newId(),
+			kind: comment.kind,
+			target: comment.target,
+			body: comment.body,
+			status: comment.status ?? "open",
+			createdAt: Date.now(),
+			replies: []
+		});
+		system.updatedAt = Date.now();
+		return system;
+	}
+	async updateComment(id, commentId, fields) {
+		const system = await this.get(id);
+		if (!system) return null;
+		const comment = system.comments.find((c) => c.id === commentId);
+		if (!comment) return null;
+		if (fields.body !== void 0) comment.body = fields.body;
+		if (fields.status) comment.status = fields.status;
+		system.updatedAt = Date.now();
+		return system;
+	}
+	async addReply(id, commentId, reply) {
+		const system = await this.get(id);
+		if (!system) return null;
+		const comment = system.comments.find((c) => c.id === commentId);
+		if (!comment) return null;
+		comment.replies.push(reply);
+		system.updatedAt = Date.now();
+		return system;
+	}
+};
+var FileDesignSystemStore = class {
+	dirPath;
+	filePath;
+	memory = new InMemoryDesignSystemStore();
+	loaded = false;
+	constructor(storageDir) {
+		this.dirPath = storageDir ?? getProjectStorageDir();
+		this.filePath = join(this.dirPath, "design-system.json");
+	}
+	async load() {
+		if (this.loaded) return;
+		this.loaded = true;
+		try {
+			const raw = await readFile(this.filePath, "utf8");
+			const parsed = JSON.parse(raw);
+			const systems = Array.isArray(parsed.systems) ? parsed.systems : [];
+			this.memory.systems = systems;
+			for (const system of systems) backfill(system);
+		} catch {}
+	}
+	async persist() {
+		await mkdir(this.dirPath, { recursive: true });
+		const systems = await this.memory.getAll();
+		writeJsonAtomically(this.filePath, { systems });
+		try {
+			const tokens = systems.find((s) => s.status === "published") ?? systems[0];
+			if (tokens) {
+				const { tokensToCss } = await import("./design-system-types-QR9xS7o3.mjs");
+				const dir = join(this.dirPath, "design-system");
+				await mkdir(dir, { recursive: true });
+				await writeFile(join(dir, `${tokens.id}.css`), tokensToCss(tokens.tokens), "utf8");
+			}
+		} catch {}
+	}
+	async getAll() {
+		await this.load();
+		return this.memory.getAll();
+	}
+	async get(id) {
+		await this.load();
+		return this.memory.get(id);
+	}
+	async getDefault() {
+		await this.load();
+		return this.memory.getDefault();
+	}
+	async upsert(input) {
+		await this.load();
+		const system = await this.memory.upsert(input);
+		await this.persist();
+		return system;
+	}
+	async propose(id, input) {
+		await this.load();
+		const system = await this.memory.propose(id, input);
+		if (system) await this.persist();
+		return system;
+	}
+	async publish(id) {
+		await this.load();
+		const system = await this.memory.publish(id);
+		if (system) await this.persist();
+		return system;
+	}
+	async remove(id) {
+		await this.load();
+		const ok = await this.memory.remove(id);
+		if (ok) await this.persist();
+		return ok;
+	}
+	async addComponent(id, component) {
+		await this.load();
+		const system = await this.memory.addComponent(id, component);
+		if (system) await this.persist();
+		return system;
+	}
+	async removeComponent(id, componentId) {
+		await this.load();
+		const system = await this.memory.removeComponent(id, componentId);
+		if (system) await this.persist();
+		return system;
+	}
+	async addComment(id, comment) {
+		await this.load();
+		const system = await this.memory.addComment(id, comment);
+		if (system) await this.persist();
+		return system;
+	}
+	async updateComment(id, commentId, fields) {
+		await this.load();
+		const system = await this.memory.updateComment(id, commentId, fields);
+		if (system) await this.persist();
+		return system;
+	}
+	async addReply(id, commentId, reply) {
+		await this.load();
+		const system = await this.memory.addReply(id, commentId, reply);
+		if (system) await this.persist();
+		return system;
+	}
+};
+//#endregion
+//#region src/lib/design-system-extract.ts
+const SKIP_DIRS = new Set([
+	"node_modules",
+	".git",
+	"dist",
+	"build",
+	".next",
+	"coverage",
+	"target",
+	".turbo",
+	".output"
+]);
+const CSS_FILE_RE = /\.(css|scss|sass)$/i;
+const TOKEN_JSON_RE = /(tokens?|theme)\.json$/i;
+const VAR_RE = /--([a-zA-Z0-9_-]+)\s*:\s*([^;]+);/g;
+const COLOR_ALIASES = [
+	[/(?:^|-)(?:bg|background|canvas|surface-0)$/i, "bg"],
+	[/(?:^|-)(?:surface|raised|panel)$/i, "surface"],
+	[/(?:^|-)(?:text|fg|foreground|ink)$/i, "text"],
+	[/(?:^|-)(?:muted|subtle|secondary-text)$/i, "muted"],
+	[/(?:^|-)(?:accent|primary|brand|focus)$/i, "accent"],
+	[/(?:^|-)(?:border|rule|line)$/i, "border"],
+	[/(?:^|-)(?:danger|error|destructive)$/i, "danger"],
+	[/(?:^|-)(?:ok|success)$/i, "ok"],
+	[/(?:^|-)(?:warn|warning)$/i, "warn"]
 ];
-const ORDERED_LABELS = [
-	"tabs",
-	"accordion",
-	"modal",
-	"dropdown",
-	"toggle"
-];
-/** Find the in-page state UI patterns present in one screen's HTML. */
-function detectInPageState(html) {
-	const found = /* @__PURE__ */ new Set();
-	for (const rule of RULES$1) {
-		if (found.has(rule.label)) continue;
-		if (rule.re.test(html)) found.add(rule.label);
-	}
-	return ORDERED_LABELS.filter((label) => found.has(label));
-}
-/** Build submit-time hints for a set of screens (empty when all clean). */
-function lintMockupScreens(screens) {
-	const hints = [];
-	for (const screen of screens) {
-		const patterns = detectInPageState(screen.html);
-		if (patterns.length === 0) continue;
-		hints.push({
-			screenId: screen.id,
-			patterns,
-			message: `Screen "${screen.id}" contains in-page state UI (${patterns.join(", ")}). Split each state into its own screen instead.`
+const FONT_ALIASES = [[/(?:ui|sans|body|text)-?font|font-?(?:ui|sans|body)/i, "ui"], [/(?:mono|code|pre)-?font|font-?(?:mono|code)/i, "mono"]];
+function mapSemantic(name, value, tokens) {
+	const trimmed = value.trim();
+	for (const [re, key] of COLOR_ALIASES) if (re.test(name) && !tokens.color[key]) {
+		tokens.color[key] = trimmed;
+		return;
+	}
+	for (const [re, key] of FONT_ALIASES) if (re.test(name) && !tokens.font[key]) {
+		tokens.font[key] = trimmed.replace(/^["']|["']$/g, "");
+		return;
+	}
+	if (/radius/i.test(name) && !tokens.radius.sm) tokens.radius.sm = trimmed;
+	if (/shadow|elevation/i.test(name) && !tokens.shadow.overlay) tokens.shadow.overlay = trimmed;
+}
+/** Pure: pull custom properties out of a CSS/JSON string. */
+function extractTokensFromText(text) {
+	const tokens = emptyTokens();
+	VAR_RE.lastIndex = 0;
+	let match;
+	while (match = VAR_RE.exec(text)) {
+		const name = match[1];
+		const value = match[2].trim();
+		tokens.raw[`--${name}`] = value;
+		mapSemantic(name, value, tokens);
+	}
+	try {
+		const json = JSON.parse(text);
+		if (json && typeof json === "object") collectJsonTokens(json, tokens, "");
+	} catch {}
+	return tokens;
+}
+function collectJsonTokens(value, tokens, path) {
+	if (!value || typeof value !== "object") return;
+	if (Array.isArray(value)) return;
+	for (const [k, v] of Object.entries(value)) {
+		const next = path ? `${path}-${k}` : k;
+		if (typeof v === "string") {
+			tokens.raw[next] = v;
+			mapSemantic(next, v, tokens);
+		} else if (v && typeof v === "object" && "value" in v) {
+			const inner = v.value;
+			if (typeof inner === "string") {
+				tokens.raw[next] = inner;
+				mapSemantic(next, inner, tokens);
+			}
+		} else collectJsonTokens(v, tokens, next);
+	}
+}
+function mergeTokens(base, extra) {
+	return {
+		color: {
+			...base.color,
+			...extra.color
+		},
+		font: {
+			...base.font,
+			...extra.font
+		},
+		space: extra.space.scale.length ? extra.space : base.space,
+		radius: {
+			...base.radius,
+			...extra.radius
+		},
+		shadow: {
+			...base.shadow,
+			...extra.shadow
+		},
+		raw: {
+			...base.raw,
+			...extra.raw
+		}
+	};
+}
+async function walkFiles(root, dir, out, budget) {
+	if (budget.left <= 0) return;
+	let entries;
+	try {
+		entries = await readdir(dir, { withFileTypes: true });
+	} catch {
+		return;
+	}
+	for (const entry of entries) {
+		if (budget.left <= 0) return;
+		if (entry.name.startsWith(".") && entry.name !== ".") continue;
+		const full = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			if (SKIP_DIRS.has(entry.name)) continue;
+			await walkFiles(root, full, out, budget);
+			continue;
+		}
+		if (!entry.isFile()) continue;
+		if (CSS_FILE_RE.test(entry.name) || TOKEN_JSON_RE.test(entry.name)) {
+			out.push(full);
+			budget.left -= 1;
+		}
+	}
+}
+/** Scan a repo for CSS variables / token JSON. Bounded and skippable. */
+async function extractFromRepo(repoRoot, opts) {
+	const files = [];
+	await walkFiles(repoRoot, repoRoot, files, { left: opts?.maxFiles ?? 80 });
+	let tokens = emptyTokens();
+	const hits = [];
+	const sources = [];
+	for (const file of files) {
+		let text = "";
+		try {
+			text = await readFile(file, "utf8");
+		} catch {
+			continue;
+		}
+		const extracted = extractTokensFromText(text);
+		const count = Object.keys(extracted.raw).length;
+		if (count === 0) continue;
+		tokens = mergeTokens(tokens, extracted);
+		const rel = relative(repoRoot, file) || file;
+		hits.push({
+			path: rel,
+			count
+		});
+		sources.push({
+			kind: "css-vars",
+			path: rel
 		});
 	}
-	return hints;
+	return {
+		tokens,
+		sources,
+		files: hits
+	};
+}
+//#endregion
+//#region src/lib/mockup-shell.ts
+const MOCKUP_SLOT = "data-diffing-slot";
+const RESET_CSS = `*,*::before,*::after{box-sizing:border-box}
+html,body{margin:0;padding:0;background:var(--ds-color-bg,#fff);color:var(--ds-color-text,#111);font-family:var(--ds-font-ui,ui-sans-serif,system-ui,sans-serif);line-height:1.45}
+img,svg,video{max-width:100%;display:block}
+button,input,select,textarea{font:inherit}
+`;
+function appShell(components, inner) {
+	const shell = components?.find((c) => c.id === "app-shell");
+	if (!shell?.html) return `<main ${MOCKUP_SLOT}="content" data-diffing="content">${inner}</main>`;
+	if (shell.html.includes("{{content}}") || shell.html.includes("data-diffing-slot=\"content\"")) return shell.html.replace("{{content}}", inner).replace(new RegExp(`(<[^>]+${MOCKUP_SLOT}=["']content["'][^>]*>)([\\s\\S]*?)(</[^>]+>)`), `$1${inner}$3`);
+	return `${shell.html}<main ${MOCKUP_SLOT}="content" data-diffing="content">${inner}</main>`;
+}
+/** Wrap a fragment in the host document. Stored HTML stays unwrapped. */
+function wrapMockupFragment(fragment, opts) {
+	const theme = opts.theme ?? "light";
+	const css = `${RESET_CSS}\n${tokensToCss(opts.tokens)}`;
+	const body = appShell(opts.components, fragment);
+	return `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>${escapeHtml(opts.title ?? "Mockup")}</title>
+<style>${css}</style>
+</head>
+<body>
+${body}
+</body>
+</html>
+`;
+}
+function resolveRenderMode(requested, system) {
+	if (requested === "document" || requested === "fragment") return requested;
+	return system && system.status === "published" ? "fragment" : "document";
+}
+function renderMockupHtml(html, opts) {
+	if (opts.mode !== "fragment" || !opts.system) return html;
+	if (/<!doctype\s+html|<html[\s>]/i.test(html)) return html;
+	return wrapMockupFragment(html, {
+		tokens: opts.system.tokens,
+		components: opts.system.components,
+		title: opts.title,
+		theme: opts.theme
+	});
+}
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+//#endregion
+//#region src/lib/mockup-preview.ts
+const execFileAsync = promisify(execFile);
+const VIEWPORT_WIDTH = {
+	desktop: 1280,
+	tablet: 768,
+	mobile: 390
+};
+function analyzeMockupHtml(html) {
+	const missingImages = [];
+	const imgRe = /<img\b[^>]*>/gi;
+	let match;
+	while (match = imgRe.exec(html)) {
+		const tag = match[0];
+		const src = /\bsrc\s*=\s*(["'])([^"']*)\1/i.exec(tag)?.[2] ?? "";
+		if (!src || src === "#" || src.startsWith("about:")) missingImages.push(src || "(empty)");
+	}
+	const externalStylesheets = [...html.matchAll(/<link\b[^>]*rel=["']stylesheet["'][^>]*>/gi)].map((m) => /\bhref\s*=\s*(["'])([^"']*)\1/i.exec(m[0])?.[2] ?? "").filter((href) => /^https?:/i.test(href));
+	const notes = [];
+	if (/overflow:\s*visible/i.test(html) && /white-space:\s*nowrap/i.test(html)) notes.push("Possible overflow: nowrap + visible overflow");
+	if (html.length > 2e5) notes.push("Screen HTML is large; prefer fragments");
+	return {
+		missingImages,
+		externalStylesheets,
+		notes
+	};
+}
+async function findChrome() {
+	const names = process.platform === "darwin" ? ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", "/Applications/Chromium.app/Contents/MacOS/Chromium"] : process.platform === "win32" ? [] : [
+		"google-chrome",
+		"chromium",
+		"chromium-browser",
+		"google-chrome-stable"
+	];
+	for (const name of names) try {
+		if (name.startsWith("/")) {
+			await execFileAsync(name, ["--version"], { timeout: 4e3 });
+			return name;
+		}
+		const { stdout } = await execFileAsync("which", [name], { timeout: 4e3 });
+		const path = stdout.trim();
+		if (path) return path;
+	} catch {}
+	return null;
+}
+async function renderMockupPreview(html, opts = {}) {
+	const viewport = opts.viewport ?? "desktop";
+	const width = VIEWPORT_WIDTH[viewport];
+	const report = analyzeMockupHtml(html);
+	let chrome = null;
+	try {
+		chrome = await findChrome();
+	} catch {
+		chrome = null;
+	}
+	if (!chrome) return {
+		available: false,
+		reason: "No Chrome/Chromium on PATH — layout report only",
+		viewport,
+		width,
+		report
+	};
+	const dir = await mkdtemp(join(tmpdir(), "diffing-preview-"));
+	const htmlPath = join(dir, "screen.html");
+	const pngPath = join(dir, "screen.png");
+	try {
+		await writeFile(htmlPath, html, "utf8");
+		await execFileAsync(chrome, [
+			"--headless=new",
+			"--disable-gpu",
+			"--hide-scrollbars",
+			`--window-size=${width},900`,
+			`--screenshot=${pngPath}`,
+			`file://${htmlPath}`
+		], { timeout: 2e4 });
+		return {
+			available: true,
+			screenshotBase64: (await readFile(pngPath)).toString("base64"),
+			mime: "image/png",
+			viewport,
+			width,
+			report
+		};
+	} catch (err) {
+		return {
+			available: false,
+			reason: err instanceof Error ? err.message : "Screenshot failed",
+			viewport,
+			width,
+			report
+		};
+	} finally {
+		await rm(dir, {
+			recursive: true,
+			force: true
+		}).catch(() => void 0);
+	}
+}
+//#endregion
+//#region src/lib/mockup-handoff.ts
+function buildMockupHandoff(mockup, system) {
+	const used = /* @__PURE__ */ new Set();
+	const blob = mockup.screens.map((s) => s.html).join("\n");
+	for (const component of system?.components ?? []) if (blob.includes(`data-diffing="${component.id}"`) || blob.includes(component.id)) used.add(component.id);
+	const openNits = (mockup.comments ?? []).filter((c) => c.status === "open").map((c) => ({
+		id: c.id,
+		screenId: c.screenId,
+		body: c.body
+	}));
+	return {
+		mockupId: mockup.id,
+		title: mockup.title,
+		version: mockup.version,
+		decision: mockup.decision,
+		designSystemId: mockup.designSystemId ?? system?.id,
+		designRevision: mockup.designRevision ?? system?.revision,
+		mode: mockup.mode,
+		planId: mockup.planId,
+		tokens: system?.tokens,
+		tokenCss: system ? tokensToCss(system.tokens) : void 0,
+		componentsUsed: [...used],
+		screens: mockup.screens.map((s) => ({
+			id: s.id,
+			label: s.label,
+			stateOf: s.stateOf,
+			flow: s.flow,
+			intent: s.stateOf ? `${s.label} (state of ${s.stateOf})` : s.label
+		})),
+		openNits,
+		guidance: "This is a mockup. Match feel (type, color, density, chrome) — not class names or a pixel grid."
+	};
+}
+function formatMockupHandoffXml(handoff) {
+	const screens = handoff.screens.map((s) => `    <screen id="${escape(s.id)}" label="${escape(s.label)}"${s.stateOf ? ` state-of="${escape(s.stateOf)}"` : ""}${s.flow ? ` flow="${escape(s.flow)}"` : ""}>${escape(s.intent)}</screen>`).join("\n");
+	const nits = handoff.openNits.length === 0 ? "" : `    <open-nits>\n${handoff.openNits.map((n) => `      <nit id="${escape(n.id)}" screen="${escape(n.screenId)}">${escape(n.body)}</nit>`).join("\n")}\n    </open-nits>\n`;
+	return `<mockup-handoff>
+  <mockup id="${escape(handoff.mockupId)}" title="${escape(handoff.title)}" version="${handoff.version}" decision="${escape(handoff.decision)}"${handoff.designSystemId ? ` design-system="${escape(handoff.designSystemId)}"` : ""}${handoff.designRevision ? ` design-revision="${handoff.designRevision}"` : ""}${handoff.mode ? ` mode="${escape(handoff.mode)}"` : ""}${handoff.planId ? ` plan="${escape(handoff.planId)}"` : ""}>
+    <guidance>${escape(handoff.guidance)}</guidance>
+    <screens>
+${screens}
+    </screens>
+${nits}  </mockup>
+</mockup-handoff>`;
+}
+function escape(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+//#endregion
+//#region src/lib/mockup-suggestion.ts
+const SUGGESTION_RE = /```suggestion\n([\s\S]*?)```/;
+function extractSuggestion(body) {
+	const match = SUGGESTION_RE.exec(body);
+	if (!match) return null;
+	const text = match[1].replace(/\n$/, "");
+	return text.length > 0 ? text : null;
 }
 //#endregion
 //#region src/lib/state.ts
@@ -4378,7 +5141,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 	bindHost: "127.0.0.1",
 	authToken: null,
 	insecureNoAuth: true
-}, mockupStore) {
+}, mockupStore, designSystemStore) {
 	const app = new Hono();
 	app.use("*", createServerAuthMiddleware(security));
 	let diffOpts = { ...diffOptsInput };
@@ -4386,6 +5149,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 	const store = commentStore ?? new FileCommentStore();
 	const plans = planStore ?? new FilePlanStore();
 	const mockups = mockupStore ?? new FileMockupStore();
+	const designSystems = designSystemStore ?? new FileDesignSystemStore();
 	const prStore = prSessionStore ?? new FilePrSessionStore();
 	const agentDiffCache = new AgentDiffIndexCache();
 	const uiStateStore = new FileUiStateStore();
@@ -4440,6 +5204,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		let commentsDebounce = null;
 		let plansDebounce = null;
 		let mockupsDebounce = null;
+		let designSystemDebounce = null;
 		let prSessionDebounce = null;
 		watch(storageDir, (_eventType, filename) => {
 			if (!filename) return;
@@ -4452,6 +5217,9 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 			} else if (filename.startsWith("mockups.json")) {
 				if (mockupsDebounce) clearTimeout(mockupsDebounce);
 				mockupsDebounce = setTimeout(() => broadcast("mockups", Date.now().toString()), 120);
+			} else if (filename.startsWith("design-system.json")) {
+				if (designSystemDebounce) clearTimeout(designSystemDebounce);
+				designSystemDebounce = setTimeout(() => broadcast("design-system", Date.now().toString()), 120);
 			} else if (filename.startsWith("pr-session.json")) {
 				if (prSessionDebounce) clearTimeout(prSessionDebounce);
 				prSessionDebounce = setTimeout(() => broadcast("pr-session", Date.now().toString()), 120);
@@ -5119,7 +5887,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 			if (!relPath) return c.json({ error: "Forbidden file path" }, 403);
 			const absolutePath = resolve(root, relPath);
 			const content = await readFile(absolutePath, "utf-8");
-			const { applySuggestionToContent } = await import("./apply-suggestion-BsR_8FXW.mjs");
+			const { applySuggestionToContent } = await import("./apply-suggestion-tLsWREyb.mjs");
 			const result = applySuggestionToContent({
 				content,
 				lineNumber: comment.lineNumber,
@@ -5366,7 +6134,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		const session = await prStore.get();
 		if (!session) return notInPrMode(c);
 		try {
-			const { fetchPrChecks } = await import("./github--rpPZ3vK.mjs");
+			const { fetchPrChecks } = await import("./github-BuBcy-co.mjs");
 			const checks = await fetchPrChecks(resolvedFromSession(session), session.headSha);
 			const summary = {
 				total: checks.length,
@@ -5398,7 +6166,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		const text = typeof body.body === "string" ? body.body.trim() : "";
 		if (!text) return c.json({ error: "body is required" }, 400);
 		try {
-			const { replyToPrComment } = await import("./github--rpPZ3vK.mjs");
+			const { replyToPrComment } = await import("./github-BuBcy-co.mjs");
 			const result = await replyToPrComment({
 				resolved: resolvedFromSession(session),
 				inReplyTo: id,
@@ -5611,8 +6379,8 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		if (decision !== "approve" && decision !== "comment" && decision !== "request-changes" && decision !== "draft") return c.json({ error: "decision must be one of: approve, comment, request-changes, draft" }, 400);
 		const generalBody = typeof body.body === "string" ? body.body : "";
 		if (body.dryRun === true) {
-			const { buildReviewPayload, resolvedFromSession } = await import("./github--rpPZ3vK.mjs");
-			const { rewriteLocalAttachmentsInBodies } = await import("./github-attachments-DEvAeo5P.mjs");
+			const { buildReviewPayload, resolvedFromSession } = await import("./github-BuBcy-co.mjs");
+			const { rewriteLocalAttachmentsInBodies } = await import("./github-attachments-Bwr25ItV.mjs");
 			const resolved = resolvedFromSession(session);
 			const comments = session.comments ?? [];
 			const rewritten = await rewriteLocalAttachmentsInBodies(resolved, [generalBody, ...comments.map((c) => c.body ?? "")], { dryRun: true });
@@ -5709,7 +6477,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		const openCount = all.filter((x) => x.status === "open").length;
 		let diffFingerprints;
 		try {
-			const { fingerprintDiffFiles } = await import("./diff-fingerprint-BL5jNHnP.mjs");
+			const { fingerprintDiffFiles } = await import("./diff-fingerprint-PnC8Fs1-.mjs");
 			if (prMode) {
 				const prSession = await prStore.get();
 				if (prSession?.diff) diffFingerprints = fingerprintDiffFiles(prSession.diff);
@@ -5777,7 +6545,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		} catch (err) {
 			return c.json({ error: err?.message ?? "Failed to compute current diff" }, 500);
 		}
-		const { fingerprintDiffFiles, diffSinceLast, filesToReviewSinceLast } = await import("./diff-fingerprint-BL5jNHnP.mjs");
+		const { fingerprintDiffFiles, diffSinceLast, filesToReviewSinceLast } = await import("./diff-fingerprint-PnC8Fs1-.mjs");
 		const delta = diffSinceLast(previous, fingerprintDiffFiles(currentPatch));
 		return c.json({
 			hasBaseline: true,
@@ -5961,6 +6729,152 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 	app.get("/api/plan-review/status", (c) => {
 		return c.json(planReviewSession.snapshot());
 	});
+	async function resolveDesignSystem(id, revision) {
+		if (!id) return designSystems.getDefault();
+		const system = await designSystems.get(id);
+		if (!system) return null;
+		if (revision && system.revisions?.length) {
+			const snap = system.revisions.find((r) => r.revision === revision);
+			if (snap) return {
+				...system,
+				revision: snap.revision,
+				status: snap.status,
+				title: snap.title,
+				tokens: snap.tokens,
+				guidelines: snap.guidelines,
+				components: snap.components,
+				sources: snap.sources
+			};
+		}
+		return system;
+	}
+	app.get("/api/design-systems", async (c) => {
+		return c.json(await designSystems.getAll());
+	});
+	app.get("/api/design-systems/default", async (c) => {
+		const system = await designSystems.getDefault();
+		if (!system) return c.json({ error: "No design system" }, 404);
+		return c.json(system);
+	});
+	app.get("/api/design-systems/:id", async (c) => {
+		const system = await designSystems.get(c.req.param("id"));
+		if (!system) return c.json({ error: "Design system not found" }, 404);
+		return c.json(system);
+	});
+	app.post("/api/design-systems", async (c) => {
+		const body = await c.req.json().catch(() => ({}));
+		const system = await designSystems.upsert({
+			id: typeof body.id === "string" ? body.id : DEFAULT_DESIGN_SYSTEM_ID,
+			title: typeof body.title === "string" ? body.title : void 0,
+			tokens: body.tokens,
+			guidelines: typeof body.guidelines === "string" ? body.guidelines : void 0,
+			sources: Array.isArray(body.sources) ? body.sources : void 0,
+			status: body.status === "published" ? "published" : "draft"
+		});
+		broadcast("design-system", Date.now().toString());
+		return c.json(system, 201);
+	});
+	app.put("/api/design-systems/:id", async (c) => {
+		const body = await c.req.json().catch(() => ({}));
+		if (!await designSystems.get(c.req.param("id"))) return c.json({ error: "Design system not found" }, 404);
+		const system = await designSystems.propose(c.req.param("id"), {
+			title: typeof body.title === "string" ? body.title : void 0,
+			tokens: body.tokens,
+			guidelines: typeof body.guidelines === "string" ? body.guidelines : void 0,
+			components: Array.isArray(body.components) ? body.components : void 0,
+			sources: Array.isArray(body.sources) ? body.sources : void 0
+		});
+		broadcast("design-system", Date.now().toString());
+		return c.json(system);
+	});
+	app.post("/api/design-systems/:id/publish", async (c) => {
+		const system = await designSystems.publish(c.req.param("id"));
+		if (!system) return c.json({ error: "Design system not found" }, 404);
+		broadcast("design-system", Date.now().toString());
+		return c.json(system);
+	});
+	app.post("/api/design-systems/:id/extract", async (c) => {
+		const body = await c.req.json().catch(() => ({}));
+		const from = typeof body.from === "string" ? body.from : "css";
+		let extracted;
+		if (from === "text" && typeof body.text === "string") extracted = {
+			tokens: extractTokensFromText(body.text),
+			sources: [{
+				kind: "css-vars",
+				path: "paste"
+			}],
+			files: []
+		};
+		else if (from === "url" && typeof body.url === "string") {
+			const url = body.url;
+			if (!/^https?:\/\/(127\.0\.0\.1|localhost|\[::1\])/i.test(url)) return c.json({ error: "Capture URL must be a local http(s) address" }, 400);
+			const res = await fetch(url).catch(() => null);
+			const text = res && res.ok ? await res.text() : "";
+			extracted = {
+				tokens: extractTokensFromText(text),
+				sources: [{
+					kind: "url",
+					url
+				}],
+				files: text ? [{
+					path: url,
+					count: Object.keys(extractTokensFromText(text).raw).length
+				}] : []
+			};
+		} else extracted = await extractFromRepo(repoRoot);
+		const id = c.req.param("id");
+		const system = await designSystems.get(id) ? await designSystems.propose(id, {
+			tokens: extracted.tokens,
+			sources: extracted.sources
+		}) : await designSystems.upsert({
+			id,
+			title: typeof body.title === "string" ? body.title : "Default",
+			tokens: extracted.tokens,
+			sources: extracted.sources,
+			status: "draft"
+		});
+		broadcast("design-system", Date.now().toString());
+		return c.json({
+			system,
+			extract: extracted
+		});
+	});
+	app.post("/api/design-systems/:id/components", async (c) => {
+		const body = await c.req.json().catch(() => ({}));
+		if (typeof body.id !== "string" || typeof body.html !== "string") return c.json({ error: "id and html are required" }, 400);
+		const system = await designSystems.addComponent(c.req.param("id"), {
+			id: body.id,
+			label: typeof body.label === "string" ? body.label : body.id,
+			html: body.html,
+			source: body.source === "promote" ? "promote" : "human"
+		});
+		if (!system) return c.json({ error: "Design system not found" }, 404);
+		broadcast("design-system", Date.now().toString());
+		return c.json(system);
+	});
+	app.post("/api/design-systems/:id/comments", async (c) => {
+		const body = await c.req.json().catch(() => ({}));
+		if (typeof body.body !== "string" || !body.body.trim()) return c.json({ error: "body is required" }, 400);
+		const kind = body.kind === "token" || body.kind === "component" || body.kind === "guidelines" ? body.kind : "general";
+		const system = await designSystems.addComment(c.req.param("id"), {
+			kind,
+			target: typeof body.target === "string" ? body.target : void 0,
+			body: body.body
+		});
+		if (!system) return c.json({ error: "Design system not found" }, 404);
+		broadcast("design-system", Date.now().toString());
+		return c.json(system);
+	});
+	app.put("/api/design-systems/:id/comments/:commentId", async (c) => {
+		const body = await c.req.json().catch(() => ({}));
+		const system = await designSystems.updateComment(c.req.param("id"), c.req.param("commentId"), {
+			body: typeof body.body === "string" ? body.body : void 0,
+			status: body.status === "resolved" || body.status === "open" ? body.status : void 0
+		});
+		if (!system) return c.json({ error: "Not found" }, 404);
+		broadcast("design-system", Date.now().toString());
+		return c.json(system);
+	});
 	const summarizeMockup = (mockup, includeComments = false) => ({
 		id: mockup.id,
 		title: mockup.title,
@@ -5981,6 +6895,8 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 			open: mockup.comments.filter((comment) => comment.status === "open").length,
 			resolved: mockup.comments.filter((comment) => comment.status === "resolved").length
 		},
+		designSystemId: mockup.designSystemId,
+		planId: mockup.planId,
 		...includeComments ? { comments: mockup.comments } : {}
 	});
 	app.get("/api/mockups", async (c) => {
@@ -6045,7 +6961,17 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 			version: versionN,
 			viewport
 		});
-		return c.html(injectMockupProbe(screen.html, {
+		const snapBinding = snap;
+		const mode = snapBinding.mode ?? mockup.mode ?? "document";
+		const theme = c.req.query("theme") === "dark" ? "dark" : "light";
+		const system = await resolveDesignSystem(snapBinding.designSystemId ?? mockup.designSystemId, snapBinding.designRevision ?? mockup.designRevision);
+		const rendered = renderMockupHtml(screen.html, {
+			mode,
+			system,
+			title: mockup.title,
+			theme
+		});
+		return c.html(injectMockupProbe(rendered, {
 			nonce,
 			viewport,
 			passive
@@ -6060,7 +6986,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		const mockup = await mockups.get(c.req.param("id"));
 		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
 		const view = c.req.query("view") || "summary";
-		if (view !== "summary" && view !== "comments" && view !== "comment" && view !== "screen") return c.json({ error: "view must be summary|comments|comment|screen" }, 400);
+		if (view !== "summary" && view !== "comments" && view !== "comment" && view !== "screen" && view !== "preview") return c.json({ error: "view must be summary|comments|comment|screen|preview" }, 400);
 		const status = c.req.query("status");
 		if (status !== void 0 && status !== "open" && status !== "resolved") return c.json({ error: "status must be open or resolved" }, 400);
 		const screenFilter = c.req.query("screen");
@@ -6108,6 +7034,26 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 				}
 			});
 		}
+		if (view === "preview") {
+			const screenId = c.req.query("screen") || mockup.screens[0]?.id;
+			const screen = mockup.screens.find((s) => s.id === screenId);
+			if (!screen) return c.json({ error: "Screen not found" }, 404);
+			const viewport = normalizeMockupViewport(c.req.query("viewport"));
+			const theme = c.req.query("theme") === "dark" ? "dark" : "light";
+			const system = await resolveDesignSystem(mockup.designSystemId, mockup.designRevision);
+			const preview = await renderMockupPreview(renderMockupHtml(screen.html, {
+				mode: mockup.mode ?? "document",
+				system,
+				title: mockup.title,
+				theme
+			}), { viewport });
+			return c.json({
+				view: "preview",
+				mockupId: mockup.id,
+				screenId: screen.id,
+				...preview
+			});
+		}
 		if (view === "comment") {
 			const id = c.req.query("id");
 			if (!id) return c.json({ error: "id is required for view=comment" }, 400);
@@ -6186,6 +7132,10 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 			error: result.error,
 			code: "exact-text-not-found"
 		}, 409);
+		if (result.error?.includes("not found") && result.error.startsWith("Region ")) return c.json({
+			error: result.error,
+			code: "region-not-found"
+		}, 409);
 		if (result.error === "Mockup not found" || result.error?.endsWith("not found")) return c.json({ error: result.error }, 404);
 		return c.json({ error: result.error ?? "Screen operation failed" }, 400);
 	};
@@ -6217,14 +7167,26 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		const mockupId = c.req.param("id");
 		const screenId = c.req.param("screenId");
 		const body = await c.req.json().catch(() => ({}));
+		const expectedVersion = Number.isFinite(body.expectedVersion) ? Number(body.expectedVersion) : void 0;
+		const region = typeof body.region === "string" ? body.region.trim() : "";
+		if (region) {
+			if (typeof body.replacement !== "string") return c.json({ error: "replacement is required" }, 400);
+			const result = await mockups.replaceRegion(mockupId, screenId, {
+				region,
+				replacement: body.replacement
+			}, { expectedVersion });
+			if (!result.mockup) return screenOpError(c, result);
+			return c.json({
+				mockup: result.mockup,
+				occurrences: result.occurrences
+			}, 200);
+		}
 		const expectedText = typeof body.expectedText === "string" ? body.expectedText : "";
-		const replacement = typeof body.replacement === "string" ? body.replacement : "";
-		if (!expectedText) return c.json({ error: "expectedText is required" }, 400);
+		if (!expectedText) return c.json({ error: "expectedText or region is required" }, 400);
 		if (typeof body.replacement !== "string") return c.json({ error: "replacement is required" }, 400);
-		const expectedVersion = Number.isFinite(body.expectedVersion) ? Number(body.expectedVersion) : void 0;
 		const result = await mockups.patchScreen(mockupId, screenId, {
 			expectedText,
-			replacement
+			replacement: body.replacement
 		}, { expectedVersion });
 		if (!result.mockup) return screenOpError(c, result);
 		return c.json({
@@ -6262,15 +7224,38 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 	});
 	app.post("/api/mockups", async (c) => {
 		const body = await c.req.json().catch(() => ({}));
+		if (typeof body.fromMockupId === "string") {
+			const source = await mockups.get(body.fromMockupId);
+			if (!source) return c.json({ error: "Source mockup not found" }, 404);
+			body.screens = source.screens.map((s) => ({
+				id: s.id,
+				label: s.label,
+				html: s.html,
+				stateOf: s.stateOf,
+				flow: s.flow
+			}));
+			if (!body.designSystemId && !body.designSystem) body.designSystemId = source.designSystemId;
+			if (!body.mode) body.mode = source.mode;
+			if (!body.flows) body.flows = source.flows;
+		} else if (body.blank === true && !body.html && !body.screens) body.html = "";
+		if (body.blank === true && body.html === "") body.html = "<!-- empty -->";
 		const normalized = screensFromSubmitBody(body);
 		if (!normalized.ok) return c.json({ error: normalized.error }, 400);
 		const title = typeof body.title === "string" && body.title.trim() ? body.title.trim() : "Untitled mockup";
+		const requestedMode = body.mode;
+		const system = await resolveDesignSystem(typeof body.designSystem === "string" ? body.designSystem : typeof body.designSystemId === "string" ? body.designSystemId : void 0);
+		const mode = resolveRenderMode(requestedMode, system);
 		const mockup = await mockups.upsert({
 			id: typeof body.id === "string" && body.id ? body.id : void 0,
 			title,
 			screens: normalized.screens,
 			source: typeof body.source === "string" ? body.source : void 0,
-			model: typeof body.model === "string" ? body.model : void 0
+			model: typeof body.model === "string" ? body.model : void 0,
+			designSystemId: system?.id,
+			designRevision: system?.revision,
+			mode,
+			planId: typeof body.planId === "string" ? body.planId : void 0,
+			flows: Array.isArray(body.flows) ? body.flows : void 0
 		});
 		const hints = lintMockupScreens(normalized.screens);
 		return c.json(hints.length > 0 ? {
@@ -6296,6 +7281,37 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		if (!updated) return c.json({ error: "Mockup not found" }, 404);
 		return c.json(updated);
 	});
+	app.get("/api/mockups/:id/handoff", async (c) => {
+		const mockup = await mockups.get(c.req.param("id"));
+		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
+		const handoff = buildMockupHandoff(mockup, await resolveDesignSystem(mockup.designSystemId, mockup.designRevision));
+		return c.json({
+			...handoff,
+			xml: formatMockupHandoffXml(handoff)
+		});
+	});
+	app.post("/api/mockups/:id/comments/:commentId/apply-suggestion", async (c) => {
+		const mockup = await mockups.get(c.req.param("id"));
+		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
+		const comment = mockup.comments.find((x) => x.id === c.req.param("commentId"));
+		if (!comment) return c.json({ error: "Comment not found" }, 404);
+		const suggestion = extractSuggestion(comment.body);
+		if (!suggestion) return c.json({ error: "No ```suggestion block in comment" }, 400);
+		const reqBody = await c.req.json().catch(() => ({}));
+		const expectedVersion = Number.isFinite(reqBody.expectedVersion) ? Number(reqBody.expectedVersion) : mockup.version;
+		let result;
+		if (comment.target) result = await mockups.replaceRegion(mockup.id, comment.screenId, {
+			region: comment.target,
+			replacement: suggestion
+		}, { expectedVersion });
+		else if (comment.html) result = await mockups.patchScreen(mockup.id, comment.screenId, {
+			expectedText: comment.html,
+			replacement: suggestion
+		}, { expectedVersion });
+		else return c.json({ error: "Comment has no target or html to replace" }, 400);
+		if (!result.mockup) return screenOpError(c, result);
+		return c.json(result.mockup);
+	});
 	app.delete("/api/mockups/:id", async (c) => {
 		if (!await mockups.remove(c.req.param("id"))) return c.json({ error: "Mockup not found" }, 404);
 		return c.json({ ok: true });
@@ -6318,6 +7334,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		}
 		if (typeof body.body !== "string" || !body.body.trim()) return c.json({ error: "body is required" }, 400);
 		const viewport = normalizeMockupViewport(body.viewport);
+		const theme = body.theme === "dark" ? "dark" : "light";
 		const severityRaw = body.severity;
 		const severity = severityRaw === "blocking" || severityRaw === "nit" || severityRaw === "question" || severityRaw === "praise" || severityRaw === "none" ? severityRaw : void 0;
 		const rect = body.rect && typeof body.rect === "object" ? body.rect : void 0;
@@ -6346,6 +7363,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 			createdAt: Date.now(),
 			createdAtMockupVersion: Number.isFinite(body.createdAtMockupVersion) ? Number(body.createdAtMockupVersion) : mockup.version,
 			viewport,
+			theme,
 			replies: [],
 			...severity && severity !== "none" ? { severity } : {}
 		};