@autono/open-pages 0.6.0 → 0.8.0

package/dist/{open-pages-plugin-C0poXLsx.js → open-pages-plugin-C8cFhMB9.js}

@@ -1,11 +1,10 @@
-import fs from "node:fs/promises";
+import { createRequire } from "node:module";
 import path from "node:path";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import fs from "node:fs/promises";
 import { loadConfigFromFile, normalizePath } from "vite";
 import { parse } from "@babel/parser";
-import { createRequire } from "node:module";
 import fg from "fast-glob";
-
 //#region src/editing/page-ops.ts
 const PAGE_ID_RE = /^[a-z0-9_-]+$/i;
 function validatePageName(v) {
@@ -45,8 +44,7 @@ function readMetaTitleInSource(source) {
 			for (const property of properties) {
 				if (property.type !== "ObjectProperty" || property.computed) continue;
 				const key = property.key;
-				const keyName = key?.type === "Identifier" ? key.name : key?.type === "StringLiteral" ? key.value : void 0;
-				if (keyName !== "title") continue;
+				if ((key?.type === "Identifier" ? key.name : key?.type === "StringLiteral" ? key.value : void 0) !== "title") continue;
 				const value = property.value;
 				if (value?.type === "StringLiteral" && typeof value.value === "string") return {
 					kind: "found",
@@ -54,8 +52,7 @@ function readMetaTitleInSource(source) {
 				};
 				if (value?.type === "TemplateLiteral") {
 					const expressions = value.expressions ?? [];
-					const quasis = value.quasis ?? [];
-					const firstValue = quasis[0]?.value;
+					const firstValue = (value.quasis ?? [])[0]?.value;
 					const cooked = firstValue?.cooked;
 					const raw = firstValue?.raw;
 					if (expressions.length === 0 && typeof (cooked ?? raw) === "string") return {
@@ -114,14 +111,14 @@ async function duplicatePageDir(pagesRoot, pageId, desiredId) {
 			error: "invalid newId"
 		};
 		newId = desiredId;
-		const dstDir$1 = path.resolve(root, newId);
-		if (!dstDir$1.startsWith(root + path.sep)) return {
+		const dstDir = path.resolve(root, newId);
+		if (!dstDir.startsWith(root + path.sep)) return {
 			ok: false,
 			status: 400,
 			error: "invalid newId"
 		};
 		try {
-			await fs.access(dstDir$1);
+			await fs.access(dstDir);
 			return {
 				ok: false,
 				status: 409,
@@ -156,8 +153,7 @@ async function duplicatePageDir(pagesRoot, pageId, desiredId) {
 			status: 422,
 			error: "could not update copied page title"
 		};
-		const title = metaTitle.kind === "found" ? metaTitle.title : pageId;
-		const updated = updateMetaTitleInSource(source, `${title} (copy)`);
+		const updated = updateMetaTitleInSource(source, `${metaTitle.kind === "found" ? metaTitle.title : pageId} (copy)`);
 		if (updated === null) return {
 			ok: false,
 			status: 422,
@@ -248,18 +244,14 @@ function updateMetaTitleInSource(source, title) {
 			return source.slice(0, openBrace + 1) + newBody + source.slice(closeBrace);
 		}
 		const firstIndentMatch = body.match(/\n([ \t]+)\S/);
-		const indent = firstIndentMatch ? firstIndentMatch[1] : "  ";
-		const trimmedBody = body.replace(/^\s*\n?/, "");
-		const needsSeparator = trimmedBody.trim().length > 0;
-		const insertion$1 = `\n${indent}title: ${newLiteral}${needsSeparator ? "," : ""}`;
-		return source.slice(0, openBrace + 1) + insertion$1 + body + source.slice(closeBrace);
+		const insertion = `\n${firstIndentMatch ? firstIndentMatch[1] : "  "}title: ${newLiteral}${body.replace(/^\s*\n?/, "").trim().length > 0 ? "," : ""}`;
+		return source.slice(0, openBrace + 1) + insertion + body + source.slice(closeBrace);
 	}
 	const exportDefaultIdx = source.search(/export\s+default\b/);
 	if (exportDefaultIdx === -1) return null;
 	const insertion = `export const meta: PageMeta = { title: ${newLiteral} };\n\n`;
 	return source.slice(0, exportDefaultIdx) + insertion + source.slice(exportDefaultIdx);
 }
-
 //#endregion
 //#region src/vite/open-pages-plugin.ts
 const CONFIG_FILE = "open-pages.config.ts";
@@ -310,10 +302,9 @@ async function findPages(userCwd, pagesDir) {
 		absolute: true,
 		onlyFiles: true
 	});
-	const byId = new Map();
+	const byId = /* @__PURE__ */ new Map();
 	for (const file of hits.sort()) {
-		const rel = path.relative(abs, file);
-		const [id, name] = rel.split(path.sep);
+		const [id, name] = path.relative(abs, file).split(path.sep);
 		const kind = REACT_ENTRY_RE.test(name) ? "react" : "html";
 		const existing = byId.get(id);
 		if (!existing || existing.kind === "html" && kind === "react") byId.set(id, {
@@ -362,9 +353,8 @@ function extractMeta(src) {
 	};
 }
 function extractHtmlMeta(src) {
-	const title = src.match(HTML_TITLE_RE)?.[1]?.trim() ?? null;
 	return {
-		title: title || null,
+		title: (src.match(HTML_TITLE_RE)?.[1]?.trim() ?? null) || null,
 		theme: null,
 		createdAt: null
 	};
@@ -382,7 +372,7 @@ function parseCreatedAtMs(iso) {
 	const ms = Date.parse(iso);
 	return Number.isFinite(ms) ? ms : null;
 }
-const warnedInvalidPageIds = new Set();
+const warnedInvalidPageIds = /* @__PURE__ */ new Set();
 async function generatePagesModule(entries, isDev) {
 	const scanned = await Promise.all(entries.map(async (entry) => {
 		const importPath = isDev ? `@fs/${normalizePath(entry.file).replace(/^\/+/, "")}` : entry.file;
@@ -425,7 +415,8 @@ if (import.meta.hot) {
 		const importExpr = isDev ? `import(/* @vite-ignore */ import.meta.env.BASE_URL + ${JSON.stringify(`${e.importPath}?t=`)} + pageImportTokens[${JSON.stringify(e.id)}])` : `import(${JSON.stringify(e.importPath)})`;
 		return `    case ${JSON.stringify(e.id)}: return ${importExpr};`;
 	}).join("\n");
-	const code = `// virtual:open-pages/pages — generated
+	return {
+		code: `// virtual:open-pages/pages — generated
 export const pageIds = ${JSON.stringify(valid.map((e) => e.id))};
 export const pageKinds = ${JSON.stringify(kinds)};
 export const pageThemes = ${JSON.stringify(themesMap)};
@@ -438,9 +429,7 @@ ${cases}
     default: throw new Error('Page not found: ' + id);
   }
 }
-`;
-	return {
-		code,
+`,
 		ignored
 	};
 }
@@ -510,7 +499,7 @@ function openPagesPlugin(opts) {
 		return null;
 	};
 	let pageChangeTimer = null;
-	const pendingPageChanges = new Set();
+	const pendingPageChanges = /* @__PURE__ */ new Set();
 	const queuePageChanged = (server, id) => {
 		pendingPageChanges.add(id);
 		if (pageChangeTimer) clearTimeout(pageChangeTimer);
@@ -592,8 +581,7 @@ function openPagesPlugin(opts) {
 				reloadTimer = setTimeout(async () => {
 					reloadTimer = null;
 					try {
-						const entries = await findPages(userCwd, pagesDir);
-						if (pagesSignature(entries) === generatedSignature) return;
+						if (pagesSignature(await findPages(userCwd, pagesDir)) === generatedSignature) return;
 					} catch (err) {
 						server.config.logger.error(`[open-pages] failed to rescan pages: ${err}`, { error: err instanceof Error ? err : void 0 });
 					}
@@ -638,8 +626,7 @@ function openPagesPlugin(opts) {
 				if (p === foldersManifestPath) invalidateFolders();
 			});
 			server.middlewares.use("/__page", async (req, res, next) => {
-				const url = new URL(req.url ?? "/", "http://local");
-				const m = url.pathname.match(/^\/([^/]+)\/(?:index\.html)?$/);
+				const m = new URL(req.url ?? "/", "http://local").pathname.match(/^\/([^/]+)\/(?:index\.html)?$/);
 				if (!m || (req.method ?? "GET") !== "GET") return next();
 				const pageId = decodeURIComponent(m[1]);
 				if (!PAGE_ID_RE.test(pageId)) return next();
@@ -666,12 +653,10 @@ function openPagesPlugin(opts) {
 async function loadUserConfig(userCwd) {
 	const file = path.join(userCwd, CONFIG_FILE);
 	if (!existsSync(file)) return {};
-	const loaded = await loadConfigFromFile({
+	return (await loadConfigFromFile({
 		command: "serve",
 		mode: "development"
-	}, file, userCwd, "silent");
-	return loaded?.config ?? {};
+	}, file, userCwd, "silent"))?.config ?? {};
 }
-
 //#endregion
-export { PAGE_ID_RE, duplicatePageDir, extractMeta, findPages, invalidatePagesModule, loadUserConfig, openPagesPlugin, resolvePageEntry, rmPageDir, updateMetaTitleInSource, validatePageName };
+export { openPagesPlugin as a, resolvePageEntry as c, validatePageName as d, loadUserConfig as i, rmPageDir as l, findPages as n, PAGE_ID_RE as o, invalidatePagesModule as r, duplicatePageDir as s, extractMeta as t, updateMetaTitleInSource as u };

package/dist/preview-Dmzyd1cf.js

@@ -0,0 +1,24 @@
+import { a as printUrls, i as printShortcutsHint, o as shortcutsEnabled, r as printHeader, s as startupDuration, t as createCliLogger } from "./cli/bin.js";
+import { t as createViteConfig } from "./config-D_U_aCQz.js";
+import { mergeConfig, preview as preview$1 } from "vite";
+//#region src/cli/preview.ts
+async function preview(opts = {}) {
+	const base = await createViteConfig({ userCwd: process.cwd() });
+	const config = mergeConfig(base, {
+		customLogger: createCliLogger(),
+		preview: {
+			...opts.port !== void 0 ? { port: opts.port } : {},
+			...opts.host !== void 0 ? { host: opts.host } : {},
+			...opts.open !== void 0 ? { open: opts.open } : {}
+		}
+	});
+	const server = await preview$1(config);
+	printHeader(`preview · ${startupDuration()}`);
+	printUrls(server.resolvedUrls, opts.host);
+	if (shortcutsEnabled()) {
+		printShortcutsHint();
+		server.bindCLIShortcuts();
+	}
+}
+//#endregion
+export { preview };

package/dist/{sync-ui-CDydLpY4.js → sync-ui-BzRiAGCK.js}

@@ -1,9 +1,8 @@
+import path from "node:path";
 import chalk from "chalk";
+import { existsSync } from "node:fs";
 import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
-import path from "node:path";
 import { createHash } from "node:crypto";
-import { existsSync } from "node:fs";
-
 //#region src/cli/sync-ui.ts
 const UI_MANIFEST = path.join("ui", ".sync-manifest.json");
 const ENTRIES = [
@@ -129,6 +128,5 @@ function printUiSummary(result, dryRun) {
 	if (result.skipped.length > 0 && result.forced.length === 0) process.stdout.write(chalk.dim("Skipped files differ from what was scaffolded. Re-run with --force to overwrite them.\n"));
 	if (result.addedDeps.length > 0) process.stdout.write(`${chalk.yellow("!")} Added ${result.addedDeps.map((d) => chalk.bold(d)).join(", ")} to package.json — run your package manager's install.\n`);
 }
-
 //#endregion
-export { printUiSummary, syncUi };
+export { printUiSummary, syncUi };

package/dist/{types-BzxkFHhd.d.ts → types-DDdUFUIS.d.ts}

@@ -124,6 +124,7 @@ type Locale = {
     noMatchingAssetsHint: string;
     clearFilters: string;
     searchLogos: string;
+    searchFonts: string;
     upload: string;
     dropToUpload: string;
     loading: string;
@@ -161,6 +162,20 @@ type Locale = {
     logoSearchEmptyHintSuffix: string;
     logoVariantLight: string;
     logoVariantDark: string;
+    fontSearchTitle: string;
+    fontSearchPoweredByPrefix: string;
+    fontSearchPlaceholder: string;
+    fontSearchPreviewPlaceholder: string;
+    fontSearchErrorTitle: string;
+    fontSearchErrorBody: string;
+    /** template: 'No fonts for "{query}"' */
+    fontSearchNoResults: string;
+    fontSearchEmpty: string;
+    fontSearchEmptyHintPrefix: string;
+    fontSearchEmptyHintSuffix: string;
+    fontWeightLabel: string;
+    fontPreviewSample: string;
+    /** template: "Upload failed ({status})" */
     toastUploadFailed: string;
     toastReplaced: string;
     toastUploadedAs: string;
@@ -170,6 +185,7 @@ type Locale = {
     toastDeleteFailed: string;
     toastDeleted: string;
     toastDownloadFailed: string;
+    toastFontDownloadFailed: string;
     toastSearchFailed: string;
   };
   commandMenu: {
@@ -196,10 +212,6 @@ type Locale = {
     dark: string;
     system: string;
   };
-  languageToggle: {
-    toggleAria: string;
-    title: string;
-  };
   themes: {
     title: string;
     noThemesTitle: string;
@@ -215,5 +227,6 @@ type Locale = {
     expandPromptAria: string;
     collapsePromptAria: string;
   };
-}; //#endregion
-export { Locale, Plural };
+};
+//#endregion
+export { Plural as n, Locale as t };

package/dist/{update-D1U8TVwd.js → update-CWaCKlnl.js}

@@ -1,8 +1,7 @@
-import { PKG, detectPackageManager, fetchLatest, formatCommand, installCommandFor, isOutdated, localOpenPagesCommand, runCommand, updateCommandFor } from "./update-package-D9zws9nc.js";
+import { a as installCommandFor, c as localOpenPagesCommand, i as formatCommand, l as runCommand, n as detectPackageManager, r as fetchLatest, s as isOutdated, t as PKG, u as updateCommandFor } from "./update-package-GaNsVdr8.js";
+import path from "node:path";
 import chalk from "chalk";
 import { readFile } from "node:fs/promises";
-import path from "node:path";
-
 //#region src/cli/update.ts
 async function installedVersion(cwd) {
 	try {
@@ -35,8 +34,7 @@ async function update(opts) {
 		const pkgFile = path.join(cwd, "package.json");
 		const before = await readFile(pkgFile, "utf8").catch(() => "");
 		await runCommand(localOpenPagesCommand(cwd, ["sync:ui"]), cwd, { stdio: "inherit" });
-		const after = await readFile(pkgFile, "utf8").catch(() => "");
-		if (after !== before) {
+		if (await readFile(pkgFile, "utf8").catch(() => "") !== before) {
 			const reinstall = installCommandFor(packageManager);
 			process.stdout.write(chalk.dim(`$ ${formatCommand(reinstall)}\n`));
 			await runCommand(reinstall, cwd, { stdio: "inherit" });
@@ -44,6 +42,5 @@ async function update(opts) {
 	}
 	process.stdout.write(`${chalk.green("✓")} Updated ${PKG} to ${target}. Restart \`open-pages dev\` to use it.\n`);
 }
-
 //#endregion
-export { update };
+export { update };

package/dist/{update-package-D9zws9nc.js → update-package-GaNsVdr8.js}

@@ -1,10 +1,9 @@
-import fs from "node:fs/promises";
 import path from "node:path";
 import { spawn } from "node:child_process";
-
+import fs from "node:fs/promises";
 //#region src/shared/update-package.ts
 const PKG = "@autono/open-pages";
-const CACHE_TTL_MS = 10 * 60 * 1e3;
+const CACHE_TTL_MS = 6e5;
 const COMMAND_TIMEOUT_MS = 3e5;
 let cache = null;
 function parseSemver(v) {
@@ -57,12 +56,39 @@ async function fileExists(file) {
 		return false;
 	}
 }
+const LOCKFILES = [
+	["pnpm-lock.yaml", "pnpm"],
+	["yarn.lock", "yarn"],
+	["bun.lockb", "bun"],
+	["bun.lock", "bun"],
+	["package-lock.json", "npm"]
+];
+const PROJECT_ROOT_MARKERS = ["pnpm-workspace.yaml", ".git"];
+async function declaredPackageManager(dir) {
+	try {
+		const raw = await fs.readFile(path.join(dir, "package.json"), "utf8");
+		const declared = JSON.parse(raw).packageManager;
+		if (typeof declared !== "string") return null;
+		const name = declared.split("@")[0];
+		return name === "npm" || name === "pnpm" || name === "yarn" || name === "bun" ? name : null;
+	} catch {
+		return null;
+	}
+}
+async function isProjectRoot(dir) {
+	for (const marker of PROJECT_ROOT_MARKERS) if (await fileExists(path.join(dir, marker))) return true;
+	return false;
+}
 async function detectPackageManager(cwd) {
-	if (await fileExists(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
-	if (await fileExists(path.join(cwd, "yarn.lock"))) return "yarn";
-	if (await fileExists(path.join(cwd, "bun.lockb"))) return "bun";
-	if (await fileExists(path.join(cwd, "bun.lock"))) return "bun";
-	if (await fileExists(path.join(cwd, "package-lock.json"))) return "npm";
+	let dir = cwd;
+	while (true) {
+		const declared = await declaredPackageManager(dir);
+		if (declared) return declared;
+		for (const [lockfile, pm] of LOCKFILES) if (await fileExists(path.join(dir, lockfile))) return pm;
+		const parent = path.dirname(dir);
+		if (parent === dir || await isProjectRoot(dir)) break;
+		dir = parent;
+	}
 	const ua = process.env.npm_config_user_agent ?? "";
 	if (ua.startsWith("pnpm")) return "pnpm";
 	if (ua.startsWith("yarn")) return "yarn";
@@ -71,17 +97,14 @@ async function detectPackageManager(cwd) {
 }
 async function updateCommandFor(packageManager, cwd) {
 	switch (packageManager) {
-		case "pnpm": {
-			const workspaceRoot = await fileExists(path.join(cwd, "pnpm-workspace.yaml"));
-			return {
-				cmd: "pnpm",
-				args: workspaceRoot ? [
-					"add",
-					"--workspace-root",
-					`${PKG}@latest`
-				] : ["add", `${PKG}@latest`]
-			};
-		}
+		case "pnpm": return {
+			cmd: "pnpm",
+			args: await fileExists(path.join(cwd, "pnpm-workspace.yaml")) ? [
+				"add",
+				"--workspace-root",
+				`${PKG}@latest`
+			] : ["add", `${PKG}@latest`]
+		};
 		case "yarn": return {
 			cmd: "yarn",
 			args: ["add", `${PKG}@latest`]
@@ -132,7 +155,7 @@ async function runCommand(spec, cwd, opts = {}) {
 		let stderr = "";
 		const timer = setTimeout(() => {
 			child.kill();
-			reject(new Error(`${formatCommand(spec)} timed out`));
+			reject(/* @__PURE__ */ new Error(`${formatCommand(spec)} timed out`));
 		}, COMMAND_TIMEOUT_MS);
 		child.stderr?.on("data", (chunk) => {
 			stderr += chunk.toString("utf8");
@@ -153,6 +176,5 @@ async function runCommand(spec, cwd, opts = {}) {
 		});
 	});
 }
-
 //#endregion
-export { PKG, detectPackageManager, fetchLatest, formatCommand, installCommandFor, invalidateLatestCache, isOutdated, localOpenPagesCommand, runCommand, updateCommandFor };
+export { installCommandFor as a, localOpenPagesCommand as c, formatCommand as i, runCommand as l, detectPackageManager as n, invalidateLatestCache as o, fetchLatest as r, isOutdated as s, PKG as t, updateCommandFor as u };

package/dist/{version-B6AiiGvT.js → version-DZrXLoAD.js}

@@ -1,8 +1,25 @@
+import "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { existsSync, readFileSync } from "node:fs";
-
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
 //#region src/vite/version.ts
+var version_exports = /* @__PURE__ */ __exportAll({
+	APP_ROOT: () => APP_ROOT,
+	PKG_ROOT: () => PKG_ROOT,
+	readCoreVersion: () => readCoreVersion
+});
 function findPackageRoot(fromFile) {
 	let dir = path.dirname(fromFile);
 	while (dir !== path.dirname(dir)) {
@@ -21,6 +38,5 @@ function readCoreVersion() {
 		return "0.0.0";
 	}
 }
-
 //#endregion
-export { APP_ROOT, PKG_ROOT, readCoreVersion };
+export { version_exports as i, PKG_ROOT as n, readCoreVersion as r, APP_ROOT as t };

package/dist/vite/index.d.ts

@@ -1,14 +1,10 @@
-import "../types-BzxkFHhd.js";
-import { OpenPagesConfig } from "../config-C-sasGou.js";
+import { t as OpenPagesConfig } from "../config-p-TWNXbv.js";
 import { InlineConfig } from "vite";
-
 //#region src/vite/config.d.ts
 type CreateViteConfigOptions = {
   userCwd: string;
   config?: OpenPagesConfig;
   mode?: 'serve' | 'build';
 };
-declare function createViteConfig(opts: CreateViteConfigOptions): Promise<InlineConfig>;
-
-//#endregion
-export { createViteConfig };
+export declare function createViteConfig(opts: CreateViteConfigOptions): Promise<InlineConfig>;
+//#endregion

package/dist/vite/index.js

@@ -1,7 +1,2 @@
-import "../design-C13iz9_4.js";
-import "../open-pages-plugin-C0poXLsx.js";
-import { createViteConfig } from "../config-CBbwLHOo.js";
-import "../update-package-D9zws9nc.js";
-import "../version-B6AiiGvT.js";
-
-export { createViteConfig };
+import { t as createViteConfig } from "../config-D_U_aCQz.js";
+export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/open-pages",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Runtime and CLI for open-pages — live preview of React and HTML pages, click-to-comment inspector, and static export.",
   "type": "module",
   "exports": {
@@ -29,6 +29,7 @@
     "env.d.ts",
     "src/app",
     "src/locale",
+    "src/shared",
     "skills",
     "README.md",
     "workspace"
@@ -40,7 +41,7 @@
     "prepack": "pnpm build"
   },
   "engines": {
-    "node": ">=18"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "keywords": [
     "pages",
@@ -71,37 +72,37 @@
   },
   "dependencies": {
     "@babel/parser": "^8.0.4",
-    "@babel/types": "^8.0.4",
-    "@base-ui/react": "1.6.0",
-    "@fontsource-variable/geist": "^5.2.8",
+    "@babel/types": "^8.0.6",
+    "@base-ui/react": "1.8.0",
+    "@fontsource-variable/geist": "^5.3.0",
     "@tailwindcss/vite": "^4.3.3",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^6.1.1",
     "chalk": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "commander": "^15.0.0",
-    "emoji-picker-react": "^4.19.1",
+    "emoji-picker-react": "^4.22.2",
     "fast-glob": "^3.3.2",
-    "lucide-react": "^1.25.0",
+    "lucide-react": "^1.47.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-router-dom": "^7.18.1",
-    "shadcn": "^4.19.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.2",
+    "react-router-dom": "^7.18.4",
+    "shadcn": "^4.21.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
+    "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "use-sync-external-store": "^1.6.0",
-    "vite": "^6.4.3"
+    "use-sync-external-store": "^1.7.0",
+    "vite": "^8.3.0"
   },
   "devDependencies": {
-    "@playwright/test": "~1.62.1",
-    "@types/node": "^22.19.17",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "tsdown": "^0.9.9",
-    "typescript": "^5.9.3"
+    "@playwright/test": "1.63.0",
+    "@types/node": "^26.6.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2"
   }
 }

package/skills/apply-comments/SKILL.md

@@ -56,6 +56,7 @@ Your job: read those markers, perform the described edits, and delete the marker
    - After all edits, re-read the file and confirm the only remaining markers are ones you reported as skipped.
    - Confirm the edited JSX is well-formed (balanced tags, no dangling attributes) and that changed `className` strings are literal Tailwind utilities. If the project's `package.json` has typecheck/lint scripts, run them with the project's package manager; scaffolded projects ship neither TypeScript nor a linter — there, rely on the running dev server (or the `build` script) to surface compile errors. Fix any errors you introduced.
    - For layout changes, mentally check the Mobile viewport (390px): did the edit introduce a fixed width or a grid with no stacking fallback?
+   - When a comment changed interactive elements, forms, motion, or layout, run the `web-design-guidelines` skill on the page and fix any regression it reports before you report.
 
 7. **Report.**
    - Summarise: `N applied, M skipped` plus a one-line description of each change (including the page id).

package/skills/create-page/SKILL.md

@@ -94,7 +94,11 @@ Read the **`page-authoring`** skill before writing — file contract, `@/ui/*` c
 
 ## Step 7 — Self-review
 
-Run the checklist in `page-authoring` ("Self-review before finishing"): every button/input/card/dialog/tab is a `@/ui` component, colors are tokens, nothing under `ui/` changed. Check all three viewports.
+Run the checklist in `page-authoring` ("Self-review before finishing"): every button/input/card/dialog/tab is a `@/ui` component, colors are tokens, nothing under `ui/` changed. Check all three viewports. Pay particular attention to the CTA and motion items: one label per intent, no wrapped button text at desktop, every animation answers "what does this communicate?".
+
+## Step 7b — Guidelines review
+
+Run the `web-design-guidelines` skill on `pages/<id>/` (it fetches Vercel's current Web Interface Guidelines and reports `file:line` findings). Fix what it finds in the page files, re-run until clean or until only findings you can justify remain, and mention any you left in the hand-off.
 
 ## Step 8 — Hand off to the user
 

package/skills/create-theme/SKILL.md

@@ -25,6 +25,7 @@ A theme can be derived from any combination of:
 - **Image references / brand guidelines** — paths or URLs to screenshots, mood boards, logo files, a brand PDF. You will translate them into OKLCH tokens.
 - **Free-text description** — prose describing the desired palette, weight, feel.
 - **An existing page** — `pages/<id>/index.tsx` whose look should become reusable.
+- **A `DESIGN.md`** — a design-system document in the Google-spec shape (YAML frontmatter, then Overview, Colors, Typography, Layout, Elevation, Shapes, Components, Do's and Don'ts). [designmd.supply](https://designmd.supply) generates one from any public domain, so "match our brand" is: run the site through it, drop the file at `themes/<id>.design.md` (or paste the path), and ask for a theme.
 
 If the user's original message already specifies the inputs unambiguously, skip the question and proceed. Otherwise call `AskUserQuestion` (multi-select) so they can pick one or more sources, and ask follow-ups (paths, preset code, page id, prose) only as needed.
 
@@ -34,6 +35,7 @@ If the user's original message already specifies the inputs unambiguously, skip
 - **Images**: read each path with the `Read` tool (it accepts images). Note dominant colors (write them as hex, then convert to OKLCH), type family feel, corner radius, surface treatment (flat vs. cards vs. borders), light or dark default, and chrome (nav style, footer).
 - **Text**: extract explicit values (hex codes, font names, "rounded", "sharp", "dense") and resolve vague language into concrete decisions before writing.
 - **Existing page**: read `pages/<id>/index.tsx` (and `components/`) and pull any raw palette classes or hex values into token roles (the page's `bg-[#0b0b10]` root → `--background`; its CTA fill → `--primary`; its card border → `--border`), plus fonts and radius.
+- **`DESIGN.md`**: read it and map sections onto tokens — **Colors** gives `--background`/`--foreground`, `--primary`, `--secondary`, `--accent`, `--muted`, `--destructive` (primary = the brand's main action color, not its logo color, when they differ); **Typography** gives `--font-sans` / `--font-heading` and the type-scale feel; **Shapes** gives `--radius`; **Elevation** decides flat vs. card-with-shadow treatment in the component notes; **Layout** informs container widths and density in the demo; **Components** and **Do's and Don'ts** become the "Components in this theme" guidance. Colors may arrive as hex, `rgb()`, `hsl()`, `oklch()`, or CSS named colors — parse each by its own syntax, then convert to OKLCH. A single light palette is normal; derive the `.dark` block from it (invert lightness, keep hue and chroma) and say so in the `.md`.
 
 Every color ends up as `oklch(L C H)` — the same format as `styles/globals.css`. When inputs disagree (images use blue but the description says green), ask the user which to honor.
 

package/skills/page-authoring/SKILL.md

@@ -187,7 +187,10 @@ A theme is `themes/<id>.md` (direction and component notes) + `themes/<id>.css`
 - [ ] One coherent type scale across the page; contrast holds on dark sections.
 - [ ] Designed repeats are explicit component instances; data lists are a `.map` over a typed const.
 - [ ] No `window`/`document` access at module top level; effects clean up.
+- [ ] One label per CTA intent across the page ("Get started" in the nav, hero, and footer — not "Get started" / "Sign up free" / "Try it"), and no primary button label wraps at desktop width.
+- [ ] Every animation is motivated: it shows hierarchy, sequence, feedback, or a state change. If you cannot say which in one sentence, remove it. `motion-safe:` / `motion-reduce:` variants respect the user's preference.
 - [ ] Nothing outside `pages/<id>/` was edited.
+- [ ] Ran the `web-design-guidelines` skill on the page and resolved or justified its findings.
 
 ## Anti-patterns
 

package/skills/web-design-guidelines/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: web-design-guidelines
+description: Review page code against Vercel's Web Interface Guidelines — accessibility, focus and keyboard handling, forms, motion, layout, typography, and performance. Use when asked to "review my page", "check accessibility", "audit the design", "review UX", or as the review pass at the end of `create-page` and `apply-comments`.
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <page-id or file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review page files for compliance with Vercel's [Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines) (MIT). Vendored from the [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) `web-design-guidelines` skill and scoped to an open-pages workspace.
+
+## How it works
+
+1. Fetch the latest guidelines from the source URL below.
+2. Read the files to review.
+3. Check them against every rule in the fetched guidelines.
+4. Report findings in the terse `file:line` format the guidelines specify.
+
+## Guidelines source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and the output format. If the fetch fails (offline, blocked), say so and fall back to the self-review checklist in the `page-authoring` skill instead of guessing at rules.
+
+## What to review
+
+- Given a page id, review the page's entry (`pages/<id>/index.tsx` or `pages/<id>/index.html`), everything under `pages/<id>/components/`, and any `styles.css`, `style.css`, or `main.js` beside the entry.
+- Given a file or glob, review those files.
+- Given nothing, resolve the current page with the `current-page` skill; if that yields nothing, ask which page to review.
+
+Never review or report on files under `ui/`, `lib/`, `hooks/`, or `styles/`. Those are the shared shadcn set and are not edited for one page; a finding there is a `create-theme` or upstream matter, not a page fix.
+
+## Applying findings
+
+Report first. When the user asks you to fix, or the review runs inside `create-page` or `apply-comments`, apply the fixes to the page files only, following the `page-authoring` skill: keep `@/ui/*` components, keep semantic tokens, keep the type scale. Do not add dependencies to satisfy a rule.