@cmssy/react 9.2.0 → 9.4.0

package/dist/client.js

@@ -2,6 +2,7 @@
 import { createContext, useState, useRef, useEffect, useMemo, useContext, useCallback, createElement } from 'react';
 import { fields, resolveInitialTarget, buildBlockContext, postToEditor, PROTOCOL_VERSION, parseEditorMessage, getBlockContentForLanguage, asBucket, toMinorUnits, formatPrice } from '@cmssy/core';
 export { formatPrice, fractionDigits, fromMinorUnits, toMinorUnits } from '@cmssy/core';
+import { BlockErrorBoundary } from '@cmssy/react/block-error-boundary';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/registry.ts
@@ -114,6 +115,15 @@ function useEditBridge(page, config) {
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
     }
+    const postSafe = (message) => {
+      try {
+        postToEditor(window.parent, postTarget, message);
+      } catch (error) {
+        if (typeof console !== "undefined") {
+          console.debug("[cmssy] post to editor failed", message.type, error);
+        }
+      }
+    };
     const sendReady = () => {
       try {
         const rects = collectRects();
@@ -202,20 +212,24 @@ function useEditBridge(page, config) {
       const target = event.target;
       const el = target?.closest?.("[data-block-id]");
       const id = el?.getAttribute("data-block-id");
-      if (!id || !el) return;
+      if (!id || !el) {
+        if (!selectedIdRef.current) return;
+        if (target?.closest?.("a[href],button")) return;
+        selectedIdRef.current = null;
+        setSelected(null);
+        postSafe({ type: "cmssy:deselect" });
+        return;
+      }
       selectedIdRef.current = id;
       if (target?.closest?.("a[href]")) event.preventDefault();
       const r = el.getBoundingClientRect();
       const layoutPosition = el.getAttribute("data-layout-position");
-      try {
-        postToEditor(window.parent, postTarget, {
-          type: "cmssy:click",
-          blockId: id,
-          rect: { x: r.x, y: r.y, width: r.width, height: r.height },
-          ...layoutPosition !== null ? { layoutPosition } : {}
-        });
-      } catch {
-      }
+      postSafe({
+        type: "cmssy:click",
+        blockId: id,
+        rect: { x: r.x, y: r.y, width: r.width, height: r.height },
+        ...layoutPosition !== null ? { layoutPosition } : {}
+      });
     };
     let boundsRaf = 0;
     let boundsPending = false;
@@ -230,14 +244,11 @@ function useEditBridge(page, config) {
         const el = findBlockEl(id);
         if (!el) return;
         const r = el.getBoundingClientRect();
-        try {
-          postToEditor(window.parent, postTarget, {
-            type: "cmssy:bounds",
-            blockId: id,
-            rect: { x: r.x, y: r.y, width: r.width, height: r.height }
-          });
-        } catch {
-        }
+        postSafe({
+          type: "cmssy:bounds",
+          blockId: id,
+          rect: { x: r.x, y: r.y, width: r.width, height: r.height }
+        });
       });
     };
     window.addEventListener("message", handler);
@@ -420,13 +431,85 @@ function useDragAgent(config) {
   }, [config.editorOrigin]);
   return { dropY };
 }
+
+// src/components/block-error.ts
+var BLOCK_ERROR_KEY = "__cmssyBlockError";
+var SOURCES = [
+  "loader",
+  "render",
+  "unregistered"
+];
+function unregisteredBlockError(type) {
+  return {
+    source: "unregistered",
+    message: `Block type "${type}" is not registered in this site's blocks array.`
+  };
+}
+function readBlockError(value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const marked = value[BLOCK_ERROR_KEY];
+  if (typeof marked !== "object" || marked === null) return void 0;
+  const { message, source } = marked;
+  if (typeof message !== "string") return void 0;
+  if (!SOURCES.includes(source)) return void 0;
+  return { message, source };
+}
+var SOURCE_LABELS = {
+  loader: "loader failed",
+  render: "render failed",
+  unregistered: "type not registered"
+};
+var cardStyle = {
+  boxSizing: "border-box",
+  margin: "8px 0",
+  padding: "12px 16px",
+  border: "1px dashed #ef4444",
+  borderRadius: "8px",
+  background: "rgba(239, 68, 68, 0.08)",
+  color: "#ef4444",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+  fontSize: "13px",
+  lineHeight: 1.5,
+  textAlign: "left"
+};
+var headingStyle = {
+  fontWeight: 700,
+  marginBottom: "4px"
+};
+var metaStyle = {
+  opacity: 0.8,
+  marginBottom: "4px"
+};
+var messageStyle = {
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere"
+};
+function BlockErrorCard({
+  blockType,
+  blockId,
+  error
+}) {
+  return /* @__PURE__ */ jsxs("div", { role: "alert", "data-cmssy-block-error": error.source, style: cardStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: headingStyle, children: [
+      'Block "',
+      blockType,
+      '" - ',
+      SOURCE_LABELS[error.source]
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: metaStyle, children: [
+      "id: ",
+      blockId
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: messageStyle, children: error.message })
+  ] });
+}
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
 function UnknownBlock({ type }) {
   if (typeof window !== "undefined" && !warned.has(type)) {
     if (warned.size >= WARN_CAP) warned.clear();
     warned.add(type);
-    console.warn(`[cmssy] no component registered for block type "${type}"`);
+    console.error(`[cmssy] no component registered for block type "${type}"`);
   }
   return /* @__PURE__ */ jsx("div", { "data-cmssy-unknown-block": type });
 }
@@ -439,32 +522,71 @@ function CmssyBlock({
   patchedStyle,
   patchedAdvanced,
   editable,
+  editMode,
   layoutPosition,
   context,
   data
 }) {
+  const inEditMode = editMode ?? editable ?? false;
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
-  const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
-  const content = patchedContent ? { ...base, ...patchedContent } : base;
-  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
-  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
-  return /* @__PURE__ */ jsx(
+  const blockError = readBlockError(data);
+  const wrap = (children, hidden = false) => /* @__PURE__ */ jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? createElement(Component, {
-        content,
-        style,
-        advanced,
-        context,
-        data
-      }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
+      style: hidden ? { display: "none" } : void 0,
+      children
     }
   );
+  if (!Component) {
+    return inEditMode ? wrap(
+      /* @__PURE__ */ jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: unregisteredBlockError(block.type)
+        }
+      )
+    ) : wrap(/* @__PURE__ */ jsx(UnknownBlock, { type: block.type }), true);
+  }
+  if (blockError) {
+    if (!inEditMode) return null;
+    return wrap(
+      /* @__PURE__ */ jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: blockError
+        }
+      )
+    );
+  }
+  const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
+  const content = patchedContent ? { ...base, ...patchedContent } : base;
+  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
+  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
+  return wrap(
+    /* @__PURE__ */ jsx(
+      BlockErrorBoundary,
+      {
+        blockType: block.type,
+        blockId: block.id,
+        editMode: inEditMode,
+        children: createElement(Component, {
+          content,
+          style,
+          advanced,
+          context,
+          data
+        })
+      }
+    )
+  );
 }
 function CmssyEditablePage({
   page,
@@ -673,6 +795,7 @@ function CmssyEditableLayout({
       defaultLocale,
       blockMap,
       patchedContent: patches[block.id],
+      editMode: true,
       layoutPosition: position,
       context,
       data: data?.[block.id]

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var core = require('@cmssy/core');
 var react = require('react');
+var blockErrorBoundary = require('@cmssy/react/block-error-boundary');
 var jsxRuntime = require('react/jsx-runtime');
 var types = require('@cmssy/types');
 
@@ -48,41 +49,155 @@ function blocksToMeta(blocks, defaults = {}) {
   }
   return out;
 }
+
+// src/components/block-error.ts
+var BLOCK_ERROR_KEY = "__cmssyBlockError";
+var SOURCES = [
+  "loader",
+  "render",
+  "unregistered"
+];
+function blockErrorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+function unregisteredBlockError(type) {
+  return {
+    source: "unregistered",
+    message: `Block type "${type}" is not registered in this site's blocks array.`
+  };
+}
+function markBlockError(error) {
+  return { [BLOCK_ERROR_KEY]: error };
+}
+function readBlockError(value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const marked = value[BLOCK_ERROR_KEY];
+  if (typeof marked !== "object" || marked === null) return void 0;
+  const { message, source } = marked;
+  if (typeof message !== "string") return void 0;
+  if (!SOURCES.includes(source)) return void 0;
+  return { message, source };
+}
+var SOURCE_LABELS = {
+  loader: "loader failed",
+  render: "render failed",
+  unregistered: "type not registered"
+};
+var cardStyle = {
+  boxSizing: "border-box",
+  margin: "8px 0",
+  padding: "12px 16px",
+  border: "1px dashed #ef4444",
+  borderRadius: "8px",
+  background: "rgba(239, 68, 68, 0.08)",
+  color: "#ef4444",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+  fontSize: "13px",
+  lineHeight: 1.5,
+  textAlign: "left"
+};
+var headingStyle = {
+  fontWeight: 700,
+  marginBottom: "4px"
+};
+var metaStyle = {
+  opacity: 0.8,
+  marginBottom: "4px"
+};
+var messageStyle = {
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere"
+};
+function BlockErrorCard({
+  blockType,
+  blockId,
+  error
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", "data-cmssy-block-error": error.source, style: cardStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headingStyle, children: [
+      'Block "',
+      blockType,
+      '" - ',
+      SOURCE_LABELS[error.source]
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: metaStyle, children: [
+      "id: ",
+      blockId
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: messageStyle, children: error.message })
+  ] });
+}
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
 function UnknownBlock({ type }) {
   if (typeof window !== "undefined" && !warned.has(type)) {
     if (warned.size >= WARN_CAP) warned.clear();
     warned.add(type);
-    console.warn(`[cmssy] no component registered for block type "${type}"`);
+    console.error(`[cmssy] no component registered for block type "${type}"`);
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cmssy-unknown-block": type });
 }
 function renderResolvedBlock(block, map, locale, defaultLocale, options = {}) {
-  const { context, data, resolvedContent, enabledLocales } = options;
+  const { context, data, resolvedContent, enabledLocales, error, editMode } = options;
   const Component = Object.hasOwn(map, block.type) ? map[block.type] : void 0;
-  const content = resolvedContent ?? core.getBlockContentForLanguage(
-    block.content,
-    locale,
-    defaultLocale,
-    enabledLocales?.length ? enabledLocales : void 0
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const wrap = (children, hidden = false) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? react.createElement(Component, {
-        content,
-        style: core.asBucket(block.style),
-        advanced: core.asBucket(block.advanced),
-        context,
-        data
-      }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
+      style: hidden ? { display: "none" } : void 0,
+      children
     },
     block.id
   );
+  if (!Component) {
+    return editMode ? wrap(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: unregisteredBlockError(block.type)
+        }
+      )
+    ) : wrap(/* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type }), true);
+  }
+  if (error) {
+    if (!editMode) return null;
+    return wrap(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error
+        }
+      )
+    );
+  }
+  const content = resolvedContent ?? core.getBlockContentForLanguage(
+    block.content,
+    locale,
+    defaultLocale,
+    enabledLocales?.length ? enabledLocales : void 0
+  );
+  return wrap(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      blockErrorBoundary.BlockErrorBoundary,
+      {
+        blockType: block.type,
+        blockId: block.id,
+        editMode,
+        children: react.createElement(Component, {
+          content,
+          style: core.asBucket(block.style),
+          advanced: core.asBucket(block.advanced),
+          context,
+          data
+        })
+      }
+    )
+  );
 }
 async function resolveBlocks(blocks, loaderMap, locale, defaultLocale, context, enabledLocales) {
   return Promise.all(
@@ -95,19 +210,21 @@ async function resolveBlocks(blocks, loaderMap, locale, defaultLocale, context,
       );
       const loader = loaderMap[block.type];
       let data;
+      let error;
       if (loader) {
         try {
           data = await loader({ content, context });
         } catch (err) {
           if (typeof console !== "undefined") {
-            console.warn(
+            console.error(
               `[cmssy] loader for block "${block.type}" (${block.id}) failed`,
               err
             );
           }
+          error = { message: blockErrorMessage(err), source: "loader" };
         }
       }
-      return { content, data };
+      return { content, data, error };
     })
   );
 }
@@ -148,7 +265,8 @@ async function CmssyServerPage({
   config,
   forms,
   auth,
-  workspace
+  workspace,
+  editMode
 }) {
   if (!page) return null;
   const { locale, defaultLocale, enabledLocales } = await resolveRenderLocale({
@@ -180,10 +298,25 @@ async function CmssyServerPage({
       context,
       data: resolved[i]?.data,
       resolvedContent: resolved[i]?.content,
-      enabledLocales
+      enabledLocales,
+      error: resolved[i]?.error,
+      editMode
     })
   ) });
 }
+function collectBlockData(blocks, resolved, isPreview) {
+  const data = {};
+  blocks.forEach((block, index) => {
+    const entry = resolved[index];
+    if (!entry) return;
+    if (entry.error && isPreview) {
+      data[block.id] = markBlockError(entry.error);
+    } else if (entry.data !== void 0) {
+      data[block.id] = entry.data;
+    }
+  });
+  return data;
+}
 async function resolveBlockData({
   page,
   blocks,
@@ -210,12 +343,7 @@ async function resolveBlockData({
     context,
     enabledLocales
   );
-  const data = {};
-  page.blocks.forEach((block, index) => {
-    const value = resolved[index]?.data;
-    if (value !== void 0) data[block.id] = value;
-  });
-  return data;
+  return collectBlockData(page.blocks, resolved, isPreview);
 }
 async function resolveLayoutBlockData({
   groups,
@@ -246,12 +374,7 @@ async function resolveLayoutBlockData({
     context,
     enabledLocales
   );
-  const data = {};
-  layoutBlocks.forEach((block, index) => {
-    const value = resolved[index]?.data;
-    if (value !== void 0) data[block.id] = value;
-  });
-  return data;
+  return collectBlockData(layoutBlocks, resolved, isPreview);
 }
 async function CmssyServerLayout({
   groups,
@@ -260,7 +383,8 @@ async function CmssyServerLayout({
   locale: localeProp,
   defaultLocale: defaultLocaleProp,
   enabledLocales: enabledLocalesProp,
-  config
+  config,
+  editMode
 }) {
   const { locale, defaultLocale, enabledLocales } = await resolveRenderLocale({
     locale: localeProp,
@@ -287,7 +411,9 @@ async function CmssyServerLayout({
       context,
       data: resolved[i]?.data,
       resolvedContent: resolved[i]?.content,
-      enabledLocales
+      enabledLocales,
+      error: resolved[i]?.error,
+      editMode
     })
   ) });
 }
@@ -300,32 +426,71 @@ function CmssyBlock({
   patchedStyle,
   patchedAdvanced,
   editable,
+  editMode,
   layoutPosition,
   context,
   data
 }) {
+  const inEditMode = editMode ?? editable ?? false;
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
-  const base = core.getBlockContentForLanguage(block.content, locale, defaultLocale);
-  const content = patchedContent ? { ...base, ...patchedContent } : base;
-  const style = patchedStyle ? { ...core.asBucket(block.style), ...patchedStyle } : core.asBucket(block.style);
-  const advanced = patchedAdvanced ? { ...core.asBucket(block.advanced), ...patchedAdvanced } : core.asBucket(block.advanced);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const blockError = readBlockError(data);
+  const wrap = (children, hidden = false) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? react.createElement(Component, {
-        content,
-        style,
-        advanced,
-        context,
-        data
-      }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
+      style: hidden ? { display: "none" } : void 0,
+      children
     }
   );
+  if (!Component) {
+    return inEditMode ? wrap(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: unregisteredBlockError(block.type)
+        }
+      )
+    ) : wrap(/* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type }), true);
+  }
+  if (blockError) {
+    if (!inEditMode) return null;
+    return wrap(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: blockError
+        }
+      )
+    );
+  }
+  const base = core.getBlockContentForLanguage(block.content, locale, defaultLocale);
+  const content = patchedContent ? { ...base, ...patchedContent } : base;
+  const style = patchedStyle ? { ...core.asBucket(block.style), ...patchedStyle } : core.asBucket(block.style);
+  const advanced = patchedAdvanced ? { ...core.asBucket(block.advanced), ...patchedAdvanced } : core.asBucket(block.advanced);
+  return wrap(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      blockErrorBoundary.BlockErrorBoundary,
+      {
+        blockType: block.type,
+        blockId: block.id,
+        editMode: inEditMode,
+        children: react.createElement(Component, {
+          content,
+          style,
+          advanced,
+          context,
+          data
+        })
+      }
+    )
+  );
 }
 
 Object.defineProperty(exports, "CmssyRequestError", {

package/dist/index.d.cts

@@ -24,13 +24,14 @@ interface CmssyServerPageProps {
     auth?: CmssyBlockAuthContext;
     /** Workspace identity, exposed via context.workspace. Resolved by createCmssyPage. */
     workspace?: CmssyBlockWorkspace;
+    editMode?: boolean;
 }
 /**
  * Async React Server Component (Next.js App Router / RSC). It runs each block's
  * loader server-side before rendering, so it must be rendered in a server
  * component tree (as `createCmssyPage` does) - not in a client component.
  */
-declare function CmssyServerPage({ page, blocks, locale: localeProp, defaultLocale: defaultLocaleProp, enabledLocales: enabledLocalesProp, config, forms, auth, workspace, }: CmssyServerPageProps): Promise<react_jsx_runtime.JSX.Element | null>;
+declare function CmssyServerPage({ page, blocks, locale: localeProp, defaultLocale: defaultLocaleProp, enabledLocales: enabledLocalesProp, config, forms, auth, workspace, editMode, }: CmssyServerPageProps): Promise<react_jsx_runtime.JSX.Element | null>;
 
 interface ResolveBlockDataOptions {
     page: CmssyPageData | null;
@@ -68,13 +69,14 @@ interface CmssyServerLayoutProps {
      * Without it the SDK has to guess, and its guess is "en".
      */
     config?: CmssyClientConfig;
+    editMode?: boolean;
 }
 /**
  * Async React Server Component. Like CmssyServerPage it runs each block's
  * loader server-side before rendering, so a header block can list categories
  * the same way a page block can. Must be rendered in a server component tree.
  */
-declare function CmssyServerLayout({ groups, blocks, position, locale: localeProp, defaultLocale: defaultLocaleProp, enabledLocales: enabledLocalesProp, config, }: CmssyServerLayoutProps): Promise<react_jsx_runtime.JSX.Element | null>;
+declare function CmssyServerLayout({ groups, blocks, position, locale: localeProp, defaultLocale: defaultLocaleProp, enabledLocales: enabledLocalesProp, config, editMode, }: CmssyServerLayoutProps): Promise<react_jsx_runtime.JSX.Element | null>;
 
 interface CmssyBlockProps {
     block: RawBlock;
@@ -85,11 +87,12 @@ interface CmssyBlockProps {
     patchedStyle?: Record<string, unknown>;
     patchedAdvanced?: Record<string, unknown>;
     editable?: boolean;
+    editMode?: boolean;
     layoutPosition?: string;
     context?: CmssyBlockContext;
     data?: unknown;
 }
-declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, patchedStyle, patchedAdvanced, editable, layoutPosition, context, data, }: CmssyBlockProps): react_jsx_runtime.JSX.Element;
+declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, patchedStyle, patchedAdvanced, editable, editMode, layoutPosition, context, data, }: CmssyBlockProps): react_jsx_runtime.JSX.Element | null;
 
 interface UnknownBlockProps {
     type: string;