@trycourier/react-designer 0.7.0 → 0.8.0

package/dist/hooks/useLocalization.d.ts

@@ -0,0 +1,30 @@
+import { type TranslatableField } from "@/lib/utils/extractTextFields";
+import type { ElementalContent } from "@/types";
+export type { TranslatableField };
+export interface UseLocalizationOptions {
+    /**
+     * Called when the content should be persisted to the server.
+     * The consumer provides this so they can use their own save mechanism
+     * (e.g. Apollo Client mutation in CDS).
+     */
+    onSave: (content: ElementalContent) => Promise<void>;
+    /** Debounce interval in ms (default 500). */
+    debounceMs?: number;
+    /** Callback when a save fails. */
+    onError?: (error: unknown) => void;
+}
+export interface UseLocalizationResult {
+    fields: TranslatableField[];
+    /**
+     * Update a locale translation for a specific field.
+     * Empty value removes the locale entry; non-empty adds/replaces it.
+     * Automatically triggers a debounced save via the provided onSave.
+     */
+    setTranslation: (fieldId: string, localeCode: string, value: string) => void;
+}
+/**
+ * Returns all translatable text fields extracted from the current template content,
+ * plus a `setTranslation` method to persist locale changes back to the atom
+ * and auto-save via the consumer-provided `onSave` callback.
+ */
+export declare function useLocalization({ onSave, debounceMs, onError, }: UseLocalizationOptions): UseLocalizationResult;

package/dist/index.d.ts

@@ -2,22 +2,34 @@ export * from "./components/TemplateEditor";
 export * from "./components/BrandEditor";
 export * from "./components/Providers";
 export * from "./components/hooks";
-export type { VariableValidationConfig } from "./types/validation.types";
+export type { VariableValidationConfig, VariableValidationContext } from "./types/validation.types";
+export type { FontEntry, FontProvider } from "./types/font.types";
 export * from "./lib/utils/errors";
 export * from "./components/ui-kit/ErrorBoundary";
 export { CHANNELS } from "@/channels";
 export type { ChannelType } from "@/store";
 export type { ElementalContent } from "@/types";
 export { PreviewPanel } from "@/components/ui/PreviewPanel";
+export { Tooltip } from "@/components/ui/Tooltip";
 export { TextMenu } from "@/components/ui/TextMenu";
 export { VariableInput, VariableTextarea } from "@/components/ui/VariableEditor";
 export { getFlattenedVariables } from "@/components/utils/getFlattenedVariables";
 export { Status as TemplateStatus } from "@/components/ui/Status";
-export { ToggleGroup, ToggleGroupItem, Toggle, Divider, Input, InputColor, } from "@/components/ui-kit";
+export { ToggleGroup, ToggleGroupItem, Toggle, Divider, Input, InputColor, DEFAULT_PRESET_COLORS, FontSelect, Tabs, TabsList, TabsTrigger, TabsContent, } from "@/components/ui-kit";
+export { ThemeProvider, useTheme } from "@/components/ui-kit/ThemeProvider";
+export { defaultTheme, lightTheme, darkTheme, } from "@/components/ui-kit/ThemeProvider/ThemeProvider.types";
+export type { Theme } from "@/components/ui-kit/ThemeProvider/ThemeProvider.types";
 export { FacebookIcon, InstagramIcon, LinkedinIcon, MediumIcon, XIcon, } from "@/components/ui-kit/Icon";
-export { cn, convertElementalToTiptap, convertTiptapToElemental } from "@/lib/utils";
+export { cn, convertElementalToTiptap, convertTiptapToElemental, parseFontFamily, buildFontFamily, } from "@/lib/utils";
 export { blockDefaults } from "@/lib/constants/block-defaults";
 export { EMAIL_EDITOR_TEXT_STYLES, EMAIL_EDITOR_FONT_FAMILY, } from "@/lib/constants/email-editor-tiptap-styles";
 export { useAutoSave } from "@/hooks/useAutoSave";
-export { MonacoCodeEditor } from "@/components/extensions/CustomCode/MonacoCodeEditor";
+export { useLocalization } from "@/hooks/useLocalization";
+export type { TranslatableField, UseLocalizationOptions, UseLocalizationResult, } from "@/hooks/useLocalization";
+export { extractExistingLocales, extractTextFields, updateLocaleTranslation, updateLocaleTranslationWithElements, } from "@/lib/utils/extractTextFields";
+export { useGoogleFontLoader } from "@/components/TemplateEditor/hooks/useGoogleFontLoader";
+export { TranslationEditor } from "@/components/TranslationEditor";
+export type { TranslationEditorProps } from "@/components/TranslationEditor";
+export { convertElementsArrayToTiptapNodes } from "@/lib/utils/convertElementalToTiptap/convertElementalToTiptap";
+export { MonacoCodeEditor } from "@/components/extensions/HTML/MonacoCodeEditor";
 export { applyShadowDomDndFix } from "@/components/utils/shadowDomDndFix";

package/dist/lib/utils/brandColors.d.ts

@@ -0,0 +1,15 @@
+export type BrandColorKey = "primary" | "secondary" | "tertiary";
+export interface BrandColor {
+    key: BrandColorKey;
+    hex: string;
+    ref: string;
+}
+export declare function isBrandColorRef(value: string): boolean;
+export declare function parseBrandColorRef(value: string): BrandColorKey | null;
+export declare function makeBrandColorRef(key: BrandColorKey): string;
+export declare const BRAND_COLOR_LABELS: Record<BrandColorKey, string>;
+export declare function getBrandColorLabel(value: string): string | null;
+export declare function brandColorRefToCSSVar(ref: string): string;
+export declare function brandColorsToCSSVars(brandColors: BrandColor[]): Record<string, string>;
+export declare function resolveBrandColor(value: string, brandColorMap: Record<string, string>): string;
+export declare function useBrandColorResolver(): (color: string) => string;

package/dist/lib/utils/extractTextFields.d.ts

@@ -0,0 +1,60 @@
+import type { ElementalContent, ElementalTextContentNode, TextStyle } from "@/types/elemental.types";
+/**
+ * FNV-1a hash — fast, non-crypto, good distribution for short strings.
+ * Returns a compact base-36 string.
+ */
+export declare function fnv1aHash(str: string): string;
+export interface TranslatableField {
+    /** Stable path-based identifier, e.g. "email.0.content" or "email.raw.subject" */
+    id: string;
+    /** Channel this field belongs to (e.g. "email", "sms", "push") */
+    channel: string;
+    /** Elemental node type: "text", "action", "quote", "meta" */
+    nodeType: string;
+    /** Text style hint for text nodes (h1, h2, h3, text, subtext) */
+    textStyle?: TextStyle;
+    /** The default/source locale text content */
+    content: string;
+    /** Raw Elemental inline elements for rich text nodes (preserves formatting) */
+    elements?: ElementalTextContentNode[];
+    /** Existing locale translations keyed by locale code */
+    locales: Record<string, string>;
+    /** Existing locale translations with rich elements, keyed by locale code */
+    localeElements?: Record<string, ElementalTextContentNode[]>;
+    /** Locale codes whose translation was made against a different source text */
+    staleLocales?: Set<string>;
+}
+/**
+ * Extract all translatable text fields from an ElementalContent tree.
+ *
+ * Walks each channel's element subtree and collects text from:
+ * - text nodes (paragraphs, headings)
+ * - action nodes (button labels)
+ * - quote nodes
+ * - meta nodes (titles / email subjects)
+ * - channel raw fields (subject, title, text)
+ *
+ * Skips image alt_text, html content, dividers, and comments.
+ */
+export declare function extractTextFields(content: ElementalContent | null | undefined): TranslatableField[];
+/**
+ * Collect all unique locale codes found across every translatable field in the content.
+ * Returns a sorted array of locale codes, e.g. ["de", "fr", "ja"].
+ */
+export declare function extractExistingLocales(content: ElementalContent | null | undefined): string[];
+/**
+ * Update a locale translation on a specific field in the Elemental content tree.
+ * Returns a new content object (immutable update).
+ *
+ * - Empty `value` removes the locale entry for that field.
+ * - Non-empty `value` adds or replaces the locale entry.
+ */
+export declare function updateLocaleTranslation(content: ElementalContent, fieldId: string, localeCode: string, value: string): ElementalContent;
+/**
+ * Update a locale translation with rich elements on a specific field.
+ * Like `updateLocaleTranslation`, but stores `elements` (not `content`)
+ * on the locale entry — preserving inline formatting through AI translation.
+ *
+ * Only applicable to text nodes (not raw/meta/action/quote).
+ */
+export declare function updateLocaleTranslationWithElements(content: ElementalContent, fieldId: string, localeCode: string, elements: ElementalTextContentNode[]): ElementalContent;

package/dist/lib/utils/fontFamily.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Parse a CSS font-family string into primary font and fallback stack.
+ *
+ * primary  = first comma-separated token
+ * fallback = everything after the first token, joined back
+ *
+ * Examples:
+ *   "Roboto, sans-serif"            → { primary: "Roboto",    fallback: "sans-serif" }
+ *   "Roboto, Georgia, serif"        → { primary: "Roboto",    fallback: "Georgia, serif" }
+ *   "Helvetica, Arial, sans-serif"  → { primary: "Helvetica", fallback: "Arial, sans-serif" }
+ */
+export declare function parseFontFamily(fontFamily: string | null | undefined): {
+    primary: string;
+    fallback: string;
+};
+/**
+ * Build a CSS font-family string from a primary font and a fallback stack.
+ *
+ * Examples:
+ *   buildFontFamily("Roboto", "sans-serif")       → "Roboto, sans-serif"
+ *   buildFontFamily("Roboto", "Georgia, serif")   → "Roboto, Georgia, serif"
+ */
+export declare function buildFontFamily(primary: string, fallback: string): string;

package/dist/lib/utils/index.d.ts

@@ -8,3 +8,4 @@ export * from "./getTitle";
 export * from "./updateElemental";
 export * from "./useForwardedRefCallback";
 export * from "./convertTiptapToMarkdown/convertTiptapToMarkdown";
+export * from "./fontFamily";