@cmssy/next 10.9.2 → 11.0.0

package/dist/server.cjs

@@ -9,6 +9,7 @@ var internalServer = require('@cmssy/react/internal-server');
 var internal = require('@cmssy/core/internal');
 var core = require('@cmssy/core');
 var jsxRuntime = require('react/jsx-runtime');
+var locale = require('@cmssy/core/internal/locale');
 
 // src/server.ts
 function hasEditFlag(value) {
@@ -249,7 +250,68 @@ async function isCmssyEditMode() {
   const h = await headers.headers();
   return h.get(core.CMSSY_EDIT_HEADER) === "1";
 }
+async function CmssyLayoutSlot({
+  config,
+  blocks,
+  position,
+  path,
+  locale: explicitLocale,
+  editMode,
+  page = "/",
+  editable: Editable,
+  appContext
+}) {
+  const [groups, siteLocales] = await Promise.all([
+    internal.fetchLayouts(config, page, {
+      previewSecret: editMode ? config.draftSecret : void 0
+    }),
+    locale.resolveSiteLocales(config)
+  ]);
+  const locale$1 = explicitLocale ?? locale.splitLocaleFromPath(path ?? [], siteLocales).locale;
+  if (!editMode) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.CmssyServerLayout,
+      {
+        groups,
+        blocks,
+        position,
+        locale: locale$1,
+        defaultLocale: siteLocales.defaultLocale,
+        enabledLocales: siteLocales.locales,
+        config,
+        appContext
+      }
+    );
+  }
+  const origin = core.resolveEditorOrigin(config.editorOrigin);
+  const editorData = await react.resolveEditorLayoutBlockData({
+    groups,
+    blocks,
+    position,
+    locale: locale$1,
+    defaultLocale: siteLocales.defaultLocale,
+    enabledLocales: siteLocales.locales,
+    isPreview: true,
+    config,
+    appContext
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Editable,
+    {
+      groups,
+      position,
+      locale: locale$1,
+      defaultLocale: siteLocales.defaultLocale,
+      enabledLocales: siteLocales.locales,
+      edit: { editorOrigin: (Array.isArray(origin) ? origin[0] : origin) ?? "" },
+      data: editorData.data,
+      resolvedContent: editorData.content,
+      appContext
+    }
+  );
+}
 
+exports.CmssyLayoutSlot = CmssyLayoutSlot;
 exports.createCmssyEditPage = createCmssyEditPage;
 exports.createCmssyPage = createCmssyPage;
 exports.createDraftRoute = createDraftRoute;

package/dist/server.d.cts

@@ -1,8 +1,8 @@
 export { C as CmssyAppContext, a as CmssyEditorProps, b as CreateCmssyPageOptions, c as createCmssyEditPage, d as createCmssyPage } from './index-B64zk2X7.cjs';
-import { CmssyConfig } from '@cmssy/core';
-import 'react/jsx-runtime';
-import 'react';
-import '@cmssy/react';
+import { CmssyConfig, LayoutPosition } from '@cmssy/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType } from 'react';
+import { BlockDefinition, CmssyLayoutGroup } from '@cmssy/react';
 import '@cmssy/react/client';
 
 type CmssyDraftRouteConfig = Pick<CmssyConfig, "draftSecret"> & {
@@ -12,4 +12,83 @@ declare function createDraftRoute(config: CmssyDraftRouteConfig): (request: Requ
 
 declare function isCmssyEditMode(): Promise<boolean>;
 
-export { type CmssyDraftRouteConfig, createDraftRoute, isCmssyEditMode };
+interface CmssyLayoutSlotBaseProps {
+    config: CmssyConfig;
+    blocks: BlockDefinition[];
+    /**
+     * Which layout position to render. Six exist - `top`, `header`,
+     * `sidebar_left`, `sidebar_right`, `footer`, `bottom` - and most sites use
+     * two of them; the type is what tells you about the other four.
+     */
+    position: LayoutPosition;
+    /**
+     * Whether to render through the edit bridge. A parameter rather than a
+     * lookup: every way of asking the request - `headers()`, `draftMode()` - is a
+     * dynamic API, and one read makes the whole route uncacheable. The route
+     * segment already knows the answer, so it passes it.
+     *
+     * Required on purpose. A slot that guessed `false` in an edit route would
+     * wrap draft content in published chrome, and nothing would report it.
+     */
+    editMode: boolean;
+    /** The page whose layout to render. Defaults to the site-wide header/footer. */
+    page?: string;
+    /**
+     * The client wrapper around `CmssyLazyLayout`, rendered in edit mode.
+     *
+     * Required, and a component rather than a loader: the block registry has to
+     * be imported lazily ON THE CLIENT, and a function cannot cross the server
+     * boundary. Without it the editor gets a header it can select and not fill -
+     * which is why this is a type error rather than a runtime warning.
+     */
+    editable: ComponentType<{
+        groups: CmssyLayoutGroup[];
+        position: string;
+        locale: string;
+        defaultLocale: string;
+        enabledLocales: string[];
+        edit: {
+            editorOrigin: string;
+        };
+        data?: Record<string, unknown>;
+        resolvedContent?: Record<string, Record<string, unknown>>;
+        appContext?: Record<string, unknown>;
+    }>;
+    /** Forwarded untouched to every block as `context.app`. */
+    appContext?: Record<string, unknown>;
+}
+/**
+ * Where the language comes from - one of two, never neither.
+ *
+ * `path` is the catch-all segments **as routed**: the language prefix in them
+ * IS the language, and reading it costs the route nothing. A caller with no
+ * params (a root layout) has to resolve the language itself and pass `locale`;
+ * there is deliberately no fallback to the request header, because a static
+ * route never sees the header the proxy set and would render the wrong
+ * language while looking like it worked.
+ */
+type CmssyLayoutSlotLocaleSource = {
+    path: string[];
+    locale?: never;
+} | {
+    locale: string;
+    path?: never;
+};
+type CmssyLayoutSlotProps = CmssyLayoutSlotBaseProps & CmssyLayoutSlotLocaleSource;
+/**
+ * The site-wide header and footer, which are layout **blocks** rather than
+ * markup the app owns. Rendered the way each mode needs them:
+ *
+ *  - published traffic: server-rendered blocks, no client cost;
+ *  - the editor: the same blocks through the edit bridge, fetched with the
+ *    preview secret and handed their server-resolved content, so a relation
+ *    field shows records rather than the ids it stores.
+ *
+ * Getting any of that wrong is invisible - the site looks right while the
+ * editor shows a header it cannot fill, or the published version of one. Every
+ * app that wrote this by hand between 10.0 and 10.9 got at least one of the
+ * three wrong, which is why it is back.
+ */
+declare function CmssyLayoutSlot({ config, blocks, position, path, locale: explicitLocale, editMode, page, editable: Editable, appContext, }: CmssyLayoutSlotProps): Promise<react_jsx_runtime.JSX.Element>;
+
+export { type CmssyDraftRouteConfig, CmssyLayoutSlot, type CmssyLayoutSlotProps, createDraftRoute, isCmssyEditMode };

package/dist/server.d.ts

@@ -1,8 +1,8 @@
 export { C as CmssyAppContext, a as CmssyEditorProps, b as CreateCmssyPageOptions, c as createCmssyEditPage, d as createCmssyPage } from './index-B64zk2X7.js';
-import { CmssyConfig } from '@cmssy/core';
-import 'react/jsx-runtime';
-import 'react';
-import '@cmssy/react';
+import { CmssyConfig, LayoutPosition } from '@cmssy/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType } from 'react';
+import { BlockDefinition, CmssyLayoutGroup } from '@cmssy/react';
 import '@cmssy/react/client';
 
 type CmssyDraftRouteConfig = Pick<CmssyConfig, "draftSecret"> & {
@@ -12,4 +12,83 @@ declare function createDraftRoute(config: CmssyDraftRouteConfig): (request: Requ
 
 declare function isCmssyEditMode(): Promise<boolean>;
 
-export { type CmssyDraftRouteConfig, createDraftRoute, isCmssyEditMode };
+interface CmssyLayoutSlotBaseProps {
+    config: CmssyConfig;
+    blocks: BlockDefinition[];
+    /**
+     * Which layout position to render. Six exist - `top`, `header`,
+     * `sidebar_left`, `sidebar_right`, `footer`, `bottom` - and most sites use
+     * two of them; the type is what tells you about the other four.
+     */
+    position: LayoutPosition;
+    /**
+     * Whether to render through the edit bridge. A parameter rather than a
+     * lookup: every way of asking the request - `headers()`, `draftMode()` - is a
+     * dynamic API, and one read makes the whole route uncacheable. The route
+     * segment already knows the answer, so it passes it.
+     *
+     * Required on purpose. A slot that guessed `false` in an edit route would
+     * wrap draft content in published chrome, and nothing would report it.
+     */
+    editMode: boolean;
+    /** The page whose layout to render. Defaults to the site-wide header/footer. */
+    page?: string;
+    /**
+     * The client wrapper around `CmssyLazyLayout`, rendered in edit mode.
+     *
+     * Required, and a component rather than a loader: the block registry has to
+     * be imported lazily ON THE CLIENT, and a function cannot cross the server
+     * boundary. Without it the editor gets a header it can select and not fill -
+     * which is why this is a type error rather than a runtime warning.
+     */
+    editable: ComponentType<{
+        groups: CmssyLayoutGroup[];
+        position: string;
+        locale: string;
+        defaultLocale: string;
+        enabledLocales: string[];
+        edit: {
+            editorOrigin: string;
+        };
+        data?: Record<string, unknown>;
+        resolvedContent?: Record<string, Record<string, unknown>>;
+        appContext?: Record<string, unknown>;
+    }>;
+    /** Forwarded untouched to every block as `context.app`. */
+    appContext?: Record<string, unknown>;
+}
+/**
+ * Where the language comes from - one of two, never neither.
+ *
+ * `path` is the catch-all segments **as routed**: the language prefix in them
+ * IS the language, and reading it costs the route nothing. A caller with no
+ * params (a root layout) has to resolve the language itself and pass `locale`;
+ * there is deliberately no fallback to the request header, because a static
+ * route never sees the header the proxy set and would render the wrong
+ * language while looking like it worked.
+ */
+type CmssyLayoutSlotLocaleSource = {
+    path: string[];
+    locale?: never;
+} | {
+    locale: string;
+    path?: never;
+};
+type CmssyLayoutSlotProps = CmssyLayoutSlotBaseProps & CmssyLayoutSlotLocaleSource;
+/**
+ * The site-wide header and footer, which are layout **blocks** rather than
+ * markup the app owns. Rendered the way each mode needs them:
+ *
+ *  - published traffic: server-rendered blocks, no client cost;
+ *  - the editor: the same blocks through the edit bridge, fetched with the
+ *    preview secret and handed their server-resolved content, so a relation
+ *    field shows records rather than the ids it stores.
+ *
+ * Getting any of that wrong is invisible - the site looks right while the
+ * editor shows a header it cannot fill, or the published version of one. Every
+ * app that wrote this by hand between 10.0 and 10.9 got at least one of the
+ * three wrong, which is why it is back.
+ */
+declare function CmssyLayoutSlot({ config, blocks, position, path, locale: explicitLocale, editMode, page, editable: Editable, appContext, }: CmssyLayoutSlotProps): Promise<react_jsx_runtime.JSX.Element>;
+
+export { type CmssyDraftRouteConfig, CmssyLayoutSlot, type CmssyLayoutSlotProps, createDraftRoute, isCmssyEditMode };

package/dist/server.js

@@ -1,12 +1,13 @@
 import 'server-only';
 import { draftMode, headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
-import { createCmssyClient, CmssyServerPage } from '@cmssy/react';
+import { createCmssyClient, CmssyServerPage, CmssyServerLayout, resolveEditorLayoutBlockData } from '@cmssy/react';
 import { CmssyLocaleProvider } from '@cmssy/react/internal';
 import { resolveEditorBlockData } from '@cmssy/react/internal-server';
-import { isDevelopment, resolveSiteLocales, splitLocaleFromPath, fetchPage, resolveForms, toCspOrigin, cmssySecretsMatch } from '@cmssy/core/internal';
+import { isDevelopment, resolveSiteLocales, splitLocaleFromPath, fetchPage, resolveForms, toCspOrigin, cmssySecretsMatch, fetchLayouts } from '@cmssy/core/internal';
 import { CMSSY_SECRET_QUERY_PARAM, resolveEditorOrigin, CMSSY_EDIT_HEADER, CMSSY_EDIT_QUERY_PARAM } from '@cmssy/core';
 import { jsx } from 'react/jsx-runtime';
+import { resolveSiteLocales as resolveSiteLocales$1, splitLocaleFromPath as splitLocaleFromPath$1 } from '@cmssy/core/internal/locale';
 
 // src/server.ts
 function hasEditFlag(value) {
@@ -247,5 +248,65 @@ async function isCmssyEditMode() {
   const h = await headers();
   return h.get(CMSSY_EDIT_HEADER) === "1";
 }
+async function CmssyLayoutSlot({
+  config,
+  blocks,
+  position,
+  path,
+  locale: explicitLocale,
+  editMode,
+  page = "/",
+  editable: Editable,
+  appContext
+}) {
+  const [groups, siteLocales] = await Promise.all([
+    fetchLayouts(config, page, {
+      previewSecret: editMode ? config.draftSecret : void 0
+    }),
+    resolveSiteLocales$1(config)
+  ]);
+  const locale = explicitLocale ?? splitLocaleFromPath$1(path ?? [], siteLocales).locale;
+  if (!editMode) {
+    return /* @__PURE__ */ jsx(
+      CmssyServerLayout,
+      {
+        groups,
+        blocks,
+        position,
+        locale,
+        defaultLocale: siteLocales.defaultLocale,
+        enabledLocales: siteLocales.locales,
+        config,
+        appContext
+      }
+    );
+  }
+  const origin = resolveEditorOrigin(config.editorOrigin);
+  const editorData = await resolveEditorLayoutBlockData({
+    groups,
+    blocks,
+    position,
+    locale,
+    defaultLocale: siteLocales.defaultLocale,
+    enabledLocales: siteLocales.locales,
+    isPreview: true,
+    config,
+    appContext
+  });
+  return /* @__PURE__ */ jsx(
+    Editable,
+    {
+      groups,
+      position,
+      locale,
+      defaultLocale: siteLocales.defaultLocale,
+      enabledLocales: siteLocales.locales,
+      edit: { editorOrigin: (Array.isArray(origin) ? origin[0] : origin) ?? "" },
+      data: editorData.data,
+      resolvedContent: editorData.content,
+      appContext
+    }
+  );
+}
 
-export { createCmssyEditPage, createCmssyPage, createDraftRoute, isCmssyEditMode };
+export { CmssyLayoutSlot, createCmssyEditPage, createCmssyPage, createDraftRoute, isCmssyEditMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/next",
-  "version": "10.9.2",
+  "version": "11.0.0",
   "description": "Next.js App Router bindings for cmssy headless sites (createCmssyPage + draft preview)",
   "keywords": [
     "cmssy",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@cmssy/react": "^10.0.0",
+    "@cmssy/react": "^11.0.0",
     "next": ">=15",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0"
@@ -65,12 +65,12 @@
     "tsup": "^8.3.0",
     "typescript": "^5.6.0",
     "vitest": "^2.1.0",
-    "@cmssy/react": "10.9.2"
+    "@cmssy/react": "11.0.0"
   },
   "dependencies": {
     "@cmssy/types": "0.32.0",
     "server-only": "^0.0.1",
-    "@cmssy/core": "10.9.2"
+    "@cmssy/core": "11.0.0"
   },
   "scripts": {
     "build": "tsup",