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

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

@@ -29,7 +29,7 @@ export interface VariableChipBaseProps {
     className?: string;
     /** Override text color (e.g., for button context) */
     textColorOverride?: string;
-    /** Custom color getter function */
+    /** Custom color getter function (kept for API compatibility, colors handled by CSS) */
     getColors?: (isInvalid: boolean, hasValue: boolean) => VariableColors;
 }
 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";