@trycourier/react-designer 0.0.0-canary-20251211163746 → 0.0.0-canary-20251219131027

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

@@ -1,4 +1,5 @@
 import type { ElementalContent } from "@/types/elemental.types";
+import type { VariableValidationConfig } from "@/types/validation.types";
 import type { Editor } from "@tiptap/react";
 export declare const subjectAtom: import("jotai").PrimitiveAtom<string | null> & {
     init: string | null;
@@ -29,6 +30,15 @@ export declare const isSidebarExpandedAtom: import("jotai").PrimitiveAtom<boolea
 export declare const variableValuesAtom: import("jotai").PrimitiveAtom<Record<string, string>> & {
     init: Record<string, string>;
 };
+export declare const availableVariablesAtom: import("jotai").PrimitiveAtom<Record<string, unknown>> & {
+    init: Record<string, unknown>;
+};
+export declare const disableVariablesAutocompleteAtom: import("jotai").PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+export declare const variableValidationAtom: import("jotai").PrimitiveAtom<VariableValidationConfig | undefined> & {
+    init: VariableValidationConfig | undefined;
+};
 export declare const isDraggingAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
@@ -45,3 +55,124 @@ export declare const flushFunctionsAtom: import("jotai").WritableAtom<Map<string
     fn?: FlushFunction;
 }], void>;
 export declare const flushAllPendingUpdates: (flushFunctions: Map<string, FlushFunction>) => void;
+/**
+ * Available block element types that can be used in the sidebar
+ */
+export type BlockElementType = "heading" | "text" | "image" | "spacer" | "divider" | "button" | "customCode" | "column" | "blockquote";
+/**
+ * Attributes that can be set as defaults or in presets for blocks.
+ * Types match the actual TipTap node attribute types for each extension.
+ */
+export interface BlockAttributes {
+    /** Background color (string, e.g., "#ffffff" or "transparent") */
+    backgroundColor?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Border width in pixels */
+    borderWidth?: number;
+    /** Border radius in pixels */
+    borderRadius?: number;
+    /** Vertical padding in pixels */
+    paddingVertical?: number;
+    /** Horizontal padding in pixels */
+    paddingHorizontal?: number;
+    /** Text alignment */
+    textAlign?: "left" | "center" | "right" | "justify";
+    /** Button label text */
+    label?: string;
+    /** Button link URL */
+    link?: string;
+    /** Button alignment */
+    alignment?: "left" | "center" | "right";
+    /** Button padding in pixels */
+    padding?: number;
+    /** Font weight */
+    fontWeight?: "normal" | "bold";
+    /** Font style */
+    fontStyle?: "normal" | "italic";
+    /** Underline text */
+    isUnderline?: boolean;
+    /** Strikethrough text */
+    isStrike?: boolean;
+    /** @deprecated Text color - legacy property */
+    textColor?: string;
+    /** Divider color */
+    color?: string;
+    /** Divider line thickness in pixels */
+    size?: number;
+    /** Divider corner radius */
+    radius?: number;
+    /** Divider variant type */
+    variant?: "divider" | "spacer";
+    /** Image source path/URL */
+    sourcePath?: string;
+    /** Image alt text */
+    alt?: string;
+    /** Image width as ratio (0-1, where 1 = 100%) */
+    width?: number;
+    /** HTML code content */
+    code?: string;
+    /** Number of columns (1-4) */
+    columnsCount?: number;
+    /** Left border width for blockquote */
+    borderLeftWidth?: number;
+    [key: string]: unknown;
+}
+/**
+ * A block preset is a pre-configured variant of an existing block type.
+ * For example, a "Portal Button" preset is a button with specific href and label.
+ */
+export interface BlockPreset {
+    /** The base block type this preset is built on */
+    type: BlockElementType;
+    /** Unique identifier for this preset */
+    key: string;
+    /** Display label in the sidebar */
+    label: string;
+    /** Optional custom icon (React node) */
+    icon?: React.ReactNode;
+    /** Pre-configured attributes for this preset */
+    attributes: BlockAttributes;
+}
+/**
+ * A reference to a preset in the visible blocks list
+ */
+export interface PresetReference {
+    /** The base block type */
+    type: BlockElementType;
+    /** The preset key */
+    preset: string;
+}
+/**
+ * A visible block item can be either:
+ * - A built-in block type string (e.g., "text", "button")
+ * - A preset reference (e.g., { type: "button", preset: "portal" })
+ */
+export type VisibleBlockItem = BlockElementType | PresetReference;
+/**
+ * Type guard to check if a VisibleBlockItem is a PresetReference
+ */
+export declare const isPresetReference: (item: VisibleBlockItem) => item is PresetReference;
+/**
+ * Default block elements available in the sidebar
+ */
+export declare const DEFAULT_VISIBLE_BLOCKS: VisibleBlockItem[];
+/**
+ * Atom to store visible blocks in the sidebar (and their order)
+ */
+export declare const visibleBlocksAtom: import("jotai").PrimitiveAtom<VisibleBlockItem[]> & {
+    init: VisibleBlockItem[];
+};
+/**
+ * Atom to store default attributes for each block type
+ * When a new block is created, these defaults are applied
+ */
+export declare const blockDefaultsAtom: import("jotai").PrimitiveAtom<Partial<Record<BlockElementType, BlockAttributes>>> & {
+    init: Partial<Record<BlockElementType, BlockAttributes>>;
+};
+/**
+ * Atom to store registered block presets
+ */
+export declare const blockPresetsAtom: import("jotai").PrimitiveAtom<BlockPreset[]> & {
+    init: BlockPreset[];
+};

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

@@ -8,16 +8,16 @@ export declare const blockquoteSchema: z.ZodObject<{
     id: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     backgroundColor: string;
+    borderColor: string;
     paddingVertical: number;
     paddingHorizontal: number;
-    borderColor: string;
     borderLeftWidth: number;
     id?: string | undefined;
 }, {
     backgroundColor: string;
+    borderColor: string;
     paddingVertical: number;
     paddingHorizontal: number;
-    borderColor: string;
     borderLeftWidth: number;
     id?: string | undefined;
 }>;

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

@@ -13,31 +13,31 @@ export declare const buttonSchema: z.ZodObject<{
     textColor: z.ZodOptional<z.ZodString>;
     borderColor: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    padding: number;
-    label: string;
     backgroundColor: string;
-    alignment: "left" | "center" | "right";
     borderRadius: number;
-    fontStyle: "italic" | "normal";
-    fontWeight: "bold" | "normal";
+    label: string;
+    alignment: "left" | "center" | "right";
+    padding: number;
+    fontWeight: "normal" | "bold";
+    fontStyle: "normal" | "italic";
     isUnderline: boolean;
     isStrike: boolean;
     link?: string | undefined;
-    textColor?: string | undefined;
     borderColor?: string | undefined;
+    textColor?: string | undefined;
 }, {
-    padding: number;
-    label: string;
     backgroundColor: string;
-    alignment: "left" | "center" | "right";
     borderRadius: number;
-    fontStyle: "italic" | "normal";
-    fontWeight: "bold" | "normal";
+    label: string;
+    alignment: "left" | "center" | "right";
+    padding: number;
+    fontWeight: "normal" | "bold";
+    fontStyle: "normal" | "italic";
     isUnderline: boolean;
     isStrike: boolean;
     link?: string | undefined;
-    textColor?: string | undefined;
     borderColor?: string | undefined;
+    textColor?: string | undefined;
 }>;
 export interface ButtonProps {
     label: string;

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

@@ -20,22 +20,22 @@ export declare const columnSchema: z.ZodObject<{
     }>, "many">>;
 }, "strip", z.ZodTypeAny, {
     backgroundColor: string;
-    paddingVertical: number;
-    paddingHorizontal: number;
-    borderWidth: number;
     borderColor: string;
+    borderWidth: number;
     borderRadius: number;
+    paddingVertical: number;
+    paddingHorizontal: number;
     columnsCount: number;
     cells?: {
         elements: any[];
     }[] | undefined;
 }, {
     backgroundColor?: string | undefined;
-    paddingVertical?: number | undefined;
-    paddingHorizontal?: number | undefined;
-    borderWidth?: number | undefined;
     borderColor?: string | undefined;
+    borderWidth?: number | undefined;
     borderRadius?: number | undefined;
+    paddingVertical?: number | undefined;
+    paddingHorizontal?: number | undefined;
     columnsCount?: number | undefined;
     cells?: {
         elements: any[];

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

@@ -9,8 +9,8 @@ export declare const dividerSchema: z.ZodObject<{
     padding: number;
     color: string;
     size: number;
-    variant: "divider" | "spacer";
     radius: number;
+    variant: "divider" | "spacer";
 }, {
     padding: number;
     color: string;

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

@@ -10,21 +10,21 @@ export declare const imageBlockSchema: z.ZodObject<{
     isUploading: z.ZodOptional<z.ZodBoolean>;
     imageNaturalWidth: z.ZodNumber;
 }, "strip", z.ZodTypeAny, {
-    width: number;
-    borderWidth: number;
     borderColor: string;
+    borderWidth: number;
     alignment: "left" | "center" | "right";
     sourcePath: string;
+    width: number;
     imageNaturalWidth: number;
     link?: string | undefined;
     alt?: string | undefined;
     isUploading?: boolean | undefined;
 }, {
-    width: number;
-    borderWidth: number;
     borderColor: string;
+    borderWidth: number;
     alignment: "left" | "center" | "right";
     sourcePath: string;
+    width: number;
     imageNaturalWidth: number;
     link?: string | undefined;
     alt?: string | undefined;

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

@@ -10,19 +10,19 @@ export declare const textBlockSchema: z.ZodObject<{
     id: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
     paddingVertical: number;
     paddingHorizontal: number;
-    borderWidth: number;
-    borderColor: string;
     textAlign: "left" | "center" | "right" | "justify";
     selected: boolean;
     id?: string | undefined;
 }, {
     backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
     paddingVertical: number;
     paddingHorizontal: number;
-    borderWidth: number;
-    borderColor: string;
     id?: string | undefined;
     textAlign?: "left" | "center" | "right" | "justify" | undefined;
     selected?: boolean | undefined;

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

@@ -1,7 +1,20 @@
 import { Extension, Node } from "@tiptap/core";
-import type { VariableNodeOptions } from "./Variable.types";
+import type { VariableNodeOptions, VariableOptions } from "./Variable.types";
 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)
  */
 export declare const VariableInputRule: Extension<any, any>;
+/**
+ * Extension that provides variable autocomplete suggestions.
+ * When user types {{, shows a dropdown with available variables.
+ * Pass `variables` option to configure available variables.
+ * Pass `disableSuggestions: true` to disable autocomplete (falls back to VariableInputRule behavior).
+ */
+export declare const Variable: Extension<VariableOptions, any>;
+/**
+ * @deprecated This extension has been removed. Variable conversion now happens via VariableInputRule or Variable.
+ * This is a no-op extension provided for backwards compatibility and will be removed in a future major version.
+ */
+export declare const VariableTypeHandler: Extension<any, any>;

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

@@ -1,3 +1,5 @@
+import type { Editor, Range } from "@tiptap/core";
+import type { SuggestionOptions, SuggestionProps } from "@tiptap/suggestion";
 export interface VariableNodeOptions {
     HTMLAttributes?: Record<string, unknown>;
 }
@@ -5,3 +7,38 @@ export interface VariableNodeAttributes {
     id: string;
     isInvalid: boolean;
 }
+/**
+ * Options for the Variable suggestion extension that provides autocomplete.
+ */
+export interface VariableOptions {
+    HTMLAttributes?: Record<string, unknown>;
+    suggestion?: Partial<SuggestionOptions>;
+    /** Variables available for autocomplete suggestions */
+    variables?: Record<string, unknown>;
+    /** When true, disables the autocomplete dropdown */
+    disableSuggestions?: boolean;
+}
+export interface VariableCommandProps {
+    editor: Editor;
+    range: Range;
+    props: string;
+}
+export interface VariableSuggestionProps {
+    editor: Editor;
+    range: Range;
+    clientRect: () => DOMRect | null;
+    items: string[];
+    command: (props: {
+        editor: Editor;
+        range: Range;
+        props: string;
+    }) => void;
+    selected: number;
+}
+export interface VariableSuggestionsProps extends SuggestionProps {
+    items: string[];
+    command: (item: string) => void;
+    editor: Editor;
+    query: string;
+    selected: number;
+}

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

@@ -0,0 +1,7 @@
+interface VariableSuggestionsProps {
+    items: string[];
+    command: (item: string) => void;
+    selected: number;
+}
+export declare const VariableSuggestions: React.FC<VariableSuggestionsProps>;
+export {};

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

@@ -1,3 +1,4 @@
 export * from "./Variable";
 export * from "./Variable.types";
 export * from "./VariablePaste";
+export * from "./VariableSuggestions";

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

@@ -0,0 +1,2 @@
+import type { SuggestionOptions } from "@tiptap/suggestion";
+export declare const suggestion: Partial<SuggestionOptions>;

package/dist/components/extensions/extension-kit.d.ts

@@ -1,6 +1,11 @@
 import type { Node } from "@tiptap/pm/model";
-export declare const ExtensionKit: (options?: {
+export interface ExtensionKitOptions {
     setSelectedNode?: (node: Node) => void;
     shouldHandleClick?: () => boolean;
-}) => (import("@tiptap/core").Node<any, any> | import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-underline").UnderlineOptions, any>)[];
+    /** Variables available for autocomplete suggestions */
+    variables?: Record<string, unknown>;
+    /** When true, disables variable autocomplete and allows typing any variable */
+    disableVariablesAutocomplete?: boolean;
+}
+export declare const ExtensionKit: (options?: ExtensionKitOptions) => (import("@tiptap/core").Node<any, any> | import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-underline").UnderlineOptions, any>)[];
 export default ExtensionKit;

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

@@ -27,4 +27,4 @@ export { Paragraph } from "./Paragraph";
 export { Selection } from "./Selection";
 export { SlashMenu } from "./SlashMenu";
 export { UniqueId } from "./UniqueId";
-export { VariableNode, VariableInputRule, VariablePaste } from "./Variable";
+export { VariableNode, VariableInputRule, VariablePaste, Variable, VariableTypeHandler, } from "./Variable";

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

@@ -1,2 +1,3 @@
 export * from "./useNodeAttributes";
 export * from "./useVariables";
+export * from "./useBlockConfig";

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

@@ -0,0 +1,110 @@
+import { type BlockElementType, type BlockAttributes, type BlockPreset, type VisibleBlockItem, type PresetReference } from "../TemplateEditor/store";
+export interface UseBlockConfigResult {
+    /**
+     * Currently visible blocks in the sidebar.
+     * Can include both built-in block types and preset references.
+     */
+    visibleBlocks: VisibleBlockItem[];
+    /**
+     * Set which blocks are visible in the sidebar (and their order).
+     * Use strings for built-in blocks and { type, preset } for presets.
+     *
+     * @example
+     * setVisibleBlocks([
+     *   'text',
+     *   { type: 'button', preset: 'portal' },  // preset between text and image
+     *   'image',
+     *   'button',
+     * ]);
+     */
+    setVisibleBlocks: (blocks: VisibleBlockItem[]) => void;
+    /**
+     * Reset visible blocks to defaults
+     */
+    resetVisibleBlocks: () => void;
+    /**
+     * Default visible blocks for reference
+     */
+    defaultVisibleBlocks: VisibleBlockItem[];
+    /**
+     * Set default attributes for a block type.
+     * These defaults are applied when creating new blocks of this type.
+     */
+    setDefaults: (type: BlockElementType, defaults: BlockAttributes) => void;
+    /**
+     * Get default attributes for a block type
+     */
+    getDefaults: (type: BlockElementType) => BlockAttributes | undefined;
+    /**
+     * Clear defaults for a block type (revert to built-in defaults)
+     */
+    clearDefaults: (type: BlockElementType) => void;
+    /**
+     * Register a block preset (pre-configured variant of a block type)
+     */
+    registerPreset: (preset: BlockPreset) => void;
+    /**
+     * Unregister a preset by type and key
+     */
+    unregisterPreset: (type: BlockElementType, key: string) => void;
+    /**
+     * Get all registered presets
+     */
+    presets: BlockPreset[];
+    /**
+     * Get presets for a specific block type
+     */
+    getPresetsForType: (type: BlockElementType) => BlockPreset[];
+    /**
+     * Insert a block at the end of the document.
+     * If presetKey is provided, uses the preset's attributes.
+     * Otherwise, uses the type's defaults (if set).
+     */
+    insertBlock: (type: BlockElementType, presetKey?: string) => void;
+}
+/**
+ * Hook to configure and manage block elements in the editor.
+ *
+ * This hook provides a comprehensive API for:
+ * - Controlling which blocks appear in the sidebar and their order
+ * - Setting default attributes for block types
+ * - Creating and managing block presets (pre-configured variants)
+ * - Programmatically inserting blocks
+ *
+ * @returns Object containing all block configuration functions and state
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   visibleBlocks,
+ *   setVisibleBlocks,
+ *   setDefaults,
+ *   registerPreset,
+ *   insertBlock,
+ * } = useBlockConfig();
+ *
+ * // Register a preset first
+ * registerPreset({
+ *   type: 'button',
+ *   key: 'portal',
+ *   label: 'Go to Portal',
+ *   attributes: { href: 'https://portal.example.com', content: 'Go to Portal' }
+ * });
+ *
+ * // Control which blocks appear in sidebar (including presets)
+ * setVisibleBlocks([
+ *   'text',
+ *   { type: 'button', preset: 'portal' },  // Preset between text and image
+ *   'image',
+ *   'button',
+ * ]);
+ *
+ * // Set defaults for all new buttons
+ * setDefaults('button', { borderRadius: '4px', backgroundColor: '#007bff' });
+ *
+ * // Insert a block programmatically
+ * insertBlock('button', 'portal');
+ * ```
+ */
+export declare const useBlockConfig: () => UseBlockConfigResult;
+export type { BlockElementType, BlockAttributes, BlockPreset, VisibleBlockItem, PresetReference };

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

@@ -1 +1 @@
-export { CustomCodeBlock } from "./CustomCodeBlock";
+export * from "./CustomCodeBlock";

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

@@ -0,0 +1,16 @@
+import React from "react";
+export interface VariableAutocompleteProps {
+    /** List of variable suggestions to show */
+    items: string[];
+    /** Called when an item is selected */
+    onSelect: (item: string) => void;
+    /** Currently selected index */
+    selectedIndex: number;
+    /** Reference element to position the dropdown near */
+    anchorRef: React.RefObject<HTMLElement>;
+}
+/**
+ * Autocomplete dropdown for variable suggestions.
+ * Shows a list of available variables that can be selected.
+ */
+export declare const VariableAutocomplete: React.FC<VariableAutocompleteProps>;

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

@@ -0,0 +1,15 @@
+import type { Editor } from "@tiptap/react";
+export interface VariableEditorToolbarProps {
+    editor: Editor | null;
+    className?: string;
+}
+/**
+ * A minimal bubble menu for VariableInput and VariableTextarea
+ * that shows only the variable insertion button.
+ * Reuses the existing TextMenu component with a variable-only config.
+ *
+ * Important: This component keeps the BubbleMenu mounted and controls
+ * visibility through shouldShow callback to avoid DOM cleanup issues
+ * when the editor's editable state changes.
+ */
+export declare const VariableEditorToolbar: React.FC<VariableEditorToolbarProps>;

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

@@ -3,6 +3,8 @@ import { type VariableEditorBaseProps } from "./shared";
 export interface VariableInputProps extends VariableEditorBaseProps {
     /** Whether the input is read-only */
     readOnly?: boolean;
+    /** Whether to show the variable toolbar */
+    showToolbar?: boolean;
 }
 /**
  * A single-line input that renders {{variable}} patterns as styled chips.

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

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { type VariableEditorBaseProps } from "./shared";
 export interface VariableTextareaProps extends VariableEditorBaseProps {
+    /** Whether to show the variable toolbar */
+    showToolbar?: boolean;
 }
 /**
  * A textarea-like input that renders {{variable}} patterns as styled chips.

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

@@ -2,5 +2,7 @@ export { VariableTextarea } from "./VariableTextarea";
 export type { VariableTextareaProps } from "./VariableTextarea";
 export { VariableInput } from "./VariableInput";
 export type { VariableInputProps } from "./VariableInput";
+export { VariableEditorToolbar } from "./VariableEditorToolbar";
+export type { VariableEditorToolbarProps } from "./VariableEditorToolbar";
 export { parseStringToContent, contentToString, SimpleVariableNode, SimpleVariableView, VariableChipIcon, } from "./shared";
 export type { VariableEditorBaseProps } from "./shared";