treege 3.0.0-beta.83 → 3.0.0-beta.84

package/README.md

@@ -52,6 +52,7 @@ Treege is a modern React library for creating and rendering interactive decision
 - **Optional Dependencies**: Graceful degradation when optional packages like `react-native-document-picker` aren't installed
 - **Theme Support**: Dark/light mode out of the box
 - **Google API Integration**: Address autocomplete support
+- **Read-Only Viewer**: `TreegeViewer` renders a submitted flow as a label/value recap — same branch-visibility and formatting as the form, with a headless `getViewerFields` core for custom layouts
 
 ### Developer Experience
 - **Modular**: Import only what you need (editor, renderer, or both)
@@ -189,6 +190,73 @@ function App() {
 }
 ```
 
+## Read-Only Viewer (`TreegeViewer`)
+
+Once a form has been submitted, `TreegeViewer` renders the result as a read-only **label / value recap** — no inputs, no validation. It takes the same `flow` and the submitted `values` (the `onSubmit` payload) and replays them through the renderer's branch-visibility logic, so only the fields that were actually reachable for those values are shown. Option values resolve to their labels, dates/ranges and i18n labels are formatted exactly like the form, and `hidden`/`submit` fields are excluded.
+
+```tsx
+import { TreegeRenderer } from "treege/renderer";
+import { TreegeViewer } from "treege/renderer";
+import { useState } from "react";
+import type { Flow, FormValues } from "treege";
+
+function App({ flow }: { flow: Flow }) {
+  const [submitted, setSubmitted] = useState<FormValues | null>(null);
+
+  if (submitted) {
+    return <TreegeViewer flow={flow} values={submitted} language="en" />;
+  }
+
+  return <TreegeRenderer flow={flow} onSubmit={setSubmitted} />;
+}
+```
+
+### Props
+
+| Prop                 | Type                                                | Default | Description                                                                                                  |
+|----------------------|-----------------------------------------------------|---------|--------------------------------------------------------------------------------------------------------------|
+| `flow`               | `Flow`                                              | -       | The flow the values were submitted against                                                                   |
+| `values`             | `FormValues`                                        | -       | The submitted values (`name`- or `id`-keyed, e.g. the `onSubmit` payload)                                    |
+| `language`           | `string`                                            | `"en"`  | Language used to resolve translatable labels/options                                                         |
+| `baseUrl`            | `string`                                            | -       | Resolves relative file paths into absolute URLs (same role as on `TreegeRenderer`); `data:`/`blob:`/absolute URLs are left untouched |
+| `excludedFields`     | `string[]`                                          | -       | Field names (or ids) to hide from the view                                                                   |
+| `excludeEmptyFields` | `boolean`                                           | `false` | Hide fields that have no submitted value (instead of showing `emptyText`)                                    |
+| `emptyText`          | `string`                                            | `"—"`   | Text shown when a field has no submitted value                                                               |
+| `className`          | `string`                                            | -       | Extra class names on the root element                                                                        |
+| `renderField`        | `Partial<Record<InputType, (field) => ReactNode>>` | -       | Per-type rendering overrides for the value cell (typically `file`)                                          |
+| `renderRow`          | `(field, defaultRow) => ReactNode`                  | -       | Wrap or replace a whole field row (label + value)                                                            |
+
+### Customizing rendering
+
+Use `renderField` to override the value cell for a specific input type — most often `file`, to render thumbnails from your own storage — while every other type keeps its built-in rendering. Use `renderRow` to control the whole row layout (label + value):
+
+```tsx
+<TreegeViewer
+  flow={flow}
+  values={submitted}
+  language="fr"
+  excludedFields={["internalNote"]}
+  renderField={{ file: ({ rawValue }) => <Thumbnails files={rawValue} /> }}
+/>
+```
+
+### Headless usage (`getViewerFields`)
+
+`TreegeViewer` is a thin layer over `getViewerFields`, which returns the ordered, visible, display-ready fields. Use it directly when you want a fully custom layout (a table, a PDF, columns…):
+
+```tsx
+import { getViewerFields } from "treege/renderer";
+
+const fields = getViewerFields(flow, values, { language: "en", baseUrl });
+
+fields.forEach((field) => {
+  // field.label, field.type, field.rawValue
+  // field.display — normalized, render-ready value:
+  //   { kind: "text", text }   | { kind: "boolean", checked }
+  //   { kind: "tags", tags }   | { kind: "files", files } | { kind: "empty" }
+});
+```
+
 ## Module Structure
 
 Treege provides multiple import paths for optimal bundle size:

package/dist/{editor-CbcW0OVV.js → editor-Fufe7OeU.js}

@@ -3739,7 +3739,7 @@ var ca = ({ aiConfig: e, onGenerate: t }) => {
 						/* @__PURE__ */ K(fr, {}),
 						/* @__PURE__ */ q(dr, {
 							className: "tg:font-normal tg:text-muted-foreground tg:text-xs",
-							children: ["v", "3.0.0-beta.83"]
+							children: ["v", "3.0.0-beta.84"]
 						})
 					]
 				})]

package/dist/editor.js

@@ -1,3 +1,3 @@
-import { t as e } from "./editor-CbcW0OVV.js";
+import { t as e } from "./editor-Fufe7OeU.js";
 import { n as t, t as n } from "./ThemeContext-BnPOFQC7.js";
 export { n as ThemeProvider, e as TreegeEditor, t as useTheme };

package/dist/main.js

@@ -1,6 +1,6 @@
-import { t as e } from "./editor-CbcW0OVV.js";
+import { t as e } from "./editor-Fufe7OeU.js";
 import { G as t, I as n, J as r, K as i, L as a, U as o, W as s, Y as c, _ as l, a as u, b as d, c as f, g as p, h as m, i as h, l as g, m as _, n as v, o as y, q as b, r as x, s as S, t as C, v as w, y as T } from "./ThemeContext-BnPOFQC7.js";
 import { C as E, L as D, S as O, _ as k, a as A, b as j, c as M, d as N, g as P, h as F, i as I, m as L, n as R, o as z, r as B, u as V, v as H, x as U, y as W } from "./DefaultSubmitButton-DpeL3OxC.js";
 import { a as G, c as K, i as q, l as J, n as Y, o as X, r as Z, s as Q } from "./useRenderNode-DQ5lvXuj.js";
-import { a as $, i as ee, n as te, o as ne, r as re, s as ie, t as ae } from "./renderer-KRzuU6OD.js";
+import { a as $, i as ee, n as te, o as ne, r as re, s as ie, t as ae } from "./renderer-BwjPBBfm.js";
 export { E as DefaultAddressInput, O as DefaultAutocompleteInput, U as DefaultCheckboxInput, j as DefaultDateInput, W as DefaultDateRangeInput, H as DefaultFileInput, k as DefaultHiddenInput, P as DefaultHttpInput, D as DefaultInputLabel, F as DefaultNumberInput, L as DefaultPasswordInput, N as DefaultRadioInput, V as DefaultSelectInput, M as DefaultSwitchInput, z as DefaultTextAreaInput, A as DefaultTextInput, I as DefaultTimeInput, B as DefaultTimeRangeInput, $ as Divider, C as ThemeProvider, ne as Title, e as TreegeEditor, ee as TreegeRenderer, K as TreegeRendererProvider, ae as TreegeViewer, x as applyReferenceTransformation, h as buildInitialFormValues, u as calculateReferenceFieldUpdates, y as checkFormFieldHasValue, S as convertFormValuesToNamedFormat, R as defaultInputRenderers, ie as defaultUI, X as evaluateCondition, Q as evaluateConditions, _ as fileNameFromUrl, m as fileToSerializable, p as filesToSerializable, Z as findStartNode, l as formatFileSize, q as getFlowRenderState, o as getStaticTranslations, s as getTranslatableValue, t as getTranslatedText, te as getViewerFields, f as isFieldEmpty, b as isGroupNode, re as isImageFile, r as isInputNode, w as isRemoteFileData, G as isStartNode, c as isUINode, T as normalizeSerializableFiles, g as resolveNodeDefaultValue, n as sanitize, a as sanitizeHttpResponse, d as serializableToFile, i as setTranslatableValue, v as useTheme, Y as useTreegeRenderer, J as useTreegeRendererConfig };

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

@@ -27,6 +27,11 @@ export interface TreegeViewerProps {
      * Field names (or ids) to hide from the view.
      */
     excludedFields?: string[];
+    /**
+     * Hide fields that have no submitted value (instead of showing `emptyText`).
+     * Useful to render a compact recap of only the filled-in fields.
+     */
+    excludeEmptyFields?: boolean;
     /**
      * Text shown when a field has no submitted value (defaults to `"—"`).
      */
@@ -66,5 +71,5 @@ export interface TreegeViewerProps {
  *   renderField={{ file: ({ rawValue }) => <Thumbnails files={rawValue} /> }}
  * />
  */
-declare const TreegeViewer: ({ flow, values, baseUrl, excludedFields, className, renderField, renderRow, emptyText, language, }: TreegeViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TreegeViewer: ({ flow, values, baseUrl, excludedFields, excludeEmptyFields, className, renderField, renderRow, emptyText, language, }: TreegeViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default TreegeViewer;

package/dist/{renderer-KRzuU6OD.js → renderer-BwjPBBfm.js}

@@ -377,22 +377,26 @@ var ce = () => /* @__PURE__ */ k("section", {
 			children: n.text
 		});
 	}
-}, Z = ({ flow: e, values: t, baseUrl: n, excludedFields: r, className: i, renderField: a, renderRow: o, emptyText: s = "—", language: c = "en" }) => {
-	let l = E(() => J(e, t, {
+}, Z = ({ flow: e, values: t, baseUrl: n, excludedFields: r, excludeEmptyFields: i, className: a, renderField: o, renderRow: s, emptyText: c = "—", language: l = "en" }) => {
+	let u = E(() => J(e, t, {
 		baseUrl: n,
-		language: c
+		language: l
 	}), [
 		e,
 		t,
-		c,
+		l,
 		n
-	]), u = E(() => l.filter((e) => !(r?.includes(e.name) || r?.includes(e.id))), [l, r]);
+	]), d = E(() => u.filter((e) => !(r?.includes(e.name) || r?.includes(e.id) || i && e.display.kind === "empty")), [
+		u,
+		r,
+		i
+	]);
 	return /* @__PURE__ */ O("dl", {
-		className: v("tg:flex tg:flex-col tg:gap-4", i),
-		children: u.map((e) => {
-			let t = a?.[e.type], n = t ? t(e) : /* @__PURE__ */ O(X, {
+		className: v("tg:flex tg:flex-col tg:gap-4", a),
+		children: d.map((e) => {
+			let t = o?.[e.type], n = t ? t(e) : /* @__PURE__ */ O(X, {
 				field: e,
-				emptyText: s
+				emptyText: c
 			}), r = /* @__PURE__ */ k("div", {
 				className: "tg:flex tg:flex-col tg:gap-1",
 				children: [/* @__PURE__ */ O("dt", {
@@ -403,7 +407,7 @@ var ce = () => /* @__PURE__ */ k("section", {
 					children: n
 				})]
 			});
-			return /* @__PURE__ */ O("div", { children: o ? o(e, r) : r }, e.id);
+			return /* @__PURE__ */ O("div", { children: s ? s(e, r) : r }, e.id);
 		})
 	});
 };

package/dist/renderer.js

@@ -1,5 +1,5 @@
 import { G as e, I as t, L as n, _ as r, a as i, b as a, c as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, r as m, s as h, t as g, v as _, y as v } from "./ThemeContext-BnPOFQC7.js";
 import { C as y, L as b, S as x, _ as S, a as C, b as w, c as T, d as E, g as D, h as O, i as k, m as A, n as j, o as M, r as N, u as P, v as F, x as I, y as L } from "./DefaultSubmitButton-DpeL3OxC.js";
 import { a as R, c as z, i as B, l as V, n as H, o as U, r as W, s as G } from "./useRenderNode-DQ5lvXuj.js";
-import { a as K, i as q, n as J, o as Y, r as X, s as Z, t as Q } from "./renderer-KRzuU6OD.js";
+import { a as K, i as q, n as J, o as Y, r as X, s as Z, t as Q } from "./renderer-BwjPBBfm.js";
 export { y as DefaultAddressInput, x as DefaultAutocompleteInput, I as DefaultCheckboxInput, w as DefaultDateInput, L as DefaultDateRangeInput, F as DefaultFileInput, S as DefaultHiddenInput, D as DefaultHttpInput, b as DefaultInputLabel, O as DefaultNumberInput, A as DefaultPasswordInput, E as DefaultRadioInput, P as DefaultSelectInput, T as DefaultSwitchInput, M as DefaultTextAreaInput, C as DefaultTextInput, k as DefaultTimeInput, N as DefaultTimeRangeInput, K as Divider, g as ThemeProvider, Y as Title, q as TreegeRenderer, z as TreegeRendererProvider, Q as TreegeViewer, m as applyReferenceTransformation, l as buildInitialFormValues, i as calculateReferenceFieldUpdates, p as checkFormFieldHasValue, h as convertFormValuesToNamedFormat, j as defaultInputRenderers, Z as defaultUI, U as evaluateCondition, G as evaluateConditions, d as fileNameFromUrl, c as fileToSerializable, s as filesToSerializable, W as findStartNode, r as formatFileSize, B as getFlowRenderState, e as getTranslatedText, J as getViewerFields, o as isFieldEmpty, X as isImageFile, _ as isRemoteFileData, R as isStartNode, v as normalizeSerializableFiles, u as resolveNodeDefaultValue, t as sanitize, n as sanitizeHttpResponse, a as serializableToFile, f as useTheme, H as useTreegeRenderer, V as useTreegeRendererConfig };

package/package.json

@@ -2,7 +2,7 @@
   "name": "treege",
   "description": "Powerful form generator",
   "license": "ISC",
-  "version": "3.0.0-beta.83",
+  "version": "3.0.0-beta.84",
   "type": "module",
   "types": "./dist/main.d.ts",
   "module": "./dist/main.js",