@stdout-design/cli 0.1.8 → 0.2.0

package/README.md

@@ -21,13 +21,13 @@ A CLI for rendering your own TSX components into pixel-perfect social and market
 bun add -d @stdout-design/cli
 
 # Scaffold a project
-npx studio init
+npx @stdout-design/cli init
 
 # Render an image
-npx studio render bento-feature --title "Hello" --out hello.png
+npx @stdout-design/cli render bento-feature --title "Hello" --out hello.png
 
 # Or open the live studio
-npx studio dev
+npx @stdout-design/cli dev
 ```
 
 ## Installation
@@ -55,6 +55,8 @@ bun add -g @stdout-design/cli
 | `studio cache clean` | Clear the render cache |
 | `studio lint` | Check templates for compatibility |
 
+Run commands with `npx @stdout-design/cli <command>`, or install globally with `bun add -g @stdout-design/cli` to use `studio <command>` directly.
+
 ### studio render
 
 ```bash

package/dist/index.mjs

@@ -3255,8 +3255,8 @@ const getPkgJson = (name, version) => ({
 	},
 	type: "module"
 });
-const templateDir = () => path.resolve(import.meta.dirname, "../../../template");
-const templatesDir = () => path.resolve(import.meta.dirname, "../../../template/templates");
+const templateDir = () => path.resolve(import.meta.dirname, "../template");
+const templatesDir = () => path.resolve(import.meta.dirname, "../template/templates");
 const copyStaticAssets = async (dir) => {
 	const base = templateDir();
 	await cp(path.resolve(base, "tsconfig.json"), path.resolve(dir, "tsconfig.json"));

package/package.json

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

package/template/templates/bento-feature.tsx

@@ -0,0 +1,78 @@
+import { defineSchema } from "@stdout-design/core/schema";
+import { z } from "zod";
+
+export const templateId = "bento-feature" as const;
+
+export const propsSchema = defineSchema(
+  z.object({
+    accentColor: z
+      .string()
+      .default("#6366f1")
+      .describe("The primary accent color used for borders and highlights"),
+    background: z
+      .string()
+      .default("#0a0a0b")
+      .describe("Background color of the card"),
+    description: z
+      .string()
+      .default("A beautiful description goes here.")
+      .describe("Supporting description text"),
+    headline: z
+      .string()
+      .min(1)
+      .default("Featured App")
+      .describe("Main headline for the feature card"),
+    locale: z
+      .string()
+      .optional()
+      .describe("Current locale code for RTL support"),
+  })
+);
+
+export type Props = z.infer<typeof propsSchema>;
+
+export default function BentoFeature({
+  headline,
+  description,
+  accentColor,
+  background,
+  locale,
+}: Props) {
+  const isRtl = locale?.startsWith("ar") ?? false;
+
+  return (
+    <div
+      lang={isRtl ? "ar" : undefined}
+      dir={isRtl ? "rtl" : "ltr"}
+      tw="flex w-full h-full p-8"
+      style={{
+        backgroundColor: background,
+        color: "#ffffff",
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      <div
+        tw="flex flex-col justify-center items-center w-full h-full rounded-[32px] border-2 p-12"
+        style={{ backgroundColor: `${background}80`, borderColor: accentColor }}
+      >
+        <div
+          tw="flex items-center justify-center w-16 h-16 rounded-full mb-6"
+          style={{ backgroundColor: accentColor }}
+        >
+          <span tw="text-3xl text-white">✦</span>
+        </div>
+        <h2
+          tw="text-4xl font-bold tracking-tight text-center mb-2"
+          style={{ color: "#ffffff" }}
+        >
+          {headline}
+        </h2>
+        {description ? (
+          <p tw="text-xl text-center max-w-md" style={{ color: "#a1a1aa" }}>
+            {description}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/template/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "target": "esnext"
+  }
+}