@unlayer/react-elements 0.1.9 → 0.1.10

package/dist/index.d.cts

@@ -257,20 +257,69 @@ type ItemProps<TValues> = SemanticProps$1<TValues, React.ReactNode> & {
     style?: React.CSSProperties;
     mode?: "web" | "email" | "document";
 };
+/** fontFamily accepts a ready stack object or a bare family-name string. */
+type FontFamilyInput = {
+    label: string;
+    value: string;
+} | string;
+/** fontWeight accepts a number, a numeric string, or a CSS keyword. */
+type FontWeightInput = number | `${number}` | "normal" | "bold" | "lighter" | "bolder";
+/** A CSS size: a number (treated as px) or a string ("24px", "50%", "1.5em"). */
+type SizeInput = number | (string & {});
+/** Heading levels (h1–h6). */
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** Shared text/style props, agent-friendly (replace the loose `any` flat keys). */
+type TextStyleProps = {
+    fontFamily?: FontFamilyInput;
+    fontWeight?: FontWeightInput;
+    fontSize?: SizeInput;
+    lineHeight?: SizeInput;
+    /** Letter spacing — a CSS string ("0.5px", "-0.01em") or a number (px). */
+    letterSpacing?: SizeInput;
+    color?: string;
+};
+/** Image `src` accepts a plain URL string or the value object (loosened sizing). */
+type ImageSrcInput = string | {
+    url: string;
+    width?: SizeInput;
+    height?: number;
+    autoWidth?: boolean;
+    maxWidth?: SizeInput;
+    [key: string]: unknown;
+};
 /** Button component props */
-type ButtonProps = ItemProps<ButtonValues>;
+type ButtonProps = Omit<ItemProps<ButtonValues>, keyof TextStyleProps | "width"> & TextStyleProps & {
+    /** Display width — a number/px pins the button; "100%" makes it full-width. */
+    width?: SizeInput;
+};
 /** Heading component props */
-type HeadingProps = ItemProps<HeadingValues>;
+type HeadingProps = Omit<ItemProps<HeadingValues>, keyof TextStyleProps | "headingType"> & TextStyleProps & {
+    /** Heading level h1–h6. */
+    headingType?: HeadingLevel;
+    /** Alias for `headingType`. */
+    level?: HeadingLevel;
+    /** Heading text (or use children). */
+    text?: string;
+};
 /** Divider component props */
 type DividerProps = ItemProps<DividerValues>;
 /** HTML component props */
 type HtmlProps = ItemProps<HtmlValues>;
 /** Paragraph component props */
-type ParagraphProps = ItemProps<ParagraphValues>;
+type ParagraphProps = Omit<ItemProps<ParagraphValues>, keyof TextStyleProps> & TextStyleProps & {
+    /** Plain-text content (or use `html` for inline formatting, or children). */
+    text?: string;
+};
 /** Image component props — supports `alt` shorthand for `altText`. */
-type ImageProps = ItemProps<ImageValues> & {
+type ImageProps = Omit<ItemProps<ImageValues>, "src" | "width" | "maxWidth"> & {
     /** Alt text (alias for altText) */
     alt?: string;
+    /** Image URL string, or the value object `{ url, width?, maxWidth?, ... }`. */
+    src?: ImageSrcInput;
+    /** Display width — number/px pins the image; "50%" sets a percentage width. */
+    width?: SizeInput;
+    /** Display width as a CSS value ("50%", "300px"). */
+    maxWidth?: SizeInput;
 };
 /** Social component props — supports `icons` shorthand array. */
 type SocialProps = ItemProps<SocialValues> & {
@@ -338,6 +387,14 @@ type ItemComponentProps<TSemanticProps> = BaseItemComponentProps & TSemanticProp
  */
 type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
 
+/**
+ * Button semantic props — agent-friendly text/style types (replacing the loose
+ * `any` flat props) plus a CSS-style `width` (number/px pins; "100%" full-width).
+ */
+type ButtonSemanticProps = Omit<SemanticProps<ButtonValues>, keyof TextStyleProps | "width"> & TextStyleProps & {
+    /** Display width — a number/px pins the button; "100%" makes it full-width. */
+    width?: SizeInput;
+};
 /**
  * Button - Universal SSR/Client Component with Automatic Semantic Props
  *
@@ -375,7 +432,7 @@ type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
  * </Button>
  * ```
  */
-declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>>;
+declare const Button: React$1.FC<ItemComponentProps<ButtonSemanticProps>>;
 
 /**
  * Divider - Universal SSR/Client Component with Automatic Semantic Props
@@ -395,6 +452,18 @@ declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>
  */
 declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues>>>;
 
+/**
+ * Heading semantic props — agent-friendly text/style types (replacing the loose
+ * `any` flat props) plus the `level` alias and h1–h6 levels.
+ */
+type HeadingSemanticProps = Omit<SemanticProps<HeadingValues>, keyof TextStyleProps | "headingType"> & TextStyleProps & {
+    /** Heading level h1–h6. */
+    headingType?: HeadingLevel;
+    /** Alias for `headingType`. */
+    level?: HeadingLevel;
+    /** Heading text (or use children). */
+    text?: string;
+};
 /**
  * Heading - Universal SSR/Client Component with Semantic Props API
  *
@@ -415,7 +484,7 @@ declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues
  * <Heading values={{ headingType: "h1", color: "#222" }}>Welcome</Heading>
  * ```
  */
-declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues>>>;
+declare const Heading: React$1.FC<ItemComponentProps<HeadingSemanticProps>>;
 
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
@@ -432,9 +501,20 @@ declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues
  */
 declare const Html: React$1.FC<ItemComponentProps<SemanticProps<HtmlValues>>>;
 
-type ImageSemanticProps = SemanticProps<ImageValues> & {
+/**
+ * Image semantic props — agent-friendly `src` (plain URL string or value object)
+ * and CSS-style sizing (number/px pins, "50%" sets a percentage), replacing the
+ * loose `any` flat props.
+ */
+type ImageSemanticProps = Omit<SemanticProps<ImageValues>, "src" | "width" | "maxWidth"> & {
     /** Alt text (alias for altText) */
     alt?: string;
+    /** Image URL string, or the value object `{ url, width?, maxWidth?, ... }`. */
+    src?: ImageSrcInput;
+    /** Display width — number/px pins the image; "50%" sets a percentage width. */
+    width?: SizeInput;
+    /** Display width as a CSS value ("50%", "300px"). */
+    maxWidth?: SizeInput;
 };
 /**
  * Image - Renders an image element.
@@ -479,6 +559,14 @@ type MenuSemanticProps = SemanticProps<MenuValues> & {
  */
 declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
 
+/**
+ * Paragraph semantic props — agent-friendly text/style types (replacing the
+ * loose `any` flat props) plus the `text` shorthand (converted to textJson).
+ */
+type ParagraphSemanticProps = Omit<SemanticProps<ParagraphValues>, keyof TextStyleProps> & TextStyleProps & {
+    /** Plain-text content (or use `html` for inline formatting, or children). */
+    text?: string;
+};
 /**
  * Paragraph - Universal SSR/Client Component with Semantic Props API
  *
@@ -499,7 +587,7 @@ declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
  * <Paragraph values={{ textJson: "...", color: "#555" }} />
  * ```
  */
-declare const Paragraph: React$1.FC<ItemComponentProps<SemanticProps<ParagraphValues>>>;
+declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
 
 type SocialSemanticProps = SemanticProps<SocialValues> & {
     /** Social icons shorthand (array of {name, url}) */
@@ -578,7 +666,7 @@ type VideoSemanticProps = SemanticProps<VideoValues> & {
  */
 declare const Video: React$1.FC<ItemComponentProps<VideoSemanticProps>>;
 
-interface RowProps extends SemanticProps<RowValues> {
+type RowProps = Omit<SemanticProps<RowValues>, "padding"> & {
     children?: React__default.ReactNode;
     layout?: ColumnLayout;
     cells?: number[];
@@ -588,12 +676,14 @@ interface RowProps extends SemanticProps<RowValues> {
     index?: number;
     bodyValues?: any;
     collection?: string;
+    /** Padding — a CSS string ("0 48px", "20px 40px") or a number (px). */
+    padding?: SizeInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body */
     _config?: UnlayerConfig;
-}
+};
 declare const Row: React__default.FC<RowProps>;
 
-interface ColumnProps extends SemanticProps<ColumnValues> {
+type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding"> & {
     children?: React__default.ReactNode;
     index?: number;
     cells?: number[];
@@ -602,12 +692,14 @@ interface ColumnProps extends SemanticProps<ColumnValues> {
     mode?: RenderMode;
     className?: string;
     style?: React__default.CSSProperties;
+    /** Padding — a CSS string ("0 24px", "10px") or a number (px). */
+    padding?: SizeInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body/Row */
     _config?: UnlayerConfig;
-}
+};
 declare const Column: React__default.FC<ColumnProps>;
 
-interface BodyProps extends SemanticProps<BodyValues> {
+type BodyProps = Omit<SemanticProps<BodyValues>, "padding"> & {
     children?: React__default.ReactNode;
     mode?: RenderMode;
     className?: string;
@@ -617,7 +709,9 @@ interface BodyProps extends SemanticProps<BodyValues> {
     config?: Partial<UnlayerConfig>;
     /** Preview text shown in email client inboxes (email mode only) */
     previewText?: string;
-}
+    /** Padding — a CSS string ("0 48px", "20px") or a number (px). */
+    padding?: SizeInput;
+};
 /**
  * Body - Universal Server/Client Component
  *

package/dist/index.d.ts

@@ -257,20 +257,69 @@ type ItemProps<TValues> = SemanticProps$1<TValues, React.ReactNode> & {
     style?: React.CSSProperties;
     mode?: "web" | "email" | "document";
 };
+/** fontFamily accepts a ready stack object or a bare family-name string. */
+type FontFamilyInput = {
+    label: string;
+    value: string;
+} | string;
+/** fontWeight accepts a number, a numeric string, or a CSS keyword. */
+type FontWeightInput = number | `${number}` | "normal" | "bold" | "lighter" | "bolder";
+/** A CSS size: a number (treated as px) or a string ("24px", "50%", "1.5em"). */
+type SizeInput = number | (string & {});
+/** Heading levels (h1–h6). */
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** Shared text/style props, agent-friendly (replace the loose `any` flat keys). */
+type TextStyleProps = {
+    fontFamily?: FontFamilyInput;
+    fontWeight?: FontWeightInput;
+    fontSize?: SizeInput;
+    lineHeight?: SizeInput;
+    /** Letter spacing — a CSS string ("0.5px", "-0.01em") or a number (px). */
+    letterSpacing?: SizeInput;
+    color?: string;
+};
+/** Image `src` accepts a plain URL string or the value object (loosened sizing). */
+type ImageSrcInput = string | {
+    url: string;
+    width?: SizeInput;
+    height?: number;
+    autoWidth?: boolean;
+    maxWidth?: SizeInput;
+    [key: string]: unknown;
+};
 /** Button component props */
-type ButtonProps = ItemProps<ButtonValues>;
+type ButtonProps = Omit<ItemProps<ButtonValues>, keyof TextStyleProps | "width"> & TextStyleProps & {
+    /** Display width — a number/px pins the button; "100%" makes it full-width. */
+    width?: SizeInput;
+};
 /** Heading component props */
-type HeadingProps = ItemProps<HeadingValues>;
+type HeadingProps = Omit<ItemProps<HeadingValues>, keyof TextStyleProps | "headingType"> & TextStyleProps & {
+    /** Heading level h1–h6. */
+    headingType?: HeadingLevel;
+    /** Alias for `headingType`. */
+    level?: HeadingLevel;
+    /** Heading text (or use children). */
+    text?: string;
+};
 /** Divider component props */
 type DividerProps = ItemProps<DividerValues>;
 /** HTML component props */
 type HtmlProps = ItemProps<HtmlValues>;
 /** Paragraph component props */
-type ParagraphProps = ItemProps<ParagraphValues>;
+type ParagraphProps = Omit<ItemProps<ParagraphValues>, keyof TextStyleProps> & TextStyleProps & {
+    /** Plain-text content (or use `html` for inline formatting, or children). */
+    text?: string;
+};
 /** Image component props — supports `alt` shorthand for `altText`. */
-type ImageProps = ItemProps<ImageValues> & {
+type ImageProps = Omit<ItemProps<ImageValues>, "src" | "width" | "maxWidth"> & {
     /** Alt text (alias for altText) */
     alt?: string;
+    /** Image URL string, or the value object `{ url, width?, maxWidth?, ... }`. */
+    src?: ImageSrcInput;
+    /** Display width — number/px pins the image; "50%" sets a percentage width. */
+    width?: SizeInput;
+    /** Display width as a CSS value ("50%", "300px"). */
+    maxWidth?: SizeInput;
 };
 /** Social component props — supports `icons` shorthand array. */
 type SocialProps = ItemProps<SocialValues> & {
@@ -338,6 +387,14 @@ type ItemComponentProps<TSemanticProps> = BaseItemComponentProps & TSemanticProp
  */
 type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
 
+/**
+ * Button semantic props — agent-friendly text/style types (replacing the loose
+ * `any` flat props) plus a CSS-style `width` (number/px pins; "100%" full-width).
+ */
+type ButtonSemanticProps = Omit<SemanticProps<ButtonValues>, keyof TextStyleProps | "width"> & TextStyleProps & {
+    /** Display width — a number/px pins the button; "100%" makes it full-width. */
+    width?: SizeInput;
+};
 /**
  * Button - Universal SSR/Client Component with Automatic Semantic Props
  *
@@ -375,7 +432,7 @@ type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
  * </Button>
  * ```
  */
-declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>>;
+declare const Button: React$1.FC<ItemComponentProps<ButtonSemanticProps>>;
 
 /**
  * Divider - Universal SSR/Client Component with Automatic Semantic Props
@@ -395,6 +452,18 @@ declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>
  */
 declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues>>>;
 
+/**
+ * Heading semantic props — agent-friendly text/style types (replacing the loose
+ * `any` flat props) plus the `level` alias and h1–h6 levels.
+ */
+type HeadingSemanticProps = Omit<SemanticProps<HeadingValues>, keyof TextStyleProps | "headingType"> & TextStyleProps & {
+    /** Heading level h1–h6. */
+    headingType?: HeadingLevel;
+    /** Alias for `headingType`. */
+    level?: HeadingLevel;
+    /** Heading text (or use children). */
+    text?: string;
+};
 /**
  * Heading - Universal SSR/Client Component with Semantic Props API
  *
@@ -415,7 +484,7 @@ declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues
  * <Heading values={{ headingType: "h1", color: "#222" }}>Welcome</Heading>
  * ```
  */
-declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues>>>;
+declare const Heading: React$1.FC<ItemComponentProps<HeadingSemanticProps>>;
 
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
@@ -432,9 +501,20 @@ declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues
  */
 declare const Html: React$1.FC<ItemComponentProps<SemanticProps<HtmlValues>>>;
 
-type ImageSemanticProps = SemanticProps<ImageValues> & {
+/**
+ * Image semantic props — agent-friendly `src` (plain URL string or value object)
+ * and CSS-style sizing (number/px pins, "50%" sets a percentage), replacing the
+ * loose `any` flat props.
+ */
+type ImageSemanticProps = Omit<SemanticProps<ImageValues>, "src" | "width" | "maxWidth"> & {
     /** Alt text (alias for altText) */
     alt?: string;
+    /** Image URL string, or the value object `{ url, width?, maxWidth?, ... }`. */
+    src?: ImageSrcInput;
+    /** Display width — number/px pins the image; "50%" sets a percentage width. */
+    width?: SizeInput;
+    /** Display width as a CSS value ("50%", "300px"). */
+    maxWidth?: SizeInput;
 };
 /**
  * Image - Renders an image element.
@@ -479,6 +559,14 @@ type MenuSemanticProps = SemanticProps<MenuValues> & {
  */
 declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
 
+/**
+ * Paragraph semantic props — agent-friendly text/style types (replacing the
+ * loose `any` flat props) plus the `text` shorthand (converted to textJson).
+ */
+type ParagraphSemanticProps = Omit<SemanticProps<ParagraphValues>, keyof TextStyleProps> & TextStyleProps & {
+    /** Plain-text content (or use `html` for inline formatting, or children). */
+    text?: string;
+};
 /**
  * Paragraph - Universal SSR/Client Component with Semantic Props API
  *
@@ -499,7 +587,7 @@ declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
  * <Paragraph values={{ textJson: "...", color: "#555" }} />
  * ```
  */
-declare const Paragraph: React$1.FC<ItemComponentProps<SemanticProps<ParagraphValues>>>;
+declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
 
 type SocialSemanticProps = SemanticProps<SocialValues> & {
     /** Social icons shorthand (array of {name, url}) */
@@ -578,7 +666,7 @@ type VideoSemanticProps = SemanticProps<VideoValues> & {
  */
 declare const Video: React$1.FC<ItemComponentProps<VideoSemanticProps>>;
 
-interface RowProps extends SemanticProps<RowValues> {
+type RowProps = Omit<SemanticProps<RowValues>, "padding"> & {
     children?: React__default.ReactNode;
     layout?: ColumnLayout;
     cells?: number[];
@@ -588,12 +676,14 @@ interface RowProps extends SemanticProps<RowValues> {
     index?: number;
     bodyValues?: any;
     collection?: string;
+    /** Padding — a CSS string ("0 48px", "20px 40px") or a number (px). */
+    padding?: SizeInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body */
     _config?: UnlayerConfig;
-}
+};
 declare const Row: React__default.FC<RowProps>;
 
-interface ColumnProps extends SemanticProps<ColumnValues> {
+type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding"> & {
     children?: React__default.ReactNode;
     index?: number;
     cells?: number[];
@@ -602,12 +692,14 @@ interface ColumnProps extends SemanticProps<ColumnValues> {
     mode?: RenderMode;
     className?: string;
     style?: React__default.CSSProperties;
+    /** Padding — a CSS string ("0 24px", "10px") or a number (px). */
+    padding?: SizeInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body/Row */
     _config?: UnlayerConfig;
-}
+};
 declare const Column: React__default.FC<ColumnProps>;
 
-interface BodyProps extends SemanticProps<BodyValues> {
+type BodyProps = Omit<SemanticProps<BodyValues>, "padding"> & {
     children?: React__default.ReactNode;
     mode?: RenderMode;
     className?: string;
@@ -617,7 +709,9 @@ interface BodyProps extends SemanticProps<BodyValues> {
     config?: Partial<UnlayerConfig>;
     /** Preview text shown in email client inboxes (email mode only) */
     previewText?: string;
-}
+    /** Padding — a CSS string ("0 48px", "20px") or a number (px). */
+    padding?: SizeInput;
+};
 /**
  * Body - Universal Server/Client Component
  *

package/dist/index.js

@@ -201,16 +201,53 @@ function analyzeNestedStructure(defaultValues) {
   nestedStructureCache.set(defaultValues, nestedGroups);
   return nestedGroups;
 }
+var PX_SIZE_KEYS = [
+  "fontSize",
+  "padding",
+  "containerPadding",
+  "borderRadius",
+  "letterSpacing"
+];
+function normalizeCssProps(props) {
+  if (typeof props.fontFamily === "string") {
+    const v = props.fontFamily;
+    props.fontFamily = { label: v, value: v };
+  }
+  if (typeof props.fontWeight === "string" && /^\d+$/.test(props.fontWeight.trim())) {
+    props.fontWeight = Number(props.fontWeight.trim());
+  }
+  if (typeof props.lineHeight === "number") {
+    props.lineHeight = String(props.lineHeight);
+  }
+  for (const key of PX_SIZE_KEYS) {
+    const v = props[key];
+    if (typeof v === "number") {
+      props[key] = `${v}px`;
+    } else if (typeof v === "string" && /^\d+$/.test(v.trim())) {
+      props[key] = `${v.trim()}px`;
+    }
+  }
+}
+function flattenChildrenText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(flattenChildrenText).join("");
+  if (typeof node === "object" && "props" in node) {
+    return flattenChildrenText(node.props?.children);
+  }
+  return "";
+}
 function mapSemanticProps(props, defaultValues, componentType) {
   const { children, values, ...restProps } = props;
   const userProps = { ...restProps };
   const result = values ? { ...values } : {};
   if (children !== void 0 && !result.text && !result.textJson) {
+    const textContent = typeof children === "string" ? children : flattenChildrenText(children);
     if (componentType === "Paragraph") {
-      const textContent = typeof children === "string" ? children : String(children);
       result.textJson = textToTextJson(textContent);
     } else {
-      result.text = children;
+      result.text = textContent;
     }
   }
   const textFromEscapeHatch = result.text;
@@ -236,6 +273,7 @@ function mapSemanticProps(props, defaultValues, componentType) {
       };
     }
   }
+  normalizeCssProps(userProps);
   const nestedGroups = analyzeNestedStructure(defaultValues);
   const nested = {};
   const flat = {};
@@ -270,6 +308,19 @@ function mapSemanticProps(props, defaultValues, componentType) {
       };
     }
   }
+  if (defaultValues && typeof defaultValues === "object" && "border" in defaultValues) {
+    const borderSideRe = /^border(Top|Right|Bottom|Left)(Width|Style|Color)$/;
+    const collected = {};
+    for (const key of Object.keys(final)) {
+      if (borderSideRe.test(key)) {
+        collected[key] = final[key];
+        delete final[key];
+      }
+    }
+    if (Object.keys(collected).length > 0) {
+      final.border = { ...final.border || {}, ...collected };
+    }
+  }
   return final;
 }
 function normalizeLinkValue(value) {
@@ -538,7 +589,26 @@ var DEFAULT_VALUES = {
 var Button = createItemComponent({
   name: "Button",
   defaultValues: DEFAULT_VALUES,
-  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES, "Button"),
+  propMapper: (props) => {
+    const mapped = mapSemanticProps(
+      props,
+      DEFAULT_VALUES,
+      "Button"
+    );
+    const size = mapped.size;
+    if (size && typeof size === "object" && !Array.isArray(size)) {
+      const s = size;
+      if (typeof s.width === "number") {
+        s.width = `${s.width}px`;
+      } else if (typeof s.width === "string" && /^\d+(?:\.\d+)?$/.test(s.width.trim())) {
+        s.width = `${s.width.trim()}px`;
+      }
+      if (s.width !== void 0 && s.autoWidth === void 0) {
+        s.autoWidth = false;
+      }
+    }
+    return mapped;
+  },
   displayName: "Button",
   exporters: ButtonExporters
 });
@@ -603,18 +673,46 @@ var Image = createItemComponent({
   defaultValues: DEFAULT_VALUES5,
   propMapper: (props) => {
     const { alt, src, ...rest } = props;
+    const restValues = rest.values;
+    const normalizedRest = restValues && typeof restValues.src === "string" ? { ...rest, values: { ...restValues, src: { url: restValues.src } } } : rest;
     const base = mapSemanticProps(
-      rest,
+      normalizedRest,
       DEFAULT_VALUES5,
       "Image"
     );
     if (alt !== void 0) {
       base.altText = alt;
     }
-    if (typeof src === "string") {
-      base.src = { url: src, autoWidth: true, maxWidth: "100%" };
-    } else if (src !== void 0) {
-      base.src = { ...DEFAULT_VALUES5.src, ...src };
+    const baseSrc = base.src;
+    const fromValues = baseSrc && typeof baseSrc === "object" && !Array.isArray(baseSrc) ? baseSrc : typeof baseSrc === "string" ? { url: baseSrc } : {};
+    const fromProp = typeof src === "string" ? { url: src } : src ?? {};
+    const userSrc = { ...fromValues, ...fromProp };
+    if (src !== void 0 || baseSrc !== void 0) {
+      const isStringUrl = typeof src === "string" || src === void 0 && typeof baseSrc === "string";
+      const start = isStringUrl ? { autoWidth: true, maxWidth: "100%" } : { ...DEFAULT_VALUES5.src };
+      const merged = { ...start, ...userSrc };
+      const pctRe = /^\d+(?:\.\d+)?%$/;
+      if (typeof merged.width === "string") {
+        const t = merged.width.trim();
+        if (pctRe.test(t)) {
+          if (userSrc.maxWidth === void 0) merged.maxWidth = t;
+          delete merged.width;
+        } else {
+          const px = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(t);
+          if (px) merged.width = parseFloat(px[1]);
+        }
+      }
+      const displayPct = typeof merged.maxWidth === "string" && pctRe.test(merged.maxWidth.trim()) ? merged.maxWidth.trim() : void 0;
+      if (userSrc.autoWidth === void 0) {
+        if (displayPct && displayPct !== "100%") {
+          merged.autoWidth = false;
+          merged.maxWidth = displayPct;
+        } else {
+          merged.autoWidth = true;
+          merged.maxWidth = "100%";
+        }
+      }
+      base.src = merged;
     }
     return base;
   },
@@ -725,25 +823,37 @@ var Table = createItemComponent({
   name: "Table",
   defaultValues: DEFAULT_VALUES9,
   propMapper: (props) => {
-    const { headers, data, ...rest } = props;
-    if (headers || data) {
+    const { headers, data, columns, rows, ...rest } = props;
+    if (headers || data || typeof columns === "number" || typeof rows === "number") {
       const base = mapSemanticProps(
         rest,
         DEFAULT_VALUES9,
         "Table"
       );
+      const colCount = headers ? headers.length : typeof columns === "number" ? columns : data?.[0]?.length ?? 0;
+      const blankCells = (n) => Array.from({ length: n }, () => ({ text: "", width: 0 }));
       const tableHeaders = headers ? [{ cells: headers.map((text) => ({ text, width: 0 })), height: 0 }] : [];
       const tableRows = data ? data.map((row) => ({
         cells: row.map((text) => ({ text, width: 0 })),
         height: 0
-      })) : [];
+      })) : typeof rows === "number" ? (
+        // No data: build an empty grid sized by `columns` × `rows`.
+        Array.from({ length: rows }, () => ({
+          cells: blankCells(colCount),
+          height: 0
+        }))
+      ) : [];
       base.table = { headers: tableHeaders, rows: tableRows, footers: [] };
+      if (headers || typeof columns === "number") {
+        base.columns = colCount;
+      }
       if (headers) {
-        base.columns = headers.length;
         base.enableHeader = true;
       }
       if (data) {
         base.rows = data.length;
+      } else if (typeof rows === "number") {
+        base.rows = rows;
       }
       return base;
     }
@@ -1612,6 +1722,10 @@ function processBody(element, counters) {
   const semanticProps = extractSemanticProps2(element.props);
   const mapped = mapSemanticProps(semanticProps, BODY_DEFAULTS, "Body");
   const values = mergeValues(BODY_DEFAULTS, mapped);
+  const previewText = element.props.previewText;
+  if (previewText !== void 0) {
+    values.preheaderText = previewText;
+  }
   const valuesWithMeta = {
     ...values,
     _meta: {