@bettercms-ai/next 0.23.0 → 0.24.0

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { PageMetaJson, ContentBlock, DeliveredLayout, FieldStyles, SiteSeoDefaults, BlockStyle, FieldStyle, DeliveryComponent } from '@bettercms-ai/types';
-export { DeliveredLayout, PageMetaJson, RESPONSIVE_CSS, SiteSeoDefaults } from '@bettercms-ai/types';
+export { DeliveredLayout, LinkValue, PageMetaJson, RESPONSIVE_CSS, SiteSeoDefaults, linkHref } from '@bettercms-ai/types';
 import { Metadata } from 'next';
 import { SeoInput, SeoLocation, DeliveryForm } from '@bettercms-ai/sdk';
 export { ResolvedSeo, SeoInput, resolveSeo } from '@bettercms-ai/sdk';
-import { CSSProperties, ReactElement, ElementType, ReactNode } from 'react';
+import { CSSProperties, ReactElement, ElementType, ReactNode, ImgHTMLAttributes } from 'react';
+import { ImageSource, ImageFormat, ImageFit } from '@bettercms-ai/image-url';
 export { ImageCrop, ImageFit, ImageFocal, ImageFormat, ImageSource, ImageUrlBuilder, ImageValueUrlOptions, imageUrl, default as imageUrlBuilder, imageValueObjectPosition, imageValueUrl } from '@bettercms-ai/image-url';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -591,7 +592,7 @@ interface BcmsFieldProps {
     path: string;
     /** Kind hint the editor's reflection branches on. Omit for plain text/number. */
     kind?: "richtext" | "image";
-    /** Wrapper element. Defaults to a `display:contents` span. */
+    /** Wrapper element. Without it: no wrapper around a single DOM element, a `display:contents` span around anything else. */
     as?: ElementType;
     children: ReactNode;
 }
@@ -606,6 +607,32 @@ interface BcmsButtonProps {
 }
 declare function BcmsButton({ path, value, className }: BcmsButtonProps): react_jsx_runtime.JSX.Element | null;
 
+/** What delivery adds to an image value beside its url: the facts this component reads. */
+type ImageFacts = {
+    altText?: string | null;
+    alt?: string | null;
+    width?: number | null;
+    height?: number | null;
+    focalX?: number | null;
+    focalY?: number | null;
+};
+interface BcmsImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "width" | "height"> {
+    src: ImageSource | (Exclude<ImageSource, string> & ImageFacts);
+    /** The field this image renders, in the editor grammar (`cover`, `hero.image`). */
+    path?: string;
+    width?: number;
+    height?: number;
+    format?: ImageFormat;
+    quality?: number;
+    fit?: ImageFit;
+    /** Focal point override, 0–1. Normally omitted: the value and the asset carry their own. */
+    focalX?: number | null;
+    focalY?: number | null;
+    /** Media host for a `src` that is only an asset id. Defaults to the platform's. */
+    baseUrl?: string;
+}
+declare function BcmsImage({ src, path, alt, width, height, format, quality, fit, sizes, loading, focalX, focalY, baseUrl, style, ...rest }: BcmsImageProps): react_jsx_runtime.JSX.Element;
+
 /** A `change` frame off the live stream. */
 interface BcmsChangeEvent<T = unknown> {
     type: "entry" | "page";
@@ -687,4 +714,4 @@ interface VisualEditingProps {
     studioUrl?: string;
 }
 
-export { type BcmsBlocksProps, BcmsButton, type BcmsButtonProps, BcmsDraftMarker, BcmsField, type BcmsFieldProps, type BcmsFormProps, type BcmsLiveProps, type BetterCMSConfig, type BetterCMSEntry, BetterCMSError, type BetterCMSLiveConfig, type BetterCMSNext, type BetterCMSPage, type ContentSnapshot, type ContentSource, DEFAULT_SNAPSHOT_FILE, type DraftModeRouteConfig, type EntryList, type FieldAttrs, type GetEntryOptions, type ListEntriesOptions, type LlmsModel, type LlmsModelField, type LlmsTxtOptions, type LlmsTxtRouteConfig, PREVIEW_TOKEN_COOKIE, type ReadOptions, type RevalidateRouteConfig, SNAPSHOT_VERSION, type SectionColumnAttrs, type SectionRootAttrs, type SectionRootBlock, type SnapshotForms, type SnapshotPage, type VisualEditingProps, buildMetadata, buildSnapshot, createBetterCMS, createDisableDraftRoute, createDraftModeRoute, createRevalidateRoute, defineBetterCMSLive, fetchModels, fieldAttrs, fieldStyleOf, generateLlmsTxt, getComponent, getContent, getForm, getPage, getPreviewToken, isDraftEnabled, llmsTxtRoute, parseSnapshot, readComponents, readForms, readPages, readSnapshot, sectionColumnAttrs, sectionRootAttrs, serializeSnapshot, writeSnapshot };
+export { type BcmsBlocksProps, BcmsButton, type BcmsButtonProps, BcmsDraftMarker, BcmsField, type BcmsFieldProps, type BcmsFormProps, BcmsImage, type BcmsImageProps, type BcmsLiveProps, type BetterCMSConfig, type BetterCMSEntry, BetterCMSError, type BetterCMSLiveConfig, type BetterCMSNext, type BetterCMSPage, type ContentSnapshot, type ContentSource, DEFAULT_SNAPSHOT_FILE, type DraftModeRouteConfig, type EntryList, type FieldAttrs, type GetEntryOptions, type ListEntriesOptions, type LlmsModel, type LlmsModelField, type LlmsTxtOptions, type LlmsTxtRouteConfig, PREVIEW_TOKEN_COOKIE, type ReadOptions, type RevalidateRouteConfig, SNAPSHOT_VERSION, type SectionColumnAttrs, type SectionRootAttrs, type SectionRootBlock, type SnapshotForms, type SnapshotPage, type VisualEditingProps, buildMetadata, buildSnapshot, createBetterCMS, createDisableDraftRoute, createDraftModeRoute, createRevalidateRoute, defineBetterCMSLive, fetchModels, fieldAttrs, fieldStyleOf, generateLlmsTxt, getComponent, getContent, getForm, getPage, getPreviewToken, isDraftEnabled, llmsTxtRoute, parseSnapshot, readComponents, readForms, readPages, readSnapshot, sectionColumnAttrs, sectionRootAttrs, serializeSnapshot, writeSnapshot };

package/dist/index.js

@@ -222,6 +222,7 @@ function buildMetadata(page, siteDefaults = {}, location = {}) {
 
 // src/index.ts
 import { RESPONSIVE_CSS } from "@bettercms-ai/types";
+import { linkHref } from "@bettercms-ai/types";
 
 // src/section-root.ts
 import { blockStyleToColumnCss, blockStyleToCss, hideOnAttr } from "@bettercms-ai/types";
@@ -621,9 +622,15 @@ function getComponent(idOrSlug, path) {
 }
 
 // src/field.tsx
+import { Children, cloneElement, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 function BcmsField({ path, kind, as, children }) {
   const Tag = as ?? "span";
+  const only = as ? [] : Children.toArray(children);
+  const sole = only.length === 1 && isValidElement(only[0]) && typeof only[0].type === "string" ? only[0] : null;
+  if (sole && sole.props["data-bcms-field"] === void 0 && sole.props["data-bcms-layout-field"] === void 0) {
+    return cloneElement(sole, { "data-bcms-field": path, "data-bcms-kind": kind });
+  }
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -661,6 +668,78 @@ function BcmsButton({ path, value, className }) {
   );
 }
 
+// src/image.tsx
+import imageUrlBuilder, {
+  focalInCrop,
+  normalizeImageCrop,
+  normalizeImageFocal,
+  objectPosition
+} from "@bettercms-ai/image-url";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var LADDER = [480, 768, 1080, 1440, 1920];
+var num = (v) => typeof v === "number" && Number.isFinite(v) ? v : void 0;
+function BcmsImage({
+  src,
+  path,
+  alt,
+  width,
+  height,
+  format = "webp",
+  quality,
+  fit,
+  sizes,
+  loading = "lazy",
+  focalX,
+  focalY,
+  baseUrl,
+  style,
+  ...rest
+}) {
+  const asset = typeof src === "object" && src !== null ? src : {};
+  const explicit = focalX != null || focalY != null;
+  const stored = normalizeImageFocal(asset.focal) ?? (num(asset.focalX) != null || num(asset.focalY) != null ? { x: num(asset.focalX) ?? 0.5, y: num(asset.focalY) ?? 0.5 } : null);
+  const inWindow = stored ? focalInCrop(stored, normalizeImageCrop(asset.crop)) : null;
+  const fx = explicit ? focalX : inWindow?.x;
+  const fy = explicit ? focalY : inWindow?.y;
+  const hasFocal = fx != null || fy != null;
+  const builder = imageUrlBuilder({ baseUrl });
+  const make = () => {
+    let b = builder(src);
+    if (width) b = b.width(width);
+    if (height) b = b.height(height);
+    if (format) b = b.format(format);
+    if (quality) b = b.quality(quality);
+    if (fit) b = b.fit(fit);
+    if (hasFocal) b = b.focal(fx ?? 0.5, fy ?? 0.5);
+    return b;
+  };
+  const src1x = make().url();
+  const own = num(asset.width);
+  const ladder = own ? [.../* @__PURE__ */ new Set([...LADDER.filter((w) => w < own), Math.min(own, LADDER[LADDER.length - 1])])] : LADDER;
+  const srcSet = sizes && !width ? ladder.map((w) => `${make().width(w).url()} ${w}w`).join(", ") : `${src1x} 1x, ${make().dpr(2).url()} 2x`;
+  const merged = {
+    ...width ? { width: `${width}px`, maxWidth: "100%", height: "auto" } : {},
+    ...hasFocal ? { objectPosition: objectPosition({ x: fx, y: fy }) } : {},
+    ...style
+  };
+  return /* @__PURE__ */ jsx3(
+    "img",
+    {
+      src: src1x,
+      srcSet,
+      alt: alt ?? (typeof asset.altText === "string" ? asset.altText : typeof asset.alt === "string" ? asset.alt : ""),
+      "data-bcms-field": path,
+      "data-bcms-kind": path ? "image" : void 0,
+      width,
+      height,
+      sizes,
+      loading,
+      style: Object.keys(merged).length > 0 ? merged : void 0,
+      ...rest
+    }
+  );
+}
+
 // src/live-config.ts
 function defineBetterCMSLive(config) {
   const base = config.apiUrl.replace(/\/+$/, "");
@@ -705,6 +784,7 @@ export {
   BcmsButton,
   BcmsDraftMarker,
   BcmsField,
+  BcmsImage,
   BetterCMSError,
   DEFAULT_SNAPSHOT_FILE,
   PREVIEW_TOKEN_COOKIE,
@@ -731,6 +811,7 @@ export {
   imageValueObjectPosition,
   imageValueUrl,
   isDraftEnabled,
+  linkHref,
   llmsTxtRoute,
   parseSnapshot,
   readComponents,