treege 3.0.0-beta.45 → 3.0.0-beta.46

package/dist/editor.js

@@ -1,3 +1,3 @@
-import { t as e } from "./editor-DBCMmZtt.js";
-import { n as t, t as n } from "./ThemeContext-O482h1XZ.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-DBCMmZtt.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-O482h1XZ.js";
-import { C as O, D as k, E as A, S as j, T as M, a as N, b as P, d as F, f as I, h as L, i as R, l as z, m as B, n as V, p as H, r as U, s as W, t as G, u as K, v as q, w as J, x as Y, y as X } from "./DefaultInputs-DYKtphqY.js";
-export { k as DefaultAddressInput, A as DefaultAutocompleteInput, M as DefaultCheckboxInput, J as DefaultDateInput, O as DefaultDateRangeInput, j as DefaultFileInput, H as DefaultGroup, Y as DefaultHiddenInput, P as DefaultHttpInput, X as DefaultNumberInput, q as DefaultPasswordInput, L as DefaultRadioInput, B as DefaultSelectInput, W as DefaultSwitchInput, N as DefaultTextAreaInput, R as DefaultTextInput, U as DefaultTimeInput, V as DefaultTimeRangeInput, K as Divider, w as ThemeProvider, F as Title, h as TreegeConfigProvider, e as TreegeEditor, z as TreegeRenderer, T as applyReferenceTransformation, f as calculateReferenceFieldUpdates, i as checkFormFieldHasValue, r as convertFormValuesToNamedFormat, G 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 };
+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/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
  *
@@ -20,6 +20,7 @@ import { TreegeNodeData } from '../../../shared/types/node';
  * @returns Complete form state and control methods
  */
 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: {
@@ -28,9 +29,6 @@ export declare const useTreegeRenderer: ({ components, flows, googleApiKey, head
                 children: import('react').ReactNode;
                 onSubmit: (e: import('react').FormEvent<HTMLFormElement>) => void;
             }) => import('react').ReactNode) | undefined;
-            group: ((props: import('../../types/renderer').NodeRenderProps & {
-                children?: import('react').ReactNode;
-            }) => import('react').ReactNode) | undefined;
             inputs: {
                 number?: ((props: import('../../types/renderer').InputRenderProps<"number">) => import('react').ReactNode) | undefined;
                 address?: ((props: import('../../types/renderer').InputRenderProps<"address">) => import('react').ReactNode) | undefined;
@@ -51,6 +49,7 @@ export declare const useTreegeRenderer: ({ components, flows, googleApiKey, head
                 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;
@@ -77,11 +76,19 @@ export declare const useTreegeRenderer: ({ components, flows, googleApiKey, head
         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[];
@@ -89,6 +96,7 @@ export declare const useTreegeRenderer: ({ components, flows, googleApiKey, head
     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/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/useRenderNode.d.ts

@@ -9,7 +9,6 @@ type UseRenderNodeParams = {
         language: string;
     };
     DefaultFormWrapper: AnyComponent;
-    DefaultGroup: AnyComponent;
     DefaultInputWrapper: ComponentType<{
         node: Node<InputNodeData>;
         children: ReactNode;
@@ -22,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
@@ -34,7 +32,7 @@ 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, DefaultInputWrapper, 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<HTMLFormElement>) => void;

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, HttpHeader, 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,11 +157,10 @@ 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
      */

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[];