@autono/create-open-pages 0.5.0 → 0.7.0

package/dist/cli.js

@@ -1,17 +1,18 @@
 #!/usr/bin/env node
+import * as p from "@clack/prompts";
+import { S_ERROR } from "@clack/prompts";
 import chalk from "chalk";
 import { cp, mkdir, readFile, readdir, rm, symlink, writeFile } from "node:fs/promises";
-import { basename, dirname, join, resolve } from "node:path";
+import { basename, dirname, join, relative, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import { Command } from "commander";
-import prompts from "prompts";
 import { spawn } from "node:child_process";
+import { createHash } from "node:crypto";
 import { existsSync } from "node:fs";
-
 //#region src/git.ts
 const IS_WINDOWS$1 = process.platform === "win32";
 async function run$1(cmd, args, cwd) {
-	return new Promise((resolve$1, reject) => {
+	return new Promise((resolve, reject) => {
 		const child = spawn(cmd, args, {
 			cwd,
 			stdio: [
@@ -30,7 +31,7 @@ async function run$1(cmd, args, cwd) {
 			stderr += d.toString();
 		});
 		child.on("error", reject);
-		child.on("close", (code) => resolve$1({
+		child.on("close", (code) => resolve({
 			code,
 			stdout,
 			stderr
@@ -39,8 +40,7 @@ async function run$1(cmd, args, cwd) {
 }
 async function isGitAvailable() {
 	try {
-		const res = await run$1("git", ["--version"], process.cwd());
-		return res.code === 0;
+		return (await run$1("git", ["--version"], process.cwd())).code === 0;
 	} catch {
 		return false;
 	}
@@ -62,10 +62,10 @@ async function gitInitAndCommit(target) {
 		status: "skipped-nested",
 		message: "target is already inside a git work tree; leaving parent repo alone"
 	};
-	const init$1 = await run$1("git", ["init"], target);
-	if (init$1.code !== 0) return {
+	const init = await run$1("git", ["init"], target);
+	if (init.code !== 0) return {
 		status: "failed",
-		message: `git init failed: ${init$1.stderr.trim() || init$1.stdout.trim()}`
+		message: `git init failed: ${init.stderr.trim() || init.stdout.trim()}`
 	};
 	const add = await run$1("git", ["add", "-A"], target);
 	if (add.code !== 0) return {
@@ -83,7 +83,6 @@ async function gitInitAndCommit(target) {
 	};
 	return { status: "committed" };
 }
-
 //#endregion
 //#region src/init.ts
 const HERE = dirname(fileURLToPath(import.meta.url));
@@ -98,11 +97,10 @@ function sanitizeDirName(value) {
 }
 async function isDirNonEmpty(target) {
 	if (!existsSync(target)) return false;
-	const entries = await readdir(target);
-	return entries.some((e) => !e.startsWith("."));
+	return (await readdir(target)).some((e) => !e.startsWith("."));
 }
 function coreVersionRange() {
-	return `^0.5.0`;
+	return `^0.7.0`;
 }
 async function linkOrCopy(relSrc, dst) {
 	await rm(dst, {
@@ -128,25 +126,40 @@ async function materializeTemplateLinks(target) {
 		await linkOrCopy(join("..", "..", ".agents", "skills", entry.name), join(claudeSkills, entry.name));
 	}
 }
-async function runInstall(pm, cwd) {
-	await new Promise((res, rej) => {
-		const child = spawn(pm, ["install"], {
-			cwd,
-			stdio: "inherit",
-			shell: IS_WINDOWS
-		});
-		child.on("error", rej);
-		child.on("close", (code) => code === 0 ? res() : rej(new Error(`${pm} install exited with code ${code}`)));
-	});
+async function writeUiManifest(target) {
+	const manifest = {};
+	for (const entry of [
+		"ui",
+		"lib",
+		"hooks"
+	]) {
+		const root = join(target, entry);
+		if (!existsSync(root)) continue;
+		for (const rel of await collectFiles(root)) {
+			const wsRel = join(entry, rel).split(sep).join("/");
+			manifest[wsRel] = createHash("sha256").update(await readFile(join(root, rel))).digest("hex");
+		}
+	}
+	const sorted = Object.fromEntries(Object.entries(manifest).sort(([a], [b]) => a.localeCompare(b)));
+	await writeFile(join(target, "ui", ".sync-manifest.json"), `${JSON.stringify(sorted, null, 2)}\n`);
 }
-async function init(opts) {
-	const { dir, force, name, packageManager, install, git } = opts;
+async function collectFiles(dir, prefix = "") {
+	const out = [];
+	for (const entry of await readdir(dir, { withFileTypes: true })) {
+		const rel = prefix ? join(prefix, entry.name) : entry.name;
+		if (entry.isDirectory()) out.push(...await collectFiles(join(dir, entry.name), rel));
+		else if (entry.isFile()) out.push(rel);
+	}
+	return out;
+}
+async function scaffold(opts) {
+	const { target, force, name } = opts;
 	if (!existsSync(TEMPLATE_DIR)) throw new Error(`Template missing at ${TEMPLATE_DIR}. If you are running from source, run \`pnpm --filter @autono/create-open-pages build\` first.`);
-	const target = resolve(process.cwd(), dir);
 	await mkdir(target, { recursive: true });
 	if (await isDirNonEmpty(target) && !force) throw new Error(`Target ${target} is not empty. Pass --force to scaffold into it anyway.`);
 	await cp(TEMPLATE_DIR, target, { recursive: true });
 	await materializeTemplateLinks(target);
+	await writeUiManifest(target);
 	const pkgPath = join(target, "package.json");
 	if (existsSync(pkgPath)) {
 		const pkg = JSON.parse(await readFile(pkgPath, "utf8"));
@@ -157,34 +170,38 @@ async function init(opts) {
 		await writeFile(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
 	}
 	await writeFile(join(target, ".gitignore"), "node_modules\ndist\nexport\n.DS_Store\n");
-	const cdTarget = dir === "." ? basename(target) : dir;
-	process.stdout.write(`\n${chalk.green.bold("✔ Created open-pages workspace")} ${chalk.dim(`in ${target}`)}\n`);
-	let installed = false;
-	if (install) {
-		process.stdout.write(`\n${chalk.bold(`Installing dependencies with ${packageManager}…`)}\n\n`);
-		try {
-			await runInstall(packageManager, target);
-			installed = true;
-		} catch (err) {
-			const msg = err instanceof Error ? err.message : String(err);
-			process.stdout.write(`\n${chalk.yellow("! Dependency install failed:")} ${chalk.dim(msg)}\n` + chalk.dim(`  You can retry manually with \`${packageManager} install\`.\n`));
-		}
-	}
-	if (git) {
-		const result = await gitInitAndCommit(target);
-		if (result.status === "committed") process.stdout.write(`${chalk.green("✔")} Initialized git repository with first commit.\n`);
-		else if (result.status === "skipped-nested") process.stdout.write(`${chalk.yellow("!")} Skipped ${chalk.bold("git init")}: ${chalk.dim(result.message ?? "")}\n`);
-		else if (result.status === "skipped-no-git") process.stdout.write(`${chalk.yellow("!")} Skipped git setup: ${chalk.dim(result.message ?? "")}\n`);
-		else process.stdout.write(`${chalk.yellow("!")} Git setup failed: ${chalk.dim(result.message ?? "")}\n` + chalk.dim("  You can initialize the repo manually.\n"));
-	}
-	process.stdout.write(`\n${chalk.bold("Next steps:")}\n`);
-	process.stdout.write(`  ${chalk.cyan(`cd ${cdTarget}`)}\n`);
-	if (!installed && install) process.stdout.write(`  ${chalk.cyan(`${packageManager} install`)}\n`);
-	else if (!install) process.stdout.write(`  ${chalk.cyan(`${packageManager} install`)}    ${chalk.dim("# install was skipped")}\n`);
-	const devCommand = packageManager === "npm" ? "npm run dev" : `${packageManager} dev`;
-	process.stdout.write(`  ${chalk.cyan(devCommand)}\n`);
 }
-
+function installDependencies(pm, cwd) {
+	return new Promise((res) => {
+		let output = "";
+		const child = spawn(pm, ["install"], {
+			cwd,
+			stdio: [
+				"ignore",
+				"pipe",
+				"pipe"
+			],
+			shell: IS_WINDOWS
+		});
+		child.stdout?.on("data", (chunk) => {
+			output += chunk.toString();
+		});
+		child.stderr?.on("data", (chunk) => {
+			output += chunk.toString();
+		});
+		child.on("error", (err) => res({
+			ok: false,
+			output: err.message
+		}));
+		child.on("close", (code) => {
+			if (code === 0) res({ ok: true });
+			else res({
+				ok: false,
+				output: output.trim() || `${pm} install exited with code ${code}`
+			});
+		});
+	});
+}
 //#endregion
 //#region src/package-manager.ts
 const PACKAGE_MANAGERS = [
@@ -200,17 +217,18 @@ function detectPackageManager() {
 	if (ua.startsWith("bun")) return "bun";
 	return "npm";
 }
-
 //#endregion
 //#region src/index.ts
 async function readVersion() {
 	const here = dirname(fileURLToPath(import.meta.url));
-	const pkg = JSON.parse(await readFile(join(here, "..", "package.json"), "utf8"));
-	return pkg.version;
+	return JSON.parse(await readFile(join(here, "..", "package.json"), "utf8")).version;
 }
-function onCancel() {
-	process.stdout.write(chalk.dim("\nCancelled.\n"));
-	process.exit(130);
+function unwrap(value) {
+	if (p.isCancel(value)) {
+		p.cancel("Cancelled.");
+		process.exit(130);
+	}
+	return value;
 }
 function packageManagerFromFlags(flags) {
 	const picks = [];
@@ -218,94 +236,134 @@ function packageManagerFromFlags(flags) {
 	if (flags.usePnpm) picks.push("pnpm");
 	if (flags.useYarn) picks.push("yarn");
 	if (flags.useBun) picks.push("bun");
-	if (picks.length > 1) throw new Error(`Only one of --use-npm / --use-pnpm / --use-yarn / --use-bun may be specified (got ${picks.map((p) => `--use-${p}`).join(", ")}).`);
+	if (picks.length > 1) throw new Error(`Only one of --use-npm / --use-pnpm / --use-yarn / --use-bun may be specified (got ${picks.map((pm) => `--use-${pm}`).join(", ")}).`);
 	return picks[0];
 }
+function displayPath(target) {
+	const rel = relative(process.cwd(), target);
+	if (rel === "" || rel.startsWith("..")) return target;
+	return rel;
+}
+function step(label, isTTY) {
+	const spinner = isTTY ? p.spinner() : void 0;
+	if (spinner) spinner.start(label);
+	else p.log.step(label);
+	return {
+		done(message) {
+			if (spinner) spinner.stop(message);
+			else p.log.step(message);
+		},
+		fail(message) {
+			if (spinner) spinner.error(message);
+			else p.log.error(message);
+		}
+	};
+}
+function tail(output, lines = 12) {
+	return output.split("\n").slice(-lines).join("\n");
+}
 async function runInit(dirArg, flags) {
 	const isTTY = Boolean(process.stdin.isTTY && process.stdout.isTTY);
+	let packageManager = packageManagerFromFlags(flags);
 	let dir = dirArg;
-	const name = flags.name;
 	let force = flags.force ?? false;
-	let packageManager = packageManagerFromFlags(flags);
-	if (isTTY && dir === void 0) {
-		const answers = await prompts({
-			type: "text",
-			name: "dir",
-			message: "Target directory",
-			initial: "."
-		}, { onCancel });
-		dir = answers.dir;
-	}
+	const install = flags.install !== false;
+	const git = flags.git !== false;
+	if (isTTY && dir === void 0) dir = unwrap(await p.text({
+		message: "Where should we create your workspace?",
+		placeholder: ".",
+		defaultValue: "."
+	}));
 	if (dir !== void 0) {
 		const safe = sanitizeDirName(dir);
 		if (safe !== dir) {
 			if (!isTTY) throw new Error(`Target directory "${dir}" contains characters that break shell commands (spaces, quotes, etc.). Try "${safe}" instead.`);
-			process.stdout.write(`${chalk.yellow("!")} ${chalk.bold(`"${dir}"`)} has characters that confuse shells.\n  Suggested: ${chalk.cyan(`"${safe}"`)}\n`);
-			const answers = await prompts({
-				type: "text",
-				name: "dir",
+			p.log.warn(`${chalk.bold(`"${dir}"`)} has characters that confuse shells.`);
+			dir = sanitizeDirName(unwrap(await p.text({
 				message: "Directory name",
-				initial: safe
-			}, { onCancel });
-			dir = sanitizeDirName(answers.dir ?? safe);
+				initialValue: safe,
+				validate: (value) => value?.trim() ? void 0 : "Enter a directory name."
+			})));
 		}
 	}
-	if (isTTY && packageManager === void 0 && flags.install !== false) {
+	if (isTTY && packageManager === void 0 && install) {
 		const detected = detectPackageManager();
-		const answers = await prompts({
-			type: "select",
-			name: "packageManager",
+		packageManager = unwrap(await p.select({
 			message: "Package manager",
-			choices: PACKAGE_MANAGERS.map((pm) => ({
-				title: pm,
-				value: pm
+			options: PACKAGE_MANAGERS.map((pm) => ({
+				value: pm,
+				label: pm,
+				hint: pm === detected ? "detected" : void 0
 			})),
-			initial: PACKAGE_MANAGERS.indexOf(detected)
-		}, { onCancel });
-		packageManager = answers.packageManager;
+			initialValue: detected
+		}));
 	}
 	const resolvedDir = dir ?? ".";
 	const target = resolve(process.cwd(), resolvedDir);
 	if (!force && await isDirNonEmpty(target)) {
 		if (!isTTY) throw new Error(`Target ${target} is not empty. Pass --force to scaffold into it anyway.`);
-		const { overwrite } = await prompts({
-			type: "confirm",
-			name: "overwrite",
-			message: `${chalk.yellow(target)} is not empty. Scaffold into it anyway?`,
-			initial: false
-		}, { onCancel });
-		if (!overwrite) {
-			process.stdout.write(chalk.dim("Aborted.\n"));
+		if (!unwrap(await p.confirm({
+			message: `${chalk.yellow(displayPath(target))} is not empty. Scaffold into it anyway?`,
+			initialValue: false
+		}))) {
+			p.outro(chalk.dim("Nothing written."));
 			return;
 		}
 		force = true;
 	}
-	const opts = {
-		dir: resolvedDir,
+	const pm = packageManager ?? detectPackageManager();
+	await scaffold({
+		target,
 		force,
-		name,
-		packageManager: packageManager ?? detectPackageManager(),
-		install: flags.install !== false,
-		git: flags.git !== false
-	};
-	await init(opts);
+		name: flags.name
+	});
+	p.log.step(`Created workspace ${chalk.dim(`in ${displayPath(target)}`)}`);
+	let installed = false;
+	if (install) {
+		const task = step(`Installing dependencies with ${pm}`, isTTY);
+		const result = await installDependencies(pm, target);
+		if (result.ok) {
+			installed = true;
+			task.done(`Installed dependencies with ${pm}`);
+		} else {
+			task.fail("Dependency install failed");
+			p.log.message(chalk.dim(tail(result.output)));
+		}
+	}
+	if (git) {
+		const result = await gitInitAndCommit(target);
+		if (result.status === "committed") p.log.step("Initialized git repository");
+		else if (result.status === "failed") p.log.warn(`Git setup failed ${chalk.dim(`· ${result.message ?? ""}`)}`);
+		else p.log.info(`Skipped git init ${chalk.dim(`· ${result.message ?? ""}`)}`);
+	}
+	const next = [];
+	if (target !== process.cwd()) next.push(`cd ${resolvedDir}`);
+	if (!installed) next.push(`${pm} install`);
+	next.push(pm === "npm" ? "npm run dev" : `${pm} dev`);
+	p.note(next.map((line) => chalk.cyan(line)).join("\n"), "Next steps");
+	p.outro(`All set! ${chalk.dim("Pages: https://pages.openpages.sh")}`);
 }
 async function run(argv) {
 	const version = await readVersion();
 	const program = new Command();
 	program.name("create-open-pages").description("Scaffold and manage open-pages workspaces.").version(version, "-v, --version", "print version").helpOption("-h, --help", "show help").showHelpAfterError(chalk.dim("(run `create-open-pages --help` for usage)"));
 	program.command("init", { isDefault: true }).description("Create a new open-pages workspace").argument("[dir]", "target directory", void 0).option("-f, --force", "overwrite non-empty target directory", false).option("-n, --name <name>", "override package name (defaults to folder name)").option("--use-npm", "use npm to install dependencies").option("--use-pnpm", "use pnpm to install dependencies").option("--use-yarn", "use yarn to install dependencies").option("--use-bun", "use bun to install dependencies").option("--no-install", "skip dependency installation").option("--no-git", "skip git init and initial commit").action(async (dir, flags) => {
-		await runInit(dir, flags);
+		p.intro(`${chalk.inverse.bold(" open-pages ")} ${chalk.dim(`v${version}`)}`);
+		try {
+			await runInit(dir, flags);
+		} catch (err) {
+			p.cancel(err instanceof Error ? err.message : String(err));
+			process.exit(1);
+		}
 	});
 	await program.parseAsync(argv, { from: "user" });
 }
-
 //#endregion
 //#region src/cli.ts
 run(process.argv.slice(2)).catch((err) => {
 	const message = err instanceof Error ? err.message : String(err);
-	process.stderr.write(`${chalk.red("error:")} ${message}\n`);
+	process.stderr.write(`\n  ${chalk.red(S_ERROR)} ${message}\n`);
 	process.exit(1);
 });
-
-//#endregion
+//#endregion
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/create-open-pages",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Scaffold an open-pages workspace — agent skills preconfigured, live real-PDF preview out of the box.",
   "type": "module",
   "bin": {
@@ -18,7 +18,7 @@
     "prepack": "pnpm build"
   },
   "engines": {
-    "node": ">=18"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "keywords": [
     "pdf",
@@ -45,14 +45,13 @@
     "access": "public"
   },
   "dependencies": {
+    "@clack/prompts": "^1.7.0",
     "chalk": "^6.0.0",
-    "commander": "^15.0.0",
-    "prompts": "^2.4.2"
+    "commander": "^15.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.19.17",
-    "@types/prompts": "^2.4.9",
-    "tsdown": "^0.9.9",
-    "typescript": "^5.9.3"
+    "@types/node": "^26.6.2",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2"
   }
 }

package/template/README.md

@@ -31,7 +31,8 @@ Then open `http://localhost:5173`, edit `pages/getting-started/index.tsx`, or cr
 | `npm run export` | Build pages into `export/<id>/`, one deployable folder per page. |
 | `npm run preview` | Preview the built workspace locally. |
 | `npm run sync:skills` | Sync the bundled agent skills into the workspace. |
-| `npm run update` | Update `@autono/open-pages` and sync skills. |
+| `npx open-pages sync:ui` | Update `ui/`, `lib/`, and `hooks/` to the installed runtime's set; files you edited are kept (`--force` to overwrite). |
+| `npm run update` | Update `@autono/open-pages` and sync skills and UI. |
 
 ## Authoring a page
 

package/template/netlify.toml

@@ -1,3 +1,7 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
 [[redirects]]
   from = "/*"
   to = "/index.html"

package/template/package.json

@@ -17,7 +17,7 @@
     "react-dom": "^19.2.0",
     "@base-ui/react": "^1.7.0",
     "@fontsource-variable/geist": "^5.3.0",
-    "@shadcn/react": "^0.3.0",
+    "@shadcn/react": "^0.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -39,7 +39,6 @@
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "vite": "^6.4.3",
     "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3"
   }

package/template/vercel.json

@@ -1,3 +1,5 @@
 {
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
   "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
 }