@trycourier/react-designer 0.6.0 → 0.8.0

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/ImageBlock/components/ImageBlockView.d.ts

@@ -1,4 +1,4 @@
-import type { Editor, NodeViewProps } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/react";
 import React from "react";
 import type { ImageBlockProps } from "../ImageBlock.types";
 export declare const ImageBlockComponent: React.FC<ImageBlockProps & {
@@ -7,7 +7,5 @@ export declare const ImageBlockComponent: React.FC<ImageBlockProps & {
     draggable?: boolean;
     onFileSelect?: (file: File) => void;
     width: number;
-    imageNaturalWidth: number;
-    editor?: Editor;
 }>;
 export declare const ImageBlockView: (props: NodeViewProps) => import("react/jsx-runtime").JSX.Element;

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/MessagingChannelPaste/MessagingChannelPaste.d.ts

@@ -0,0 +1,11 @@
+import { Extension } from "@tiptap/core";
+export interface MessagingChannelPasteOptions {
+    /** Convert all headings to this level, or "strip" to convert headings to paragraphs. */
+    headingBehavior: {
+        level: number;
+    } | "strip";
+    /** Node type names that should be silently dropped on paste (e.g. "button" for Teams). */
+    blockedNodeTypes?: string[];
+}
+export declare const MessagingChannelPaste: Extension<MessagingChannelPasteOptions, any>;
+export default MessagingChannelPaste;

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

@@ -0,0 +1,2 @@
+export { MessagingChannelPaste } from "./MessagingChannelPaste";
+export type { MessagingChannelPasteOptions } from "./MessagingChannelPaste";

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

@@ -4,6 +4,11 @@ export declare const VariableNode: Node<VariableNodeOptions, any>;
 /**
  * Extension that inserts an empty variable chip when user types {{
  * This is used when autocomplete is disabled (disableVariablesAutocomplete=true)
+ *
+ * Storage:
+ * - `disabled`: When true, typing {{ will not create variable chips.
+ *   Set this from React via `editor.storage.variableInputRule.disabled = true`
+ *   when the `variables` prop is not provided to TemplateEditor.
  */
 export declare const VariableInputRule: Extension<any, any>;
 /**

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;
+        };
+    };
+};

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/ContentTypePicker.d.ts

@@ -19,4 +19,4 @@ export interface ContentTypePickerProps {
     options: ContentPickerOptions;
     containerRef?: RefObject<HTMLDivElement>;
 }
-export declare const ContentTypePicker: ({ options, containerRef }: ContentTypePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentTypePicker: ({ options, containerRef }: ContentTypePickerProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -12,6 +12,8 @@ export declare const useTextmenuStates: (editor: Editor | null) => {
     isOrderedList: boolean;
     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

@@ -33,5 +33,15 @@ export interface VariableChipBaseProps {
     getColors?: (isInvalid: boolean, hasValue: boolean) => VariableColors;
     /** Whether the chip is read-only (prevents editing) */
     readOnly?: boolean;
+    /** Formatting styles derived from TipTap marks (bold, italic, underline, strikethrough) */
+    formattingStyle?: React.CSSProperties;
+    /** Whether the chip is within the current text selection */
+    isSelected?: boolean;
+    /** Called when the chip is clicked for selection (not editing) */
+    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/VariableEditor/VariableInput.d.ts

@@ -1,5 +1,23 @@
 import * as React from "react";
 import { type VariableEditorBaseProps } from "./shared";
+/**
+ * Determines if a click landed in the empty space of a VariableInput and returns
+ * the correct target position to place the caret, or null if no correction is needed.
+ *
+ * This handles two cases where the browser's native click handler misplaces the caret
+ * inside a flex-layout ProseMirror editor with non-editable variable chip nodes:
+ *
+ * Case 1 (depth === 0): posAtCoords returned {inside: -1}, meaning the click didn't
+ *   land inside any node. The resolved position is at the doc level.
+ *
+ * Case 2 (depth > 0, clickX past content): posAtCoords returned a paragraph-level
+ *   position, but the click coordinates are past the visible content's right edge.
+ *   Common when content ends with a variable chip.
+ */
+export declare function resolveEmptySpaceClick(posDepth: number, pos: number, paragraphContentSize: number, clickX: number, endCoordsRight: number | null): {
+    targetPos: number;
+    bias: -1 | 1;
+} | null;
 export interface VariableInputProps extends VariableEditorBaseProps {
     /** Whether the input is read-only */
     readOnly?: boolean;

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)