@stdout-design/cli 0.1.0

package/dist/index.mjs

@@ -0,0 +1,115 @@
+#!/usr/bin/env bun
+import { Command } from "commander";
+//#region src/lib/display.ts
+const formatBytes = (bytes) => {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+};
+const formatCacheStats = (stats) => {
+	return [
+		"",
+		"Cache Statistics",
+		"━━━━━━━━━━━━━━━━",
+		`  Location:    ${stats.cacheDir}`,
+		`  Compiled:    ${stats.compiled.entries} entries (in-memory compile cache)`,
+		`  Pixel:       ${stats.pixels.entries} entries`,
+		`  Disk used:   ${formatBytes(stats.pixels.sizeBytes)}`,
+		`  Disk limit:  ${formatBytes(stats.pixels.maxSizeBytes)}`,
+		""
+	].join("\n");
+};
+const formatManifestSummary = (manifest) => {
+	const { completedCount, totalCount, succeeded, failed } = manifest;
+	const cacheHits = succeeded.filter((s) => s.cacheHit).length;
+	const lines = [
+		"",
+		"Batch Render Complete",
+		"━━━━━━━━━━━━━━━━━━━━",
+		`  Status:    ${manifest.status}`,
+		`  Total:     ${totalCount}`,
+		`  Completed: ${completedCount}`,
+		`  Cache:     ${cacheHits} hits, ${succeeded.length - cacheHits} renders`,
+		`  Failed:    ${failed.length}`,
+		""
+	];
+	if (succeeded.length > 0 && succeeded.length <= 10) {
+		lines.push("Output files:");
+		for (const entry of succeeded) lines.push(`  ${entry.outputPath}`);
+		lines.push("");
+	}
+	if (failed.length > 0) {
+		lines.push("Failures:");
+		for (const f of failed) lines.push(`  Row ${f.rowIndex}, ${f.locale}, ${f.preset}: ${f.error}`);
+		lines.push("");
+	}
+	return lines.join("\n");
+};
+const formatError = (error) => {
+	if (error instanceof Error) return `Error: ${error.message}`;
+	return `Error: ${String(error)}`;
+};
+const formatCacheCleanResult = (freedBytes) => `Cache cleared. Freed ${formatBytes(freedBytes)}.`;
+//#endregion
+//#region src/index.ts
+const program = new Command().allowExcessArguments(true);
+program.name("studio").description("Social media design tool — render, preview, batch").version("0.0.0");
+program.command("dev").description("Start the studio dev server with live preview").argument("[rootDir]", "Project root directory (default: cwd)").option("-p, --port <number>", "Port to run on", "3000").option("--open", "Open browser on start").action(async (rootDir, options) => {
+	try {
+		const { dev } = await import("./dev-DoEMJ8Qi.mjs");
+		await dev(rootDir, options);
+	} catch (error) {
+		console.error(formatError(error));
+		process.exit(1);
+	}
+});
+program.command("render").description("Render a template — single or batch with --data").argument("<template>", "Template ID from studio.config.ts").argument("[props...]", "Props as key=value pairs (e.g. title=\"Hello\")").option("--data <path>", "CSV or JSON data file for batch rendering").option("--preset <ids>", "Comma-separated preset IDs").option("--locale <locales>", "Comma-separated locale codes").option("--out-dir <path>", "Output directory").option("--concurrency <n>", "Max concurrent renders in batch mode", "4").option("--fail-fast", "Stop batch on first error").option("--json", "Output results as JSON").action(async (template, props, options) => {
+	try {
+		const { render } = await import("./render-BhTeMXMX.mjs");
+		await render(template, props, options);
+	} catch (error) {
+		console.error(formatError(error));
+		process.exit(1);
+	}
+});
+const cacheCmd = program.command("cache").description("Manage the render cache");
+cacheCmd.command("stats").description("Show cache statistics").option("--json", "Output as JSON").argument("[rootDir]", "Project root directory (default: cwd)").action(async (rootDir, options) => {
+	try {
+		const { cacheStats } = await import("./cache-BdS9VgtQ.mjs");
+		await cacheStats(rootDir, options);
+	} catch (error) {
+		console.error(formatError(error));
+		process.exit(1);
+	}
+});
+cacheCmd.command("clean").description("Clear the render cache").option("--json", "Output as JSON").argument("[rootDir]", "Project root directory (default: cwd)").action(async (rootDir, options) => {
+	try {
+		const { cacheClean } = await import("./cache-BdS9VgtQ.mjs");
+		await cacheClean(rootDir, options);
+	} catch (error) {
+		console.error(formatError(error));
+		process.exit(1);
+	}
+});
+program.command("lint").description("Check templates for compatibility (coming soon)").argument("[rootDir]", "Project root directory (default: cwd)").action(async (rootDir) => {
+	try {
+		const { lint } = await import("./lint-CacX6_Ob.mjs");
+		await lint(rootDir);
+	} catch (error) {
+		console.error(formatError(error));
+		process.exit(1);
+	}
+});
+program.command("init").description("Scaffold a new studio project").argument("[projectDir]", "Project directory (default: cwd)").option("-y, --yes", "Skip prompts, use defaults").action(async (projectDir, options) => {
+	try {
+		const { init } = await import("./init-CfgXE-J9.mjs");
+		await init(projectDir, { yes: options.yes ?? false });
+	} catch (error) {
+		console.error(formatError(error));
+		process.exit(1);
+	}
+});
+program.parse();
+//#endregion
+export { formatCacheStats as n, formatManifestSummary as r, formatCacheCleanResult as t };

package/dist/init-CfgXE-J9.mjs

@@ -0,0 +1,195 @@
+import path from "node:path";
+import { existsSync } from "node:fs";
+import { mkdir, writeFile } from "node:fs/promises";
+//#region src/commands/init.ts
+const getConfigTemplate = () => `import type { StudioConfig } from "@stdout-design/cli";
+
+const config: StudioConfig = {
+  defaultPreset: "instagram-square",
+  locales: ["en", "ar"],
+  outDir: "./out",
+  presets: [
+    { height: 1080, id: "instagram-square", platform: "instagram", width: 1080 },
+    { height: 1200, id: "x-card", platform: "x", width: 1200 },
+  ],
+  templates: {
+    "bento-feature": {
+      componentPath: "./templates/bento-feature",
+      description: "Apple-style bento feature card.",
+    },
+  },
+};
+
+export default config;
+`;
+const getBentoFeatureTemplate = () => `import { defineSchema } from "@stdout-design/cli/schema";
+import { createElement, css, text } from "takumi-js";
+import type { TakumiNode } from "takumi-js";
+
+interface Props {
+  title?: string;
+  description?: string;
+  accent?: string;
+}
+
+export const propsSchema = defineSchema({
+  title: { type: "string", default: "Featured App", description: "Headline text" },
+  description: { type: "string", default: "A beautiful description goes here.", description: "Subtitle text" },
+  accent: { type: "string", default: "#6366f1", description: "Accent color" },
+});
+
+export default (props: Props): TakumiNode => {
+  const { title = "Featured App", description = "", accent = "#6366f1" } = props;
+
+  return createElement("div", {
+    style: css({
+      alignItems: "center",
+      background: "#0a0a0b",
+      borderRadius: 24,
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "center",
+      padding: 48,
+      width: "100%",
+    }),
+    children: [
+      createElement("div", {
+        style: css({
+          background: accent,
+          borderRadius: 12,
+          height: 64,
+          marginBottom: 24,
+          width: 64,
+        }),
+      }),
+      createElement("h1", {
+        style: css({
+          color: "#ffffff",
+          fontFamily: "Inter",
+          fontSize: 42,
+          fontWeight: 700,
+          margin: 0,
+          textAlign: "center",
+        }),
+        children: [text(title)],
+      }),
+      description ? createElement("p", {
+        style: css({
+          color: "#a1a1aa",
+          fontFamily: "Inter",
+          fontSize: 18,
+          marginTop: 16,
+          textAlign: "center",
+        }),
+        children: [text(description)],
+      }) : null,
+    ],
+  });
+};
+`;
+const scaffold = async (dir, options) => {
+	if (!existsSync(dir)) await mkdir(dir, { recursive: true });
+	const configPath = path.resolve(dir, "studio.config.ts");
+	if (existsSync(configPath)) {
+		console.log("studio.config.ts already exists — skipping scaffold.");
+		return;
+	}
+	if (options.templates.length > 0) await mkdir(path.resolve(dir, "templates"), { recursive: true });
+	if (options.locales.length > 0) await mkdir(path.resolve(dir, "locales"), { recursive: true });
+	await writeFile(configPath, getConfigTemplate());
+	const pkgJson = {
+		name: path.basename(dir),
+		private: true,
+		type: "module",
+		dependencies: { "takumi-js": "^2.0.2" }
+	};
+	await writeFile(path.resolve(dir, "package.json"), JSON.stringify(pkgJson, null, 2));
+	const writes = [];
+	for (const template of options.templates) if (template === "bento-feature") {
+		const templatesDir = path.resolve(dir, "templates");
+		writes.push(writeFile(path.resolve(templatesDir, "bento-feature.tsx"), getBentoFeatureTemplate()));
+	}
+	for (const locale of options.locales) {
+		const localesDir = path.resolve(dir, "locales");
+		if (locale === "en") writes.push(writeFile(path.resolve(localesDir, "en.json"), JSON.stringify({ title: "Featured App" }, null, 2)));
+		if (locale === "ar") writes.push(writeFile(path.resolve(localesDir, "ar.json"), JSON.stringify({ title: "التطبيق المميز" }, null, 2)));
+	}
+	await Promise.all(writes);
+	console.log(`Scaffolded studio project in ${dir}`);
+	console.log("");
+	console.log("Next steps:");
+	console.log(`  cd ${dir}`);
+	console.log("  studio dev");
+	if (options.install) {
+		console.log("");
+		console.log("Installing dependencies...");
+		const { spawnSync } = await import("node:child_process");
+		spawnSync("bun", ["install"], {
+			cwd: dir,
+			stdio: "inherit"
+		});
+	}
+};
+const init = async (projectDir, options) => {
+	const dir = path.resolve(projectDir ?? process.cwd());
+	if (options?.yes) {
+		await scaffold(dir, {
+			install: true,
+			locales: ["en", "ar"],
+			templates: ["bento-feature"]
+		});
+		return;
+	}
+	const { intro, confirm, multiselect, outro, cancel, isCancel } = await import("@clack/prompts");
+	intro("Studio Init");
+	if (existsSync(path.resolve(dir, "studio.config.ts"))) {
+		console.log("studio.config.ts already exists — skipping scaffold.");
+		outro("Done");
+		return;
+	}
+	const selectedTemplates = await multiselect({
+		message: "Which templates would you like to scaffold?",
+		options: [{
+			hint: "Apple-style feature card",
+			label: "Bento Feature",
+			value: "bento-feature"
+		}]
+	});
+	if (isCancel(selectedTemplates)) {
+		cancel("Cancelled.");
+		process.exit(0);
+	}
+	const templates = selectedTemplates;
+	const selectedLocales = await multiselect({
+		message: "Which locales would you like to include?",
+		options: [{
+			label: "English",
+			value: "en"
+		}, {
+			label: "Arabic",
+			value: "ar"
+		}]
+	});
+	if (isCancel(selectedLocales)) {
+		cancel("Cancelled.");
+		process.exit(0);
+	}
+	const locales = selectedLocales;
+	const shouldInstall = await confirm({
+		initialValue: true,
+		message: "Install dependencies?"
+	});
+	if (isCancel(shouldInstall)) {
+		cancel("Cancelled.");
+		process.exit(0);
+	}
+	await scaffold(dir, {
+		install: shouldInstall,
+		locales,
+		templates
+	});
+	outro("Done");
+};
+//#endregion
+export { init };

package/dist/lint-CacX6_Ob.mjs

@@ -0,0 +1,7 @@
+//#region src/commands/lint.ts
+const lint = (_rootDir) => {
+	console.error("Lint command not yet implemented. Coming in a future release.");
+	process.exit(1);
+};
+//#endregion
+export { lint };

package/dist/render-BhTeMXMX.mjs

@@ -0,0 +1,120 @@
+import { r as formatManifestSummary } from "./index.mjs";
+import { r as zodToJsonSchemaShape } from "./validation-CMTs74Vm-C3_d2dBv.mjs";
+import { a as importTemplateForBatch, d as runBatch, n as ErrorCode, o as loadConfig, t as AppError } from "./dist-Dm76-R-V.mjs";
+//#region src/lib/prop-parser.ts
+const coerceValue = (value, type, _items) => {
+	switch (type) {
+		case "number": {
+			const n = Number(value);
+			return Number.isNaN(n) ? value : n;
+		}
+		case "boolean":
+			if (value === "true" || value === "1") return true;
+			if (value === "false" || value === "0") return false;
+			return value;
+		case "array":
+			if (value.startsWith("[") && value.endsWith("]")) try {
+				return JSON.parse(value);
+			} catch {
+				return value.split(",").map((s) => s.trim());
+			}
+			return value.split(",").map((s) => s.trim());
+		default: return value;
+	}
+};
+const parsePropArgs = (args, schema) => {
+	const props = {};
+	const properties = schema.properties ?? {};
+	for (const arg of args) {
+		const eqIndex = arg.indexOf("=");
+		if (eqIndex === -1) {
+			props[arg] = true;
+			continue;
+		}
+		const key = arg.slice(0, eqIndex);
+		const value = arg.slice(eqIndex + 1);
+		const field = properties[key];
+		props[key] = field ? coerceValue(value, field.type, field.items) : value;
+	}
+	return props;
+};
+const mergeDefaultProps = (schema, props) => {
+	const properties = schema.properties ?? {};
+	const merged = {};
+	for (const [key, field] of Object.entries(properties)) if (field.default !== void 0) merged[key] = field.default;
+	return {
+		...merged,
+		...props
+	};
+};
+//#endregion
+//#region src/lib/suggest.ts
+const levenshteinDistance = (a, b) => {
+	const aLen = a.length;
+	const bLen = b.length;
+	if (aLen === 0) return bLen;
+	if (bLen === 0) return aLen;
+	let prev = Array.from({ length: aLen + 1 }, (_, j) => j);
+	let curr = Array.from({ length: aLen + 1 }).fill(0);
+	for (let j = 1; j <= bLen; j += 1) {
+		curr[0] = j;
+		for (let i = 1; i <= aLen; i += 1) {
+			const cost = b[j - 1] === a[i - 1] ? 0 : 1;
+			curr[i] = Math.min((prev[i] ?? 0) + 1, (curr[i - 1] ?? 0) + 1, (prev[i - 1] ?? 0) + cost);
+		}
+		const tmp = prev;
+		prev = curr;
+		curr = tmp;
+	}
+	return prev[aLen] ?? 0;
+};
+const suggestClosest = (input, candidates, maxDistance = 3) => {
+	let best;
+	let bestDistance = Infinity;
+	for (const candidate of candidates) {
+		const dist = levenshteinDistance(input.toLowerCase(), candidate.toLowerCase());
+		if (dist < bestDistance && dist <= maxDistance) {
+			bestDistance = dist;
+			best = candidate;
+		}
+	}
+	return best;
+};
+//#endregion
+//#region src/commands/render.ts
+const render = async (templateId, propArgs, options) => {
+	const rootDir = process.cwd();
+	const config = await loadConfig(rootDir);
+	const templateEntry = config.templates[templateId];
+	if (!templateEntry) {
+		const suggestions = suggestClosest(templateId, Object.keys(config.templates));
+		const hint = suggestions ? ` Did you mean "${suggestions}"?` : "";
+		throw new AppError(ErrorCode.TEMPLATE_NOT_FOUND, `Template "${templateId}" not found in studio.config.ts.${hint}`, {
+			availableTemplates: Object.keys(config.templates),
+			templateId
+		});
+	}
+	const { module } = await importTemplateForBatch(rootDir, templateEntry.componentPath, templateId);
+	const schema = zodToJsonSchemaShape(module.propsSchema);
+	const mergedProps = mergeDefaultProps(schema, parsePropArgs(propArgs, schema));
+	const presetIds = options.preset ? options.preset.split(",").map((s) => s.trim()) : config.presets.map((p) => p.id);
+	const localeIds = options.locale ? options.locale.split(",").map((s) => s.trim()) : void 0;
+	const outDir = options.outDir ?? config.outDir ?? "out";
+	const { manifest } = await runBatch({
+		baseProps: mergedProps,
+		concurrency: Number(options.concurrency ?? "4"),
+		dataFile: options.data,
+		failFast: options.failFast,
+		locales: localeIds,
+		outDir,
+		presets: presetIds,
+		rootDir,
+		rows: options.data ? void 0 : [{}],
+		templateId
+	});
+	if (options.json) console.log(JSON.stringify(manifest, null, 2));
+	else console.log(formatManifestSummary(manifest));
+	if (manifest.failed.length > 0) process.exit(1);
+};
+//#endregion
+export { render };

package/dist/schema.mjs

@@ -0,0 +1,2 @@
+import { t as defineSchema } from "./validation-CMTs74Vm-C3_d2dBv.mjs";
+export { defineSchema };

package/dist/validation-CMTs74Vm-C3_d2dBv.mjs

@@ -0,0 +1,14 @@
+import { z } from "zod";
+//#region ../core/dist/validation-CMTs74Vm.mjs
+/** Identity helper purely for inference ergonomics at the template definition site. */
+const defineSchema = (schema) => schema;
+const isZodObject = (schema) => {
+	if (typeof schema !== "object" || schema === null) return false;
+	return schema.type === "object";
+};
+const zodToJsonSchemaShape = (schema) => {
+	if (typeof schema !== "object" || !schema || !("shape" in schema)) return {};
+	return z.toJSONSchema(schema);
+};
+//#endregion
+export { isZodObject as n, zodToJsonSchemaShape as r, defineSchema as t };

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@stdout-design/cli",
+  "version": "0.1.0",
+  "description": "stdout-design CLI — shallow front door to @stdout-design/core and @stdout-design/dev-server",
+  "keywords": [
+    "cli",
+    "design",
+    "image-generation",
+    "social-media",
+    "takumi",
+    "tsx"
+  ],
+  "homepage": "https://github.com/stdout/studio#readme",
+  "bugs": {
+    "url": "https://github.com/stdout/studio/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stdout/studio.git"
+  },
+  "bin": {
+    "studio": "./dist/index.mjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "development": {
+        "import": "./src/index.ts",
+        "types": "./src/index.ts"
+      },
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./schema": {
+      "development": {
+        "import": "./src/schema.ts",
+        "types": "./src/schema.ts"
+      },
+      "import": "./dist/schema.mjs",
+      "types": "./dist/schema.d.mts"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "check-types": "tsc --noEmit",
+    "lint": "ultracite check",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.7.0",
+    "@takumi-rs/core": "^2.0.0",
+    "@takumi-rs/helpers": "^2.0.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "chokidar": "^5.0.0",
+    "commander": "^15.0.0",
+    "csv-parse": "^7.0.1",
+    "hono": "^4.12.26",
+    "kysely": "^0.29.3",
+    "kysely-bun-sqlite": "^0.4.0",
+    "ora": "^9.4.1",
+    "p-limit": "^7.0.0",
+    "proper-lockfile": "^4.1.2",
+    "react": "19.2.7",
+    "takumi-js": "^2.0.0",
+    "vite": "^8.0.12",
+    "vite-node": "^6.0.0",
+    "write-file-atomic": "^8.0.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@stdout-design/config": "workspace:*",
+    "@stdout-design/core": "workspace:*",
+    "@stdout-design/dev-server": "workspace:*",
+    "@types/react": "19.2.17",
+    "tsdown": "^0.22.4",
+    "typescript": "^7"
+  }
+}