@trycourier/react-designer 0.7.0 → 0.8.0

package/dist/components/Providers/TemplateProvider.d.ts

@@ -1,4 +1,5 @@
 import type { BasicProviderProps, UploadImageFunction } from "./Providers.types";
+import type { VariableValidationConfig } from "@/types/validation.types";
 export declare const useTemplateStore: () => {
     store: {
         get: <Value>(atom: import("jotai").Atom<Value>) => Value;
@@ -16,6 +17,14 @@ type TemplateProviderProps = BasicProviderProps & {
     uploadImage?: UploadImageFunction;
     variables?: Record<string, unknown>;
     disableVariablesAutocomplete?: boolean;
+    variableValidation?: VariableValidationConfig;
+    sampleData?: Record<string, unknown>;
+    /**
+     * Whether the designer should render its own Sonner `<Toaster />`.
+     * Set to `false` when the host app already provides one to avoid duplicate toasts.
+     * @default true
+     */
+    renderToaster?: boolean;
 };
 export declare const TemplateProvider: import("react").NamedExoticComponent<TemplateProviderProps>;
 export {};

package/dist/components/Providers/store.d.ts

@@ -2,6 +2,7 @@ import type { ElementalContent } from "@/types/elemental.types";
 import type { TemplateError } from "@/lib/utils/errors";
 import type { ContentTransformer } from "../TemplateEditor/store";
 import type { DuplicateTemplateOptions, DuplicateTemplateResult } from "./api/template";
+import type { BrandColor } from "@/lib/utils/brandColors";
 export type MessageRoutingMethod = "all" | "single";
 export type MessageRoutingChannel = string | MessageRouting;
 export interface MessageRouting {
@@ -63,6 +64,11 @@ export interface TenantData {
                                 };
                             };
                         };
+                        templateOverride?: {
+                            backgroundColor?: string;
+                            blocksBackgroundColor?: string;
+                            footerBackgroundColor?: string;
+                        };
                     };
                     [key: string]: unknown;
                 };
@@ -93,6 +99,8 @@ export declare const routingAtom: import("jotai").PrimitiveAtom<MessageRouting>
 export declare const templateDataAtom: import("jotai").PrimitiveAtom<TenantData | null> & {
     init: TenantData | null;
 };
+export declare const brandColorsAtom: import("jotai").Atom<BrandColor[]>;
+export declare const brandColorMapAtom: import("jotai").Atom<Record<string, string>>;
 export declare const isTemplateLoadingAtom: import("jotai").PrimitiveAtom<boolean | null> & {
     init: boolean | null;
 };
@@ -108,6 +116,9 @@ export declare const templateErrorAtom: import("jotai").PrimitiveAtom<TemplateEr
 export declare const brandApplyAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
+export declare const renderToasterAtom: import("jotai").PrimitiveAtom<boolean> & {
+    init: boolean;
+};
 export interface TemplateActions {
     getTemplate: (options?: {
         includeBrand?: boolean;

package/dist/components/TemplateEditor/Channels/Email/Email.d.ts

@@ -4,6 +4,7 @@ import type { ElementalNode } from "@/types/elemental.types";
 import type { Node } from "@tiptap/pm/model";
 import type { Editor } from "@tiptap/react";
 import type { HTMLAttributes } from "react";
+import type { FontEntry } from "@/types/font.types";
 import type { MessageRouting, TenantData } from "../../../Providers/store";
 import { type VisibleBlockItem } from "../../store";
 import type { TemplateEditorProps } from "../../TemplateEditor";
@@ -20,7 +21,7 @@ interface BrandSettingsData {
     mediumLink?: string;
     xLink?: string;
 }
-export interface EmailProps extends Pick<TemplateEditorProps, "hidePublish" | "brandEditor" | "channels" | "variables" | "disableVariablesAutocomplete" | "theme" | "routing" | "value" | "colorScheme">, Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange"> {
+export interface EmailProps extends Pick<TemplateEditorProps, "hidePublish" | "brandEditor" | "channels" | "variables" | "disableVariablesAutocomplete" | "theme" | "routing" | "value" | "colorScheme" | "readOnly">, Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange"> {
     isLoading?: boolean;
     headerRenderer?: ({ hidePublish, channels, routing, }: {
         hidePublish?: boolean;
@@ -28,7 +29,8 @@ export interface EmailProps extends Pick<TemplateEditorProps, "hidePublish" | "b
         routing?: MessageRouting;
     }) => React.ReactNode;
     hidePreviewPanelExitButton?: boolean;
-    render?: ({ subject, handleSubjectChange, selectedNode, setSelectedNode, previewMode, templateEditor, ref, isBrandApply, brandSettings, items, content, syncEditorItems, brandEditorContent, templateData, togglePreviewMode, }: {
+    fonts?: FontEntry[];
+    render?: ({ subject, handleSubjectChange, selectedNode, setSelectedNode, previewMode, templateEditor, ref, isBrandApply, brandSettings, items, content, syncEditorItems, brandEditorContent, templateData, togglePreviewMode, readOnly, emailBackgroundColor, emailContentBodyColor, handleEmailColorChange, emailFontFamily, handleFontFamilyChange, }: {
         subject: string | null;
         handleSubjectChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
         selectedNode: Node | null;
@@ -45,6 +47,14 @@ export interface EmailProps extends Pick<TemplateEditorProps, "hidePublish" | "b
         templateData: TenantData | null;
         togglePreviewMode: (mode: "desktop" | "mobile" | undefined) => void;
         hidePreviewPanelExitButton?: boolean;
+        readOnly: boolean;
+        emailBackgroundColor: string;
+        emailContentBodyColor: string;
+        handleEmailColorChange: (key: "background_color" | "content_body_color", value: string) => void;
+        emailFontFamily: string;
+        emailFallbackFont: string;
+        handleFontFamilyChange: (fontFamily: string) => void;
+        handleFallbackChange: (fallbackName: string) => void;
     }) => React.ReactNode;
 }
 type UniqueIdentifier = string | number;

package/dist/components/TemplateEditor/Channels/Email/EmailLayout.d.ts

@@ -1,9 +1,11 @@
 import { type HTMLAttributes } from "react";
 import { type EmailProps } from "./Email";
+import type { FontEntry } from "@/types/font.types";
 export declare const EmailEditorContainer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const EmailEditorMain: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     previewMode: "desktop" | "mobile" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export interface EmailLayoutProps extends EmailProps {
+    fonts?: FontEntry[];
 }
-export declare const EmailLayout: ({ variables, disableVariablesAutocomplete, theme, isLoading, hidePublish, channels, brandEditor, routing, colorScheme, ...rest }: EmailLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmailLayout: ({ variables, disableVariablesAutocomplete, theme, isLoading, hidePublish, channels, brandEditor, routing, colorScheme, readOnly, fonts, ...rest }: EmailLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TemplateEditor/Channels/Inbox/InboxLayout.d.ts

@@ -1,4 +1,4 @@
 import type { InboxProps } from "./Inbox";
 export interface InboxLayoutProps extends InboxProps {
 }
-export declare const InboxLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, colorScheme, ...rest }: InboxLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InboxLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, colorScheme, readOnly, ...rest }: InboxLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TemplateEditor/Channels/Inbox/SideBar/useInboxButtonSync.d.ts

@@ -0,0 +1,27 @@
+import type { Editor } from "@tiptap/react";
+import type { UseFormReturn } from "react-hook-form";
+interface UseInboxButtonSyncOptions<T extends Record<string, unknown>> {
+    editor: Editor | null;
+    form: UseFormReturn<T>;
+    buttonIndex: 0 | 1;
+    labelField: keyof T & string;
+    defaultLabel: string;
+}
+/**
+ * Per-button label sync hook for the Inbox channel sidebar.
+ *
+ * Mirrors the Email channel's `useNodeAttributes` sync pattern but handles the
+ * two node shapes that appear in Inbox:
+ *   - `buttonRow` (atom): 2 buttons merged into 1 node with button1Label/button2Label attrs
+ *   - `button` (inline-content): standalone button nodes with a `label` attr
+ *
+ * Editor → sidebar: subscribes to `editor.on("update")`, reads the label from the
+ * correct node/attribute, calls `form.setValue` (same as `useNodeAttributes`).
+ *
+ * Sidebar → editor: returns `updateLabel(newLabel)` that immediately updates the
+ * editor via `setNodeMarkup` (buttonRow) or `updateButtonLabelAndContent` (button).
+ */
+export declare function useInboxButtonSync<T extends Record<string, unknown>>({ editor, form, buttonIndex, labelField, defaultLabel, }: UseInboxButtonSyncOptions<T>): {
+    updateLabel: (newLabel: string) => void;
+};
+export {};

package/dist/components/TemplateEditor/Channels/MSTeams/MSTeamsLayout.d.ts

@@ -4,4 +4,4 @@ export interface MSTeamsLayoutProps extends MSTeamsProps {
 }
 export declare const MSTeamsEditorContainer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MSTeamsEditorMain: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MSTeamsLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, colorScheme, }: MSTeamsLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MSTeamsLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, colorScheme, readOnly, }: MSTeamsLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TemplateEditor/Channels/Push/PushLayout.d.ts

@@ -1,4 +1,4 @@
 import type { PushProps } from "./Push";
 export interface PushLayoutProps extends PushProps {
 }
-export declare const PushLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, ...rest }: PushLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PushLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, readOnly, ...rest }: PushLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TemplateEditor/Channels/SMS/SMSLayout.d.ts

@@ -1,4 +1,4 @@
 import type { SMSProps } from "./SMS";
 export interface SMSLayoutProps extends SMSProps {
 }
-export declare const SMSLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, colorScheme, ...rest }: SMSLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SMSLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, colorScheme, readOnly, ...rest }: SMSLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TemplateEditor/Channels/Slack/SlackLayout.d.ts

@@ -4,4 +4,4 @@ export interface SlackLayoutProps extends SlackProps {
 }
 export declare const SlackEditorContainer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SlackEditorMain: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SlackLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, colorScheme, }: SlackLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SlackLayout: ({ hidePublish, theme, variables, disableVariablesAutocomplete, channels, routing, colorScheme, readOnly, }: SlackLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TemplateEditor/TemplateEditor.d.ts

@@ -36,5 +36,22 @@ export interface TemplateEditorProps extends Omit<HTMLAttributes<HTMLDivElement>
     channels?: ChannelType[];
     routing?: MessageRouting;
     colorScheme?: "light" | "dark";
+    /**
+     * When true, makes the editor read-only across all channels.
+     * Disables editing, toolbar actions, block insertion, drag-and-drop, and auto-save.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Sample data payload for validating loop data paths.
+     * When provided, the editor will show warnings if a loop's data path
+     * doesn't match a key in this object or doesn't resolve to an array.
+     */
+    sampleData?: Record<string, unknown>;
+    /**
+     * When true, the preview panel starts in desktop mode and hides its exit button.
+     * @default false
+     */
+    hidePreviewPanelExitButton?: boolean;
 }
 export declare const TemplateEditor: import("react").NamedExoticComponent<TemplateEditorProps>;

package/dist/components/TemplateEditor/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from "./useDebouncedFlush";
+export * from "./useEmailBackgroundColors";

package/dist/components/TemplateEditor/hooks/useEmailBackgroundColors.d.ts

@@ -0,0 +1,9 @@
+interface UseEmailBackgroundColorsOptions {
+    isTemplateTransitioning?: boolean;
+}
+export declare function useEmailBackgroundColors(options?: UseEmailBackgroundColorsOptions): {
+    emailBackgroundColor: string;
+    emailContentBodyColor: string;
+    handleEmailColorChange: (key: "background_color" | "content_body_color", value: string) => void;
+};
+export {};

package/dist/components/TemplateEditor/hooks/useEmailFontFamily.d.ts

@@ -0,0 +1,10 @@
+interface UseEmailFontFamilyOptions {
+    isTemplateTransitioning?: boolean;
+}
+export declare function useEmailFontFamily(options?: UseEmailFontFamilyOptions): {
+    emailFontFamily: string;
+    emailFallbackFont: string;
+    handleFontFamilyChange: (selectedFontFamily: string) => void;
+    handleFallbackChange: (selectedFallbackFontFamily: string) => void;
+};
+export {};

package/dist/components/TemplateEditor/hooks/useFonts.d.ts

@@ -0,0 +1,4 @@
+import type { FontEntry } from "@/types/font.types";
+export declare function useFonts(): {
+    fonts: FontEntry[];
+};

package/dist/components/TemplateEditor/hooks/useGoogleFontLoader.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Injects a <link rel="stylesheet"> into <head> to load a Google Font
+ * for the editor preview. Cleans up on unmount or when the URL changes.
+ */
+export declare function useGoogleFontLoader(fontUrl: string | undefined): void;

package/dist/components/TemplateEditor/index.d.ts

@@ -14,6 +14,6 @@ export declare const InboxChannel: import("react").MemoExoticComponent<import("r
 export declare const MSTeamsChannel: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Channels").MSTeamsProps & import("react").RefAttributes<HTMLDivElement>>>;
 export declare const SlackChannel: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./Channels").SlackProps & import("react").RefAttributes<HTMLDivElement>>>;
 export { ChannelRootContainer, EditorSidebar } from "./Layout";
-export { isSidebarExpandedAtom } from "./store";
+export { isSidebarExpandedAtom, availableVariablesAtom, variablesEnabledAtom, variableValidationAtom, sampleDataAtom, EMAIL_DEFAULT_BACKGROUND_COLOR, EMAIL_DEFAULT_CONTENT_BODY_COLOR, emailFontFamilyAtom, } from "./store";
 export { InboxEditor, MSTeamsEditor, PushEditor, SlackEditor, SMSEditor } from "./Channels";
 export { useDebouncedFlush } from "./hooks/useDebouncedFlush";

package/dist/components/TemplateEditor/store.d.ts

@@ -4,6 +4,17 @@ import type { Editor } from "@tiptap/react";
 export declare const subjectAtom: import("jotai").PrimitiveAtom<string | null> & {
     init: string | null;
 };
+export declare const EMAIL_DEFAULT_BACKGROUND_COLOR = "#FAF8F6";
+export declare const EMAIL_DEFAULT_CONTENT_BODY_COLOR = "#ffffff";
+export declare const emailBackgroundColorAtom: import("jotai").PrimitiveAtom<string> & {
+    init: string;
+};
+export declare const emailContentBodyColorAtom: import("jotai").PrimitiveAtom<string> & {
+    init: string;
+};
+export declare const emailFontFamilyAtom: import("jotai").PrimitiveAtom<string> & {
+    init: string;
+};
 export type ContentTransformer = (content: ElementalContent) => ElementalContent;
 export declare const contentTransformerAtom: import("jotai").PrimitiveAtom<ContentTransformer | null> & {
     init: ContentTransformer | null;
@@ -42,7 +53,13 @@ export declare const disableVariablesAutocompleteAtom: import("jotai").Primitive
 export declare const variableValidationAtom: import("jotai").PrimitiveAtom<VariableValidationConfig | undefined> & {
     init: VariableValidationConfig | undefined;
 };
+export declare const sampleDataAtom: import("jotai").PrimitiveAtom<Record<string, unknown> | undefined> & {
+    init: Record<string, unknown> | undefined;
+};
 export type VariableViewMode = "show-variables" | "wysiwyg";
+export declare const readOnlyAtom: import("jotai").PrimitiveAtom<boolean> & {
+    init: boolean;
+};
 export declare const isDraggingAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };

package/dist/components/TranslationEditor/TranslationEditor.d.ts

@@ -0,0 +1,17 @@
+import type { ElementalTextContentNode } from "@/types/elemental.types";
+import * as React from "react";
+export interface TranslationEditorProps {
+    /** Elemental inline elements (rich text). Takes priority over `value`. */
+    elements?: ElementalTextContentNode[];
+    /** Plain string value (used when `elements` is not provided) */
+    value?: string;
+    /** Whether the editor is read-only */
+    readOnly?: boolean;
+    /** Placeholder text for empty editors */
+    placeholder?: string;
+    /** Called when the editor content changes (plain text) */
+    onChange?: (value: string) => void;
+    /** Additional CSS class names */
+    className?: string;
+}
+export declare const TranslationEditor: React.FC<TranslationEditorProps>;

package/dist/components/TranslationEditor/index.d.ts

@@ -0,0 +1 @@
+export { TranslationEditor, type TranslationEditorProps } from "./TranslationEditor";

package/dist/components/extensions/Button/Button.types.d.ts

@@ -21,7 +21,7 @@ export declare const buttonSchema: z.ZodObject<{
     label: string;
     alignment: "left" | "center" | "right";
     fontWeight: "normal" | "bold";
-    fontStyle: "normal" | "italic";
+    fontStyle: "italic" | "normal";
     isUnderline: boolean;
     isStrike: boolean;
     link?: string | undefined;
@@ -35,7 +35,7 @@ export declare const buttonSchema: z.ZodObject<{
     label: string;
     alignment: "left" | "center" | "right";
     fontWeight: "normal" | "bold";
-    fontStyle: "normal" | "italic";
+    fontStyle: "italic" | "normal";
     isUnderline: boolean;
     isStrike: boolean;
     link?: string | undefined;

package/dist/components/extensions/Button/inboxButtonStyle.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Sentinel values that define the Inbox channel's two action-button styles.
+ *
+ * These hex values are NOT design tokens — they are checked across several
+ * layers (sidebar form, ProseMirror node attrs, Elemental converters, node
+ * view components) to decide whether a given action is rendered as a filled
+ * or outlined button. Changing them in one place without updating the others
+ * will silently break that detection, so every consumer should import from
+ * this module instead of inlining the literals.
+ */
+export type InboxButtonStyle = "filled" | "outlined";
+export declare const INBOX_FILLED: {
+    readonly backgroundColor: "#000000";
+    readonly textColor: "#ffffff";
+};
+export declare const INBOX_OUTLINED: {
+    readonly backgroundColor: "#ffffff";
+    readonly textColor: "#000000";
+};
+export declare const INBOX_BUTTON_COLORS: Record<InboxButtonStyle, {
+    backgroundColor: string;
+    textColor: string;
+}>;
+/**
+ * Returns true when the given background color matches the outlined Inbox
+ * sentinel. Most callers should prefer `matchesOutlinedSentinel` (which also
+ * checks the text color) when emitting backend-visible fields, since a lone
+ * white background can occur outside the Inbox contract.
+ */
+export declare const isOutlinedInboxBackground: (bg: unknown) => boolean;
+/**
+ * Returns true only when both the background AND text color match the
+ * outlined Inbox sentinel pair. This is stricter than
+ * `isOutlinedInboxBackground` and should be used wherever an accidental
+ * match outside the Inbox channel would leak into a backend-visible field
+ * (e.g. when emitting `action.style: "link"` from a `buttonRow` that has
+ * no channel context at the call site).
+ */
+export declare const matchesOutlinedSentinel: (bg: unknown, color: unknown) => boolean;
+/**
+ * Returns true only when both the background AND text color match the
+ * filled Inbox sentinel pair. Symmetric counterpart to
+ * `matchesOutlinedSentinel`.
+ */
+export declare const matchesFilledSentinel: (bg: unknown, color: unknown) => boolean;
+/**
+ * Map a UI style ("filled" | "outlined") to the Elemental `action.style`
+ * value accepted by the backend schema.
+ */
+export declare const inboxStyleToElementalStyle: (style: InboxButtonStyle) => "button" | "link";
+/**
+ * Derive the Elemental `action.style` from a button's background color
+ * alone. Kept for backward compatibility; new callers that emit to the
+ * backend should use `inboxStyleFromColors` so a non-Inbox button that
+ * happens to have a #ffffff background doesn't get tagged as a link.
+ */
+export declare const inboxStyleFromBackground: (bg: unknown) => "button" | "link";
+/**
+ * Derive the Elemental `action.style` from a button's color pair. Returns
+ * `"link"` only when both bg and text color match the outlined sentinel,
+ * `"button"` only when both match the filled sentinel, and `undefined`
+ * otherwise — signalling to the caller that the button is not part of the
+ * Inbox Filled/Outlined contract and no `style` should be emitted.
+ */
+export declare const inboxStyleFromColors: (bg: unknown, color: unknown) => "button" | "link" | undefined;

package/dist/components/extensions/ButtonRow/ButtonRow.types.d.ts

@@ -5,10 +5,14 @@ export interface ButtonRowProps {
     button1Link: string;
     button1BackgroundColor: string;
     button1TextColor: string;
+    button1If?: unknown;
+    button1Locales?: unknown;
     button2Label: string;
     button2Link: string;
     button2BackgroundColor: string;
     button2TextColor: string;
+    button2If?: unknown;
+    button2Locales?: unknown;
     padding?: number;
 }
 export declare const buttonRowSchema: z.ZodObject<{

package/dist/components/extensions/Color/Color.d.ts

@@ -0,0 +1,14 @@
+import "@tiptap/extension-text-style";
+import { Extension } from "@tiptap/core";
+export interface ColorOptions {
+    types: string[];
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        color: {
+            setColor: (color: string) => ReturnType;
+            unsetColor: () => ReturnType;
+        };
+    }
+}
+export declare const Color: Extension<ColorOptions, any>;

package/dist/components/extensions/ColumnCell/ColumnCell.types.d.ts

@@ -0,0 +1,32 @@
+import { z } from "zod";
+export declare const columnCellSchema: z.ZodObject<{
+    paddingHorizontal: z.ZodDefault<z.ZodNumber>;
+    paddingVertical: z.ZodDefault<z.ZodNumber>;
+    backgroundColor: z.ZodDefault<z.ZodString>;
+    borderWidth: z.ZodDefault<z.ZodNumber>;
+    borderRadius: z.ZodDefault<z.ZodNumber>;
+    borderColor: z.ZodDefault<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    borderRadius: number;
+    paddingVertical: number;
+    paddingHorizontal: number;
+}, {
+    backgroundColor?: string | undefined;
+    borderColor?: string | undefined;
+    borderWidth?: number | undefined;
+    borderRadius?: number | undefined;
+    paddingVertical?: number | undefined;
+    paddingHorizontal?: number | undefined;
+}>;
+export declare const defaultColumnCellProps: {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    backgroundColor: string;
+    borderWidth: number;
+    borderRadius: number;
+    borderColor: string;
+};
+export type ColumnCellProps = z.infer<typeof columnCellSchema>;

package/dist/components/extensions/{CustomCode/CustomCodeForm.d.ts → ColumnCell/ColumnCellForm.d.ts}

@@ -1,9 +1,9 @@
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import type { Editor } from "@tiptap/react";
-interface CustomCodeFormProps {
+interface ColumnCellFormProps {
     element?: ProseMirrorNode;
     editor: Editor | null;
     hideCloseButton?: boolean;
 }
-export declare const CustomCodeForm: ({ element, editor, hideCloseButton, }: CustomCodeFormProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ColumnCellForm: ({ element, editor, hideCloseButton, }: ColumnCellFormProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/extensions/ColumnCell/index.d.ts

@@ -1,2 +1,4 @@
 export { ColumnCell, default } from "./ColumnCell";
 export { ColumnCellComponentNode } from "./ColumnCellComponent";
+export { ColumnCellForm } from "./ColumnCellForm";
+export { columnCellSchema, defaultColumnCellProps, type ColumnCellProps } from "./ColumnCell.types";

package/dist/components/extensions/HTML/HTML.d.ts

@@ -0,0 +1,11 @@
+import { Node } from "@tiptap/core";
+import type { HTMLProps } from "./HTML.types";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        customCode: {
+            setCustomCode: (props: Partial<HTMLProps>) => ReturnType;
+        };
+    }
+}
+export declare const defaultHTMLProps: HTMLProps;
+export declare const HTML: Node<any, any>;

package/dist/components/extensions/{CustomCode/CustomCode.types.d.ts → HTML/HTML.types.d.ts}

@@ -1,11 +1,11 @@
 import { z } from "zod";
-export declare const customCodeSchema: z.ZodObject<{
+export declare const htmlSchema: z.ZodObject<{
     code: z.ZodString;
 }, "strip", z.ZodTypeAny, {
     code: string;
 }, {
     code: string;
 }>;
-export interface CustomCodeProps {
+export interface HTMLProps {
     code: string;
 }

package/dist/components/extensions/HTML/HTMLComponent.d.ts

@@ -0,0 +1,9 @@
+import { type NodeViewProps } from "@tiptap/react";
+import React from "react";
+import type { HTMLProps } from "./HTML.types";
+export declare const HTMLComponent: React.FC<HTMLProps & {
+    nodeKey?: string;
+    selected?: boolean;
+    updateAttributes?: (attrs: Partial<HTMLProps>) => void;
+}>;
+export declare const HTMLComponentNode: (props: NodeViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/extensions/HTML/HTMLForm.d.ts

@@ -0,0 +1,9 @@
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/react";
+interface HTMLFormProps {
+    element?: ProseMirrorNode;
+    editor: Editor | null;
+    hideCloseButton?: boolean;
+}
+export declare const HTMLForm: ({ element, editor, hideCloseButton }: HTMLFormProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/extensions/HTML/index.d.ts

@@ -0,0 +1,6 @@
+export { HTML, defaultHTMLProps } from "./HTML";
+export { HTMLComponent, HTMLComponentNode } from "./HTMLComponent";
+export { MonacoCodeEditor } from "./MonacoCodeEditor";
+export { HTMLForm } from "./HTMLForm";
+export type { HTMLProps } from "./HTML.types";
+export { htmlSchema } from "./HTML.types";

package/dist/components/extensions/Link/LinkBubble.d.ts

@@ -0,0 +1 @@
+export declare const LinkBubble: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/extensions/List/List.types.d.ts

@@ -4,16 +4,19 @@ export declare const listSchema: z.ZodObject<{
     listType: z.ZodEnum<["ordered", "unordered"]>;
     paddingVertical: z.ZodNumber;
     paddingHorizontal: z.ZodNumber;
+    loop: z.ZodEffects<z.ZodEffects<z.ZodOptional<z.ZodString>, string | undefined, string | undefined>, string | undefined, string | undefined>;
 }, "strip", z.ZodTypeAny, {
     paddingVertical: number;
     paddingHorizontal: number;
     listType: "ordered" | "unordered";
     id?: string | undefined;
+    loop?: string | undefined;
 }, {
     paddingVertical: number;
     paddingHorizontal: number;
     listType: "ordered" | "unordered";
     id?: string | undefined;
+    loop?: string | undefined;
 }>;
 export interface ListProps {
     /** Whether the list is ordered (numbered) or unordered (bulleted) */
@@ -24,5 +27,7 @@ export interface ListProps {
     paddingVertical?: number;
     /** Horizontal padding in pixels */
     paddingHorizontal?: number;
+    /** Loop expression for iterating over data collections (e.g. "data.products") */
+    loop?: string;
 }
 export declare const defaultListProps: ListProps;

package/dist/components/extensions/index.d.ts

@@ -1,4 +1,5 @@
-export { Color } from "@tiptap/extension-color";
+export { Color } from "./Color/Color";
+export { TextStyle } from "@tiptap/extension-text-style";
 export { Dropcursor } from "@tiptap/extension-dropcursor";
 export { HardBreak } from "./HardBreak";
 export { History } from "@tiptap/extension-history";
@@ -13,7 +14,7 @@ export { ButtonRow } from "./ButtonRow";
 export { Column } from "./Column";
 export { ColumnRow } from "./ColumnRow";
 export { ColumnCell } from "./ColumnCell";
-export { CustomCode } from "./CustomCode";
+export { HTML } from "./HTML";
 export { Divider } from "./Divider";
 export { Document } from "./Document";
 export * from "./DragPlaceholder";

package/dist/components/extensions/shared/conditionalAttribute.d.ts

@@ -0,0 +1,19 @@
+import type { ElementalIfCondition } from "@/types/conditions.types";
+/**
+ * Shared TipTap attribute definition for the `if` conditional field.
+ * Spread into any block extension's `addAttributes()` return to enable
+ * round-tripping of the `if` field through the editor.
+ *
+ * Handles both string expressions and structured ElementalConditionExpression.
+ */
+export declare const conditionalAttribute: {
+    if: {
+        default: ElementalIfCondition | undefined;
+        parseHTML: (element: HTMLElement) => ElementalIfCondition | undefined;
+        renderHTML: (attributes: Record<string, unknown>) => {
+            "data-if"?: undefined;
+        } | {
+            "data-if": string;
+        };
+    };
+};