@bettercms-ai/ui 0.14.0 → 0.15.0

package/dist/renderer.d.ts

@@ -8,14 +8,22 @@ interface BlockRendererProps {
     renderBlock?: (block: ContentBlock) => React.ReactNode;
     /** Emit visual-editor field bindings. Default-off keeps published consumers clean. */
     annotate?: boolean;
+    /** The instant block windows are read against. Internal: `BlocksRenderer` passes it when annotating. */
+    stampAt?: Date;
 }
-declare function BlockRenderer({ block, className, renderBlock, annotate, }: BlockRendererProps): react_jsx_runtime.JSX.Element;
+declare function BlockRenderer({ block, className, renderBlock, annotate, stampAt, }: BlockRendererProps): react_jsx_runtime.JSX.Element;
 interface BlocksRendererProps {
     blocks: ContentBlock[];
     className?: string;
     renderBlock?: (block: ContentBlock) => React.ReactNode;
     annotate?: boolean;
+    /**
+     * The instant block windows (`block.window`) are read against. Defaults to the render time.
+     * A block outside its window is not rendered, at any depth; with `annotate` it is rendered and
+     * marked `data-bcms-window="pending|expired"` instead.
+     */
+    now?: Date;
 }
-declare function BlocksRenderer({ blocks, className, renderBlock, annotate, }: BlocksRendererProps): react_jsx_runtime.JSX.Element | null;
+declare function BlocksRenderer({ blocks: all, className, renderBlock, annotate, now, }: BlocksRendererProps): react_jsx_runtime.JSX.Element | null;
 
 export { BlockRenderer, BlocksRenderer };

package/dist/renderer.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/renderer.tsx
-import { splitButtonStyle } from "@bettercms-ai/types";
+import { RESPONSIVE_CSS, hideOnAttr, splitButtonStyle, usesHideOn, visibleBlocks, windowState } from "@bettercms-ai/types";
 
 // src/blocks/Heading.tsx
 import { jsx } from "react/jsx-runtime";
@@ -975,6 +975,12 @@ function styleOf(block) {
   const { placement, paint } = splitButtonStyle(block.style);
   return { wrapper: blockStyleToReactStyle(placement), paint: paint ? { style: paint } : {} };
 }
+function withHide(block, wrapperStyle, el, stampAt) {
+  const hide = hideOnAttr(block.style);
+  const state = stampAt ? windowState(block, stampAt) : "live";
+  if (!wrapperStyle && !hide && state === "live") return el;
+  return /* @__PURE__ */ jsx15("div", { style: wrapperStyle, ...hide ? { "data-bcms-hide": hide } : {}, ...state === "live" ? {} : { "data-bcms-window": state }, children: el });
+}
 function bindingProps(block, annotate) {
   if (!annotate || !block.id) return {};
   switch (block.type) {
@@ -990,7 +996,7 @@ function bindingProps(block, annotate) {
       return {};
   }
 }
-function resolveBlock(block, className, annotate = false) {
+function resolveBlock(block, className, annotate = false, stampAt) {
   const entry = BLOCK_REGISTRY[block.type];
   if (!entry) {
     return /* @__PURE__ */ jsxs11(
@@ -1007,13 +1013,14 @@ function resolveBlock(block, className, annotate = false) {
   const Component = entry.component;
   const { wrapper: blockStyle, paint } = styleOf(block);
   const el = /* @__PURE__ */ jsx15(Component, { ...block.props, ...paint, className, ...bindingProps(block, annotate) });
-  return blockStyle ? /* @__PURE__ */ jsx15("div", { style: blockStyle, children: el }) : el;
+  return withHide(block, blockStyle, el, stampAt);
 }
 function BlockRenderer({
   block,
   className = "",
   renderBlock,
-  annotate = false
+  annotate = false,
+  stampAt
 }) {
   const entry = BLOCK_REGISTRY[block.type];
   if (!entry) {
@@ -1029,7 +1036,7 @@ function BlockRenderer({
     );
   }
   const Component = entry.component;
-  const containerProps = CONTAINER_TYPES.has(block.type) ? { renderBlock: renderBlock ?? ((child) => resolveBlock(child, void 0, annotate)) } : {};
+  const containerProps = CONTAINER_TYPES.has(block.type) ? { renderBlock: renderBlock ?? ((child) => resolveBlock(child, void 0, annotate, stampAt)) } : {};
   const { wrapper: blockStyle, paint } = styleOf(block);
   const el = /* @__PURE__ */ jsx15(
     Component,
@@ -1041,24 +1048,31 @@ function BlockRenderer({
       ...bindingProps(block, annotate)
     }
   );
-  return blockStyle ? /* @__PURE__ */ jsx15("div", { style: blockStyle, children: el }) : el;
+  return withHide(block, blockStyle, el, stampAt);
 }
 function BlocksRenderer({
-  blocks,
+  blocks: all,
   className = "",
   renderBlock,
-  annotate = false
+  annotate = false,
+  now
 }) {
+  const at = now ?? /* @__PURE__ */ new Date();
+  const blocks = annotate ? all : visibleBlocks(all, at);
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ jsx15("div", { className, children: blocks.map((block) => /* @__PURE__ */ jsx15(
-    BlockRenderer,
-    {
-      block,
-      renderBlock,
-      annotate
-    },
-    block.id
-  )) });
+  return /* @__PURE__ */ jsxs11("div", { className, children: [
+    usesHideOn(blocks) && /* @__PURE__ */ jsx15("style", { dangerouslySetInnerHTML: { __html: RESPONSIVE_CSS } }),
+    blocks.map((block) => /* @__PURE__ */ jsx15(
+      BlockRenderer,
+      {
+        block,
+        renderBlock,
+        annotate,
+        stampAt: annotate ? at : void 0
+      },
+      block.id
+    ))
+  ] });
 }
 export {
   BlockRenderer,