page-agent-sdk 4.5.0 → 4.7.0

package/dist/page-agent-sdk.headless.js

@@ -3024,7 +3024,7 @@ function Sa(e) {
 }
 function Ca(e, t) {
 	let n = t || {};
-	if (e === "query_data") return [Sa(String(n.expr || ""))];
+	if (e === "query_data") return (Array.isArray(n.queries) && n.queries.length ? n.queries.map(String) : [String(n.expr || "")]).map((e) => Sa(e));
 	if (e === "search_data") return [pa];
 	let r = [];
 	if (typeof n.jsonPath == "string" && n.jsonPath && r.push(n.jsonPath), Array.isArray(n.jsonPaths)) for (let e of n.jsonPaths) typeof e == "string" && e && r.push(e);
@@ -3072,7 +3072,7 @@ function wa(e) {
 }
 function Ta(e, t, n, r) {
 	let i = e.map(ya).join("、"), a = [...new Set(n.flatMap((e) => e.paths))].map(ya).join("、"), o = [`⏱[过期快照] 此前读取 ${i} 的结果已失效(${r === void 0 ? `已写入 ${a}` : `第 ${r} 轮写入了 ${a}`})。`];
-	return n.some((e) => e.hasPostValue) ? o.push(`该轮写入结果已含 ${a} 最新值与新 hash;${i} 的兄弟子树(未触及部分)仍为读取时原值可参考。`) : o.push(`${i} 的兄弟子树(未触及部分)仍为读取时原值可参考。`), t === "query_data" || t === "search_data" ? o.push(`需当前结果时重跑 ${t}(表达式/条件不变即可)。`) : o.push(`需当前精确值时再 read(建议窄读:${i})。`), o.join("\n");
+	return n.some((e) => e.hasPostValue) ? o.push(`该轮写入结果已含 ${a} 最新值与新 hash,直接引用即可;原读取结果整体已过期,未提及路径需引用时按下方指引重读/重跑。`) : o.push("原读取结果整体已过期(含未触及的兄弟路径),需引用时按下方指引重读/重跑。"), t === "query_data" || t === "search_data" ? o.push(`需当前结果时重跑 ${t}(表达式/条件不变即可)。`) : o.push(`需当前精确值时再 read(建议窄读:${i})。`), o.join("\n");
 }
 function Ea(e, t, n = {}) {
 	let r = n.maxParallelTools ?? 1, i = t.map((e) => wa(e)).filter((e) => e !== null);
@@ -4777,17 +4777,18 @@ var ds = {
 		subagent: !1
 	} }
 };
-function fs(e, t = "code") {
-	let n = `use_${e}`;
+function fs(e, t = "code", n = !0) {
+	let r = `use_${e}`;
 	return [
-		`【先判意图(防长对话误路由)】先判断用户是「问」还是「要生成/改」:**提问类**(这是什么组件/怎么用/某字段什么意思/为什么这样/解释代码)→ 用 read / list_components / rag_component_docs **直接回答**,绝不委派 ${n};**生成/修改类**(做一个/生成/改成/加一个 XX 组件)才按下面纪律委派 ${n}。长对话里上文全是生成记录时尤须警惕,不要把新问题当成延续旧任务。`,
-		`【多方案征询=先文本】用户要「出几套/两套方案我来选」「给几个选择」「先出方案看看」→ **本轮只出文本方案**(每套一两句:布局/配色/交互差异),经 request_human_confirmation 的 options 让用户点选(或等用户回复选定);**选定后才**委派 ${n} 建所选方案。禁止先并发多个子 agent 把每套方案都生成出来再让用户挑(子 agent 产物当不了选项清单,且烧 token;真 LLM 实测踩过:「出两套方案」被路由成两个 use_${e} 委派)。`,
-		`【执行纪律(最重要)】收到代码组件任务后:**新建类直接委派**(追加组件无需通读/翻页现有数组,子 agent 自会采样一个组件看结构;**新建组件由子 agent 全权创建** —— 它自己把整个组件(含 ${t})写进数组,你不需要也不能替它创建/追加/落地代码)→ 修改类才 read 定位(by name)→ 调 ${n} 委派 → read 核对 → 回复用户。**中间绝不输出过渡性文字** —— 「我先看看…」「稍后委派」「接下来我会…」这类计划性回复等于任务没做就结束了(回复即本轮终止);所有调研和委派在本轮内连续完成,完成后才回复总结。`,
+		`【先判意图(防长对话误路由)】先判断用户是「问」还是「要生成/改」:**提问类**(这是什么组件/怎么用/某字段什么意思/为什么这样/解释代码)→ 用 read / list_components / rag_component_docs **直接回答**,绝不委派 ${r};**生成/修改类**(做一个/生成/改成/加一个 XX 组件)才按下面纪律委派 ${r}。长对话里上文全是生成记录时尤须警惕,不要把新问题当成延续旧任务。`,
+		`【多方案征询=先文本】用户要「出几套/两套方案我来选」「给几个选择」「先出方案看看」→ **本轮只出文本方案**(每套一两句:布局/配色/交互差异),经 request_human_confirmation 的 options 让用户点选(或等用户回复选定);**选定后才**委派 ${r} 建所选方案。禁止先并发多个子 agent 把每套方案都生成出来再让用户挑(子 agent 产物当不了选项清单,且烧 token;真 LLM 实测踩过:「出两套方案」被路由成两个 use_${e} 委派)。`,
+		`【执行纪律(最重要)】收到代码组件任务后:**新建类直接委派**(追加组件无需通读/翻页现有数组,子 agent 自会采样一个组件看结构;**新建组件由子 agent 全权创建** —— 它自己把整个组件(含 ${t})写进数组,你不需要也不能替它创建/追加/落地代码)→ 修改类才 read 定位(by name)→ 调 ${r} 委派 → read 核对 → 回复用户。**中间绝不输出过渡性文字** —— 「我先看看…」「稍后委派」「接下来我会…」这类计划性回复等于任务没做就结束了(回复即本轮终止);所有调研和委派在本轮内连续完成,完成后才回复总结。`,
 		"【产物形态】每个组件是完整、自包含的 HTML 页面(含 style/script,可独立成页);你只负责委派和收尾,不关心宿主如何渲染(v-html / iframe / SFC 是集成方的事)。",
-		`【主 agent 职责边界(硬规则)】禁止直接 read/write 代码组件的 ${t} 字段(read 只得 <code Nkb> 摘要没用;write 绕过 vfs/verify 危险)—— 生成/修改/排查代码一律经 ${n},收尾 read 核对。**委派返回即已落地**:${n} 的结论说「已创建组件 X」= 组件已在数组里,**不要再 write/append 一遍**(子 agent 已自己创建,你再写 = 造出重复组件,还得花轮次删;真 LLM 实测踩过:主 agent 把返回的 code 又追加了一次 → 索引 8/9 重复)。核对方式 = read 该数组尾部(确认新组件存在 + name 唯一),仅此而已。`,
-		`【多组件委派(防上下文污染)】一次要多个组件:① write_todos 列出(每项 name + 要点)② **不同组件可在同一轮并行发多个 ${n} 委派**(每组件一次 ${n},task 只写该组件 name + 要点 + 主题/风格;每次委派是独立子 agent 实例,互不共享上下文);**同一组件同一时间只能有一个委派在途**,勿对同一组件同轮发两个委派 ③ 委派返回后逐个 read 核对(确认已生成 + 名称对)+ update_todo 标完成 ④ 主题/风格在每次 task 里转述(每个子 agent 全新上下文,不知其他组件)。一次 task 塞多个组件仍禁止(同一子 agent 共享上下文生成多个 → class/样式冲突污染);主 agent 自己的 write(普通组件属性)可与委派同轮发出,不必等委派返回。`,
-		`【委派 task 规格化(收窄子 agent 决策,防开放任务致装饰穷举)】委派 ${n} 的 task 必须含:① 组件定位(by name)② 视觉风格(配色/质感/字体;**给 1-2 个具体视觉锚** —— 主色 hex **取自平台 UI/设计规范 skill 的定义值**(有规范类 skill 先 load 再引用其 hex,勿凭页面观察自造近似色;无规范才自定,如「金黄 #F7C948」)、主体占比(如「杯高约画布 60%」)或装饰密度(如「仅 2 类背景装饰」)—— 细节空间收窄,子 agent 不在装饰细节上展开推演)③ 内容(文案/数据/图)④ 交互意图(动效/状态/触发)⑤ 历史偏好(可选):聊天上下文中有与该组件相关的用户历史偏好/反馈(如「用户偏好深色系」「上轮嫌动画太快」),提炼一句附 task 末尾(新子 agent 无记忆,全靠 task);**不含技术实现**(SVG vs CSS / keyframes vs transition 归子 agent 选)。❌「生成啤酒杯动画」→ ✅「啤酒杯倒酒(beer):金黄啤酒 #F7C948 从上方倒入透明杯(杯高约画布 60%),深绿背景,液体循环下落 2s,hover 杯子放大」。规格简练(4 要素各半句),远省子 agent 思考 token。`,
-		`【委派失败重试】${n} 返回乱码/内部标记(如 <｜DSML｜)/空结论或报错 = 子 agent 异常,**重新委派一次**(task 附「上次失败,这次先把代码写短些/分步」);连续两次失败才降级告知用户。**不要因此自己直接 write/edit ${t} 字段**(绕过 vfs/格式校验,且你拿不到规范全文)。`,
+		`【主 agent 职责边界(硬规则)】禁止直接 read/write 代码组件的 ${t} 字段(read 只得 <code Nkb> 摘要没用;write 绕过 vfs/verify 危险)—— 生成/修改/排查代码一律经 ${r},收尾 read 核对。**委派返回即已落地**:${r} 的结论说「已创建组件 X」= 组件已在数组里,**不要再 write/append 一遍**(子 agent 已自己创建,你再写 = 造出重复组件,还得花轮次删;真 LLM 实测踩过:主 agent 把返回的 code 又追加了一次 → 索引 8/9 重复)。核对方式 = read 该数组尾部(确认新组件存在 + name 唯一),仅此而已。`,
+		`【多组件委派(防上下文污染)】一次要多个组件:① write_todos 列出(每项 name + 要点)② **不同组件可在同一轮并行发多个 ${r} 委派**(每组件一次 ${r},task 只写该组件 name + 要点 + 主题/风格;每次委派是独立子 agent 实例,互不共享上下文);**同一组件同一时间只能有一个委派在途**,勿对同一组件同轮发两个委派 ③ 委派返回后逐个 read 核对(确认已生成 + 名称对)+ update_todo 标完成 ④ 主题/风格在每次 task 里转述(每个子 agent 全新上下文,不知其他组件)。一次 task 塞多个组件仍禁止(同一子 agent 共享上下文生成多个 → class/样式冲突污染);主 agent 自己的 write(普通组件属性)可与委派同轮发出,不必等委派返回。`,
+		`【委派 task 规格化(收窄子 agent 决策,防开放任务致装饰穷举)】委派 ${r} 的 task 必须含:① 组件定位(by name)② 视觉风格(配色/质感/字体;**给 1-2 个具体视觉锚** —— 主色 hex **取自平台 UI/设计规范 skill 的定义值**(有规范类 skill 先 load 再引用其 hex,勿凭页面观察自造近似色;无规范才自定,如「金黄 #F7C948」)、主体占比(如「杯高约画布 60%」)或装饰密度(如「仅 2 类背景装饰」)—— 细节空间收窄,子 agent 不在装饰细节上展开推演)③ 内容(文案/数据/图)④ 交互意图(动效/状态/触发)⑤ 历史偏好(可选):聊天上下文中有与该组件相关的用户历史偏好/反馈(如「用户偏好深色系」「上轮嫌动画太快」),提炼一句附 task 末尾(新子 agent 无记忆,全靠 task);**不含技术实现**(SVG vs CSS / keyframes vs transition 归子 agent 选)。❌「生成啤酒杯动画」→ ✅「啤酒杯倒酒(beer):金黄啤酒 #F7C948 从上方倒入透明杯(杯高约画布 60%),深绿背景,液体循环下落 2s,hover 杯子放大」。规格简练(4 要素各半句),远省子 agent 思考 token。`,
+		`【委派失败重试】${r} 返回乱码/内部标记(如 <｜DSML｜)/空结论或报错 = 子 agent 异常,**重新委派一次**(task 附「上次失败,这次先把代码写短些/分步」);连续两次失败才降级告知用户。**不要因此自己直接 write/edit ${t} 字段**(绕过 vfs/格式校验,且你拿不到规范全文)。`,
+		...n ? ["【设计品味引导】子 agent 内置 web-design-engineer 设计 skill(设计系统先声明/反 AI 俗套/25 风格配方/5 维自评;**挂在子 agent 侧,你自己 load 不到也不必尝试**)。委派 task 的视觉锚可直接引用配方名 —— linear / apple-hig / muji / pentagram / bloomberg-terminal / aesop 等(如「Linear 风格:暖深色+发丝线」),子 agent 会按名取配方参数照做;用户未指定风格时勿写「随便/好看就行」,给一条具体方向(流派或参考品牌),子 agent 按其 skill 流程选配方并在结论里声明设计系统与假设。"] : [],
 		"【预算将尽暂停】组件很多、接近工具轮次上限不要硬扛:完成手头这个后报告「已生成 K/N,还剩 M 个」,等用户确认后从 todos 剩余项继续(勿重复已完成)。"
 	].join("\n");
 }
@@ -8731,7 +8732,7 @@ function ad(e, n = {}) {
 		e.writeCapable = t;
 	}, oe = r(async () => [`说明: ${l}`, "格式: 写入值需为 JSON,且通过声明的 schema 校验(校验失败时 write 会返回结构化错误,含具体字段与期望类型)。"].join("\n"), {
 		name: "describe_data",
-		description: "获取主数据的说明与格式要求。",
+		description: "获取主数据的说明与格式要求(等价于 read 不传 jsonPath;优先用 read 单一入口)。",
 		schema: t.object({})
 	}), L = r(async ({ id: e }, t) => {
 		let n = y(t);
@@ -8759,8 +8760,8 @@ function ad(e, n = {}) {
 		});
 	}, {
 		name: "restore_data",
-		description: "把主数据回退到某个快照(就地还原,保留响应式)。不传 id 则回退最近一次(快速回退)。可用 history_data({list:true}) 查看快照列表。",
-		schema: t.object({ id: t.number().int().optional().describe("指定快照序号;不传则回退最近一次") })
+		description: "把主数据回退到某个快照(不传 id 回退最近一次)。快照列表用 history_data({list:true})。",
+		schema: t.object({ id: t.number().int().optional().describe("快照序号;不传回退最近一次") })
 	});
 	I(L);
 	let se = r(async ({ id: e, jsonPath: t, list: n }) => {
@@ -8802,43 +8803,54 @@ function ad(e, n = {}) {
 		return `快照 #${r.id}[${r.op}]${r.label ? `(${r.label})` : ""}${a ? ` @ ${a}` : ""} = ${$(i)}`;
 	}, {
 		name: "history_data",
-		description: "查看主数据快照(只读不回退当前)。list:true 列时间线;传 id 看某次快照内容(默认最近),jsonPath 可只看子路径。冲突诊断/看上一版用;对比差异用 diff_data;回退用 restore_data。",
+		description: "查看主数据快照(只读不回退):list:true 列时间线;传 id 看某次内容(默认最近),jsonPath 可只看子路径。对比差异用 diff_data;回退用 restore_data。",
 		schema: t.object({
-			id: t.number().int().optional().describe("快照序号;不传则最近一次(list:true 时忽略)"),
-			jsonPath: t.string().optional().describe("只看快照的某子路径(相对主数据根);不传则整个快照"),
-			list: t.boolean().optional().describe("true 则列出快照时间线元信息(序号/操作/标签/时间/大小);不传则查看单条快照内容")
+			id: t.number().int().optional().describe("快照序号;不传看最近一次(list:true 时忽略)"),
+			jsonPath: t.string().optional().describe("只看快照的某子路径"),
+			list: t.boolean().optional().describe("true 列出快照时间线(序号/操作/标签/时间/大小)")
 		})
-	}), ce = r(async ({ expr: e, limit: t }, n) => {
-		let r = y(n);
+	}), ce = r(async ({ expr: e, queries: t, limit: n }, r) => {
+		let i = y(r);
 		if (typeof c != "object" || !c) return Z({
 			code: "NOT_OBJECT",
 			message: `主数据不是对象/数组,无法查询(当前为 ${c === void 0 ? "undefined" : typeof c})`,
 			hint: "query 仅适用于对象/数组;叶子用 read 读"
 		});
-		let i = u ? Zo(c, s) : c, a;
-		try {
-			a = ca(i, e);
-		} catch (t) {
-			return Z({
-				code: "JSONPATH_SYNTAX",
-				message: `JSONPath 解析错误: ${t.message}`,
-				hint: "语法子集:$ .key [n] [\"key\"] [*] [?(filter)] ..key ..*;filter:@.field op literal,&&/||/();对象根需先点出数组字段再过滤,如 $.components[?(@.x>1)]",
-				details: { expr: e }
-			});
-		}
-		let o = t ?? 50, l = a.slice(0, o), d = b(n), f = l.map((e) => `{"path":${JSON.stringify(e.path)},"index":${e.index === void 0 ? "null" : e.index},"value":${$(ed(e.value, r === "", re, j, {
-			rootExempt: !1,
-			rootPath: String(e.path ?? ""),
-			fullTextPrefixes: d,
-			onSummarized: ee
-		}))}}`);
-		return `{"matched":${a.length},"returned":${l.length},"truncated":${a.length > o},"results":[${f.join(",")}]}`;
+		let a = u ? Zo(c, s) : c, o = b(r), l = (e) => {
+			let t;
+			try {
+				t = ca(a, e);
+			} catch (t) {
+				return Z({
+					code: "JSONPATH_SYNTAX",
+					message: `JSONPath 解析错误: ${t.message}`,
+					hint: "语法子集:$ .key [n] [\"key\"] [*] [?(filter)] ..key ..*;filter:@.field op literal,&&/||/();对象根需先点出数组字段再过滤,如 $.components[?(@.x>1)]",
+					details: { expr: e }
+				});
+			}
+			let r = n ?? 50, s = t.slice(0, r), c = s.map((e) => `{"path":${JSON.stringify(e.path)},"index":${e.index === void 0 ? "null" : e.index},"value":${$(ed(e.value, i === "", re, j, {
+				rootExempt: !1,
+				rootPath: String(e.path ?? ""),
+				fullTextPrefixes: o,
+				onSummarized: ee
+			}))}}`);
+			return `{"matched":${t.length},"returned":${s.length},"truncated":${t.length > r},"results":[${c.join(",")}]}`;
+		};
+		return t && t.length ? `{"batch":true,"results":[${t.map((e) => {
+			let t = l(e);
+			return t.startsWith("ERROR:") ? `{"expr":${JSON.stringify(e)},"ok":false,"error":${JSON.stringify(t)}}` : `{"expr":${JSON.stringify(e)},"ok":true,${t.slice(1)}`;
+		}).join(",")}]}` : e === void 0 ? Z({
+			code: "SCHEMA_INVALID",
+			message: "query_data 需传 expr(单条 JSONPath)或 queries(2-10 条批量),两者都没传",
+			hint: "单表达式用 expr;多条件筛选一次取回用 queries"
+		}) : l(e);
 	}, {
 		name: "query_data",
-		description: "用 JSONPath 查询主数据(只读):$ 根/.key/[n]/[*]/[?(==/!=/</<=/>/>=,&&/||)]/..key 递归。返回匹配元素 path/index/value(path 可作 write patch 的 jsonPath);大数组筛选定位用它。",
+		description: "用 JSONPath 查询主数据(只读):$ 根/.key/[n]/[*]/[?(==/!=/</<=/>/>=,&&/||)]/..key 递归。返回匹配元素 path/index/value(path 可作 write patch 的 jsonPath);大数组筛选定位用它;多条件筛选传 queries 数组一次取回。",
 		schema: t.object({
-			expr: t.string().describe("JSONPath 表达式,如 $.components[?(@.type==\"card\" && @.price<100)] 或 $..title(递归找所有 title)"),
-			limit: t.number().int().min(1).max(200).optional().describe("返回结果上限,默认 50")
+			expr: t.string().optional().describe("单条 JSONPath 表达式,如 $.components[?(@.type==\"card\" && @.price<100)] 或 $..title(递归找所有 title)"),
+			queries: t.array(t.string()).min(2).max(10).optional().describe("批量模式:2-10 条 JSONPath 一次取回(与 expr 同传按 queries);逐条独立返回,单条失败该项标 error 不整批"),
+			limit: t.number().int().min(1).max(200).optional().describe("返回结果上限(批量时逐条适用),默认 50")
 		})
 	}), le = r(async ({ query: e, mode: t, fuzzyThreshold: n, matchKey: r, limit: i }) => {
 		if (c == null) return Z({
@@ -9015,11 +9027,11 @@ function ad(e, n = {}) {
 		});
 	}, {
 		name: "eval_script",
-		description: "在 Worker 沙箱对主数据跑自定义 JS(无 window/fetch,超时 3s)。入参 data(深拷贝),返回值即结果。mode:query 只读回给 LLM(过滤/映射/聚合)/transform 落地(返回完整新值或 {patches:[...]} 增量)。jsonPath 可只对子树执行。",
+		description: "在 Worker 沙箱对主数据跑自定义 JS(无网络,超时 3s)。入参 data(深拷贝);mode:query 只读回给 LLM/transform 校验后落地(完整新值或 {patches:[…]} 增量);jsonPath 可限定子树。",
 		schema: t.object({
-			script: t.string().describe("JS 脚本体,如 data.filter(c=>c.stock>0).map(c=>c.id);入参名 data;末尾表达式或 return 即返回值"),
-			mode: t.enum(["query", "transform"]).optional().describe("query=只读返回结果(默认),transform=校验后落地为新值"),
-			jsonPath: t.string().optional().describe("子树模式:仅对 jsonPath 指向的子树执行(降低大 JSON 成本);transform 时返回值作为该子树新值")
+			script: t.string().describe("JS 脚本(入参 data;末尾表达式或 return 即返回值),如 data.filter(c=>c.stock>0)"),
+			mode: t.enum(["query", "transform"]).optional().describe("query=只读返回结果(默认)/transform=校验后落地为新值"),
+			jsonPath: t.string().optional().describe("子树模式:仅对该子树执行;transform 返回值作为子树新值")
 		})
 	});
 	I(ue, (e) => e?.mode === "transform");
@@ -9104,14 +9116,14 @@ function ad(e, n = {}) {
 		return v === void 0 ? `${x}主数据${h ? ` @ ${h}` : ""}${T} = (undefined) (hash=${p})` : `${x}主数据${h ? ` @ ${h}` : ""}${T} = ${$(v)} (hash=${p})`;
 	}, {
 		name: "read",
-		description: "读取主数据(高层入口,合并 describe/get)。不传 jsonPath → 返回主数据说明 + 格式提示(含字段约束);传 jsonPath → 返回该子路径当前值 + hash;传 jsonPaths → 一次读多个不相关子路径(省多轮往返)。hash 用于乐观锁(声明 conflictWatchFields 后 write 自动比对;未声明不自动校验)。fields(字段裁剪)/depth(深度截断)减体积;offset+limit 对数组目标分页(返回切片 + total/hasMore)。",
+		description: "读主数据(只读):不传 jsonPath 返回整体说明+格式;传 jsonPath 返回该路径当前值+hash;传 jsonPaths 一次读多个不相关路径。fields/depth 裁剪、offset/limit 数组分页减体积;详细规则见系统提示。",
 		schema: t.object({
-			jsonPath: t.string().optional().describe("要读的子路径(相对主数据根,如 components.0.text);不传则读整个主数据并返回说明"),
-			jsonPaths: t.array(t.string()).optional().describe("多路径读取:一次读多个不相关子路径(与 jsonPath 互斥,优先于 jsonPath);返回各路径值,非法路径单项标错不整批失败"),
-			fields: t.array(t.string()).optional().describe("字段裁剪:只返回指定字段(对对象/数组元素投影),减少返回体积,如 [\"id\",\"title\"]"),
-			depth: t.number().int().min(0).optional().describe("嵌套深度限制:0=只根占位,1=根+子,递归到 depth 层后用 {...}/[...] 占位截断,减少深层返回体积"),
-			offset: t.number().int().min(0).optional().describe("数组分页起始偏移(仅当读取目标是数组时生效,默认 0),配合 limit 分页读大数组"),
-			limit: t.number().int().min(1).max(200).optional().describe("数组分页每页条数(默认 50,上限 200;仅数组时生效),返回切片 + total/hasMore")
+			jsonPath: t.string().optional().describe("要读的子路径(如 components.0.text);不传读整体+说明"),
+			jsonPaths: t.array(t.string()).optional().describe("多路径一次读(与 jsonPath 互斥,优先);非法路径单项标错不整批"),
+			fields: t.array(t.string()).optional().describe("只返回指定字段(投影减体积),如 [\"id\",\"title\"]"),
+			depth: t.number().int().min(0).optional().describe("嵌套深度限制(0=只根占位,逐层截断减体积)"),
+			offset: t.number().int().min(0).optional().describe("数组分页起始偏移(仅数组目标,默认 0)"),
+			limit: t.number().int().min(1).max(200).optional().describe("数组分页每页条数(默认 50,上限 200),返回切片+total/hasMore")
 		})
 	}), de = r(async ({ value: e, patch: t, patches: n, del: r, dryRun: a }, l) => {
 		let d = y(l), f = "set";
@@ -9230,9 +9242,9 @@ function ad(e, n = {}) {
 		}
 	}, {
 		name: "write",
-		description: "写入主数据(高层入口,合并 set/edit/delete + 自动乐观锁 + 自动快照)。四意图:① 整体替换 write({value:整个对象});② 增量 write({patch:{op,jsonPath,value}}) op=set/remove/merge/append/move(move 的 value=目标路径字符串);③ 批量原子 write({patches:[...]})(任一失败整批回滚);④ 删子路径 write({patch:{jsonPath},del:true})。dryRun:true 预检不落盘。写入自动 schema 校验(失败不写,按错误修正重试)+ 自动快照。详细用法见系统提示「能力使用提示」。",
+		description: "写主数据(唯一写入口;自动 schema 校验+乐观锁+快照)。四意图:整体替换 {value}/增量 {patch:{op,jsonPath,value}}(op set/remove/merge/append/move)/原子批 {patches:[…]}(任一失败回滚)/删子路径 {patch:{jsonPath},del:true};dryRun 预检;详细规则见系统提示。",
 		schema: t.object({
-			value: t.unknown().optional().describe("JSON 对象(推荐,如 {title:\"x\"})或 JSON 字符串;set 整体或单个 patch 的 set/merge/append 必填"),
+			value: t.unknown().optional().describe("JSON 对象(推荐)或 JSON 字符串;set 整体或 patch 的 set/merge/append 必填"),
 			patch: t.object({
 				op: t.enum([
 					"set",
@@ -9240,10 +9252,10 @@ function ad(e, n = {}) {
 					"merge",
 					"append",
 					"move"
-				]).optional().describe("增量操作:set 设值/remove 删/merge 合并对象/append 追加数组/move 移动数组元素(value=目标路径字符串)。单 patch edit 缺省按 set;del 模式(write({patch:{jsonPath},del:true}))不读 op 可省略"),
-				jsonPath: t.string().optional().describe("相对主数据根的点号路径(如 components.0.text);set/remove 必填,merge/append 不填则作用于根"),
-				value: t.unknown().optional().describe("该 patch 的值(JSON 直传或 JSON 字符串);set/merge/append 必填,remove 不需。与顶层 value 二选一:优先 patch.value,未填则回退顶层 value(向后兼容)。推荐用 patch.value(自带,与 patches 元素一致,无歧义)")
-			}).optional().describe("单个增量编辑(自带 value,与 patches 元素一致);传 patch(无 patches)走单 patch edit 语义"),
+				]).optional().describe("set 设值/remove 删/merge 合并对象/append 追加数组/move 移动元素(value=目标路径字符串);缺省 set"),
+				jsonPath: t.string().optional().describe("相对主数据根的点号路径(如 components.0.text);set/remove 必填,merge/append 不填作用于根"),
+				value: t.unknown().optional().describe("该 patch 的值(JSON 或 JSON 字符串);与顶层 value 二选一,优先 patch.value")
+			}).optional().describe("单个增量编辑(自带 value)"),
 			patches: t.array(t.object({
 				op: t.enum([
 					"set",
@@ -9252,11 +9264,11 @@ function ad(e, n = {}) {
 					"append",
 					"move"
 				]),
-				jsonPath: t.string().optional().describe("相对主数据根的点号路径;set/remove 必填,merge/append 不填则作用于根"),
-				value: t.unknown().optional().describe("JSON 值(推荐直传)或 JSON 字符串;set/merge/append 必填,remove 不需")
-			})).optional().describe("批量增量编辑:一次原子应用多个 patch(任一失败则整体不写入,clone 试跑全部 + schema 校验通过才落 live)。适合一次改多处,减少多轮往返"),
+				jsonPath: t.string().optional().describe("相对主数据根的点号路径;set/remove 必填,merge/append 不填作用于根"),
+				value: t.unknown().optional().describe("JSON 值(推荐直传)或 JSON 字符串;set/merge/append 必填")
+			})).optional().describe("批量原子编辑:一次提交多个 patch,任一失败整体不写入;适合一次改多处"),
 			del: t.boolean().optional().describe("true 则删除 patch.jsonPath 指定的子路径"),
-			dryRun: t.boolean().optional().describe("预检模式:走完整校验链(schema + 白名单 + patch 应用到 clone)但不落盘、不入快照,返回预览。四意图(value/patch/patches/del)均支持;乐观锁冲突照常检测(返回 VERSION_CONFLICT 不挂起)")
+			dryRun: t.boolean().optional().describe("预检:走完整校验链但不落盘不入快照;冲突返回 VERSION_CONFLICT 不挂起")
 		})
 	});
 	I(de);
@@ -10236,9 +10248,166 @@ function Wd(e) {
 	}), t = JSON.stringify(e)), t;
 }
 //#endregion
+//#region src/core/sdk/designSkill/skillDoc.ts
+var Gd = "# Web Design Engineer\n\nThis skill positions the Agent as a top-tier design engineer who crafts elegant, refined Web artifacts using HTML/CSS/JavaScript/React. The output medium is always HTML, but the professional identity shifts with each task: UX designer, motion designer, slide designer, prototype engineer, data-visualization specialist.\n\nCore philosophy: **The bar is \"stunning,\" not \"functional.\" Every pixel is intentional, every interaction is deliberate. Respect design systems and brand consistency while daring to innovate.**\n\n---\n\n## Scope\n\n✅ **Applicable**: Visual front-end deliverables (pages / prototypes / slide decks / visualizations / animations / UI mockups / design systems)\n\n❌ **Not applicable**: Back-end APIs, CLI tools, data-processing scripts, pure logic development with no visual requirements, performance tuning, and other terminal tasks\n\n---\n\n## Host Environment (page-agent-sdk adaptation)\n\n> Read this first: it reinterprets every user-interaction instruction below. This guide was written for an interactive agent; you run as a **delegated sub-agent** inside page-agent-sdk. The adaptations:\n\n- **One-shot delegation**: you receive a spec'd `task`, run to completion, and return a single final report. You **cannot converse with the user mid-run**. Wherever this guide says \"ask the user\", \"wait for confirmation\", or \"checkpoint\" (Step 1 probing, Checkpoints 1–3, ambiguous feedback): pick the **conservative, defensible default**, note the assumption, keep building, and list all assumptions in your **closing report** so the main agent / user can course-correct on the next delegation.\n- **Facts**: no network tools. The delegation `task` is authoritative; see adapted Step 0.\n- **Output form**: each component is **complete, self-contained HTML** — inline `<style>` / `<script>` blocks (centralized, extractable), renderable standalone; external CDN JS/CSS only when the task calls for it. Code lands through your code-asset workflow (vfs working copy / write) and must pass `validate_code` before you finish.\n- **Scale**: usually **one component per delegation**, not a multi-file project. Treat file-management guidance below (descriptive filenames, v2 copies, `assets/` dirs, `brand-spec.md`) as moot; React patterns are kept from upstream for reference — **default to vanilla HTML/CSS/JS**, zero build steps.\n- **v0 / checkpoints**: \"show a v0 early\" translates to: state your design-system declaration (Step 3 block, condensed) in the closing report — not a mid-run pause.\n- **Verification**: you cannot open a browser console — the framework's `validate_code` / render check covers structural verification; run the Step-7 checklist mentally against the code you wrote.\n\n---\n\n## Workflow\n\n### Step 0: Verify Facts Before Anything Else\n\n> **SDK adaptation**: you have no network tools — skip the upstream WebSearch protocol. The delegation `task` is your source of facts. If it names a specific product / brand / version / dated event you cannot verify from the task or context, **do not assert specifics from training data**: implement the stated intent and flag the unverified spec in your closing report (e.g. \"assumed v2 pricing — unverified\"). Never fabricate specs, versions, release status, or stats.\n\n### Step 1: Understand the Requirements (judge the gap, then default deliberately)\n\nYou cannot ask the user — a delegation that stops to ask wastes the whole run. Instead, judge **how large the information gap** is, fill every gap with a **conservative, high-quality default**, and report the assumptions:\n\n- Task already spec'd (visual + content + interaction, like a good delegation task) → **no gap: follow it exactly**; don't re-design around it.\n- Turning an existing component / screenshot into a variant → small gap: only intent may be unclear — default conservatively, match the existing visual vocabulary.\n- \"Make it look great\" with no tone / audience / context → large gap: pick the school + recipe deliberately (Step 2 priority list below), state every assumption.\n- Genuinely vague (\"something nice\", \"I don't know what style\") → run the **Design Direction Advisor** below internally: pick 3 differentiated directions, implement the most conservative one that fits the task, mention the two alternatives in your closing report.\n\nKey areas to default consciously (mirror of upstream probing list):\n- **Product context**: What product? Target users? Existing design system / brand guidelines?\n- **Output type**: Web page / prototype / slide deck / animation / dashboard? Fidelity level?\n- **Variation dimensions**: Which dimensions should variants explore — layout, color, interaction, copy? How many?\n- **Constraints**: Responsive breakpoints? Dark/light mode? Accessibility? Fixed dimensions?\n\n### Step 2: Gather Design Context (by priority)\n\nGood design is rooted in existing context. **Never start from thin air.** Priority order:\n\n1. **Resources the user proactively provides** (screenshots / Figma / codebase / UI Kit / design system) → read them thoroughly and extract tokens\n2. **Existing pages of the user's product** → match their visual vocabulary (see \"When Adding to an Existing UI\" below)\n3. **Industry best practices** → ask which brands or products to use as reference\n4. **User names an anchor** (\"make it Linear-style\" / \"Aesop feeling\" / \"MUJI quietness\") → read the single recipe file at `references/style-recipes/<anchor>.md` (e.g., `references/style-recipes/linear.md`). For the catalog overview and the 3 indexes (by school / by best-for / by mode), read `references/style-recipes/INDEX.md` first.\n5. **Starting from scratch** → establish a temporary system based on industry best practices, or pick a recipe from `references/style-recipes/` (browse via `INDEX.md`) — and state the choice as an assumption in your closing report\n\nWhen analyzing reference materials, focus on: color system, typography scheme, spacing system, border-radius strategy, shadow hierarchy, motion style, component density, copywriting tone.\n\n> **Code ≫ Screenshots**: When the user provides both a codebase and screenshots, invest your effort in reading source code and extracting design tokens rather than guessing from screenshots — rebuilding/editing an interface from code yields far higher quality than from screenshots.\n\n#### When the Task Involves a Specific Brand — Asset Protocol\n\n**Asset > Spec.** A brand's identity is \"being recognized.\" Recognition is driven by assets in this order — **not by hex codes**:\n\n| Asset | Recognition contribution | When required |\n|---|---|---|\n| **Logo** (SVG / PNG, both light & dark variants if available) | Highest — any brand is identified by its logo | **Any brand task** — non-negotiable |\n| **Product imagery** (hero shots, detail, in-context) | Very high — physical products' \"main character\" *is* the product itself | **Physical products** (hardware, packaging, consumer goods) |\n| **UI screenshots** (latest version, real data scrubbed) | Very high — digital products' \"main character\" *is* the interface | **Digital products** (apps, SaaS, websites) |\n| Color tokens | Medium — auxiliary; without the assets above, brands collide | Auxiliary |\n| Typography | Low — needs the above to land | Auxiliary |\n\n**Hard rules**:\n\n- **Don't substitute CSS silhouettes / hand-drawn SVG for real product imagery** — the result is generic \"tech aesthetic\" any brand could wear (zero recognition value, the #1 way branded work fails)\n- **Logo is non-negotiable** — in delegation you cannot fetch one: if the task provides no logo asset, use an honest placeholder (see \"Placeholder Philosophy\") and flag the gap in your closing report — do **not** proceed with a colored rectangle as if it were a logo\n- **Color hex codes alone are not a brand** — they're the cheapest part of the identity\n- All available assets must be referenced via `<img src=\"…\">` as provided in the task / context map, not redrawn\n\n#### When Adding to an Existing UI\n\nThis is more common than designing from scratch. **Understand the visual vocabulary first, then act**:\n\n- **Color & tone**: The actual usage ratio of primary / neutral / accent colors? Does the copy feel engineer-oriented, marketing-oriented, or neutral?\n- **Interaction details**: The feedback style for hover / focus / active states (color shift / shadow / scale / translate)?\n- **Motion language**: Easing function preferences? Duration? Are transitions handled with CSS transition, CSS animation, or JS?\n- **Structural language**: How many elevation levels? Card density — sparse or dense? Border-radius uniform or hierarchical? Common layout patterns (split pane / cards / timeline / table)?\n- **Graphics & iconography**: Icon library in use? Illustration style? Image treatment?\n\nMatching the existing visual vocabulary is the prerequisite for seamless integration; newly added elements should be **indistinguishable from the originals**.\n\n### Step 3a: Position Four Questions Before Picking a System\n\n**Before listing color/typography/spacing tokens**, articulate four positioning questions for each artifact (or each slide / screen / scene):\n\n- **Narrative role**: Hero / transition / data / pull-quote / closing? (Each demands a different visual register.)\n- **Viewing distance**: 10cm phone / 1m laptop / 10m projector? (Drives type scale and information density.)\n- **Visual temperature**: Quiet / energized / authoritative / warm / somber / playful?\n- **Capacity check**: Mentally sketch the rough thumbnail — does the content fit the layout, or will it overflow / look too sparse?\n\nThe system that follows must serve these answers. Picking aesthetics in a vacuum is the root cause of generic output.\n\n### Step 3: Declare the Design System Before Writing Code\n\n**Before writing the first line of code**, articulate the design system in Markdown (in delegation: state it in your closing report — no mid-run pause):\n\n```markdown\nDesign Decisions:\n- Anchor / recipe (if any): [e.g., \"linear\" → `references/style-recipes/linear.md`, or \"custom\"]\n- Color palette: [primary / secondary / neutral / accent]\n- Typography: [heading font / body font / code font]\n- Spacing system: [base unit and multiples]\n- Border-radius strategy: [large / small / sharp]\n- Shadow hierarchy: [elevation 1–5]\n- Motion style: [easing curves / duration / trigger]\n```\n\n> If you picked a recipe from `references/style-recipes/`, paste its concrete palette / typography / spacing / radius / shadow / motion values straight into the block above — that catalog exists so you don't have to invent these on the fly, which is the leading cause of AI-default Inter + #3b82f6 mush. **Load only the one recipe file you're using**, not the whole catalog.\n\n### Step 4: Show a v0 Draft Early\n\n> **SDK adaptation**: in delegation this collapses into the closing report — include the (condensed) design-system declaration and the key structural choices there, so the main agent / user can course-correct on the next round. Build straight to the real thing; don't ship a placeholder skeleton as your final output.\n\nThe v0 mindset still applies *within* the build: lock the tone / layout direction first (design-system declaration), then flesh out content details, states, and motion.\n\n### Step 5: Full Build\n\nWrite full components, add states, and implement motion. Follow the technical specifications and design principles below.\n\n### Step 6: Verification\n\nWalk through the \"Pre-delivery Checklist\" item by item (mentally, against the code — you cannot open a browser console; `validate_code` / render check covers structure).\n\n### Step 7: Critique on Request (or as Self-Check Before Delivery)\n\nWhen the task asks \"review this\", \"is it good?\", \"score this\", \"好不好看\", or as a self-check before declaring done, run a **5-dimension critique**:\n\n| Dimension | What to evaluate |\n|---|---|\n| **Philosophy alignment** | Does every detail trace back to the chosen design direction? Or has it drifted into a generic mishmash? |\n| **Visual hierarchy** | Does the eye flow where intended? Squint test passes? Title/body ratio ≥ 2.5×? |\n| **Craft quality** | Pixel-level alignment, consistent spacing system (e.g., 8pt grid), controlled color count (≤ 4), font families ≤ 2 |\n| **Functionality** | Does each element earn its place? \"If I delete this, does the design get worse?\" If no → delete |\n| **Originality** | Avoids clichés while staying coherent? Any \"unexpected but right\" decisions, or pure template? |\n\nScore each 0–10. Output format:\n\n```markdown\n## Design Critique\n\n**Overall: X.X / 10** [Excellent (8+) / Good (6–7.9) / Needs work (4–5.9) / Failing (<4)]\n\n**By dimension**: Philosophy X / Hierarchy X / Craft X / Functionality X / Originality X\n\n### Keep\n- [Specific things done well, in design language]\n\n### Fix (sorted by severity)\n1. **[Issue name]** — ⚠️ Critical / ⚡ Important / 💡 Polish\n   - Current: [what it looks like now]\n   - Why: [why it's a problem]\n   - Fix: [concrete change with values]\n\n### Quick Wins (top 3 if you only have 5 minutes)\n- [ ] [Highest-impact fix]\n- [ ] [Second]\n- [ ] [Third]\n```\n\n**Critique the design, not the designer.** For per-output-type weighting, common-issue catalog, and detailed scoring rubrics → see `references/critique-guide.md`.\n\n---\n\n## Fallback: Design Direction Advisor\n\n**When to trigger**:\n- The request is genuinely ambiguous (\"make something nice\", \"I don't know what style I want\", \"give me some directions\")\n- No design context exists, and no reference material is available\n- The task explicitly asks for \"a style\" / \"some directions\" / \"a vibe\"\n\n**When to skip**:\n- The task already provided brand / screenshot / style reference → go straight to the main workflow\n- The task stated a specific direction (\"make an Apple-Silicon-style launch animation\") → main workflow\n- Small tweaks → skip\n\n### Mechanism: 3 differentiated directions, not 10 questions\n\nDon't enumerate 10 generic taste questions. Instead, formulate **3 design directions** that come from clearly different schools — so the contrast is visible and the choice is meaningful. Each direction must include:\n\n- **A named designer or studio reference** (e.g., \"Pentagram-style information architecture\", not just \"minimalist\")\n- **2–3 lines of why this direction fits the task's context**\n- **Signature visual cues** (3–4 concrete details: color, typography, layout, motion)\n- **Optional**: one famous touchstone work\n\nIn delegation: implement the most conservative fitting direction, and list all three in the closing report as alternatives for the next round.\n\n### School library — pick 3 from different rows\n\n| School | Vibe | Sample anchors | Best for |\n|---|---|---|---|\n| **Information architecture** | Rational, data-driven, restrained | Pentagram, Edward Tufte, Massimo Vignelli, Bloomberg Terminal | Safe / professional / B2B / data products |\n| **Editorial / minimalist** | Whitespace, refined typography, quiet luxury | Kenya Hara (MUJI), Apple HIG, Dieter Rams, Aesop | Premium / high-end / quiet |\n| **Modern tool / Builder SaaS** | Hairline detail, warm dark, single accent, monospace chips | Linear, Vercel, Raycast, Notion | Developer tools / B2B SaaS / AI tools / infra |\n| **Motion / experimental** | Bold, generative, sensory | Field.io, Active Theory, Resn | Distinctive / launch films / brand moments |\n| **Brutalist / raw** | Anti-design, honest, unpolished | Balenciaga, Are.na, Bloomberg Businessweek covers | Differentiated / confident / counter-culture |\n| **Warm humanist** | Approachable, organic, hand-touched | Mailchimp (early), Stripe Press, Headspace | Lifestyle / education / approachable B2C / wellness |\n\n❌ **Hard rule**: never pick 3 from the same row — the contrast that makes the choice meaningful collapses.\n\n### After a direction is picked\n\nThe chosen direction becomes the design context for Step 2 onward. Surface 2–3 named recipes from that school by reading the matching files in `references/style-recipes/` (e.g., picked *Information Architecture* → read `references/style-recipes/pentagram.md`, `references/style-recipes/bloomberg-terminal.md`). Each recipe file brings concrete palette, typography, spacing, and signature moves you can paste into the Step 3 design-system declaration.\n\n> Extended philosophy library, per-school anchor tables, and AI-prompt templates → `references/design-directions.md`. Anchored recipe catalog → `references/style-recipes/INDEX.md` (catalog index + 3 indexes + cross-cutting anti-patterns) + 25 single-recipe files alongside it.\n\n---\n\n## Technical Specifications\n\n### React + Babel (Inline JSX)\n\nFor React prototypes, use **pinned-version** CDN scripts with `integrity` hashes — see the exact `<script>` tags in `references/advanced-patterns.md`. Do not change versions, do not add `type=\"module\"` (breaks the Babel transpilation pipeline). Import order: React → ReactDOM → Babel → your component files.\n\n> **SDK adaptation**: React remains upstream reference material; in page-agent-sdk components, **default to vanilla HTML/CSS/JS** (self-contained, zero build) unless the task explicitly demands React.\n\n#### Three Non-negotiable Hard Rules\n\n**1. Never use `const styles = { ... }`** — multiple component files with `styles` as a global object will silently overwrite each other. Always namespace: `const terminalStyles = { ... }`, `const headerStyles = { ... }`. Or use inline `style={{...}}` directly. **Never use `styles` as a variable name.**\n\n**2. Separate `<script type=\"text/babel\">` blocks do not share scope** — each Babel script is compiled independently. To share components across files, explicitly attach them to `window` at the end of each file: `Object.assign(window, { Terminal, Line });`\n\n**3. Do not use `scrollIntoView`** — in iframe-embedded preview environments, it disrupts outer-frame scrolling. Use `element.scrollTop = ...` or `window.scrollTo({...})` instead.\n\n### CSS Best Practices\n\n- Prefer CSS Grid + Flexbox for layout\n- Manage design tokens with CSS custom properties\n- **Prefer brand colors for palette**; when more colors are needed, derive harmonious variants using `oklch()` — **never invent new hues from scratch**\n- Use `text-wrap: pretty` for better line breaking\n- Use `clamp()` for fluid typography\n- Use `@container` queries for component-level responsiveness\n- Leverage `@media (prefers-color-scheme)` and `@media (prefers-reduced-motion)`\n\n### File Management\n\n> **SDK adaptation**: you have no filesystem and usually build one self-contained component per delegation — this section is upstream reference. Naming/versioning is handled by the host data model (component name / `__pgId`), not by you.\n\n---\n\n## Design Principles\n\n### Avoid AI-Style Clichés (the WHY matters)\n\nAnti-cliché is **not aesthetic snobbery** — it's protecting the user's brand recognition. The reasoning chain:\n\n1. The user wants their brand to be recognized\n2. AI defaults = average of training data = all brands averaged together = **no brand recognized**\n3. So AI-default output dilutes the user's identity into \"yet another AI-generated page\"\n\nThis is why the only legitimate exception to every anti-cliché rule below is **\"the brand spec uses it\"** — at that point it stops being slop and becomes a brand signature.\n\n| Pattern | Why it's slop | When it's actually fine |\n|---|---|---|\n| Aggressive purple → pink → blue gradient | The \"tech vibe\" formula AI training data converged on; on every SaaS / AI / web3 landing page | The brand itself uses it, or the task is satirizing this aesthetic |\n| Rounded card + colored left-border accent | Material/Tailwind era leftover; now visual noise in every dashboard | The user explicitly asks, or the brand spec preserves it |\n| Emoji as icon substitute | \"Not professional → slap emoji on it\" tic from training data | The brand uses emoji (Notion, Slack, early Linear), or audience is kids / casual |\n| SVG-drawn imagery (faces, scenes, objects) | AI-drawn SVG humans always have misaligned features and feel cheap | **Almost never** — use real images, AI-generated images, or honest placeholder |\n| CSS silhouette substituting for real product imagery | Generic \"tech aesthetic\" — same look across every brand | **Never** for branded work — go fetch the real product image |\n| Inter / Roboto / Arial / Fraunces / system-ui as display | Too common; reads as \"demo page\" rather than \"designed product\" | The brand spec specifies these (and usually with custom adjustments) |\n| Cyber-neon on `#0D1117` dark | GitHub-dark cosplay; baseline noise in dev-tool clones | The brand actually lives in this aesthetic |\n| Fabricated stats, fake logo walls, dummy testimonials | Damages credibility; users notice when numbers don't match reality | **Never** — use placeholders that say \"real data needed\" |\n\n### Emoji Rules\n\n**No emoji by default.** Only use emoji when the target design system/brand itself uses them (e.g., Notion, early Linear, certain consumer brands), and match their density and context precisely.\n\n- ❌ Using emoji as icon substitutes (\"I don't have an icon library, so I'll use 🚀 ⚡ ✨ as fillers\")\n- ❌ Using emoji as decorative filler (\"let's add an emoji before the heading to make it lively\")\n- ✅ No icon available → use a placeholder (see \"Placeholder Philosophy\" below) to signal that a real icon is needed\n- ✅ The brand itself uses emoji → follow the brand\n\n---\n\n### Placeholder Philosophy\n\n**When you lack icons, images, or components, a placeholder is more professional than a poorly drawn fake.**\n\n- Missing icon → square + label (e.g., `[icon]`, `▢`)\n- Missing avatar → initial-letter circle with a color fill\n- Missing image → a placeholder card with aspect-ratio info (e.g., `16:9 image`)\n- Missing data → use explicit \"real data needed\" placeholders; never fabricate\n- Missing logo → honest placeholder + flag in closing report (see Asset Protocol); never substitute \"brand name in a colored box\" for a logo on branded work\n\nA placeholder signals \"real material needed here.\" A fake signals \"I cut corners.\"\n\n### Aim to Stun\n\n- Play with proportion and whitespace to create visual rhythm\n- Bold type-size contrast (a 4–6× ratio between h1 and body text is normal)\n- Use color fills, textures, layering, and blend modes to create depth\n- Experiment with unconventional layouts, novel interaction metaphors, and thoughtful hover states\n- Use CSS animations + transitions for polished micro-interactions (button press, card hover, entry animations)\n- Use SVG filters, `backdrop-filter`, `mix-blend-mode`, `mask`, and other advanced CSS to create memorable moments\n\nCSS, HTML, JS, and SVG are far more capable than most people realize — **use them to astonish the user**.\n\n### Appropriate Scale\n\n| Context | Minimum Size |\n|---|---|\n| 1920×1080 presentations | Text ≥ 24px (ideally larger) |\n| Mobile mockups | Touch targets ≥ 44px |\n| Print documents | ≥ 12pt |\n| Web body text | Start at 16–18px |\n\n### Content Principles\n\n- **No filler content** — every element must earn its place\n- **Don't add sections unilaterally** — implement what the task specifies; if more content seems needed, note it in the closing report instead of padding\n- **Placeholders > fabricated data** — fake data damages credibility more than admitting a gap\n- **Less is more** — \"1,000 no's for every yes\"; whitespace is design\n- If the page looks empty → it's a layout problem, not a content problem. Solve it with composition, whitespace, and type-scale rhythm, not by stuffing content in\n\n---\n\n## Output Type Guidelines\n\n### Interactive Prototypes\n\n- **No title screen / cover page** — prototypes should center in the viewport or fill it (with sensible margins), letting the user see the product immediately\n- Use device frames (iPhone / Android / browser window) to enhance realism (see references file)\n- Implement key interaction paths so the user can click through them\n- Complete state coverage: default / hover / active / focus / disabled / loading / empty / error\n\n### HTML Slide Decks / Presentations\n\n- Fixed canvas at 1920×1080 (16:9), auto-fitted to any viewport via JS `transform: scale()`\n- Centered with letterbox bars; prev/next buttons placed **outside** the scaled container (to remain usable on small screens)\n- Keyboard navigation: ← → to change slides, Space for next\n- **Slide numbering is 1-indexed**: use labels like `01 Title`, `02 Agenda`, matching human speech (\"slide 5\" corresponds to label `05` — never use 0-indexed labels that cause off-by-one confusion)\n- Each slide should have a `data-screen-label` attribute for easy reference\n- Don't cram too much text — visuals lead, text supports; use at most 1–2 background colors per deck\n\n### Data Visualization Dashboards\n\n- Chart.js (simple) or D3.js (complex custom) — loaded via CDN\n- Responsive chart containers (`ResizeObserver`)\n- Provide dark/light mode toggle where it fits\n- Focus on **data-ink ratio**: remove unnecessary gridlines, 3D effects, and shadows; let the data speak\n- Color encoding should carry semantic meaning (up/down / category / time), not serve as decoration\n\n### Animation / Video Demos\n\nChoose animation approach by complexity, from simplest to heaviest — don't reach for a heavy library from the start:\n\n1. **CSS transitions / animations** — sufficient for 80% of micro-interactions (button press, card hover, fade-in entry, state toggle)\n2. **Simple state + setTimeout / requestAnimationFrame** — simple frame-by-frame or event-driven animations\n3. **Custom timeline engine** (full implementation in references) — timeline-driven video/demo scenes: scrubber, play/pause, multi-segment choreography\n4. **Fallback: Popmotion** (`https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js`) — only if the above three layers genuinely can't cover the use case\n\n> Avoid Framer Motion / GSAP / Lottie unless explicitly requested — bundle overhead and version conflicts. Always provide play/pause + scrubber, and skip \"title screen\" intros — go straight to content.\n\n### Static Visual Comparison vs. Full Flow\n\n- **Pure visual comparison** (button colors, typography, card styles) → use a design canvas to display options side by side\n- **Interactions, flows, multi-option scenarios** → build a full clickable prototype + expose options as Tweaks\n\n---\n\n## Variant Exploration Philosophy\n\nProviding multiple variants is about **exhausting possibilities so the user can mix and match**, not about delivering the perfect option.\n\nExplore \"atomic variants\" across at least these dimensions — mixing conservative, safe options with bold, novel ones:\n\n1. **Layout**: content organization (split pane / card grid / list / timeline)\n2. **Visual**: color palette, typography, texture, layering\n3. **Interaction**: motion, feedback, navigation patterns\n4. **Creative**: convention-breaking metaphors, novel UX, strong visual concepts\n\nStrategy: **Start the first few variants safely within the design system; then progressively push boundaries.** In delegation, prefer the safe-but-excellent end unless the task asks for boldness — radical exploration belongs in the reported alternatives, not in the delivered build.\n\n---\n\n## Tweaks Panel (Live Parameter Adjustment)\n\nLet users adjust design parameters in real time: theme color, font size, dark mode, spacing, component variants, content density, animation toggles, etc.\n\nDesign guidelines:\n- A floating panel in the bottom-right corner (see the reference implementation)\n- Title consistently labeled **\"Tweaks\"**\n- **Completely hidden** when closed, ensuring the design looks final during presentations\n- In multi-variant scenarios, expose variants as dropdowns/toggles within Tweaks instead of creating multiple files\n- Even if the task doesn't ask for tweaks, consider 1–2 creative ones (to expose interesting possibilities) — but skip entirely for small components where a floating panel would pollute the design\n\n---\n\n## Common CDN Resources\n\n**Default to hand-written CSS.** Only load a CDN when the scenario clearly calls for it — never include everything by default.\n\n| When clearly needed | Library |\n|---|---|\n| Charts (line / bar / pie) | Chart.js (`https://cdn.jsdelivr.net/npm/chart.js`) |\n| Complex custom visualizations | D3 v7 (`https://d3js.org/d3.v7.min.js`) |\n| Custom typography | Google Fonts (avoid Inter / Roboto / Arial / Fraunces / system-ui as display) |\n\n| Use only on explicit request or throwaway prototypes | Why |\n|---|---|\n| Tailwind CDN | Conflicts with the \"declare design tokens first\" workflow |\n| Lucide Icons CDN | Prefer placeholders over inserting icons \"to look complete\" when no icon library was specified |\n\n> React + Babel pinned CDN script tags → `references/advanced-patterns.md`. Do not change versions.\n\n---\n\n## Pre-delivery Checklist\n\nComplete the following before considering the work delivered (all items must pass):\n\n- [ ] **Facts**: any product/brand/version spec that couldn't be verified is flagged in the closing report — not asserted, not fabricated\n- [ ] **If the task is branded**: logo/product imagery come from task-provided assets via `<img src>` (or honest placeholder + flag), never CSS silhouettes or redrawn SVG for real imagery\n- [ ] Code passes `validate_code` (structure) — the framework's render check is the console-error proxy\n- [ ] Renders correctly on **target devices/viewports** (responsive web → mobile / tablet / desktop; slide decks/video with fixed dimensions → scaling container adapts without distortion)\n- [ ] **Interactive components** (buttons, links, inputs, cards, etc.) include states as appropriate: hover / focus / active / disabled / loading; empty/error states added where the scenario warrants them\n- [ ] No text overflow or truncation; `text-wrap: pretty` applied\n- [ ] All colors come from the design system declared in Step 3 — **no rogue hues introduced**\n- [ ] No use of `scrollIntoView`\n- [ ] No AI clichés (purple-pink gradients, emoji abuse, left-border accent cards, Inter/Roboto) — unless the brand spec explicitly uses them\n- [ ] No filler content, no fabricated data\n- [ ] Semantic naming, clean structure, easy to modify later\n- [ ] Visual quality at Dribbble / Behance showcase level\n- [ ] **Closing report**: condensed design-system declaration + assumptions/flags + (optionally) critique score and alternatives\n\n---\n\n## Collaborating with the User\n\n- **Report work-in-progress thinking**: your closing report carries the v0 role — design-system declaration, key decisions, assumptions\n- Explain decisions using **design language** (\"I tightened the spacing to create a tool-like feel\"), not technical language\n- When the task is ambiguous, state how you read it and what you'd do differently under another reading — the next delegation can pivot\n- Offer alternatives and creative options in the report so the user sees the boundaries of what's possible\n- When summarizing, **only mention important caveats and next steps** — don't recap what you did; the code speaks for itself\n\n---\n\n## References Routing\n\nRead on demand based on task type — don't preload everything (load via `load_skill('web-design-engineer', ref='<name>')`):\n\n| Task | Read |\n|---|---|\n| Slide engine, device frames, Tweaks panel, animation timeline, design canvas, dark mode, data viz, oklch color system, font recommendations | `references/advanced-patterns.md` |\n| Vague request → recommend 3 design directions; extended philosophy library + per-direction visual recipes + AI-prompt templates | `references/design-directions.md` |\n| Task names an anchor (\"Linear-style\" / \"Aesop feeling\") → load **only that one file** | `references/style-recipes/<anchor>.md` (e.g., `linear.md`, `aesop.md`) |\n| Browse the recipe catalog / compare options after Direction Advisor picks a school | `references/style-recipes/INDEX.md` (3 indexes + cross-cutting anti-patterns; then read 1–3 specific recipe files) |\n| Critique mode — detailed scoring rubrics, per-output-type weighting, common-issue catalog (top 10) | `references/critique-guide.md` |\n", Kd = [
+	{
+		name: "references/advanced-patterns.md",
+		description: "Code templates: device frames, slide engine, animation timeline, Tweaks panel, design canvas, dark mode, data viz, oklch color system, font picks, pinned React+CDN tags",
+		getContent: () => "\n# Advanced Reference: Component Patterns & Code Templates\n\nThis file contains advanced patterns and code templates to reference when implementing specific tasks.\n\n## Table of Contents\n\n1. [Responsive Slide Engine](#responsive-slide-engine)\n2. [Device Simulation Frames](#device-simulation-frames)\n3. [Tweaks Panel Implementation](#tweaks-panel-implementation)\n4. [Animation Timeline Engine](#animation-timeline-engine)\n5. [Design Canvas (Multi-option Comparison)](#design-canvas)\n6. [Dark Mode Toggle](#dark-mode-toggle)\n7. [Data Visualization Templates](#data-visualization-templates)\n\n---\n\n## Responsive Slide Engine\n\nFor building fixed-size presentations that auto-fit to any viewport.\n\n**Key conventions**:\n- Internal arrays use 0-indexed, **but numbers displayed to the user are always 1-indexed**\n- Each `<section class=\"slide\">` gets `data-screen-label=\"01 Title\"`, `data-screen-label=\"02 Agenda\"`, etc. for easy reference\n- Control buttons go **outside** the `.stage` scaled container to ensure usability on small screens\n\n```html\n<style>\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { \n    background: #000; \n    display: flex; \n    align-items: center; \n    justify-content: center;\n    height: 100vh;\n    overflow: hidden;\n    font-family: system-ui, sans-serif;\n  }\n  .stage {\n    width: 1920px;\n    height: 1080px;\n    position: relative;\n    transform-origin: center center;\n  }\n  .slide {\n    position: absolute;\n    inset: 0;\n    display: none;\n    padding: 80px;\n  }\n  .slide.active { display: flex; }\n  .controls {\n    position: fixed;\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    gap: 12px;\n    z-index: 1000;\n  }\n  .controls button {\n    padding: 8px 16px;\n    border: none;\n    border-radius: 6px;\n    background: rgba(255,255,255,0.15);\n    color: white;\n    cursor: pointer;\n    font-size: 14px;\n  }\n  .slide-counter {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    color: rgba(255,255,255,0.6);\n    font-size: 14px;\n  }\n</style>\n\n<script>\n  // Auto-fit scaling\n  function scaleStage() {\n    const stage = document.querySelector('.stage');\n    const scaleX = window.innerWidth / 1920;\n    const scaleY = window.innerHeight / 1080;\n    const scale = Math.min(scaleX, scaleY);\n    stage.style.transform = `scale(${scale})`;\n  }\n  window.addEventListener('resize', scaleStage);\n  scaleStage();\n\n  // Slide navigation\n  let current = parseInt(localStorage.getItem('slideIndex') || '0');\n  const slides = document.querySelectorAll('.slide');\n  \n  function showSlide(n) {\n    current = Math.max(0, Math.min(n, slides.length - 1));\n    slides.forEach((s, i) => s.classList.toggle('active', i === current));\n    localStorage.setItem('slideIndex', current);\n    // Display 1-indexed to user, store 0-indexed internally\n    document.querySelector('.slide-counter').textContent = `${current + 1} / ${slides.length}`;\n  }\n  \n  document.addEventListener('keydown', e => {\n    if (e.key === 'ArrowRight' || e.key === ' ') showSlide(current + 1);\n    if (e.key === 'ArrowLeft') showSlide(current - 1);\n  });\n  \n  showSlide(current);\n<\/script>\n```\n\n---\n\n## Device Simulation Frames\n\n### iPhone Frame\n\n```jsx\nconst IPhoneFrame = ({ children, title = \"App\" }) => (\n  <div style={{\n    width: 390,\n    height: 844,\n    borderRadius: 48,\n    border: '12px solid #1a1a1a',\n    overflow: 'hidden',\n    position: 'relative',\n    boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)',\n    background: '#fff'\n  }}>\n    {/* Status bar */}\n    <div style={{\n      height: 54,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '0 24px',\n      fontSize: 14,\n      fontWeight: 600\n    }}>\n      <span>9:41</span>\n      <div style={{\n        width: 126,\n        height: 34,\n        background: '#1a1a1a',\n        borderRadius: 20,\n        position: 'absolute',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        top: 8\n      }} />\n      <span>⚡ 📶</span>\n    </div>\n    {/* Content */}\n    <div style={{ height: 'calc(100% - 54px)', overflow: 'auto' }}>\n      {children}\n    </div>\n    {/* Home indicator */}\n    <div style={{\n      position: 'absolute',\n      bottom: 8,\n      left: '50%',\n      transform: 'translateX(-50%)',\n      width: 134,\n      height: 5,\n      background: '#1a1a1a',\n      borderRadius: 3\n    }} />\n  </div>\n);\n```\n\n### Browser Window Frame\n\n```jsx\nconst BrowserFrame = ({ children, url = \"https://example.com\", title = \"Page\" }) => (\n  <div style={{\n    borderRadius: 12,\n    overflow: 'hidden',\n    boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)',\n    border: '1px solid #e5e5e5'\n  }}>\n    {/* Title bar */}\n    <div style={{\n      background: '#f5f5f5',\n      padding: '12px 16px',\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n      borderBottom: '1px solid #e5e5e5'\n    }}>\n      <div style={{ display: 'flex', gap: 8 }}>\n        <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }} />\n        <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }} />\n        <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c840' }} />\n      </div>\n      <div style={{\n        flex: 1,\n        background: '#fff',\n        borderRadius: 6,\n        padding: '6px 12px',\n        fontSize: 13,\n        color: '#666',\n        border: '1px solid #e0e0e0'\n      }}>\n        {url}\n      </div>\n    </div>\n    {/* Content */}\n    <div style={{ background: '#fff' }}>\n      {children}\n    </div>\n  </div>\n);\n```\n\n---\n\n## Tweaks Panel Implementation\n\n```jsx\nconst TweaksPanel = ({ config, onChange, visible }) => {\n  if (!visible) return null;\n  \n  return (\n    <div style={{\n      position: 'fixed',\n      bottom: 20,\n      right: 20,\n      width: 280,\n      background: 'rgba(24, 24, 27, 0.95)',\n      backdropFilter: 'blur(12px)',\n      borderRadius: 12,\n      padding: 16,\n      color: '#fff',\n      fontSize: 13,\n      zIndex: 9999,\n      boxShadow: '0 20px 60px rgba(0,0,0,0.3)',\n      border: '1px solid rgba(255,255,255,0.1)'\n    }}>\n      <div style={{ fontWeight: 600, marginBottom: 12, fontSize: 14 }}>Tweaks</div>\n      \n      {Object.entries(config).map(([key, value]) => (\n        <div key={key} style={{ marginBottom: 12 }}>\n          <label style={{ display: 'block', marginBottom: 4, opacity: 0.7 }}>\n            {key}\n          </label>\n          {typeof value === 'boolean' ? (\n            <input\n              type=\"checkbox\"\n              checked={value}\n              onChange={e => onChange({ ...config, [key]: e.target.checked })}\n            />\n          ) : typeof value === 'number' ? (\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              value={value}\n              onChange={e => onChange({ ...config, [key]: Number(e.target.value) })}\n              style={{ width: '100%' }}\n            />\n          ) : value.startsWith('#') ? (\n            <input\n              type=\"color\"\n              value={value}\n              onChange={e => onChange({ ...config, [key]: e.target.value })}\n            />\n          ) : (\n            <input\n              type=\"text\"\n              value={value}\n              onChange={e => onChange({ ...config, [key]: e.target.value })}\n              style={{\n                width: '100%',\n                background: 'rgba(255,255,255,0.1)',\n                border: '1px solid rgba(255,255,255,0.2)',\n                borderRadius: 4,\n                padding: '4px 8px',\n                color: '#fff'\n              }}\n            />\n          )}\n        </div>\n      ))}\n    </div>\n  );\n};\n```\n\n---\n\n## Animation Timeline Engine\n\n```jsx\nconst useTime = (duration = 5000) => {\n  const [time, setTime] = React.useState(0);\n  const [playing, setPlaying] = React.useState(true);\n  const frameRef = React.useRef();\n  const startRef = React.useRef();\n  \n  React.useEffect(() => {\n    if (!playing) return;\n    const animate = (timestamp) => {\n      if (!startRef.current) startRef.current = timestamp;\n      const elapsed = (timestamp - startRef.current) % duration;\n      setTime(elapsed / duration); // 0 to 1\n      frameRef.current = requestAnimationFrame(animate);\n    };\n    frameRef.current = requestAnimationFrame(animate);\n    return () => cancelAnimationFrame(frameRef.current);\n  }, [playing, duration]);\n  \n  return { time, playing, setPlaying };\n};\n\nconst Easing = {\n  linear: t => t,\n  easeInOut: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,\n  easeOut: t => 1 - Math.pow(1 - t, 3),\n  easeIn: t => t * t * t,\n  spring: t => 1 - Math.pow(Math.E, -6 * t) * Math.cos(8 * t)\n};\n\nconst interpolate = (t, from, to, easing = Easing.easeInOut) => {\n  const progress = easing(Math.max(0, Math.min(1, t)));\n  return from + (to - from) * progress;\n};\n\n// Usage example:\n// const { time } = useTime(3000);\n// const opacity = interpolate(time, 0, 1);\n// const x = interpolate(time, -100, 0, Easing.spring);\n```\n\n---\n\n## Design Canvas\n\nFor displaying multiple design options side by side for comparison:\n\n```jsx\nconst DesignCanvas = ({ options, columns = 3 }) => (\n  <div style={{\n    display: 'grid',\n    gridTemplateColumns: `repeat(${columns}, 1fr)`,\n    gap: 24,\n    padding: 40,\n    background: '#f8f9fa',\n    minHeight: '100vh'\n  }}>\n    {options.map((option, i) => (\n      <div key={i} style={{\n        background: '#fff',\n        borderRadius: 12,\n        overflow: 'hidden',\n        boxShadow: '0 1px 3px rgba(0,0,0,0.1)'\n      }}>\n        <div style={{\n          padding: '12px 16px',\n          borderBottom: '1px solid #eee',\n          fontSize: 13,\n          fontWeight: 600,\n          color: '#666'\n        }}>\n          Option {String.fromCharCode(65 + i)}: {option.label}\n        </div>\n        <div style={{ padding: 16 }}>\n          {option.content}\n        </div>\n      </div>\n    ))}\n  </div>\n);\n```\n\n---\n\n## Dark Mode Toggle\n\n```jsx\nconst ThemeProvider = ({ children }) => {\n  const [dark, setDark] = React.useState(\n    window.matchMedia('(prefers-color-scheme: dark)').matches\n  );\n  \n  const theme = dark ? {\n    bg: '#0a0a0b',\n    surface: '#18181b',\n    border: '#27272a',\n    text: '#fafafa',\n    textMuted: '#a1a1aa',\n    primary: '#3b82f6'\n  } : {\n    bg: '#ffffff',\n    surface: '#f4f4f5',\n    border: '#e4e4e7',\n    text: '#18181b',\n    textMuted: '#71717a',\n    primary: '#2563eb'\n  };\n  \n  return (\n    <ThemeContext.Provider value={{ theme, dark, setDark }}>\n      <div style={{ background: theme.bg, color: theme.text, minHeight: '100vh' }}>\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  );\n};\n```\n\n---\n\n## Data Visualization Templates\n\n### Chart.js Quick Start\n\n```html\n<canvas id=\"myChart\" width=\"800\" height=\"400\"></canvas>\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"><\/script>\n<script>\n  const ctx = document.getElementById('myChart').getContext('2d');\n  new Chart(ctx, {\n    type: 'line', // bar, pie, doughnut, radar, etc.\n    data: {\n      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],\n      datasets: [{\n        label: 'Revenue',\n        data: [12, 19, 3, 5, 2, 3],\n        borderColor: '#3b82f6',\n        backgroundColor: 'rgba(59, 130, 246, 0.1)',\n        tension: 0.4,\n        fill: true\n      }]\n    },\n    options: {\n      responsive: true,\n      plugins: {\n        legend: { display: false }\n      },\n      scales: {\n        y: { beginAtZero: true, grid: { color: '#f0f0f0' } },\n        x: { grid: { display: false } }\n      }\n    }\n  });\n<\/script>\n```\n\n---\n\n## Color System Best Practices\n\nUse oklch to define a harmonious color system:\n\n```css\n:root {\n  /* oklch-based color system */\n  --primary-h: 250;  /* hue */\n  --primary: oklch(0.55 0.25 var(--primary-h));\n  --primary-light: oklch(0.75 0.15 var(--primary-h));\n  --primary-dark: oklch(0.35 0.2 var(--primary-h));\n  \n  /* Neutrals */\n  --gray-50: oklch(0.98 0.002 250);\n  --gray-100: oklch(0.96 0.004 250);\n  --gray-200: oklch(0.92 0.006 250);\n  --gray-300: oklch(0.87 0.008 250);\n  --gray-400: oklch(0.71 0.01 250);\n  --gray-500: oklch(0.55 0.014 250);\n  --gray-600: oklch(0.45 0.014 250);\n  --gray-700: oklch(0.37 0.014 250);\n  --gray-800: oklch(0.27 0.014 250);\n  --gray-900: oklch(0.21 0.014 250);\n}\n```\n\n---\n\n## Font Recommendations (Non-default Choices)\n\n> ⚠️ **These are experience-based suggestions, not hard rules.**\n> - Always prefer fonts already specified by the brand or design system; only refer to this table when the user hasn't provided any font scheme.\n> - The only hard rule: **Avoid Inter / Roboto / Arial / Fraunces / system-ui — fonts overused by AI-generated content** that instantly signal \"this was assembled by AI.\"\n> - When choosing fonts, focus on \"personality fit\" rather than \"what's trendy.\" The table below lists common high-quality choices, not an exhaustive list.\n\n| Use Case | Recommendation | Google Fonts Name |\n|------|------|------------------|\n| Modern headings | Plus Jakarta Sans | Plus+Jakarta+Sans |\n| Elegant body text | Outfit | Outfit |\n| Technical feel | Space Grotesk | Space+Grotesk |\n| Premium brand | Sora | Sora |\n| Editorial feel | Newsreader | Newsreader |\n| Handwritten style | Caveat | Caveat |\n| Monospace / code | JetBrains Mono | JetBrains+Mono |\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n```\n\n---\n\n## Color × Font Pairing Reference\n\n> ⚠️ **These are experience-based pairing suggestions, not hard rules.** When you have **absolutely no design context**, pick one as a starting point — it's far better than starting from Inter + #3b82f6.\n> Once the user provides a brand / design system / reference site, drop this table immediately and follow their materials.\n\nFor quickly establishing a visual system with personality:\n\n| Style | Primary Color (oklch) | Font Pairing | Best For |\n|---|---|---|---|\n| Modern tech | `oklch(0.55 0.25 250)` blue-violet | Space Grotesk + Inter | SaaS, dev tools, AI products |\n| Elegant editorial | `oklch(0.35 0.10 30)` warm brown | Newsreader + Outfit | Content platforms, blogs, editorial |\n| Premium brand | `oklch(0.20 0.02 250)` near-black | Sora + Plus Jakarta Sans | Luxury, consulting, finance |\n| Lively consumer | `oklch(0.70 0.20 30)` coral | Plus Jakarta Sans + Outfit | E-commerce, lifestyle, social |\n| Minimal professional | `oklch(0.50 0.15 200)` teal-blue | Outfit + Space Grotesk | Data products, dashboards, B2B |\n| Artisan warmth | `oklch(0.55 0.15 80)` caramel | Caveat (decorative) + Newsreader | Food & beverage, education, creative |\n\nAvoid these combos:\n- ❌ Inter + Roboto + blue buttons (peak AI aesthetic)\n- ❌ Fraunces + purple-pink gradients (overused)\n- ❌ More than three font families (visual chaos)\n\n"
+	},
+	{
+		name: "references/critique-guide.md",
+		description: "Critique scoring rubrics: per-output-type weighting, top-10 common issues, detailed 5-dimension scoring",
+		getContent: () => "\n# Critique Mode — Detailed Reference\n\nRead this when running Step 7 of the workflow (user asked for review, or self-check before delivery). The main `SKILL.md` already covers the **5 dimensions and output format**. This file provides **scoring rubrics, per-output-type weighting, and the common-issue catalog**.\n\n**Critique the design, not the designer.** Be specific, actionable, and grounded in design language — not vague taste claims.\n\n---\n\n## The Five Dimensions — Detailed Rubrics\n\n### 1. Philosophy Alignment\n\nHow well does every detail trace back to the chosen design direction (Pentagram-style information architecture, Kenya Hara-style minimalism, etc.)?\n\n| Score | Standard |\n|---|---|\n| 9–10 | Every detail embodies the chosen philosophy; nothing reads as \"borrowed from elsewhere\" |\n| 7–8 | Direction is correct, signature traits land, 1–2 minor drift moments |\n| 5–6 | Intent visible, but mixed-in foreign elements dilute purity (e.g., \"minimalism\" with 6 cards per row) |\n| 3–4 | Surface mimicry only; the underlying values aren't understood |\n| 1–2 | No discernible relationship to any stated direction |\n\n**What to look for**:\n- Are signature moves of the chosen designer/studio actually present?\n- Do color, type, layout, motion all agree on the same philosophy?\n- Any \"self-contradicting\" elements? (Picked Kenya Hara then crammed the page full → contradiction)\n\n### 2. Visual Hierarchy\n\nDoes the eye flow where the designer intends?\n\n| Score | Standard |\n|---|---|\n| 9–10 | Eye flows naturally along the intended path; zero friction reading the information |\n| 7–8 | Primary/secondary clear; 1–2 spots where hierarchy is muddy |\n| 5–6 | Title vs. body distinguishable, but middle layers (subtitles, captions) collapse together |\n| 3–4 | Information sits flat with no clear entry point |\n| 1–2 | Chaotic — viewer doesn't know where to look first |\n\n**What to look for**:\n- Title vs. body size ratio ≥ 2.5× (ideally 4–6× for hero)?\n- Color / weight / size building 3–4 clear levels?\n- Whitespace actively guiding the eye?\n- **Squint test**: squint at the screen — is the hierarchy still legible?\n\n### 3. Craft Quality\n\nPixel-level execution: alignment, spacing, color discipline.\n\n| Score | Standard |\n|---|---|\n| 9–10 | Pixel-perfect; alignment, spacing, color all flawless |\n| 7–8 | Refined overall; 1–2 minor alignment or spacing issues |\n| 5–6 | Basically aligned, but spacing is inconsistent and color use is unsystematic |\n| 3–4 | Obvious alignment errors, chaotic spacing, too many colors |\n| 1–2 | Sloppy — looks like a draft |\n\n**What to look for**:\n- Consistent spacing system (8pt grid: 8 / 16 / 24 / 32 / 48 / 64)?\n- Same-class elements use identical spacing?\n- Color count controlled (typically ≤ 4 — primary + accent + neutral scale + 1 emphasis)?\n- Font families ≤ 2 (1 display + 1 body)?\n- Edges align precisely?\n\n### 4. Functionality\n\nDoes each element earn its place?\n\n| Score | Standard |\n|---|---|\n| 9–10 | Every element serves a goal; zero redundancy |\n| 7–8 | Function-led overall, with minor decoration that could be cut |\n| 5–6 | Usable, but obvious decorative elements compete for attention |\n| 3–4 | Form > function; users have to work to find information |\n| 1–2 | Decoration drowns the content's ability to communicate |\n\n**What to look for**:\n- The deletion test: \"If I delete this element, does the design get worse?\" If no → delete\n- Is the CTA / key information in the most prominent position?\n- Anything added \"because it looked good\"?\n- Is the information density appropriate for the medium? (PPT sparse; PDF can be denser; landing page conversion-focused)\n\n### 5. Originality\n\nAvoids clichés while staying coherent within the philosophy.\n\n| Score | Standard |\n|---|---|\n| 9–10 | Refreshing; finds a unique expression *within* the chosen philosophy |\n| 7–8 | Has its own ideas; not template-by-numbers |\n| 5–6 | Average; reads as a template execution |\n| 3–4 | Heavy use of clichés (gradient orbs for \"AI\", chat bubbles for \"conversation\") |\n| 1–2 | Pure template / stock-asset assembly |\n\n**What to look for**:\n- Has it avoided the AI-slop list (purple gradients, emoji icons, left-border accent cards, Inter as display)?\n- Is there at least one \"unexpected but right\" decision?\n- Any element that screams \"made by AI\"?\n\n---\n\n## Per-Output-Type Weighting\n\nDifferent outputs need different priorities. When scoring, weight these dimensions higher for each context:\n\n| Output type | Most important | Secondary | Can relax |\n|---|---|---|---|\n| Landing page / marketing site | Functionality, Visual hierarchy | Originality | — (must be all-around) |\n| Dashboard / data product | Functionality, Craft quality | Visual hierarchy | Originality (clarity wins) |\n| HTML slide deck | Visual hierarchy, Functionality | Craft | Originality (legibility wins) |\n| Mobile app prototype | Functionality, Craft | Visual hierarchy | Philosophy alignment (usability wins) |\n| Brand launch animation / hero film | Originality, Visual hierarchy | Philosophy | Functionality (it's the moment, not the form) |\n| Editorial / portfolio | Originality, Philosophy | Visual hierarchy | Functionality (vibe matters most) |\n| Documentation site | Functionality, Visual hierarchy | Craft | Originality (find-the-answer wins) |\n| Interactive prototype for user testing | Functionality, Visual hierarchy | Craft | Originality (testing the flow, not the look) |\n\n---\n\n## Common Issues — Top 10 Catalog\n\nUse these as a checklist when running a critique. Each entry has the issue, why it matters, and the fix.\n\n### 1. AI-tech cliché\n**Issue**: Gradient orbs, digital rain, blue circuit boards, robot faces\n**Why it's a problem**: Audience is exhausted by these — your product becomes indistinguishable\n**Fix**: Use abstract metaphors instead of literal symbols (e.g., a \"conversation\" metaphor instead of a chat bubble icon)\n\n### 2. Insufficient type-size hierarchy\n**Issue**: Title and body are too similar in size (< 2.5×)\n**Why**: Users can't find key information quickly\n**Fix**: Title at least 3× body (16px body → 48–64px title; for hero, 6× is normal)\n\n### 3. Too many colors\n**Issue**: 5+ colors in use without a clear primary/secondary structure\n**Why**: Visual chaos; weak brand identity\n**Fix**: Limit to 1 primary + 1 secondary + 1 accent + grayscale; everything else has to justify itself\n\n### 4. Inconsistent spacing\n**Issue**: Element spacing chosen ad-hoc with no system\n**Why**: Reads as unprofessional; visual rhythm broken\n**Fix**: Adopt an 8pt grid (only use spacing values from {8, 16, 24, 32, 48, 64, 96})\n\n### 5. Insufficient whitespace\n**Issue**: Every region is filled with content\n**Why**: Cognitive overload reduces information transfer; dense ≠ informative\n**Fix**: Whitespace should be at least 40% of total area (60%+ for minimalist)\n\n### 6. Too many fonts\n**Issue**: 3+ font families in use\n**Why**: Visual noise; weakens unity\n**Fix**: At most 2 (1 display + 1 body); use weight and size variation for richness\n\n### 7. Inconsistent alignment\n**Issue**: Mixed left-, center-, and right-aligned blocks\n**Why**: Breaks visual order\n**Fix**: Pick one alignment (typically left) and apply globally; centered alignment only for hero / pull-quote moments\n\n### 8. Decoration eclipses content\n**Issue**: Background patterns / gradients / shadows steal focus from primary content\n**Why**: Inverts the priority — users came for information, not for decoration\n**Fix**: Apply the deletion test: \"if I remove this decoration, does the design get worse?\" If no → remove\n\n### 9. Cyber-neon overuse\n**Issue**: Dark navy `#0D1117` + neon-glow accents\n**Why**: This is the GitHub-dark / \"AI dev tool\" cliché — every clone looks the same\n**Fix**: Pick a more distinctive palette; if dark mode is mandatory, choose a non-default base (deep warm gray, near-black with hint of color)\n\n### 10. Information density mismatched to medium\n**Issue**: A wall of text on a slide; 10 elements crammed into a social cover\n**Why**: Different media have different optimal density\n**Fix**:\n- Slides: 1 core idea per page\n- Cover image: 1 visual focal point\n- Infographic: layered (overview → detail)\n- PDF / docs: can be dense, but needs clear navigation\n\n---\n\n## Output Template (copy this when delivering a critique)\n\n```markdown\n## Design Critique\n\n**Overall: X.X / 10** [Excellent (8+) / Good (6–7.9) / Needs work (4–5.9) / Failing (<4)]\n\n**By dimension**:\n- Philosophy alignment: X / 10 — [one-sentence reason]\n- Visual hierarchy: X / 10 — [one-sentence reason]\n- Craft quality: X / 10 — [one-sentence reason]\n- Functionality: X / 10 — [one-sentence reason]\n- Originality: X / 10 — [one-sentence reason]\n\n### Keep\n- [Specific things done well, in design language — not \"the colors are nice\", say \"the muted terracotta against warm off-white reads as confident and editorial\"]\n\n### Fix (sorted by severity)\n\n**1. [Issue name]** — ⚠️ Critical / ⚡ Important / 💡 Polish\n- Current: [what it looks like now]\n- Why: [why it's a problem, anchored in a principle above]\n- Fix: [concrete change with specific values — \"increase title size from 32px to 56px\", not \"make titles bigger\"]\n\n**2. [Issue name]** — ⚠️ / ⚡ / 💡\n…\n\n### Quick Wins (top 3 if you only have 5 minutes)\n- [ ] [Highest-impact change that takes the least time]\n- [ ] [Second]\n- [ ] [Third]\n```\n\n---\n\n## Critique Anti-Patterns\n\n❌ **Vague taste claims**: \"the colors are off\" → bad. \"The accent saturation is too high — at oklch(0.65 0.25 25) it competes with the primary; reduce to 0.18 chroma to subordinate it\" → good.\n\n❌ **Praise without specifics**: \"looks great!\" provides zero learning. Always say *what* is great and *why*.\n\n❌ **Mixing severity**: putting a critical hierarchy bug next to a polish-level color tweak in the same list. Always sort by ⚠️ → ⚡ → 💡.\n\n❌ **More than 7 fix items**: cognitive overload. If there are more, group them — \"five spacing inconsistencies\" as one item, not five.\n\n❌ **Critiquing without grounding**: every \"Fix\" should reference a principle (hierarchy, craft, philosophy, etc.) so the user understands the *why*, not just the *what*.\n\n❌ **Critiquing the designer instead of the design**: \"you didn't think this through\" is unhelpful and not the agent's role. \"This element doesn't earn its place — consider removing\" is the right framing.\n\n"
+	},
+	{
+		name: "references/design-directions.md",
+		description: "Design Direction Advisor library: 6-school taxonomy, per-school anchor tables, AI-prompt templates (for vague \"give me directions\" requests)",
+		getContent: () => "\n# Design Direction Advisor — Extended Reference\n\nRead this when the request is vague (\"make something nice\", \"I don't know what style I want\") and no design context exists. The main `SKILL.md` already covers the **mechanism** (3 differentiated directions, named designer references, hard rule against same-school picks). This file provides the **school taxonomy** — six high-level philosophical lenses, each with named anchors and the sample copy you use to recommend it.\n\n> **Terminology lock**: this file deals in **schools** (six high-level lenses) and **anchors** (named studios / brands / designers per school). The companion folder `style-recipes/` contains 25 **recipe** files — one file per anchor — with concrete, ready-to-paste configurations. When a user picks a school here, hand them off to the recipe files in that school for concrete palette / typography / spacing values. Load only the recipe files you actually need; the catalog index is at `style-recipes/INDEX.md`.\n\n---\n\n## How to Use This File\n\n1. Read the user's request and the four positioning questions (narrative role / viewing distance / visual temperature / capacity)\n2. Pick **3 schools from different rows** below that genuinely fit the user's context\n3. Recommend each with: named designer/studio + 2–3 lines of \"why this fits you\" + 3–4 signature visual cues + (optional) one famous touchstone work\n4. Wait for the user to pick one (or remix two)\n5. **After the user picks a school → read 2–3 recipe files from `style-recipes/` in that school** (e.g., picked *Information Architecture* → read `style-recipes/pentagram.md` + `style-recipes/bloomberg-terminal.md` + `style-recipes/tufte-dataink.md`). The recipe files carry the concrete values; this file does not duplicate them.\n6. The chosen recipe becomes the design context — write it into `brand-spec.md` and proceed to the main workflow\n\n---\n\n## The Six Schools (1 of 3 must come from each different row)\n\n### 1. Information Architecture\n\n**Vibe**: Rational, data-driven, restrained, hierarchy-led\n**Best for**: Safe / professional / B2B / data products / institutional\n**Why it works**: Treats the page as a *system* of typographic and grid relationships. The \"design\" disappears so the information speaks.\n\n| Anchor | What to borrow |\n|---|---|\n| **Pentagram** (Paula Scher, Michael Bierut) | Bold typography as image; identity through type relationships; sparing color use |\n| **Edward Tufte** | Maximum data-ink ratio; small multiples; smallest sufficient difference |\n| **Massimo Vignelli** | Helvetica-style restraint; strict grid; 6 typefaces is enough for a lifetime |\n| **Bloomberg Terminal** | Mission-critical density; amber-on-near-black; monospaced data |\n| **NYT / Broadsheet editorial** | Multi-deck hierarchy; serif headlines; place-rich photography |\n\n**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`pentagram`](./style-recipes/pentagram.md) · [`vignelli-swiss-helvetica`](./style-recipes/vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./style-recipes/bloomberg-terminal.md) · [`tufte-dataink`](./style-recipes/tufte-dataink.md) · [`nyt-the-daily`](./style-recipes/nyt-the-daily.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.\n\n**Sample copy when recommending**:\n> \"Pentagram-style information architecture — your dashboard becomes a system of typographic relationships rather than a UI. Headlines do the heavy visual lifting; everything else recedes. Best when you want institutional credibility and your data is the hero.\"\n\n---\n\n### 2. Editorial / Minimalist\n\n**Vibe**: Whitespace, refined typography, quiet luxury, considered\n**Best for**: Premium / high-end / quiet / lifestyle / prestige B2C\n**Why it works**: Treats whitespace as the primary design material. The reader/viewer gets room to breathe; restraint reads as confidence.\n\n| Anchor | What to borrow |\n|---|---|\n| **Kenya Hara (MUJI)** | Whiteness as a value; *ex-formation*; emptiness as fullness |\n| **Apple HIG / Marketing** | Generous negative space; hero product on white; one-thought-per-screen |\n| **Dieter Rams (Braun)** | \"Less but better\"; honest materials; functional decoration is a contradiction |\n| **Aesop** | Cream/sage palette; serif copy as conversation; product as protagonist |\n| **Monocle** | Magazine-grade kicker / headline / dek hierarchy; international considered |\n\n**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`apple-hig`](./style-recipes/apple-hig.md) · [`muji-kenya-hara`](./style-recipes/muji-kenya-hara.md) · [`aesop`](./style-recipes/aesop.md) · [`dieter-rams-braun`](./style-recipes/dieter-rams-braun.md) · [`monocle-magazine`](./style-recipes/monocle-magazine.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.\n\n**Sample copy when recommending**:\n> \"Kenya Hara-style editorial minimalism — the page is mostly whitespace, with one serif headline carrying emotional weight and the product anchored in a single hero shot. Best when premium positioning matters more than feature density.\"\n\n---\n\n### 3. Motion / Experimental\n\n**Vibe**: Bold, generative, sensory, kinetic, technical\n**Best for**: Distinctive / launch films / brand moments / awwwards-style / tech storytelling\n**Why it works**: Movement and surprise are the brand. Static screenshots can't capture the experience.\n\n| Anchor | What to borrow |\n|---|---|\n| **Field.io** | Generative type and form; data-driven motion; the page is a system that *makes* itself |\n| **Active Theory** | WebGL hero moments; physics-driven interactions; cinematic transitions |\n| **Resn** | Storytelling through scroll; payoff for exploration; surprise is the reward |\n\n**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`field-io`](./style-recipes/field-io.md) · [`active-theory`](./style-recipes/active-theory.md) · [`resn-storytelling`](./style-recipes/resn-storytelling.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.\n\n> Note: Vercel / Linear marketing pages use motion *as restraint*, not as the show — they live in the **Modern Tool / Builder SaaS** school below, not here. Reach for this school only when motion is genuinely the brand.\n\n**Sample copy when recommending**:\n> \"Field.io-style motion-led identity — the page generates itself in front of the visitor through choreographed scroll-driven sequences. Best when the launch *moment* matters and your audience will share clips. Note: this is the most labor-intensive of the three; budget accordingly.\"\n\n---\n\n### 4. Brutalist / Raw\n\n**Vibe**: Anti-design, honest, unpolished, confrontational\n**Best for**: Differentiated / confident / counter-culture / publishing / artist platforms\n**Why it works**: Ugly-on-purpose reads as authentic in a sea of polished AI defaults. The lack of consensus aesthetic *is* the aesthetic.\n\n| Anchor | What to borrow |\n|---|---|\n| **Are.na** | Raw HTML feel; system fonts on purpose; content > chrome |\n| **Bloomberg Businessweek covers** (Richard Turley era) | Typographic violence; magazine grid abused; copy as image |\n| **Balenciaga** (post-2017) | Default browser styling weaponized; hero text in Helvetica at absurd scale |\n| **Craigslist (yes, really)** | Information density without apology; everything is a link |\n\n**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`are-na`](./style-recipes/are-na.md) · [`bloomberg-businessweek-turley`](./style-recipes/bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./style-recipes/balenciaga-post-2017.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.\n\n**Sample copy when recommending**:\n> \"Are.na/Bloomberg-style brutalism — system fonts, harsh type contrast, no rounded corners, no shadows. Confrontational on purpose. Best when you're a strong contrarian voice and want to repel the crowd that wants 'modern SaaS.' Warning: half-measures here look broken, not bold.\"\n\n---\n\n### 5. Warm Humanist\n\n**Vibe**: Approachable, organic, hand-touched, friendly without being childish\n**Best for**: Lifestyle / education / approachable B2C / community products / health\n**Why it works**: Conveys that real humans made this for real humans. Counters the \"robot wrote my landing page\" perception.\n\n| Anchor | What to borrow |\n|---|---|\n| **Mailchimp** (early Freddie era) | Hand-drawn marks; warm illustration; personality in microcopy |\n| **Stripe Press** | Editorial serif + warm palette + tactile object photography |\n| **Studio Dumbar** | Identity through movement and personality, not through restraint |\n| **Headspace / Calm** | Soft pastels, rounded everything, breathing-pace motion |\n\n**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`mailchimp-freddie`](./style-recipes/mailchimp-freddie.md) · [`stripe-press`](./style-recipes/stripe-press.md) · [`headspace-meditation`](./style-recipes/headspace-meditation.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.\n\n> Note: Notion (pre-AI era) borrows from this school's friendly tone but lives in the **Modern Tool / Builder SaaS** school below — it's a tool first, warmth second.\n\n**Sample copy when recommending**:\n> \"Stripe Press / early Mailchimp warmth — humanist serifs, cream palette, illustrations that feel hand-touched. Best when you want trust and approachability over institutional polish. Tone is 'friend who happens to be expert,' not 'expert addressing client.'\"\n\n---\n\n### 6. Modern Tool / Builder SaaS\n\n**Vibe**: Quiet luxury for tools, hairline detail, warm dark + monospace accents\n**Best for**: Developer tools, B2B SaaS, AI tools, infrastructure / platform products, productivity apps\n**Why it works**: Confident restraint reads as \"made by people who use tools,\" not \"made by marketers.\" Hairline borders, monospace shortcut chips, and a single accent color signal craft-led culture without shouting. This is the most under-served school in AI-default output — every model wants to reach for the purple-pink-blue gradient instead.\n\n| Anchor | What to borrow |\n|---|---|\n| **Linear** | Hairline 1px borders, warm dark ground, selective purple accent < 5% of pixels, keyboard-first chips |\n| **Vercel** (recent) | Black + white precision broken by *one* feathered gradient mesh; deploy-log realism in the hero |\n| **Raycast** | Glassy command-palette as hero; per-extension color dots used as small accents |\n| **Notion** (pre-AI era) | Friendly serif headlines + emoji-as-icon on cream surfaces; structure first, warmth second |\n\n**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`linear`](./style-recipes/linear.md) · [`vercel-mesh`](./style-recipes/vercel-mesh.md) · [`raycast`](./style-recipes/raycast.md) · [`notion-pre-ai`](./style-recipes/notion-pre-ai.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.\n\n**Sample copy when recommending**:\n> \"Linear-style modern-tool aesthetic — warm dark ground, hairline 1px borders, a single purple accent used on less than 5% of pixels, monospace shortcut chips. Best when your audience is technical and 'serious but designed' matters more than 'fun and accessible.' This is the recipe that defends most directly against AI-default Inter + blue button + 16px-radius output.\"\n\n---\n\n## When the User Picks (or Remixes)\n\nCommon user responses:\n\n- **\"I'll go with #2.\"** → Direction confirmed. Write it into `brand-spec.md`. Proceed to Step 2 with this as design context.\n- **\"I like A's color but C's layout.\"** → Confirm the remix in writing (\"So: minimalist editorial palette + motion-led layout choreography. Right?\"), then proceed.\n- **\"None of these feel right — show me more.\"** → Ask one targeted question to narrow (\"Are you closer to formal/institutional or playful/expressive?\"), then offer 3 fresh directions from rows you didn't show before.\n- **\"I don't know, you pick.\"** → Pick the safest one (usually Editorial / Minimalist), state your reasoning, and propose a 5-minute v0 to validate before committing.\n\n---\n\n## AI-Prompt Templates (when generating imagery to support a direction)\n\nFormat: `[philosophy DNA] + [content description] + [technical params]`\n\n✅ **Good** (specific characteristics):\n> \"Kenya Hara-influenced minimalism with 80% whitespace, single muted terracotta (#C04A1A) accent, GT Sectra serif headline, single product hero on warm off-white (#F2EFE8) ground, soft top-down lighting, 3:2 aspect\"\n\n❌ **Bad** (style names without DNA):\n> \"minimalist style, premium feel, high quality\"\n\nAlways include:\n- Color HEX (not \"warm\" / \"cool\")\n- Aspect ratio and dimensions\n- Composition rules (rule-of-thirds, centered, asymmetric)\n- What to *avoid* (e.g., \"no purple gradient, no emoji, no rounded cards\")\n\n> Each recipe file in `style-recipes/` ships a pre-written **AI prompt seed** tuned to that recipe's DNA — start from the one you're using rather than writing prompts from scratch.\n\n---\n\n## Anti-Patterns in Direction Recommendation\n\n❌ **Recommending 3 picks from the same row** — the user can't tell them apart; the entire point of \"differentiated directions\" collapses\n\n❌ **Recommending \"minimalism\" / \"modern\" / \"clean\"** as the direction name — these are not directions, they are AI-default words. Always anchor on a named designer/studio.\n\n❌ **Recommending without any \"why this fits you\"** — the user wanted *guidance*, not a multiple-choice quiz. Each option must explain its fit to their context (audience, purpose, budget, brand maturity).\n\n❌ **Showing 5+ directions** — choice paralysis. 3 is the sweet spot. If the first 3 all miss, ask one narrowing question and offer 3 fresh ones.\n\n❌ **Asking the user to score each direction 1–10** — that's offloading the recommendation back to them. Make a recommendation; the user will agree or push back.\n\n"
+	},
+	{
+		name: "references/style-recipes/active-theory.md",
+		description: "Active Theory (Cinematic WebGL) · Cinematic web experiences, WebGL heroes, physical-feeling interaction",
+		getContent: () => "\n# active-theory — Active Theory (Cinematic WebGL)\n\n- **School**: Motion / Experimental\n- **Vibe**: Cinematic web experiences, WebGL heroes, physical-feeling interaction\n- **Best for**: Brand launch sites, game / entertainment products, \"experience marketing\" pieces\n- **Touchstone**: activetheory.net, NASA / Apple WWDC dev portals they've made, Doritos / movie tie-in launches\n\n**Palette**\n- Often a single dramatic hue from the project's content — black + one signature color from the brand or film\n- High contrast — deep black + bright accent\n- Tinted neutrals — never plain gray; gray-with-cast (cool blue cast for sci-fi, warm amber for cinematic)\n\n**Typography**\n- Display: a strong grotesque or a custom display face built for the campaign — Druk, Editorial New, ABC Diatype Mono\n- Body type secondary — most content rides over imagery; less reading, more witnessing\n- All-caps display common, with very tight or very open tracking depending on tone\n\n**Spacing**: cinematic — content sits centered or in unexpected corners against a full-bleed canvas\n\n**Radius**: 0\n\n**Shadow**: from WebGL lighting, not CSS\n\n**Motion**: feature-film-grade. Camera moves through a 3D space. Physics-driven debris / particles. The page is a stage.\n\n**Signature moves**\n- A full-screen WebGL hero scene that the user moves through (scroll = camera path)\n- Real-time physics or particle systems responding to cursor / device tilt\n- Carefully art-directed transitions between scenes (not generic fades)\n- Sound design integrated (subtle ambient audio that ducks during text passages)\n- A single moment of maximum impact — the recipe builds toward one payoff frame\n\n**Avoid**\n- Many small WebGL moments (one big set-piece is the recipe, not five small ones)\n- Trying to ship a content-heavy site this way (cinematic recipes work for marketing moments, not docs)\n- Reaching for off-the-shelf Three.js demos (this recipe demands hand-crafted scenes — generic WebGL reads as cheap)\n\n**AI prompt seed**\n> Cinematic VFX still, single dramatic moment from a sci-fi launch film, key light from one direction, deep shadows, single brand-accent hue floating in the scene, particle debris in air, 2.39:1 aspect.\n\n**Don't use when**\n- Performance / accessibility constraints rule out heavy WebGL\n- The product is utilitarian (this recipe is for moments, not for daily use)\n- The build budget is sub-3-weeks\n\n---\n\n> **Same school — Motion / Experimental**: [`field-io`](./field-io.md) · [`resn-storytelling`](./resn-storytelling.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/aesop.md",
+		description: "Aesop Skincare · Apothecary refinement, sage and ink, serif copy as conversation",
+		getContent: () => "\n# aesop — Aesop Skincare\n\n- **School**: Editorial / Minimalist\n- **Vibe**: Apothecary refinement, sage and ink, serif copy as conversation\n- **Best for**: Premium consumer goods (skincare, candles, eyewear), restaurants with literary aspirations, hospitality\n- **Touchstone**: aesop.com, Aesop store windows, the brown amber bottle\n\n**Palette**\n- Ground: `#E8E4D9` (warm chamois) — sometimes `#F2EFE5`\n- Ink: `#1B1B1B` (true near-black for copy)\n- Sage muted: `#7A8470`\n- Amber bottle accent: `#7A4623` (used very sparingly, e.g., a single rule or seal mark)\n- Cream surface: `#F0EDE4`\n\n**Typography**\n- Display & body: a single transitional serif at every size — Suisse Works, Lyon Text, or GT Sectra (weight 400, italic available). Aesop pairs serif for body copy with a single sans for UI labels (Söhne or Helvetica Now).\n- Body size: 16–18px; line-height ~1.65\n- Labels in small caps (10–11px, letter-spaced 0.12em)\n\n**Spacing**: 8 / 16 / 24 / 40 / 72 / 120\n\n**Radius**: 0 throughout, including form fields. Aesop is square-edged.\n\n**Shadow**: none.\n\n**Motion**: subtle fades, slow drawer slide-ins (~450ms ease-out). Never spring-bounce.\n\n**Signature moves**\n- Body copy reads like product writing in a literary magazine — long, well-cadenced sentences, justified text, no marketing punchiness\n- Product is photographed on a warm chamois surface with a single sage prop (leaf, marble dish, linen) and a long shadow\n- Small-caps section labels (`INGREDIENTS` / `RITUAL`) above each block\n- All-text navigation in the masthead, letter-spaced\n- Asymmetric layouts: image left, generous right-margin block of copy; never centered-everything\n\n**Avoid**\n- Bold weights anywhere — Aesop is all regular and italic\n- Color other than sage / amber / ink — no blues, no purples, no UI-blue accents\n- Pop-up modals (Aesop's UI politely waits)\n- Lifestyle stock photography of smiling models — props and product only\n\n**AI prompt seed**\n> Amber-glass apothecary bottle on warm chamois #E8E4D9 textured paper, single linen napkin and dried sage sprig, raking afternoon window light, deep soft shadow at lower right, 4:5, editorial product photography, color grading warm with slight green cast.\n\n**Don't use when**\n- The product is software or digital-first — Aesop's tactile object photography defines half the recipe; you can't fake it with CSS\n- The audience expects price-comparison utility — Aesop never shows pricing prominently\n- The voice needs to be funny or casual — Aesop is sincere and slow\n\n---\n\n> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/apple-hig.md",
+		description: "Apple Human Interface · Generous space, hero product on white, one thought per screen",
+		getContent: () => "\n# apple-hig — Apple Human Interface\n\n- **School**: Editorial / Minimalist\n- **Vibe**: Generous space, hero product on white, one thought per screen\n- **Best for**: Premium hardware, premium software, \"this product deserves a stage\" feel\n- **Touchstone**: apple.com product pages, Apple keynote slides, HIG documentation\n\n**Palette**\n- Ground: `#FFFFFF` (paper-pure white) or `#000000` (deep black, hero film moments only)\n- Ink: `#1D1D1F` (Apple's not-quite-black)\n- Soft surface: `#F5F5F7`\n- Muted text: `#86868B`\n- Accent (sparingly): system-blue `#0071E3`\n\n**Typography**\n- Display: SF Pro Display (weight 600 for headlines, 400 for sub-display) — fall back to Inter Tight only when SF Pro is unreachable\n- Body: SF Pro Text at 17px, line-height ~1.47\n- Captions: SF Pro at 12–14px, weight 400, color `#86868B`\n\n**Spacing**: 4 / 8 / 16 / 24 / 40 / 64 / 96 / 160. Section breaks are large (160px+ vertical). Headlines breathe.\n\n**Radius**: 12 (small components) / 18 (cards) / 22 (large panels). Apple is rarely sharp-cornered, never gummy-bear rounded.\n\n**Shadow**: barely visible. `0 1px 2px rgba(0,0,0,0.04)` at most. Elevation through whitespace and color contrast, not shadow.\n\n**Motion**: cubic-bezier expo-out; durations 350–650ms for layout moves, 150–250ms for hover. Never bouncy. Often a slow Ken Burns on hero imagery.\n\n**Signature moves**\n- One product photograph centered on whitespace, occupying ~40% of the hero\n- Hero headline in big display weight, body line below in muted gray (`#86868B`), single CTA in system-blue text-link form (no chunky button on hero — that comes later)\n- Section anatomy: tiny eyebrow label → big headline → one paragraph → one product shot → repeat. No tabs, no cards, no bento.\n- Hairline `#D2D2D7` dividers between sections, never anything heavier\n- Numbers are display-weight characters (e.g., a stat reads `12.9″`, with the `″` set in a smaller weight)\n\n**Avoid**\n- Any gradient mesh, glow, or \"tech atmosphere\" — Apple's gradients are almost always subtle silver-to-charcoal on a product surface, not background decoration\n- Stacking multiple CTAs in the hero\n- Card grids of features (Apple uses long vertical sections, one idea each)\n- Emoji of any kind on marketing pages\n\n**AI prompt seed** (for hero imagery)\n> Studio-lit product photograph, single object centered on pure-white #FFFFFF ground, soft top-down diffused light, subtle floor reflection, 16:9, no text, no people, no shadow drama, color grading neutral.\n\n**Don't use when**\n- The product is software-only and doesn't have a \"hero object\" to photograph — you'll end up with a blank stage\n- The brand wants to feel scrappy / startup / accessible — Apple HIG reads as expensive and serious\n- Audience is anti-tech-corporate — it'll feel \"stale Apple cosplay\"\n\n---\n\n> **Same school — Editorial / Minimalist**: [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/are-na.md",
+		description: "Are.na (Honest Web) · System fonts on purpose, content > chrome, the web of the late 90s but considered",
+		getContent: () => "\n# are-na — Are.na (Honest Web)\n\n- **School**: Brutalist / Raw\n- **Vibe**: System fonts on purpose, content > chrome, the web of the late 90s but considered\n- **Best for**: Indie tools, creative platforms, \"research-flavored\" products, artist communities\n- **Touchstone**: are.na, the Are.na annual\n\n**Palette**\n- Ground: `#FFFFFF`\n- Ink: `#000000`\n- Are.na blue link: `#0000EE` (the classic browser-default blue, used unironically)\n- Visited link: `#551A8B` (also classic browser-default)\n- Hairline: `#CCCCCC`\n- Optional: warm cream surface `#F4F1E8` for cards\n\n**Typography**\n- Display & body: system serif (Times / Georgia) and / or system sans (the OS's default sans) on purpose\n- No custom font loading — the recipe leans on letting the browser pick\n- Body at 14–16px, line-height ~1.45\n- Italic and underlined links (also browser-default)\n\n**Spacing**: 4 / 8 / 16 / 24 / 32. Tight. Content-dense.\n\n**Radius**: 0\n\n**Shadow**: none\n\n**Motion**: none, or instant\n\n**Signature moves**\n- Underlined blue links, visited purple — left as browser default\n- Headings are just larger versions of body type, no special font\n- Tables, lists, and prose all flow without ornament\n- Footers are tiny, plain, link-rich (the early-web \"all links\" footer)\n- Cards (if used) are flat rectangles with a 1px gray border and no shadow\n\n**Avoid**\n- Custom fonts of any kind\n- Color other than the blue / purple link colors and the ink + ground\n- Hover animations, transitions of any kind\n- Modals, tooltips, micro-interactions\n- Any sense of \"polish\"\n\n**AI prompt seed**\n> Found-photograph collage on plain white paper, mixed sources, no Photoshop polish, slight imperfection, hand-cut feel, 4:3.\n\n**Don't use when**\n- The brand needs to feel \"premium\" — Are.na's recipe explicitly rejects premium signaling\n- The audience expects modern SaaS UX cues — they may bounce, reading the page as broken\n- Half-measures will be tempted — commit fully or pick another recipe; partial Are.na looks broken, not curated\n\n---\n\n> **Same school — Brutalist / Raw**: [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/balenciaga-post-2017.md",
+		description: "Balenciaga (post-Demna era) · Default browser styling weaponized, Helvetica at absurd scale, anti-luxury luxury",
+		getContent: () => "\n# balenciaga-post-2017 — Balenciaga (post-Demna era)\n\n- **School**: Brutalist / Raw\n- **Vibe**: Default browser styling weaponized, Helvetica at absurd scale, anti-luxury luxury\n- **Best for**: Fashion / counter-culture / fragrance brands, \"we're too cool to design this\" positioning\n- **Touchstone**: balenciaga.com (any 2018+ snapshot via Wayback), Vetements campaigns, post-2017 luxury anti-design\n\n**Palette**\n- Ink: `#000000`\n- Ground: `#FFFFFF`\n- One muted off-white surface: `#F5F4F0`\n- No color. None. If a color appears it's in a single photograph and never as a UI element.\n\n**Typography**\n- Display & body: Helvetica or Arial — all weights, all sizes, *only this one family*\n- Headlines often set in all-caps at hero scale (140px+)\n- Body type small — 11–13px\n- Mixing weight is fine; mixing family is not\n\n**Spacing**: 8 / 16 / 24 / 40 — restrained, but not luxurious-spacious; more \"we didn't bother to soften it\"\n\n**Radius**: 0\n\n**Shadow**: none\n\n**Motion**: none — pages don't animate. Hover at most changes underline.\n\n**Signature moves**\n- All-caps Helvetica headlines at extreme scale, tightly tracked, often left-aligned hard against the page edge\n- Product photography is editorial / fashion-style — model + product, harsh lighting, awkward poses; never the smiling-stock-model pattern\n- Navigation is plain text links, sometimes just a vertical list at the top of the page\n- Captions and metadata stripped to minimum (model name, designer, location)\n- No buttons styled as buttons — CTAs are underlined text links\n\n**Avoid**\n- Any font other than Helvetica / Arial\n- Color\n- Polished UI affordances (rounded buttons, drop shadows, hover effects)\n- Decorative anything\n\n**AI prompt seed**\n> Fashion editorial photograph, single model against a plain off-white #F5F4F0 backdrop, harsh direct flash, awkward static pose, deadpan expression, 4:5.\n\n**Don't use when**\n- The brand has no fashion / counter-culture claim — recipe will read as cosplay\n- The audience expects to be \"sold to\" — Balenciaga's recipe ignores the audience on purpose\n- Conversion is critical — this recipe converts the in-group, not the casual visitor\n\n---\n\n> **Same school — Brutalist / Raw**: [`are-na`](./are-na.md) · [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/bloomberg-businessweek-turley.md",
+		description: "Bloomberg Businessweek (Turley Era) · Typographic violence, magazine grid abused, copy *is* image",
+		getContent: () => "\n# bloomberg-businessweek-turley — Bloomberg Businessweek (Turley Era)\n\n- **School**: Brutalist / Raw\n- **Vibe**: Typographic violence, magazine grid abused, copy *is* image\n- **Best for**: Editorial features, agency portfolios, opinionated content sites\n- **Touchstone**: Bloomberg Businessweek 2014–2019 covers (Richard Turley → Tracy Ma era), *Eye* magazine archive issues\n\n**Palette**\n- Aggressive — `#FF3D00` (high-alert orange), `#FFE800` (signal yellow), `#001AFF` (alert blue)\n- Always on `#FFFFFF` for max contrast — or inverted onto `#000000`\n- Black `#000000` text on white where readable; otherwise contrasting hue\n- Maximum 3 colors per spread\n\n**Typography**\n- Display: a single bold grotesque used at absurd scale — Founders Grotesk, Druk, ABC Whyte. Weight 800–900, set 200px+\n- Headlines often broken across lines on purpose, kerned tighter than comfortable\n- Body type left small in contrast — 12–14px serif (Plantin / Mercury)\n- All-caps + condensed common in display\n\n**Spacing**: deliberately broken — content pushed off-grid, sometimes touching edges or overflowing intentionally\n\n**Radius**: 0\n\n**Shadow**: none\n\n**Motion**: jarring cuts, not smooth eases. If anything moves it slams into place.\n\n**Signature moves**\n- Headline set so large it visibly breaks the grid (letters touching page edges)\n- Color blocks of saturated orange / yellow / blue placed under or behind type\n- Photo cutouts (subjects silhouetted, dropped onto color fields) — often awkwardly cropped on purpose\n- Tables of data styled like magazine spreads, not like UI components — bold, contrasty, opinionated\n- Captions in tiny serif italic positioned in unexpected corners\n\n**Avoid**\n- Tasteful design (the recipe is anti-tasteful on purpose)\n- More than 3 colors per spread\n- Smooth transitions\n- Web defaults (every element should feel set, not generated)\n\n**AI prompt seed**\n> Magazine cover composition, single bold word set in massive black grotesque at 200pt, behind it a flat field of saturated alert-orange #FF3D00, with a clumsily-cut photo silhouette overlaid at unexpected angle, slight print misregistration, 3:4.\n\n**Don't use when**\n- The brand voice is meant to feel calm or trustworthy — Turley-era Bloomberg is loud\n- The content is utility-focused — recipe is editorial only\n- The team is squeamish about deliberate ugliness — this recipe requires committing to it\n\n---\n\n> **Same school — Brutalist / Raw**: [`are-na`](./are-na.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/bloomberg-terminal.md",
+		description: "Bloomberg Terminal · Maximum data-ink, mission-critical density, chrome-amber on near-black",
+		getContent: () => "\n# bloomberg-terminal — Bloomberg Terminal\n\n- **School**: Information Architecture\n- **Vibe**: Maximum data-ink, mission-critical density, chrome-amber on near-black\n- **Best for**: Finance / trading / monitoring dashboards, \"professionals don't have time for whitespace\" products\n- **Touchstone**: a real Bloomberg Terminal screenshot (always reference the real thing — it's denser than memory suggests)\n\n**Palette**\n- Ground: `#0A0E1A` (deep navy-black)\n- Surface 1: `#11172A`\n- Surface 2: `#1A2138`\n- Amber primary: `#FFA02F` (the signature)\n- Positive (price-up): `#00B96B`\n- Negative (price-down): `#F23645`\n- Muted label: `#5E6680`\n- High-importance text: `#E8ECF4`\n\n**Typography**\n- Display & body: a monospaced workhorse — IBM Plex Mono, JetBrains Mono, or Berkeley Mono. Bloomberg itself uses a proprietary mono.\n- Sizes: 11 / 12 / 13 / 14px — densely packed. No 16px body. No 32px headlines.\n- All numerals tabular-aligned (right-aligned columns of digits)\n\n**Spacing**: 2 / 4 / 8 / 12. Multi-pane layouts with no luxury margins.\n\n**Radius**: 0 or 2px. Terminals don't round.\n\n**Shadow**: none. Elevation through hairline borders only (`#2A3050` 1px lines).\n\n**Motion**: ticker scroll (uniform linear), instant state flips, blink on data update (50–80ms flash). No eased animations.\n\n**Signature moves**\n- Multi-pane workspaces with hairline dividers — 4 to 9 panels visible at once\n- Amber text on near-black for the most important data; chrome-white for secondary\n- Status / ticker bar at top with marquee-scrolling tickers, color-coded up/down\n- Keyboard-shortcut chips in the margins (`F9: TRADE`)\n- Tabular data with monospaced digits, color-coded by delta\n\n**Avoid**\n- Any rounded corners\n- Hero sections / marketing-style headlines\n- Photography or illustration of any kind\n- Decorative gradients (gradient meshes are not data-ink)\n- Sans-serif body type (the monospace is the recipe)\n\n**AI prompt seed**\n> Trading workstation user interface, deep navy #0A0E1A background, multi-pane layout with amber #FFA02F headlines, monospaced data tables, ticker scroll across the top, no rounded corners, no illustrations, fixed-width font throughout.\n\n**Don't use when**\n- The audience is consumer (they'll bounce in 3 seconds — terminal density is acquired taste)\n- You can't fill the screen with real data — terminal aesthetic + dummy \"Lorem 1,234\" placeholders looks broken\n- The task is a marketing landing page — terminals are for working in, not for selling\n\n---\n\n> **Same school — Information Architecture**: [`pentagram`](./pentagram.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`tufte-dataink`](./tufte-dataink.md) · [`nyt-the-daily`](./nyt-the-daily.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/dieter-rams-braun.md",
+		description: "Dieter Rams / Braun · \"Less but better\", functional honesty, industrial restraint",
+		getContent: () => "\n# dieter-rams-braun — Dieter Rams / Braun\n\n- **School**: Editorial / Minimalist\n- **Vibe**: \"Less but better\", functional honesty, industrial restraint\n- **Best for**: Hardware product pages, audio gear, industrial / tool brands, design-led B2B\n- **Touchstone**: Braun T3 radio, Braun ET66 calculator, Rams's *Ten Principles of Good Design*\n\n**Palette**\n- Ground: `#E4E1DC` (concrete light) or `#F5F4F0` (paper)\n- Ink: `#191919`\n- Industrial gray: `#A8A8A8`, `#5C5C5C`\n- Accent: single signal — Braun orange `#E96A26` or signal yellow `#F5C518`, used only on functional elements (a power dot, an active state)\n\n**Typography**\n- Display & body: a precision grotesk — Akzidenz-Grotesk, Helvetica Now, or Söhne. Weight 400 body, weight 500 for emphasis, never 700.\n- Numerals love a monospaced variant for spec tables\n\n**Spacing**: based on a 4px sub-grid; visible values 4 / 8 / 16 / 24 / 32 / 64 / 128. Functional, no \"luxury whitespace\" inflation.\n\n**Radius**: 2–4px maximum. Sharp by default.\n\n**Shadow**: none.\n\n**Motion**: utilitarian — instant state changes (~80–120ms), no flourish.\n\n**Signature moves**\n- Diagrammatic exploded views of the product with measurement callouts (real or fictional)\n- A single signal-orange dot on the page indicating \"active\" or \"power\" — never decorative\n- Tabular spec listings as a first-class layout element (not hidden behind a \"Specs\" toggle)\n- Every label exactly what it is, in plain language (\"ON / OFF\" not \"Toggle interaction mode\")\n- The page itself feels like a piece of equipment\n\n**Avoid**\n- Photography that romanticizes the product — Braun shoots it on a grid background like an engineering specimen\n- Multiple accent colors\n- Curves anywhere — even hover effects shouldn't bounce\n- Lifestyle imagery\n\n**AI prompt seed**\n> Industrial product photograph, 1960s Braun design language, single hardware object on light gray #E4E1DC grid background, frontal orthographic view, dimensions and labels in thin sans serif, color palette restricted to gray / black / single orange marker, 4:3.\n\n**Don't use when**\n- The product is soft / emotional / lifestyle — Rams discipline reads as cold for skincare or hospitality\n- The team wants warmth or personality — this recipe is impersonal by design\n- The audience is consumer / non-technical — they may read it as \"boring spec sheet\"\n\n---\n\n> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`monocle-magazine`](./monocle-magazine.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/field-io.md",
+		description: "Field.io (Generative Motion Identity) · The brand is movement; the page generates itself in front of the visitor",
+		getContent: () => "\n# field-io — Field.io (Generative Motion Identity)\n\n- **School**: Motion / Experimental\n- **Vibe**: The brand is movement; the page generates itself in front of the visitor\n- **Best for**: Brand films, launch moments, agency portfolios, \"the visit is the experience\" sites\n- **Touchstone**: field.io, FIELD.SYSTEMS work, kinetic identity case studies\n\n**Palette**\n- Often dark base — `#0B0B0F` to `#000000`\n- One or two generative gradient hues used throughout the motion — frequently a single bold hue cycled through hue rotation, e.g., a deep cyan `#0CE0E5` blending into electric violet `#5B2EFF`, or generated procedurally\n- Ink for type: high-contrast white `#FFFFFF`\n- Secondary type: cool gray `#A0A4B0`\n\n**Typography**\n- Display: a variable font that *animates* on its own axes — Söhne Variable, Editorial New Variable, or Inter Display Variable\n- Type often morphs weight, width, or optical-size during scroll\n- Body type kept restrained — a single grotesque at neutral weight; the motion is the show, not the body\n\n**Spacing**: irregular by design — content lands in unexpected positions; the grid sometimes appears and disappears\n\n**Radius**: 0 — Field.io's work is rarely soft-cornered\n\n**Shadow**: not via CSS — through generative lighting in WebGL / Canvas scenes\n\n**Motion**: the entire recipe is motion. Multi-stage choreographed sequences. Scroll-driven not just for parallax but for state changes. Pages frequently feel like a video playing itself.\n\n**Signature moves**\n- Generative type sequences where letters appear, morph, and resolve into headlines on scroll\n- Particle / mesh systems that respond to cursor and scroll position\n- Long-tail eased curves (expo-out, quint-out) — `cubic-bezier(0.83, 0, 0.17, 1)` and similar\n- Section breaks where the entire page state transforms (a full-bleed canvas overtakes the layout)\n- Choreographed multi-element entries — six elements arrive on staggered delays, not all at once\n\n**Avoid**\n- Static recipes (this isn't a static recipe — a static screenshot will feel underwhelming)\n- Too many cursor-reactive elements (one or two key WebGL moments is the recipe, not the whole page)\n- Heavy text content — this recipe is for moments, not for reading\n\n**AI prompt seed**\n> Generative type composition, single phrase resolving from particle field, electric violet #5B2EFF and deep cyan #0CE0E5 light traces, on near-black background, long motion trails, 16:9 cinematic.\n\n**Don't use when**\n- The deliverable will live as a static screenshot (the recipe loses ~70% of its impact)\n- Build budget is small (this is the most labor-intensive of the 25)\n- The target audience uses low-end hardware or care about performance / accessibility above wow\n\n---\n\n> **Same school — Motion / Experimental**: [`active-theory`](./active-theory.md) · [`resn-storytelling`](./resn-storytelling.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/headspace-meditation.md",
+		description: "Headspace / Calm · Soft pastels, rounded everything, calming hand-drawn illustration",
+		getContent: () => "\n# headspace-meditation — Headspace / Calm\n\n- **School**: Warm Humanist\n- **Vibe**: Soft pastels, rounded everything, calming hand-drawn illustration\n- **Best for**: Wellness / meditation / health apps, sleep / kids products, \"approachable expert\" services\n- **Touchstone**: headspace.com, the Headspace app, Calm.com lock-screen aesthetic\n\n**Palette**\n- Ground: warm peach `#FFE2C5` or `#FFEDD5`\n- Surface darker: warm coral `#F4A573`\n- Ink: warm dark teal `#1B3A47`\n- Secondary: `#5C6B7A`\n- Pop accents: muted lavender `#B0A5D1`, sage `#9DB67A`, salmon `#F5867B` (one per scene, rotating)\n\n**Typography**\n- Display: a rounded friendly sans — Apercu, GT America (rounded variant), Söhne Breit. Weight 600.\n- Body: same family at 16–17px, weight 400\n- Optional script for emotional moments — a single soft handwritten line in something like Caveat, used very sparingly\n\n**Spacing**: generous — 8 / 16 / 24 / 40 / 64 / 96\n\n**Radius**: large — 16 (small) / 24 (medium) / 32 (large). Buttons are pills (radius = height / 2).\n\n**Shadow**: soft and warm — `0 8px 24px rgba(244, 165, 115, 0.2)`. Often colored to match the ground.\n\n**Motion**: gentle, slow, breathing. 400–800ms eases. Hover lifts have a \"buoyant\" feel. A subtle breathing animation (1.5–4s cycle) on key elements.\n\n**Signature moves**\n- A central character / mascot illustrated in simple round shapes (Headspace's orange circle character)\n- Animated breathing circles that expand and contract in sync with body copy (\"breathe in… breathe out…\")\n- Warm peach gradient grounds that slowly drift between hues\n- Rounded everything — every container is a pill or a soft-corner rectangle\n- Calming microcopy (\"Take a moment. We'll wait.\")\n\n**Avoid**\n- Cool palettes — Headspace lives in warm tones, even at night-mode (warm dark teal not cool navy)\n- Sharp corners anywhere\n- Harsh motion (no bouncy springs — too jolting; gentle eases only)\n- More than 2 colors per scene\n\n**AI prompt seed**\n> Simple flat illustration in warm peach #FFE2C5 background, single round mascot character in coral with friendly face, soft pastel shapes around it (sage, lavender), no harsh edges anywhere, gentle hand-drawn imperfection, 4:5.\n\n**Don't use when**\n- The product is meant to feel sharp / sophisticated — Headspace's recipe reads as soft / caring\n- The brand has no wellness / care positioning — it'll feel infantilizing\n- The voice is meant to be authoritative or expert-led — recipe is gentle, not commanding\n\n---\n\n> **Same school — Warm Humanist**: [`mailchimp-freddie`](./mailchimp-freddie.md) · [`stripe-press`](./stripe-press.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/INDEX.md",
+		description: "Recipe catalog index: 25 named recipes with 3 indexes (by school / by best-for / by light-dark) + cross-cutting anti-patterns",
+		getContent: () => "\n# Style Recipes — Catalog Index\n\nA catalog of 25 named, anchored design recipes — each one tied to a real brand / studio / designer and **stored as its own file in this directory**. Read this INDEX to discover what's available and how to choose; then read **one recipe file** to get the concrete values for Step 3.\n\n```\nreferences/style-recipes/\n├── INDEX.md                       ← you are here\n├── apple-hig.md\n├── muji-kenya-hara.md\n├── aesop.md\n├── ... (25 recipe files total)\n```\n\nThis catalog is the **anchored library**; `../design-directions.md` is the **school taxonomy** for vague-request conversations. The two work together:\n\n| Route | Tool | When |\n|---|---|---|\n| User has no idea — needs guidance | `../design-directions.md` (6-school 3-pick conversation) | \"Make me something nice\" / \"I don't know what style I want\" |\n| User has an anchor in mind | Read **one** file here directly | \"Make it Linear-style\" / \"Stripe Press feeling\" / \"Are.na vibe\" |\n| Direction Advisor narrowed to a school but user wants concreteness | Read this INDEX for the school's recipes → then read the 2–3 specific recipe files | Mid-conversation handoff |\n\n---\n\n## When to Read Recipe Files\n\n**Read a single recipe file** when:\n\n1. **The user names an anchor by brand, studio, or designer** — \"make a Linear-style landing page\", \"Aesop-feeling product page\", \"MUJI quietness\", \"Pentagram-grade type system\". Read **only that anchor's file** (`linear.md`, `aesop.md`, etc.) — never the whole catalog.\n2. **The Direction Advisor narrowed to a school** — read this INDEX to see which recipes live in that school, then read 2–3 specific files to present the user concrete choices.\n3. **You're in Step 3 and need a known-good palette / typography / spacing combo** — pick the closest recipe by school or best-for table below, then read that single file and adapt.\n\nDo **not** load every recipe file up front. The entire catalog is ~1400 lines if loaded together; loading one recipe is ~50 lines. **Loading the whole catalog when you only need one recipe is the exact anti-pattern this split is designed to prevent.**\n\nDo **not** read recipe files when:\n- The user provided their own brand assets / Figma / codebase — extract from those instead (Asset > Spec).\n- The task is dictated by an existing UI you're extending — match the visual vocabulary already there, don't impose a recipe.\n- The user gave you a screenshot of a specific reference page — that screenshot *is* the recipe; extract directly.\n\n---\n\n## File Format Conventions (every recipe file follows this anatomy)\n\n- **Title line** — `# <anchor-id> — <Human-readable name>`\n- **Anchor & school** — which real-world reference and which Direction-Advisor school it belongs to\n- **Vibe & best-for** — 1-line vibe summary plus the scenarios it actually serves\n- **Touchstone** — at least one named real product / object / publication to look at (search and verify before relying on memory)\n- **Palette** — hex values, named by role (ink / surface / accent / ground). Always restricted; never a 12-stop ramp.\n- **Typography** — real font names with weight numbers and size guidance. No \"Inter / Roboto\" fallbacks unless the anchor itself uses them.\n- **Spacing system** — concrete value ladder\n- **Radius / Shadow / Motion character** — described in **design language**, not code\n- **Signature moves** — 3–5 specific, opinionated, copy-able design decisions that make this recipe *recognisable*. This is the design DNA.\n- **Avoid** — anti-patterns inside this recipe (i.e., things that would silently turn it into AI slop)\n- **AI prompt seed** — when generating supporting imagery, what to ask for to stay in DNA\n- **Don't use when** — the boundary; situations where this recipe will misfire\n- **Footer** — peer recipes in the same school + a link back to this INDEX\n\n**These files contain no code.** Hex codes, font names, and spacing ladders are *design tokens described in words*, not code. The agent translates them to CSS / JSX in Step 3+ using the project's stack.\n\n---\n\n## Index 1 — By School\n\n| School | Recipes |\n|---|---|\n| **Editorial / Minimalist** | [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md) |\n| **Information Architecture** | [`pentagram`](./pentagram.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`nyt-the-daily`](./nyt-the-daily.md) |\n| **Modern Tool / Builder SaaS** | [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md) · [`notion-pre-ai`](./notion-pre-ai.md) |\n| **Motion / Experimental** | [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md) · [`resn-storytelling`](./resn-storytelling.md) |\n| **Brutalist / Raw** | [`are-na`](./are-na.md) · [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md) |\n| **Warm Humanist** | [`mailchimp-freddie`](./mailchimp-freddie.md) · [`stripe-press`](./stripe-press.md) · [`headspace-meditation`](./headspace-meditation.md) |\n| **Specialty / Genre** (not surfaced via Advisor) | [`y2k-retrofuturism`](./y2k-retrofuturism.md) · [`mid-century-modern`](./mid-century-modern.md) |\n\nThe first 6 schools mirror the Direction Advisor's 6 schools (in `../design-directions.md`) — so when the Advisor picks one of those, you know which recipe files to surface. The 7th school (Specialty / Genre) is **only reachable through direct anchor naming** — users wanting Y2K or Mid-Century always arrive with the anchor in hand, never through Advisor.\n\n## Index 2 — By Best-For\n\n| Scenario | First-choice recipes |\n|---|---|\n| B2B SaaS / developer tools | [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md) · [`pentagram`](./pentagram.md) |\n| Premium consumer / lifestyle | [`aesop`](./aesop.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`stripe-press`](./stripe-press.md) · [`monocle-magazine`](./monocle-magazine.md) |\n| Data product / dashboard / finance | [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) |\n| Editorial / publishing / longform | [`nyt-the-daily`](./nyt-the-daily.md) · [`monocle-magazine`](./monocle-magazine.md) · [`stripe-press`](./stripe-press.md) · [`mailchimp-freddie`](./mailchimp-freddie.md) |\n| Launch moment / brand film / awwwards | [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md) · [`resn-storytelling`](./resn-storytelling.md) · [`vercel-mesh`](./vercel-mesh.md) |\n| Differentiated / counter-culture / artist | [`are-na`](./are-na.md) · [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md) |\n| Approachable B2C / community / health | [`mailchimp-freddie`](./mailchimp-freddie.md) · [`headspace-meditation`](./headspace-meditation.md) · [`notion-pre-ai`](./notion-pre-ai.md) |\n| Retro / theme / decade-coded | [`y2k-retrofuturism`](./y2k-retrofuturism.md) · [`mid-century-modern`](./mid-century-modern.md) |\n\n## Index 3 — By Mode (light / dark / either)\n\n| Mode | Recipes |\n|---|---|\n| Light-first | [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md) · [`pentagram`](./pentagram.md) · [`nyt-the-daily`](./nyt-the-daily.md) · [`stripe-press`](./stripe-press.md) · [`headspace-meditation`](./headspace-meditation.md) · [`mailchimp-freddie`](./mailchimp-freddie.md) · [`mid-century-modern`](./mid-century-modern.md) |\n| Dark-first | [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md) · [`resn-storytelling`](./resn-storytelling.md) · [`y2k-retrofuturism`](./y2k-retrofuturism.md) |\n| Works either way | [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`tufte-dataink`](./tufte-dataink.md) · [`notion-pre-ai`](./notion-pre-ai.md) · [`are-na`](./are-na.md) · [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md) |\n\n---\n\n## Cross-Cutting Anti-Patterns (apply to all 25 recipes)\n\nThese apply across every recipe in this catalog. Violating them collapses the recipe back into AI-default slop. **Read these even before reading an individual recipe file** — they're not duplicated in each file.\n\n### ❌ Don't combine two recipes mid-page\n\nPick **one** recipe and instantiate it fully. Adding \"Linear with Aesop accents\" or \"Pentagram with a Y2K hero\" usually reads as confused rather than original. Two-recipe remixes work only when the user explicitly asks and you can articulate *why* the marriage is coherent (e.g., \"Aesop palette on Pentagram grid for an apothecary catalog with editorial bones\").\n\n### ❌ Don't half-commit to brutalism / Y2K / mid-century\n\nThe Specialty / Genre and Brutalist / Raw recipes need full commitment. Half-Y2K reads as \"broken modern site\". Half-brutalism reads as \"unfinished design\". Either go all-in or pick a different recipe.\n\n### ❌ Don't default to Inter / Roboto / Arial / system-ui as display\n\nIf your chosen recipe specifies a font, use that font (or a real substitute *named in the recipe*). Defaulting to Inter erases the recipe's typographic identity, which is usually 30–40% of its signature.\n\n### ❌ Don't import every color in the palette\n\nEach recipe lists a restricted palette intentionally. If a recipe gives you 4 colors, don't add a 5th to \"balance things out\". The restriction *is* the recipe.\n\n### ❌ Don't add your own AI-default touches \"to make it pop\"\n\nIf the recipe says \"no shadow,\" don't add a subtle shadow. If it says \"no gradient,\" don't add a gradient mesh. If it says \"no emoji,\" don't add one. Every AI-default addition you make reduces the recipe's distinctiveness toward the mean.\n\n### ❌ Don't fake the photography style with CSS\n\nRecipes like Aesop, Stripe Press, MUJI, Apple HIG, Mailchimp, and Headspace rely on a specific photography or illustration style. If you can't source / generate that imagery, **say so to the user** — don't substitute CSS shapes. A recipe with a real hero photograph at 60% quality lands better than the same recipe with a CSS substitute at 0% recognition value.\n\n### ❌ Don't invent new recipes silently\n\nIf you find yourself drifting outside the listed recipes, **tell the user**: \"None of the 25 recipes fits — here's what I propose instead.\" A new recipe deserves its own anchor, its own concrete values, and its own signature moves articulated. Drifting silently produces the AI-default that this whole catalog is built to prevent.\n\n### ❌ Don't read the whole catalog when you need one recipe\n\nLoad only the recipe files you actually need. If the user said \"Linear-style\", read [`linear.md`](./linear.md) — not all 25. The 1-file-at-a-time pattern is what makes this catalog efficient; loading everything up front defeats progressive disclosure.\n\n---\n\n## When None of the 25 Fits\n\nOptions in this order:\n\n1. **Re-read the user's request** — sometimes the right recipe is obvious in hindsight (a \"data-led research tool\" is almost always [`tufte-dataink`](./tufte-dataink.md) or [`bloomberg-terminal`](./bloomberg-terminal.md), even when the user didn't name those)\n2. **Combine two recipes deliberately**, with explicit framing — see the warning above\n3. **Hand off to `../design-directions.md`** — propose 3 differentiated schools and let the user pick\n4. **Articulate a new recipe** — name an anchor, list concrete values, get user sign-off, then proceed\n\nAlways make the recipe choice explicit in your Step 3 design-system declaration so the user can confirm before code starts.\n\n"
+	},
+	{
+		name: "references/style-recipes/linear.md",
+		description: "Linear (Modern Builder Tool) · Quiet luxury for developer tools; warm dark, hairline detail, restraint as confidence",
+		getContent: () => "\n# linear — Linear (Modern Builder Tool)\n\n- **School**: Modern Tool / Builder SaaS\n- **Vibe**: Quiet luxury for developer tools; warm dark, hairline detail, restraint as confidence\n- **Best for**: Developer tools, AI tools, B2B SaaS where \"serious + designed\" matters\n- **Touchstone**: linear.app, the Linear changelog page, Linear Method site\n\n**Palette**\n- Ground: `#08090A` (near-black with warm undertone, not pure black)\n- Surface 1: `#16171C`\n- Surface 2: `#1E1F25`\n- Surface 3 (raised): `#26272E`\n- Hairline border: `rgba(255,255,255,0.06)`\n- Primary text: `#F7F8F8`\n- Secondary text: `#9CA3AF`\n- Muted text: `#6B7280`\n- Accent: Linear purple `#5E6AD2` — used on < 5% of pixels\n- Gradient meshes (very controlled, < 8% opacity) in the hero only\n\n**Typography**\n- Display: Inter Tight at weight 600 (or Söhne, or Geist Sans) — never plain Inter at default weight, that's the AI-default\n- Body: Inter at 14–15px, weight 400–500, line-height 1.55\n- Mono: GeistMono, JetBrains Mono, or Berkeley Mono for inline code and shortcut chips\n- Letter-spacing on display headlines: -0.02em (tight)\n\n**Spacing**: 4 / 8 / 12 / 16 / 24 / 40 / 64 / 96\n\n**Radius**: 6 (small UI) / 12 (medium cards) / 16 (large panels). **Never above 16.** Linear's radius character is \"modest, precise, never gummy.\"\n\n**Shadow**: barely there — soft `0 1px 2px rgba(0,0,0,0.3)` on raised surfaces. **Never glow, never colored shadow.**\n\n**Motion**: ease-out around 150ms for hover, 350–450ms for layout moves with a quint curve (e.g., the famous cubic-bezier(0.22, 1, 0.36, 1)). State changes feel \"snappy but not bouncy.\"\n\n**Signature moves**\n- Hairline 1px borders in `rgba(255,255,255,0.06)` separating every panel, everywhere\n- Selective accent use — purple appears on focused / active states, on tiny pills, on key brand surfaces; never on body backgrounds\n- Inline code styled with monospaced font and dim background `#1E1F25`, color `#A78BFA`\n- Subtle gradient meshes in the hero (extremely controlled saturation, < 8% opacity) — *not* the bright purple-pink-blue AI cliché\n- Keyboard-shortcut chips throughout the UI (the brand celebrates keyboard-first)\n- A bottom-pinned screenshot of the actual product on landing pages\n\n**Avoid**\n- Emoji\n- Bouncy springs or elastic easings\n- More than one saturated color (Linear's purple is the only accent)\n- Border-radius above 16\n- Stock photography of people\n- \"Get Started Free\" hero CTAs styled like a 2018 SaaS landing page\n\n**AI prompt seed**\n> Abstract product UI screenshot, warm dark #08090A background, hairline borders, panels with #16171C and #1E1F25 surfaces, very subtle blue-purple ambient lighting at top edge, no people, no text on the image itself, 16:9.\n\n**Don't use when**\n- The brand is consumer-friendly / playful — Linear reads as professional and serious\n- The product needs warmth or hand-touched feel\n- The audience is non-technical (the keyboard-shortcut and monospace signals don't land)\n\n---\n\n> **Same school — Modern Tool / Builder SaaS**: [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md) · [`notion-pre-ai`](./notion-pre-ai.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/mailchimp-freddie.md",
+		description: "Mailchimp (Freddie Era, c. 2018–2022) · Hand-drawn marks, warm yellow, personality in microcopy",
+		getContent: () => "\n# mailchimp-freddie — Mailchimp (Freddie Era, c. 2018–2022)\n\n- **School**: Warm Humanist\n- **Vibe**: Hand-drawn marks, warm yellow, personality in microcopy\n- **Best for**: Small-business tools, creator products, community / education / approachable B2C\n- **Touchstone**: mailchimp.com pre-2023 redesigns (Wayback), Freddie illustration sets\n\n**Palette**\n- Ground: `#FFE01B` (Mailchimp yellow) for hero / brand moments, `#FFFFFF` for body\n- Ink: `#241C15` (warm near-black, never pure black)\n- Cream surface: `#FBEFE3`\n- Secondary: `#88837C`\n- Accent: a hot pop-pink `#FF4D74` or a warm coral, used very sparingly\n\n**Typography**\n- Display: a friendly grotesque — Helvetica Now Display, Söhne, Inter Tight at weight 700–800\n- Body: same family at 17–18px, weight 400, line-height 1.6\n- Decorative: occasional hand-drawn script or text-set-by-hand feel\n\n**Spacing**: 4 / 8 / 16 / 24 / 40 / 64 — generous but not airy\n\n**Radius**: 8 (small) / 16 (medium) / 24 (large pills). Buttons are pill-shaped.\n\n**Shadow**: soft and warm — `0 4px 12px rgba(36, 28, 21, 0.08)`\n\n**Motion**: bouncy welcomed. Spring physics on hover lifts, friendly easings.\n\n**Signature moves**\n- Freddie-style hand-drawn illustrations (winking mascot, line-drawn characters with personality) — never AI-generated, must be commissioned or use a single illustrator's hand\n- Yellow flood-fill section backgrounds breaking up the page\n- Pill-shaped buttons with a 2–3px black outline (Memphis-style)\n- Personality in microcopy (\"Send better email\" not \"Optimize delivery metrics\")\n- Asymmetric \"tilted\" illustration placement — never centered on a grid\n\n**Avoid**\n- Pure black anywhere (the recipe is warm-near-black)\n- Stock illustrations — the hand-drawn style is the differentiator\n- More than 3 colors visible at once (yellow + ink + one accent)\n- Cold corporate microcopy\n\n**AI prompt seed**\n> Hand-drawn illustration, single line-drawn character with warm color washes (yellow, coral), winking expression, on warm cream #FBEFE3 background, friendly approachable line style, deliberate imperfection, 4:5.\n\n**Don't use when**\n- Brand needs to feel premium / luxury — Mailchimp warmth reads as accessible / mass-market\n- Illustration can't be sourced from a real illustrator (recipe loses 50% impact)\n- Audience is enterprise-only and skeptical of \"friendly\"\n\n---\n\n> **Same school — Warm Humanist**: [`stripe-press`](./stripe-press.md) · [`headspace-meditation`](./headspace-meditation.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/mid-century-modern.md",
+		description: "Mid-Century Modern (Paul Rand / Saul Bass) · 1950s–60s American graphic modernism — geometric shapes, considered hand-feel, jaz…",
+		getContent: () => "\n# mid-century-modern — Mid-Century Modern (Paul Rand / Saul Bass)\n\n- **School**: Specialty / Genre (also touches Information Architecture)\n- **Vibe**: 1950s–60s American graphic modernism — geometric shapes, considered hand-feel, jazz-album confidence\n- **Best for**: Cultural / film / publishing identity, premium consumer brands with heritage claim, \"tasteful sophistication\"\n- **Touchstone**: IBM logo (Paul Rand), Saul Bass Vertigo / Anatomy of a Murder posters, Alvin Lustig book covers, mid-century jazz album sleeves (Reid Miles / Blue Note)\n\n**Palette**\n- Ground: warm cream `#EBE3D2` or mustard `#D9A441` or muted teal `#3D6E70`\n- Ink: `#1A1A18`\n- Limited palette per piece — 3 colors max, one bold, two muted\n- Common mid-century pairings: mustard + brick + cream; teal + cream + black; sienna + ink + bone\n\n**Typography**\n- Display: a geometric grotesque (Futura, Avenir, ITC Avant Garde) at large scale, often condensed weight\n- Or a slab serif (Egyptian / Memphis) for editorial moments\n- Body: humanist serif (Sabon, Garamond) at 16–17px\n- Numerals often set in figures-as-image (a single big numeral as a graphic element)\n\n**Spacing**: structured grid; 4 / 8 / 16 / 24 / 32 / 48\n\n**Radius**: 0 throughout. Mid-century is geometric, not soft.\n\n**Shadow**: none — flat color shapes only\n\n**Motion**: minimal. Shapes slide into place on a single beat, like a Saul Bass title sequence.\n\n**Signature moves**\n- Geometric shape compositions — a single big circle, a triangle, a half-moon — as the primary visual\n- Hand-cut paper feel (shapes have slightly imperfect edges, suggesting they were cut and pasted)\n- Type integrated with the shapes (a headline curving around a circle, or sitting *inside* a colored block)\n- A single illustrative motif repeated (a stylized bird, an abstract figure) tying the piece together\n- Print-feel grain or paper texture at low opacity\n\n**Avoid**\n- Gradients — mid-century is flat color\n- Photography as the lead visual (illustration leads; photography supports)\n- More than 3 colors per piece\n- Rounded / soft-corner UI\n\n**AI prompt seed**\n> Mid-century modern poster composition in the style of Saul Bass, single bold geometric shape (large circle in mustard #D9A441) on warm cream #EBE3D2 paper background, flat color shapes, slight paper texture, hand-cut edges, no gradient, no shadow, 3:4.\n\n**Don't use when**\n- The product is feature-dense / utility-focused (mid-century is editorial / poster thinking)\n- The brand has no heritage / cultural / craft claim\n- Realistic photography is essential to the message\n\n---\n\n> **Same school — Specialty / Genre**: [`y2k-retrofuturism`](./y2k-retrofuturism.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/monocle-magazine.md",
+		description: "Monocle Magazine · International, considered, magazine-grade kicker / headline / dek hierarchy",
+		getContent: () => "\n# monocle-magazine — Monocle Magazine\n\n- **School**: Editorial / Minimalist\n- **Vibe**: International, considered, magazine-grade kicker / headline / dek hierarchy\n- **Best for**: Editorial, travel / hospitality, journals, considered lifestyle publications\n- **Touchstone**: monocle.com, the Monocle quarterly, Cereal magazine\n\n**Palette**\n- Ground: `#F2EFE7` (cream paper)\n- Ink: `#1A1A1A`\n- Editorial accent red: `#C7322E` (Monocle's signature)\n- Olive: `#5E6347`\n- Hairline rules: `#C8C2B0`\n\n**Typography**\n- Display: a refined slab or transitional serif — Plantin, Mercury, or Tiempos Headline. Italic widely used.\n- Body: Plantin or Tiempos Text at 16–17px, line-height ~1.6\n- Sans for kickers / labels: a precision grotesk like Söhne at 10–11px, letter-spaced 0.08em, often in editorial red\n- Drop caps welcome on long-form features\n\n**Spacing**: 4 / 8 / 16 / 24 / 32 / 48 / 96. Multi-column work uses tight gutters (16–24px between columns).\n\n**Radius**: 0. Magazine pages don't round corners.\n\n**Shadow**: none.\n\n**Motion**: minimal. Page-turn fades. Slow Ken Burns on lead photographs.\n\n**Signature moves**\n- Three-deck hierarchy: tiny red kicker → bold serif headline → italic serif dek\n- Multi-column body copy (2–3 columns) with hairline column rules\n- Numbered features (`Feature 04 — Lisbon`) and small numerals in the margin\n- Lead photograph cropped tight at one edge, headline tucked into the empty negative space\n- Pull-quotes in italic, much larger than body, set in a single column\n\n**Avoid**\n- Sans-serif headlines — Monocle's signature is the serif voice\n- Stock photography — the recipe requires commissioned-feeling photography (warm, peopled, place-rich)\n- Card grids — this is magazine spread thinking, not SaaS thinking\n- More than one accent color (the editorial red is enough)\n\n**AI prompt seed**\n> Editorial magazine photograph, place-specific scene (e.g., Tokyo back street at dusk), warm color grading, slight film grain, one human subject in middle-ground, 3:2, color palette restricted to warm earth tones with one red object.\n\n**Don't use when**\n- The task is a SaaS product page — magazine craft will feel mismatched\n- There's no editorial / human / place content to lead with — without photography this recipe is hollow\n- The audience expects fast scanning — Monocle rewards reading, not skimming\n\n---\n\n> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/muji-kenya-hara.md",
+		description: "MUJI / Kenya Hara · Emptiness as fullness, off-white as a value, near-silence",
+		getContent: () => "\n# muji-kenya-hara — MUJI / Kenya Hara\n\n- **School**: Editorial / Minimalist\n- **Vibe**: Emptiness as fullness, off-white as a value, near-silence\n- **Best for**: Premium quiet positioning, lifestyle goods, \"everyday craft\" identity\n- **Touchstone**: muji.com (any region), Kenya Hara's book *White*, MUJI ryokan signage\n\n**Palette**\n- Ground: `#F4F2EC` (warm paper off-white — never `#FFFFFF`)\n- Ink: `#2A2A28` (warm ink, never `#000000`)\n- Secondary text: `#7C7B76`\n- Hairline: `#D9D6CD`\n- Accent: there is none. If you must add one, a single brand red `#C8161D` used only as a tiny corner mark or rule.\n\n**Typography**\n- Display: a humanist sans like Söhne, Inter Tight, or Klim's Calibre — weight 400, never bolder than 500. Letterspacing slightly open (0.01em–0.02em).\n- Body: same family at 15–16px, line-height ~1.8\n- Japanese-bilingual deployments: Noto Sans CJK JP paired weight-for-weight\n\n**Spacing**: 8 / 16 / 32 / 48 / 96 / 160 / 240. The big numbers matter — 240px between sections is normal.\n\n**Radius**: 0. Hard, honest edges. Maybe 2px on form fields.\n\n**Shadow**: none.\n\n**Motion**: imperceptible. Fades over 600–900ms. Nothing translates more than a few px. Never bouncy.\n\n**Signature moves**\n- 60–80% of the page is empty space — content lives in a narrow column, far from edges\n- One product image per \"screen\", small relative to the page, captioned plainly\n- Tiny labels (10–11px, letter-spaced) describing what each section is — \"01 — Cotton\" — never headlines that shout\n- Square-bracket-style asides, kept neutral\n- Rules (1px hairlines) are the only ornament\n\n**Avoid**\n- Any saturated color other than the MUJI red as a corner mark\n- Drop shadows, glows, gradients of any kind\n- Tabs, accordions, mega-menus, sticky banners\n- \"Above the fold\" thinking — MUJI lets the eye start in the middle of the page\n\n**AI prompt seed**\n> Single household object on warm off-white #F4F2EC paper ground, raked daylight from upper left, very long quiet space around the object, 3:2, photographed on film, no shadow drama, neutral tone.\n\n**Don't use when**\n- The product needs to communicate feature density (specs, pricing tiers, comparison tables) — MUJI's quietness will hide the message\n- The audience scrolls fast and demands signal density (news / SaaS / dashboard) — they'll bounce\n- The brand is in a noisy competitive set and needs to shout — quietness is luxury, but luxury isn't always what's needed\n\n---\n\n> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/notion-pre-ai.md",
+		description: "Notion (pre-AI era, c. 2017–2022) · Friendly serif headline + emoji as first-class design element + soft cream + black ink",
+		getContent: () => "\n# notion-pre-ai — Notion (pre-AI era, c. 2017–2022)\n\n- **School**: Modern Tool / Builder SaaS (warm-leaning, near Humanist border)\n- **Vibe**: Friendly serif headline + emoji as first-class design element + soft cream + black ink\n- **Best for**: Productivity tools for non-engineers, collaborative software, \"your second brain\" products\n- **Touchstone**: notion.so pre-2023 redesigns (Wayback), early Notion marketing decks\n\n**Palette**\n- Ground: `#FFFFFF`\n- Soft cream surface: `#F7F6F3`\n- Ink: `#37352F` (Notion's specific not-quite-black, warm cast)\n- Secondary text: `#787774`\n- Hairline: `#E9E9E7`\n- Accent palette: muted Notion colors — `#E4F4F1` (mint), `#FFEDD5` (peach), `#FCE7F3` (rose), `#FEF3C7` (sand) — used as soft block backgrounds, never as bright accents\n\n**Typography**\n- Display: a friendly modern serif — GT Sectra, Sentinel, or Source Serif Pro. Weight 500 for headlines.\n- Body: Inter or Söhne at 16px, line-height 1.6, weight 400\n- Emoji set at 1.25× body size, used as section markers and \"page icons\"\n\n**Spacing**: 4 / 8 / 16 / 24 / 40 / 64\n\n**Radius**: 4 (small UI) / 8 (cards) / 16 (large panels)\n\n**Shadow**: very soft — `0 2px 8px rgba(15, 15, 15, 0.04)`. Notion's shadows are felt, not seen.\n\n**Motion**: gentle ease-out around 200–300ms. Hover lifts cards by 2–4px with a soft shadow expansion.\n\n**Signature moves**\n- Section headers prefixed with a single emoji icon (`📖 Notes`, `🌱 Ideas`) — the emoji *is* the visual hierarchy\n- Hand-drawn doodles or simple line illustrations integrated into the hero (Notion's signature illustration style)\n- Block-based content metaphor visible in the layout — content reads like draggable cards rather than columns\n- Color-tagged soft pills for category labels (mint = active, peach = idea, etc.)\n- Friendly conversational microcopy\n\n**Avoid**\n- Too many emoji in close proximity (one per section header is the recipe, not five)\n- Dark mode unless explicitly required (Notion's identity is light)\n- Sans-serif headlines — the friendly serif is the differentiator\n- Aggressive CTAs — Notion's hero CTA reads as an invitation, not a demand\n\n**AI prompt seed**\n> Hand-drawn doodle illustration, simple black-line drawing of an organized desk scene with notebooks and houseplants, on cream #F7F6F3 background, friendly approachable line work, small color washes in soft mint and peach, 3:2.\n\n**Don't use when**\n- The audience is enterprise-serious — emoji as design will read as unprofessional\n- The product is graphics-heavy or needs visual density — Notion's recipe is text-led\n- The voice is meant to be authoritative — Notion is approachable, not commanding\n\n---\n\n> **Same school — Modern Tool / Builder SaaS**: [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/nyt-the-daily.md",
+		description: "New York Times Editorial · Authoritative broadsheet, generations of typographic craft",
+		getContent: () => "\n# nyt-the-daily — New York Times Editorial\n\n- **School**: Information Architecture\n- **Vibe**: Authoritative broadsheet, generations of typographic craft\n- **Best for**: Longform editorial, news / journalism products, narrative explainers\n- **Touchstone**: nytimes.com homepage, NYT Cooking, NYT investigative features\n\n**Palette**\n- Ground: `#FFFFFF`\n- Ink: `#121212`\n- Secondary text: `#666666`\n- NYT red `#D0021B` — used only for breaking-news indicators or sparingly\n- Soft section background: `#F7F7F7`\n- Hairline: `#E2E2E2`\n\n**Typography**\n- Display: Cheltenham (NYT's proprietary) — substitute Sentinel or Tiempos Headline. Weight 700 for hero, italic widely used.\n- Subhead: Imperial or Lyon Display at weight 400\n- Body: Imperial / Georgia / source serif at 18–20px, line-height ~1.55\n- Sans for UI / kickers: Franklin (NYT) — substitute Söhne Mono or Söhne, weight 500, often in small caps\n\n**Spacing**: 4 / 8 / 16 / 24 / 32 / 48 / 96. Multi-column grids for stories.\n\n**Radius**: 0 throughout.\n\n**Shadow**: none.\n\n**Motion**: minimal — sticky bylines, lazy-loaded images fading in, slow zoom on hero photo over 8–15s.\n\n**Signature moves**\n- Three-deck hierarchy: tiny eyebrow (\"OPINION\" / \"ANALYSIS\" / \"INVESTIGATION\" in small-caps sans) → bold serif headline → italic serif standfirst\n- Byline + timestamp block in sans below the headline, always\n- Pull-quotes set in italic serif at 1.5–2× body size, with hairline rules above and below\n- Multi-column body copy on wide viewports; single column on mobile (always readable)\n- Inline images with serif captions; captions matter and are styled distinctively\n\n**Avoid**\n- Sans-serif headlines (the recipe's signature is the serif voice)\n- Card grids of articles — NYT lays articles out as a front page, with hierarchy by size\n- Pretty UI buttons in the body of articles\n- Centered alignment for body (left-aligned justified is the recipe)\n\n**AI prompt seed**\n> Editorial photojournalism, single decisive moment image, natural lighting, 3:2 aspect, color grading neutral with slight desaturation, real-feeling not staged, place-specific.\n\n**Don't use when**\n- The product is a SaaS dashboard — NYT craft reads as overformal there\n- Content is short and punchy (one-line CTAs) — NYT needs longform to land\n- The brand has no editorial / authority claim — using NYT voice without the substance reads as cosplay\n\n---\n\n> **Same school — Information Architecture**: [`pentagram`](./pentagram.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/pentagram.md",
+		description: "Pentagram / Paula Scher · Bold typography as image; type does the visual work; everything else recedes",
+		getContent: () => "\n# pentagram — Pentagram / Paula Scher\n\n- **School**: Information Architecture\n- **Vibe**: Bold typography as image; type does the visual work; everything else recedes\n- **Best for**: B2B identity, cultural institutions, \"we mean business\" moments\n- **Touchstone**: pentagram.com, Paula Scher's Public Theater posters, MIT Media Lab identity\n\n**Palette**\n- High-contrast two-color: ink on ground. Common pairings:\n  - Black `#000000` on white `#FFFFFF`\n  - Cobalt `#1E3FFF` on cream `#F4F1E7`\n  - Brick `#B83A1F` on bone `#EFE9DC`\n- A single secondary accent only if the project demands a third color (used very sparingly)\n\n**Typography**\n- Display: a single grotesque used at massive scale — Helvetica Now (weight 700–900), Söhne Breit, or Druk. Headlines are often **set bigger than the column they live in**, breaking the margin on purpose.\n- Body: the same family at body weight, 16–17px, line-height 1.45–1.55\n- Numerals: tabular figures from the same family\n\n**Spacing**: strict 12-column grid, generous gutters (24–32px). Baseline-grid alignment of every text element.\n\n**Radius**: 0.\n\n**Shadow**: none.\n\n**Motion**: typographic moves only — letters shift in, headlines slide on a baseline. No 3D, no bouncy, no parallax.\n\n**Signature moves**\n- Headlines so large they touch (or visibly break past) the column edges\n- Type as image — a single word or phrase at hero scale becomes the only graphic\n- Color blocks (a flat rectangle of accent color) used as section dividers, often with a single huge number on them (`02`)\n- Captions and metadata pinned to the grid in tiny precise type, often in the column gutter\n- A single rule line (1px) sometimes drawn across the entire page width, anchoring everything\n\n**Avoid**\n- Photography as the visual lead (type leads, not photo) — exception: if there is a hero photo, it lives behind / under enormous type\n- Multiple type families\n- Gradients, shadows, decorative anything\n- Card grids of content (Pentagram thinks in spreads, not cards)\n\n**AI prompt seed**\n> Editorial poster composition, single phrase set in massive black Helvetica weight 900, characters bleeding past the layout margins, behind it a flat field of cobalt #1E3FFF, no photography, no illustration, 3:4.\n\n**Don't use when**\n- Headlines can't be made bold and short (3–6 word phrases) — Pentagram needs strong copy\n- Many tiers of feature density must be communicated (this is institutional voice, not feature catalog)\n- The brand is meant to feel quiet — Pentagram is the opposite of quiet\n\n---\n\n> **Same school — Information Architecture**: [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`nyt-the-daily`](./nyt-the-daily.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/raycast.md",
+		description: "Raycast (Productivity Tool) · Glassy command-palette aesthetic, color extensions for personality, keyboard-first culture",
+		getContent: () => "\n# raycast — Raycast (Productivity Tool)\n\n- **School**: Modern Tool / Builder SaaS\n- **Vibe**: Glassy command-palette aesthetic, color extensions for personality, keyboard-first culture\n- **Best for**: Productivity tools, command-palette / launcher products, dev utilities\n- **Touchstone**: raycast.com, Raycast app screenshots, raycast.com/store extension cards\n\n**Palette**\n- Ground: `#0F0F11` (charcoal with hint of blue)\n- Surface translucent: `rgba(255,255,255,0.06)` over a colored gradient backdrop\n- Hairline: `rgba(255,255,255,0.10)`\n- Primary text: `#FFFFFF`\n- Secondary text: `#B0B3B8`\n- Brand red accent: `#FF6363` — Raycast's signature, used on icons and key CTAs\n- Extension chips: bright per-tile colors (lime, coral, lavender, cyan) used as accent dots on small surfaces only\n\n**Typography**\n- Display: Söhne weight 600, or Inter Tight weight 600\n- Body: Inter at 14–15px, weight 500 (slightly heavier than Linear's 400 — Raycast feels punchier)\n- Mono: SF Mono or JetBrains Mono for shortcut chips\n- Letter-spacing on display: -0.02em\n\n**Spacing**: 4 / 8 / 12 / 16 / 24 / 40 / 64\n\n**Radius**: 8 (small) / 12 (medium) / 16 (cards) / 24 (large modal). Raycast's signature radius is the soft-corner command palette.\n\n**Shadow**: cushiony — `0 16px 40px rgba(0,0,0,0.4)` on the command palette card; barely any shadow elsewhere\n\n**Motion**: bouncy welcomed for key moments (the palette appearing, hover lift) — spring physics with mild overshoot. Otherwise quick 150ms ease-out.\n\n**Signature moves**\n- A floating command-palette screenshot in the hero, slightly tilted, casting a generous cushioned shadow, with a blurred colorful gradient backdrop visible through it (glass)\n- Every keyboard shortcut shown as a styled chip — `⌘` `↵` `⌥` set in a precision mono with a hairline border and dim background\n- Bright per-extension colors used as small accent dots on tile cards (a Notion tile has a tiny lavender dot, a GitHub tile has a charcoal one)\n- Sticky color-banded gradient backdrop behind the hero (oranges → magentas, but soft-focused)\n- Generously spaced section anatomy with clear hover lift on tiles\n\n**Avoid**\n- Too many bright extension colors on the same screen — they only work as small accents on a dark ground\n- Solid bright-color buttons (Raycast buttons are usually translucent white pills with shortcut chips)\n- Pure monochrome scenes — Raycast leans on color *just enough* to feel playful\n\n**AI prompt seed**\n> Productivity application interface, floating command palette card centered on the page, soft-focused colorful gradient backdrop in warm oranges and magentas behind it, dark charcoal foreground UI, cushioned drop shadow under the palette, no people, 16:9.\n\n**Don't use when**\n- The product isn't a launcher / command-palette / keyboard-first tool — the central glass palette image won't land otherwise\n- The audience doesn't know keyboard shortcuts (they'll miss the recipe's main signal)\n- A strictly enterprise tone is needed — Raycast skews playful\n\n---\n\n> **Same school — Modern Tool / Builder SaaS**: [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`notion-pre-ai`](./notion-pre-ai.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/resn-storytelling.md",
+		description: "Resn (Story Through Scroll) · Surprise as the reward; the page tells a story to those who scroll",
+		getContent: () => "\n# resn-storytelling — Resn (Story Through Scroll)\n\n- **School**: Motion / Experimental\n- **Vibe**: Surprise as the reward; the page tells a story to those who scroll\n- **Best for**: Brand storytelling, agency portfolios, campaign microsites\n- **Touchstone**: resn.co, Resn's case-study pages, awwwards site-of-the-day archives\n\n**Palette**\n- Project-driven — Resn's recipe is more about composition than a fixed palette\n- Often warm-cool contrasted within one piece (warm character against cool environment, or vice versa)\n- Saturated where the story demands; muted where it breathes\n\n**Typography**\n- A campaign-specific display face is almost always present — custom or unusual\n- Body type quiet, often a humanist sans at small sizes\n- Text often integrated *into* the scene (titles set in WebGL space, not on a fixed UI layer)\n\n**Spacing**: irregular and composition-driven; not grid-strict\n\n**Radius**: project-dependent\n\n**Shadow**: scene-baked, not component\n\n**Motion**: long-form choreography — a single page might tell a 90-second story across 8–12 scroll triggers, with payoffs at specific moments\n\n**Signature moves**\n- Scroll triggers reveal narrative beats — a character moves across the screen, a product is unveiled, a punchline lands\n- Easter eggs hidden for repeat visitors\n- Cursor-reactive surface materials (a hover changes a texture, an audio cue plays)\n- Multi-scene composition — each section is treated as a film scene with its own art direction\n- A reward at the end — a special interaction or scene only revealed on full scroll-through\n\n**Avoid**\n- Bloating with too many beats — Resn's recipe is \"fewer, better\" beats\n- Pure decoration without narrative — every motion moment should advance the story\n- Forgetting the punchline — the recipe needs a payoff scene\n\n**AI prompt seed**\n> Narrative scene from a brand microsite, mid-action moment, character or object in motion with intentional motion blur, warm-cool palette contrast, theatrical lighting, 16:9.\n\n**Don't use when**\n- There's no story to tell (the recipe needs narrative content)\n- Audience won't scroll patiently (Resn rewards patience — for impatient audiences, choose a static recipe)\n- The build is rushed — Resn's recipe demands choreography time\n\n---\n\n> **Same school — Motion / Experimental**: [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/stripe-press.md",
+		description: "Stripe Press · Books as objects, cream + ink, warm photography, the kind of design only a successful infrastructure company funds",
+		getContent: () => "\n# stripe-press — Stripe Press\n\n- **School**: Warm Humanist (with editorial bones)\n- **Vibe**: Books as objects, cream + ink, warm photography, the kind of design only a successful infrastructure company funds\n- **Best for**: Editorial / publishing, longform features, \"books and ideas\" products\n- **Touchstone**: press.stripe.com, the physical Stripe Press books (cloth-bound, foil-stamped)\n\n**Palette**\n- Ground: `#F1ECDE` (warm bone)\n- Surface darker: `#E6DCC4`\n- Ink: `#1A1A18` (very warm near-black)\n- Secondary text: `#736D5A`\n- Foil-stamp accent: deep teal `#1B4B5A` or burnt sienna `#A04A2A` (book-cover-specific colors)\n- Hairline: `#C8BEA4`\n\n**Typography**\n- Display: a refined transitional or modern serif — GT Sectra, Domaine Display, Italian Old Style. Italic everywhere.\n- Body: an old-style serif at 18–19px, line-height 1.65 — Source Serif, Lyon Text, ITC Galliard\n- Sans for UI only: a humanist sans at small sizes for nav and captions — Söhne or GT America\n- Often pairs a wide display serif with a slim body serif\n\n**Spacing**: 4 / 8 / 16 / 24 / 32 / 48 / 96. Editorial breathing room.\n\n**Radius**: 0 throughout (books don't have rounded corners)\n\n**Shadow**: present on book objects — `0 24px 48px rgba(0, 0, 0, 0.18)` to make books feel three-dimensional on the page\n\n**Motion**: slow, slow, slow. Crossfades over 1–2 seconds. Books rotate gently in 3D on hover (~15° max). Ken Burns on hero photography (~20s).\n\n**Signature moves**\n- Book-cover photography as hero — the actual physical object photographed on cream paper with a warm raking light and an honest shadow\n- Wide-set serif italic for emphasis, set 1.5–2× body size\n- Author / chapter quotes in oversized italic serif, hung against a wide margin\n- Cloth-textured backgrounds for section breaks (subtle textile pattern at low opacity)\n- A single foil-stamp color per book / chapter (gold, deep teal, burnt sienna) — never combined\n\n**Avoid**\n- Pure white grounds (the warm cream is part of the recipe)\n- Sans-serif body type (the editorial serif is the signature)\n- Card grids of books — Stripe Press lays each book out as a feature, not a tile\n- Cold neutral gray — every gray here has a warm cast\n\n**AI prompt seed**\n> Hardcover book photographed on warm cream paper #F1ECDE, raking afternoon window light, deep soft shadow, single book object, cloth-bound spine visible, foil-stamped title in burnt sienna, 4:5, editorial product photography.\n\n**Don't use when**\n- The deliverable has no editorial / book / publication content\n- The brand voice is light or playful (Stripe Press is sincere and considered)\n- The audience won't sit for longform — recipe rewards reading\n\n---\n\n> **Same school — Warm Humanist**: [`mailchimp-freddie`](./mailchimp-freddie.md) · [`headspace-meditation`](./headspace-meditation.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/tufte-dataink.md",
+		description: "Edward Tufte / Maximum Data-Ink · Every pixel earns its place; the chart is the page",
+		getContent: () => "\n# tufte-dataink — Edward Tufte / Maximum Data-Ink\n\n- **School**: Information Architecture\n- **Vibe**: Every pixel earns its place; the chart is the page\n- **Best for**: Analytical reports, scientific publications, data-led storytelling\n- **Touchstone**: *The Visual Display of Quantitative Information*, *Beautiful Evidence*, edwardtufte.com\n\n**Palette**\n- Ground: `#FBFAF6` (warm paper)\n- Ink: `#1B1B1A`\n- Two data colors only — typically a warm red `#A6300E` and a cool slate `#3E4A5C`. Add a third only if a third dimension genuinely needs it.\n- Faint reference rules: `#D8D2C2`\n\n**Typography**\n- Display & body: an old-style or transitional serif — ET Book (Tufte's own family), Equity, or Lyon Text. Weight 400 for body, italic for emphasis.\n- Body at 12–14px (Tufte deliberately uses small body text — the reader leans in)\n- Sans for axis labels only — a humanist sans at 10–11px, color `#5C5550`\n\n**Spacing**: tight. 4 / 8 / 12 / 16 / 24 / 48. Margins are filled with side-notes, not whitespace.\n\n**Radius**: 0.\n\n**Shadow**: none.\n\n**Motion**: none. The page is meant to be read still.\n\n**Signature moves**\n- Sparklines inline with body copy (a tiny chart embedded in a sentence)\n- Side-notes (marginalia) used heavily — annotations live in the right margin, not in tooltips\n- Charts have no chart-junk: no gridlines except faint ones, no border boxes, no 3D, no legends if direct labels work\n- Small multiples — a 3×3 grid of the same chart with different data\n- Direct labels on data series (the line is labeled at its endpoint, not in a legend box)\n\n**Avoid**\n- Pie charts (Tufte would not approve)\n- 3D anything\n- Gridlines darker than `#D8D2C2`\n- Multiple chart types on the same page when one would do\n- Color for decoration (every color must encode meaning)\n\n**AI prompt seed**\n> Editorial scientific figure, warm paper #FBFAF6 background, multi-line time-series chart with two data series in muted red and slate, direct labels at line endpoints, side-note callouts in italic serif, no chart frame, no legend, 4:3.\n\n**Don't use when**\n- The chart is decorative (Tufte demands the chart be the *point*)\n- The reader expects interactive tooltips / filters (Tufte is for static editorial figures)\n- The medium is mobile (small body type plus margin notes doesn't fit)\n\n---\n\n> **Same school — Information Architecture**: [`pentagram`](./pentagram.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`nyt-the-daily`](./nyt-the-daily.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/vercel-mesh.md",
+		description: "Vercel (Gradient Mesh Era) · Black-and-white precision broken by a single shimmering gradient mesh",
+		getContent: () => "\n# vercel-mesh — Vercel (Gradient Mesh Era)\n\n- **School**: Modern Tool / Builder SaaS (also touches Motion / Experimental)\n- **Vibe**: Black-and-white precision broken by a single shimmering gradient mesh\n- **Best for**: Platform / infrastructure tools, AI tools, deeply technical products that want to feel modern but not AI-cliché\n- **Touchstone**: vercel.com, the v0.dev landing, nextjs.org\n\n**Palette**\n- Ground: `#000000` (true black)\n- Surface 1: `#0A0A0A`\n- Surface 2: `#111111`\n- Hairline: `#1F1F1F` or `rgba(255,255,255,0.08)`\n- Primary text: `#EDEDED`\n- Secondary text: `#888888`\n- Gradient mesh accents (used only in hero / section breaks):\n  - Cyan `#0070F3` → magenta `#FF0080` → orange `#F5A623` — but mixed at low saturation and high feathering, never a hard purple-pink AI gradient\n- One sharp accent for CTAs: white `#FFFFFF` button on black ground (high contrast)\n\n**Typography**\n- Display: Geist Sans (weight 500–600) — Vercel's own family. Substitute Inter Tight weight 600.\n- Body: Geist Sans at 15–16px, weight 400, line-height 1.6\n- Mono: Geist Mono — for code, terminal-style commands, deploy logs\n\n**Spacing**: 4 / 8 / 16 / 24 / 40 / 64 / 96 / 128\n\n**Radius**: 8 (small) / 12 (medium) / 16 (large). Slightly more generous than Linear, but still disciplined.\n\n**Shadow**: minimal at component level; the *page* feels lit by the gradient mesh, not by shadows.\n\n**Motion**: snappy ease-out (cubic-bezier(0.16, 1, 0.3, 1)), 200ms hovers, 500–700ms for layout. The mesh itself slowly drifts (10–20s loop).\n\n**Signature moves**\n- One full-bleed gradient mesh in the hero — diffuse, dreamy, feathered to black edges\n- Otherwise the page is black-and-white with hairline detail and monospace accents\n- Deploy / terminal log readouts as a hero element (real-feeling, not lorem)\n- Animated mesh on hover for cards (the card \"lights up\" with a soft glow from below)\n- White solid buttons (`#FFFFFF` on `#000000`) — high contrast, no gradient, no shadow\n\n**Avoid**\n- Bright saturated purple → pink gradients (that's the AI cliché the recipe is *replacing*)\n- More than one mesh per page\n- Glow on every component (selective use — one hero, maybe one section break, that's it)\n- Colored buttons (the brand button is white)\n\n**AI prompt seed**\n> Abstract atmospheric gradient on pure black #000000 background, deep blue #0070F3 fading into magenta #FF0080 and orange #F5A623, feathered edges blending into black, dreamy soft focus, no objects, no text, 16:9, very low saturation overall.\n\n**Don't use when**\n- The brand isn't a platform / infra / tooling product — meshes on a consumer site read as \"trying too hard\"\n- Multiple gradient meshes are needed (use one or none, never several)\n- The audience expects warm / human feel\n\n---\n\n> **Same school — Modern Tool / Builder SaaS**: [`linear`](./linear.md) · [`raycast`](./raycast.md) · [`notion-pre-ai`](./notion-pre-ai.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/vignelli-swiss-helvetica.md",
+		description: "Vignelli / Swiss International · Strict grid, Helvetica throughout, \"six typefaces are enough\"",
+		getContent: () => "\n# vignelli-swiss-helvetica — Vignelli / Swiss International\n\n- **School**: Information Architecture\n- **Vibe**: Strict grid, Helvetica throughout, \"six typefaces are enough\"\n- **Best for**: Wayfinding / transit systems, institutional identity, deeply ordered information\n- **Touchstone**: 1972 NYC Subway map (Vignelli), Knoll catalogues, *The Vignelli Canon*\n\n**Palette**\n- Black `#000000` and white `#FFFFFF`\n- Plus one of: red `#E2231A` / yellow `#F5C518` / blue `#0033A0` / orange `#FF6F00` (only one — never two accents)\n- Cool gray `#8A8A8A` for secondary content\n\n**Typography**\n- Display & body: Helvetica or Helvetica Now exclusively. Weights: 400 / 500 / 700, no italic.\n- Hierarchy by size, not weight or color\n- Common scale: 72 / 48 / 32 / 24 / 16 / 12, all on the same baseline grid\n\n**Spacing**: 8px baseline grid, 12-column layout, generous baseline-to-baseline spacing equal to or greater than the type size.\n\n**Radius**: 0, always.\n\n**Shadow**: none.\n\n**Motion**: none, or instant. Swiss design is static by nature; if anything moves, it moves like signage being rotated into place.\n\n**Signature moves**\n- A bold horizontal or vertical color bar carries the section header in white Helvetica\n- The grid is **visible** when it helps — column gutters sometimes drawn as faint lines\n- Information sets (data, schedules, lists) get tabular layouts with strict baseline alignment\n- Body copy is left-aligned in a single readable measure (~60–70 characters); never centered\n- A single oversized number (chapter / section) sits at the top-left corner of each block\n\n**Avoid**\n- Serifs entirely\n- Color combinations other than ink + ground + one accent\n- Italic, drop shadows, gradients, any softness\n- \"Friendly\" copywriting tone — Swiss is matter-of-fact\n\n**AI prompt seed**\n> Transit-signage style composition, large directional arrow set in black on flat field of single accent color, condensed Helvetica destination labels, no decoration, 16:9 flat vector aesthetic.\n\n**Don't use when**\n- The brand needs warmth — Helvetica + grid reads as institutional / cold\n- The content is emotional / storytelling — Swiss strips emotion out\n- Modernity / freshness is the goal — Swiss design now reads as classical / archival\n\n---\n\n> **Same school — Information Architecture**: [`pentagram`](./pentagram.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`nyt-the-daily`](./nyt-the-daily.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	},
+	{
+		name: "references/style-recipes/y2k-retrofuturism.md",
+		description: "Y2K / Frutiger Aero Retrofuturism · Late-90s / early-2000s techno-optimism: chrome, glassy bubbles, jelly translucency, lens flare",
+		getContent: () => "\n# y2k-retrofuturism — Y2K / Frutiger Aero Retrofuturism\n\n- **School**: Specialty / Genre\n- **Vibe**: Late-90s / early-2000s techno-optimism: chrome, glassy bubbles, jelly translucency, lens flare\n- **Best for**: Fashion / music / nostalgia-coded products, creative campaigns, anything referencing 1999–2005 internet\n- **Touchstone**: late-90s Apple iMac G3 ads, Windows Vista Aero, the original iPod aqua buttons, MySpace pages\n\n**Palette**\n- Ground: electric ice blue `#A3D5FF` or chrome silver `#E0E4EA`\n- Glass accents: cyan `#5FC9F8` → magenta `#FF66C4` (the iridescent / oil-slick gradient)\n- Chrome: brushed-steel highlights at `#C4C9D2` to `#F2F4F8`\n- Acid green pops: `#A8FF00` (used sparingly)\n- Ink: `#000000` or `#FFFFFF` depending on ground\n\n**Typography**\n- Display: a chunky rounded sans with personality — Frutiger, Eurostile, or Sharp Grotesk in heavy weight; sometimes a chrome-effect treatment\n- Body: friendly humanist sans like Frutiger or Avenir at 14–16px\n- Numerals love an LCD / digital-readout treatment for hero counters\n- Underline + sparkle treatments common on link hover\n\n**Spacing**: 4 / 8 / 16 / 24 — packed but bubbly\n\n**Radius**: gummy — 16 / 24 / 32 / 9999 (full circle). Buttons are pill-shaped jelly bubbles.\n\n**Shadow**: heavy and colored — glossy reflections, drop shadows like `0 16px 32px rgba(95, 201, 248, 0.4)`. Inner highlights to simulate glass.\n\n**Motion**: bouncy springs, glow pulses, lens flare sweeps. Anything that recalls early-Flash interactions.\n\n**Signature moves**\n- Glassy translucent buttons with an inner top highlight (faking aqua / lozenge)\n- Iridescent oil-slick gradients on hero / character imagery\n- Chrome-effect type with sparkle overlays\n- Lens flare or specular highlight on any glass surface\n- 3D / dimensional UI elements (the OS-X-Aqua dock effect)\n- Floating circular orbs / bubbles drifting in the background\n\n**Avoid**\n- Sharp corners\n- Muted / earthy palettes — Y2K is bright and synthetic\n- Restrained typography — Y2K is exuberant\n- Anything that reads as \"tasteful 2020s minimalism\"\n\n**AI prompt seed**\n> Y2K retrofuturism scene, chrome silver and ice-blue iridescent gradient background, floating glass orbs with cyan and magenta oil-slick reflections, lens flare in upper right, single bright translucent pill-shaped button, late-1990s techno-optimism vibe, 16:9.\n\n**Don't use when**\n- The brand has no nostalgic / retro / playful claim\n- The audience is enterprise / professional — this recipe is consumer-fashion-music coded\n- Long-form readability matters (Y2K is for moments, not for reading)\n\n---\n\n> **Same school — Specialty / Genre**: [`mid-century-modern`](./mid-century-modern.md)  \n> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)\n\n"
+	}
+], qd = "web-design-engineer";
+function Jd() {
+	return {
+		name: qd,
+		description: "Design taste & anti-cliché system: declare the design system (palette/type/spacing/motion) before coding, avoid AI-default aesthetics (purple gradients/emoji icons/Inter), 25 named style recipes (linear/apple-hig/muji/pentagram/bloomberg-terminal…), 5-dimension critique. Load BEFORE starting any design-heavy visual work.",
+		getContent: () => Gd,
+		references: Kd
+	};
+}
+//#endregion
 //#region src/core/sdk/htmlRenderCheck.ts
-var Gd = /SecurityError|localStorage|sessionStorage|document\.cookie|Access is denied for this document/i;
-function Kd(e) {
+var Yd = /SecurityError|localStorage|sessionStorage|document\.cookie|Access is denied for this document/i;
+function Xd(e) {
 	if (e.noDom) return {
 		verdict: "pass",
 		problems: [],
@@ -10261,10 +10430,10 @@ function Kd(e) {
 		let e = r.lineno === void 0 ? "" : `(第 ${r.lineno} 行)`;
 		switch (r.type) {
 			case "js-error":
-				Gd.test(r.message) ? n.push(`storage 类错误降级为观察(沙箱 opaque origin 访问 localStorage/cookie 抛 SecurityError,非代码缺陷):${r.message}${e}`) : t.push(`JS 运行时错误:${r.message}${e}${r.source ? ` [${r.source}]` : ""}`);
+				Yd.test(r.message) ? n.push(`storage 类错误降级为观察(沙箱 opaque origin 访问 localStorage/cookie 抛 SecurityError,非代码缺陷):${r.message}${e}`) : t.push(`JS 运行时错误:${r.message}${e}${r.source ? ` [${r.source}]` : ""}`);
 				break;
 			case "console-error":
-				Gd.test(r.message) ? n.push(`console.error(storage 类,沙箱假阳性降观察):${r.message}`) : t.push(`console.error:${r.message}`);
+				Yd.test(r.message) ? n.push(`console.error(storage 类,沙箱假阳性降观察):${r.message}`) : t.push(`console.error:${r.message}`);
 				break;
 			case "unhandledrejection":
 				t.push(`未捕获的异步 Promise 拒绝(unhandledrejection):${r.message}`);
@@ -10287,7 +10456,7 @@ function Kd(e) {
 		metrics: e.metrics
 	};
 }
-function qd(e) {
+function Zd(e) {
 	return [
 		"(function(){",
 		`var N=${JSON.stringify(e)};`,
@@ -10314,23 +10483,23 @@ function qd(e) {
 		"})();"
 	].join("\n");
 }
-function Jd(e, t) {
-	let n = `<script>${qd(t)}<\/script>`;
+function Qd(e, t) {
+	let n = `<script>${Zd(t)}<\/script>`;
 	return /<head[^>]*>/i.test(e) ? e.replace(/<head[^>]*>/i, (e) => e + n) : /<html[^>]*>/i.test(e) ? e.replace(/<html[^>]*>/i, (e) => e + n) : n + e;
 }
-function Yd() {
+function $d() {
 	return typeof document < "u" && typeof document.createElement == "function" && document.body !== void 0 && document.body !== null;
 }
-var Xd = {
+var ef = {
 	created: 0,
 	destroyed: 0
 };
-function Zd() {
-	return { ...Xd };
+function tf() {
+	return { ...ef };
 }
-function Qd(e, t = {}) {
+function nf(e, t = {}) {
 	let n = t.silenceMs ?? 900, r = t.hardCapMs ?? 4e3, i = t.metricsGraceMs ?? 500;
-	if (!Yd()) return Promise.resolve({
+	if (!$d()) return Promise.resolve({
 		handshake: !1,
 		signals: [],
 		noDom: !0
@@ -10338,9 +10507,9 @@ function Qd(e, t = {}) {
 	let a = `pg_rc_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
 	return new Promise((t) => {
 		let o = [], s = !1, c, l, u, d, f, p, m = !1;
-		Xd.created++;
+		ef.created++;
 		let h = () => {
-			m || (m = !0, u && window.removeEventListener("message", u), d && clearTimeout(d), f && clearTimeout(f), p && clearTimeout(p), l && (l.remove(), Xd.destroyed++));
+			m || (m = !0, u && window.removeEventListener("message", u), d && clearTimeout(d), f && clearTimeout(f), p && clearTimeout(p), l && (l.remove(), ef.destroyed++));
 		}, g = (e = !1) => {
 			h(), t({
 				handshake: s,
@@ -10387,14 +10556,14 @@ function Qd(e, t = {}) {
 				...r.source === void 0 ? {} : { source: String(r.source) },
 				...typeof r.lineno == "number" ? { lineno: r.lineno } : {}
 			}), s && _();
-		}, window.addEventListener("message", u), f = setTimeout(() => g(!0), r), l = document.createElement("iframe"), l.setAttribute("sandbox", "allow-scripts"), l.setAttribute("aria-hidden", "true"), l.setAttribute("tabindex", "-1"), l.style.cssText = "position:fixed;left:-9999px;top:0;width:1024px;height:600px;visibility:hidden;border:0;opacity:0;pointer-events:none;", l.srcdoc = Jd(e, a), document.body.appendChild(l);
+		}, window.addEventListener("message", u), f = setTimeout(() => g(!0), r), l = document.createElement("iframe"), l.setAttribute("sandbox", "allow-scripts"), l.setAttribute("aria-hidden", "true"), l.setAttribute("tabindex", "-1"), l.style.cssText = "position:fixed;left:-9999px;top:0;width:1024px;height:600px;visibility:hidden;border:0;opacity:0;pointer-events:none;", l.srcdoc = Qd(e, a), document.body.appendChild(l);
 	});
 }
-function $d(e = {}) {
-	let t = e.vfsPrefix ?? "html/", n = e.codeField ?? "code", r = e.maxTargets ?? 4, i = typeof e.runner == "function", a = e.runner ?? ((e) => Qd(e)), o, s = e.writablePaths ?? [];
+function rf(e = {}) {
+	let t = e.vfsPrefix ?? "html/", n = e.codeField ?? "code", r = e.maxTargets ?? 4, i = typeof e.runner == "function", a = e.runner ?? ((e) => nf(e)), o, s = e.writablePaths ?? [];
 	return {
 		check: async ({ state: e, log: c }) => {
-			if (!i && !Yd()) return c?.("middleware", {
+			if (!i && !$d()) return c?.("middleware", {
 				stage: "render_check_skip",
 				reason: "no-dom"
 			}), { ok: !0 };
@@ -10429,7 +10598,7 @@ function $d(e = {}) {
 			});
 			let g = [], _ = [], v = [];
 			for (let e of h) {
-				let t = Kd(await a(e.html));
+				let t = Xd(await a(e.html));
 				for (let n of t.problems) g.push(`${e.label}:${n}`);
 				for (let n of t.warnings) _.push(`${e.label}:${n}`);
 				t.verdict === "unavailable" && v.push(e.label), c?.("middleware", {
@@ -10469,7 +10638,7 @@ function $d(e = {}) {
 		}
 	};
 }
-function ef(e, t) {
+function af(e, t) {
 	return async (n) => {
 		let r = await e(n);
 		return r.ok ? t(n) : r;
@@ -10477,7 +10646,7 @@ function ef(e, t) {
 }
 //#endregion
 //#region src/core/sdk/htmlSubagent.ts
-function tf(e, t, n) {
+function of(e, t, n) {
 	let r = "html";
 	return `你是纯代码组件生成专家。可用工具:vfs_write / vfs_edit / vfs_rm(写/改/删代码工作副本 vfs ${e}) / vfs_read + vfs_grep(读 vfs) / validate_code(代码格式自检) / write(写 data,writablePaths 限定;set/patch 增量或整体) / read / write_todos + update_todo(规划)。
 
@@ -10532,7 +10701,7 @@ ${`- 输出形态:完整、自包含的 HTML 页面(.${r},可独立成页)`}
    - 一次想清楚 → 动手 → 验证 → 收口。**思考是手段不是目的,产出代码才是**。
 8. **收口格式(必守,最后一行)**:收口回复 = 简短结果总结 + **末行交接笔记** \`[note] <一句话实现要点>\` —— 关键设计决策 / 用户偏好 / 踩坑(如「[note] 液面用 height keyframes 4.2s 循环;装饰仅灯串+光斑 2 类」)。框架只识别末尾 [note] 行存进组件、自动转交下次维护该组件的子 agent;**漏写 = 下任失去交接**(真 LLM 实测漏写率 3/4,务必末行带上)。一行内,只写可复用结论。`;
 }
-function nf(e, t) {
+function sf(e, t) {
 	return `# HTML 完整页面生成规范
 
 ## 代码资产模型(重要)
@@ -10570,14 +10739,14 @@ function nf(e, t) {
 - 语义化标签(button / nav / section);图片 alt;交互可键盘聚焦
 - 颜色对比达标;不只用颜色传达信息`;
 }
-function rf(e = "components", t = "code") {
+function cf(e = "components", t = "code") {
 	return {
 		name: "html-fragment",
 		description: "完整 HTML 页面生成规范:代码作为 data 资产 / vfs 工作副本 / 完整自包含可独立成页 / script+CSS 集中放置 / 可引外部 JS/CSS / validate_code 自检 / 安全底线 / 可访问性",
-		getContent: () => nf(e, t)
+		getContent: () => sf(e, t)
 	};
 }
-function af(e = {}) {
+function lf(e = {}) {
 	let t = e.vfsPrefix ?? "html/";
 	return ({ state: e }) => {
 		let n = e.files;
@@ -10594,7 +10763,7 @@ function af(e = {}) {
 		} : { ok: !0 };
 	};
 }
-function of(e) {
+function uf(e) {
 	let n, i, a = {
 		name: "html-validate-tools",
 		beforeAgent: (e) => {
@@ -10647,26 +10816,26 @@ function of(e) {
 		i = e;
 	}, a;
 }
-var sf = 2;
-function cf(e = {}) {
-	let { writablePaths: t, codeVfsPrefix: n = "html/", id: r = "html", description: i, planning: a = !0, summarization: o = !0, maxToolRounds: s = 12, temperature: c = .4, skills: l, extraTools: u, formatCheck: d = !0, codeField: f = "code", orchestratorPrompt: p = !0, craftNotes: m = !0, llm: h, thinkingMode: g, allowedTools: _ } = e;
+var df = 2;
+function ff(e = {}) {
+	let { writablePaths: t, codeVfsPrefix: n = "html/", id: r = "html", description: i, planning: a = !0, summarization: o = !0, maxToolRounds: s = 12, temperature: c = .4, skills: l, extraTools: u, formatCheck: d = !0, codeField: f = "code", orchestratorPrompt: p = !0, craftNotes: m = !0, llm: h, thinkingMode: g, allowedTools: _, design: v } = e;
 	if (t !== void 0 && !Array.isArray(t)) throw Error("[page-agent-sdk][createHtmlSubagent] writablePaths 须为字符串数组(代码组件 data 区,如 [\"components\"])/ 省略以从 schema 自动推断");
-	let v = [];
-	a && v.push(no());
-	let y = d ? $d({
+	let y = [];
+	a && y.push(no());
+	let b = d ? rf({
 		vfsPrefix: n,
 		codeField: f,
 		writablePaths: t ?? []
 	}) : void 0;
 	if (d) {
-		v.push(of(n));
-		let e = af({ vfsPrefix: n }), t = Fl({ check: y ? ef(e, y.check) : e });
-		y && (t._setGetController = y.setGetController), v.push(t);
+		y.push(uf(n));
+		let e = lf({ vfsPrefix: n }), t = Fl({ check: b ? af(e, b.check) : e });
+		b && (t._setGetController = b.setGetController), y.push(t);
 	}
-	let b = u ?? [], x = t?.[0] ?? "components", ee = l === void 0, S = {
+	let x = u ?? [], ee = t?.[0] ?? "components", S = l === void 0, C = v === !1 ? null : v === void 0 || v === !0 ? Jd() : v, w = (e) => [...S ? [cf(e, f)] : l, ...C ? [C] : []], T = {
 		id: r,
 		description: i ?? `生成/修改纯代码组件(代码作为 data 资产,代码字段 ${f} 随 data 持久化;vfs 作工作副本;能规划(write_todos)+ 执行)。需写代码组件或灵活定制时委派`,
-		systemPrompt: tf(n, f, x),
+		systemPrompt: of(n, f, ee),
 		...h ? { llm: h } : {},
 		...g ? { thinkingMode: g } : {},
 		writablePaths: t ?? [],
@@ -10678,29 +10847,29 @@ function cf(e = {}) {
 			"vfs_read",
 			..._ ?? []
 		],
-		middleware: v.length ? v : void 0,
+		middleware: y.length ? y : void 0,
 		summarization: o === !1 ? void 0 : o,
-		maxVerifyAttempts: d ? sf : void 0,
+		maxVerifyAttempts: d ? df : void 0,
 		temperature: c,
-		skills: ee ? [rf(x, f)] : l,
+		skills: w(ee),
 		maxToolRounds: s,
-		tools: b.length ? b : void 0,
+		tools: x.length ? x : void 0,
 		_codeAsset: {
 			writablePaths: t ?? [],
 			codeVfsPrefix: n,
 			ext: "html",
 			codeField: f,
 			craftNotes: m,
-			...p ? { orchestratorPrompt: fs(r, f) } : {}
+			...p ? { orchestratorPrompt: fs(r, f, v === void 0 || v === !0) } : {}
 		}
 	};
-	return S._rebuildCodeAssetPaths = (e) => {
-		S.systemPrompt = tf(n, f, e), ee && (S.skills = [rf(e, f)]), y?.setWritablePaths([e]);
-	}, S;
+	return T._rebuildCodeAssetPaths = (e) => {
+		T.systemPrompt = of(n, f, e), T.skills = w(e), b?.setWritablePaths([e]);
+	}, T;
 }
 //#endregion
 //#region src/core/sdk/defineTool.ts
-function lf(e) {
+function pf(e) {
 	let t = r(async (t) => {
 		let n = await e.handler(t);
 		return typeof n == "string" ? n : JSON.stringify(n);
@@ -10713,7 +10882,7 @@ function lf(e) {
 }
 //#endregion
 //#region src/core/sdk/inspectContextTool.ts
-var uf = t.object({
+var mf = t.object({
 	path: t.string().optional().describe("分类 key 过滤(如 toolResults/history/systemPrompt/dataHint);不传=全部分类"),
 	role: t.enum([
 		"user",
@@ -10723,11 +10892,11 @@ var uf = t.object({
 	]).optional().describe("聚焦每轮首句的角色(assistant→回复摘要,user→问题摘要);不影响工具列表"),
 	limit: t.number().int().min(1).max(50).optional().describe("返回最近 N 轮(默认全部;超 50 自动截最近 50 防返回过大)")
 });
-function df(e) {
-	return lf({
+function hf(e) {
+	return pf({
 		name: "inspect_context",
 		description: "查看当前对话上下文的构成(供压缩决策)。返回:totalTokens(历史轮次 token 总和,与触发判断同口径)、occupancy(窗口占用比)、contextWindow、categories(分类占用)、rounds(每轮 token/工具/首句)。先调用本工具查看构成,再决定压缩策略。",
-		schema: uf,
+		schema: mf,
 		handler: (t) => {
 			let n = vc(e.getMessages()), r = n.length > 50 ? n.slice(n.length - 50) : n, i = (t.limit && r.length > t.limit ? r.slice(r.length - t.limit) : r).map((e) => {
 				let n = Ac(e), r = bc(e), i = t.role === "assistant" ? e.assistantMsgs[0] ?? e.userMsg : e.userMsg, a = yc(typeof i.content == "string" ? i.content : "", 60);
@@ -10750,7 +10919,7 @@ function df(e) {
 }
 //#endregion
 //#region src/core/sdk/compressDecision.ts
-var ff = t.object({
+var gf = t.object({
 	keepRounds: t.number().int().min(0).max(50).optional(),
 	windowRatio: t.number().min(0).max(1).optional(),
 	summarize: t.object({ mode: t.enum(["index", "llm"]) }),
@@ -10760,23 +10929,23 @@ var ff = t.object({
 }).refine((e) => e.keepRounds !== void 0 || e.windowRatio !== void 0, { message: "keepRounds 与 windowRatio 至少填一个(按当前触发模式)" });
 //#endregion
 //#region src/core/sdk/llmResolver.ts
-function pf(e) {
+function _f(e) {
 	let t = e.find((e) => e.role === "user");
 	if (!t) return;
 	let n = t.content, r = (typeof n == "string" ? n : Array.isArray(n) ? n.map((e) => typeof e == "string" ? e : e?.text ?? "").join("") : String(n ?? "")).trim().replace(/[\n\r]+/g, " ");
 	if (r) return r.length > 30 ? r.slice(0, 30) + "…" : r;
 }
-function mf(e) {
+function vf(e) {
 	return !!e && typeof e == "object" && typeof e.invoke == "function" && typeof e.stream == "function";
 }
-function hf(e) {
+function yf(e) {
 	let t = e.content;
 	return typeof t == "string" ? t : Array.isArray(t) ? t.map((e) => typeof e == "string" ? e : e?.text ?? "").join("") : String(t ?? "");
 }
-function gf(e) {
+function bf(e) {
 	let t = e.summaryLlm ?? e.llm;
 	if (!t) return;
-	let n = e.summaryTemperature ?? .3, r = e.summaryMaxTokens ?? 1024, i = e.summaryTimeoutMs ?? 15e3, s = mf(t) ? t : null, c = mf(t) ? null : t;
+	let n = e.summaryTemperature ?? .3, r = e.summaryMaxTokens ?? 1024, i = e.summaryTimeoutMs ?? 15e3, s = vf(t) ? t : null, c = vf(t) ? null : t;
 	if (c && !c.apiKey) {
 		e.summaryLlm && console.warn("[page-agent-sdk][summarization] summaryLlm 已配置但缺 apiKey,摘要回退主 agent 模型或零成本索引摘要");
 		return;
@@ -10789,16 +10958,16 @@ function gf(e) {
 				temperature: n,
 				maxTokens: r,
 				thinkingFallback: "simple"
-			})), hf(await l.invoke([new o("你是对话历史压缩助手。把下面按轮次索引的对话要点,改写成一段连贯、紧凑的中文摘要,保留关键事实、用户意图与已用工具,不要编造。直接输出摘要正文。"), new a(e)], { signal: t.signal })).trim();
+			})), yf(await l.invoke([new o("你是对话历史压缩助手。把下面按轮次索引的对话要点,改写成一段连贯、紧凑的中文摘要,保留关键事实、用户意图与已用工具,不要编造。直接输出摘要正文。"), new a(e)], { signal: t.signal })).trim();
 		} finally {
 			clearTimeout(s);
 		}
 	};
 }
-function _f(e) {
+function xf(e) {
 	let t = e.titleLlm ?? e.summaryLlm ?? e.llm;
 	if (!t) return;
-	let n = mf(t) ? t : null, r = mf(t) ? null : t;
+	let n = vf(t) ? t : null, r = vf(t) ? null : t;
 	if (r && !r.apiKey) return;
 	let i = n;
 	return async (t) => {
@@ -10810,7 +10979,7 @@ function _f(e) {
 				thinkingFallback: "simple"
 			}));
 			let t = await i.invoke([new o(e.i18n?.locale === "en-US" ? "Generate a short English title (max 10 words) summarizing the conversation below. Output the title text only, no quotes or punctuation." : "根据以下对话的主旨,生成一个简短的中文标题(不超过15个字,不要标点和引号,直接输出标题文字)。"), new a(n)], { signal: s.signal }), c = e.i18n?.locale === "en-US" ? 60 : 20;
-			return hf(t).trim().replace(/^["'""「『]|["'""」』]$/g, "").split("\n")[0].slice(0, c);
+			return yf(t).trim().replace(/^["'""「『]|["'""」』]$/g, "").split("\n")[0].slice(0, c);
 		} catch {
 			return "";
 		} finally {
@@ -10818,10 +10987,10 @@ function _f(e) {
 		}
 	};
 }
-function vf() {
+function Sf() {
 	return `call_dec_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
 }
-function yf(e) {
+function Cf(e) {
 	let t = e.match(/```(?:json)?\s*([\s\S]*?)```/), n = t ? t[1] : e, r = n.indexOf("{"), i = n.lastIndexOf("}");
 	if (r < 0 || i < 0 || i <= r) return null;
 	try {
@@ -10830,21 +10999,21 @@ function yf(e) {
 		return null;
 	}
 }
-function bf(e) {
+function wf(e) {
 	if (!e) return null;
-	let t = yf(e);
+	let t = Cf(e);
 	if (t == null) return null;
-	let n = ff.safeParse(t);
+	let n = gf.safeParse(t);
 	return n.success ? n.data : null;
 }
-async function xf(e, t, n, r) {
+async function Tf(e, t, n, r) {
 	let i = [...n];
 	for (let n = 0; n < 3; n++) {
 		let n = await e.invoke(i, { signal: r }), a = n?.tool_calls ?? [];
-		if (!a.length) return hf(n).trim();
+		if (!a.length) return yf(n).trim();
 		i = [...i, n];
 		for (let e of a) {
-			let n = e.id ?? vf();
+			let n = e.id ?? Sf();
 			try {
 				let r = await t.invoke(e.args ?? {}), a = typeof r == "string" ? r : r?.content ?? JSON.stringify(r);
 				i = [...i, new s({
@@ -10861,10 +11030,10 @@ async function xf(e, t, n, r) {
 	}
 	return "";
 }
-function Sf(e) {
+function Ef(e) {
 	let t = e.summaryLlm ?? e.llm;
 	if (!t) return;
-	let n = mf(t) ? t : null, r = mf(t) ? null : t;
+	let n = vf(t) ? t : null, r = vf(t) ? null : t;
 	if (r && !r.apiKey) return;
 	let i = e.decisionTimeoutMs ?? 6e3, s = e.decisionMaxTokens ?? 2048, c = n;
 	return async (e) => {
@@ -10877,12 +11046,12 @@ function Sf(e) {
 			}));
 			let n = c;
 			if (typeof n.bindTools != "function") return null;
-			let i = df({
+			let i = hf({
 				getMessages: e.getMessages,
 				getSnapshot: e.getSnapshot,
 				contextWindow: e.contextWindow
 			}), l = n.bindTools([i]), u = e.triggerMode === "token" ? "token 模式:必填 windowRatio(0~1 保留窗口预算比例,如 0.4);keepRounds 可选" : "轮数模式:必填 keepRounds(保留最近几轮,如 6);windowRatio 可选", d = [new o(`你是对话历史压缩决策助手。当前触发模式 = ${e.triggerMode}(${e.triggerReason})。先调用 inspect_context 查看上下文构成,再输出压缩决策 JSON。${u}。仅输出 JSON,不要多余文字/markdown。schema:{keepRounds?(int 0-50), windowRatio?(0-1), summarize:{mode:"index"|"llm"}, recallTopK?(int 0-10), preserveTools?(string[]≤10), reason?(≤200字)}。keepRounds/windowRatio 至少填一个。`), new a(`触发原因:${e.triggerReason}\n上下文窗口:${e.contextWindow ?? "未知"} tokens\n阈值比例:${e.thresholdRatio ?? "未知"}\n\n请决策压缩策略(先 inspect_context 查看,再输出 JSON)。`)];
-			return bf(await xf(l, i, d, t.signal)) || bf(await xf(l, i, [...d, new a("上一次输出无效(JSON 解析失败或 schema 校验不通过)。请只输出符合 schema 的压缩决策 JSON,不要多余文字/markdown 代码块。")], t.signal));
+			return wf(await Tf(l, i, d, t.signal)) || wf(await Tf(l, i, [...d, new a("上一次输出无效(JSON 解析失败或 schema 校验不通过)。请只输出符合 schema 的压缩决策 JSON,不要多余文字/markdown 代码块。")], t.signal));
 		} catch {
 			return null;
 		} finally {
@@ -10890,8 +11059,8 @@ function Sf(e) {
 		}
 	};
 }
-function Cf(e) {
-	let t = e.llm, n = mf(e.llm) ? void 0 : e.llm;
+function Df(e) {
+	let t = e.llm, n = vf(e.llm) ? void 0 : e.llm;
 	return {
 		modelCaps: m({
 			model: n?.model ?? t?.model ?? t?.modelName,
@@ -10899,14 +11068,14 @@ function Cf(e) {
 			maxOutputTokens: e.maxOutputTokens ?? n?.maxOutputTokens ?? t?.maxOutputTokens,
 			vision: n?.vision ?? t?.vision
 		}),
-		summaryLlmInvoke: gf(e),
-		titleLlmInvoke: _f(e),
-		compressDecisionInvoke: Sf(e)
+		summaryLlmInvoke: bf(e),
+		titleLlmInvoke: xf(e),
+		compressDecisionInvoke: Ef(e)
 	};
 }
 //#endregion
 //#region src/core/sdk/conflictManager.ts
-function wf(e, t) {
+function Of(e, t) {
 	let n = /* @__PURE__ */ Lt(null), r = 0;
 	function i(i, a) {
 		let o = t?.() ?? "ask";
@@ -10952,7 +11121,7 @@ function wf(e, t) {
 }
 //#endregion
 //#region src/core/utils/id.ts
-function Tf() {
+function kf() {
 	try {
 		if (typeof crypto < "u" && typeof crypto.randomUUID == "function") return crypto.randomUUID();
 	} catch {}
@@ -10960,7 +11129,7 @@ function Tf() {
 }
 //#endregion
 //#region src/core/backends/storage.ts
-var Ef = "chat-sdk", Df = 50 * 1024 * 1024, Of = 4 * 1024 * 1024, kf = 10 * 1024 * 1024, Af = .9, jf = 500, Mf = 5e3, Nf = 300, Pf = "__meta__", Ff = "v:1", If = [
+var Af = "chat-sdk", jf = 50 * 1024 * 1024, Mf = 4 * 1024 * 1024, Nf = 10 * 1024 * 1024, Pf = .9, Ff = 500, If = 5e3, Lf = 300, Rf = "__meta__", zf = "v:1", Bf = [
 	"messages",
 	"vfs",
 	"todos",
@@ -10972,51 +11141,51 @@ var Ef = "chat-sdk", Df = 50 * 1024 * 1024, Of = 4 * 1024 * 1024, kf = 10 * 1024
 	"focus",
 	"planConfirmation"
 ];
-function Lf(e) {
-	return e === "local" || e === "session" ? Of : Df;
+function Vf(e) {
+	return e === "local" || e === "session" ? Mf : jf;
 }
-function Rf(e) {
+function Hf(e) {
 	if (typeof e != "object" || !e) return !1;
 	let t = e;
 	return t.name === "QuotaExceededError" || t.name === "NS_ERROR_DOM_QUOTA_REACHED" || t.code === 22 || t.code === 1014;
 }
-function zf(e, t, n, r) {
+function Uf(e, t, n, r) {
 	return [
-		Ff,
+		zf,
 		e,
 		t,
 		n,
 		r
 	].join("::");
 }
-function Bf(e, t, n) {
+function Wf(e, t, n) {
 	return [
-		Ff,
+		zf,
 		e,
 		t,
 		n
 	].join("::") + "::";
 }
-function Vf(e, t) {
+function Gf(e, t) {
 	return [
-		Ff,
+		zf,
 		e,
 		t
 	].join("::") + "::";
 }
-function Hf(e) {
-	return [Ff, e].join("::") + "::";
+function Kf(e) {
+	return [zf, e].join("::") + "::";
 }
-var Uf = null;
-function Wf(e) {
-	Uf ||= new TextEncoder();
+var qf = null;
+function Jf(e) {
+	qf ||= new TextEncoder();
 	try {
-		return Uf.encode(JSON.stringify(e)).length;
+		return qf.encode(JSON.stringify(e)).length;
 	} catch {
 		return 0;
 	}
 }
-function Gf(e, t, n) {
+function Yf(e, t, n) {
 	let r = e.reduce((e, t) => e + t.bytes, 0);
 	if (r <= t) return [];
 	let i = t * n, a = [...e].sort((e, t) => e.lastAccessed - t.lastAccessed), o = [];
@@ -11026,7 +11195,7 @@ function Gf(e, t, n) {
 	}
 	return o;
 }
-function Kf() {
+function Xf() {
 	let e = /* @__PURE__ */ new Map();
 	return {
 		async get(t) {
@@ -11046,7 +11215,7 @@ function Kf() {
 		}
 	};
 }
-function qf(e) {
+function Zf(e) {
 	return new Promise((t, n) => {
 		if (typeof indexedDB > "u") {
 			n(/* @__PURE__ */ Error("indexedDB 不可用"));
@@ -11107,7 +11276,7 @@ function qf(e) {
 		}, r.onerror = () => n(r.error);
 	});
 }
-function Jf(e) {
+function Qf(e) {
 	return {
 		async get(t) {
 			let n = e.getItem(t);
@@ -11152,24 +11321,24 @@ function Jf(e) {
 		}
 	};
 }
-function Yf(e, t, n) {
+function $f(e, t, n) {
 	let r = (e.get(t) ?? Promise.resolve()).then(n, n);
 	return e.set(t, r.then(() => void 0, () => void 0)), r;
 }
-function Xf(e = {}) {
-	return Qf(e, typeof e.backend == "object" && e.backend ? e.backend : void 0);
+function ep(e = {}) {
+	return np(e, typeof e.backend == "object" && e.backend ? e.backend : void 0);
 }
-function Zf(e, t) {
-	return Qf(e, t);
+function tp(e, t) {
+	return np(e, t);
 }
-function Qf(e = {}, t) {
-	let n = e.dbName ?? Ef, r = typeof e.backend == "string" ? e.backend ?? "indexed" : "indexed", i = e.maxBytes ?? Lf(r), a = e.maxBytesPerSession ?? (i === Infinity ? Infinity : kf), o = e.evictionWatermark ?? Af, s = e.debounceMs ?? jf, c = /* @__PURE__ */ new Set();
+function np(e = {}, t) {
+	let n = e.dbName ?? Af, r = typeof e.backend == "string" ? e.backend ?? "indexed" : "indexed", i = e.maxBytes ?? Vf(r), a = e.maxBytesPerSession ?? (i === Infinity ? Infinity : Nf), o = e.evictionWatermark ?? Pf, s = e.debounceMs ?? Ff, c = /* @__PURE__ */ new Set();
 	function l(e) {
 		for (let t of c) try {
 			t(e);
 		} catch {}
 	}
-	let u = Kf(), d = !1, f, p = new Promise((e) => {
+	let u = Xf(), d = !1, f, p = new Promise((e) => {
 		f = e;
 	});
 	(async () => {
@@ -11180,16 +11349,16 @@ function Qf(e = {}, t) {
 			}
 			if (r === "indexed") {
 				if (typeof indexedDB > "u") throw Error("indexedDB 不可用");
-				u = await qf(n), f(!0);
+				u = await Zf(n), f(!0);
 			} else if (r === "session") {
 				if (typeof sessionStorage > "u") throw Error("sessionStorage 不可用");
-				u = Jf(sessionStorage), f(!0);
+				u = Qf(sessionStorage), f(!0);
 			} else if (r === "local") {
 				if (typeof localStorage > "u") throw Error("localStorage 不可用");
-				u = Jf(localStorage), f(!0);
-			} else u = Kf(), f(!1);
+				u = Qf(localStorage), f(!0);
+			} else u = Xf(), f(!1);
 		} catch (e) {
-			u = Kf();
+			u = Xf();
 			let t = e instanceof Error ? e.message : String(e);
 			f(!1), Promise.resolve().then(() => l({
 				type: "degraded",
@@ -11199,10 +11368,10 @@ function Qf(e = {}, t) {
 	})();
 	let m = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map();
 	function _(e, t, r, i) {
-		let o = zf(n, r, i, Pf);
-		return Yf(g, o, async () => {
+		let o = Uf(n, r, i, Rf);
+		return $f(g, o, async () => {
 			let n = async () => {
-				let n = await u.get(o), s = await u.get(e), c = s == null ? 0 : Wf(s), d = Wf(t), f = (n?.bytes ?? 0) + (d - c);
+				let n = await u.get(o), s = await u.get(e), c = s == null ? 0 : Jf(s), d = Jf(t), f = (n?.bytes ?? 0) + (d - c);
 				if (f > a) {
 					l({
 						type: "quota",
@@ -11224,12 +11393,12 @@ function Qf(e = {}, t) {
 			try {
 				await n();
 			} catch (e) {
-				if (Rf(e) && !d) {
+				if (Hf(e) && !d) {
 					d = !0;
 					try {
 						await x();
 					} catch {}
-					u = Kf(), Promise.resolve().then(() => l({
+					u = Xf(), Promise.resolve().then(() => l({
 						type: "degraded",
 						reason: "存储配额超限(QuotaExceededError),已淘汰最旧会话并降级内存"
 					}));
@@ -11241,7 +11410,7 @@ function Qf(e = {}, t) {
 		});
 	}
 	function v(e, t, r, i) {
-		let a = zf(n, e, t, r), o = m.get(a);
+		let a = Uf(n, e, t, r), o = m.get(a);
 		o && o.resolve();
 		let c = h.get(a);
 		return c && clearTimeout(c), new Promise((n) => {
@@ -11268,16 +11437,16 @@ function Qf(e = {}, t) {
 	function b() {
 		y ||= setTimeout(() => {
 			y = null, x();
-		}, Nf);
+		}, Lf);
 	}
 	async function x() {
 		try {
 			let e = [];
-			await u.scan(Hf(n), (t, n) => {
+			await u.scan(Kf(n), (t, n) => {
 				t.endsWith("::__meta__") && e.push(n);
 			});
-			let t = Gf(e, i, o);
-			for (let e of t) await u.clearPrefix(Bf(n, e.agentId, e.sessionId)), l({
+			let t = Yf(e, i, o);
+			for (let e of t) await u.clearPrefix(Wf(n, e.agentId, e.sessionId)), l({
 				type: "evicted",
 				agentId: e.agentId,
 				sessionId: e.sessionId,
@@ -11294,13 +11463,13 @@ function Qf(e = {}, t) {
 		ready: p,
 		async listSessions(e) {
 			let t = [];
-			return await u.scan(Vf(n, e), (e, n) => {
+			return await u.scan(Gf(n, e), (e, n) => {
 				e.endsWith("::__meta__") && t.push(n);
 			}), t.sort((e, t) => t.lastAccessed - e.lastAccessed);
 		},
 		async load(e, t) {
-			let r = zf(n, e, t, Pf);
-			return await Yf(g, r, async () => {
+			let r = Uf(n, e, t, Rf);
+			return await $f(g, r, async () => {
 				let i = await u.get(r);
 				if (!i) return;
 				let a = {
@@ -11309,8 +11478,8 @@ function Qf(e = {}, t) {
 					todos: [],
 					memory: ""
 				};
-				for (let r of If) {
-					let i = await u.get(zf(n, e, t, r));
+				for (let r of Bf) {
+					let i = await u.get(Uf(n, e, t, r));
 					i != null && (a[r] = i);
 				}
 				i.lastAccessed = Date.now();
@@ -11322,12 +11491,12 @@ function Qf(e = {}, t) {
 		},
 		async save(e, t, n) {
 			let r = [];
-			for (let i of If) n[i] !== void 0 && r.push(v(e, t, i, n[i]));
+			for (let i of Bf) n[i] !== void 0 && r.push(v(e, t, i, n[i]));
 			await Promise.all(r);
 		},
 		async updateTitle(e, t, r) {
-			let i = zf(n, e, t, Pf);
-			return Yf(g, i, async () => {
+			let i = Uf(n, e, t, Rf);
+			return $f(g, i, async () => {
 				let e = await u.get(i);
 				e && (e.title = r, e.lastAccessed = Date.now(), await u.set(i, e));
 			});
@@ -11337,7 +11506,7 @@ function Qf(e = {}, t) {
 				let t = h.get(e);
 				t && (clearTimeout(t), h.delete(e));
 			}
-			let t = e.flushTimeoutMs ?? Mf, n = Array.from(m.entries());
+			let t = e.flushTimeoutMs ?? If, n = Array.from(m.entries());
 			await Promise.all(n.map(([e, n]) => new Promise((r) => {
 				let i;
 				_(e, n.value, n.agentId, n.sessionId).then(() => {
@@ -11353,13 +11522,13 @@ function Qf(e = {}, t) {
 			}))), l({ type: "flush" }), x();
 		},
 		async deleteSession(e, t) {
-			let r = Bf(n, e, t);
+			let r = Wf(n, e, t);
 			for (let [e, t] of m.entries()) e.startsWith(r) && (t.resolve(), m.delete(e));
 			for (let [e, t] of h.entries()) e.startsWith(r) && (clearTimeout(t), h.delete(e));
 			await u.clearPrefix(r);
 		},
 		async createSession(e, t, r) {
-			let i = r ?? Tf(), a = Date.now(), o = {
+			let i = r ?? kf(), a = Date.now(), o = {
 				agentId: e,
 				sessionId: i,
 				createdAt: a,
@@ -11368,7 +11537,7 @@ function Qf(e = {}, t) {
 				title: t
 			};
 			try {
-				await u.set(zf(n, e, i, Pf), o);
+				await u.set(Uf(n, e, i, Rf), o);
 			} catch {}
 			return i;
 		},
@@ -11385,15 +11554,15 @@ function Qf(e = {}, t) {
 }
 //#endregion
 //#region src/core/sdk/optionsResolver.ts
-function $f(e) {
-	return e === void 0 ? Xf({ backend: "memory" }) : e === !1 ? null : typeof e == "string" ? Xf({ backend: e }) : e.enabled === !1 ? null : Xf(e);
+function rp(e) {
+	return e === void 0 ? ep({ backend: "memory" }) : e === !1 ? null : typeof e == "string" ? ep({ backend: e }) : e.enabled === !1 ? null : ep(e);
 }
-function ep(e) {
+function ip(e) {
 	return e.dialog ?? {};
 }
 //#endregion
 //#region src/core/capabilities.ts
-var tp = [
+var ap = [
 	{
 		name: "dataOps",
 		defaultOn: !0
@@ -11469,13 +11638,13 @@ var tp = [
 		requires: ["summarization"]
 	}
 ];
-function np(e) {
+function op(e) {
 	let t = {};
-	for (let n of tp) {
+	for (let n of ap) {
 		let r = e?.[n.name];
 		t[n.name] = n.defaultOn ? r !== !1 : r === !0;
 	}
-	for (let e of tp) if (e.requires && t[e.name]) {
+	for (let e of ap) if (e.requires && t[e.name]) {
 		for (let n of e.requires) if (!t[n]) {
 			t[e.name] = !1;
 			break;
@@ -11485,7 +11654,7 @@ function np(e) {
 }
 //#endregion
 //#region src/core/sdk/events.ts
-function rp(e) {
+function sp(e) {
 	let t = /* @__PURE__ */ new Set(), n = (n) => {
 		if (n.type !== "approval_request") {
 			if (e) try {
@@ -11511,7 +11680,7 @@ function rp(e) {
 }
 //#endregion
 //#region src/core/sdk/contextPreset.ts
-var ip = {
+var cp = {
 	auto: {
 		summaryThresholdRatio: .5,
 		windowRatio: .4,
@@ -11539,7 +11708,7 @@ var ip = {
 		enableRecall: !0,
 		enableLLMSummary: !0
 	}
-}, ap = {
+}, lp = {
 	auto: ["describe_data", "read"],
 	conservative: ["describe_data"],
 	aggressive: ["describe_data", "read"],
@@ -11550,8 +11719,8 @@ var ip = {
 		"search_data"
 	]
 };
-function op(e, t) {
-	let n = ip[e.contextPreset ?? "auto"] ?? {}, r = e.contextOptions === !1 ? {} : e.contextOptions ?? {};
+function up(e, t) {
+	let n = cp[e.contextPreset ?? "auto"] ?? {}, r = e.contextOptions === !1 ? {} : e.contextOptions ?? {};
 	return {
 		...n,
 		...r,
@@ -11561,7 +11730,7 @@ function op(e, t) {
 }
 //#endregion
 //#region src/core/sdk/middlewareStack.ts
-var sp = {
+var dp = {
 	dataHint: 10,
 	usageHints: 20,
 	todos: 30,
@@ -11578,17 +11747,17 @@ var sp = {
 	subagents: 140,
 	augmentSystem: 150
 };
-function cp(e) {
+function fp(e) {
 	return e.map((e, t) => ({
 		m: e,
 		i: t,
-		p: sp[e.name] ?? Infinity
+		p: dp[e.name] ?? Infinity
 	})).sort((e, t) => e.p - t.p || e.i - t.i).map((e) => e.m);
 }
 //#endregion
 //#region src/core/tools/fetchDoc.ts
-var lp = 3e4, up = [r(async ({ url: e, as: t }) => {
-	let n = new AbortController(), r = setTimeout(() => n.abort(), lp);
+var pp = 3e4, mp = [r(async ({ url: e, as: t }) => {
+	let n = new AbortController(), r = setTimeout(() => n.abort(), pp);
 	try {
 		let r = await fetch(e, {
 			method: "GET",
@@ -11605,7 +11774,7 @@ var lp = 3e4, up = [r(async ({ url: e, as: t }) => {
 		].join("\n");
 	} catch (t) {
 		let r = t?.message || String(t);
-		return n.signal.aborted ? `获取失败:请求超时(${lp}ms,${e})。` : /Failed to fetch|NetworkError|CORS|blocked/i.test(r) ? `获取失败:可能是 CORS 跨域拦截或网络错误(${r})。浏览器仅能 GET 同源或服务端已配置 CORS 的资源;跨域抓取需后端代理。` : `获取失败:${r}`;
+		return n.signal.aborted ? `获取失败:请求超时(${pp}ms,${e})。` : /Failed to fetch|NetworkError|CORS|blocked/i.test(r) ? `获取失败:可能是 CORS 跨域拦截或网络错误(${r})。浏览器仅能 GET 同源或服务端已配置 CORS 的资源;跨域抓取需后端代理。` : `获取失败:${r}`;
 	} finally {
 		clearTimeout(r);
 	}
@@ -11616,7 +11785,7 @@ var lp = 3e4, up = [r(async ({ url: e, as: t }) => {
 		url: t.string().describe("要抓取的 URL(同源或已配 CORS)"),
 		as: t.enum(["text", "markdown"]).optional().describe("返回格式标签,默认 text")
 	})
-})], dp = [
+})], hp = [
 	"id",
 	"class",
 	"href",
@@ -11628,12 +11797,12 @@ var lp = 3e4, up = [r(async ({ url: e, as: t }) => {
 	"aria-label",
 	"name",
 	"type"
-], fp = /^(value|srcdoc|formaction|on\w+)$/i, pp = /token|secret|password|passwd|api[-_]?key|auth|cred|csrf|session/i;
-function mp(e, t) {
+], gp = /^(value|srcdoc|formaction|on\w+)$/i, _p = /token|secret|password|passwd|api[-_]?key|auth|cred|csrf|session/i;
+function vp(e, t) {
 	if (!e) return null;
-	let { depth: n, attrs: r, includeText: i = !0 } = t, a = r !== void 0, o = r ?? dp, s = (e) => {
+	let { depth: n, attrs: r, includeText: i = !0 } = t, a = r !== void 0, o = r ?? hp, s = (e) => {
 		let t = {};
-		for (let n of Array.from(e.attributes)) (a ? o.includes(n.name) : o.includes(n.name) || n.name.startsWith("data-")) && (fp.test(n.name) || pp.test(n.name) || (t[n.name] = n.value));
+		for (let n of Array.from(e.attributes)) (a ? o.includes(n.name) : o.includes(n.name) || n.name.startsWith("data-")) && (gp.test(n.name) || _p.test(n.name) || (t[n.name] = n.value));
 		return t;
 	}, c = (e, t) => {
 		let n = {
@@ -11649,10 +11818,10 @@ function mp(e, t) {
 	};
 	return c(e, n);
 }
-var hp = r(({ selector: e, depth: t, attrs: n, includeText: r }) => {
+var yp = r(({ selector: e, depth: t, attrs: n, includeText: r }) => {
 	let i = e ? document.querySelector(e) : document.body;
 	if (!i) return `未找到匹配元素:selector="${e}"`;
-	let a = mp(i, {
+	let a = vp(i, {
 		depth: t ?? 3,
 		attrs: n,
 		includeText: r ?? !0
@@ -11667,22 +11836,22 @@ var hp = r(({ selector: e, depth: t, attrs: n, includeText: r }) => {
 		attrs: t.array(t.string()).optional().describe("属性白名单(传了 = 严格白名单;不传 = 默认常用 + data-*)"),
 		includeText: t.boolean().optional().describe("是否包含直接文本(默认 true)")
 	})
-}), gp = [hp], _p = /* @__PURE__ */ "display.position.visibility.opacity.color.background-color.background-image.font-size.font-weight.line-height.text-align.z-index.overflow.width.height.margin.padding.border.border-radius.box-shadow.transform.transition.animation.cursor.pointer-events.flex-direction.gap.max-width.min-height".split("."), vp = /* @__PURE__ */ new WeakMap(), yp = !1;
-function bp() {
-	if (yp) return;
+}), bp = [yp], xp = /* @__PURE__ */ "display.position.visibility.opacity.color.background-color.background-image.font-size.font-weight.line-height.text-align.z-index.overflow.width.height.margin.padding.border.border-radius.box-shadow.transform.transition.animation.cursor.pointer-events.flex-direction.gap.max-width.min-height".split("."), Sp = /* @__PURE__ */ new WeakMap(), Cp = !1;
+function wp() {
+	if (Cp) return;
 	let e = globalThis.EventTarget;
 	if (!e?.prototype?.addEventListener) return;
-	yp = !0;
+	Cp = !0;
 	let t = e.prototype.addEventListener, n = e.prototype.removeEventListener;
 	e.prototype.addEventListener = function(e, ...n) {
 		try {
-			let t = vp.get(this);
-			t || (t = /* @__PURE__ */ new Map(), vp.set(this, t)), t.set(String(e), (t.get(String(e)) ?? 0) + 1);
+			let t = Sp.get(this);
+			t || (t = /* @__PURE__ */ new Map(), Sp.set(this, t)), t.set(String(e), (t.get(String(e)) ?? 0) + 1);
 		} catch {}
 		return t.call(this, e, ...n);
 	}, e.prototype.removeEventListener = function(e, ...t) {
 		try {
-			let t = vp.get(this);
+			let t = Sp.get(this);
 			if (t) {
 				let n = (t.get(String(e)) ?? 1) - 1;
 				n <= 0 ? t.delete(String(e)) : t.set(String(e), n);
@@ -11691,10 +11860,10 @@ function bp() {
 		return n.call(this, e, ...t);
 	};
 }
-function xp(e) {
-	return [...vp.get(e)?.entries() ?? []].filter(([, e]) => e > 0).map(([e]) => e);
+function Tp(e) {
+	return [...Sp.get(e)?.entries() ?? []].filter(([, e]) => e > 0).map(([e]) => e);
 }
-function Sp(e, t = 12) {
+function Ep(e, t = 12) {
 	let n = [], r = e, i = 0;
 	for (; r && r.tagName && i < t;) {
 		let e = r.tagName.toLowerCase(), t = r.id;
@@ -11715,7 +11884,7 @@ function Sp(e, t = 12) {
 	}
 	return n.join(" > ");
 }
-function Cp(e, t, n = {}) {
+function Dp(e, t, n = {}) {
 	if (!e) return {
 		hits: [],
 		total: 0,
@@ -11753,7 +11922,7 @@ function Cp(e, t, n = {}) {
 				n = r.slice(Math.max(0, i - 20), i + t.length + 40);
 			}
 			return {
-				selector: Sp(e),
+				selector: Ep(e),
 				tag: e.tagName.toLowerCase(),
 				text: n.slice(0, 120)
 			};
@@ -11762,7 +11931,7 @@ function Cp(e, t, n = {}) {
 		truncated: a.length > o
 	};
 }
-var wp = [
+var Op = [
 	"content",
 	"display",
 	"width",
@@ -11770,14 +11939,14 @@ var wp = [
 	"background-color",
 	"position"
 ];
-function Tp(e, t = {}) {
+function kp(e, t = {}) {
 	if (!e) return null;
 	let n = {
-		selector: Sp(e),
+		selector: Ep(e),
 		tag: e.tagName.toLowerCase(),
 		attrs: {}
 	};
-	for (let t of Array.from(e.attributes)) !(dp.includes(t.name) || t.name.startsWith("data-")) || fp.test(t.name) || pp.test(t.name) || (n.attrs[t.name] = t.value);
+	for (let t of Array.from(e.attributes)) !(hp.includes(t.name) || t.name.startsWith("data-")) || gp.test(t.name) || _p.test(t.name) || (n.attrs[t.name] = t.value);
 	let r = Array.from(e.childNodes).filter((e) => e.nodeType === 3).map((e) => e.textContent || "").join("").trim();
 	r && (n.text = r.slice(0, 400));
 	let i = String(e.innerText ?? e.textContent ?? "").trim();
@@ -11799,7 +11968,7 @@ function Tp(e, t = {}) {
 		if (typeof a != "function") return r;
 		try {
 			let i = a(e, n ?? null);
-			for (let e of n ? wp : t.styles ?? _p) {
+			for (let e of n ? Op : t.styles ?? xp) {
 				let t = typeof i.getPropertyValue == "function" ? i.getPropertyValue(e) : i[e];
 				t && (r[e] = String(t).slice(0, 200));
 			}
@@ -11817,16 +11986,16 @@ function Tp(e, t = {}) {
 		n.events = {
 			inline: t,
 			vue: r ? Object.keys(r).filter((e) => /^on[A-Z]/.test(e)).map((e) => e.slice(2).toLowerCase()) : [],
-			captured: xp(e)
+			captured: Tp(e)
 		};
 	}
 	return n;
 }
-var Ep = r(({ query: e, mode: t, limit: n, root: r }) => {
-	bp();
+var Ap = r(({ query: e, mode: t, limit: n, root: r }) => {
+	wp();
 	let i = r ? document.querySelector(r) : document;
 	if (r && !i) return `未找到 root 元素:selector="${r}"`;
-	let a = Cp(i, e, {
+	let a = Dp(i, e, {
 		mode: t,
 		limit: n
 	});
@@ -11843,11 +12012,11 @@ var Ep = r(({ query: e, mode: t, limit: n, root: r }) => {
 		limit: t.number().int().min(1).max(20).optional().describe("返回上限(默认 10)"),
 		root: t.string().optional().describe("限定搜索范围的容器选择器(默认整页)")
 	})
-}), Dp = r(({ selector: e, styles: t, includeHtml: n, htmlLimit: r, includeEvents: i, includeRect: a, pseudo: o }) => {
-	bp();
+}), jp = r(({ selector: e, styles: t, includeHtml: n, htmlLimit: r, includeEvents: i, includeRect: a, pseudo: o }) => {
+	wp();
 	let s = document.querySelector(e);
 	if (!s) return `未找到匹配元素:selector="${e}"(可先用 dom_search 定位)`;
-	let c = Tp(s, {
+	let c = kp(s, {
 		styles: t,
 		includeHtml: n,
 		htmlLimit: r,
@@ -11868,7 +12037,7 @@ var Ep = r(({ query: e, mode: t, limit: n, root: r }) => {
 		includeRect: t.boolean().optional().describe("是否含几何位置(默认 true)"),
 		pseudo: t.boolean().optional().describe("是否含 ::before/::after 伪元素摘要(默认 false)")
 	})
-}), Op = {
+}), Mp = {
 	name: "dom-inspect",
 	description: "页面 DOM 深度检视工具(dom_search 搜索元素 / dom_info 读内容·计算样式·事件绑定·几何)。定位元素、验证样式落地、排查交互绑定时加载",
 	getContent: () => [
@@ -11885,15 +12054,15 @@ var Ep = r(({ query: e, mode: t, limit: n, root: r }) => {
 		"## 排障套路",
 		"1. dom_search(mode:\"text\", query:按钮文案) 定位 → 2. dom_info(styles:[\"display\",\"background-color\",\"pointer-events\"]) 验证样式/点击性 → 3. 不符则改数据(get_dom 看结构对照)"
 	].join("\n"),
-	tools: [() => [Ep, Dp]]
+	tools: [() => [Ap, jp]]
 };
 //#endregion
 //#region src/core/tools/envTool.ts
-function kp(e) {
+function Np(e) {
 	let t = e;
 	return typeof t.tagName == "string" || typeof t.nodeType == "number" && typeof t.nodeName == "string";
 }
-function Ap(e, t = 3, n = 2e3, r, i) {
+function Pp(e, t = 3, n = 2e3, r, i) {
 	if (e == null) return e;
 	if (typeof e == "string") return e.length > n ? e.slice(0, n) + "…(已截断)" : e;
 	if (typeof e == "number" || typeof e == "boolean") return e;
@@ -11902,14 +12071,14 @@ function Ap(e, t = 3, n = 2e3, r, i) {
 	if (typeof e == "bigint") return `${e.toString()}n`;
 	if (typeof e != "object") return String(e);
 	let a = e;
-	if (kp(a)) {
+	if (Np(a)) {
 		let e = a;
 		return e.tagName ? `[Element: <${e.tagName.toLowerCase()}>]` : `[Node: ${e.nodeName}]`;
 	}
 	if (r?.has(a)) return "[Circular]";
 	let o = r ?? /* @__PURE__ */ new WeakSet();
 	if (o.add(a), Array.isArray(e)) {
-		let r = e.slice(0, 100).map((e) => Ap(e, t - 1, n, o, i));
+		let r = e.slice(0, 100).map((e) => Pp(e, t - 1, n, o, i));
 		return e.length > 100 && r.push(`…(共 ${e.length} 项,已截断)`), r;
 	}
 	if (t < 0) return "(对象,已截断)";
@@ -11922,14 +12091,14 @@ function Ap(e, t = 3, n = 2e3, r, i) {
 		}
 		try {
 			let e = a[r];
-			i?.test(r) ? s[r] = "[REDACTED]" : s[r] = Ap(e, t - 1, n, o, i);
+			i?.test(r) ? s[r] = "[REDACTED]" : s[r] = Pp(e, t - 1, n, o, i);
 		} catch {
 			s[r] = "(getter 抛错)";
 		}
 	}
 	return s;
 }
-function jp(e) {
+function Fp(e) {
 	let t = e ?? (typeof window < "u" ? window : {}), n = t.navigator, r = t.location, i = t.document;
 	return {
 		location: {
@@ -11962,9 +12131,9 @@ function jp(e) {
 		} : "(无 document)"
 	};
 }
-var Mp = /^(localStorage|sessionStorage|cookie|document|frames|frameElement|opener|parent|top|self|window|globalThis|closed|history|navigation|trustedTypes|origin|crossOriginIsolated)$/, Np = /token|secret|password|passwd|api[-_]?key|auth|cred|csrf|session|ticket/i, Pp = r(({ key: e }) => {
+var Ip = /^(localStorage|sessionStorage|cookie|document|frames|frameElement|opener|parent|top|self|window|globalThis|closed|history|navigation|trustedTypes|origin|crossOriginIsolated)$/, Lp = /token|secret|password|passwd|api[-_]?key|auth|cred|csrf|session|ticket/i, Rp = r(({ key: e }) => {
 	if (e) {
-		if (Mp.test(e) || Np.test(e)) return JSON.stringify({
+		if (Ip.test(e) || Lp.test(e)) return JSON.stringify({
 			key: e,
 			denied: !0,
 			reason: "安全:该 key 在 denylist(localStorage/sessionStorage/cookie/document 或敏感命名 token/secret/key/auth),不读取防泄漏"
@@ -11974,18 +12143,18 @@ var Mp = /^(localStorage|sessionStorage|cookie|document|frames|frameElement|open
 			key: e,
 			exists: t !== void 0,
 			type: typeof t,
-			value: Ap(t, 3, 2e3, void 0, Np)
+			value: Pp(t, 3, 2e3, void 0, Lp)
 		}, null, 2);
 	}
-	return JSON.stringify(jp(), null, 2);
+	return JSON.stringify(Fp(), null, 2);
 }, {
 	name: "inspect_env",
 	description: "读宿主页面环境信息(排查调试)。不传参返回摘要(URL/origin、浏览器/语言、viewport、title/readyState);传 key 读指定 window 属性值(如 key:\"appConfig\")。只读,大结果自动外存 vfs。",
 	schema: t.object({ key: t.string().optional().describe("要读取的 window 属性名(如 \"appConfig\"/\"__DEBUG__\");不传 = 返回环境摘要") })
-}), Fp = [Pp];
+}), zp = [Rp];
 //#endregion
 //#region src/core/harness/budget.ts
-function Ip(e, t, n) {
+function Bp(e, t, n) {
 	let r = 0;
 	return {
 		name: "budget",
@@ -12010,12 +12179,12 @@ function Ip(e, t, n) {
 }
 //#endregion
 //#region src/core/sdk/actions.ts
-var Lp = /^[a-zA-Z][a-zA-Z0-9_]*$/;
-function Rp(e) {
+var Vp = /^[a-zA-Z][a-zA-Z0-9_]*$/;
+function Hp(e) {
 	let n = [];
 	for (let [i, a] of Object.entries(e)) {
-		if (!Lp.test(i)) {
-			console.warn(`[page-agent-sdk][actions] 动作名 "${i}" 非法(须匹配 ${Lp}),已跳过`);
+		if (!Vp.test(i)) {
+			console.warn(`[page-agent-sdk][actions] 动作名 "${i}" 非法(须匹配 ${Vp}),已跳过`);
 			continue;
 		}
 		let e = a.description || `宿主动作 ${i}`;
@@ -12035,9 +12204,9 @@ function Rp(e) {
 	}
 	return n;
 }
-function zp(e) {
+function Up(e) {
 	let t = {};
-	for (let [n, r] of Object.entries(e)) Lp.test(n) && (t[n] = {
+	for (let [n, r] of Object.entries(e)) Vp.test(n) && (t[n] = {
 		description: r.description,
 		hasParams: !!r.params
 	});
@@ -12045,12 +12214,12 @@ function zp(e) {
 }
 //#endregion
 //#region src/core/toolsets.ts
-var Bp = up, Vp = gp;
-function Hp(e, t) {
+var Wp = mp, Gp = bp;
+function Kp(e, t) {
 	return ad(e, t);
 }
-function Up(e, t, n, r, i) {
-	let a = np(e);
+function qp(e, t, n, r, i) {
+	let a = op(e);
 	return [
 		...a.dataOps ? t : [],
 		...a.fetch ? n : [],
@@ -12060,7 +12229,7 @@ function Up(e, t, n, r, i) {
 }
 //#endregion
 //#region src/core/sdk/toolRegistry.ts
-function Wp(e) {
+function Jp(e) {
 	let t = /* @__PURE__ */ new Map(), n = [];
 	for (let r of e) for (let e of r.tools) {
 		let i = t.get(e.name);
@@ -12080,15 +12249,15 @@ function Wp(e) {
 }
 //#endregion
 //#region src/core/harness/usageHints.ts
-var Gp = .7;
-function Kp(e, t, n) {
-	let r = np(e);
+var Yp = .7;
+function Xp(e, t, n) {
+	let r = op(e);
 	return {
 		name: "usageHints",
 		augmentPrompt: (i) => {
 			let a = [];
-			if (r.planning && (a.push("【自适应规划】按任务复杂度决定是否先规划,不要对简单任务过度编排:"), a.push("  · 简单/明确任务(改单字段、调样式、查值)→ 直接 read/write 执行,不必 write_todos。"), a.push("  · 复杂任务(多步、大改、有歧义、不可逆)→ 先 write_todos 拆解,首个任务标 in_progress,逐项推进。"), a.push("  · 执行中发现步骤要改/补/细分 → 用 update_todo({id, content?, status?}) 按 id 增量改单项,不必重传整个清单。"), a.push("  · update_todo 标 completed 时附 evidence: 本次实际写入的 jsonPath(如 \"components.2\"),供收口对账;工作经委派子 agent 完成等无主写路径时,如实写明完成方式(勿编造路径)。"), e?.humanConfirm ? a.push("  · 规划出多步方案若需用户拍板 → 先 request_human_confirmation 给方案选项,确认后再执行。") : a.push("  · 规划出多步方案若需用户拍板 → 以文字列出方案选项等用户回复,勿自行拍板。"), a.push("  · 计划修订有次数上限(maxPlanRevisions,默认 5,只计 write_todos 调用、调研轮不计):勿反复改计划而不执行,规划充分后即开始 write 落地。")), t && (a.push("改主数据前先 read({jsonPath}) 读其当前真实值(返回末尾 hash=xxx 为乐观锁标识),基于真实值改,不要凭记忆。写入是否被自动校验由集成方 conflictWatchFields 声明决定:若已声明且主数据在你 read 之后被外部改过,会触发冲突——集成方若开启人工介入,工具会挂起等用户决定(保留外部/强制覆盖/回退),你应等待工具返回后按结果继续(保留外部→重新 read 再改;强制覆盖→已写入,继续;回退→已回退到历史快照,基于回退值重写);未开启人工介入时返回 VERSION_CONFLICT 不写入,重新 read 拿最新值再改。"), a.push("不确定主数据字段结构时用 describe_data 查看说明。"), a.push("修改大对象/数组优先用 write 增量改({patch:{op,jsonPath,value}} 只发改动部分),避免 write({value}) 整体重传被 max_tokens 截断导致 JSON 不完整、校验失败。"), a.push("修改主数据出错时可用 restore_data 回退最近一次。"), a.push("在大数组里按条件筛选元素用 query_data(JSONPath,如 $.components[?(@.type==\"card\" && @.price<100)]),返回匹配元素的 path/index;定位后再 write({patch}) 改。"), a.push("找名字记不清的元素用 search_data(支持 substring/regex/fuzzy 模糊搜索)。"), a.push("需要过滤/映射/聚合/批量重写大数组时用 eval_script(沙箱脚本,入参 data);只读探查用 mode=query,批量重写用 mode=transform(返回值经校验后落地)。"), a.push("读大数组用 read({jsonPath,offset,limit}) 分页(返回 hasMore=true 时 offset+=limit 续读);一次读多个不相关子路径用 read({jsonPaths});复杂改动先 write({...,dryRun:true}) 预检不落盘。"), a.push("【省轮次·批量】≥2 个路径一律 read({jsonPaths:[...]}) 一次取回(路径互不相关也合批,禁止连续单路径 read);改多处用 write({patches:[{op:\"set\",jsonPath,value},...]}) 一次提交多改动(原子任一失败回滚),勿逐个 write 烧轮次预算。"), a.push("读到 <subtree Nkb keys:[…] #指纹> 或 <code Nkb> 占位 = 该子树键名/体积可见但内容未见:写入前先窄读全文(read({jsonPath:\"该子树路径\"}),结果根豁免返全文)或 set_focus 聚焦该区域;勿凭键名印象猜路径/猜值直写(直接写占位子树会被拦下要求先窄读)。"), a.push("对比当前与历史快照(或一段 JSON against)的差异用 diff_data({snapshotId?,against?})(返回结构化 path→from/to,verify 自纠/操作审计/\"刚才改了啥\");只读查历史快照值用 history_data({id?,jsonPath?})。")), r.subagent && a.push("独立子任务可 spawn_agent 委派(过程隔离,不占主上下文):默认只读,需要子 agent 写数据时传 writablePaths(路径前缀白名单,越界 PATH_OUT_OF_SCOPE)。多个独立子任务可 spawn_agents 并行委派(各子互不通信,结论由你汇总;并行委派不可授写权限,写操作由你收尾执行)。"), r.inspectEnv && a.push("排查页面环境(当前 URL/浏览器/视口/集成方调试变量)用 inspect_env——不传参返回环境摘要(location/navigator/viewport/document),传 key 读特定 window 属性(如 inspect_env({key:\"appConfig\"}) 读 window.appConfig)。改完数据看渲染、定位\"为何没生效\"时用它(只读,不改数据)。"), r.domInspect && a.push("改完数据想确认渲染是否生效(或定位元素/辅助 UI 设计问答)用 get_dom({selector?,depth?}) 读渲染后 DOM(结构化返回 tag/attrs/text/children,depth 控制深度防爆炸,只读)。配合宿主 actions(save_draft/publish 等)形成\"改数据→get_dom 看渲染→触发动作\"闭环。"), r.draftWrite && (a.push("生成超大 JSON(如 50+ 组件页面,单次 write 受 max_tokens 限制装不下)用 draft_write 分块构建 → draft_commit 原子提交:draft_write({draftId, chunk, mode}) mode:\"start\" 新建/\"append\" 追加(拼 JSON 片段到 drafts 池);累积完 draft_commit({draftId}) 合并 + schema 校验 + 写主数据(失败草稿保留可修后重试,成功自动清草稿)。小改仍用 write patch,只在大 JSON 从零生成时用 draft。"), a.push("⚠️ 大 JSON 分块构建是典型多轮工具调用(draft_write×N + draft_commit + read 确认 + 调研 read/query),默认 maxToolRounds=30(3.43 起;轮次预算吃紧时 system 会注入预算提示段,按提示优先收口);目标组件数很大时集成方仍可在 createChatSdk 显式上调 maxToolRounds(按 N+10 估算)。draft_commit 提交同样走乐观锁(改前 read 拿 hash,bind 被改过会触发冲突介入,不静默覆盖)。")), r.focus && (a.push("【上下文聚焦】判断任务范围,用 set_focus/add_focus/remove_focus/clear_focus 自动收敛工作范围:"), a.push("  · 局部任务(只改某一组件/区域,如「调导航栏」「改 components.3 样式」)→ 先 read 定位 jsonPath,再 set_focus({path:\"该子树路径\"}) 聚焦;聚焦后每轮只看该子树结构,写其他位置会被 PATH_DENIED 拒绝。"), a.push("  · 多个相关组件(如「同时改导航栏和页脚」)→ set_focus 聚焦首个后用 add_focus({path}) 追加其余;聚焦后可写任一焦点子树,越界仍被拒;移除单个用 remove_focus({path})。"), a.push("  · 全局任务(多处/整体结构,如「重排所有组件」「换主题」)→ 不要聚焦,保持全量视野直接写。"), a.push("  · 完成局部精修、要转向其他区域或做整体改动 → 调 clear_focus 退出聚焦(清空全部焦点),恢复全部读写权限。"), a.push("  · set_focus/add_focus 的 path 必须在 schema 内(类型校验);不确定路径先 read/describe_data 查。")), e?.subagents?.length) {
-				let t = e.subagents.filter((e) => (e.temperature ?? 0) >= Gp || /规划|创意|设计|方案|brainstorm|plan/i.test(e.description)), n = e.subagents.filter((e) => (e.temperature ?? 0) < Gp && /反思|审查|挑刺|校验|review|critique|reflect/i.test(e.description));
+			if (r.planning && (a.push("【自适应规划】按任务复杂度决定是否先规划,不要对简单任务过度编排:"), a.push("  · 简单/明确任务(改单字段、调样式、查值)→ 直接 read/write 执行,不必 write_todos。"), a.push("  · 复杂任务(多步、大改、有歧义、不可逆)→ 先 write_todos 拆解,首个任务标 in_progress,逐项推进。"), a.push("  · 执行中发现步骤要改/补/细分 → 用 update_todo({id, content?, status?}) 按 id 增量改单项,不必重传整个清单。"), a.push("  · update_todo 标 completed 时附 evidence: 本次实际写入的 jsonPath(如 \"components.2\"),供收口对账;工作经委派子 agent 完成等无主写路径时,如实写明完成方式(勿编造路径)。"), e?.humanConfirm ? a.push("  · 规划出多步方案若需用户拍板 → 先 request_human_confirmation 给方案选项,确认后再执行。") : a.push("  · 规划出多步方案若需用户拍板 → 以文字列出方案选项等用户回复,勿自行拍板。"), a.push("  · 计划修订有次数上限(maxPlanRevisions,默认 5,只计 write_todos 调用、调研轮不计):勿反复改计划而不执行,规划充分后即开始 write 落地。")), t && (a.push("改主数据前先 read({jsonPath}) 读其当前真实值(返回末尾 hash=xxx 为乐观锁标识),基于真实值改,不要凭记忆。写入是否被自动校验由集成方 conflictWatchFields 声明决定:若已声明且主数据在你 read 之后被外部改过,会触发冲突——集成方若开启人工介入,工具会挂起等用户决定(保留外部/强制覆盖/回退),你应等待工具返回后按结果继续(保留外部→重新 read 再改;强制覆盖→已写入,继续;回退→已回退到历史快照,基于回退值重写);未开启人工介入时返回 VERSION_CONFLICT 不写入,重新 read 拿最新值再改。"), a.push("读类分流:取值/结构 → read(多路径用 jsonPaths);字段约束 → schema_data;条件筛选定位 → query_data(多条一次用 queries);名字模糊找 → search_data;整体说明 → read 不传路径(= describe_data)。"), a.push("修改大对象/数组优先用 write 增量改({patch:{op,jsonPath,value}} 只发改动部分),避免 write({value}) 整体重传被 max_tokens 截断导致 JSON 不完整、校验失败。"), a.push("修改主数据出错时可用 restore_data 回退最近一次。"), a.push("在大数组里按条件筛选元素用 query_data(JSONPath,如 $.components[?(@.type==\"card\" && @.price<100)]),返回匹配元素的 path/index;定位后再 write({patch}) 改。"), a.push("找名字记不清的元素用 search_data(支持 substring/regex/fuzzy 模糊搜索)。"), a.push("需要过滤/映射/聚合/批量重写大数组时用 eval_script(沙箱脚本,入参 data);只读探查用 mode=query,批量重写用 mode=transform(返回值经校验后落地)。"), a.push("读大数组用 read({jsonPath,offset,limit}) 分页(返回 hasMore=true 时 offset+=limit 续读);一次读多个不相关子路径用 read({jsonPaths});复杂改动先 write({...,dryRun:true}) 预检不落盘。"), a.push("【省轮次·批量】≥2 个路径一律 read({jsonPaths:[...]}) 一次取回(路径互不相关也合批,禁止连续单路径 read);多条件筛选用 query_data({queries:[expr1,expr2,…]}) 一次取回(2-10 条);改多处用 write({patches:[{op:\"set\",jsonPath,value},...]}) 一次提交多改动(原子任一失败回滚),勿逐个 write 烧轮次预算。"), a.push("读到 <subtree Nkb keys:[…] #指纹> 或 <code Nkb> 占位 = 该子树键名/体积可见但内容未见:写入前先窄读全文(read({jsonPath:\"该子树路径\"}),结果根豁免返全文)或 set_focus 聚焦该区域;勿凭键名印象猜路径/猜值直写(直接写占位子树会被拦下要求先窄读)。"), a.push("对比当前与历史快照(或一段 JSON against)的差异用 diff_data({snapshotId?,against?})(返回结构化 path→from/to,verify 自纠/操作审计/\"刚才改了啥\");只读查历史快照值用 history_data({id?,jsonPath?})。")), r.subagent && a.push("独立子任务可 spawn_agent 委派(过程隔离,不占主上下文):默认只读,需要子 agent 写数据时传 writablePaths(路径前缀白名单,越界 PATH_OUT_OF_SCOPE)。多个独立子任务可 spawn_agents 并行委派(各子互不通信,结论由你汇总;并行委派不可授写权限,写操作由你收尾执行)。"), r.inspectEnv && a.push("排查页面环境(当前 URL/浏览器/视口/集成方调试变量)用 inspect_env——不传参返回环境摘要(location/navigator/viewport/document),传 key 读特定 window 属性(如 inspect_env({key:\"appConfig\"}) 读 window.appConfig)。改完数据看渲染、定位\"为何没生效\"时用它(只读,不改数据)。"), r.domInspect && a.push("改完数据想确认渲染是否生效(或定位元素/辅助 UI 设计问答)用 get_dom({selector?,depth?}) 读渲染后 DOM(结构化返回 tag/attrs/text/children,depth 控制深度防爆炸,只读)。配合宿主 actions(save_draft/publish 等)形成\"改数据→get_dom 看渲染→触发动作\"闭环。"), r.draftWrite && (a.push("生成超大 JSON(如 50+ 组件页面,单次 write 受 max_tokens 限制装不下)用 draft_write 分块构建 → draft_commit 原子提交:draft_write({draftId, chunk, mode}) mode:\"start\" 新建/\"append\" 追加(拼 JSON 片段到 drafts 池);累积完 draft_commit({draftId}) 合并 + schema 校验 + 写主数据(失败草稿保留可修后重试,成功自动清草稿)。小改仍用 write patch,只在大 JSON 从零生成时用 draft。"), a.push("⚠️ 大 JSON 分块构建是典型多轮工具调用(draft_write×N + draft_commit + read 确认 + 调研 read/query),默认 maxToolRounds=30(3.43 起;轮次预算吃紧时 system 会注入预算提示段,按提示优先收口);目标组件数很大时集成方仍可在 createChatSdk 显式上调 maxToolRounds(按 N+10 估算)。draft_commit 提交同样走乐观锁(改前 read 拿 hash,bind 被改过会触发冲突介入,不静默覆盖)。")), r.focus && (a.push("【上下文聚焦】判断任务范围,用 set_focus/add_focus/remove_focus/clear_focus 自动收敛工作范围:"), a.push("  · 局部任务(只改某一组件/区域,如「调导航栏」「改 components.3 样式」)→ 先 read 定位 jsonPath,再 set_focus({path:\"该子树路径\"}) 聚焦;聚焦后每轮只看该子树结构,写其他位置会被 PATH_DENIED 拒绝。"), a.push("  · 多个相关组件(如「同时改导航栏和页脚」)→ set_focus 聚焦首个后用 add_focus({path}) 追加其余;聚焦后可写任一焦点子树,越界仍被拒;移除单个用 remove_focus({path})。"), a.push("  · 全局任务(多处/整体结构,如「重排所有组件」「换主题」)→ 不要聚焦,保持全量视野直接写。"), a.push("  · 完成局部精修、要转向其他区域或做整体改动 → 调 clear_focus 退出聚焦(清空全部焦点),恢复全部读写权限。"), a.push("  · set_focus/add_focus 的 path 必须在 schema 内(类型校验);不确定路径先 read/describe_data 查。")), e?.subagents?.length) {
+				let t = e.subagents.filter((e) => (e.temperature ?? 0) >= Yp || /规划|创意|设计|方案|brainstorm|plan/i.test(e.description)), n = e.subagents.filter((e) => (e.temperature ?? 0) < Yp && /反思|审查|挑刺|校验|review|critique|reflect/i.test(e.description));
 				a.push("【规划-反思-执行·路由】按任务性质选模式,不要对简单任务过度编排:"), t.length && (a.push(`  · 创作/设计/开放性需求(如"设计主题风格""换个感觉")→ 先调 ${t.map((e) => "use_" + e.id).join("/")} 出 2-3 套方案(高温创意),`), a.push(e?.humanConfirm ? "    不要自己拍板;拿到方案后,若需用户拍板用 request_human_confirmation 弹选项。" : "    不要自己拍板;拿到方案后以文字列出选项等用户回复(humanConfirm 未开,勿调不存在工具)。")), n.length && a.push(`  · 严谨/易错/校验类 → 可先调 ${n.map((e) => "use_" + e.id).join("/")} 反思挑刺(低温审查),据反馈修订。`), a.push("  · 方案定稿后,由你(主 agent)用 write 落地成 JSON(低温度执行 + schema 校验 + 写前确认)。"), a.push("  · 简单/明确任务(如\"标题改红色\")直接执行,不必走规划-反思。");
 			}
 			e?.humanConfirm && (a.push("【人工确认·必读】以下情形必须先调 request_human_confirmation 征询用户、拿到答复后再继续,不要自行拍板:"), a.push("  1) 用户让你「给方案/列选项/我来选/挑一个」时:把每个方案作为一个 option,调 request_human_confirmation(question=简述, options=[方案A,方案B,...], recommendation=你推荐的)。不要只回文字罗列方案让用户自己回复——要用工具把选项做成可点选按钮。"), a.push("  2) 需求有歧义/不确定时:调工具问清楚(options 不传则用户答同意或拒绝)。"), a.push("  3) 即将执行高风险不可逆操作(删除/覆盖/批量改动)前:调工具确认。"), a.push("  4) 规划出多步方案需用户确认时:把整个方案(或关键分步)作为 option 调 request_human_confirmation,确认后再执行。"), a.push("用户在选项里选了哪个,就按那个方案继续;选「拒绝」则停止并询问如何调整。"));
@@ -12108,7 +12277,7 @@ function Kp(e, t, n) {
 }
 //#endregion
 //#region src/core/harness/resourcesPin.ts
-function qp(e) {
+function Zp(e) {
 	return {
 		name: "resourcesPin",
 		augmentPrompt: () => {
@@ -12122,66 +12291,66 @@ function qp(e) {
 }
 //#endregion
 //#region src/core/backends/skillStore.ts
-var Jp = "v:1::skill-store", Yp = "chat-sdk";
-function Xp(e, t, n) {
-	return `${Jp}::${e}::${t}::${n}`;
+var Qp = "v:1::skill-store", $p = "chat-sdk";
+function em(e, t, n) {
+	return `${Qp}::${e}::${t}::${n}`;
 }
-function Zp(e, t) {
-	return `${Jp}::${e}::${t}::`;
+function tm(e, t) {
+	return `${Qp}::${e}::${t}::`;
 }
-function Qp(e = {}) {
-	let t = e.dbName ?? Yp, n = e.backend ?? "indexed", r = e.id ?? "", i, a, o = new Promise((e) => {
+function nm(e = {}) {
+	let t = e.dbName ?? $p, n = e.backend ?? "indexed", r = e.id ?? "", i, a, o = new Promise((e) => {
 		a = e;
 	});
 	return (async () => {
 		try {
 			if (n === "indexed") {
 				if (typeof indexedDB > "u") throw Error("indexedDB 不可用");
-				i = await qf(t), a(!0);
+				i = await Zf(t), a(!0);
 			} else if (n === "session") {
 				if (typeof sessionStorage > "u") throw Error("sessionStorage 不可用");
-				i = Jf(sessionStorage), a(!0);
+				i = Qf(sessionStorage), a(!0);
 			} else if (n === "local") {
 				if (typeof localStorage > "u") throw Error("localStorage 不可用");
-				i = Jf(localStorage), a(!0);
-			} else i = Kf(), a(!1);
+				i = Qf(localStorage), a(!0);
+			} else i = Xf(), a(!1);
 		} catch {
-			i = Kf(), a(!1);
+			i = Xf(), a(!1);
 		}
 	})(), {
 		ready: o,
 		async list() {
 			let e = [];
-			return await i.scan(Zp(t, r), (t, n) => {
+			return await i.scan(tm(t, r), (t, n) => {
 				e.push(n);
 			}), e;
 		},
 		async get(e) {
-			return await i.get(Xp(t, r, e));
+			return await i.get(em(t, r, e));
 		},
 		async put(e) {
 			try {
-				await i.set(Xp(t, r, e.name), e);
+				await i.set(em(t, r, e.name), e);
 			} catch (e) {
-				Rf(e) && (i = Kf());
+				Hf(e) && (i = Xf());
 			}
 		},
 		async remove(e) {
-			let n = Xp(t, r, e);
+			let n = em(t, r, e);
 			return await i.get(n) == null ? !1 : (await i.del(n), !0);
 		},
 		async clear() {
-			await i.clearPrefix(Zp(t, r));
+			await i.clearPrefix(tm(t, r));
 		},
 		dispose() {}
 	};
 }
-var $p = /large_results\/[^\s"'`),]+\.txt/g;
-function em(e) {
+var rm = /large_results\/[^\s"'`),]+\.txt/g;
+function im(e) {
 	let t = /* @__PURE__ */ new Set(), n = (e) => {
 		if (typeof e != "string" || !e) return;
 		let n;
-		for ($p.lastIndex = 0; (n = $p.exec(e)) !== null;) t.add(n[0]);
+		for (rm.lastIndex = 0; (n = rm.exec(e)) !== null;) t.add(n[0]);
 	};
 	for (let r of e) {
 		if (n(r.content), r.steps) for (let e of r.steps) n(e.result);
@@ -12189,14 +12358,14 @@ function em(e) {
 	}
 	return t;
 }
-function tm(e, t) {
+function am(e, t) {
 	let n = [];
 	for (let r of Object.keys(e)) r.startsWith("large_results/") && !t.has(r) && n.push(r);
 	return n;
 }
 //#endregion
 //#region src/core/utils/serialRunner.ts
-function nm() {
+function om() {
 	let e = Promise.resolve();
 	return function(t) {
 		let n = e.then(t, t);
@@ -12205,24 +12374,24 @@ function nm() {
 }
 //#endregion
 //#region src/core/sdk/createChatSdk.ts
-var rm = 30, im = /* @__PURE__ */ new Map();
-function am(e, t) {
+var sm = 30, cm = /* @__PURE__ */ new Map();
+function lm(e, t) {
 	return e === "restore_data" ? "restore" : e === "write" ? t?.dryRun ? null : t?.del ? "delete" : t?.patch || t?.patches ? "edit" : "set" : e === "eval_script" ? t?.mode === "transform" ? "edit" : null : e === "draft_commit" || e === "resource_update" ? "edit" : null;
 }
-function om(e) {
+function um(e) {
 	return e === "spawn_agent" || e === "spawn_agents" || e.startsWith("use_");
 }
-function sm(e, t, n, r) {
+function dm(e, t, n, r) {
 	let i = 0;
 	return {
 		name: "sdk-events",
 		wrapToolCall: async (t, r) => {
-			let i = await r(t), a = am(t.name, t.args), o = typeof i.content == "string" && i.content.startsWith("ERROR:");
+			let i = await r(t), a = lm(t.name, t.args), o = typeof i.content == "string" && i.content.startsWith("ERROR:");
 			return a && !o ? e({
 				type: "data_change",
 				operation: a,
 				value: n()?.bind
-			}) : i.status === "done" && !o && om(t.name) && e({
+			}) : i.status === "done" && !o && um(t.name) && e({
 				type: "data_change",
 				operation: "edit",
 				value: n()?.bind
@@ -12250,7 +12419,7 @@ function sm(e, t, n, r) {
 		}
 	};
 }
-function cm(e, t, n, r, i) {
+function fm(e, t, n, r, i) {
 	if (!n) return i && console.warn(`[page-agent-sdk][focus] capabilities.focus 关闭,${t} 忽略`), {
 		ok: !1,
 		error: "capabilities.focus 关闭"
@@ -12268,12 +12437,12 @@ function cm(e, t, n, r, i) {
 		error: "当前无主数据 schema,无法聚焦"
 	});
 }
-function lm(e, n) {
+function pm(e, n) {
 	let i = {
 		prompt_tokens: 0,
 		completion_tokens: 0,
 		total_tokens: 0
-	}, a = wf(() => J, () => e.conflictPolicy ?? "ask"), o = /* @__PURE__ */ Lt(0), s = $f(e.storage);
+	}, a = Of(() => J, () => e.conflictPolicy ?? "ask"), o = /* @__PURE__ */ Lt(0), s = rp(e.storage);
 	s && (e.debug && s.onEvent((e) => console.log("[page-agent-sdk][storage]", e)), s.onEvent((e) => {
 		e.type === "quota" && X.agent?.debugLogs?.value?.push({
 			timestamp: Date.now(),
@@ -12285,9 +12454,9 @@ function lm(e, n) {
 			}
 		});
 	}));
-	let { modelCaps: c, summaryLlmInvoke: l, titleLlmInvoke: u, compressDecisionInvoke: d } = Cf(e), f = c;
+	let { modelCaps: c, summaryLlmInvoke: l, titleLlmInvoke: u, compressDecisionInvoke: d } = Df(e), f = c;
 	if (e.debug && console.log("[page-agent-sdk][modelCaps]", f), f.contextWindow < 2e5) throw Error(`[page-agent-sdk] 模型上下文窗口 ${f.contextWindow} 小于最小支持 ${p}(需 ≥200K 窗口模型,如 GLM-5.2/Claude/Kimi/Qwen-1M/DeepSeek-v4)`);
-	let h = op(e, f.contextWindow), g = h.enableLLMSummary !== !1, _ = (e.contextOptions && e.contextOptions.preserveLastToolResults) ?? ap[e.contextPreset ?? "auto"], v = new Set(_), y = e.llm;
+	let h = up(e, f.contextWindow), g = h.enableLLMSummary !== !1, _ = (e.contextOptions && e.contextOptions.preserveLastToolResults) ?? lp[e.contextPreset ?? "auto"], v = new Set(_), y = e.llm;
 	e.debug && !l && console.warn("[page-agent-sdk][summarization] 未构造 llmInvoke(apiKey 缺失?),摘要回退零成本索引摘要");
 	let b = /* @__PURE__ */ Et([]), x = mu(e.vfs?.initialFiles, {
 		persist: s ? { save: (e) => {
@@ -12343,8 +12512,8 @@ function lm(e, n) {
 	let ie = { current: null }, M = e.data ? {
 		...e.data,
 		description: e.data.description ?? "主数据对象"
-	} : void 0, N = !(e.subagents ?? []).some((e) => e._codeAsset) && np(e.capabilities).subagent, P = e.subagents;
-	N && M?.schema && Xo(M.schema).length && (P = [...e.subagents ?? [], cf()], console.info("[page-agent-sdk] 检测到 schema 含代码组件数组(如 components[].code),已自动装配 HTML 代码子 agent(委派编排 + vfs 工作副本 + 格式校验 + 增量 commit)。需定制(codeField/formatCheck/craftNotes 等)请显式传 createHtmlSubagent(...)"));
+	} : void 0, N = !(e.subagents ?? []).some((e) => e._codeAsset) && op(e.capabilities).subagent, P = e.subagents;
+	N && M?.schema && Xo(M.schema).length && (P = [...e.subagents ?? [], ff()], console.info("[page-agent-sdk] 检测到 schema 含代码组件数组(如 components[].code),已自动装配 HTML 代码子 agent(委派编排 + vfs 工作副本 + 格式校验 + 增量 commit)。需定制(codeField/formatCheck/craftNotes 等)请显式传 createHtmlSubagent(...)"));
 	let ae = (P ?? []).filter((e) => !!e._codeAsset), F = /* @__PURE__ */ new Set();
 	for (let e of ae) {
 		if (e._codeAsset.writablePaths.length) continue;
@@ -12360,7 +12529,7 @@ function lm(e, n) {
 		getTodos: () => ie.current?.getState?.()?.todos ?? [],
 		messages: b,
 		maxCheckpoints: le && typeof le == "object" ? le.maxCheckpoints : void 0
-	}) : null, de = !le || typeof le != "object" || le.auto !== !1, z = np(e.capabilities), B = z.dataOps, fe = z.draftWrite, pe = z.automation, me = uu({
+	}) : null, de = !le || typeof le != "object" || le.auto !== !1, z = op(e.capabilities), B = z.dataOps, fe = z.draftWrite, pe = z.automation, me = uu({
 		...e,
 		locale: e.i18n?.locale
 	});
@@ -12377,7 +12546,7 @@ function lm(e, n) {
 		vfsStore: fe || M?.resources?.length ? x : void 0,
 		...se.length ? { pgIdPaths: se } : {},
 		...ce.length ? { largeTextPaths: ce } : {}
-	}) : [], he = B ? V : [], H = B && M ? V.controller ?? null : null, ge = B && M?.resources?.length && H?.getResourcesSnapshot ? qp({ getResourcesSnapshot: () => H?.getResourcesSnapshot?.() ?? [] }) : void 0, U = () => H?.get() ?? M, _e = new Set(V.map((e) => e.name)), ve = e.conflictWatchFields ?? [], ye = !ve.includes("*") && ve.length ? new Set(ve) : void 0, be = H ? Rd({
+	}) : [], he = B ? V : [], H = B && M ? V.controller ?? null : null, ge = B && M?.resources?.length && H?.getResourcesSnapshot ? Zp({ getResourcesSnapshot: () => H?.getResourcesSnapshot?.() ?? [] }) : void 0, U = () => H?.get() ?? M, _e = new Set(V.map((e) => e.name)), ve = e.conflictWatchFields ?? [], ye = !ve.includes("*") && ve.length ? new Set(ve) : void 0, be = H ? Rd({
 		getBind: () => U()?.bind,
 		recomputeAll: () => H.recomputeAllBaselines?.(),
 		hasBaselines: () => H.hasBaselines?.() ?? !1,
@@ -12394,15 +12563,15 @@ function lm(e, n) {
 				}
 			}), Vt(n));
 		}
-	}) : void 0, W = /* @__PURE__ */ new Map(), xe = Up(z, he, up, z.domInspect && !z.skills ? [
-		...gp,
-		Ep,
-		Dp
-	] : gp, Fp);
+	}) : void 0, W = /* @__PURE__ */ new Map(), xe = qp(z, he, mp, z.domInspect && !z.skills ? [
+		...bp,
+		Ap,
+		jp
+	] : bp, zp);
 	xe.forEach((e) => W.set(e.name, "builtin"));
 	let Se = [...e.tools || []];
 	Se.forEach((e) => W.set(e.name, "user"));
-	let Ce = Rp(e.actions ?? {});
+	let Ce = Hp(e.actions ?? {});
 	Ce.forEach((e) => W.set(e.name, "action"));
 	let we = [], Te = !1, Ee = e.humanConfirm !== !1 && (!e.approval || e.approval.humanConfirmTool !== !1), De = Ee ? Tl() : null;
 	De && W.set(Cl, "builtin");
@@ -12475,7 +12644,7 @@ function lm(e, n) {
 	let G = [], Fe = /* @__PURE__ */ new Map(), K = Ie();
 	function Ie() {
 		ki(Se), ki(Ce), ki(G);
-		let { tools: e, collisions: t } = Wp([
+		let { tools: e, collisions: t } = Jp([
 			{
 				label: "builtin",
 				tools: xe
@@ -12602,7 +12771,7 @@ function lm(e, n) {
 			resolveComponents: (e) => Td(e, yd(U()?.bind, se))
 		} : {}
 	}) : void 0, ct = st ? st.controller : null, lt = (t) => {
-		let n = t.thinkingMode ?? e.subagent?.thinkingMode, r = n ? mf(t.llm ?? e.llm) ? "instance-noop" : "applied" : "inherited";
+		let n = t.thinkingMode ?? e.subagent?.thinkingMode, r = n ? vf(t.llm ?? e.llm) ? "instance-noop" : "applied" : "inherited";
 		return {
 			...t,
 			...n ? { thinkingMode: n } : {},
@@ -12623,8 +12792,8 @@ function lm(e, n) {
 		} : void 0
 	}) : void 0, pt = Xe ? tu({
 		contextWindow: f.contextWindow,
-		thresholdRatio: op(e, f.contextWindow).summaryThresholdRatio
-	}) : void 0, mt = Kp({
+		thresholdRatio: up(e, f.contextWindow).summaryThresholdRatio
+	}) : void 0, mt = Xp({
 		...z,
 		humanConfirm: Ee,
 		subagents: oe?.map(lt)
@@ -12644,7 +12813,7 @@ function lm(e, n) {
 				return;
 			}
 		}
-	} : null, _t = rp(e.onEvent), J = _t.emit, vt, yt = [], bt = (e) => ({
+	} : null, _t = sp(e.onEvent), J = _t.emit, vt, yt = [], bt = (e) => ({
 		name: e.name,
 		description: e.description,
 		content: typeof e.getContent == "function" ? e.getContent() : ""
@@ -12652,7 +12821,7 @@ function lm(e, n) {
 		name: e.name,
 		description: e.description,
 		getContent: () => e.content
-	}), St = e.skillStorage === !1 ? null : Qp({
+	}), St = e.skillStorage === !1 ? null : nm({
 		...typeof e.skillStorage == "object" ? e.skillStorage : {},
 		id: e.skillStorage && typeof e.skillStorage == "object" && e.skillStorage.id ? e.skillStorage.id : `agent::${n}`
 	}), Ct = () => {
@@ -12684,14 +12853,14 @@ function lm(e, n) {
 			decideInvoke: d,
 			getSnapshot: () => pt?.getSnapshot()
 		} : {}
-	}) : void 0, Dt = cp([
+	}) : void 0, Dt = fp([
 		...ht ? [ht] : [],
 		mt,
 		...Re ? [w] : [],
 		T,
 		E,
 		...Le ? [C] : [],
-		...Be ? [vt = _c([...z.domInspect && !(e.skills || []).some((e) => e.name === Op.name) ? [Op] : [], ...e.skills || []], {
+		...Be ? [vt = _c([...z.domInspect && !(e.skills || []).some((e) => e.name === Mp.name) ? [Mp] : [], ...e.skills || []], {
 			readVfs: Ve ? (e) => x.files[e]?.content : void 0,
 			onToolsReady: (e, t) => {
 				for (let n of t) {
@@ -12721,12 +12890,12 @@ function lm(e, n) {
 		...gt ? [gt] : [],
 		...pt ? [pt] : [],
 		...e.middleware || [],
-		...pe ? [Ip(i, {
+		...pe ? [Bp(i, {
 			tokenBudget: e.tokenBudget,
 			timeBudgetMs: e.timeBudgetMs
 		}, J)] : [],
-		sm(J, b, U, i)
-	]), Ot = e.maxMemoryRounds ?? rm;
+		dm(J, b, U, i)
+	]), Ot = e.maxMemoryRounds ?? sm;
 	function kt(e) {
 		return (e) => {
 			e.type !== "approval_request" && J(e);
@@ -12740,7 +12909,7 @@ function lm(e, n) {
 			e.debug && console.warn("[page-agent-sdk][persist] refreshSessions 失败(已吞):", t);
 		}
 	}
-	let Mt = nm(), Nt = /* @__PURE__ */ new Set();
+	let Mt = om(), Nt = /* @__PURE__ */ new Set();
 	function Y(e) {
 		let t = new AbortController(), n = () => t.abort();
 		return e && (e.aborted ? t.abort() : e.addEventListener("abort", n, { once: !0 })), Nt.add(t), {
@@ -12849,7 +13018,7 @@ function lm(e, n) {
 					code: "IMAGE_UNSUPPORTED_MODEL"
 				}), Error(`[page-agent-sdk] ${e}`);
 			}
-			x?.setProtectedRefs?.(em(b));
+			x?.setProtectedRefs?.(im(b));
 			let i = pe ? t.maxAutoRetries ?? 1 : 0, o = 0, c = !1, l = kt(t.signal);
 			if (t.signal) {
 				let e = () => a.resolve("keep_external");
@@ -12924,7 +13093,7 @@ function lm(e, n) {
 			if (await X.initDone, !e.length) return [];
 			if (X.refCount <= 0) throw Error("page-agent-sdk: agent 已释放(unmount),拒绝排队中的 batch");
 			let r = [], i = kt(n);
-			if (x?.setProtectedRefs?.(em(b)), n) {
+			if (x?.setProtectedRefs?.(im(b)), n) {
 				let e = () => a.resolve("keep_external");
 				n.aborted ? e() : n.addEventListener("abort", e, { once: !0 });
 			}
@@ -13051,7 +13220,7 @@ function lm(e, n) {
 			})), e.memory && Gt({ memory: re.get() || (typeof e.memory == "string" ? e.memory : "") }), jt(), Ht = void 0, Ut = !1, X.infoTick.value++, r;
 		},
 		resetSession: () => {
-			Pt(), a.resolve("keep_external"), X.sessionId = Tf(), b.splice(0, b.length), x.clear?.(), C.reset([]), e.memory || re.reset(""), w.reset(), j.reset(), A.reset(), Tt?.reset(), E.reset(), D = void 0, R && R.importStack([]), X.agent && (X.agent.debugLogs.value = [], X.agent.resetStaleReadsInvalidated?.()), s && s.createSession(X.agentId, e.session?.title, X.sessionId).catch((t) => {
+			Pt(), a.resolve("keep_external"), X.sessionId = kf(), b.splice(0, b.length), x.clear?.(), C.reset([]), e.memory || re.reset(""), w.reset(), j.reset(), A.reset(), Tt?.reset(), E.reset(), D = void 0, R && R.importStack([]), X.agent && (X.agent.debugLogs.value = [], X.agent.resetStaleReadsInvalidated?.()), s && s.createSession(X.agentId, e.session?.title, X.sessionId).catch((t) => {
 				e.debug && console.warn("[page-agent-sdk][persist] createSession 失败(已吞):", t);
 			}), J({
 				type: "session_restored",
@@ -13071,7 +13240,7 @@ function lm(e, n) {
 					code: "IMAGE_UNSUPPORTED_MODEL"
 				}), Error(`[page-agent-sdk] ${e}`);
 			}
-			x?.setProtectedRefs?.(em(e));
+			x?.setProtectedRefs?.(im(e));
 			let i = (e) => {
 				t?.(e), J(e), e.type === "subagent" && (e.kind === "tool_call" || e.kind === "tool_result") && X.infoTick.value++;
 			};
@@ -13086,7 +13255,7 @@ function lm(e, n) {
 			if (X.refCount--, X.refCount <= 0) {
 				Pt(), Te = !0, s && (x.flush?.(), s.flush(), s.dispose()), St && St.dispose();
 				let e = X.mcpClosers.splice(0);
-				e.length && Promise.allSettled(e.map((e) => e())), im.delete(n);
+				e.length && Promise.allSettled(e.map((e) => e())), cm.delete(n);
 			}
 		},
 		resolveConflict: a.resolve,
@@ -13106,14 +13275,14 @@ function lm(e, n) {
 		},
 		setLlm(t) {
 			let n;
-			if (mf(t)) n = t;
+			if (vf(t)) n = t;
 			else {
 				let e = t;
 				if ((e.provider ?? "openai") === "anthropic") throw Error("[page-agent-sdk][setLlm] 切换到 Anthropic 需传 BaseChatModel 实例(动态 import 无法同步);请先 const { ChatAnthropic } = await import(\"@langchain/anthropic\") 构造实例后传入");
 				n = ee(e);
 			}
 			typeof n.bindTools != "function" && e.debug && console.warn("[page-agent-sdk][setLlm] 新模型不支持 bindTools(tool calling 会失效)"), y = t;
-			let r = mf(t) ? void 0 : t;
+			let r = vf(t) ? void 0 : t;
 			if (f = m({
 				model: r?.model ?? t.model ?? t.modelName,
 				contextWindow: e.contextWindow ?? r?.contextWindow,
@@ -13157,7 +13326,7 @@ function lm(e, n) {
 			return {
 				id: n,
 				sessionId: X.sessionId,
-				model: mf(y) ? y.model ?? y.modelName : y.model,
+				model: vf(y) ? y.model ?? y.modelName : y.model,
 				systemPrompt: X.agent?.getEffectiveSystemPrompt?.() ?? me + lu(U(), e.schemaHint),
 				tools: (X.agent?.allTools ?? K).map((e) => ({
 					name: e.name,
@@ -13197,7 +13366,7 @@ function lm(e, n) {
 				workingMemory: ze ? j.getWorkingMemory() : void 0,
 				focus: ke ? A.getFocus() : void 0,
 				focuses: ke ? A.getFocuses() : [],
-				actions: zp(e.actions ?? {}),
+				actions: Up(e.actions ?? {}),
 				subagent: {
 					enabled: !!nt,
 					maxDepth: e.subagent?.maxDepth ?? 1,
@@ -13284,11 +13453,11 @@ function lm(e, n) {
 			return ke ? A.getFocuses() : [];
 		},
 		setFocus(t) {
-			let n = cm(t, "setFocus", ke, () => U()?.schema, e.debug);
+			let n = fm(t, "setFocus", ke, () => U()?.schema, e.debug);
 			return n.ok ? (A.setFocus(t), e.debug && A.isInvokeActive() && console.info("[page-agent-sdk][focus] 在途流程进行中,聚焦将在下一次输入生效(当前流程不受影响)"), X.infoTick.value++, { ok: !0 }) : n;
 		},
 		addFocus(t) {
-			let n = cm(t, "addFocus", ke, () => U()?.schema, e.debug);
+			let n = fm(t, "addFocus", ke, () => U()?.schema, e.debug);
 			return n.ok ? A.getFocuses().length >= 8 ? (e.debug && console.warn("[page-agent-sdk][focus] addFocus 拒绝:焦点数已达上限 8(augmentPrompt 注入每焦点子树 schema,过多致 system prompt 超预算)"), {
 				ok: !1,
 				error: "焦点数上限 8(避免 system prompt 撑爆)"
@@ -13362,14 +13531,14 @@ function lm(e, n) {
 	}
 	function Rt(e) {
 		let t = {};
-		for (let n of em(e)) {
+		for (let n of im(e)) {
 			let e = x.files[n];
 			e && (t[n] = e.content);
 		}
 		return t;
 	}
 	function zt() {
-		let e = tm(x.files, em(b));
+		let e = am(x.files, im(b));
 		for (let t of e) delete x.files[t];
 	}
 	function Bt() {
@@ -13473,7 +13642,7 @@ function lm(e, n) {
 			Gt({ focus: e.length ? e : null });
 		}
 		pe && R && (Gt({ checkpoints: R.exportStack() }), Gt({ usage: i }));
-		let t = pf(b);
+		let t = _f(b);
 		if (t && t !== Ht && (Ht = t, Kt(X.sessionId, t)), e.autoTitle !== !1 && u && !Ut && b.some((e) => e.role === "user") && b.some((e) => e.role === "assistant")) {
 			Ut = !0;
 			let e = X.sessionId;
@@ -13551,7 +13720,7 @@ function lm(e, n) {
 				}
 			}));
 		})();
-		let t = mf(e.llm) ? e.llm : await S(e.llm);
+		let t = vf(e.llm) ? e.llm : await S(e.llm);
 		X.agent = Po({
 			llm: t,
 			systemPrompt: me,
@@ -13567,7 +13736,7 @@ function lm(e, n) {
 			contextWindow: f.contextWindow,
 			maxOutputTokens: f.maxOutputTokens,
 			vision: f.vision,
-			imageContentFormat: !mf(e.llm) && (e.llm.provider ?? "openai") === "anthropic" ? "anthropic" : "openai",
+			imageContentFormat: !vf(e.llm) && (e.llm.provider ?? "openai") === "anthropic" ? "anthropic" : "openai",
 			maxVerifyAttempts: Ye ? Ke : 0,
 			roundTokenBudget: e.roundTokenBudget ?? 0,
 			staleReadInvalidation: e.staleReadInvalidation,
@@ -13580,12 +13749,12 @@ function lm(e, n) {
 		});
 	})(), X;
 }
-function um(e, t) {
-	let n = e.id ?? Tf();
+function mm(e, t) {
+	let n = e.id ?? kf();
 	e.id || console.warn(`[page-agent-sdk] 未传 options.id,已生成随机 id "${n}"。刷新后持久化数据无法恢复,请传稳定 id。`);
-	let r = e.streaming ?? !0, i = e.ui ?? "default", a, o = e.shareContext ? im.get(n) : void 0;
-	o ? a = o : (a = lm(e, n), e.shareContext && im.set(n, a)), a.refCount++;
-	let s = null, c = ep(e), l = null, u = null;
+	let r = e.streaming ?? !0, i = e.ui ?? "default", a, o = e.shareContext ? cm.get(n) : void 0;
+	o ? a = o : (a = pm(e, n), e.shareContext && cm.set(n, a)), a.refCount++;
+	let s = null, c = ip(e), l = null, u = null;
 	async function d(n) {
 		if (await a.initDone, s) {
 			s.show();
@@ -13804,7 +13973,7 @@ function um(e, t) {
 }
 //#endregion
 //#region src/core/sdk/ragSubagent.ts
-function dm(e, t, n, r, i) {
+function hm(e, t, n, r, i) {
 	let a = [];
 	e && a.push("vfs_grep + vfs_read(搜预注入文档)"), t && a.push(`${r}(语义检索)`), n && a.push(`${i}(按 source 加载)`), a.push("fetch_document(公网 URL)");
 	let o = [];
@@ -13819,7 +13988,7 @@ function dm(e, t, n, r, i) {
 
 你是只读检索角色,不要尝试修改任何数据。不要尝试上面未列出的工具。`;
 }
-function fm(e, t, n, r, i) {
+function gm(e, t, n, r, i) {
 	let a = [], o = [];
 	return e && (a.push("- vfs_grep / vfs_read:搜集成方预注入 vfs 的文档(组件文档 / UI 规范)—— 快、静态,先查"), o.push("- 静态文档(组件库文档 / UI 规范):vfs_grep")), t && (a.push(`- ${r}:语义检索(retriever 向量库)—— 模糊匹配,关键词不确定 / 语义相似时用`), o.push(`- 语义相似(「瀑布流组件」「倒计时」「拼团」):${r}`)), n && (a.push(`- ${i}:按 source 精确加载(已知文档 id / URL / key)—— 精确取特定文档`), o.push(`- 已知文档 id / URL:${i}`)), a.push("- fetch_document:公网 URL —— 查公开资料"), o.push("- 公开 URL(设计规范网站 / 第三方文档):fetch_document"), `# 知识检索策略(RAG)
 
@@ -13836,12 +14005,12 @@ ${a.join("\n")}
 ## 何时用何源
 ${o.join("\n")}`;
 }
-var pm = {
+var _m = {
 	name: "rag-search",
 	description: "多源知识检索策略:vfs 预注入文档 → 语义检索 → 指定文档加载 → 公网;综合结构化结论 + 溯源",
-	getContent: () => fm(!0, !0, !0, "search_docs", "load_doc")
+	getContent: () => gm(!0, !0, !0, "search_docs", "load_doc")
 };
-function mm(e, n, i) {
+function vm(e, n, i) {
 	let a = r(async ({ query: e, topK: t }) => {
 		try {
 			let r = await n(e, { topK: t ?? i });
@@ -13859,7 +14028,7 @@ function mm(e, n, i) {
 	});
 	return ki([a]), a;
 }
-function hm(e, n) {
+function ym(e, n) {
 	let i = r(async ({ source: e }) => {
 		try {
 			let t = await n(e), r = Array.isArray(t) ? t : [t];
@@ -13874,19 +14043,19 @@ function hm(e, n) {
 	});
 	return ki([i]), i;
 }
-function gm(e) {
+function bm(e) {
 	let { retriever: t, loader: n, useVfs: r = !0, id: i = "rag", description: a, topK: o = 5, searchToolName: s = "search_docs", loadToolName: c = "load_doc", maxToolRounds: l = 8, summarization: u, skills: d, extraTools: f } = e;
 	if (!t && !n && r === !1) throw Error("[page-agent-sdk][createRagSubagent] 至少配一种知识源:retriever / loader / useVfs(true)");
 	let p = [];
-	t && p.push(mm(s, t, o)), n && p.push(hm(c, n)), f && p.push(...f);
+	t && p.push(vm(s, t, o)), n && p.push(ym(c, n)), f && p.push(...f);
 	let m = r ? [
 		"vfs_grep",
 		"vfs_read",
 		"vfs_json_read"
-	] : void 0, h = dm(r, !!t, !!n, s, c), g = {
+	] : void 0, h = hm(r, !!t, !!n, s, c), g = {
 		name: "rag-search",
-		description: pm.description,
-		getContent: () => fm(r, !!t, !!n, s, c)
+		description: _m.description,
+		getContent: () => gm(r, !!t, !!n, s, c)
 	};
 	return {
 		id: i,
@@ -13901,7 +14070,7 @@ function gm(e) {
 }
 //#endregion
 //#region src/core/utils/clipboard.ts
-async function _m(e) {
+async function xm(e) {
 	try {
 		let t = globalThis.navigator?.clipboard;
 		if (t && typeof t.writeText == "function") return await t.writeText(e), !0;
@@ -13919,8 +14088,8 @@ async function _m(e) {
 }
 //#endregion
 //#region src/core/composables/useChat.ts
-var vm = 4e3;
-function ym(e = {}) {
+var Sm = 4e3;
+function Cm(e = {}) {
 	let { fetchResponse: t, fetchStream: n, onPersist: r, onClear: i, onQueuedCleared: a, onBeforeRegenerate: o } = e, s = /* @__PURE__ */ Et({
 		messages: e.messages ?? [],
 		loading: !1,
@@ -14000,7 +14169,7 @@ function ym(e = {}) {
 								let t = e.delta || "";
 								n.subReasonFull = (n.subReasonFull || "") + t;
 								let r = (n.subReason || "") + t;
-								n.subReason = r.length > vm ? r.slice(-4e3) : r;
+								n.subReason = r.length > Sm ? r.slice(-4e3) : r;
 								break;
 							}
 							n.children ||= [];
@@ -14130,7 +14299,7 @@ function ym(e = {}) {
 }
 //#endregion
 //#region src/core/components/icons.ts
-var bm = {
+var wm = {
 	header: "🤖",
 	subagent: "🤖",
 	subagentProgress: "🧬",
@@ -14141,10 +14310,10 @@ var bm = {
 	recommend: "💡",
 	conflict: "⚠️"
 };
-function xm(e) {
-	let t = { ...bm };
+function Tm(e) {
+	let t = { ...wm };
 	if (!e) return t;
-	let n = Object.keys(bm);
+	let n = Object.keys(wm);
 	for (let r of n) {
 		let n = e[r];
 		typeof n == "string" && (t[r] = n);
@@ -14153,7 +14322,7 @@ function xm(e) {
 }
 //#endregion
 //#region src/core/components/messages.ts
-var Sm = {
+var Em = {
 	defaultTitle: "AI 助手",
 	inputPlaceholder: "输入消息,Enter 发送...",
 	newSession: "新建会话",
@@ -14377,8 +14546,8 @@ var Sm = {
 	codeDemoText: "这是一段示例文字，用于展示 CSS 效果。",
 	codeDemoButton: "按钮",
 	codeDemoInput: "输入框"
-}, Cm = {
-	"zh-CN": Sm,
+}, Dm = {
+	"zh-CN": Em,
 	"en-US": {
 		defaultTitle: "AI Assistant",
 		inputPlaceholder: "Type a message, Enter to send...",
@@ -14605,10 +14774,10 @@ var Sm = {
 		codeDemoInput: "Input"
 	}
 };
-function wm(e = "zh-CN", t) {
+function Om(e = "zh-CN", t) {
 	let n = {
-		...Sm,
-		...Cm[e]
+		...Em,
+		...Dm[e]
 	};
 	if (!t) return n;
 	let r = { ...n };
@@ -14620,9 +14789,9 @@ function wm(e = "zh-CN", t) {
 }
 //#endregion
 //#region src/core/composables/chatContext.ts
-var Tm = Symbol("chatContext");
-function Em(e = {}) {
-	let t = ym({
+var km = Symbol("chatContext");
+function Am(e = {}) {
+	let t = Cm({
 		fetchResponse: e.fetchResponse,
 		fetchStream: e.fetchStream,
 		messages: e.messages,
@@ -14644,7 +14813,7 @@ function Em(e = {}) {
 	}, h = /* @__PURE__ */ Lt({}), g = (e) => h.value[e] === !0, _ = (e) => {
 		h.value[e] = !g(e);
 	}, v = /* @__PURE__ */ Lt(!1), y = (e) => {
-		_m(e).then((e) => {
+		xm(e).then((e) => {
 			e && (v.value = !0, setTimeout(() => {
 				v.value = !1;
 			}, 1500));
@@ -14706,7 +14875,7 @@ function Em(e = {}) {
 		e.onClearFocus?.();
 	}, ae = (t) => {
 		e.onFocusChipClick?.(t);
-	}, F = xm(e.icons), I = e.locale ?? "zh-CN", oe = wm(I, e.dialogMessages);
+	}, F = Tm(e.icons), I = e.locale ?? "zh-CN", oe = Om(I, e.dialogMessages);
 	return {
 		chat: t,
 		inputText: o,
@@ -14748,15 +14917,15 @@ function Em(e = {}) {
 		toolStepView: e.toolStepView
 	};
 }
-function Dm() {
-	let e = Gn(Tm);
+function jm() {
+	let e = Gn(km);
 	if (!e) throw Error("useChatContext 必须在 provide(chatContextKey) 的组件子树内调用");
 	return e;
 }
 //#endregion
 //#region src/core/index.headless.ts
-function Om(e) {
-	return um(e);
+function Mm(e) {
+	return mm(e);
 }
 //#endregion
-export { tp as CAPABILITIES, ip as CONTEXT_PRESETS, ff as CompressDecisionSchema, _p as DEFAULT_COMPUTED_STYLES, Pc as DEFAULT_PROMPT_SOFT_CAP, su as DEFAULT_SYSTEM_PROMPT, od as HTML_VOID_TAGS, Cl as HUMAN_CONFIRM_TOOL_NAME, li as ImageInputError, p as MIN_CONTEXT_WINDOW, Ki as MODEL_UNAVAILABLE_GUIDANCE, Nc as SOFT_CAP_MIN_WINDOW, Dc as STOP_WORDS, js as UNSAFE_KEYS, zp as actionsToInspectInfo, Rp as actionsToTools, ai as agentError, eu as analyzeContext, Ws as applyPatchToClone, qs as applyPatchToLive, Ju as applyPatchesToBind, Wo as arrayMinLength, ii as asAgentError, qd as buildCollectorJs, Sp as buildCssPath, lu as buildDataPrompt, Ud as buildDiagnosticsReport, Jd as buildSandboxSrcdoc, uu as buildSystemPrompt, Tm as chatContextKey, qu as commitSetToBind, ef as composeStructureThenRender, bi as compressImage, ou as connectMcp, S as constructLlmFromConfig, ee as constructOpenLlmSync, _m as copyText, Po as createAgent, Sl as createApprovalMiddleware, Em as createChatContext, Om as createChatSdk, Nl as createCheckpointManager, Pl as createCheckpointMiddleware, wf as createConflictManager, tu as createContextInspectorMiddleware, ad as createDataOps, af as createHtmlFormatCheck, $d as createHtmlRenderCheck, cf as createHtmlSubagent, El as createHumanConfirmMiddleware, Tl as createHumanConfirmTool, Kf as createMemoryBackend, hl as createMemoryMiddleware, u as createProxyLlm, gm as createRagSubagent, Qi as createSandboxRunner, rp as createSdkEvents, nm as createSerialRunner, Xf as createSessionStore, Zf as createSessionStoreWithBackend, Qp as createSkillStore, ol as createSubagentMiddleware, Bc as createSubagentTracker, ll as createSubagentsMiddleware, Kp as createUsageHintsMiddleware, Fl as createVerifyMiddleware, mu as createVfs, Jf as createWebStorageBackend, Vl as createWriteBackCheck, qi as decorateModelUnavailable, Is as deepClone, Hp as defineDataToolset, rc as defineSkill, lf as defineTool, Fs as deleteByPath, pf as deriveTitle, is as describeSchemaNode, bo as detectGarbledToolCall, Zs as diffObjects, Dp as domInfoTool, Op as domInspectSkill, Ep as domSearchTool, mp as domToStructure, gp as domTools, Vp as domToolsStatic, Go as elementSchemaCandidates, bp as ensureDomListenerRecorder, kc as estimateMessageTokens, Ac as estimateRoundTokens, h as estimateTokens, w as extractReasoningDelta, _s as extractSchemaHint, nu as extractText, C as extractTextDelta, T as extractUsage, up as fetchDocTools, Bp as fetchTools, Xs as findStrippedKeys, as as formatConstraints, ei as formatZodIssues, Q as getByPath, hp as getDomTool, Tp as getElementInfo, jp as getEnvSummary, xp as getRecordedListeners, Zd as getSandboxLifecycle, Ro as getSchemaAtPath, Fo as getSchemaTopKeys, Hs as hashValue, fs as htmlOrchestratorPrompt, jc as indexSummarize, Pp as inspectEnvTool, Fp as inspectTools, mf as isChatModel, Wi as isContextLengthError, Gi as isModelUnavailableError, Io as isPathAllowed, Rf as isQuotaError, Ms as isUnsafePath, ca as jpEval, ni as jsonParseError, Bs as limitDepth, Vd as maskUrlCredentials, Rs as maybeParseValue, Fd as measureWriteScale, Kd as normalizeRenderResult, D as normalizeUsage, _ as offloadPassThroughChars, g as offloadThresholdChars, ds as presets, Qo as projectBySchema, Zo as projectBySchemaDeep, zs as projectFields, Mc as recallRounds, Qd as renderInSandbox, os as renderSchemaHint, ss as renderSchemaOverview, us as renderSchemaShallow, np as resolveCapabilities, op as resolveContextOptions, ep as resolveDialogConfig, Cf as resolveLlm, m as resolveModelCaps, Fc as resolvePromptSoftCap, Vo as resolveSchemaPath, $f as resolveStorage, Ys as restoreInPlace, Js as restoreLive, ri as routeError, fa as runSandboxedScript, Ns as safeMerge, Ap as safeSerialize, $ as safeStringify, Uo as schemaHasRefinement, Cp as searchDom, ua as searchJson, Up as selectBuiltinTools, Ps as setByPath, Ic as shouldTriggerCompression, Wd as stringifyDiagnosticsReport, ps as systemPromptHelpers, Oc as tokenize, Z as toolError, Lo as unwrapSchema, ym as useChat, Dm as useChatContext, Ho as validateAtPath, cd as validateHtmlFormat, Gu as validateRootValueLocally, Ku as validateWriteLocally, Us as watchFieldsHash, e as z, ti as zodError };
+export { ap as CAPABILITIES, cp as CONTEXT_PRESETS, gf as CompressDecisionSchema, xp as DEFAULT_COMPUTED_STYLES, Pc as DEFAULT_PROMPT_SOFT_CAP, su as DEFAULT_SYSTEM_PROMPT, od as HTML_VOID_TAGS, Cl as HUMAN_CONFIRM_TOOL_NAME, li as ImageInputError, p as MIN_CONTEXT_WINDOW, Ki as MODEL_UNAVAILABLE_GUIDANCE, Nc as SOFT_CAP_MIN_WINDOW, Dc as STOP_WORDS, js as UNSAFE_KEYS, Up as actionsToInspectInfo, Hp as actionsToTools, ai as agentError, eu as analyzeContext, Ws as applyPatchToClone, qs as applyPatchToLive, Ju as applyPatchesToBind, Wo as arrayMinLength, ii as asAgentError, Zd as buildCollectorJs, Ep as buildCssPath, lu as buildDataPrompt, Ud as buildDiagnosticsReport, Qd as buildSandboxSrcdoc, uu as buildSystemPrompt, km as chatContextKey, qu as commitSetToBind, af as composeStructureThenRender, bi as compressImage, ou as connectMcp, S as constructLlmFromConfig, ee as constructOpenLlmSync, xm as copyText, Po as createAgent, Sl as createApprovalMiddleware, Am as createChatContext, Mm as createChatSdk, Nl as createCheckpointManager, Pl as createCheckpointMiddleware, Of as createConflictManager, tu as createContextInspectorMiddleware, ad as createDataOps, lf as createHtmlFormatCheck, rf as createHtmlRenderCheck, ff as createHtmlSubagent, El as createHumanConfirmMiddleware, Tl as createHumanConfirmTool, Xf as createMemoryBackend, hl as createMemoryMiddleware, u as createProxyLlm, bm as createRagSubagent, Qi as createSandboxRunner, sp as createSdkEvents, om as createSerialRunner, ep as createSessionStore, tp as createSessionStoreWithBackend, nm as createSkillStore, ol as createSubagentMiddleware, Bc as createSubagentTracker, ll as createSubagentsMiddleware, Xp as createUsageHintsMiddleware, Fl as createVerifyMiddleware, mu as createVfs, Qf as createWebStorageBackend, Vl as createWriteBackCheck, qi as decorateModelUnavailable, Is as deepClone, Kp as defineDataToolset, rc as defineSkill, pf as defineTool, Fs as deleteByPath, _f as deriveTitle, is as describeSchemaNode, bo as detectGarbledToolCall, Zs as diffObjects, jp as domInfoTool, Mp as domInspectSkill, Ap as domSearchTool, vp as domToStructure, bp as domTools, Gp as domToolsStatic, Go as elementSchemaCandidates, wp as ensureDomListenerRecorder, kc as estimateMessageTokens, Ac as estimateRoundTokens, h as estimateTokens, w as extractReasoningDelta, _s as extractSchemaHint, nu as extractText, C as extractTextDelta, T as extractUsage, mp as fetchDocTools, Wp as fetchTools, Xs as findStrippedKeys, as as formatConstraints, ei as formatZodIssues, Q as getByPath, yp as getDomTool, kp as getElementInfo, Fp as getEnvSummary, Tp as getRecordedListeners, tf as getSandboxLifecycle, Ro as getSchemaAtPath, Fo as getSchemaTopKeys, Hs as hashValue, fs as htmlOrchestratorPrompt, jc as indexSummarize, Rp as inspectEnvTool, zp as inspectTools, vf as isChatModel, Wi as isContextLengthError, Gi as isModelUnavailableError, Io as isPathAllowed, Hf as isQuotaError, Ms as isUnsafePath, ca as jpEval, ni as jsonParseError, Bs as limitDepth, Vd as maskUrlCredentials, Rs as maybeParseValue, Fd as measureWriteScale, Xd as normalizeRenderResult, D as normalizeUsage, _ as offloadPassThroughChars, g as offloadThresholdChars, ds as presets, Qo as projectBySchema, Zo as projectBySchemaDeep, zs as projectFields, Mc as recallRounds, nf as renderInSandbox, os as renderSchemaHint, ss as renderSchemaOverview, us as renderSchemaShallow, op as resolveCapabilities, up as resolveContextOptions, ip as resolveDialogConfig, Df as resolveLlm, m as resolveModelCaps, Fc as resolvePromptSoftCap, Vo as resolveSchemaPath, rp as resolveStorage, Ys as restoreInPlace, Js as restoreLive, ri as routeError, fa as runSandboxedScript, Ns as safeMerge, Pp as safeSerialize, $ as safeStringify, Uo as schemaHasRefinement, Dp as searchDom, ua as searchJson, qp as selectBuiltinTools, Ps as setByPath, Ic as shouldTriggerCompression, Wd as stringifyDiagnosticsReport, ps as systemPromptHelpers, Oc as tokenize, Z as toolError, Lo as unwrapSchema, Cm as useChat, jm as useChatContext, Ho as validateAtPath, cd as validateHtmlFormat, Gu as validateRootValueLocally, Ku as validateWriteLocally, Us as watchFieldsHash, e as z, ti as zodError };