treege 3.0.0-beta.9 → 3.0.0-beta.90

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

@@ -1,43 +1,111 @@
 import { Node } from '@xyflow/react';
-import { FormValues } from '../../types/renderer';
-import { Flow, TreegeNodeData } from '../../../shared/types/node';
+import { FormValues, TreegeRendererProps } from '../../types/renderer';
+import { GroupNodeData, TreegeNodeData } from '../../../shared/types/node';
 /**
- * PURE STATE LOGIC HOOK
+ * Main TreegeRenderer hook
  *
- * This hook manages the internal form state and visibility logic.
- * It contains NO side effects (no useEffect).
- * All state is keyed by nodeId for uniqueness.
+ * Manages all form state, configuration, validation, and submission logic.
+ * Can be used directly in custom components for headless mode.
  *
  * Responsibilities:
+ * - Config merging (props + global provider)
  * - Form values state (keyed by nodeId)
  * - Errors state
  * - Node visibility calculation (progressive rendering)
- * - Form validation (built-in: required, pattern)
- * - Submit button state (combines end-of-path detection + form validity)
+ * - Form validation (built-in: required, pattern + custom validation)
+ * - Submit handling (with HTTP integration support)
+ * - Side effects (onChange callbacks, validation modes, reference field sync)
  *
- * NOT responsible for:
- * - Export/conversion to external format (done in component)
- * - Side effects like onChange callbacks (done in component)
- * - Custom validation (passed to component)
+ * @param props - Configuration props (flow, initialValues, callbacks, etc.)
+ * @returns Complete form state and control methods
  */
-/**
- * Custom hook for TreegeRenderer - Pure state logic only
- *
- * @param flows - Flow or array of flows (can be null/undefined)
- * @param initialValues - Initial form values (will be merged with node defaults)
- * @param language - Preferred language for translations (defaults to 'en')
- * @returns Pure state and computed values (no side effects)
- */
-export declare const useTreegeRenderer: (flows: Flow | Flow[] | null | undefined, initialValues?: FormValues, language?: string) => {
+export declare const useTreegeRenderer: ({ baseUrl, components, extraPayload, flow, googleApiKey, headers, language, onChange, onSubmit, showPoweredBy, theme, validate, validationMode, initialValues, }: Pick<TreegeRendererProps, "baseUrl" | "components" | "extraPayload" | "flow" | "googleApiKey" | "headers" | "initialValues" | "language" | "onChange" | "onSubmit" | "showPoweredBy" | "theme" | "validate" | "validationMode">) => {
+    canContinueStep: boolean;
     canSubmit: boolean;
+    clearSubmitMessage: () => void;
+    config: {
+        baseUrl: string | undefined;
+        components: {
+            form: ((props: {
+                children: import('react').ReactNode;
+                id?: string;
+                onSubmit: (e: import('react').FormEvent<HTMLFormElement>) => void;
+            }) => import('react').ReactNode) | undefined;
+            inputs: {
+                number?: import('../../types/renderer').InputRenderer<"number"> | undefined;
+                checkbox?: import('../../types/renderer').InputRenderer<"checkbox"> | undefined;
+                radio?: import('../../types/renderer').InputRenderer<"radio"> | undefined;
+                switch?: import('../../types/renderer').InputRenderer<"switch"> | undefined;
+                address?: import('../../types/renderer').InputRenderer<"address"> | undefined;
+                autocomplete?: import('../../types/renderer').InputRenderer<"autocomplete"> | undefined;
+                date?: import('../../types/renderer').InputRenderer<"date"> | undefined;
+                daterange?: import('../../types/renderer').InputRenderer<"daterange"> | undefined;
+                file?: import('../../types/renderer').InputRenderer<"file"> | undefined;
+                hidden?: import('../../types/renderer').InputRenderer<"hidden"> | undefined;
+                http?: import('../../types/renderer').InputRenderer<"http"> | undefined;
+                password?: import('../../types/renderer').InputRenderer<"password"> | undefined;
+                select?: import('../../types/renderer').InputRenderer<"select"> | undefined;
+                submit?: import('../../types/renderer').InputRenderer<"submit"> | undefined;
+                text?: import('../../types/renderer').InputRenderer<"text"> | undefined;
+                textarea?: import('../../types/renderer').InputRenderer<"textarea"> | undefined;
+                time?: import('../../types/renderer').InputRenderer<"time"> | undefined;
+                timerange?: import('../../types/renderer').InputRenderer<"timerange"> | undefined;
+            };
+            loadingSkeleton: (() => import('react').ReactNode) | undefined;
+            step: ((props: import('../../types/renderer').StepRenderProps) => import('react').ReactNode) | undefined;
+            submitButton: ((props: {
+                label?: string;
+                disabled?: boolean;
+                isSubmitting?: boolean;
+                [key: string]: unknown;
+            } | {
+                children?: import('react').ReactNode;
+                disabled?: boolean;
+                isSubmitting?: boolean;
+                onPress?: () => void;
+                [key: string]: unknown;
+            }) => import('react').ReactNode) | undefined;
+            submitButtonWrapper: ((props: {
+                children: import('react').ReactNode;
+                missingFields?: string[];
+            }) => import('react').ReactNode) | undefined;
+            ui: {
+                divider?: ((props: import('../../types/renderer').NodeRenderProps) => import('react').ReactNode) | undefined;
+                title?: ((props: import('../../types/renderer').NodeRenderProps) => import('react').ReactNode) | undefined;
+            };
+        };
+        googleApiKey: string | undefined;
+        headers: import('../../../shared/types/node').HttpHeaders;
+        language: string;
+        showPoweredBy: boolean;
+        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>[];
-    mergedFlow: Flow;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isSubmitting: boolean;
     missingRequiredFields: string[];
+    prevFormValuesRef: import('react').RefObject<FormValues>;
+    setFieldErrors: import('react').Dispatch<import('react').SetStateAction<Record<string, string>>>;
     setFieldValue: (fieldName: string, value: unknown) => void;
-    setFormErrors: import('react').Dispatch<import('react').SetStateAction<Record<string, string>>>;
-    t: (key?: import('../../../main').Translatable | import('../../../main').TranslationKey | string) => string;
+    setMultipleFieldValues: (updates: FormValues) => void;
+    steps: import('../../utils/step').FlowStep[];
+    submitMessage: {
+        type: "success" | "error";
+        message: string;
+    } | null;
+    t: (key?: import('../../../main').Translatable | string) => string;
     validateForm: (customValidate?: (values: FormValues, visibleNodesList: Node<TreegeNodeData>[]) => Record<string, string>) => {
         errors: {
             [x: string]: string;
@@ -48,3 +116,8 @@ export declare const useTreegeRenderer: (flows: Flow | Flow[] | null | undefined
     visibleNodes: Node<TreegeNodeData>[];
     visibleRootNodes: Node<TreegeNodeData>[];
 };
+/**
+ * Type for the return value of useTreegeRenderer
+ * Useful for TypeScript users building custom components
+ */
+export type UseTreegeRendererReturn = ReturnType<typeof useTreegeRenderer>;

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { InputLabelRenderProps } from '../../../../types/renderer';
+/**
+ * Default input label (web). Renders nothing when no end-user label is
+ * configured, so the technical node key (`node.data.name`) never leaks into the
+ * rendered form. Inputs keep an accessible name through an `aria-label` fallback
+ * on the field itself. Override globally via `components.inputLabel`.
+ */
+declare const DefaultInputLabel: ({ label, required, htmlFor, id, className }: InputLabelRenderProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DefaultInputLabel;

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

@@ -0,0 +1,7 @@
+/**
+ * Default loading skeleton displayed by `TreegeRenderer` while `isLoading` is
+ * true. Mimics the visual structure of a step (title, a few fields and the
+ * navigation buttons) so the layout doesn't shift once the real form renders.
+ */
+declare const DefaultLoadingSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default DefaultLoadingSkeleton;

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

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

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

@@ -1,9 +1,13 @@
 import { ButtonHTMLAttributes } from 'react';
 export interface SubmitButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     label?: string;
+    /**
+     * When true, shows a spinner inside the button (and keeps it disabled).
+     */
+    isSubmitting?: boolean;
 }
 /**
  * Default submit button
  */
-declare const DefaultSubmitButton: ({ label, ...props }: SubmitButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultSubmitButton: import('react').ForwardRefExoticComponent<SubmitButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default DefaultSubmitButton;

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { MissingDependency } from '../../../../types/renderer';
+interface MissingProps {
+    /** Unfilled fields the input depends on (from `extra.missingDependencies`). */
+    missing: MissingDependency[];
+}
+/**
+ * Wraps a disabled input control with a tooltip listing the fields the user
+ * must fill before the input's dynamic options can load. Renders children
+ * untouched when there are no missing dependencies, so it's safe to wrap any
+ * trigger-based dynamic input (select, autocomplete, http) unconditionally.
+ */
+declare const DependencyHint: ({ missing, children }: MissingProps & {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Inline variant for inputs that have no single trigger to hover (radio,
+ * checkbox): renders the same hint as always-visible muted text. Renders
+ * nothing when there are no missing dependencies.
+ */
+export declare const DependencyHintMessage: ({ missing }: MissingProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DependencyHint;

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

@@ -0,0 +1,17 @@
+interface OptionItemContentProps {
+    /** Already-translated option label. */
+    label: string;
+    /** Already-translated option description (optional). */
+    description?: string;
+    /** Option image — base64 data URL or remote URL (optional). */
+    image?: string;
+}
+/**
+ * Shared content for an option row in a dropdown/combobox/select, built from the
+ * shadcn `Item` primitives: an optional leading image, the label, and an
+ * optional muted description underneath. Rendered as a fragment — the enclosing
+ * `CommandItem`/`SelectItem` already provides the flex row. The selection
+ * indicator (check) is left to the caller so it can sit outside this block.
+ */
+declare const OptionItemContent: ({ label, description, image }: OptionItemContentProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionItemContent;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultAddressInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultAddressInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"address">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultAddressInput: ({ field, extra }: InputRenderProps<"address">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultAddressInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultAutocompleteInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultAutocompleteInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"autocomplete">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultAutocompleteInput: ({ field, extra }: InputRenderProps<"autocomplete">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultAutocompleteInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultCheckboxInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultCheckboxInput: ({ node, value, setValue, error, label, helperText }: InputRenderProps<"checkbox">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultCheckboxInput: ({ field, extra }: InputRenderProps<"checkbox">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultCheckboxInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultDateInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultDateInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"date">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultDateInput: ({ field, extra }: InputRenderProps<"date">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultDateInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultDateRangeInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultDateRangeInput: ({ node, value, setValue, error, label, helperText }: InputRenderProps<"daterange">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultDateRangeInput: ({ field, extra }: InputRenderProps<"daterange">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultDateRangeInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultFileInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultFileInput: ({ node, setValue, error, label, placeholder, helperText }: InputRenderProps<"file">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultFileInput: ({ field, extra }: InputRenderProps<"file">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultFileInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultHiddenInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultHiddenInput: ({ node, value }: InputRenderProps<"hidden">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultHiddenInput: ({ field }: InputRenderProps<"hidden">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultHiddenInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultHttpInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultHttpInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"http">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultHttpInput: ({ field, extra }: InputRenderProps<"http">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultHttpInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultNumberInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultNumberInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"number">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultNumberInput: ({ field, extra }: InputRenderProps<"number">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultNumberInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultPasswordInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultPasswordInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"password">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultPasswordInput: ({ field, extra }: InputRenderProps<"password">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultPasswordInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultRadioInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultRadioInput: ({ node, value, setValue, error, label, helperText }: InputRenderProps<"radio">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultRadioInput: ({ field, extra }: InputRenderProps<"radio">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultRadioInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultSelectInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultSelectInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"select">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultSelectInput: ({ field, extra }: InputRenderProps<"select">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultSelectInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultSubmitInput.d.ts

@@ -0,0 +1,11 @@
+import { InputRenderProps } from '../../../../../types/renderer';
+/**
+ * The `submit` input node is declarative only: it marks where the flow submits
+ * and carries the optional custom label / `submitConfig`. The actual submit
+ * button is rendered once by the step (in its action row, next to Back) — see
+ * `DefaultStep` — so the node itself renders nothing. This guarantees a single,
+ * consistently-placed button whether submission comes from an explicit submit
+ * node, the default "Submit", or a "Continue" step.
+ */
+declare const DefaultSubmitInput: (_props: InputRenderProps<"submit">) => null;
+export default DefaultSubmitInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultSwitchInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultSwitchInput: ({ node, value, setValue, error, label, helperText }: InputRenderProps<"switch">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultSwitchInput: ({ field, extra }: InputRenderProps<"switch">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultSwitchInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultTextAreaInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultTextAreaInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"textarea">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultTextAreaInput: ({ field, extra }: InputRenderProps<"textarea">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultTextAreaInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultTextInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultTextInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"text">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultTextInput: ({ field, extra }: InputRenderProps<"text">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultTextInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultTimeInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultTimeInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"time">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultTimeInput: ({ field, extra }: InputRenderProps<"time">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultTimeInput;

package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultTimeRangeInput.d.ts

@@ -1,3 +1,3 @@
 import { InputRenderProps } from '../../../../../types/renderer';
-declare const DefaultTimeRangeInput: ({ node, value, setValue, error, label, helperText }: InputRenderProps<"timerange">) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultTimeRangeInput: ({ field, extra }: InputRenderProps<"timerange">) => import("react/jsx-runtime").JSX.Element;
 export default DefaultTimeRangeInput;

package/dist/renderer/features/TreegeRenderer/web/components/styles/RendererStyles.d.ts

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

package/dist/renderer/features/TreegeViewer/utils/viewerFields.d.ts

@@ -0,0 +1,102 @@
+import { Node } from '@xyflow/react';
+import { FormValues } from '../../../types/renderer';
+import { SerializableFile } from '../../../../shared/types/file';
+import { Flow, InputNodeData, InputType } from '../../../../shared/types/node';
+import { Translatable } from '../../../../shared/types/translate';
+/**
+ * Display-ready representation of a submitted field value, normalized per input
+ * type so a viewer can render it without re-deriving formatting rules:
+ * - `text`    free-form string (text, number, date, ranges, resolved option label…)
+ * - `boolean` a yes/no value (switch) — render as a read-only toggle/checkbox
+ * - `tags`    a list of labels (multi-select checkbox) — render as chips
+ * - `files`   uploaded documents — render names or thumbnails (often overridden)
+ * - `empty`   no value was submitted for this field
+ */
+export type ViewerFieldDisplay = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "boolean";
+    checked: boolean;
+} | {
+    kind: "tags";
+    tags: string[];
+} | {
+    kind: "files";
+    files: SerializableFile[];
+} | {
+    kind: "empty";
+};
+/** A single resolved field of a submitted form, ready for read-only rendering. */
+export interface ViewerField {
+    /** The flow node id. */
+    id: string;
+    /** The submission key (name > translated label > id), as used in `onSubmit`. */
+    name: string;
+    /** The input type (`text`, `select`, `daterange`, `file`, …). */
+    type: InputType;
+    /** The translated field label (falls back to `name`, then node id). */
+    label: string;
+    /** The raw submitted value, untouched. */
+    rawValue: unknown;
+    /** Normalized, render-ready representation of the value. */
+    display: ViewerFieldDisplay;
+    /** The originating flow node — present only in flow-based resolution (escape hatch for custom rendering). */
+    node?: Node<InputNodeData>;
+}
+/**
+ * A self-describing stored value, used to render a viewer **without** a `flow`
+ * (e.g. a persisted `WorkflowValue[]`). Each entry carries its own metadata so
+ * the value can be formatted by type and labelled without a flow definition.
+ */
+export interface FlowResponseEntry {
+    name?: string;
+    type?: string;
+    value?: unknown;
+    label?: Translatable | string;
+}
+export interface GetViewerFieldsOptions {
+    /** Language used to resolve translatable labels/options (defaults to `en`). */
+    language?: string;
+    /**
+     * Base URL used to resolve relative file paths (e.g. `uploads/x.png`) into
+     * absolute URLs — same role as on `TreegeRenderer`/`TreegeEditor`. Absolute,
+     * `data:` and `blob:` URLs are left untouched.
+     */
+    baseUrl?: string;
+}
+/**
+ * Whether a file should be previewed inline as an image — detected by MIME type
+ * (`image/*`), a `data:image/` data-URL, or a recognized image URL extension.
+ */
+export declare const isImageFile: (file: SerializableFile) => boolean;
+/**
+ * Resolve a submitted form into a flat, render-ready list of fields.
+ *
+ * Mirrors what the renderer would show for the same values: the submission is
+ * normalized to node-id keys (accepting both `name`- and `id`-keyed input, like
+ * `initialValues`), then run through the same branch-visibility logic so only
+ * the fields that were actually reachable for these values are returned —
+ * inactive branches and `hidden`/`submit` nodes are excluded.
+ *
+ * This is the headless core behind {@link TreegeViewer}: consumers wanting a
+ * custom layout can render straight from this list.
+ *
+ * @param flow - The flow definition the values were submitted against
+ * @param values - The submitted values (`name`- or `id`-keyed)
+ * @param options - Resolution options (language, baseUrl)
+ * @returns The ordered, visible, display-ready fields
+ */
+export declare const getViewerFields: (flow: Flow | null | undefined, values: FormValues | null | undefined, options?: GetViewerFieldsOptions) => ViewerField[];
+/**
+ * Build a render-ready field list straight from a self-describing response —
+ * each entry supplies its own `name`/`type`/`value`/`label`, so no `flow` is
+ * needed. Used by {@link TreegeViewer} in its flow-less mode. Option values are
+ * shown as-is (there's no flow to resolve their labels), and `hidden`/`submit`
+ * entries are skipped.
+ *
+ * @param response - The self-describing stored values
+ * @param options - Resolution options (language, baseUrl)
+ * @returns The ordered, display-ready fields
+ */
+export declare const viewerFieldsFromResponse: (response: readonly FlowResponseEntry[] | null | undefined, options?: GetViewerFieldsOptions) => ViewerField[];

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

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+import { FlowResponseEntry, ViewerField } from '../utils/viewerFields';
+import { FormValues } from '../../../types/renderer';
+import { Flow, InputType } from '../../../../shared/types/node';
+/** Per-type override map: `{ file: (field) => <Thumbnails /> }`. */
+export type ViewerFieldRenderers = Partial<Record<InputType, (field: ViewerField) => ReactNode>>;
+interface TreegeViewerBaseProps {
+    /**
+     * Language used to resolve translatable labels/options (defaults to the provider config, then `en`).
+     */
+    language?: string;
+    /**
+     * Light/dark theme. Falls back to the `TreegeRendererProvider` config, then `"dark"`.
+     */
+    theme?: "light" | "dark";
+    /**
+     * Base URL to resolve relative file paths into absolute URLs. `data:`/`blob:`/absolute URLs are left untouched.
+     */
+    baseUrl?: string;
+    /**
+     *  Field names (or ids) to hide from the view.
+     */
+    excludedFields?: string[];
+    /**
+     * Hide fields that have no submitted value (instead of showing `emptyText`).
+     */
+    excludeEmptyFields?: boolean;
+    /**
+     *  When `true`, only the first `collapsedVisibleCount` fields are rendered.
+     */
+    collapsed?: boolean;
+    /**
+     * Number of fields kept visible while `collapsed` (defaults to all).
+     */
+    collapsedVisibleCount?: number;
+    /**
+     * Text shown when a field has no submitted value (defaults to `"—"`).
+     */
+    emptyText?: string;
+    /**
+     * Extra class names on the root element.
+     */
+    className?: string;
+    /**
+     * Per-type rendering overrides for the value cell. Use this for app-specific
+     * cases — typically `file` (e.g. render thumbnails from your own storage)
+     * while every other type keeps its built-in rendering.
+     */
+    renderField?: ViewerFieldRenderers;
+    /**
+     * Wrap or replace a whole field row (label + value). Receives the resolved
+     * field and the default row node; return your own layout or the default.
+     */
+    renderRow?: (field: ViewerField, defaultRow: ReactNode) => ReactNode;
+}
+/**
+ * `flowResponse` is typed conditionally on `flow`:
+ * - **with** a `flow` → the renderer's `FormValues` (`name`- or `id`-keyed), resolved against the flow;
+ * - **without** a `flow` → a self-describing `FlowResponseEntry[]` (each carries its own
+ *   `name`/`type`/`value`/`label`), rendered as-is.
+ */
+export type TreegeViewerProps = TreegeViewerBaseProps & ({
+    /**
+     * The flow the values were submitted against.
+     */
+    flow: Flow;
+    /** The submitted values as the renderer's `FormValues` (`name`- or `id`-keyed). */
+    flowResponse: FormValues;
+} | {
+    flow?: undefined;
+    /**
+     * Self-describing stored values rendered without a flow.
+     */
+    flowResponse: FlowResponseEntry[];
+});
+/**
+ * Read-only viewer for a submitted Treege form. Given the `flow` and the
+ * submitted `values`, it renders every reachable field as a label/value pair —
+ * resolving option labels, formatting dates/ranges and i18n labels the same way
+ * the renderer does, scoped to the active branch.
+ *
+ * Styling matches the renderer (shadcn/Tailwind, `tg:` prefix). For values that
+ * need app-specific rendering (chiefly uploaded `file`s) pass `renderField`; to
+ * change the whole row layout pass `renderRow`.
+ *
+ * @example
+ * // With a flow — `flowResponse` is the renderer's FormValues:
+ * <TreegeViewer flow={flow} flowResponse={submitted} language="fr" excludeEmptyFields />
+ *
+ * // Without a flow — `flowResponse` is a self-describing list:
+ * <TreegeViewer flowResponse={[{ name: "city", type: "text", value: "Paris", label: { en: "City" } }]} />
+ */
+declare const TreegeViewer: ({ flow, flowResponse, baseUrl, theme, excludedFields, excludeEmptyFields, collapsed, collapsedVisibleCount, className, renderField, renderRow, language, emptyText, }: TreegeViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default TreegeViewer;

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 {};