@comet/mail-react 9.0.0-beta.3 → 9.0.0-beta.5

package/lib/components/image/MjmlImage.d.ts

@@ -0,0 +1,10 @@
+import { type IMjmlImageProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+export type MjmlImageProps = IMjmlImageProps;
+/**
+ * Renders an MJML image that adapts to the viewport width below the default breakpoint.
+ *
+ * Must be placed within an `MjmlColumn`. For raw HTML context (e.g. inside `MjmlRaw`),
+ * use `HtmlImage` instead.
+ */
+export declare function MjmlImage({ className, ...restProps }: MjmlImageProps): ReactNode;

package/lib/components/image/MjmlImage.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlImage as BaseMjmlImage } from "@faire/mjml-react";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { css } from "../../utils/css.js";
+/**
+ * Renders an MJML image that adapts to the viewport width below the default breakpoint.
+ *
+ * Must be placed within an `MjmlColumn`. For raw HTML context (e.g. inside `MjmlRaw`),
+ * use `HtmlImage` instead.
+ */
+export function MjmlImage({ className, ...restProps }) {
+    return _jsx(BaseMjmlImage, { className: clsx("mjmlImage", className), ...restProps });
+}
+// MJML inlines a fixed `height` on the inner <img>; !important overrides it for responsive scaling.
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .mjmlImage img {
+                height: auto !important;
+            }
+        }
+    `);

package/lib/components/image/__stories__/HtmlImage.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HtmlImage } from "../HtmlImage.js";
+type Story = StoryObj<typeof HtmlImage>;
+declare const config: Meta<typeof HtmlImage>;
+export default config;
+export declare const Default: Story;
+export declare const FullWidth: Story;

package/lib/components/image/__stories__/HtmlImage.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlColumn, MjmlRaw } from "@faire/mjml-react";
+import { defaultTheme } from "../../../theme/defaultTheme.js";
+import { getDefaultFromResponsiveValue } from "../../../theme/responsiveValue.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { HtmlImage } from "../HtmlImage.js";
+const sectionIndent = getDefaultFromResponsiveValue(defaultTheme.sizes.contentIndentation);
+const sectionInnerWidth = defaultTheme.sizes.bodyWidth - 2 * sectionIndent;
+const config = {
+    title: "Components/HtmlImage",
+    component: HtmlImage,
+    tags: ["autodocs"],
+    args: {
+        width: sectionInnerWidth,
+        height: 268,
+        alt: "Placeholder image",
+    },
+    argTypes: {
+        src: { control: false },
+    },
+};
+export default config;
+export const Default = {
+    render: (args) => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlImage, { ...args, src: `https://picsum.photos/seed/html-image/${args.width}/${args.height}` }) }) }) })),
+};
+export const FullWidth = {
+    args: {
+        width: defaultTheme.sizes.bodyWidth,
+        height: 300,
+    },
+    render: (args) => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlImage, { ...args, src: `https://picsum.photos/seed/html-image-full-width/${args.width}/${args.height}` }) }) }) })),
+};

package/lib/components/image/__stories__/MjmlImage.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MjmlImage } from "../MjmlImage.js";
+type Story = StoryObj<typeof MjmlImage>;
+declare const config: Meta<typeof MjmlImage>;
+export default config;
+export declare const Default: Story;
+export declare const FullWidth: Story;

package/lib/components/image/__stories__/MjmlImage.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlColumn } from "@faire/mjml-react";
+import { defaultTheme } from "../../../theme/defaultTheme.js";
+import { getDefaultFromResponsiveValue } from "../../../theme/responsiveValue.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { MjmlImage } from "../MjmlImage.js";
+const sectionIndent = getDefaultFromResponsiveValue(defaultTheme.sizes.contentIndentation);
+const sectionInnerWidth = defaultTheme.sizes.bodyWidth - 2 * sectionIndent;
+const config = {
+    title: "Components/MjmlImage",
+    component: MjmlImage,
+    tags: ["autodocs"],
+    args: {
+        width: sectionInnerWidth,
+        height: 268,
+        alt: "Placeholder image",
+    },
+    argTypes: {
+        src: { control: false },
+    },
+};
+export default config;
+export const Default = {
+    render: (args) => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlImage, { ...args, src: `https://picsum.photos/seed/mjml-image/${args.width}/${args.height}` }) }) })),
+};
+export const FullWidth = {
+    args: {
+        width: defaultTheme.sizes.bodyWidth,
+        height: 300,
+    },
+    render: (args) => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlImage, { ...args, src: `https://picsum.photos/seed/mjml-image-full-width/${args.width}/${args.height}` }) }) })),
+};

package/lib/components/mailRoot/MjmlMailRoot.d.ts

@@ -1,4 +1,5 @@
 import type { PropsWithChildren, ReactNode } from "react";
+import { type Config } from "../../config/ConfigProvider.js";
 import type { Theme } from "../../theme/themeTypes.js";
 type MjmlMailRootProps = PropsWithChildren<{
     /**
@@ -6,17 +7,25 @@ type MjmlMailRootProps = PropsWithChildren<{
      * (equivalent to `createTheme()`) is used.
      */
     theme?: Theme;
+    /** Extra content appended inside the built-in `<MjmlAttributes>`, after the default `<MjmlAll>`. */
+    attributes?: ReactNode;
+    /** Extra content appended inside `<MjmlHead>`, after the registered styles block. */
+    head?: ReactNode;
+    /**
+     * Configuration to make available to descendants via `useConfig`.
+     */
+    config?: Config;
 }>;
 /**
  * The root element for email templates. Renders the standard MJML email skeleton
  * (`<Mjml>`, `<MjmlHead>`, `<MjmlBody>`) with `<MjmlAll padding={0} />` as the
  * default attribute so all components start with zero padding.
  *
- * Accepts an optional `theme` prop that controls the body width and responsive
- * breakpoints. The theme is made available to all descendant components via
- * `useTheme()`.
+ * Accepts an optional `theme` prop that controls the body width and responsive breakpoints. The theme is made available to all descendant components via `useTheme()`.
+ *
+ * Accepts an optional `config` prop containing configuration. When provided, the value is made available to descendants via `useConfig()`.
  *
  * Direct children should be section-level components (e.g. `MjmlSection`).
  */
-export declare function MjmlMailRoot({ theme: themeProp, children }: MjmlMailRootProps): ReactNode;
+export declare function MjmlMailRoot({ theme: themeProp, attributes, head, config, children }: MjmlMailRootProps): ReactNode;
 export {};

package/lib/components/mailRoot/MjmlMailRoot.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Mjml, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlHead } from "@faire/mjml-react";
+import { ConfigProvider } from "../../config/ConfigProvider.js";
 import { Styles } from "../../styles/Styles.js";
 import { createTheme } from "../../theme/createTheme.js";
 import { ThemeProvider } from "../../theme/ThemeProvider.js";
@@ -8,13 +9,17 @@ import { ThemeProvider } from "../../theme/ThemeProvider.js";
  * (`<Mjml>`, `<MjmlHead>`, `<MjmlBody>`) with `<MjmlAll padding={0} />` as the
  * default attribute so all components start with zero padding.
  *
- * Accepts an optional `theme` prop that controls the body width and responsive
- * breakpoints. The theme is made available to all descendant components via
- * `useTheme()`.
+ * Accepts an optional `theme` prop that controls the body width and responsive breakpoints. The theme is made available to all descendant components via `useTheme()`.
+ *
+ * Accepts an optional `config` prop containing configuration. When provided, the value is made available to descendants via `useConfig()`.
  *
  * Direct children should be section-level components (e.g. `MjmlSection`).
  */
-export function MjmlMailRoot({ theme: themeProp, children }) {
+export function MjmlMailRoot({ theme: themeProp, attributes, head, config, children }) {
     const theme = themeProp ?? createTheme();
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Mjml, { children: [_jsxs(MjmlHead, { children: [_jsx(MjmlAttributes, { children: _jsx(MjmlAll, { padding: "0", fontFamily: theme.text.fontFamily }) }), _jsx(MjmlBreakpoint, { width: `${theme.breakpoints.mobile.value}px` }), _jsx(Styles, {})] }), _jsx(MjmlBody, { width: theme.sizes.bodyWidth, backgroundColor: theme.colors.background.body, children: children })] }) }));
+    const content = (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Mjml, { children: [_jsxs(MjmlHead, { children: [_jsxs(MjmlAttributes, { children: [_jsx(MjmlAll, { padding: "0", fontFamily: theme.text.fontFamily }), attributes] }), _jsx(MjmlBreakpoint, { width: `${theme.breakpoints.mobile.value}px` }), _jsx(Styles, {}), head] }), _jsx(MjmlBody, { width: theme.sizes.bodyWidth, backgroundColor: theme.colors.background.body, children: children })] }) }));
+    if (config) {
+        return _jsx(ConfigProvider, { config: config, children: content });
+    }
+    return content;
 }

package/lib/components/text/textStyles.d.ts

@@ -1,6 +1,4 @@
-import type { TextVariantStyles, Theme } from "../../theme/themeTypes.js";
-type StylePropertyKey = Exclude<keyof TextVariantStyles, "bottomSpacing">;
-export declare const textStyleCssProperties: ReadonlyArray<[StylePropertyKey, string]>;
+import type { Theme } from "../../theme/themeTypes.js";
 interface GenerateResponsiveTextCssOptions {
     /** Selector for text style overrides, given a variant name. */
     styleSelector: (variantName: string) => string;

package/lib/components/text/textStyles.js

@@ -1,6 +1,6 @@
 import { getResponsiveOverrides } from "../../theme/responsiveValue.js";
 import { css } from "../../utils/css.js";
-export const textStyleCssProperties = [
+const textStyleCssProperties = [
     ["fontFamily", "font-family"],
     ["fontSize", "font-size"],
     ["fontWeight", "font-weight"],

package/lib/config/ConfigProvider.d.ts

@@ -0,0 +1,43 @@
+import { type PropsWithChildren, type ReactNode } from "react";
+export interface PixelImageBlockConfig {
+    /**
+     * Image widths supported by the API, used to pick a render width.
+     * Generally derived from `cometConfig.images.imageSizes` and `cometConfig.images.deviceSizes`.
+     */
+    validSizes: number[];
+    /**
+     * Origin to prefix relative image URLs with, e.g. `http://localhost:3000`.
+     */
+    baseUrl: string;
+}
+/**
+ * Configuration context for mails.
+ *
+ * Add custom keys via TypeScript interface declaration merging:
+ *
+ * ```ts
+ * declare module "@comet/mail-react" {
+ *     interface Config {
+ *         myKey?: { foo: string };
+ *     }
+ * }
+ * ```
+ */
+export interface Config {
+    /**
+     * Configuration consumed by `HtmlPixelImageBlock` and `MjmlPixelImageBlock`.
+     * Required when those components are rendered.
+     */
+    pixelImageBlock?: PixelImageBlockConfig;
+}
+/**
+ * Places a `Config` value into a React context, making it available to all
+ * descendants via `useConfig`.
+ */
+export declare function ConfigProvider({ config, children }: PropsWithChildren<{
+    config: Config;
+}>): ReactNode;
+/**
+ * Returns the nearest `Config` from context, defined by `ConfigProvider` or by the `config` prop on `MjmlMailRoot`.
+ */
+export declare function useConfig(): Config;

package/lib/config/ConfigProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ConfigContext = createContext({});
+/**
+ * Places a `Config` value into a React context, making it available to all
+ * descendants via `useConfig`.
+ */
+export function ConfigProvider({ config, children }) {
+    return _jsx(ConfigContext.Provider, { value: config, children: children });
+}
+/**
+ * Returns the nearest `Config` from context, defined by `ConfigProvider` or by the `config` prop on `MjmlMailRoot`.
+ */
+export function useConfig() {
+    return useContext(ConfigContext);
+}

package/lib/config/ConfigProvider.test.d.ts

@@ -0,0 +1,8 @@
+declare module "./ConfigProvider.js" {
+    interface Config {
+        testKey?: {
+            value: string;
+        };
+    }
+}
+export {};

package/lib/config/ConfigProvider.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlColumn, MjmlText } from "@faire/mjml-react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { MjmlMailRoot } from "../components/mailRoot/MjmlMailRoot.js";
+import { MjmlSection } from "../components/section/MjmlSection.js";
+import { renderMailHtml } from "../server/renderMailHtml.js";
+import { ConfigProvider, useConfig } from "./ConfigProvider.js";
+function Probe() {
+    const config = useConfig();
+    return _jsx("span", { "data-config-value": config.testKey?.value ?? "no-config" });
+}
+describe("useConfig", () => {
+    it("returns an empty Config when no ConfigProvider is mounted", () => {
+        const html = renderToStaticMarkup(_jsx(Probe, {}));
+        expect(html).toContain('data-config-value="no-config"');
+    });
+});
+describe("MjmlMailRoot config integration", () => {
+    it("makes the config value available to descendants via useConfig", () => {
+        const { html, mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { config: { testKey: { value: "from-root" } }, children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: _jsx(Probe, {}) }) }) }) }));
+        expect(mjmlWarnings).toEqual([]);
+        expect(html).toContain('data-config-value="from-root"');
+    });
+    it("does not shadow an outer ConfigProvider when no config prop is passed", () => {
+        const { html, mjmlWarnings } = renderMailHtml(_jsx(ConfigProvider, { config: { testKey: { value: "from-outer" } }, children: _jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: _jsx(Probe, {}) }) }) }) }) }));
+        expect(mjmlWarnings).toEqual([]);
+        expect(html).toContain('data-config-value="from-outer"');
+    });
+});

package/lib/index.d.ts

@@ -4,6 +4,18 @@ export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
 export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
 export type { SupportedBlocks } from "./blocks/factories/types.js";
 export type { PropsWithData } from "./blocks/helpers/PropsWithData.js";
+export type { HtmlPixelImageBlockProps } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export { HtmlPixelImageBlock } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export type { MjmlPixelImageBlockProps } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export { MjmlPixelImageBlock } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export type { HtmlDividerProps } from "./components/divider/HtmlDivider.js";
+export { HtmlDivider } from "./components/divider/HtmlDivider.js";
+export type { MjmlDividerProps } from "./components/divider/MjmlDivider.js";
+export { MjmlDivider } from "./components/divider/MjmlDivider.js";
+export type { HtmlImageProps } from "./components/image/HtmlImage.js";
+export { HtmlImage } from "./components/image/HtmlImage.js";
+export type { MjmlImageProps } from "./components/image/MjmlImage.js";
+export { MjmlImage } from "./components/image/MjmlImage.js";
 export type { HtmlInlineLinkProps } from "./components/inlineLink/HtmlInlineLink.js";
 export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
 export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
@@ -15,14 +27,15 @@ export type { MjmlTextProps } from "./components/text/MjmlText.js";
 export { MjmlText } from "./components/text/MjmlText.js";
 export type { MjmlWrapperProps } from "./components/wrapper/MjmlWrapper.js";
 export { MjmlWrapper } from "./components/wrapper/MjmlWrapper.js";
+export { type Config, ConfigProvider, type PixelImageBlockConfig, useConfig } from "./config/ConfigProvider.js";
 export { registerStyles } from "./styles/registerStyles.js";
 export { createBreakpoint } from "./theme/createBreakpoint.js";
 export { createTheme } from "./theme/createTheme.js";
 export type { ResponsiveValue } from "./theme/responsiveValue.js";
 export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/responsiveValue.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
-export type { TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeColors, ThemeSizes, ThemeText, } from "./theme/themeTypes.js";
+export type { DividerStyles, DividerVariants, DividerVariantStyles, TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeColors, ThemeDivider, ThemeSizes, ThemeText, } from "./theme/themeTypes.js";
 export { css } from "./utils/css.js";
-export { Mjml, MjmlAccordion, MjmlAccordionElement, type IMjmlAccordionElementProps as MjmlAccordionElementProps, type IMjmlAccordionProps as MjmlAccordionProps, MjmlAccordionText, type IMjmlAccordionTextProps as MjmlAccordionTextProps, MjmlAccordionTitle, type IMjmlAccordionTitleProps as MjmlAccordionTitleProps, MjmlAll, type IMjmlAllProps as MjmlAllProps, MjmlAttributes, type IMjmlAttributesProps as MjmlAttributesProps, MjmlBody, type IMjmlBodyProps as MjmlBodyProps, MjmlBreakpoint, type IMjmlBreakpointProps as MjmlBreakpointProps, MjmlButton, type IMjmlButtonProps as MjmlButtonProps, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, MjmlDivider, type IMjmlDividerProps as MjmlDividerProps, MjmlFont, type IMjmlFontProps as MjmlFontProps, MjmlGroup, type IMjmlGroupProps as MjmlGroupProps, MjmlHead, type IMjmlHeadProps as MjmlHeadProps, MjmlHero, type IMjmlHeroProps as MjmlHeroProps, MjmlHtmlAttribute, type IMjmlHtmlAttributeProps as MjmlHtmlAttributeProps, MjmlHtmlAttributes, type IMjmlHtmlAttributesProps as MjmlHtmlAttributesProps, MjmlImage, type IMjmlImageProps as MjmlImageProps, MjmlInclude, type IMjmlIncludeProps as MjmlIncludeProps, MjmlNavbar, MjmlNavbarLink, type IMjmlNavbarLinkProps as MjmlNavbarLinkProps, type IMjmlNavbarProps as MjmlNavbarProps, MjmlPreview, type IMjmlPreviewProps as MjmlPreviewProps, type IMjmlProps as MjmlProps, MjmlRaw, type IMjmlRawProps as MjmlRawProps, MjmlSelector, type IMjmlSelectorProps as MjmlSelectorProps, MjmlSocial, MjmlSocialElement, type IMjmlSocialElementProps as MjmlSocialElementProps, type IMjmlSocialProps as MjmlSocialProps, MjmlSpacer, type IMjmlSpacerProps as MjmlSpacerProps, MjmlStyle, type IMjmlStyleProps as MjmlStyleProps, MjmlTable, type IMjmlTableProps as MjmlTableProps, MjmlTitle, type IMjmlTitleProps as MjmlTitleProps, } from "@faire/mjml-react";
+export { Mjml, MjmlAccordion, MjmlAccordionElement, type IMjmlAccordionElementProps as MjmlAccordionElementProps, type IMjmlAccordionProps as MjmlAccordionProps, MjmlAccordionText, type IMjmlAccordionTextProps as MjmlAccordionTextProps, MjmlAccordionTitle, type IMjmlAccordionTitleProps as MjmlAccordionTitleProps, MjmlAll, type IMjmlAllProps as MjmlAllProps, MjmlAttributes, type IMjmlAttributesProps as MjmlAttributesProps, MjmlBody, type IMjmlBodyProps as MjmlBodyProps, MjmlBreakpoint, type IMjmlBreakpointProps as MjmlBreakpointProps, MjmlButton, type IMjmlButtonProps as MjmlButtonProps, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, MjmlFont, type IMjmlFontProps as MjmlFontProps, MjmlGroup, type IMjmlGroupProps as MjmlGroupProps, MjmlHead, type IMjmlHeadProps as MjmlHeadProps, MjmlHero, type IMjmlHeroProps as MjmlHeroProps, MjmlHtmlAttribute, type IMjmlHtmlAttributeProps as MjmlHtmlAttributeProps, MjmlHtmlAttributes, type IMjmlHtmlAttributesProps as MjmlHtmlAttributesProps, MjmlInclude, type IMjmlIncludeProps as MjmlIncludeProps, MjmlNavbar, MjmlNavbarLink, type IMjmlNavbarLinkProps as MjmlNavbarLinkProps, type IMjmlNavbarProps as MjmlNavbarProps, MjmlPreview, type IMjmlPreviewProps as MjmlPreviewProps, type IMjmlProps as MjmlProps, MjmlRaw, type IMjmlRawProps as MjmlRawProps, MjmlSelector, type IMjmlSelectorProps as MjmlSelectorProps, MjmlSocial, MjmlSocialElement, type IMjmlSocialElementProps as MjmlSocialElementProps, type IMjmlSocialProps as MjmlSocialProps, MjmlSpacer, type IMjmlSpacerProps as MjmlSpacerProps, MjmlStyle, type IMjmlStyleProps as MjmlStyleProps, MjmlTable, type IMjmlTableProps as MjmlTableProps, MjmlTitle, type IMjmlTitleProps as MjmlTitleProps, } from "@faire/mjml-react";
 export { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";
 export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/index.js

@@ -2,18 +2,25 @@ export { BlocksBlock } from "./blocks/factories/BlocksBlock.js";
 export { ListBlock } from "./blocks/factories/ListBlock.js";
 export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
 export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
+export { HtmlPixelImageBlock } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export { MjmlPixelImageBlock } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export { HtmlDivider } from "./components/divider/HtmlDivider.js";
+export { MjmlDivider } from "./components/divider/MjmlDivider.js";
+export { HtmlImage } from "./components/image/HtmlImage.js";
+export { MjmlImage } from "./components/image/MjmlImage.js";
 export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
 export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
 export { MjmlSection } from "./components/section/MjmlSection.js";
 export { HtmlText } from "./components/text/HtmlText.js";
 export { MjmlText } from "./components/text/MjmlText.js";
 export { MjmlWrapper } from "./components/wrapper/MjmlWrapper.js";
+export { ConfigProvider, useConfig } from "./config/ConfigProvider.js";
 export { registerStyles } from "./styles/registerStyles.js";
 export { createBreakpoint } from "./theme/createBreakpoint.js";
 export { createTheme } from "./theme/createTheme.js";
 export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/responsiveValue.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { css } from "./utils/css.js";
-export { Mjml, MjmlAccordion, MjmlAccordionElement, MjmlAccordionText, MjmlAccordionTitle, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlButton, MjmlCarousel, MjmlCarouselImage, MjmlClass, MjmlColumn, MjmlDivider, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, MjmlImage, MjmlInclude, MjmlNavbar, MjmlNavbarLink, MjmlPreview, MjmlRaw, MjmlSelector, MjmlSocial, MjmlSocialElement, MjmlSpacer, MjmlStyle, MjmlTable, MjmlTitle, } from "@faire/mjml-react";
+export { Mjml, MjmlAccordion, MjmlAccordionElement, MjmlAccordionText, MjmlAccordionTitle, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlButton, MjmlCarousel, MjmlCarouselImage, MjmlClass, MjmlColumn, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, MjmlInclude, MjmlNavbar, MjmlNavbarLink, MjmlPreview, MjmlRaw, MjmlSelector, MjmlSocial, MjmlSocialElement, MjmlSpacer, MjmlStyle, MjmlTable, MjmlTitle, } from "@faire/mjml-react";
 export { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";
 export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/server/renderMailHtml.test.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MjmlColumn, MjmlText } from "@faire/mjml-react";
+import { MjmlClass, MjmlColumn, MjmlText, MjmlTitle } from "@faire/mjml-react";
 import { describe, expect, it } from "vitest";
 import { MjmlMailRoot } from "../components/mailRoot/MjmlMailRoot.js";
 import { MjmlSection } from "../components/section/MjmlSection.js";
@@ -36,6 +36,15 @@ describe("server/renderMailHtml", () => {
         expect(html).toContain(".themed");
         expect(html).toContain("width: 600px");
     });
+    it("renders the head slot content inside <mj-head>", () => {
+        const titleText = "Welcome to Comet";
+        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { head: _jsx(MjmlTitle, { children: titleText }), children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Hello" }) }) }) }));
+        expect(html).toContain(`<title>${titleText}</title>`);
+    });
+    it("renders the attributes slot content inside <mj-attributes>", () => {
+        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { attributes: _jsx(MjmlClass, { name: "cta", color: "#FF0000" }), children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { mjmlClass: "cta", children: "Hello" }) }) }) }));
+        expect(html).toContain("color:#FF0000");
+    });
     it("produces no MJML warnings for a valid component tree", () => {
         const { mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "No warnings expected" }) }) }) }));
         expect(mjmlWarnings).toEqual([]);

package/lib/theme/createTheme.d.ts

@@ -1,8 +1,9 @@
-import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeColors, ThemeSizes, ThemeText } from "./themeTypes.js";
+import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeColors, ThemeDivider, ThemeSizes, ThemeText } from "./themeTypes.js";
 type CreateThemeOverrides = {
     sizes?: Partial<ThemeSizes>;
     breakpoints?: Partial<ThemeBreakpoints>;
     text?: Partial<ThemeText>;
+    divider?: Partial<ThemeDivider>;
     colors?: {
         background?: Partial<ThemeBackgroundColors>;
     } & Partial<Omit<ThemeColors, "background">>;

package/lib/theme/createTheme.js

@@ -21,6 +21,7 @@ export function createTheme(overrides) {
             ...overrides?.breakpoints,
         },
         text: { ...defaultTheme.text, ...overrides?.text },
+        divider: { ...defaultTheme.divider, ...overrides?.divider },
         colors: {
             ...defaultTheme.colors,
             ...overrides?.colors,

package/lib/theme/defaultTheme.js

@@ -1,3 +1,4 @@
+import { defaultDividerStyles } from "../components/divider/defaultDividerStyles.js";
 import { createBreakpoint } from "./createBreakpoint.js";
 export const defaultTheme = {
     sizes: {
@@ -14,6 +15,7 @@ export const defaultTheme = {
         lineHeight: "20px",
         bottomSpacing: "16px",
     },
+    divider: defaultDividerStyles,
     colors: {
         background: {
             body: "#F2F2F2",

package/lib/theme/themeTypes.d.ts

@@ -46,6 +46,46 @@ export interface ThemeText extends TextStyles {
     defaultVariant?: VariantName;
     variants?: VariantsRecord;
 }
+/**
+ * Single source of truth for divider style property names and their value types.
+ * Both `DividerStyles` and `DividerVariantStyles` are derived from this interface.
+ */
+interface DividerStyleMap {
+    height: number;
+    backgroundColor: string;
+    backgroundImage: string;
+}
+/** Base divider styles where each property holds a plain value. */
+export type DividerStyles = {
+    [K in keyof DividerStyleMap]?: DividerStyleMap[K];
+};
+/** Variant divider styles where each property supports responsive values. */
+export type DividerVariantStyles = {
+    [K in keyof DividerStyleMap]?: ResponsiveValue<DividerStyleMap[K]>;
+};
+/**
+ * Defines the variants available on the `MjmlDivider` and `HtmlDivider` components.
+ *
+ * ```ts
+ * declare module "@comet/mail-react" {
+ *     interface DividerVariants {
+ *         thin: true;
+ *         thick: true;
+ *     }
+ * }
+ * ```
+ */
+export interface DividerVariants {
+}
+type DividerVariantsRecord = keyof DividerVariants extends never ? Record<string, DividerVariantStyles> : {
+    [K in keyof DividerVariants]?: DividerVariantStyles;
+};
+export type DividerVariantName = keyof DividerVariants extends never ? string : keyof DividerVariants;
+/** Theme configuration for divider styles, variants, and default variant. */
+export interface ThemeDivider extends DividerStyles {
+    defaultVariant?: DividerVariantName;
+    variants?: DividerVariantsRecord;
+}
 /**
  * A resolved breakpoint with its numeric value and a ready-to-use media query
  * string that targets viewports narrower than this breakpoint.
@@ -101,6 +141,7 @@ export interface Theme {
     sizes: ThemeSizes;
     breakpoints: ThemeBreakpoints;
     text: ThemeText;
+    divider: ThemeDivider;
     colors: ThemeColors;
 }
 export {};

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@comet/mail-react",
-  "version": "9.0.0-beta.3",
+  "version": "9.0.0-beta.5",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
+  "repository": {
+    "directory": "packages/mail-react",
+    "type": "git",
+    "url": "https://github.com/vivid-planet/comet"
+  },
   "exports": {
     ".": "./lib/index.js",
     "./client": "./lib/client/index.js",
     "./server": "./lib/server/index.js",
     "./storybook": "./lib/storybook/index.js"
   },
+  "sideEffects": false,
   "files": [
     "lib/*"
   ],
@@ -20,25 +26,24 @@
     "mjml-browser": "^4.18.0"
   },
   "devDependencies": {
-    "@fission-ai/openspec": "^1.2.0",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@types/mjml": "^4.7.4",
     "@types/mjml-browser": "^4.15.0",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "chokidar-cli": "^3.0.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "npm-run-all2": "^8.0.4",
     "prettier": "^3.6.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "rimraf": "^6.1.2",
     "storybook": "^10.3.5",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@comet/cli": "9.0.0-beta.3",
-    "@comet/eslint-config": "9.0.0-beta.3"
+    "@comet/eslint-config": "9.0.0-beta.5",
+    "@comet/cli": "9.0.0-beta.5"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -71,7 +76,6 @@
     "lint:fix:prettier": "pnpm run lint:prettier --write",
     "lint:prettier": "pnpm exec prettier --check '*.{ts,js,json,md,yml,yaml}'",
     "lint:tsc": "tsc",
-    "openspec:install-skills": "openspec init --tools github-copilot,cursor,claude",
     "storybook": "storybook dev -p 6066 --no-open",
     "test": "vitest --run",
     "test:watch": "vitest --watch"