@stdout-design/cli 0.1.6 → 0.1.8

package/README.md

@@ -1,5 +1,167 @@
 # @stdout-design/cli
 
-This package is part of [stdout-design](https://github.com/m7md1alaa/stdout-design) — a local-first studio for rendering TSX components into social and marketing images.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@stdout-design/cli">
+    <img src="https://img.shields.io/npm/v/@stdout-design/cli" alt="npm version">
+  </a>
+  <img src="https://img.shields.io/npm/l/@stdout-design/cli" alt="MIT license">
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white" alt="TypeScript">
+  <img src="https://img.shields.io/badge/Bun-000?logo=bun&logoColor=white" alt="Bun">
+  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen" alt="PRs welcome">
+</p>
 
-See the [main README](https://github.com/m7md1alaa/stdout-design#readme) for full documentation.
+> Storybook for images — in your repo and speaking to your agents.
+
+A CLI for rendering your own TSX components into pixel-perfect social and marketing images. Live preview studio, batch rendering from data, and MCP server for AI agents.
+
+## Quick start
+
+```bash
+# Install
+bun add -d @stdout-design/cli
+
+# Scaffold a project
+npx studio init
+
+# Render an image
+npx studio render bento-feature --title "Hello" --out hello.png
+
+# Or open the live studio
+npx studio dev
+```
+
+## Installation
+
+```bash
+bun add -d @stdout-design/cli
+```
+
+Or globally:
+
+```bash
+bun add -g @stdout-design/cli
+```
+
+**Prerequisites:** Node.js 18+, Bun 1.2+.
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `studio init` | Scaffold a new studio project |
+| `studio dev` | Start the live preview studio |
+| `studio render <template>` | Render a single template or batch |
+| `studio cache stats` | Show cache statistics |
+| `studio cache clean` | Clear the render cache |
+| `studio lint` | Check templates for compatibility |
+
+### studio render
+
+```bash
+studio render <template> [options]
+```
+
+| Option | Description |
+|--------|-------------|
+| `--key value` | Pass props to the template |
+| `--data file.csv` | Batch render from CSV or JSON |
+| `--preset name` | Output preset (default: og) |
+| `--locale lang` | Locale for i18n |
+| `--out-dir path` | Output directory (default: ./out/) |
+| `--out file.png` | Single output file |
+
+### studio dev
+
+Starts a dev server on `localhost:3000` with:
+- Hot-reload when templates change
+- Auto-generated prop panel
+- Side-by-side preview across presets
+- Export templates to PNG
+
+### studio init
+
+Scaffolds a new studio project with:
+- TypeScript configuration
+- Example templates to get started
+- Sample data files for batch rendering
+- Locale files for i18n
+
+## Writing templates
+
+A template is a TSX component with typed props:
+
+```tsx
+type Props = {
+  title: string;
+  stat: string;
+};
+
+export default function MilestoneCard({ title, stat }: Props) {
+  return (
+    <div className="bg-black text-white p-8 rounded-2xl">
+      <h1 className="text-4xl font-bold">{title}</h1>
+      <p className="text-lg mt-2">{stat}</p>
+    </div>
+  );
+}
+```
+
+Drop it in `templates/` and it's immediately renderable.
+
+## AI agent integration
+
+Add to your agent's MCP config:
+
+```json
+{
+  "mcpServers": {
+    "stdout-design": {
+      "command": "npx",
+      "args": ["-y", "@stdout-design/cli", "mcp"]
+    }
+  }
+}
+```
+
+**Available tools:** `list_templates`, `render`, `render_batch`, `list_presets`
+
+## Project structure
+
+```
+my-project/
+├── studio.config.ts      template registry, presets, locales
+├── templates/            your TSX components
+├── data/                 CSV/JSON for batch renders
+├── locales/              translation files
+└── out/                  rendered assets (gitignored)
+```
+
+## Configuration
+
+```ts
+export default {
+  templates: "./templates",
+  presets: [
+    { name: "og", width: 1200, height: 630 },
+    { name: "instagram", width: 1080, height: 1080 },
+  ],
+  locales: ["en", "ar"],
+  outDir: "./out",
+};
+```
+
+## Platform presets
+
+| Preset | Size | Use |
+|--------|------|-----|
+| og | 1200×630 | Open Graph / social cards |
+| x-card | 1200×675 | X (Twitter) cards |
+| linkedin | 1200×627 | LinkedIn link previews |
+| instagram | 1080×1080 | Instagram feed posts |
+| instagram-story | 1080×1920 | Instagram stories |
+| appstore | 1290×2796 | App Store screenshots |
+| playstore | 1080×1920 | Play Store screenshots |
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stdout-design/cli",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "stdout-design CLI — shallow front door to @stdout-design/core and @stdout-design/dev-server",
   "keywords": [
     "cli",
@@ -23,11 +23,10 @@
     "url": "git+https://github.com/m7md1alaa/stdout-design/studio.git"
   },
   "bin": {
-    "studio": "./studio.js"
+    "studio": "./dist/index.mjs"
   },
   "files": [
-    "dist",
-    "studio.js"
+    "dist"
   ],
   "type": "module",
   "exports": {
@@ -57,7 +56,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^1.7.0",
-    "@stdout-design/core": "^0.1.1",
+    "@stdout-design/core": "^0.1.2",
     "commander": "^15.0.0",
     "package-manager-detector": "^1.8.0"
   },
@@ -67,8 +66,8 @@
     "typescript": "^7.0.2"
   },
   "peerDependencies": {
-    "@stdout-design/dev-server": "^0.1.1",
-    "@stdout-design/web-ui": "^0.1.1"
+    "@stdout-design/dev-server": "^0.1.7",
+    "@stdout-design/web-ui": "^0.1.7"
   },
   "peerDependenciesMeta": {
     "@stdout-design/dev-server": {

package/studio.js

@@ -1,2 +0,0 @@
-#!/usr/bin/env bun
-await import("./dist/index.mjs");