treege 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/editor/components/input/ComboboxWithCreate.d.ts

@@ -5,7 +5,8 @@ export type ComboboxOption = {
 /**
  * Reusable Combobox component with search, create, and clear functionality
  */
-declare const ComboboxWithCreate: ({ options, value, onValueChange, placeholder, searchPlaceholder, createLabel, clearLabel, emptyLabel, className, allowClear, allowCreate, }: {
+declare const ComboboxWithCreate: ({ options, id, value, onValueChange, placeholder, searchPlaceholder, createLabel, clearLabel, emptyLabel, className, allowClear, allowCreate, }: {
+    id?: string;
     options: ComboboxOption[];
     value?: string | null;
     onValueChange?: (newValue: string) => void;

package/dist/editor/constants/defaultNode.d.ts

@@ -1,4 +1,4 @@
-export declare const defaultNode: {
+export declare const DEFAULT_NODE: {
     data: {
         type: string;
     };

package/dist/editor/constants/edgeTypes.d.ts

@@ -1,3 +1,4 @@
-export declare const edgeTypes: {
-    conditional: ({ id, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, style, data, }: import('../features/TreegeEditor/edges/ConditionalEdge').ConditionalEdgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EDGE_TYPES: {
+    conditional: import('react').MemoExoticComponent<({ id, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, style, data, }: import('../features/TreegeEditor/edges/ConditionalEdge').ConditionalEdgeProps) => import("react/jsx-runtime").JSX.Element>;
+    default: import('react').MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, selected }: import('@xyflow/react').EdgeProps) => import("react/jsx-runtime").JSX.Element>;
 };

package/dist/editor/constants/nodeSpacing.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Constants for node spacing and positioning in the flow editor
+ */
+/**
+ * Vertical spacing between nodes (in pixels)
+ * Used when creating nodes via handle click or AI generation
+ */
+export declare const VERTICAL_NODE_SPACING = 100;
+/**
+ * Horizontal offset when placing sibling nodes (in pixels)
+ */
+export declare const HORIZONTAL_NODE_OFFSET = 50;
+/**
+ * Horizontal spacing for AI-generated flows (in pixels)
+ */
+export declare const AI_HORIZONTAL_SPACING = 350;
+/**
+ * Position tolerance for detecting nodes at the same Y position (in pixels)
+ */
+export declare const POSITION_TOLERANCE = 20;

package/dist/editor/constants/nodeTypes.d.ts

@@ -1,6 +1,6 @@
-export declare const nodeTypes: {
-    flow: ({ data, isConnectable, type, parentId }: import('../features/TreegeEditor/nodes/FlowNode').FlowNodeProps) => import("react/jsx-runtime").JSX.Element;
-    group: ({ data }: import('../features/TreegeEditor/nodes/GroupNode').GroupNodeProps) => import("react/jsx-runtime").JSX.Element;
-    input: ({ data, isConnectable, type, parentId }: import('../features/TreegeEditor/nodes/InputNode').InputNodeProps) => import("react/jsx-runtime").JSX.Element;
-    ui: ({ data, isConnectable, type, parentId }: import('../features/TreegeEditor/nodes/UINode').UINodeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NODE_TYPES: {
+    flow: import('react').MemoExoticComponent<({ data, isConnectable, parentId, type, id }: import('../features/TreegeEditor/nodes/TreegeNode').TreegeNodeProps) => import("react/jsx-runtime").JSX.Element>;
+    group: import('react').MemoExoticComponent<({ data, id }: import('../features/TreegeEditor/nodes/GroupNode').GroupNodeProps) => import("react/jsx-runtime").JSX.Element>;
+    input: import('react').MemoExoticComponent<({ data, isConnectable, parentId, type, id }: import('../features/TreegeEditor/nodes/TreegeNode').TreegeNodeProps) => import("react/jsx-runtime").JSX.Element>;
+    ui: import('react').MemoExoticComponent<({ data, isConnectable, parentId, type, id }: import('../features/TreegeEditor/nodes/TreegeNode').TreegeNodeProps) => import("react/jsx-runtime").JSX.Element>;
 };

package/dist/editor/context/TreegeEditorContext.d.ts

@@ -1,11 +1,34 @@
 import { PropsWithChildren } from 'react';
+import { AIConfig } from '../types/ai';
 export interface TreegeEditorContextValue {
+    /**
+     * Current language
+     */
     language: string;
+    /**
+     * Current flow ID
+     */
     flowId?: string;
+    /**
+     * Function to set the current flow ID
+     * @param flow
+     */
     setFlowId?: (flow?: string) => void;
+    /**
+     * AI configuration for tree generation
+     */
+    aiConfig?: AIConfig;
+    /**
+     * Whether the node actions sheet is open
+     */
+    isNodeSheetOpen: boolean;
+    /**
+     * Function to open or close the node actions sheet
+     */
+    setIsNodeSheetOpen: (open: boolean) => void;
 }
 export interface TreegeEditorProviderProps extends PropsWithChildren {
-    value: TreegeEditorContextValue;
+    value: Omit<TreegeEditorContextValue, "isNodeSheetOpen" | "setIsNodeSheetOpen">;
 }
 export declare const TreegeEditorContext: import('react').Context<TreegeEditorContextValue | null>;
 export declare const TreegeEditorProvider: ({ children, value }: TreegeEditorProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/features/TreegeEditor/TreegeEditor.d.ts

@@ -1,3 +1,3 @@
 import { TreegeEditorProps } from '../../types/editor';
-declare const TreegeEditor: ({ edges, nodes, flow, onExportJson, onSave, theme, language }: TreegeEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TreegeEditor: ({ flow, onExportJson, onSave, theme, language, aiConfig }: TreegeEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default TreegeEditor;

package/dist/editor/features/TreegeEditor/edges/ConditionalEdge.d.ts

@@ -2,5 +2,5 @@ import { Edge, EdgeProps } from '@xyflow/react';
 import { ConditionalEdgeData } from '../../../../shared/types/edge';
 export type ConditionalEdgeType = Edge<ConditionalEdgeData, "conditional">;
 export type ConditionalEdgeProps = EdgeProps<ConditionalEdgeType>;
-declare const ConditionalEdge: ({ id, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, style, data, }: ConditionalEdgeProps) => import("react/jsx-runtime").JSX.Element;
-export default ConditionalEdge;
+declare const _default: import('react').MemoExoticComponent<({ id, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, style, data, }: ConditionalEdgeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/editor/features/TreegeEditor/edges/DefaultEdge.d.ts

@@ -0,0 +1,3 @@
+import { EdgeProps } from '@xyflow/react';
+declare const _default: import('react').MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, selected }: EdgeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/editor/features/TreegeEditor/forms/SubmitConfigForm.d.ts

@@ -0,0 +1,7 @@
+import { SubmitConfig } from '../../../../shared/types/node';
+interface SubmitConfigFormProps {
+    value: SubmitConfig | undefined;
+    onChange: (config: SubmitConfig | undefined) => void;
+}
+declare const SubmitConfigForm: ({ value, onChange }: SubmitConfigFormProps) => import("react/jsx-runtime").JSX.Element;
+export default SubmitConfigForm;

package/dist/editor/features/TreegeEditor/inputs/ComboboxPattern.d.ts

@@ -1,6 +1,7 @@
 interface ComboboxPatternProps {
     value?: string | null;
     onValueChange?: (newValue: string) => void;
+    id?: string;
 }
-declare const ComboboxPattern: ({ value, onValueChange }: ComboboxPatternProps) => import("react/jsx-runtime").JSX.Element;
+declare const ComboboxPattern: ({ id, value, onValueChange }: ComboboxPatternProps) => import("react/jsx-runtime").JSX.Element;
 export default ComboboxPattern;

package/dist/editor/features/TreegeEditor/inputs/OptionImageField.d.ts

@@ -0,0 +1,6 @@
+interface OptionImageFieldProps {
+    value?: string;
+    onChange: (value: string) => void;
+}
+declare const OptionImageField: ({ value, onChange }: OptionImageFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionImageField;

package/dist/editor/features/TreegeEditor/nodes/GroupNode.d.ts

@@ -2,5 +2,5 @@ import { Node, NodeProps } from '@xyflow/react';
 import { GroupNodeData } from '../../../../shared/types/node';
 export type GroupNodeType = Node<GroupNodeData, "group">;
 export type GroupNodeProps = NodeProps<GroupNodeType>;
-declare const GroupNode: ({ data }: GroupNodeProps) => import("react/jsx-runtime").JSX.Element;
-export default GroupNode;
+declare const _default: import('react').MemoExoticComponent<({ data, id }: GroupNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/editor/features/TreegeEditor/nodes/TreegeNode.d.ts

@@ -0,0 +1,6 @@
+import { Node, NodeProps } from '@xyflow/react';
+import { FlowNodeData, InputNodeData, UINodeData } from '../../../../shared/types/node';
+export type TreegeNodeType = Node<FlowNodeData, "flow"> | Node<InputNodeData, "input"> | Node<UINodeData, "ui">;
+export type TreegeNodeProps = NodeProps<TreegeNodeType>;
+declare const _default: import('react').MemoExoticComponent<({ data, isConnectable, parentId, type, id }: TreegeNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/editor/features/TreegeEditor/nodes/components/BottomHandleDropdown.d.ts

@@ -0,0 +1,6 @@
+interface BottomHandleDropdownProps {
+    nodeId: string;
+    isConnectable?: boolean;
+}
+declare const BottomHandleDropdown: ({ nodeId, isConnectable }: BottomHandleDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default BottomHandleDropdown;

package/dist/editor/features/TreegeEditor/nodes/components/NodeLabelInput.d.ts

@@ -0,0 +1,9 @@
+import { Translatable } from '../../../../../shared/types/translate';
+interface NodeLabelInputProps {
+    nodeId: string;
+    label?: Translatable;
+    placeholder?: string;
+    className?: string;
+}
+declare const NodeLabelInput: ({ nodeId, label, placeholder, className }: NodeLabelInputProps) => import("react/jsx-runtime").JSX.Element;
+export default NodeLabelInput;

package/dist/editor/features/TreegeEditor/nodes/components/NodeTypeBadge.d.ts

@@ -0,0 +1,8 @@
+import { NODE_TYPES } from '../../../../constants/nodeTypes';
+type NodeTypeKey = keyof typeof NODE_TYPES;
+interface NodeTypeBadgeProps {
+    nodeId: string;
+    type: NodeTypeKey;
+}
+declare const NodeTypeBadge: ({ nodeId, type }: NodeTypeBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default NodeTypeBadge;

package/dist/editor/features/TreegeEditor/nodes/components/OpenSheetButton.d.ts

@@ -0,0 +1,6 @@
+interface OpenSheetButtonProps {
+    nodeId: string;
+    className?: string;
+}
+declare const OpenSheetButton: ({ nodeId, className }: OpenSheetButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default OpenSheetButton;

package/dist/editor/features/TreegeEditor/nodes/components/SubTypeBadge.d.ts

@@ -0,0 +1,8 @@
+type SubTypeOwnerType = "input" | "ui";
+interface SubTypeBadgeProps {
+    nodeId: string;
+    type: SubTypeOwnerType;
+    subType?: string;
+}
+declare const SubTypeBadge: ({ nodeId, type, subType }: SubTypeBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default SubTypeBadge;

package/dist/editor/features/TreegeEditor/nodes/layout/NodeWrapper.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 interface NodeWrapperProps extends PropsWithChildren {
     inGroup: boolean;
+    isSubmit?: boolean;
 }
-declare const NodeWrapper: ({ children, inGroup }: NodeWrapperProps) => import("react/jsx-runtime").JSX.Element;
+declare const NodeWrapper: ({ children, inGroup, isSubmit }: NodeWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export default NodeWrapper;

package/dist/editor/features/TreegeEditor/panel/AIGeneratorDialog.d.ts

@@ -0,0 +1,16 @@
+import { Edge, Node } from '@xyflow/react';
+import { AIConfig } from '../../../types/ai';
+export interface AIGeneratorDialogProps {
+    /**
+     * AI configuration from context
+     */
+    aiConfig?: AIConfig;
+    /**
+     * Callback when tree is generated
+     */
+    onGenerate: (data: {
+        edges: Edge[];
+        nodes: Node[];
+    }) => void;
+}
+export declare const AIGeneratorDialog: ({ aiConfig, onGenerate }: AIGeneratorDialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/hooks/useFlowActions.d.ts

@@ -4,6 +4,8 @@
  */
 declare const useFlowActions: () => {
     clearSelection: () => void;
+    deleteSelectedNode: () => void;
+    selectNode: (id: string) => void;
     updateNodeData: <T extends Record<string, unknown>>(id: string, data: Partial<T>) => void;
     updateNodeType: (id: string, type: string) => void;
     updateSelectedNodeData: <T extends Record<string, unknown>>(data: Partial<T>) => void;

package/dist/editor/hooks/useFlowConnections.d.ts

@@ -8,6 +8,10 @@ declare const useFlowConnections: () => {
         source: string;
         target: string;
     }) => boolean;
+    onAddFromHandle: (sourceNodeId: string, nodeInit?: {
+        type: string;
+        data?: Record<string, unknown>;
+    }) => void;
     onConnect: OnConnect;
     onConnectEnd: OnConnectEnd;
     onEdgesDelete: OnEdgesDelete;

package/dist/editor/hooks/useNodesSelection.d.ts

@@ -10,10 +10,10 @@ declare const useNodesSelection: <TNodeData extends TreegeNodeData = TreegeNodeD
     nodes: TreegeNode[];
     selectedNode: ({
         id: string;
-        position: import('@xyflow/react').XYPosition;
+        position: import('@xyflow/system').XYPosition;
         data: TreegeNodeData;
-        sourcePosition?: import('@xyflow/react').Position;
-        targetPosition?: import('@xyflow/react').Position;
+        sourcePosition?: import('@xyflow/system').Position;
+        targetPosition?: import('@xyflow/system').Position;
         hidden?: boolean;
         selected?: boolean;
         dragging?: boolean;
@@ -28,10 +28,10 @@ declare const useNodesSelection: <TNodeData extends TreegeNodeData = TreegeNodeD
         initialHeight?: number;
         parentId?: string;
         zIndex?: number;
-        extent?: "parent" | import('@xyflow/react').CoordinateExtent | null;
+        extent?: "parent" | import('@xyflow/system').CoordinateExtent | null;
         expandParent?: boolean;
         ariaLabel?: string;
-        origin?: import('@xyflow/react').NodeOrigin;
+        origin?: import('@xyflow/system').NodeOrigin;
         handles?: import('@xyflow/system').NodeHandle[];
         measured?: {
             width?: number;

package/dist/editor/types/ai.d.ts

@@ -0,0 +1,65 @@
+import { Edge, Node } from '@xyflow/react';
+/**
+ * AI Provider types for tree generation
+ */
+export type AIProvider = "gemini" | "openai" | "deepseek" | "claude";
+/**
+ * AI Configuration for tree generation
+ */
+export interface AIConfig {
+    /**
+     * The AI provider to use
+     * @default "gemini"
+     */
+    provider?: AIProvider;
+    /**
+     * API key for the selected provider
+     */
+    apiKey: string;
+    /**
+     * Optional model name override
+     * - Gemini: "gemini-2.5-flash" (default), "gemini-2.5-pro-preview-03-25"
+     * - OpenAI: "gpt-4o-mini" (default), "gpt-4o", "gpt-3.5-turbo"
+     * - DeepSeek: "deepseek-chat" (default)
+     * - Claude: "claude-3-5-haiku-20241022" (default), "claude-3-5-sonnet-20241022"
+     */
+    model?: string;
+    /**
+     * Temperature for generation (0-1, default: 0.7)
+     */
+    temperature?: number;
+}
+/**
+ * AI Generation request
+ */
+export interface AIGenerationRequest {
+    /**
+     * User prompt describing the desired tree/form
+     */
+    prompt: string;
+    /**
+     * AI configuration
+     */
+    config: AIConfig;
+}
+/**
+ * AI Generation response
+ */
+export interface AIGenerationResponse {
+    /**
+     * Generated nodes
+     */
+    nodes: Node[];
+    /**
+     * Generated edges
+     */
+    edges: Edge[];
+    /**
+     * Optional explanation or metadata
+     */
+    metadata?: {
+        explanation?: string;
+        nodesCount?: number;
+        edgesCount?: number;
+    };
+}

package/dist/editor/types/editor.d.ts

@@ -1,4 +1,5 @@
 import { Edge, Node } from '@xyflow/react';
+import { AIConfig } from './ai';
 import { Flow } from '../../shared/types/node';
 export interface TreegeEditorProps {
     /**
@@ -6,14 +7,6 @@ export interface TreegeEditorProps {
      * Note: Individual defaultNodes/defaultEdges props take precedence over this.
      */
     flow?: Flow | null;
-    /**
-     * Default nodes to initialize the nodes in the flow.
-     */
-    nodes?: Node[];
-    /**
-     * Default edges to initialize the edges in the flow.
-     */
-    edges?: Edge[];
     /**
      * Callback function triggered when exporting JSON data.
      */
@@ -34,4 +27,12 @@ export interface TreegeEditorProps {
      * Language for the editor interface.
      */
     language?: string;
+    /**
+     * AI configuration for tree generation
+     */
+    aiConfig?: AIConfig;
+    /**
+     * Additional CSS class names for custom styling.
+     */
+    className?: string;
 }

package/dist/editor/utils/aiFlowGenerator.d.ts

@@ -0,0 +1,5 @@
+import { AIGenerationRequest, AIGenerationResponse } from '../types/ai';
+/**
+ * Main function to generate flow using AI
+ */
+export declare function generateFlowWithAI(request: AIGenerationRequest): Promise<AIGenerationResponse>;

package/dist/editor/utils/image.d.ts

@@ -0,0 +1,7 @@
+export declare const MAX_IMAGE_INPUT_BYTES: number;
+/**
+ * Converts an image file to a resized JPEG base64 data URL.
+ * Rejects files that are not images or exceed MAX_IMAGE_INPUT_BYTES.
+ * Dimensions are capped at MAX_DIMENSION × MAX_DIMENSION to keep the JSON small.
+ */
+export declare const imageFileToOptimizedDataUrl: (file: File) => Promise<string>;