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

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

@@ -0,0 +1,15 @@
+import { Node } from "@tiptap/core";
+import type { ListProps } from "./List.types";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        list: {
+            setList: (props?: Partial<ListProps>) => ReturnType;
+            toggleList: () => ReturnType;
+            toggleOrderedList: () => ReturnType;
+            toggleBulletList: () => ReturnType;
+        };
+    }
+}
+export declare const defaultListProps: ListProps;
+export declare const List: Node<any, any>;
+export default List;

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

@@ -0,0 +1,9 @@
+export interface ListProps {
+    /** Whether the list is ordered (numbered) or unordered (bulleted) */
+    listType: "ordered" | "unordered";
+    /** Unique identifier for the list node */
+    id?: string;
+    /** Locale-specific content overrides */
+    locales?: Record<string, unknown>;
+}
+export declare const defaultListProps: ListProps;

package/dist/components/extensions/List/ListComponent.d.ts

@@ -0,0 +1,9 @@
+import { type NodeViewProps } from "@tiptap/react";
+/**
+ * List NodeView component that renders the list.
+ *
+ * Uses SortableItemWrapper for proper drag-and-drop reordering,
+ * selection styling, and action buttons (duplicate, delete).
+ */
+export declare const ListComponentNode: (props: NodeViewProps) => import("react/jsx-runtime").JSX.Element;
+export default ListComponentNode;

package/dist/components/extensions/List/ListForm.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from "@tiptap/core";
+import type { Node } from "@tiptap/pm/model";
+interface ListFormProps {
+    element: Node;
+    editor: Editor | null;
+}
+export declare const ListForm: ({ element, editor }: ListFormProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ListForm;

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

@@ -0,0 +1,3 @@
+export { List, defaultListProps } from "./List";
+export { ListForm } from "./ListForm";
+export type { ListProps } from "./List.types";

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

@@ -0,0 +1,34 @@
+import { Node } from "@tiptap/core";
+import type { ListItemProps } from "./ListItem.types";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        listItem: {
+            /** Split the list item at the current cursor position */
+            splitListItem: (typeOrName: string) => ReturnType;
+            /** Lift the list item out of the list (outdent) */
+            liftListItem: (typeOrName: string) => ReturnType;
+            /** Sink the list item into a nested list (indent) */
+            sinkListItem: (typeOrName: string) => ReturnType;
+            /** Wrap selection in a list */
+            wrapInList: (typeOrName: string, attrs?: Record<string, unknown>) => ReturnType;
+        };
+    }
+}
+export declare const defaultListItemProps: ListItemProps;
+/**
+ * Custom ListItem extension with prosemirror-schema-list commands.
+ *
+ * Provides commands:
+ * - splitListItem: Split list item at cursor (creates new bullet)
+ * - liftListItem: Lift list item out of list (outdent)
+ * - sinkListItem: Sink list item into nested list (indent)
+ * - wrapInList: Wrap selection in a list
+ *
+ * Keyboard shortcuts:
+ * - Enter: Split list item (handled in List extension)
+ * - Tab: Sink list item (handled in List extension)
+ * - Shift-Tab: Lift list item (handled in List extension)
+ * - Shift-Enter: Add a hard break (new line within the paragraph)
+ */
+export declare const ListItem: Node<any, any>;
+export default ListItem;

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

@@ -0,0 +1,7 @@
+export interface ListItemProps {
+    /** Background color for the list item */
+    backgroundColor?: string;
+    /** Unique identifier for the list item node */
+    id?: string;
+}
+export declare const defaultListItemProps: ListItemProps;

package/dist/components/extensions/ListItem/ListItemComponent.d.ts

@@ -0,0 +1,7 @@
+import { type NodeViewProps } from "@tiptap/react";
+/**
+ * Simple ListItem NodeView that renders as a standard <li> element.
+ * Uses NodeViewContent to allow prosemirror to manage the content.
+ */
+export declare const ListItemComponentNode: (props: NodeViewProps) => import("react/jsx-runtime").JSX.Element;
+export default ListItemComponentNode;

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

@@ -0,0 +1,2 @@
+export { ListItem, defaultListItemProps } from "./ListItem";
+export type { ListItemProps } from "./ListItem.types";

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

@@ -23,8 +23,10 @@ export { FixedChannelSelection } from "./FixedChannelSelection";
 export { Heading } from "./Heading";
 export { ImageBlock } from "./ImageBlock";
 export { Link } from "./Link";
+export { List } from "./List";
+export { ListItem } from "./ListItem";
 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/Blocks/ListBlock/ListBlock.d.ts

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

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

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

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

@@ -6,5 +6,6 @@ export * from "./CustomCodeBlock";
 export * from "./DividerBlock";
 export * from "./HeadingBlock";
 export * from "./ImageBlock";
+export * from "./ListBlock";
 export * from "./SpacerBlock";
 export * from "./TextBlock";

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

@@ -1,5 +1,5 @@
 interface FormHeaderProps {
-    type: "text" | "image" | "spacer" | "divider" | "button" | "blockquote" | "heading" | "customCode" | "column";
+    type: "text" | "image" | "spacer" | "divider" | "button" | "blockquote" | "heading" | "customCode" | "column" | "list";
     label?: string;
 }
 export declare const FormHeader: ({ type }: FormHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -31,5 +31,7 @@ export interface VariableChipBaseProps {
     textColorOverride?: string;
     /** Custom color getter function (kept for API compatibility, colors handled by CSS) */
     getColors?: (isInvalid: boolean, hasValue: boolean) => VariableColors;
+    /** Whether the chip is read-only (prevents editing) */
+    readOnly?: boolean;
 }
 export declare const VariableChipBase: React.FC<VariableChipBaseProps>;

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";