@trycourier/react-designer 0.7.0 → 0.8.0

package/dist/components/hooks/useVariables.d.ts

@@ -16,25 +16,30 @@ export interface UseVariablesResult {
      * Update a variable's value
      */
     addVariableValue: (key: string, value: string) => void;
+    /**
+     * Update multiple variable values in a single state update
+     */
+    addVariableValues: (entries: Record<string, string>) => void;
     /**
      * Clear all variable values (reset to empty object)
      */
     clearAllVariableValues: () => void;
 }
 /**
- * Hook to access and manage variables for a specific channel
+ * Hook to access and manage variables for a specific channel.
  *
- * @param channelType - The channel to get variables for (e.g., 'email', 'sms', 'slack')
+ * @param channelType - The channel to get variables for (e.g., 'email', 'sms', 'slack').
+ *   Pass `"all"` to merge used variables across every channel element in the template.
+ *   Omit to default to the currently active channel.
  * @returns Object containing available variables, used variables, current values, and update function
  *
  * @example
  * ```tsx
- * const { availableVariables, usedVariables, variableValues, addVariableValue } = useVariables('email');
- *
- * // availableVariables = ['user.name', 'user.email', 'orderTotal']
- * // usedVariables = ['user.name', 'orderTotal']
+ * const { usedVariables } = useVariables('all');
+ * // usedVariables merges variables from email, sms, push, etc.
  *
+ * const { availableVariables, usedVariables, addVariableValue } = useVariables('email');
  * addVariableValue('user.name', 'John Doe');
  * ```
  */
-export declare const useVariables: (channelType?: ChannelType) => UseVariablesResult;
+export declare const useVariables: (channelType?: ChannelType | "all") => UseVariablesResult;

package/dist/components/ui/Blocks/HTMLBlock/HTMLBlock.d.ts

@@ -0,0 +1,3 @@
+import { type BlockBaseProps } from "../Block";
+export declare const HTMLBlockIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const HTMLBlock: ({ draggable }: Pick<BlockBaseProps, "draggable">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Blocks/HTMLBlock/index.d.ts

@@ -0,0 +1 @@
+export * from "./HTMLBlock";

package/dist/components/ui/Blocks/index.d.ts

@@ -2,7 +2,7 @@ export * from "./Block";
 export * from "./BlockquoteBlock";
 export * from "./ButtonBlock";
 export * from "./ColumnBlock";
-export * from "./CustomCodeBlock";
+export * from "./HTMLBlock";
 export * from "./DividerBlock";
 export * from "./HeadingBlock";
 export * from "./ImageBlock";

package/dist/components/ui/Conditions/ConditionGroupRow.d.ts

@@ -0,0 +1,12 @@
+import type { ElementalConditionGroup, ElementalCondition } from "@/types/conditions.types";
+interface ConditionGroupRowProps {
+    group: ElementalConditionGroup;
+    editingIndex: number | null;
+    onStartEdit: (conditionIndex: number) => void;
+    onSaveCondition: (conditionIndex: number, condition: ElementalCondition) => void;
+    onCancelEdit: () => void;
+    onDeleteCondition: (conditionIndex: number) => void;
+    onAddCondition: () => void;
+}
+export declare const ConditionGroupRow: ({ group, editingIndex, onStartEdit, onSaveCondition, onCancelEdit, onDeleteCondition, onAddCondition, }: ConditionGroupRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Conditions/ConditionRow.d.ts

@@ -0,0 +1,11 @@
+import type { ElementalCondition } from "@/types/conditions.types";
+interface ConditionRowProps {
+    condition: ElementalCondition;
+    isEditing: boolean;
+    onStartEdit: () => void;
+    onSave: (condition: ElementalCondition) => void;
+    onCancel: () => void;
+    onDelete: () => void;
+}
+export declare const ConditionRow: ({ condition, isEditing, onStartEdit, onSave, onCancel, onDelete, }: ConditionRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Conditions/Conditions.d.ts

@@ -0,0 +1,9 @@
+import type { ElementalIfCondition } from "@/types/conditions.types";
+interface ConditionsProps {
+    value: ElementalIfCondition | undefined;
+    onChange: (value: ElementalIfCondition | undefined) => void;
+    /** Update display state without persisting to the node — used for pending "add" operations. */
+    onLocalChange?: (value: ElementalIfCondition | undefined) => void;
+}
+export declare const Conditions: ({ value, onChange, onLocalChange }: ConditionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/ui/Conditions/ConditionsSection.d.ts

@@ -0,0 +1,18 @@
+import type { ElementalIfCondition } from "@/types/conditions.types";
+interface ConditionsSectionProps {
+    value: ElementalIfCondition | undefined;
+    onChange: (value: ElementalIfCondition | undefined) => void;
+}
+/**
+ * Reusable section for block sidebar forms that wraps the Conditions component
+ * with the feature flag attribute, standard divider/header, and Add/Remove all
+ * controls matching the Journeys conditions pattern.
+ *
+ * Maintains local state because the `element` prop in sidebar forms is a stale
+ * ProseMirrorNode reference — without local state, controlled inputs would
+ * reset on every re-render.  Event propagation is also stopped so the parent
+ * form's `onChange` (which calls `updateNodeAttributes(form.getValues())` and
+ * doesn't know about `if`) cannot interfere.
+ */
+export declare const ConditionsSection: ({ value: propValue, onChange }: ConditionsSectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Conditions/index.d.ts

@@ -0,0 +1,3 @@
+export { Conditions } from "./Conditions";
+export { ConditionsSection } from "./ConditionsSection";
+export { useConditions, isStructuredCondition } from "./useConditions";

package/dist/components/ui/Conditions/useConditions.d.ts

@@ -0,0 +1,13 @@
+import type { ElementalCondition, ElementalConditionExpression, ElementalIfCondition } from "@/types/conditions.types";
+export declare function isStructuredCondition(value: ElementalIfCondition | undefined): value is ElementalConditionExpression;
+export declare function useConditions(value: ElementalIfCondition | undefined, onChange: (value: ElementalIfCondition | undefined) => void): {
+    groups: ElementalConditionExpression;
+    addGroup: () => void;
+    removeGroup: (groupIndex: number) => void;
+    updateGroupOperator: (groupIndex: number, groupOperator: "and" | "or") => void;
+    addCondition: (groupIndex: number) => void;
+    removeCondition: (groupIndex: number, conditionIndex: number) => void;
+    updateCondition: (groupIndex: number, conditionIndex: number, updated: ElementalCondition) => void;
+    initStructured: () => void;
+    switchToRaw: (rawValue: string) => void;
+};

package/dist/components/ui/ContentIcon/ContentIcon.d.ts

@@ -5,5 +5,5 @@ export declare const ButtonElementIcon: ({ ...props }: IconProps) => import("rea
 export declare const ImageElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DividerElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const VariableElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CustomCodeElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HTMLElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ColumnElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/MainLayout/MainLayout.d.ts

@@ -7,5 +7,6 @@ export interface MainLayoutProps extends HTMLAttributes<HTMLDivElement> {
     SideBar?: React.ReactNode;
     Header?: React.ReactNode;
     colorScheme?: "light" | "dark";
+    readOnly?: boolean;
 }
 export declare const MainLayout: import("react").ForwardRefExoticComponent<MainLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/TextMenu/components/TextColorButton.d.ts

@@ -0,0 +1,6 @@
+interface TextColorButtonProps {
+    color: string | undefined;
+    onChange: (color: string) => void;
+}
+export declare const TextColorButton: import("react").MemoExoticComponent<({ color, onChange }: TextColorButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/ui/TextMenu/config.d.ts

@@ -23,6 +23,7 @@ export interface TextMenuConfig {
     italic?: TextMenuItem;
     underline?: TextMenuItem;
     strike?: TextMenuItem;
+    textColor?: TextMenuItem;
     alignLeft?: TextMenuItem;
     alignCenter?: TextMenuItem;
     alignRight?: TextMenuItem;

package/dist/components/ui/TextMenu/hooks/useTextmenuCommands.d.ts

@@ -27,5 +27,7 @@ export declare const useTextmenuCommands: (editor: Editor, config?: TextMenuConf
     onQuote: () => void;
     onOrderedList: () => void;
     onUnorderedList: () => void;
+    onSetColor: (color: string) => boolean;
+    onUnsetColor: () => boolean;
 };
 export {};

package/dist/components/ui/TextMenu/hooks/useTextmenuStates.d.ts

@@ -13,6 +13,7 @@ export declare const useTextmenuStates: (editor: Editor | null) => {
     isUnorderedList: boolean;
     isLink: boolean;
     isHeading: boolean;
+    currentColor: string | undefined;
     shouldShow: ({ editor }: {
         editor: Editor;
     }) => boolean;

package/dist/components/ui/Tooltip/types.d.ts

@@ -3,7 +3,7 @@ import type { Placement, Props } from "tippy.js";
 export interface TooltipProps {
     children?: string | React.ReactNode;
     enabled?: boolean;
-    title?: string;
+    title?: React.ReactNode;
     shortcut?: string[];
     tippyOptions?: Omit<Partial<Props>, "content">;
     content?: React.ReactNode;

package/dist/components/ui/VariableEditor/VariableChipBase.d.ts

@@ -41,5 +41,7 @@ export interface VariableChipBaseProps {
     onSelect?: () => void;
     /** Called after editing is committed (suggestion selected or blur confirmed) to restore editor focus */
     onCommit?: () => void;
+    /** Whether this variable chip is inside a list node with a loop configured */
+    isInsideLoop?: boolean;
 }
 export declare const VariableChipBase: React.FC<VariableChipBaseProps>;

package/dist/components/ui-kit/Button/Button.d.ts

@@ -1,10 +1,10 @@
 import { type VariantProps } from "class-variance-authority";
 import type { ButtonHTMLAttributes } from "react";
 export type ButtonVariant = "primary" | "secondary" | "tertiary" | "quaternary" | "outline" | "ghost" | "link";
-export type ButtonSize = "medium" | "small" | "icon" | "iconSmall";
+export type ButtonSize = "medium" | "small" | "xs" | "icon" | "iconSmall";
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "primary" | "secondary" | "tertiary" | "quaternary" | "ghost" | "outline" | null | undefined;
-    size?: "icon" | "small" | "medium" | "iconSmall" | null | undefined;
+    size?: "icon" | "small" | "medium" | "xs" | "iconSmall" | null | undefined;
     active?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/components/ui-kit/FontSelect/FontSelect.d.ts

@@ -0,0 +1,9 @@
+import type { FontEntry } from "@/types/font.types";
+export interface FontSelectProps {
+    fonts: FontEntry[];
+    value: string;
+    defaultValue: string;
+    onChange: (fontFamily: string) => void;
+    className?: string;
+}
+export declare function FontSelect({ fonts, value, defaultValue, onChange, className }: FontSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui-kit/FontSelect/index.d.ts

@@ -0,0 +1 @@
+export { FontSelect, type FontSelectProps } from "./FontSelect";

package/dist/components/ui-kit/Form/Form.d.ts

@@ -20,4 +20,5 @@ declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.Lab
 declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, };
+declare const FormWarning: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormWarning, useFormField, };

package/dist/components/ui-kit/InputColor/ColorPicker.d.ts

@@ -4,6 +4,7 @@ interface ColorPickerProps {
     className?: string;
     presetColors: string[];
     defaultValue?: string;
+    defaultLabel?: string;
 }
-export declare const ColorPicker: ({ color, onChange, className, presetColors, defaultValue, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorPicker: ({ color, onChange, className, presetColors, defaultValue, defaultLabel, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui-kit/InputColor/InputColor.d.ts

@@ -1,4 +1,7 @@
-export declare const TRANSPARENT_PATTERN = "bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAwSDBWOEg4VjBaIiBmaWxsPSIjRDlEOUQ5Ii8+PHBhdGggZD0iTTE2IDhIOFYxNkgxNlY4WiIgZmlsbD0iI0Q5RDlEOSIvPjwvc3ZnPg==')]";
+export declare const getTransparentBgImage: (isDarkMode: boolean) => string;
+export declare const TRANSPARENT_BG_IMAGE = "url(\"data:image/svg+xml,%3Csvg%20width%3D%228%22%20height%3D%228%22%20viewBox%3D%220%200%208%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4%200H0V4H4V0Z%22%20fill%3D%22%23D9D9D9%22/%3E%3Cpath%20d%3D%22M8%204H4V8H8V4Z%22%20fill%3D%22%23D9D9D9%22/%3E%3C/svg%3E\")";
+/** @deprecated Use TRANSPARENT_BG_IMAGE with inline style instead */
+export declare const TRANSPARENT_PATTERN = "";
 export declare const DEFAULT_PRESET_COLORS: string[];
 type InputColorProps = Omit<React.ComponentProps<"input">, "onChange" | "value"> & {
     value?: string;

package/dist/components/ui-kit/PrefixInput/PrefixInput.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface PrefixOption {
+    label: string;
+    value: string;
+}
+export interface PrefixInputRenderProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export interface PrefixInputProps {
+    /** Full combined value (prefix + input text). */
+    value?: string;
+    /** Called with the full combined value whenever prefix or input text changes. */
+    onChange?: (fullValue: string) => void;
+    /** Available prefix options for the dropdown. */
+    prefixOptions: PrefixOption[];
+    /** Prefix to use when the value doesn't match any option. Defaults to the first option. */
+    defaultPrefix?: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    /**
+     * Render prop to provide a custom input element (e.g. VariableTextarea).
+     * If omitted, a plain <input> is rendered.
+     */
+    children?: (props: PrefixInputRenderProps) => React.ReactNode;
+}
+export declare const PrefixInput: React.ForwardRefExoticComponent<PrefixInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/ui-kit/PrefixInput/index.d.ts

@@ -0,0 +1,2 @@
+export { PrefixInput } from "./PrefixInput";
+export type { PrefixInputProps, PrefixInputRenderProps, PrefixOption } from "./PrefixInput";

package/dist/components/ui-kit/index.d.ts

@@ -2,12 +2,14 @@ export * from "./Button";
 export * from "./Divider";
 export * from "./DropdownMenu";
 export * from "./ErrorBoundary";
+export * from "./FontSelect";
 export * from "./Form";
 export * from "./AlertDialog";
 export * from "./Input";
 export * from "./InputColor";
 export * from "./Label";
 export * from "./Popover";
+export * from "./PrefixInput";
 export * from "./Separator";
 export * from "./Slider";
 export * from "./Switch";

package/dist/components/utils/resolveDataPath.d.ts

@@ -0,0 +1,13 @@
+export interface DataPathResolution {
+    exists: boolean;
+    value?: unknown;
+    isArray?: boolean;
+}
+/**
+ * Resolves a dot-separated data path against a sample data object.
+ *
+ * @param data - The root data object to resolve against
+ * @param path - Dot-separated path, e.g. "data.items" or "data.info.firstName"
+ * @returns Resolution result indicating whether the path exists and its value
+ */
+export declare function resolveDataPath(data: Record<string, unknown>, path: string): DataPathResolution;

package/dist/components/utils/validateVariableName.d.ts

@@ -1,6 +1,9 @@
 /**
- * Validates a variable name according to JSON property name rules
- * Valid: user.firstName, company.address.street, _private, user123
+ * Validates a variable name according to JSON property name rules.
+ * Also allows `$` as a valid identifier character to support loop
+ * references (e.g. `$.item.name`, `$.index`).
+ *
+ * Valid: user.firstName, company.address.street, _private, user123, $.item.name, $.index
  * Invalid: user. firstName (space), user. (trailing dot), user..name (double dot), 123invalid (starts with digit)
  *
  * @param variableName - The variable name to validate (without curly braces)