treege 3.0.0-beta.44 → 3.0.0-beta.46

package/dist/editor.js

@@ -1,3 +1,3 @@
-import { t as e } from "./editor-DjtjUgyb.js";
-import { n as t, t as n } from "./ThemeContext-CUHjGVUf.js";
+import { t as e } from "./editor-DLKg7ri7.js";
+import { n as t, t as n } from "./ThemeContext-CNsS53ku.js";
 export { n as ThemeProvider, e as TreegeEditor, t as useTheme };

package/dist/main.js

@@ -1,4 +1,4 @@
-import { t as e } from "./editor-DjtjUgyb.js";
-import { C as t, D as n, F as r, I as i, L as a, M as o, N as s, O as c, P as l, S as u, _ as d, a as f, b as p, c as m, d as h, f as g, g as _, h as v, i as y, l as b, n as x, o as S, s as C, t as w, v as T, x as E, y as D } from "./ThemeContext-CUHjGVUf.js";
-import { C as O, D as k, E as A, O as j, S as M, T as N, a as P, b as F, d as I, f as L, g as R, h as z, i as B, l as V, m as H, n as U, r as W, s as G, t as K, u as q, w as J, x as Y, y as X } from "./DefaultInputs-D6a1ESW-.js";
-export { j as DefaultAddressInput, k as DefaultAutocompleteInput, A as DefaultCheckboxInput, N as DefaultDateInput, J as DefaultDateRangeInput, O as DefaultFileInput, H as DefaultGroup, M as DefaultHiddenInput, Y as DefaultHttpInput, F as DefaultNumberInput, X as DefaultPasswordInput, R as DefaultRadioInput, z as DefaultSelectInput, G as DefaultSwitchInput, P as DefaultTextAreaInput, B as DefaultTextInput, W as DefaultTimeInput, U as DefaultTimeRangeInput, q as Divider, w as ThemeProvider, I as Title, f as TreegeConfigProvider, e as TreegeEditor, V as TreegeRenderer, D as applyReferenceTransformation, p as calculateReferenceFieldUpdates, E as checkFormFieldHasValue, u as convertFormValuesToNamedFormat, K as defaultInputRenderers, L as defaultUI, n as evaluateCondition, c as evaluateConditions, C as fileToSerializable, m as filesToSerializable, v as findStartNode, _ as getFlowRenderState, o as getStaticTranslations, s as getTranslatedText, t as isFieldEmpty, l as isFlowNode, r as isGroupNode, i as isInputNode, d as isStartNode, a as isUINode, T as mergeFlows, h as sanitize, g as sanitizeHttpResponse, b as serializableToFile, x as useTheme, S as useTreegeConfig, y as useTreegeRenderer };
+import { t as e } from "./editor-DLKg7ri7.js";
+import { B as t, C as n, D as r, E as i, H as a, L as o, M as s, N as c, O as l, R as u, S as d, T as f, V as p, _ as m, a as h, b as g, c as _, g as v, i as y, l as b, n as x, o as S, s as C, t as w, w as T, x as E, z as D } from "./ThemeContext-CNsS53ku.js";
+import { C as O, E as k, S as A, T as j, _ as M, a as N, b as P, d as F, f as I, i as L, l as R, m as z, n as B, p as V, r as H, s as U, t as W, u as G, v as K, w as q, x as J, y as Y } from "./DefaultInputs-7fXlu0uL.js";
+export { k as DefaultAddressInput, j as DefaultAutocompleteInput, q as DefaultCheckboxInput, O as DefaultDateInput, A as DefaultDateRangeInput, J as DefaultFileInput, P as DefaultHiddenInput, Y as DefaultHttpInput, K as DefaultNumberInput, M as DefaultPasswordInput, z as DefaultRadioInput, V as DefaultSelectInput, U as DefaultSwitchInput, N as DefaultTextAreaInput, L as DefaultTextInput, H as DefaultTimeInput, B as DefaultTimeRangeInput, G as Divider, w as ThemeProvider, F as Title, h as TreegeConfigProvider, e as TreegeEditor, R as TreegeRenderer, T as applyReferenceTransformation, f as calculateReferenceFieldUpdates, i as checkFormFieldHasValue, r as convertFormValuesToNamedFormat, W as defaultInputRenderers, I as defaultUI, s as evaluateCondition, c as evaluateConditions, C as fileToSerializable, _ as filesToSerializable, g as findStartNode, E as getFlowRenderState, o as getStaticTranslations, u as getTranslatedText, l as isFieldEmpty, D as isFlowNode, t as isGroupNode, p as isInputNode, d as isStartNode, a as isUINode, n as mergeFlows, v as sanitize, m as sanitizeHttpResponse, b as serializableToFile, x as useTheme, S as useTreegeConfig, y as useTreegeRenderer };

package/dist/renderer/context/TreegeConfigContext.d.ts

@@ -1,39 +1,15 @@
 import { ReactNode } from 'react';
-import { TreegeRendererComponents, TreegeRendererConfig } from '../types/renderer';
+import { TreegeRendererConfig } from '../types/renderer';
 /**
  * Hook to access the global Treege configuration
  * Returns undefined if used outside of TreegeConfigProvider
  */
 export declare const useTreegeConfig: () => TreegeRendererConfig | undefined;
-export type TreegeConfigProviderProps = {
+export type TreegeConfigProviderProps = TreegeRendererConfig & {
     children: ReactNode;
-    /**
-     * Custom component renderers (can be overridden per TreegeRenderer instance)
-     */
-    components?: TreegeRendererComponents;
-    /**
-     * Google Maps API key for address autocomplete
-     * If not provided, falls back to free Nominatim (OpenStreetMap)
-     */
-    googleApiKey?: string;
-    /**
-     * Default language for translations
-     * @default "en"
-     */
-    language?: string;
-    /**
-     * Default theme for all renderers
-     * @default "dark"
-     */
-    theme?: "dark" | "light";
-    /**
-     * Default validation mode
-     * @default "onSubmit"
-     */
-    validationMode?: "onChange" | "onSubmit";
 };
 /**
  * Provider for global Treege configuration
  * Wrap your app with this provider to set default options for all TreegeRenderer instances
  */
-export declare const TreegeConfigProvider: ({ children, components, googleApiKey, language, theme, validationMode, }: TreegeConfigProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TreegeConfigProvider: ({ children, ...config }: TreegeConfigProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/renderer/context/TreegeRendererContext.d.ts

@@ -1,28 +1,125 @@
 import { Node } from '@xyflow/react';
 import { PropsWithChildren } from 'react';
 import { FormValues } from '../types/renderer';
-import { Flow, InputNodeData } from '../../shared/types/node';
+import { Flow, HttpHeader, InputNodeData } from '../../shared/types/node';
 export interface TreegeRendererContextValue {
+    /**
+     * The flow currently being rendered (already merged when several flows
+     * are linked through `FlowNode`s). `null` when the renderer has no flow
+     * to display yet.
+     */
     flows?: Flow | null;
+    /**
+     * Validation errors keyed by field id (`node.id`). Empty when the form
+     * is valid. Renderers read their own entry to display field-level errors.
+     */
     formErrors: Record<string, string>;
+    /**
+     * Current form values keyed by field id (`node.id`). Read by inputs to
+     * resolve template variables (`{{fieldId}}` in URLs/headers/body) and to
+     * drive conditional visibility from `useRenderNode`.
+     */
     formValues: FormValues;
+    /**
+     * Google Maps Places API key for the address autocomplete input. When
+     * unset, the address input falls back to the free Nominatim provider.
+     */
     googleApiKey?: string;
+    /**
+     * Global HTTP headers (already merged from provider + props) to apply
+     * to every request issued by inputs. Field-level headers override these
+     * on key collision (case-insensitive).
+     */
+    headers?: HttpHeader[];
+    /**
+     * The flow's input nodes — exposed so renderers can resolve references
+     * between fields (e.g. `convertFormValuesToNamedFormat`, reference-field
+     * defaults).
+     */
     inputNodes: Node<InputNodeData>[];
+    /**
+     * Active UI language (e.g. `"en"`, `"fr"`). Used both for static UI
+     * strings (via `useTranslate`) and for resolving `Translatable` values
+     * inside node data.
+     */
     language: string;
+    /**
+     * Soft cap on the number of options rendered for option-based inputs
+     * (radio, checkbox). When set, options past this count are replaced by
+     * an ellipsis row. Used by the editor's `NodeInputPreview` to keep node
+     * cards compact when an OpenAPI source returns hundreds of options.
+     * Unset at runtime — every option is rendered.
+     */
+    optionsDisplayLimit?: number;
+    /**
+     * Update the value of a single field. Inputs call this from their
+     * `onChange` to push edits up to the form's state.
+     */
     setFieldValue: (fieldName: string, value: unknown) => void;
 }
 export interface TreegeRendererProviderProps extends PropsWithChildren {
-    value: TreegeRendererContextValue;
+    /**
+     * Any subset of `TreegeRendererContextValue`. Missing fields default to
+     * sensible no-op values, so callers only need to supply what they actually
+     * want to expose to descendants.
+     */
+    value: Partial<TreegeRendererContextValue>;
 }
 export declare const TreegeRendererContext: import('react').Context<TreegeRendererContextValue | null>;
 export declare const TreegeRendererProvider: ({ children, value }: TreegeRendererProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useTreegeRendererContext: () => {
     edges: import('@xyflow/react').Edge[];
+    /**
+     * The flow currently being rendered (already merged when several flows
+     * are linked through `FlowNode`s). `null` when the renderer has no flow
+     * to display yet.
+     */
     flows?: Flow | null;
+    /**
+     * Validation errors keyed by field id (`node.id`). Empty when the form
+     * is valid. Renderers read their own entry to display field-level errors.
+     */
     formErrors: Record<string, string>;
+    /**
+     * Current form values keyed by field id (`node.id`). Read by inputs to
+     * resolve template variables (`{{fieldId}}` in URLs/headers/body) and to
+     * drive conditional visibility from `useRenderNode`.
+     */
     formValues: FormValues;
+    /**
+     * Google Maps Places API key for the address autocomplete input. When
+     * unset, the address input falls back to the free Nominatim provider.
+     */
     googleApiKey?: string;
+    /**
+     * Global HTTP headers (already merged from provider + props) to apply
+     * to every request issued by inputs. Field-level headers override these
+     * on key collision (case-insensitive).
+     */
+    headers?: HttpHeader[];
+    /**
+     * The flow's input nodes — exposed so renderers can resolve references
+     * between fields (e.g. `convertFormValuesToNamedFormat`, reference-field
+     * defaults).
+     */
     inputNodes: Node<InputNodeData>[];
+    /**
+     * Active UI language (e.g. `"en"`, `"fr"`). Used both for static UI
+     * strings (via `useTranslate`) and for resolving `Translatable` values
+     * inside node data.
+     */
     language: string;
+    /**
+     * Soft cap on the number of options rendered for option-based inputs
+     * (radio, checkbox). When set, options past this count are replaced by
+     * an ellipsis row. Used by the editor's `NodeInputPreview` to keep node
+     * cards compact when an OpenAPI source returns hundreds of options.
+     * Unset at runtime — every option is rendered.
+     */
+    optionsDisplayLimit?: number;
+    /**
+     * Update the value of a single field. Inputs call this from their
+     * `onChange` to push edits up to the form's state.
+     */
     setFieldValue: (fieldName: string, value: unknown) => void;
 };

package/dist/renderer/features/TreegeRenderer/native/components/DefaultInputWrapper.d.ts

@@ -0,0 +1,9 @@
+import { Node } from '@xyflow/react';
+import { ReactNode } from 'react';
+import { InputNodeData } from '../../../../../shared/types/node';
+interface DefaultInputWrapperProps {
+    node: Node<InputNodeData>;
+    children: ReactNode;
+}
+declare const DefaultInputWrapper: ({ node, children }: DefaultInputWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default DefaultInputWrapper;

package/dist/renderer/features/TreegeRenderer/native/components/DefaultStep.d.ts

@@ -0,0 +1,3 @@
+import { StepRenderProps } from '../../../../types/renderer';
+declare const DefaultStep: ({ label, children, isFirstStep, isLastStep, canContinue, isSubmitting, onBack, onContinue }: StepRenderProps) => import("react/jsx-runtime").JSX.Element;
+export default DefaultStep;

package/dist/renderer/features/TreegeRenderer/useTreegeRenderer.d.ts

@@ -1,6 +1,6 @@
 import { Node } from '@xyflow/react';
 import { FormValues, TreegeRendererProps } from '../../types/renderer';
-import { TreegeNodeData } from '../../../shared/types/node';
+import { GroupNodeData, TreegeNodeData } from '../../../shared/types/node';
 /**
  * Main TreegeRenderer hook
  *
@@ -19,17 +19,15 @@ import { TreegeNodeData } from '../../../shared/types/node';
  * @param props - Configuration props (flows, initialValues, callbacks, etc.)
  * @returns Complete form state and control methods
  */
-export declare const useTreegeRenderer: ({ components, flows, googleApiKey, initialValues, language, onChange, onSubmit, theme, validate, validationMode, }: Pick<TreegeRendererProps, "components" | "flows" | "googleApiKey" | "initialValues" | "language" | "onChange" | "onSubmit" | "theme" | "validate" | "validationMode">) => {
+export declare const useTreegeRenderer: ({ components, flows, googleApiKey, headers, initialValues, language, onChange, onSubmit, theme, validate, validationMode, }: Pick<TreegeRendererProps, "components" | "flows" | "googleApiKey" | "headers" | "initialValues" | "language" | "onChange" | "onSubmit" | "theme" | "validate" | "validationMode">) => {
+    canContinueStep: boolean;
     canSubmit: boolean;
     clearSubmitMessage: () => void;
     config: {
         components: {
             form: ((props: {
                 children: import('react').ReactNode;
-                onSubmit: (e: import('react').FormEvent) => void;
-            }) => import('react').ReactNode) | undefined;
-            group: ((props: import('../../types/renderer').NodeRenderProps & {
-                children?: import('react').ReactNode;
+                onSubmit: (e: import('react').FormEvent<HTMLFormElement>) => void;
             }) => import('react').ReactNode) | undefined;
             inputs: {
                 number?: ((props: import('../../types/renderer').InputRenderProps<"number">) => import('react').ReactNode) | undefined;
@@ -51,6 +49,7 @@ export declare const useTreegeRenderer: ({ components, flows, googleApiKey, init
                 time?: ((props: import('../../types/renderer').InputRenderProps<"time">) => import('react').ReactNode) | undefined;
                 timerange?: ((props: import('../../types/renderer').InputRenderProps<"timerange">) => import('react').ReactNode) | undefined;
             };
+            step: ((props: import('../../types/renderer').StepRenderProps) => import('react').ReactNode) | undefined;
             submitButton: ((props: {
                 label?: string;
                 disabled?: boolean;
@@ -72,15 +71,24 @@ export declare const useTreegeRenderer: ({ components, flows, googleApiKey, init
             };
         };
         googleApiKey: string | undefined;
+        headers: import('../../../shared/types/node').HttpHeader[];
         language: string;
         theme: "dark" | "light";
         validationMode: "onChange" | "onSubmit";
     };
+    currentStep: import('../../utils/step').FlowStep;
+    currentStepGroupNode: Node<GroupNodeData> | undefined;
+    currentStepIndex: number;
     firstErrorFieldId: string | undefined;
     formErrors: Record<string, string>;
     formValues: FormValues;
+    goToNextStep: () => void;
+    goToPreviousStep: () => void;
     handleSubmit: () => Promise<boolean>;
+    hasSubmitInput: boolean;
     inputNodes: Node<import('../../../shared/types/node').InputNodeData>[];
+    isFirstStep: boolean;
+    isLastStep: boolean;
     isSubmitting: boolean;
     mergedFlow: import('../../../shared/types/node').Flow;
     missingRequiredFields: string[];
@@ -88,6 +96,7 @@ export declare const useTreegeRenderer: ({ components, flows, googleApiKey, init
     setFieldErrors: import('react').Dispatch<import('react').SetStateAction<Record<string, string>>>;
     setFieldValue: (fieldName: string, value: unknown) => void;
     setMultipleFieldValues: (updates: FormValues) => void;
+    steps: import('../../utils/step').FlowStep[];
     submitMessage: {
         type: "success" | "error";
         message: string;

package/dist/renderer/features/TreegeRenderer/web/TreegeRenderer.d.ts

@@ -1,3 +1,3 @@
 import { TreegeRendererProps } from '../../../types/renderer';
-declare const TreegeRenderer: ({ components, className, flows, googleApiKey, language, onChange, onSubmit, theme, validate, validationMode, initialValues, }: TreegeRendererProps) => import("react/jsx-runtime").JSX.Element;
+declare const TreegeRenderer: ({ components, className, flows, googleApiKey, headers, language, onChange, onSubmit, theme, validate, validationMode, initialValues, }: TreegeRendererProps) => import("react/jsx-runtime").JSX.Element;
 export default TreegeRenderer;

package/dist/renderer/features/TreegeRenderer/web/components/DefaultFormWrapper.d.ts

@@ -1,6 +1,6 @@
 import { FormEvent, ReactNode } from 'react';
 declare const DefaultFormWrapper: ({ children, onSubmit }: {
     children: ReactNode;
-    onSubmit: (e: FormEvent) => void;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DefaultFormWrapper;

package/dist/renderer/features/TreegeRenderer/web/components/DefaultInputWrapper.d.ts

@@ -0,0 +1,9 @@
+import { Node } from '@xyflow/react';
+import { ReactNode } from 'react';
+import { InputNodeData } from '../../../../../shared/types/node';
+interface DefaultInputWrapperProps {
+    node: Node<InputNodeData>;
+    children: ReactNode;
+}
+export declare const DefaultInputWrapper: ({ node, children }: DefaultInputWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default DefaultInputWrapper;

package/dist/renderer/features/TreegeRenderer/web/components/DefaultStep.d.ts

@@ -0,0 +1,3 @@
+import { StepRenderProps } from '../../../../types/renderer';
+declare const DefaultStep: ({ label, children, isFirstStep, isLastStep, canContinue, isSubmitting, onBack, onContinue }: StepRenderProps) => import("react/jsx-runtime").JSX.Element;
+export default DefaultStep;

package/dist/renderer/hooks/useInputOptions.d.ts

@@ -0,0 +1,28 @@
+import { Node } from '@xyflow/react';
+import { InputNodeData, InputOption } from '../../shared/types/node';
+interface UseInputOptionsResult {
+    /**
+     * Resolved options for the input. When the node has an `optionsSource`,
+     * these are the fetched options (or the static fallback while loading or
+     * if the fetch errors). Otherwise the static `options` from the node data.
+     */
+    options: InputOption[];
+    /** True while a remote fetch is in flight. */
+    isLoading: boolean;
+    /** Error message if the latest remote fetch failed; otherwise `null`. */
+    error: string | null;
+}
+/**
+ * Resolves the options for an option-based input (radio, checkbox, select,
+ * autocomplete). If the node declares an `optionsSource`, options are fetched
+ * from that API at runtime, with `{{templateVar}}` substitution from form
+ * values and merging of global + field-level headers. While loading, before
+ * the first successful fetch, or on error, falls back to the static
+ * `options` array (if any).
+ *
+ * The fetch plan is computed once and serialized to JSON. The fetch effect
+ * keys off this string: changes that don't affect the actual request (e.g.
+ * an unrelated form field) produce the same JSON and don't re-trigger.
+ */
+export declare const useInputOptions: (node: Node<InputNodeData>) => UseInputOptionsResult;
+export {};

package/dist/renderer/hooks/useRenderNode.d.ts

@@ -1,7 +1,7 @@
 import { Node } from '@xyflow/react';
 import { ComponentType, ReactNode } from 'react';
 import { FormValues, InputRenderers, TreegeRendererComponents } from '../types/renderer';
-import { TreegeNodeData } from '../../shared/types/node';
+import { InputNodeData, TreegeNodeData } from '../../shared/types/node';
 type AnyComponent = ComponentType<any>;
 type UseRenderNodeParams = {
     config: {
@@ -9,7 +9,10 @@ type UseRenderNodeParams = {
         language: string;
     };
     DefaultFormWrapper: AnyComponent;
-    DefaultGroup: AnyComponent;
+    DefaultInputWrapper: ComponentType<{
+        node: Node<InputNodeData>;
+        children: ReactNode;
+    }>;
     DefaultSubmitButton: AnyComponent;
     DefaultSubmitButtonWrapper?: AnyComponent;
     defaultInputRenderers: InputRenderers;
@@ -18,7 +21,6 @@ type UseRenderNodeParams = {
     formValues: FormValues;
     missingRequiredFields: string[];
     setFieldValue: (fieldId: string, value: unknown) => void;
-    visibleNodes: Node<TreegeNodeData>[];
 };
 /**
  * Hook that returns rendering utilities for TreegeRenderer
@@ -30,10 +32,10 @@ type UseRenderNodeParams = {
  * - SubmitButton: Submit button component with fallback
  * - SubmitButtonWrapper: Submit button wrapper component with fallback (web only, undefined for native)
  */
-export declare const useRenderNode: ({ DefaultFormWrapper, DefaultGroup, DefaultSubmitButton, DefaultSubmitButtonWrapper, config, defaultInputRenderers, defaultUI, formErrors, formValues, missingRequiredFields, setFieldValue, visibleNodes, }: UseRenderNodeParams) => {
+export declare const useRenderNode: ({ DefaultFormWrapper, DefaultInputWrapper, DefaultSubmitButton, DefaultSubmitButtonWrapper, config, defaultInputRenderers, defaultUI, formErrors, formValues, missingRequiredFields, setFieldValue, }: UseRenderNodeParams) => {
     FormWrapper: ((props: {
         children: ReactNode;
-        onSubmit: (e: import('react').FormEvent) => void;
+        onSubmit: (e: import('react').FormEvent<HTMLFormElement>) => void;
     }) => ReactNode) | AnyComponent;
     renderNode: (node: Node<TreegeNodeData>) => ReactNode;
     SubmitButton: ((props: {

package/dist/renderer/hooks/useSubmitHandler.d.ts

@@ -1,7 +1,7 @@
 import { Node } from '@xyflow/react';
 import { FormValues } from '../types/renderer';
 import { SubmitResult } from '../utils/submit';
-import { InputNodeData, TreegeNodeData } from '../../shared/types/node';
+import { HttpHeader, InputNodeData, TreegeNodeData } from '../../shared/types/node';
 /**
  * Hook for handling form submission with submit button configuration
  *
@@ -16,9 +16,10 @@ import { InputNodeData, TreegeNodeData } from '../../shared/types/node';
  * @param formValues - Current form values
  * @param language - Current language for translations
  * @param inputNodes - All input nodes for form data conversion
+ * @param headers
  * @returns Submit handler state and functions
  */
-export declare const useSubmitHandler: (visibleNodes: Node<TreegeNodeData>[], formValues: FormValues, language: string, inputNodes: Node<InputNodeData>[]) => {
+export declare const useSubmitHandler: (visibleNodes: Node<TreegeNodeData>[], formValues: FormValues, language: string, inputNodes: Node<InputNodeData>[], headers?: HttpHeader[]) => {
     clearSubmitMessage: () => void;
     handleSubmitWithConfig: (onSuccess?: (data: unknown) => void) => Promise<SubmitResult | null>;
     hasSubmitConfig: boolean;

package/dist/renderer/index.d.ts

@@ -2,8 +2,8 @@ export { TreegeConfigProvider, useTreegeConfig } from './context/TreegeConfigCon
 export type { UseTreegeRendererReturn } from './features/TreegeRenderer/useTreegeRenderer';
 export { useTreegeRenderer } from './features/TreegeRenderer/useTreegeRenderer';
 export * from './features/TreegeRenderer/web/components/DefaultFormWrapper';
-export * from './features/TreegeRenderer/web/components/DefaultGroup';
 export * from './features/TreegeRenderer/web/components/DefaultInputs';
+export * from './features/TreegeRenderer/web/components/DefaultStep';
 export * from './features/TreegeRenderer/web/components/DefaultSubmitButton';
 export * from './features/TreegeRenderer/web/components/DefaultUI';
 export * from './features/TreegeRenderer/web/TreegeRenderer';

package/dist/renderer/index.native.d.ts

@@ -1,7 +1,7 @@
 export { TreegeConfigProvider, useTreegeConfig } from './context/TreegeConfigContext';
 export * from './features/TreegeRenderer/native/components/DefaultFormWrapper';
-export * from './features/TreegeRenderer/native/components/DefaultGroup';
 export * from './features/TreegeRenderer/native/components/DefaultInputs';
+export * from './features/TreegeRenderer/native/components/DefaultStep';
 export * from './features/TreegeRenderer/native/components/DefaultSubmitButton';
 export * from './features/TreegeRenderer/native/components/DefaultSubmitButtonWrapper';
 export * from './features/TreegeRenderer/native/components/DefaultUI';

package/dist/renderer/types/renderer.d.ts

@@ -1,7 +1,8 @@
 import { Node } from '@xyflow/react';
 import { FormEvent, ReactNode } from 'react';
 import { SerializableFile } from '../utils/file';
-import { Flow, InputNodeData, InputType, TreegeNodeData, UINodeData, UIType } from '../../shared/types/node';
+import { FlowStep } from '../utils/step';
+import { Flow, GroupNodeData, HttpHeader, InputNodeData, InputType, TreegeNodeData, UINodeData, UIType } from '../../shared/types/node';
 /**
  * Type mapping for input values based on input type
  */
@@ -104,6 +105,44 @@ export type NodeRenderProps = {
 export type InputRenderers = {
     [K in InputType]?: (props: InputRenderProps<K>) => ReactNode;
 };
+/**
+ * Props passed to a step renderer. Steps are derived at runtime from the flow's
+ * groups: each contiguous slice of visible nodes sharing the same `parentId`
+ * (or no parent — orphan steps) becomes one step.
+ */
+export type StepRenderProps = {
+    /** The step being rendered (its group id and ordered child nodes). */
+    step: FlowStep;
+    /** Hidden group node carrying the step's metadata (label) — undefined for orphan steps. */
+    groupNode?: Node<GroupNodeData>;
+    /** Zero-based index of this step in the current step sequence. */
+    stepIndex: number;
+    /** Total number of steps currently visible. Recomputes when branching changes. */
+    totalSteps: number;
+    /** True when this is the first step (Back should be hidden/disabled). */
+    isFirstStep: boolean;
+    /**
+     * True when this is the last visible step. The renderer turns Continue
+     * into a submit action on the last step.
+     */
+    isLastStep: boolean;
+    /** Whether all required visible inputs of the step are filled. */
+    canContinue: boolean;
+    /** Submission in progress (passed through from `useTreegeRenderer`). */
+    isSubmitting?: boolean;
+    /** Advance to the previous step. No-op on the first step. */
+    onBack: () => void;
+    /**
+     * Advance to the next step (or trigger submit on the last step). The wrapper
+     * passes `isLastStep` so the implementation can decide between an in-flow
+     * advance and a form submit.
+     */
+    onContinue: () => void;
+    /** Translated label of the group, or empty string for orphan steps. */
+    label?: string;
+    /** The rendered child nodes belonging to this step. */
+    children: ReactNode;
+};
 /**
  * Custom renderer components
  */
@@ -118,17 +157,16 @@ export type TreegeRendererComponents = {
      */
     ui?: Partial<Record<UIType, (props: NodeRenderProps) => ReactNode>>;
     /**
-     * Custom group container renderer
+     * Custom step renderer — wraps the current step's nodes and renders the
+     * Back/Continue navigation. Defaults are provided by `DefaultStep` (web/native).
      */
-    group?: (props: NodeRenderProps & {
-        children?: ReactNode;
-    }) => ReactNode;
+    step?: (props: StepRenderProps) => ReactNode;
     /**
      * Custom form wrapper
      */
     form?: (props: {
         children: ReactNode;
-        onSubmit: (e: FormEvent) => void;
+        onSubmit: (e: FormEvent<HTMLFormElement>) => void;
     }) => ReactNode;
     /**
      * Custom submit button (supports both web and native variants)
@@ -163,6 +201,12 @@ export type TreegeRendererConfig = {
      * Custom component renderers
      */
     components?: TreegeRendererComponents;
+    /**
+     * Global HTTP headers applied to every request issued by the renderer
+     * (HTTP inputs, submit buttons). Field-level headers with the same key
+     * (case-insensitive) take precedence over these.
+     */
+    headers?: HttpHeader[];
     /**
      * Google Maps API key for address autocomplete
      * If not provided, falls back to free Nominatim (OpenStreetMap)
@@ -186,35 +230,26 @@ export type TreegeRendererConfig = {
 };
 /**
  * Props for the TreegeRenderer component
+ *
+ * Inherits all configuration fields from TreegeRendererConfig (components,
+ * headers, googleApiKey, language, theme, validationMode) and adds the
+ * instance-specific ones (flows, callbacks, initial values, etc.).
  */
-export interface TreegeRendererProps {
+export interface TreegeRendererProps extends TreegeRendererConfig {
     /**
      * Additional class name for the renderer container
      */
     className?: string;
-    /**
-     * Custom component renderers
-     */
-    components?: TreegeRendererComponents;
     /**
      * Flow or array of flows
      * - If a single Flow: renders that flow
      * - If an array: first flow is the main flow, others are sub-flows available for FlowNodes
      */
     flows?: Flow | Flow[] | null;
-    /**
-     * Google Maps API key for address autocomplete
-     * If not provided, falls back to free Nominatim (OpenStreetMap)
-     */
-    googleApiKey?: string;
     /**
      * Initial form values
      */
     initialValues?: FormValues;
-    /**
-     * Current language for translations
-     */
-    language?: string;
     /**
      * Callback when form values change
      */
@@ -225,17 +260,8 @@ export interface TreegeRendererProps {
      * @param meta - Optional metadata about the submission (e.g., HTTP response data)
      */
     onSubmit?: (values: FormValues, meta?: Meta) => void;
-    /**
-     * Theme for the renderer
-     * @default "dark"
-     */
-    theme?: "dark" | "light";
     /**
      * Custom validation function
      */
     validate?: (values: FormValues, nodes: Node<TreegeNodeData>[]) => Record<string, string>;
-    /**
-     * Validation mode
-     */
-    validationMode?: "onChange" | "onSubmit";
 }

package/dist/renderer/utils/http.d.ts

@@ -1,5 +1,12 @@
 import { FormValues } from '../types/renderer';
-import { HttpHeader } from '../../shared/types/node';
+import { HttpHeader, InputOption, OptionsSourceMapping } from '../../shared/types/node';
+/**
+ * Merge multiple lists of HTTP headers. Later sources override earlier ones
+ * when they specify the same key (case-insensitive comparison, since HTTP
+ * header names are case-insensitive). The casing of the latest occurrence
+ * is preserved in the output.
+ */
+export declare const mergeHttpHeaders: (...sources: (HttpHeader[] | undefined)[]) => HttpHeader[];
 /**
  * Result of an HTTP request
  */
@@ -45,6 +52,10 @@ export interface HttpRequestOptions {
      * Request body (for POST/PUT/PATCH)
      */
     body?: string;
+    /**
+     * Optional abort signal to cancel the request
+     */
+    signal?: AbortSignal;
 }
 /**
  * Make an HTTP request with common error handling and response parsing
@@ -99,3 +110,20 @@ export declare const replaceTemplateVariables: (template: string | undefined, va
  * @returns The string with variables replaced
  */
 export declare const replaceResponseVariables: (template: string | undefined, responseData: unknown) => string;
+/**
+ * Extract a value from an object using a path that supports dot notation
+ * and array indexing. Examples:
+ * - "data.users" → obj.data.users
+ * - "results[0].name" → obj.results[0].name
+ *
+ * @param obj - The object to extract value from
+ * @param path - The path expression (empty string returns the object as-is)
+ * @returns The value at the path, or undefined if not found
+ */
+export declare const getValueByPath: (obj: unknown, path: string) => unknown;
+/**
+ * Project a list-shaped HTTP response into InputOption objects, applying
+ * a field-to-property mapping. Returns an empty array when the data is not
+ * iterable or required fields are missing.
+ */
+export declare const extractOptionsFromResponse: (response: unknown, responsePath: string | undefined, mapping: OptionsSourceMapping) => InputOption[];

package/dist/renderer/utils/step.d.ts

@@ -0,0 +1,27 @@
+import { Node } from '@xyflow/react';
+import { TreegeNodeData } from '../../shared/types/node';
+/**
+ * A renderer step — a contiguous slice of visible nodes that share the same
+ * `parentId` (group id) or no parent (orphan step).
+ *
+ * Steps are derived from the flow's visible nodes at render time; the editor's
+ * group nodes carry only metadata (label) and are no longer rendered.
+ */
+export type FlowStep = {
+    /**
+     * Group id owning the step, or null for orphan steps (nodes without `parentId`).
+     */
+    groupId: string | null;
+    /**
+     * The actual nodes (input + ui) rendered in this step, in flow order.
+     */
+    nodes: Node<TreegeNodeData>[];
+};
+/**
+ * Partition `visibleNodes` into ordered steps. A new step is started every
+ * time the `parentId` of the next renderable node changes (i.e. the flow
+ * crosses a group boundary, or moves between an orphan and a grouped node).
+ *
+ * Group / flow nodes themselves are skipped — they're metadata only.
+ */
+export declare const computeSteps: (visibleNodes: Node<TreegeNodeData>[]) => FlowStep[];