better-react-email-editor 0.1.0

package/dist/types/components/BetterEmailEditor.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentType } from 'react';
+import { type EditorRootProps, type EmailEditorHandle } from '../context';
+import { type CanvasProps } from './Canvas';
+import { type LayersPanelProps } from './LayersPanel';
+import { type SidebarProps } from './Sidebar';
+import { type TopBarProps } from './TopBar';
+export interface BetterEmailEditorComponents {
+    TopBar?: ComponentType<TopBarProps>;
+    LayersPanel?: ComponentType<LayersPanelProps>;
+    Canvas?: ComponentType<CanvasProps>;
+    Sidebar?: ComponentType<SidebarProps>;
+}
+export interface BetterEmailEditorProps extends Omit<EditorRootProps, 'children'> {
+    /** Show the top bar. Default: true. */
+    showTopBar?: boolean;
+    /** Show the layers panel. Default: true. */
+    showLayers?: boolean;
+    /** Show the right sidebar. Default: true. */
+    showSidebar?: boolean;
+    /** Replace any part with your own component. */
+    components?: BetterEmailEditorComponents;
+    /** Props (className, style…) forwarded to each part. */
+    slotProps?: {
+        topBar?: TopBarProps;
+        layersPanel?: LayersPanelProps;
+        canvas?: CanvasProps;
+        sidebar?: SidebarProps;
+    };
+}
+/**
+ * The complete editor in one component: top bar, layers, canvas and sidebar.
+ * For a custom layout, use `EditorRoot` with the individual components instead.
+ */
+export declare const BetterEmailEditor: import("react").ForwardRefExoticComponent<BetterEmailEditorProps & import("react").RefAttributes<EmailEditorHandle>>;

package/dist/types/components/BlockProperties.d.ts

@@ -0,0 +1,7 @@
+import type { InspectorNodeContext } from '@react-email/editor/ui';
+import type { StyleProps } from '../core/cx';
+export interface BlockPropertiesProps extends StyleProps {
+    ctx: InspectorNodeContext;
+}
+/** Properties of the selected block: picks the inspector registered for its node type. */
+export declare function BlockProperties({ ctx, className, style }: BlockPropertiesProps): import("react").JSX.Element;

package/dist/types/components/BlocksTab.d.ts

@@ -0,0 +1,13 @@
+import { type StyleProps } from '../core/cx';
+import type { TemplateItem } from '../registry/types';
+export interface TemplateCardProps extends StyleProps {
+    template: TemplateItem;
+}
+/** One draggable prebuilt row. */
+export declare function TemplateCard({ template, className, style }: TemplateCardProps): import("react").JSX.Element;
+export interface BlocksTabProps extends StyleProps {
+    /** Defaults to the editor's `templates`. */
+    templates?: TemplateItem[];
+}
+/** "Blocks" tab: prebuilt rows (header, hero, footer…). */
+export declare function BlocksTab({ templates, className, style }: BlocksTabProps): import("react").JSX.Element;

package/dist/types/components/BodyTab.d.ts

@@ -0,0 +1,9 @@
+import type { InspectorDocumentProps } from '@react-email/editor/ui';
+import { type StyleProps } from '../core/cx';
+/** Context given by `Inspector.Document`: global (theme) styles of the email. */
+export type DocumentContext = Parameters<NonNullable<InspectorDocumentProps['children']>>[0];
+export interface BodyTabProps extends StyleProps {
+    ctx: DocumentContext;
+}
+/** "Body" tab: email-wide settings (background, width, default colors, preview text). */
+export declare function BodyTab({ ctx, className, style }: BodyTabProps): import("react").JSX.Element;

package/dist/types/components/Canvas.d.ts

@@ -0,0 +1,15 @@
+import { type SlashCommandItem } from '@react-email/editor/ui';
+import { type ReactNode } from 'react';
+import { type StyleProps } from '../core/cx';
+export interface CanvasProps extends StyleProps {
+    /** Hover / selection frames, block toolbar and drag & drop. Default: true. */
+    overlay?: boolean;
+    /** The package's floating text menu (bold, link…). Default: true. */
+    bubbleMenu?: boolean;
+    /** "/" command menu. `true` (default), `false`, or your own items. */
+    slashCommands?: boolean | SlashCommandItem[];
+    /** Extra content rendered inside the canvas scroll area. */
+    children?: ReactNode;
+}
+/** The editable email. Scrolls on its own: give it a height through its parent or `style`. */
+export declare function Canvas({ overlay, bubbleMenu, slashCommands, className, style, children }: CanvasProps): import("react").JSX.Element;

package/dist/types/components/CanvasOverlay.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from '@tiptap/core';
+/**
+ * Everything drawn on top of the canvas: hover outline, selection frame with
+ * its toolbar, and the drop indicator. Also owns the drag & drop listeners for
+ * the canvas so ProseMirror never sees our custom drags. Rendered by `Canvas`.
+ */
+export declare function CanvasOverlay({ editor, host }: {
+    editor: Editor;
+    host: HTMLElement;
+}): import("react").JSX.Element;

package/dist/types/components/ContentPanel.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import { type StyleProps } from '../core/cx';
+import { type DocumentContext } from './BodyTab';
+export interface ContentPanelTab {
+    id: string;
+    label: string;
+    render: (ctx: DocumentContext) => ReactNode;
+}
+export interface ContentPanelProps extends StyleProps {
+    ctx: DocumentContext;
+    /**
+     * Tabs to show. Built-in ids: "content", "blocks", "body". Pass objects to
+     * add your own tabs, e.g. `['content', { id: 'saved', label: 'Saved', render: () => <Saved /> }]`.
+     */
+    tabs?: Array<'content' | 'blocks' | 'body' | ContentPanelTab>;
+    defaultTab?: string;
+}
+/** Sidebar screen shown when nothing is selected: tabs Content / Blocks / Body. */
+export declare function ContentPanel({ ctx, tabs, defaultTab, className, style }: ContentPanelProps): import("react").JSX.Element;

package/dist/types/components/ContentTab.d.ts

@@ -0,0 +1,17 @@
+import { type StyleProps } from '../core/cx';
+import type { PaletteGroup, PaletteItem } from '../registry/types';
+export interface PaletteTileProps extends StyleProps {
+    item: PaletteItem;
+}
+/** One draggable tile of the palette. */
+export declare function PaletteTile({ item, className, style }: PaletteTileProps): import("react").JSX.Element;
+export interface ContentTabProps extends StyleProps {
+    /** Defaults to the editor's `palette`. */
+    items?: PaletteItem[];
+    /** Defaults to the editor's `paletteGroups`; groups found only in items are added at the end. */
+    groups?: PaletteGroup[];
+    /** Hint under the tiles. `null` hides it. */
+    hint?: string | null;
+}
+/** "Content" tab: layout and content tiles, grouped. */
+export declare function ContentTab({ items, groups, hint, className, style }: ContentTabProps): import("react").JSX.Element;

package/dist/types/components/LayersPanel.d.ts

@@ -0,0 +1,9 @@
+import { type StyleProps } from '../core/cx';
+export interface LayersPanelProps extends StyleProps {
+    /** Shows a close button that calls it, e.g. `() => setLayersOpen(false)` when you also render a `LayersToggle`. */
+    onClose?: () => void;
+    /** Panel title. Defaults to the localized "Layers". */
+    title?: string;
+}
+/** Tree of the email (Photoshop-like layers): select, hover, reorder and nest blocks by drag & drop. */
+export declare function LayersPanel({ onClose, title, className, style }: LayersPanelProps): import("react").JSX.Element;

package/dist/types/components/PreviewDialog.d.ts

@@ -0,0 +1,15 @@
+import { type StyleProps } from '../core/cx';
+export type PreviewView = 'desktop' | 'mobile' | 'html' | 'text';
+/** Triggers a browser download of `content`. */
+export declare function download(filename: string, content: string, type: string): void;
+export interface PreviewDialogProps extends StyleProps {
+    onClose: () => void;
+    /** Tab shown first. Default: "desktop". */
+    defaultView?: PreviewView;
+    /** Tabs to show. Default: all four. */
+    views?: PreviewView[];
+    /** Name of the downloaded file. Default: "email.html". */
+    filename?: string;
+}
+/** Modal with the rendered email: desktop / mobile preview, HTML and plain text, copy and download. Render it to open it. */
+export declare function PreviewDialog({ onClose, defaultView, views, filename, className, style, }: PreviewDialogProps): import("react").ReactPortal;

package/dist/types/components/PropertiesPanel.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { type StyleProps } from '../core/cx';
+export interface PropertiesPanelProps extends StyleProps {
+    title: string;
+    children: ReactNode;
+    /** Shows the hierarchy (Email / Row / Column / Text…) under the header. Default: true. */
+    breadcrumb?: boolean;
+}
+/** Deselects everything: the sidebar goes back to the content panel. */
+export declare function useDeselect(): () => void;
+/** Sidebar screen shown when something is selected: header, breadcrumb and the inspector below. */
+export declare function PropertiesPanel({ title, children, breadcrumb, className, style }: PropertiesPanelProps): import("react").JSX.Element;

package/dist/types/components/Sidebar.d.ts

@@ -0,0 +1,14 @@
+import { type InspectorNodeContext, type InspectorTextContext } from '@react-email/editor/ui';
+import type { ReactNode } from 'react';
+import { type StyleProps } from '../core/cx';
+import type { DocumentContext } from './BodyTab';
+export interface SidebarProps extends StyleProps {
+    /** Screen when nothing is selected. Default: `<ContentPanel />`. */
+    renderDocument?: (ctx: DocumentContext) => ReactNode;
+    /** Screen when a block is selected. Default: `<BlockProperties />`. */
+    renderNode?: (ctx: InspectorNodeContext) => ReactNode;
+    /** Screen when text is selected. Default: `<TextProperties />`. */
+    renderText?: (ctx: InspectorTextContext) => ReactNode;
+}
+/** Right panel: switches between the content panel and the properties of the selection. */
+export declare function Sidebar({ renderDocument, renderNode, renderText, className, style, }: SidebarProps): import("react").JSX.Element;

package/dist/types/components/TextProperties.d.ts

@@ -0,0 +1,7 @@
+import { type InspectorTextContext } from '@react-email/editor/ui';
+import { type StyleProps } from '../core/cx';
+export interface TextPropertiesProps extends StyleProps {
+    ctx: InspectorTextContext;
+}
+/** Properties of a text selection: marks, typography and link color. */
+export declare function TextProperties({ ctx, className, style }: TextPropertiesProps): import("react").JSX.Element;

package/dist/types/components/TopBar.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import { type StyleProps } from '../core/cx';
+import { type PreviewView } from './PreviewDialog';
+export declare function LayersToggle({ className, style }: StyleProps): import("react").JSX.Element;
+export declare function UndoRedo({ className, style }: StyleProps): import("react").JSX.Element;
+export declare function DeviceToggle({ className, style }: StyleProps): import("react").JSX.Element;
+/** Replaces the content with the starter document (after confirmation). */
+export declare function TemplateButton({ className, style }: StyleProps): import("react").JSX.Element;
+/** Loads a JSON file saved by `ExportJsonButton` (or a bare Tiptap document). */
+export declare function ImportButton({ className, style }: StyleProps): import("react").JSX.Element;
+/** Downloads `{ doc, settings }` as email.json. */
+export declare function ExportJsonButton({ className, style, filename }: StyleProps & {
+    filename?: string;
+}): import("react").JSX.Element;
+export interface PreviewButtonProps extends StyleProps {
+    /** Tab opened in the preview dialog. Default: "desktop". */
+    view?: PreviewView;
+    variant?: 'default' | 'primary' | 'ghost';
+    children?: ReactNode;
+}
+/** Opens the preview / export dialog. */
+export declare function PreviewButton({ view, variant, children, className, style }: PreviewButtonProps): import("react").JSX.Element;
+export declare function ExportHtmlButton(props: StyleProps): import("react").JSX.Element;
+export interface TopBarProps extends StyleProps {
+    /** Left side, e.g. your logo. Empty by default. */
+    brand?: ReactNode;
+    /** Extra controls placed before the export button. */
+    actions?: ReactNode;
+    /** Replaces the default controls (device toggle + export) with your own. */
+    children?: ReactNode;
+}
+/**
+ * Top bar: device toggle (desktop / mobile) and the export button. Add more
+ * controls with `actions`, or compose your own bar from `LayersToggle`,
+ * `UndoRedo`, `TemplateButton`, `ImportButton`, `ExportJsonButton`, `PreviewButton`…
+ */
+export declare function TopBar({ brand, actions, children, className, style }: TopBarProps): import("react").JSX.Element;

package/dist/types/components/fields.d.ts

@@ -0,0 +1,103 @@
+import { type ReactNode } from 'react';
+import { type StyleProps } from '../core/cx';
+/**
+ * Form controls of the properties panel. Exported so custom inspectors look
+ * like the built-in ones. Text-like inputs commit on blur / Enter to avoid
+ * spamming editor transactions.
+ */
+export interface GroupProps extends StyleProps {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+}
+/** Collapsible section of the properties panel. */
+export declare function Group({ title, children, defaultOpen, className, style }: GroupProps): import("react").JSX.Element;
+export interface FieldProps extends StyleProps {
+    label: string;
+    children: ReactNode;
+    /** Label above the control instead of beside it. */
+    stacked?: boolean;
+}
+export declare function Field({ label, children, stacked, className, style }: FieldProps): import("react").JSX.Element;
+export interface TextInputProps extends StyleProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    type?: string;
+}
+export declare function TextInput({ value, onChange, placeholder, type, className, style }: TextInputProps): import("react").JSX.Element;
+export interface TextAreaProps extends StyleProps {
+    value: string;
+    onChange: (value: string) => void;
+    rows?: number;
+}
+export declare function TextArea({ value, onChange, rows, className, style }: TextAreaProps): import("react").JSX.Element;
+export interface NumberInputProps extends StyleProps {
+    value: unknown;
+    onChange: (value: number | '') => void;
+    unit?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+}
+/** Number with a unit suffix. Arrow keys step (Shift = ×10). Empty means "auto". */
+export declare function NumberInput({ value, onChange, unit, min, max, step, placeholder, className, style }: NumberInputProps): import("react").JSX.Element;
+export interface RangeInputProps extends StyleProps {
+    value: unknown;
+    onChange: (value: number) => void;
+    min: number;
+    max: number;
+    unit?: string;
+}
+export declare function RangeInput({ value, onChange, min, max, unit, className, style }: RangeInputProps): import("react").JSX.Element;
+export declare const DEFAULT_SWATCHES: string[];
+/** "#abc" / "#aabbcc" / "rgb(1, 2, 3)" -> "#aabbcc" (null when not a plain color). */
+export declare function toHex(color: string): string | null;
+export interface ColorInputProps extends StyleProps {
+    value: unknown;
+    onChange: (value: string) => void;
+    /** Colors already used in the document, offered first. */
+    presets?: string[];
+    /** Palette of the picker. */
+    swatches?: string[];
+    placeholder?: string;
+    /** Class name of the (portaled) picker popover. */
+    popoverClassName?: string;
+}
+/**
+ * Color field: swatch + hex text, opening a react-colorful picker in a Radix
+ * popover. The popover is portaled out of the sidebar, so it is wrapped in an
+ * EditorFocusScope: interacting with it keeps the block selected.
+ */
+export declare function ColorInput({ value, onChange, presets, swatches, placeholder, className, style, popoverClassName, }: ColorInputProps): import("react").JSX.Element;
+export interface SelectProps extends StyleProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** [value, label] pairs. */
+    options: Array<[string, string]>;
+}
+export declare function Select({ value, onChange, options, className, style }: SelectProps): import("react").JSX.Element;
+export interface SegmentedProps<T extends string> extends StyleProps {
+    value: T;
+    onChange: (value: T) => void;
+    options: Array<{
+        value: T;
+        label: ReactNode;
+        title?: string;
+    }>;
+    ariaLabel?: string;
+}
+export declare function Segmented<T extends string>({ value, onChange, options, ariaLabel, className, style }: SegmentedProps<T>): import("react").JSX.Element;
+export interface AlignInputProps extends StyleProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare function AlignInput({ value, onChange, className, style }: AlignInputProps): import("react").JSX.Element;
+export type Side = 'Top' | 'Right' | 'Bottom' | 'Left';
+export interface PaddingInputProps extends StyleProps {
+    get: (side: Side) => unknown;
+    set: (changes: Array<[side: Side, value: number | '']>) => void;
+}
+/** One value for the four sides, or four values with "More options". */
+export declare function PaddingInput({ get, set, className, style }: PaddingInputProps): import("react").JSX.Element;

package/dist/types/components/icons.d.ts

@@ -0,0 +1,21 @@
+/** Icons missing from @react-email/editor/ui. All accept a `size` like the package's icons. */
+interface IconProps {
+    size?: number;
+}
+export declare const GripIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const CopyIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const TrashIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const ParentIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const UndoIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const RedoIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const DesktopIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const MobileIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const LayersIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const PipetteIcon: ({ size }: IconProps) => import("react").JSX.Element;
+/** Layers-panel spacer icon (small). */
+export declare const SpacerIcon: ({ size }: IconProps) => import("react").JSX.Element;
+/** Palette spacer icon (with arrows). */
+export declare const SpacerTileIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const SocialIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const OneColumnIcon: ({ size }: IconProps) => import("react").JSX.Element;
+export {};

package/dist/types/components/inspectors/ButtonInspector.d.ts

@@ -0,0 +1,2 @@
+import type { InspectorProps } from '../../registry/types';
+export declare function ButtonInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;

package/dist/types/components/inspectors/ColumnsInspector.d.ts

@@ -0,0 +1,3 @@
+import type { InspectorProps } from '../../registry/types';
+/** Rows of 2, 3 or 4 columns: width presets and gap. */
+export declare function ColumnsInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;

package/dist/types/components/inspectors/DefaultInspector.d.ts

@@ -0,0 +1,3 @@
+import type { InspectorProps } from '../../registry/types';
+/** Text-like blocks (paragraph, list, quote…) and any node without its own inspector. */
+export declare function DefaultInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;

package/dist/types/components/inspectors/HeadingInspector.d.ts

@@ -0,0 +1,2 @@
+import type { InspectorProps } from '../../registry/types';
+export declare function HeadingInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;

package/dist/types/components/inspectors/ImageInspector.d.ts

@@ -0,0 +1,2 @@
+import type { InspectorProps } from '../../registry/types';
+export declare function ImageInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;

package/dist/types/components/inspectors/SimpleInspectors.d.ts

@@ -0,0 +1,6 @@
+import type { InspectorProps } from '../../registry/types';
+export declare function SpacerInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;
+export declare function HtmlInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;
+export declare function DividerInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;
+/** Sections and columns: background, border and padding. */
+export declare function ContainerInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;

package/dist/types/components/inspectors/SocialLinksInspector.d.ts

@@ -0,0 +1,2 @@
+import type { InspectorProps } from '../../registry/types';
+export declare function SocialLinksInspector({ ctx, className, style }: InspectorProps): import("react").JSX.Element;

package/dist/types/components/inspectors/groups.d.ts

@@ -0,0 +1,22 @@
+import type { InspectorNodeContext } from '@react-email/editor/ui';
+import type { KnownCssProperties } from '@react-email/editor/plugins';
+import type { StyleProps } from '../../core/cx';
+/** Reusable groups of controls, shared by the built-in inspectors. */
+export declare const css: (prop: string) => KnownCssProperties;
+export type StyleContext = Pick<InspectorNodeContext, 'getStyle' | 'setStyle' | 'presetColors'>;
+export interface TypographyGroupProps extends StyleProps {
+    ctx: StyleContext;
+    alignment?: string;
+    /** Shows the alignment control when set. */
+    setAlignment?: (value: string) => void;
+}
+export declare function TypographyGroup({ ctx, alignment, setAlignment, className, style }: TypographyGroupProps): import("react").JSX.Element;
+export interface SpacingGroupProps extends StyleProps {
+    ctx: InspectorNodeContext;
+    title?: string;
+}
+export declare function SpacingGroup({ ctx, title, className, style }: SpacingGroupProps): import("react").JSX.Element;
+export interface BoxGroupProps extends StyleProps {
+    ctx: InspectorNodeContext;
+}
+export declare function BoxGroup({ ctx, className, style }: BoxGroupProps): import("react").JSX.Element;

package/dist/types/components/useDraggableBlock.d.ts

@@ -0,0 +1,17 @@
+import type { JSONContent } from '@tiptap/core';
+import type { DragEvent } from 'react';
+/**
+ * Makes any element a source of new blocks: drag it onto the canvas or the
+ * layers panel, or click it to append the blocks at the end of the email.
+ *
+ * ```tsx
+ * const drag = useDraggableBlock('Promo', () => [paragraph('-20% today')]);
+ * return <button {...drag}>Promo</button>;
+ * ```
+ */
+export declare function useDraggableBlock(label: string, content: () => JSONContent[]): {
+    draggable: boolean;
+    onDragStart: (event: DragEvent) => void;
+    onDragEnd: () => void;
+    onClick: () => void;
+};

package/dist/types/context.d.ts

@@ -0,0 +1,115 @@
+import type { Editor, Extensions, JSONContent } from '@tiptap/core';
+import { type EditorThemeInput } from '@react-email/editor/plugins';
+import { type ReactNode } from 'react';
+import { type StyleProps } from './core/cx';
+import { type DragSession, type HoverStore } from './core/stores';
+import { type I18n, type Messages, type PartialMessages } from './i18n';
+import type { NodeDefinition, PaletteGroup, PaletteItem, TemplateItem } from './registry/types';
+export interface EmailSettings {
+    /** Inbox preview line (shown after the subject). */
+    previewText: string;
+}
+/** What the editor saves and loads: the document plus email-level settings. */
+export interface EmailValue {
+    doc: JSONContent;
+    settings: EmailSettings;
+}
+export type Device = 'desktop' | 'mobile';
+export interface EmailExport {
+    html: string;
+    text: string;
+    unformattedHtml: string;
+}
+/** Imperative API exposed through `ref` (and given to `onReady`). */
+export interface EmailEditorHandle {
+    /** The underlying Tiptap editor. */
+    editor: Editor | null;
+    getValue: () => EmailValue;
+    setValue: (value: EmailValue | JSONContent) => void;
+    getJSON: () => JSONContent;
+    /** Renders the email (HTML, plain text and unformatted HTML). */
+    exportEmail: () => Promise<EmailExport>;
+    getHtml: () => Promise<string>;
+    getText: () => Promise<string>;
+    /** Appends blocks at the end of the email. */
+    insertBlocks: (content: JSONContent[]) => void;
+}
+export interface EmailEditorContextValue extends I18n {
+    editor: Editor;
+    handle: EmailEditorHandle;
+    /** Node definitions, by type. */
+    nodes: ReadonlyMap<string, NodeDefinition>;
+    nodeLabel: (type: string) => string;
+    palette: PaletteItem[];
+    paletteGroups: PaletteGroup[];
+    templates: TemplateItem[];
+    starterDocument: (i18n: I18n) => JSONContent;
+    uploadImage: (file: File) => Promise<{
+        url: string;
+    }>;
+    dragSession: DragSession;
+    hoverStore: HoverStore;
+    device: Device;
+    setDevice: (device: Device) => void;
+    layersOpen: boolean;
+    setLayersOpen: (open: boolean) => void;
+    settings: EmailSettings;
+    updateSettings: (patch: Partial<EmailSettings>) => void;
+}
+/** Everything the editor components share: editor, i18n, registries, UI state. */
+export declare function useEmailEditor(): EmailEditorContextValue;
+/** Like `useEmailEditor`, but returns null outside an editor. */
+export declare function useOptionalEmailEditor(): EmailEditorContextValue | null;
+/** UI strings, falling back to English outside an editor (lets form fields work standalone). */
+export declare function useMessages(): Messages;
+/** Current locale and messages. */
+export declare function useI18n(): I18n;
+export interface EditorRootProps extends StyleProps {
+    /** Initial content, read on mount. Use the ref's `setValue` to replace it later. */
+    defaultValue?: EmailValue | JSONContent;
+    /** Called on every document or settings change. */
+    onChange?: (value: EmailValue) => void;
+    /** Called once the editor is created. */
+    onReady?: (handle: EmailEditorHandle) => void;
+    /** "en" (default) or "fr". Any other value falls back to English unless `messages` covers it. */
+    locale?: string;
+    /** Overrides some or all UI strings. */
+    messages?: PartialMessages;
+    /** Node definitions (labels, icons, properties panels, custom extensions). Read on mount for extensions. */
+    nodes?: NodeDefinition[];
+    /** Tiles of the "Content" tab. */
+    palette?: PaletteItem[];
+    paletteGroups?: PaletteGroup[];
+    /** Prebuilt rows of the "Blocks" tab. */
+    templates?: TemplateItem[];
+    /** Content loaded by the top bar's "Template" button. */
+    starterDocument?: (i18n: I18n) => JSONContent;
+    /** Extra Tiptap extensions, read on mount. */
+    extensions?: Extensions;
+    /** Email theme used for new documents, read on mount. */
+    theme?: EditorThemeInput;
+    /** Stores an uploaded or pasted image and returns its public URL. Defaults to an inline data URL. */
+    uploadImage?: (file: File) => Promise<{
+        url: string;
+    }>;
+    editable?: boolean;
+    /** Canvas width, controlled. */
+    device?: Device;
+    defaultDevice?: Device;
+    onDeviceChange?: (device: Device) => void;
+    /** Layers panel visibility, controlled. */
+    layersOpen?: boolean;
+    defaultLayersOpen?: boolean;
+    onLayersOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+export declare const defaultTheme: EditorThemeInput;
+/** Inlines the file as a data URL. Replace with your own storage (S3, Cloudinary…). */
+export declare const readFileAsDataUrl: (file: File) => Promise<{
+    url: string;
+}>;
+/**
+ * Creates the editor and provides it to every component inside: `Canvas`,
+ * `TopBar`, `LayersPanel`, `Sidebar`… Lay them out however you like.
+ */
+export declare const EditorRoot: import("react").ForwardRefExoticComponent<EditorRootProps & import("react").RefAttributes<EmailEditorHandle>>;

package/dist/types/core/content.d.ts

@@ -0,0 +1,28 @@
+import type { JSONContent } from '@tiptap/core';
+/**
+ * Small helpers to build email JSON (the editor's document format).
+ * Handy to write palette items, templates or starter documents.
+ */
+type Attrs = Record<string, unknown>;
+export declare const text: (value: string, marks?: JSONContent["marks"]) => JSONContent;
+export declare const paragraph: (value?: string | JSONContent[], attrs?: Attrs) => JSONContent;
+export declare const heading: (level: 1 | 2 | 3, value: string, attrs?: Attrs) => JSONContent;
+export declare const button: (label: string, attrs?: Attrs) => JSONContent;
+export declare const image: (src: string, attrs?: Attrs) => JSONContent;
+export declare const column: (...content: JSONContent[]) => JSONContent;
+/** Sets a column's width, in percent of its row. */
+export declare const sized: (col: JSONContent, width: number) => JSONContent;
+export declare const columns: (count: 2 | 3 | 4, cols?: JSONContent[], attrs?: Attrs) => JSONContent;
+export declare const section: (style: string, ...content: JSONContent[]) => JSONContent;
+/** Longhand paddings keep the inspector's per-side controls accurate. */
+export declare const padding: (y: number, x?: number) => string;
+export declare const link: (href: string) => {
+    type: string;
+    attrs: {
+        href: string;
+    };
+}[];
+export declare const placeholderImage: (w: number, h: number, label?: string) => string;
+/** Wraps blocks into a full document. */
+export declare const doc: (...content: JSONContent[]) => JSONContent;
+export {};

package/dist/types/core/cx.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+/** Joins class names, skipping falsy values. */
+export declare function cx(...classes: Array<string | false | null | undefined>): string;
+/** Props accepted by every visual component of the library. */
+export interface StyleProps {
+    className?: string;
+    style?: CSSProperties;
+}