@cmssy/react 9.2.0 → 9.4.0

package/dist/block-error-boundary.cjs

@@ -0,0 +1,90 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/block-error.ts
+function blockErrorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+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 BlockErrorBoundary = class extends react.Component {
+  state = { failed: false, error: void 0 };
+  static getDerivedStateFromError(error) {
+    return { failed: true, error };
+  }
+  componentDidCatch(error) {
+    if (typeof console !== "undefined") {
+      console.error(
+        `[cmssy] block "${this.props.blockType}" (${this.props.blockId}) failed to render`,
+        error
+      );
+    }
+  }
+  render() {
+    if (!this.state.failed) return this.props.children;
+    if (!this.props.editMode) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BlockErrorCard,
+      {
+        blockType: this.props.blockType,
+        blockId: this.props.blockId,
+        error: {
+          source: "render",
+          message: blockErrorMessage(this.state.error)
+        }
+      }
+    );
+  }
+};
+
+exports.BlockErrorBoundary = BlockErrorBoundary;

package/dist/block-error-boundary.d.cts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { Component, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BlockErrorBoundaryProps {
+    blockType: string;
+    blockId: string;
+    editMode?: boolean;
+    children?: ReactNode;
+}
+interface BlockErrorBoundaryState {
+    failed: boolean;
+    error: unknown;
+}
+declare class BlockErrorBoundary extends Component<BlockErrorBoundaryProps, BlockErrorBoundaryState> {
+    state: BlockErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): BlockErrorBoundaryState;
+    componentDidCatch(error: unknown): void;
+    render(): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}
+
+export { BlockErrorBoundary, type BlockErrorBoundaryProps };

package/dist/block-error-boundary.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { Component, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BlockErrorBoundaryProps {
+    blockType: string;
+    blockId: string;
+    editMode?: boolean;
+    children?: ReactNode;
+}
+interface BlockErrorBoundaryState {
+    failed: boolean;
+    error: unknown;
+}
+declare class BlockErrorBoundary extends Component<BlockErrorBoundaryProps, BlockErrorBoundaryState> {
+    state: BlockErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): BlockErrorBoundaryState;
+    componentDidCatch(error: unknown): void;
+    render(): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}
+
+export { BlockErrorBoundary, type BlockErrorBoundaryProps };

package/dist/block-error-boundary.js

@@ -0,0 +1,88 @@
+"use client";
+import { Component } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/block-error.ts
+function blockErrorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+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 BlockErrorBoundary = class extends Component {
+  state = { failed: false, error: void 0 };
+  static getDerivedStateFromError(error) {
+    return { failed: true, error };
+  }
+  componentDidCatch(error) {
+    if (typeof console !== "undefined") {
+      console.error(
+        `[cmssy] block "${this.props.blockType}" (${this.props.blockId}) failed to render`,
+        error
+      );
+    }
+  }
+  render() {
+    if (!this.state.failed) return this.props.children;
+    if (!this.props.editMode) return null;
+    return /* @__PURE__ */ jsx(
+      BlockErrorCard,
+      {
+        blockType: this.props.blockType,
+        blockId: this.props.blockId,
+        error: {
+          source: "render",
+          message: blockErrorMessage(this.state.error)
+        }
+      }
+    );
+  }
+};
+
+export { BlockErrorBoundary };

package/dist/client.cjs

@@ -3,6 +3,7 @@
 
 var react = require('react');
 var core = require('@cmssy/core');
+var blockErrorBoundary = require('@cmssy/react/block-error-boundary');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/registry.ts
@@ -115,6 +116,15 @@ function useEditBridge(page, config) {
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
     }
+    const postSafe = (message) => {
+      try {
+        core.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();
@@ -203,20 +213,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 {
-        core.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;
@@ -231,14 +245,11 @@ function useEditBridge(page, config) {
         const el = findBlockEl(id);
         if (!el) return;
         const r = el.getBoundingClientRect();
-        try {
-          core.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);
@@ -421,13 +432,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__ */ 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 });
 }
@@ -440,32 +523,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
+        })
+      }
+    )
+  );
 }
 function CmssyEditablePage({
   page,
@@ -674,6 +796,7 @@ function CmssyEditableLayout({
       defaultLocale,
       blockMap,
       patchedContent: patches[block.id],
+      editMode: true,
       layoutPosition: position,
       context,
       data: data?.[block.id]