@cmssy/cli 9.7.2 → 9.9.0

package/dist/index.js

@@ -3,16 +3,9 @@
 // src/index.ts
 import { createInterface } from "readline/promises";
 
-// src/init.ts
-import {
-  copyFileSync,
-  existsSync,
-  mkdirSync,
-  readFileSync,
-  writeFileSync
-} from "fs";
-import { dirname, join, resolve } from "path";
-import { fileURLToPath } from "url";
+// src/add-block.ts
+import { existsSync as existsSync2, mkdirSync, readFileSync as readFileSync2, writeFileSync } from "fs";
+import { dirname, join as join2, resolve } from "path";
 
 // src/admin-client.ts
 var DEFAULT_ADMIN_API_URL = "https://api.cmssy.io/graphql";
@@ -151,12 +144,17 @@ Edit this site visually:
   ${paint(url, CYAN, colored)}
 `;
 }
+function formatDraftPreviewLink(draftUrl, exitUrl, colored = useColor()) {
+  return `
+Preview drafts without the editor (the /api/draft path also works on your local dev server):
+  ${paint(draftUrl, CYAN, colored)}
+  exit draft mode: ${paint(exitUrl, CYAN, colored)}
+`;
+}
 
-// src/init.ts
-var ASSETS_DIR = fileURLToPath(new URL("../assets/init", import.meta.url));
-var CLI_PACKAGE_JSON = fileURLToPath(
-  new URL("../package.json", import.meta.url)
-);
+// src/framework.ts
+import { existsSync, readFileSync } from "fs";
+import { join } from "path";
 var FRAMEWORKS = [
   {
     name: "next",
@@ -246,8 +244,272 @@ function detectFramework(pkg) {
   }
   return match;
 }
+function nextSrcPrefix(root) {
+  return existsSync(join(root, "src", "app")) ? "src/" : "";
+}
+
+// src/add-block.ts
+var BLOCK_NAME_PATTERN = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+function capitalize(word) {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}
+function blockNames(name) {
+  const words = name.split("-");
+  const pascal = words.map(capitalize).join("");
+  const camel = pascal.charAt(0).toLowerCase() + pascal.slice(1);
+  return {
+    type: name,
+    label: words.map(capitalize).join(" "),
+    pascal,
+    camel,
+    block: `${camel}Block`,
+    props: `${camel}Props`
+  };
+}
+function nextBlockDefinition(names) {
+  return `import { defineBlock } from "@cmssy/react";
+import ${names.pascal}, { ${names.props} } from "./${names.pascal}";
+
+export const ${names.block} = defineBlock({
+  type: "${names.type}",
+  label: "${names.label}",
+  component: ${names.pascal},
+  props: ${names.props},
+});
+`;
+}
+function nextComponent(names) {
+  return `import { fields, type BlockProps } from "@cmssy/react";
+
+export const ${names.props} = {
+  heading: fields.text({ label: "Heading", required: true }),
+  text: fields.textarea({ label: "Text" }),
+};
+
+export default function ${names.pascal}({ content }: BlockProps<typeof ${names.props}>) {
+  return (
+    <section>
+      <h2>{content.heading}</h2>
+      {content.text ? <p>{content.text}</p> : null}
+    </section>
+  );
+}
+`;
+}
+function singleFileComponent(names) {
+  return `import { fields, type BlockProps } from "@cmssy/react";
+
+export const ${names.props} = {
+  heading: fields.text({ label: "Heading", required: true }),
+  text: fields.textarea({ label: "Text" }),
+};
+
+export function ${names.pascal}({ content }: BlockProps<typeof ${names.props}>) {
+  return (
+    <section>
+      <h2>{content.heading}</h2>
+      {content.text ? <p>{content.text}</p> : null}
+    </section>
+  );
+}
+`;
+}
+function insertAfterImports(source, line) {
+  const imports = [...source.matchAll(/^import .*$/gm)];
+  const last = imports[imports.length - 1];
+  if (last === void 0) return `${line}
+${source}`;
+  const end = (last.index ?? 0) + last[0].length;
+  return `${source.slice(0, end)}
+${line}${source.slice(end)}`;
+}
+function appendToBlocksArray(source, identifier) {
+  const match = source.match(/export const blocks = \[([\s\S]*?)\]/);
+  if (!match) {
+    throw new CliError(
+      "could not find `export const blocks = [...]` in the block registry",
+      `add the block yourself: import it and append ${identifier} to the blocks array`
+    );
+  }
+  const inner = match[1] ?? "";
+  let updated;
+  if (inner.trim() === "") {
+    updated = identifier;
+  } else if (inner.includes("\n")) {
+    const body = inner.replace(/[\s,]*$/, "");
+    const indent = /\n(\s*)\S/.exec(inner)?.[1] ?? "  ";
+    updated = `${body},
+${indent}${identifier},
+`;
+  } else {
+    updated = `${inner.trim().replace(/,$/, "")}, ${identifier}`;
+  }
+  return source.replace(match[0], `export const blocks = [${updated}]`);
+}
+function frameworkLayout(framework, root, names) {
+  if (framework.name === "next") {
+    const prefix = nextSrcPrefix(root);
+    const componentPath2 = `${prefix}blocks/${names.type}/${names.pascal}.tsx`;
+    return {
+      registryPath: `${prefix}cmssy/blocks.ts`,
+      componentPath: componentPath2,
+      files: [
+        {
+          path: `${prefix}blocks/${names.type}/block.ts`,
+          content: nextBlockDefinition(names)
+        },
+        { path: componentPath2, content: nextComponent(names) }
+      ],
+      registerInRegistry: (source) => appendToBlocksArray(
+        insertAfterImports(
+          source,
+          `import { ${names.block} } from "@/blocks/${names.type}/block";`
+        ),
+        names.block
+      )
+    };
+  }
+  const base = framework.name === "astro" ? "src/cmssy" : "app/cmssy";
+  const componentPath = `${base}/${names.type}.tsx`;
+  return {
+    registryPath: `${base}/blocks.ts`,
+    componentPath,
+    files: [{ path: componentPath, content: singleFileComponent(names) }],
+    registerInRegistry: (source) => {
+      let updated = insertAfterImports(
+        source,
+        `import { ${names.pascal}, ${names.props} } from "./${names.type}";`
+      );
+      if (!/import \{[^}]*defineBlock[^}]*\} from "@cmssy\/react"/.test(updated)) {
+        updated = insertAfterImports(
+          updated,
+          `import { defineBlock } from "@cmssy/react";`
+        );
+      }
+      const definition = `export const ${names.block} = defineBlock({
+  type: "${names.type}",
+  label: "${names.label}",
+  component: ${names.pascal},
+  props: ${names.props},
+});
+
+`;
+      const anchor = updated.indexOf("export const blocks =");
+      if (anchor === -1) {
+        throw new CliError(
+          "could not find `export const blocks = [...]` in the block registry",
+          `add the block yourself: define ${names.block} with defineBlock and append it to the blocks array`
+        );
+      }
+      updated = `${updated.slice(0, anchor)}${definition}${updated.slice(anchor)}`;
+      return appendToBlocksArray(updated, names.block);
+    }
+  };
+}
+function runAddBlock(options, deps) {
+  const { log } = deps;
+  try {
+    if (!BLOCK_NAME_PATTERN.test(options.name)) {
+      throw new CliError(
+        `"${options.name}" is not a valid block name`,
+        "use kebab-case: cmssy add block pricing-table"
+      );
+    }
+    const root = resolve(deps.cwd, options.dir ?? ".");
+    if (!existsSync2(root)) {
+      throw new CliError(
+        `${root} does not exist`,
+        "pass --dir with the app's directory, or run cmssy add block inside it"
+      );
+    }
+    const framework = detectFramework(readPackageJson(root));
+    const names = blockNames(options.name);
+    const layout = frameworkLayout(framework, root, names);
+    const registryFile = join2(root, layout.registryPath);
+    if (!existsSync2(registryFile)) {
+      throw new CliError(
+        `no block registry at ${layout.registryPath}`,
+        "run cmssy init first - it wires the registry the editor loads blocks from"
+      );
+    }
+    const registry = readFileSync2(registryFile, "utf8");
+    if (registry.includes(names.block) || registry.includes(`type: "${names.type}"`)) {
+      throw new CliError(
+        `block "${names.type}" is already registered in ${layout.registryPath}`
+      );
+    }
+    for (const file of layout.files) {
+      if (existsSync2(join2(root, file.path))) {
+        throw new CliError(
+          `${file.path} already exists`,
+          "pick another name or remove the existing block first"
+        );
+      }
+    }
+    const updatedRegistry = layout.registerInRegistry(registry, names);
+    log(
+      formatResult({
+        status: "ok",
+        message: `detected ${framework.label} - scaffolding block "${names.type}"`
+      })
+    );
+    for (const file of layout.files) {
+      const target = join2(root, file.path);
+      mkdirSync(dirname(target), { recursive: true });
+      writeFileSync(target, file.content);
+      log(formatResult({ status: "ok", message: `wrote ${file.path}` }));
+    }
+    writeFileSync(registryFile, updatedRegistry);
+    log(
+      formatResult({
+        status: "ok",
+        message: `registered ${names.block} in ${layout.registryPath}`
+      })
+    );
+    log("");
+    log("Next steps:");
+    log(`  1. edit ${layout.componentPath} - define the fields and markup`);
+    log(
+      `  2. restart your dev server - the editor picks up "${names.type}" from the next handshake`
+    );
+    return 0;
+  } catch (error) {
+    if (error instanceof CliError) {
+      log(
+        formatResult({
+          status: "fail",
+          message: error.message,
+          fix: error.fix
+        })
+      );
+      return 1;
+    }
+    log(
+      formatResult({
+        status: "fail",
+        message: error instanceof Error ? error.message : String(error)
+      })
+    );
+    return 1;
+  }
+}
+
+// src/init.ts
+import {
+  copyFileSync,
+  existsSync as existsSync3,
+  mkdirSync as mkdirSync2,
+  readFileSync as readFileSync3,
+  writeFileSync as writeFileSync2
+} from "fs";
+import { dirname as dirname2, join as join3, resolve as resolve2 } from "path";
+import { fileURLToPath } from "url";
+var ASSETS_DIR = fileURLToPath(new URL("../assets/init", import.meta.url));
+var CLI_PACKAGE_JSON = fileURLToPath(
+  new URL("../package.json", import.meta.url)
+);
 function frameworkFiles(framework, root) {
-  const srcPrefix = framework.name === "next" && existsSync(join(root, "src", "app")) ? "src/" : "";
+  const srcPrefix = framework.name === "next" ? nextSrcPrefix(root) : "";
   return [
     { asset: "env.example", target: ".env.example" },
     ...framework.files.map((path) => ({
@@ -257,7 +519,7 @@ function frameworkFiles(framework, root) {
   ];
 }
 function cliVersion() {
-  const pkg = JSON.parse(readFileSync(CLI_PACKAGE_JSON, "utf8"));
+  const pkg = JSON.parse(readFileSync3(CLI_PACKAGE_JSON, "utf8"));
   return pkg.version;
 }
 function addDependencies(root, pkg, framework) {
@@ -272,19 +534,19 @@ function addDependencies(root, pkg, framework) {
   pkg.dependencies = Object.fromEntries(
     Object.entries(dependencies).sort(([a], [b]) => a.localeCompare(b))
   );
-  writeFileSync(
-    join(root, "package.json"),
+  writeFileSync2(
+    join3(root, "package.json"),
     `${JSON.stringify(pkg, null, 2)}
 `
   );
   return missing.map((name) => `${name}@${range}`);
 }
 function detectInstallCommand(root) {
-  if (existsSync(join(root, "pnpm-lock.yaml")) || existsSync(join(root, "pnpm-workspace.yaml"))) {
+  if (existsSync3(join3(root, "pnpm-lock.yaml")) || existsSync3(join3(root, "pnpm-workspace.yaml"))) {
     return "pnpm install";
   }
-  if (existsSync(join(root, "yarn.lock"))) return "yarn";
-  if (existsSync(join(root, "bun.lock")) || existsSync(join(root, "bun.lockb"))) {
+  if (existsSync3(join3(root, "yarn.lock"))) return "yarn";
+  if (existsSync3(join3(root, "bun.lock")) || existsSync3(join3(root, "bun.lockb"))) {
     return "bun install";
   }
   return "npm install";
@@ -292,9 +554,8 @@ function detectInstallCommand(root) {
 function frameworkNotes(framework, root, skipped) {
   const notes = [];
   if (framework.name === "next") {
-    const srcPrefix = existsSync(join(root, "src", "app")) ? "src/" : "";
-    const home = `${srcPrefix}app/page.tsx`;
-    if (existsSync(join(root, home))) {
+    const home = `${nextSrcPrefix(root)}app/page.tsx`;
+    if (existsSync3(join3(root, home))) {
       notes.push({
         status: "unknown",
         message: `${home} conflicts with the cmssy catch-all route - delete it and the cmssy page serves /`
@@ -306,7 +567,7 @@ function frameworkNotes(framework, root, skipped) {
       status: "unknown",
       message: "the cmssy wiring needs the React integration and a server adapter - run: npx astro add react node"
     });
-    if (existsSync(join(root, "src/pages/index.astro"))) {
+    if (existsSync3(join3(root, "src/pages/index.astro"))) {
       notes.push({
         status: "unknown",
         message: "src/pages/index.astro shadows the cmssy catch-all for / - delete it and the cmssy page serves /"
@@ -324,8 +585,8 @@ function frameworkNotes(framework, root, skipped) {
 function runInit(options, deps) {
   const { log } = deps;
   try {
-    const root = resolve(deps.cwd, options.dir ?? ".");
-    if (!existsSync(root)) {
+    const root = resolve2(deps.cwd, options.dir ?? ".");
+    if (!existsSync3(root)) {
       throw new CliError(
         `${root} does not exist`,
         "pass --dir with the app's directory, or run cmssy init inside it"
@@ -342,8 +603,8 @@ function runInit(options, deps) {
     const written = [];
     const skipped = [];
     for (const file of frameworkFiles(framework, root)) {
-      const target = join(root, file.target);
-      if (existsSync(target) && !options.force) {
+      const target = join3(root, file.target);
+      if (existsSync3(target) && !options.force) {
         skipped.push(file.target);
         log(
           formatResult({
@@ -353,8 +614,8 @@ function runInit(options, deps) {
         );
         continue;
       }
-      mkdirSync(dirname(target), { recursive: true });
-      copyFileSync(join(ASSETS_DIR, framework.name, file.asset), target);
+      mkdirSync2(dirname2(target), { recursive: true });
+      copyFileSync(join3(ASSETS_DIR, framework.name, file.asset), target);
       written.push(file.target);
       log(formatResult({ status: "ok", message: `wrote ${file.target}` }));
     }
@@ -406,8 +667,8 @@ function runInit(options, deps) {
 }
 
 // src/link.ts
-import { existsSync as existsSync2, readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "fs";
-import { join as join2 } from "path";
+import { existsSync as existsSync4, readFileSync as readFileSync4, writeFileSync as writeFileSync3 } from "fs";
+import { join as join4 } from "path";
 import {
   buildEditorUrl,
   checkDraftSecret,
@@ -477,9 +738,9 @@ function mergeEnvContent(existing, updates) {
 var ENV_FILES = [".env.local", ".env"];
 function loadEnvFiles(cwd, env) {
   for (const file of ENV_FILES) {
-    const path = join2(cwd, file);
-    if (!existsSync2(path)) continue;
-    applyEnv(parseEnvFile(readFileSync2(path, "utf8")), env);
+    const path = join4(cwd, file);
+    if (!existsSync4(path)) continue;
+    applyEnv(parseEnvFile(readFileSync4(path, "utf8")), env);
   }
 }
 function resolveToken(options, deps) {
@@ -496,6 +757,24 @@ function describeWorkspace(workspace) {
   const org = workspace.organizationSlug ?? "?";
   return `${workspace.name} (${org}/${workspace.slug})`;
 }
+function draftRouteBase(previewUrl) {
+  try {
+    const base = new URL(previewUrl);
+    const basePath = base.pathname.replace(/\/+$/, "");
+    return `${base.origin}${basePath}/api/draft`;
+  } catch {
+    return null;
+  }
+}
+function buildDraftPreviewUrls(previewUrl, draftSecret) {
+  const base = draftRouteBase(previewUrl);
+  if (!base) return null;
+  const params = new URLSearchParams({ secret: draftSecret, redirect: "/" });
+  return {
+    draftUrl: `${base}?${params.toString()}`,
+    exitUrl: `${base}?disable=1`
+  };
+}
 async function selectWorkspace(workspaces, options, deps) {
   if (workspaces.length === 0) {
     throw new CliError(
@@ -562,9 +841,9 @@ function resolvePreviewUrl(options) {
   return origin;
 }
 function writeEnvLocal(cwd, updates) {
-  const path = join2(cwd, ".env.local");
-  const existing = existsSync2(path) ? readFileSync2(path, "utf8") : null;
-  writeFileSync2(path, mergeEnvContent(existing, updates));
+  const path = join4(cwd, ".env.local");
+  const existing = existsSync4(path) ? readFileSync4(path, "utf8") : null;
+  writeFileSync3(path, mergeEnvContent(existing, updates));
 }
 async function runLink(options, deps) {
   const { cwd, env, log } = deps;
@@ -636,6 +915,15 @@ async function runLink(options, deps) {
     const secretResult = await checkDraftSecret(preflight);
     log(formatResult(secretResult));
     log(formatEditorLink(buildEditorUrl(preflight)));
+    if (reachable.previewUrl && secretResult.status !== "fail") {
+      const draftUrls = buildDraftPreviewUrls(
+        reachable.previewUrl,
+        draftSecret
+      );
+      if (draftUrls) {
+        log(formatDraftPreviewLink(draftUrls.draftUrl, draftUrls.exitUrl));
+      }
+    }
     return reachable.status === "fail" || secretResult.status === "fail" ? 1 : 0;
   } catch (error) {
     if (error instanceof CliError) {
@@ -662,6 +950,7 @@ async function runLink(options, deps) {
 var USAGE = [
   "usage: cmssy <command>",
   "  cmssy init [--dir <path>] [--force]",
+  "  cmssy add block <name> [--dir <path>]",
   "  cmssy link [--token <cs_...>] [--workspace <slug>] [--preview-url <url>]"
 ].join("\n");
 function flagValue(args, name) {
@@ -703,6 +992,19 @@ async function main() {
     );
     return;
   }
+  if (command === "add") {
+    const [kind, name, ...rest] = args;
+    if (kind !== "block" || name === void 0 || name.startsWith("--")) {
+      console.error(USAGE);
+      process.exitCode = 1;
+      return;
+    }
+    process.exitCode = runAddBlock(
+      { name, dir: flagValue(rest, "--dir") },
+      { cwd: process.cwd(), log: (line) => console.log(line) }
+    );
+    return;
+  }
   if (command === "link") {
     process.exitCode = await runLinkCommand(args);
     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/cli",
-  "version": "9.7.2",
+  "version": "9.9.0",
   "description": "The cmssy CLI: `cmssy init` wires cmssy into an existing Next.js, Astro or React Router app; `cmssy link` connects it to a workspace and verifies the editor wiring.",
   "keywords": [
     "cmssy",
@@ -27,7 +27,7 @@
     "assets"
   ],
   "dependencies": {
-    "@cmssy/core": "9.7.2"
+    "@cmssy/core": "9.9.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",