@cmssy/cli 10.5.1 → 10.6.0

package/assets/init/next/app/[[...path]]/page.tsx

@@ -2,5 +2,28 @@ import { createCmssyPage } from "@cmssy/next/server";
 import { cmssy } from "@/cmssy.config";
 import { blocks } from "@/cmssy/blocks";
 import { CmssyEditor } from "@/cmssy/editor";
+import { CmssyLayoutSlot } from "@/cmssy/layout-slot";
 
-export default createCmssyPage(cmssy, blocks, { editor: CmssyEditor });
+type PageProps = {
+  params: Promise<{ path?: string[] }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+};
+
+const CmssyPage = createCmssyPage(cmssy, blocks, { editor: CmssyEditor });
+
+// The header and the footer are layout blocks, mounted here rather than in
+// app/layout.tsx: this route knows its path, and the language prefix in that
+// path is what says which language to render them in. Reading it from the
+// request header instead would make every page dynamic.
+export default async function Page(props: PageProps) {
+  const { path } = await props.params;
+  return (
+    <>
+      <CmssyLayoutSlot position="header" path={path} />
+      <main>
+        <CmssyPage {...props} />
+      </main>
+      <CmssyLayoutSlot position="footer" path={path} />
+    </>
+  );
+}

package/assets/init/next/app/cmssy-edit/[[...path]]/page.tsx

@@ -2,6 +2,7 @@ import { createCmssyEditPage } from "@cmssy/next/server";
 import { cmssy } from "@/cmssy.config";
 import { blocks } from "@/cmssy/blocks";
 import { CmssyEditor } from "@/cmssy/editor";
+import { CmssyLayoutSlot } from "@/cmssy/layout-slot";
 
 // The route the middleware rewrites a verified editor request onto. The public
 // pages stay static, and a static page never sees the query string that would
@@ -10,4 +11,26 @@ import { CmssyEditor } from "@/cmssy/editor";
 // Delete this file and the editor preview goes blank.
 export const dynamic = "force-dynamic";
 
-export default createCmssyEditPage(cmssy, blocks, { editor: CmssyEditor });
+type PageProps = {
+  params: Promise<{ path?: string[] }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+};
+
+const CmssyEditPage = createCmssyEditPage(cmssy, blocks, {
+  editor: CmssyEditor,
+});
+
+// The same chrome the public route renders - the editor frames THIS page, so a
+// header missing here is a header missing in the editor.
+export default async function EditPage(props: PageProps) {
+  const { path } = await props.params;
+  return (
+    <>
+      <CmssyLayoutSlot position="header" path={path} />
+      <main>
+        <CmssyEditPage {...props} />
+      </main>
+      <CmssyLayoutSlot position="footer" path={path} />
+    </>
+  );
+}

package/assets/init/next/cmssy/layout-slot.tsx

@@ -0,0 +1,169 @@
+import { cache } from "react";
+import { CmssyServerLayout, graphqlRequest } from "@cmssy/react";
+import type { CmssyLayoutGroup } from "@cmssy/react";
+import { resolveEditorLayoutBlockData } from "@cmssy/react/internal-server";
+import { resolveEditorOrigin } from "@cmssy/next";
+import { isCmssyEditMode } from "@cmssy/next/server";
+import { cmssy } from "@/cmssy.config";
+import { blocks } from "@/cmssy/blocks";
+import { EditableLayout } from "@/cmssy/editable-layout";
+
+// The header and the footer are layout blocks: content, not markup. Fetching
+// and rendering them is your app's, so both queries live here.
+const LAYOUTS_QUERY = `query PublicPageLayouts($workspaceSlug: String!, $pageSlug: String!, $previewSecret: String) {
+  public {
+    page {
+      layouts(workspaceSlug: $workspaceSlug, pageSlug: $pageSlug, previewSecret: $previewSecret) {
+        position
+        blocks { id type content style advanced order isActive }
+        settings { desktopWidth mobileBehavior }
+      }
+    }
+  }
+}`;
+
+const SITE_CONFIG_QUERY = `query PublicSiteConfig($workspaceSlug: String!) {
+  public {
+    siteConfig(workspaceSlug: $workspaceSlug) {
+      defaultLanguage
+      enabledLanguages
+    }
+  }
+}`;
+
+// Both slots render on every page; `cache` makes that one request each.
+const fetchLayouts = cache(
+  async (pageSlug: string, previewSecret: string | null) => {
+    try {
+      const data = await graphqlRequest<{
+        public?: { page?: { layouts?: CmssyLayoutGroup[] | null } | null } | null;
+      }>(
+        cmssy,
+        LAYOUTS_QUERY,
+        { workspaceSlug: cmssy.workspaceSlug, pageSlug, previewSecret },
+        { public: true, retry: {} },
+        "page layouts",
+      );
+      return data.public?.page?.layouts ?? [];
+    } catch (error) {
+      console.error("[cmssy] page layouts could not be fetched", error);
+      return [];
+    }
+  },
+);
+
+const fetchLocales = cache(async () => {
+  try {
+    const data = await graphqlRequest<{
+      public?: {
+        siteConfig?: {
+          defaultLanguage: string | null;
+          enabledLanguages: string[] | null;
+        } | null;
+      } | null;
+    }>(
+      cmssy,
+      SITE_CONFIG_QUERY,
+      { workspaceSlug: cmssy.workspaceSlug },
+      { public: true, retry: {} },
+      "site config",
+    );
+    const config = data.public?.siteConfig;
+    // The languages are the workspace's, never this repo's.
+    const defaultLocale = config?.defaultLanguage ?? "";
+    const enabled = config?.enabledLanguages ?? [];
+    return {
+      defaultLocale,
+      locales: enabled.length > 0 ? enabled : defaultLocale ? [defaultLocale] : [],
+    };
+  } catch (error) {
+    console.error("[cmssy] site config could not be fetched", error);
+    return { defaultLocale: "", locales: [] as string[] };
+  }
+});
+
+export interface CmssyLayoutSlotProps {
+  position: "header" | "footer";
+  /**
+   * The catch-all segments of the route rendering this slot, as routed. The
+   * language prefix in them IS the language - reading it here keeps the route
+   * statically renderable, where reading the request header would force every
+   * page dynamic and kill ISR.
+   */
+  path?: string[];
+  /** The page whose layout to render. Defaults to the site-wide header/footer. */
+  page?: string;
+}
+
+/**
+ * The site-wide header and footer, rendered the way each mode needs them:
+ *
+ *  - published traffic: server-rendered layout blocks, no client cost;
+ *  - the editor: the same blocks through the edit bridge, fetched with the
+ *    preview secret, so what you see is the draft you are editing.
+ *
+ * Getting this wrong is invisible - the site looks right while the editor shows
+ * a header it can select but not fill, or the published version of one.
+ */
+export async function CmssyLayoutSlot({
+  position,
+  path,
+  page = "/",
+}: CmssyLayoutSlotProps) {
+  const [editMode, { defaultLocale, locales }] = await Promise.all([
+    isCmssyEditMode(),
+    fetchLocales(),
+  ]);
+
+  const [first] = path ?? [];
+  const locale =
+    first && first !== defaultLocale && locales.includes(first)
+      ? first
+      : defaultLocale;
+
+  const groups = await fetchLayouts(
+    page,
+    editMode ? cmssy.draftSecret : null,
+  );
+
+  if (!editMode) {
+    return (
+      <CmssyServerLayout
+        groups={groups}
+        blocks={blocks}
+        position={position}
+        locale={locale}
+        defaultLocale={defaultLocale}
+        enabledLocales={locales}
+        config={cmssy}
+      />
+    );
+  }
+
+  const origin = resolveEditorOrigin(cmssy.editorOrigin);
+  // The editor canvas renders stored content, and for a relation field that is
+  // raw ids - so the server-resolved content is handed over with it.
+  const editorData = await resolveEditorLayoutBlockData({
+    groups,
+    blocks,
+    position,
+    locale,
+    defaultLocale,
+    enabledLocales: locales,
+    isPreview: true,
+    config: cmssy,
+  });
+
+  return (
+    <EditableLayout
+      groups={groups}
+      position={position}
+      locale={locale}
+      defaultLocale={defaultLocale}
+      enabledLocales={locales}
+      edit={{ editorOrigin: Array.isArray(origin) ? origin[0] : origin }}
+      data={editorData.data}
+      resolvedContent={editorData.content}
+    />
+  );
+}

package/dist/index.js

@@ -168,6 +168,7 @@ var FRAMEWORKS = [
       "cmssy/blocks.ts",
       "cmssy/editor.tsx",
       "cmssy/editable-layout.tsx",
+      "cmssy/layout-slot.tsx",
       "blocks/hero/block.ts",
       "blocks/hero/Hero.tsx",
       "app/[[...path]]/page.tsx",
@@ -661,14 +662,18 @@ function runInit(options, deps) {
 }
 
 // src/link.ts
-import { existsSync as existsSync4, readFileSync as readFileSync4, writeFileSync as writeFileSync3 } from "fs";
-import { join as join4 } from "path";
+import { existsSync as existsSync5, readFileSync as readFileSync5, writeFileSync as writeFileSync3 } from "fs";
+import { join as join5 } from "path";
 import {
   buildEditorUrl,
   checkDraftSecret,
   checkWorkspaceReachable
 } from "@cmssy/core/preflight";
 
+// src/env-load.ts
+import { existsSync as existsSync4, readFileSync as readFileSync4 } from "fs";
+import { join as join4 } from "path";
+
 // src/env-file.ts
 function parseEnvFile(content) {
   const vars = {};
@@ -702,6 +707,16 @@ function applyEnv(vars, env) {
   return applied;
 }
 
+// src/env-load.ts
+var ENV_FILES = [".env.local", ".env"];
+function loadEnvFiles(cwd, env) {
+  for (const file of ENV_FILES) {
+    const path = join4(cwd, file);
+    if (!existsSync4(path)) continue;
+    applyEnv(parseEnvFile(readFileSync4(path, "utf8")), env);
+  }
+}
+
 // src/env-write.ts
 function needsQuoting(value) {
   return /[\s#"']/.test(value) || value === "";
@@ -729,14 +744,6 @@ function mergeEnvContent(existing, updates) {
 }
 
 // src/link.ts
-var ENV_FILES = [".env.local", ".env"];
-function loadEnvFiles(cwd, env) {
-  for (const file of ENV_FILES) {
-    const path = join4(cwd, file);
-    if (!existsSync4(path)) continue;
-    applyEnv(parseEnvFile(readFileSync4(path, "utf8")), env);
-  }
-}
 function resolveToken(options, deps) {
   const token = options.token?.trim() || deps.env.CMSSY_API_TOKEN?.trim();
   if (!token) {
@@ -883,8 +890,8 @@ function resolvePreviewUrl(options) {
   return origin;
 }
 function writeEnvLocal(cwd, updates) {
-  const path = join4(cwd, ".env.local");
-  const existing = existsSync4(path) ? readFileSync4(path, "utf8") : null;
+  const path = join5(cwd, ".env.local");
+  const existing = existsSync5(path) ? readFileSync5(path, "utf8") : null;
   writeFileSync3(path, mergeEnvContent(existing, updates));
 }
 async function runLink(options, deps) {
@@ -998,12 +1005,323 @@ async function runLink(options, deps) {
   }
 }
 
+// src/types-command.ts
+import { mkdirSync as mkdirSync3, readFileSync as readFileSync6, writeFileSync as writeFileSync4 } from "fs";
+import { dirname as dirname3, join as join6 } from "path";
+import { DEFAULT_CMSSY_API_URL } from "@cmssy/core";
+
+// src/model-types.ts
+var TEXTUAL = /* @__PURE__ */ new Set([
+  "text",
+  "textarea",
+  "richText",
+  "markdown",
+  "link",
+  "url",
+  "email",
+  "phone",
+  "color",
+  "date",
+  "datetime",
+  "password",
+  "pageSelector"
+]);
+var INDENT = "  ";
+function pascalCase(value) {
+  const parts = value.split(/[^A-Za-z0-9]+/).filter(Boolean);
+  const joined = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+  return /^[A-Za-z]/.test(joined) ? joined : `Model${joined}`;
+}
+function propertyKey(key) {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key) ? key : JSON.stringify(key);
+}
+function stringUnion(options) {
+  return options.map((option) => JSON.stringify(option)).join(" | ");
+}
+function scalarType(field) {
+  if (TEXTUAL.has(field.type)) {
+    return field.localized ? "CmssyLocalized" : "string";
+  }
+  switch (field.type) {
+    case "number":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "media":
+    case "file":
+      return field.multiple ? "string[]" : "string";
+    case "select":
+    case "radio":
+      return field.options?.length ? stringUnion(field.options) : "string";
+    case "multiselect":
+      return field.options?.length ? `Array<${stringUnion(field.options)}>` : "string[]";
+    case "relation":
+      return field.relationType === "hasMany" || field.multiple ? "string[]" : "string";
+    case "json":
+    case "table":
+    case "form":
+      return "unknown";
+    default:
+      return "unknown";
+  }
+}
+function fieldType(field, depth) {
+  if (field.type === "object") {
+    return field.fields?.length ? objectType(field.fields, depth) : "Record<string, unknown>";
+  }
+  if (field.type === "repeater" || field.type === "list") {
+    if (field.itemFields?.length) {
+      return `Array<${objectType(field.itemFields, depth)}>`;
+    }
+    if (field.itemType) {
+      const item = scalarType({ key: field.key, type: field.itemType });
+      return `${item.includes(" ") ? `Array<${item}>` : `${item}[]`}`;
+    }
+    return "unknown[]";
+  }
+  return scalarType(field);
+}
+function docComment(field, pad) {
+  const parts = [];
+  if (field.label && field.label !== field.key) parts.push(field.label);
+  if (field.description) parts.push(field.description);
+  if (field.type === "relation" && field.relationTo) {
+    parts.push(`Record id(s) from \`${field.relationTo.replace(/^model:/, "")}\`.`);
+  }
+  if (!parts.length) return [];
+  return [`${pad}/** ${parts.join(" - ")} */`];
+}
+function members(fields, depth) {
+  const pad = INDENT.repeat(depth + 1);
+  const lines = [];
+  for (const field of fields) {
+    if (field.hidden) continue;
+    lines.push(...docComment(field, pad));
+    const optional = field.required ? "" : "?";
+    lines.push(
+      `${pad}${propertyKey(field.key)}${optional}: ${fieldType(field, depth + 1)};`
+    );
+  }
+  return lines;
+}
+function objectType(fields, depth) {
+  const body = members(fields, depth);
+  if (!body.length) return "Record<string, unknown>";
+  return ["{", ...body, `${INDENT.repeat(depth)}}`].join("\n");
+}
+var PREAMBLE = `/** A translatable field: one string, or one per enabled language. */
+export type CmssyLocalized = string | Record<string, string>;
+
+/** A record as \`public.model.records\` returns it, with \`data\` typed. */
+export interface CmssyRecordOf<Data> {
+  id: string;
+  modelId: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+  data: Data;
+}`;
+function generateModelTypes(models, options) {
+  const command = options.command ?? "npx @cmssy/cli types";
+  const sorted = [...models].sort((a, b) => a.slug.localeCompare(b.slug));
+  const used = /* @__PURE__ */ new Map();
+  const typeNames = /* @__PURE__ */ new Map();
+  for (const model of sorted) {
+    let name = pascalCase(model.slug);
+    if (used.has(name)) name = `${name}_${used.size}`;
+    used.set(name, model.slug);
+    typeNames.set(model.slug, name);
+  }
+  const blocks = [
+    `// Generated by \`${command}\` from the "${options.workspace}" workspace.`,
+    "// Do not edit: change the model in the CMS and run the command again.",
+    "",
+    PREAMBLE
+  ];
+  for (const model of sorted) {
+    const name = typeNames.get(model.slug) ?? pascalCase(model.slug);
+    const title = model.name ?? model.slug;
+    const doc = [`/**`, ` * ${title}`];
+    if (model.description) doc.push(` *`, ` * ${model.description}`);
+    doc.push(` *`, ` * Model slug: \`${model.slug}\``);
+    if (model.displayField) doc.push(` * Display field: \`${model.displayField}\``);
+    doc.push(` */`);
+    blocks.push(
+      "",
+      doc.join("\n"),
+      `export interface ${name}Data ${objectType(model.fields, 0)}`,
+      "",
+      `export type ${name}Record = CmssyRecordOf<${name}Data>;`
+    );
+  }
+  const mapEntries = sorted.map((model) => {
+    const name = typeNames.get(model.slug) ?? pascalCase(model.slug);
+    return `${INDENT}${propertyKey(model.slug)}: ${name}Data;`;
+  });
+  blocks.push(
+    "",
+    "/** Every model in the workspace, by slug. */",
+    ["export interface CmssyModels {", ...mapEntries, "}"].join("\n"),
+    "",
+    "export type CmssyModelSlug = keyof CmssyModels;",
+    "",
+    "/** The typed record list `public.model.records` returns for a model. */",
+    "export interface CmssyRecordList<Slug extends CmssyModelSlug> {",
+    `${INDENT}items: Array<CmssyRecordOf<CmssyModels[Slug]>>;`,
+    `${INDENT}total: number;`,
+    `${INDENT}hasMore: boolean;`,
+    "}",
+    ""
+  );
+  return blocks.join("\n");
+}
+
+// src/types-command.ts
+var DEFAULT_OUT = "cmssy/models.ts";
+var SITE_CONFIG_QUERY = `query CliSiteConfig($workspaceSlug: String!) {
+  public { siteConfig(workspaceSlug: $workspaceSlug) { workspaceId } }
+}`;
+var DEFINITIONS_QUERY = `query CliModelDefinitions($workspaceId: String!) {
+  public {
+    model {
+      definitions(workspaceId: $workspaceId) {
+        slug
+        name
+        description
+        displayField
+        fields {
+          key
+          label
+          description
+          type
+          required
+          localized
+          multiple
+          hidden
+          options
+          relationTo
+          relationType
+          fields
+          itemType
+          itemFields
+        }
+      }
+    }
+  }
+}`;
+function publicEndpoint(env, org, workspace) {
+  const apiUrl = env.CMSSY_API_URL?.trim() || DEFAULT_CMSSY_API_URL;
+  const base = apiUrl.replace(/\/graphql\/?$/, "").replace(/\/+$/, "");
+  return `${base}/public/${org}/${workspace}/graphql`;
+}
+async function request(deps, endpoint, query, variables) {
+  let response;
+  try {
+    response = await deps.fetch(endpoint, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ query, variables })
+    });
+  } catch (error) {
+    throw new CliError(
+      `could not reach ${endpoint}`,
+      error instanceof Error ? error.message : String(error)
+    );
+  }
+  if (!response.ok) {
+    throw new CliError(
+      `the delivery API answered ${response.status}`,
+      "check CMSSY_ORG_SLUG and CMSSY_WORKSPACE_SLUG - they form the delivery path"
+    );
+  }
+  const body = await response.json();
+  if (body.errors?.length) {
+    throw new CliError(
+      "the delivery API rejected the query",
+      body.errors.map((error) => error.message).join("; ")
+    );
+  }
+  if (!body.data) throw new CliError("the delivery API returned no data");
+  return body.data;
+}
+function resolve3(value, fromEnv, variable) {
+  const resolved = value?.trim() || fromEnv?.trim();
+  if (!resolved) {
+    throw new CliError(
+      `no workspace to read: ${variable} is not set`,
+      "run cmssy link first, or pass --org / --workspace"
+    );
+  }
+  return resolved;
+}
+async function runTypes(options, deps) {
+  try {
+    loadEnvFiles(deps.cwd, deps.env);
+    const org = resolve3(options.org, deps.env.CMSSY_ORG_SLUG, "CMSSY_ORG_SLUG");
+    const workspace = resolve3(
+      options.workspace,
+      deps.env.CMSSY_WORKSPACE_SLUG,
+      "CMSSY_WORKSPACE_SLUG"
+    );
+    const endpoint = publicEndpoint(deps.env, org, workspace);
+    const site = await request(deps, endpoint, SITE_CONFIG_QUERY, { workspaceSlug: workspace });
+    const workspaceId = site.public.siteConfig?.workspaceId;
+    if (!workspaceId) {
+      throw new CliError(
+        `workspace "${org}/${workspace}" was not found`,
+        "check the slugs under Settings \u2192 Headless"
+      );
+    }
+    const result = await request(deps, endpoint, DEFINITIONS_QUERY, { workspaceId });
+    const models = result.public.model.definitions;
+    if (models.length === 0) {
+      deps.log(
+        `cmssy: the "${workspace}" workspace has no models yet - nothing to generate`
+      );
+      return 0;
+    }
+    const outPath = join6(deps.cwd, options.out?.trim() || DEFAULT_OUT);
+    const source = generateModelTypes(models, { workspace });
+    let previous = null;
+    try {
+      previous = readFileSync6(outPath, "utf8");
+    } catch {
+      previous = null;
+    }
+    if (previous === source) {
+      deps.log(`cmssy: ${options.out ?? DEFAULT_OUT} is up to date`);
+      return 0;
+    }
+    mkdirSync3(dirname3(outPath), { recursive: true });
+    writeFileSync4(outPath, source);
+    const fieldCount = models.reduce(
+      (total, model) => total + model.fields.length,
+      0
+    );
+    deps.log(
+      `cmssy: wrote ${options.out ?? DEFAULT_OUT} - ${models.length} model${models.length === 1 ? "" : "s"}, ${fieldCount} field${fieldCount === 1 ? "" : "s"}`
+    );
+    deps.log(
+      `  ${models.map((model) => model.slug).join(", ")}`
+    );
+    return 0;
+  } catch (error) {
+    if (error instanceof CliError) {
+      deps.log(`cmssy: ${error.message}`);
+      if (error.fix) deps.log(`  ${error.fix}`);
+      return 1;
+    }
+    throw error;
+  }
+}
+
 // src/index.ts
 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>]"
+  "  cmssy link [--token <cs_...>] [--workspace <slug>] [--preview-url <url>]",
+  "  cmssy types [--out <path>] [--org <slug>] [--workspace <slug>]"
 ].join("\n");
 function flagValue(args, name) {
   const index = args.findIndex((arg) => arg === name);
@@ -1061,6 +1379,22 @@ async function main() {
     process.exitCode = await runLinkCommand(args);
     return;
   }
+  if (command === "types") {
+    process.exitCode = await runTypes(
+      {
+        out: flagValue(args, "--out"),
+        org: flagValue(args, "--org"),
+        workspace: flagValue(args, "--workspace")
+      },
+      {
+        cwd: process.cwd(),
+        env: process.env,
+        log: (line) => console.log(line),
+        fetch: globalThis.fetch
+      }
+    );
+    return;
+  }
   console.error(USAGE);
   process.exitCode = command === void 0 || command === "--help" ? 0 : 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/cli",
-  "version": "10.5.1",
+  "version": "10.6.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": "10.5.1"
+    "@cmssy/core": "10.6.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",