treege 2.1.0 → 3.0.0-beta.10

package/dist/editor/components/data-display/logo.d.ts

@@ -0,0 +1,5 @@
+interface LogoProps {
+    theme?: "dark" | "light";
+}
+declare const Logo: ({ theme }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export default Logo;

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

@@ -0,0 +1,21 @@
+export type ComboboxOption = {
+    value?: string | null;
+    label: string;
+};
+/**
+ * Reusable Combobox component with search, create, and clear functionality
+ */
+declare const ComboboxWithCreate: ({ options, value, onValueChange, placeholder, searchPlaceholder, createLabel, clearLabel, emptyLabel, className, allowClear, allowCreate, }: {
+    options: ComboboxOption[];
+    value?: string | null;
+    onValueChange?: (newValue: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    createLabel?: (query: string) => string;
+    clearLabel?: string;
+    emptyLabel?: string;
+    className?: string;
+    allowClear?: boolean;
+    allowCreate?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ComboboxWithCreate;

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

@@ -0,0 +1,11 @@
+export declare const defaultNode: {
+    data: {
+        type: string;
+    };
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    type: string;
+};

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

@@ -0,0 +1,3 @@
+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;
+};

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

@@ -0,0 +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;
+};

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

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+export interface TreegeEditorContextValue {
+    language: string;
+    flowId?: string;
+    setFlowId?: (flow?: string) => void;
+}
+export interface TreegeEditorProviderProps extends PropsWithChildren {
+    value: TreegeEditorContextValue;
+}
+export declare const TreegeEditorContext: import('react').Context<TreegeEditorContextValue | null>;
+export declare const TreegeEditorProvider: ({ children, value }: TreegeEditorProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useTreegeEditorContext: () => TreegeEditorContextValue;

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

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

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

@@ -0,0 +1,6 @@
+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;

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

@@ -0,0 +1,2 @@
+declare const FlowNodeForm: () => import("react/jsx-runtime").JSX.Element;
+export default FlowNodeForm;

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

@@ -0,0 +1,2 @@
+declare const GroupNodeForm: () => import("react/jsx-runtime").JSX.Element;
+export default GroupNodeForm;

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

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

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

@@ -0,0 +1,2 @@
+declare const InputNodeForm: () => import("react/jsx-runtime").JSX.Element;
+export default InputNodeForm;

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

@@ -0,0 +1,2 @@
+declare const UINodeForm: () => import("react/jsx-runtime").JSX.Element;
+export default UINodeForm;

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

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

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

@@ -0,0 +1,7 @@
+import { InputType } from '../../../../shared/types/node';
+export interface SelectInputTypeProps {
+    value?: InputType;
+    onValueChange?: (value: InputType) => void;
+}
+declare const SelectInputType: ({ value, onValueChange }: SelectInputTypeProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectInputType;

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

@@ -0,0 +1,7 @@
+import { Language } from '../../../../shared/types/languages';
+export interface SelectLanguageProps {
+    value?: Language;
+    onValueChange?: (value: Language) => void;
+}
+declare const SelectLanguage: ({ value, onValueChange }: SelectLanguageProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectLanguage;

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

@@ -0,0 +1,2 @@
+declare const SelectNodeGroup: () => import("react/jsx-runtime").JSX.Element | null;
+export default SelectNodeGroup;

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

@@ -0,0 +1,2 @@
+declare const SelectNodeType: () => import("react/jsx-runtime").JSX.Element;
+export default SelectNodeType;

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

@@ -0,0 +1,6 @@
+import { Node, NodeProps } from '@xyflow/react';
+import { FlowNodeData } from '../../../../shared/types/node';
+export type FlowNodeType = Node<FlowNodeData, "flow">;
+export type FlowNodeProps = NodeProps<FlowNodeType>;
+declare const FlowNode: ({ data, isConnectable, type, parentId }: FlowNodeProps) => import("react/jsx-runtime").JSX.Element;
+export default FlowNode;

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

@@ -0,0 +1,6 @@
+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;

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

@@ -0,0 +1,6 @@
+import { Node, NodeProps } from '@xyflow/react';
+import { InputNodeData } from '../../../../shared/types/node';
+export type InputNodeType = Node<InputNodeData, "input">;
+export type InputNodeProps = NodeProps<InputNodeType>;
+declare const InputNode: ({ data, isConnectable, type, parentId }: InputNodeProps) => import("react/jsx-runtime").JSX.Element;
+export default InputNode;

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

@@ -0,0 +1,6 @@
+import { Node, NodeProps } from '@xyflow/react';
+import { UINodeData } from '../../../../shared/types/node';
+export type UINodeType = Node<UINodeData, "ui">;
+export type UINodeProps = NodeProps<UINodeType>;
+declare const UINode: ({ data, isConnectable, type, parentId }: UINodeProps) => import("react/jsx-runtime").JSX.Element;
+export default UINode;

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

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

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

@@ -0,0 +1,7 @@
+import { Flow } from '../../../../shared/types/node';
+export interface ActionsPanelProps {
+    onExportJson?: (data: Flow) => void;
+    onSave?: (data: Flow) => void;
+}
+declare const ActionsPanel: ({ onExportJson, onSave }: ActionsPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ActionsPanel;

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

@@ -0,0 +1,2 @@
+declare const NodeActionsSheet: () => import("react/jsx-runtime").JSX.Element;
+export default NodeActionsSheet;

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

@@ -0,0 +1,7 @@
+declare const useAvailableParentFields: (currentNodeId?: string) => {
+    label: string;
+    name: string | undefined;
+    nodeId: string;
+    type: import('../../shared/types/node').InputType;
+}[];
+export default useAvailableParentFields;

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

@@ -0,0 +1,11 @@
+/**
+ * Hook to access flow edges selection state and derived data.
+ * Only re-renders when selection or edges change.
+ */
+declare const useEdgesSelection: () => {
+    edges: import('@xyflow/react').Edge[];
+    hasSelectedEdges: boolean;
+    selectedEdge: import('@xyflow/react').Edge | undefined;
+    selectedEdges: import('@xyflow/react').Edge[];
+};
+export default useEdgesSelection;

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

@@ -0,0 +1,12 @@
+/**
+ * Custom hook providing various actions to manipulate nodes and edges
+ * within a React Flow instance.
+ */
+declare const useFlowActions: () => {
+    clearSelection: () => 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;
+    updateSelectedNodeType: (type: string) => void;
+};
+export default useFlowActions;

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

@@ -0,0 +1,15 @@
+import { OnConnect, OnConnectEnd, OnEdgesDelete } from '@xyflow/react';
+/**
+ * Custom hook to manage flow connections, including connecting nodes,
+ * handling connection ends, and deleting edges with conditional logic.
+ */
+declare const useFlowConnections: () => {
+    isValidConnection: (connection: {
+        source: string;
+        target: string;
+    }) => boolean;
+    onConnect: OnConnect;
+    onConnectEnd: OnConnectEnd;
+    onEdgesDelete: OnEdgesDelete;
+};
+export default useFlowConnections;

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

@@ -0,0 +1,54 @@
+import { TreegeNode, TreegeNodeData } from '../../shared/types/node';
+/**
+ * Hook to access flow nodes selection state and derived data.
+ * Only re-renders when selection or nodes change.
+ * @template TNodeData - The specific node data type to use for selectedNode
+ */
+declare const useNodesSelection: <TNodeData extends TreegeNodeData = TreegeNodeData>() => {
+    groupNodes: import('@xyflow/react').Node<import('../../shared/types/node').GroupNodeData, "group">[];
+    hasSelectedNodes: boolean;
+    nodes: TreegeNode[];
+    selectedNode: ({
+        id: string;
+        position: import('@xyflow/react').XYPosition;
+        data: TreegeNodeData;
+        sourcePosition?: import('@xyflow/react').Position;
+        targetPosition?: import('@xyflow/react').Position;
+        hidden?: boolean;
+        selected?: boolean;
+        dragging?: boolean;
+        draggable?: boolean;
+        selectable?: boolean;
+        connectable?: boolean;
+        deletable?: boolean;
+        dragHandle?: string;
+        width?: number;
+        height?: number;
+        initialWidth?: number;
+        initialHeight?: number;
+        parentId?: string;
+        zIndex?: number;
+        extent?: "parent" | import('@xyflow/react').CoordinateExtent | null;
+        expandParent?: boolean;
+        ariaLabel?: string;
+        origin?: import('@xyflow/react').NodeOrigin;
+        handles?: import('@xyflow/system').NodeHandle[];
+        measured?: {
+            width?: number;
+            height?: number;
+        };
+    } & {
+        type?: string | undefined;
+    } & {
+        style?: import('react').CSSProperties;
+        className?: string;
+        resizing?: boolean;
+        focusable?: boolean;
+        ariaRole?: import('react').AriaRole;
+        domAttributes?: Omit<import('react').HTMLAttributes<HTMLDivElement>, "id" | "style" | "className" | "draggable" | "role" | "aria-label" | "defaultValue" | "dangerouslySetInnerHTML" | keyof import('react').DOMAttributes<HTMLDivElement>>;
+    } & {
+        data: TNodeData;
+    }) | undefined;
+    selectedNodes: TreegeNode[];
+};
+export default useNodesSelection;

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

@@ -0,0 +1,19 @@
+/**
+ * Hook for translating text in the editor with context-aware language preference.
+ *
+ * This hook uses the language from TreegeEditorContext and delegates to the shared useTranslate hook.
+ *
+ * @returns A function that translates either a translation key or a Translatable object
+ *
+ * @example
+ * // Static translation (from translation files)
+ * const t = useTranslate();
+ * const saveButton = t("common.save"); // "Save"
+ *
+ * @example
+ * // Dynamic translation (from node data)
+ * const t = useTranslate();
+ * const label = t(node.data.label); // Translates user-defined content
+ */
+export declare const useTranslate: (language?: string) => (key?: import('../../main').Translatable | import('../../main').TranslationKey | string) => string;
+export default useTranslate;

package/dist/editor/index.d.ts

@@ -0,0 +1,4 @@
+export * from './features/TreegeEditor/TreegeEditor';
+export { default as TreegeEditor } from './features/TreegeEditor/TreegeEditor';
+export * from './types/editor';
+export { ThemeProvider, useTheme } from '../shared/context/ThemeContext';

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

@@ -0,0 +1,29 @@
+import { Edge, Node } from '@xyflow/react';
+import { Flow } from '../../shared/types/node';
+export interface TreegeEditorProps {
+    /**
+     * Default flow structure containing combined nodes and edges.
+     * Note: Individual defaultNodes/defaultEdges props take precedence over this.
+     */
+    flow?: Flow | null;
+    /**
+     * Callback function triggered when exporting JSON data.
+     */
+    onExportJson?: () => {
+        nodes: Node[];
+        edges: Edge[];
+    } | undefined;
+    /**
+     * Callback function triggered when saving the flow data.
+     * @param data
+     */
+    onSave?: (data: Flow) => void;
+    /**
+     * Theme for the editor interface.
+     */
+    theme?: "dark" | "light";
+    /**
+     * Language for the editor interface.
+     */
+    language?: string;
+}

package/dist/editor.d.ts

@@ -0,0 +1,2 @@
+export * from './editor/index'
+export {}

package/dist/editor.js

@@ -0,0 +1,7 @@
+import { T as o } from "./TreegeEditor--L4cWrS3.js";
+import { T as m, u as s } from "./ThemeContext-BIvs8Kw-.js";
+export {
+  m as ThemeProvider,
+  o as TreegeEditor,
+  s as useTheme
+};

package/dist/favicon.svg

@@ -0,0 +1,12 @@
+<svg width="114" height="103" viewBox="0 0 114 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_59)">
+<path d="M102.797 28.1471L87.4678 1.50761C87.2052 1.0508 86.828 0.671162 86.3738 0.406614C85.9195 0.142066 85.4041 0.00186148 84.8791 0L29.1359 0C28.6108 0.00186148 28.0954 0.142066 27.6412 0.406614C27.1869 0.671162 26.8097 1.0508 26.5472 1.50761L11.2551 28.1471C10.9922 28.6047 10.8535 29.1237 10.853 29.6521C10.8526 30.1804 10.9903 30.6997 11.2525 31.1577C11.5147 31.6158 11.8921 31.9966 12.3469 32.262C12.8017 32.5274 13.3179 32.6681 13.8438 32.6699H100.194C100.721 32.6707 101.239 32.532 101.696 32.2676C102.153 32.0033 102.532 31.6228 102.796 31.1643C103.06 30.7058 103.199 30.1855 103.199 29.6558C103.2 29.1262 103.061 28.6058 102.797 28.1471Z" fill="#11D3B4"/>
+<path d="M69.3919 103H84.8641C85.3929 103.002 85.913 102.864 86.3715 102.599C86.8301 102.334 87.2108 101.953 87.4753 101.492L113.595 56.0379C113.858 55.5792 113.997 55.0589 113.997 54.5292C113.997 53.9995 113.858 53.4793 113.594 53.0208C113.33 52.5623 112.95 52.1817 112.493 51.9174C112.036 51.6531 111.518 51.5143 110.991 51.5151H69.3919C68.5959 51.5151 67.8325 51.8328 67.2696 52.3982C66.7068 52.9637 66.3906 53.7306 66.3906 54.5303V99.9848C66.3906 100.784 66.7068 101.551 67.2696 102.117C67.8325 102.682 68.5959 103 69.3919 103Z" fill="#007EF6"/>
+<path d="M44.6305 51.5H3.00136C2.47477 51.5005 1.95758 51.6403 1.50174 51.9051C1.04591 52.17 0.667454 52.5507 0.404391 53.009C0.141329 53.4672 0.00291666 53.987 0.00305186 54.516C0.00318705 55.045 0.141865 55.5647 0.405162 56.0228L26.5472 101.507C26.8097 101.964 27.187 102.344 27.6412 102.608C28.0955 102.873 28.6108 103.013 29.1359 103.015H44.6305C45.4265 103.015 46.19 102.697 46.7528 102.132C47.3157 101.566 47.6319 100.8 47.6319 99.9999V54.5077C47.6299 53.7093 47.3128 52.9443 46.7502 52.3805C46.1875 51.8166 45.4252 51.5 44.6305 51.5Z" fill="#0164A8"/>
+</g>
+<defs>
+<clipPath id="clip0_2_59">
+<rect width="114" height="103" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/main.d.ts

@@ -1,4 +1,7 @@
-export { default as Treege } from './src/features/Treege/Treege';
-export * from './src/features/Treege/Treege';
-export { default as TreePlusIcon } from './src/components/DataDisplay/Icons/TreePlusIcon';
-export * from './src/components/DataDisplay/Icons/TreePlusIcon';
+export * from './editor';
+export * from './renderer';
+export * from './shared/types/edge';
+export * from './shared/types/node';
+export * from './shared/types/translate';
+export * from './shared/utils/nodeTypeGuards';
+export * from './shared/utils/translations';