@pipe0/react 0.0.5 → 0.0.7

package/dist/components/compound/pipe-form/content.d.mts

@@ -1,10 +1,15 @@
-import { FormSectionHandle } from "../../../types/form-handle.mjs";
-import * as _$react from "react";
+import { FormHandle, FormSectionHandle } from "../../../types/form-handle.mjs";
 import { useRender } from "@base-ui/react/use-render";
+import * as _$react from "react";
+import { PipePayload } from "@pipe0/base";
 
 //#region src/components/compound/pipe-form/content.d.ts
 interface PipeFormContentState {
   sections: FormSectionHandle[];
+  fieldPaths: Set<string>;
+  hasFieldLoaderError: boolean;
+  isFieldLoaderLoading: boolean;
+  form: FormHandle<PipePayload>;
 }
 interface PipeFormContentProps extends useRender.ComponentProps<"div", PipeFormContentState> {}
 declare function PipeFormContent({

package/dist/components/compound/pipe-form/content.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/content.tsx"],"mappings":";;;;;UAUiB,oBAAA;EACf,QAAA,EAAU,iBAAA;AAAA;AAAA,UAGK,oBAAA,SACP,SAAA,CAAU,cAAA,QAAsB,oBAAA;AAAA,iBAE1B,eAAA,CAAA;EAAkB,QAAA;EAAU,SAAA;EAAW,MAAA;EAAA,GAAW;AAAA,GAAS,oBAAA,GAAoB,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"content.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/content.tsx"],"mappings":";;;;;;UAQiB,oBAAA;EACf,QAAA,EAAU,iBAAA;EACV,UAAA,EAAY,GAAA;EACZ,mBAAA;EACA,oBAAA;EACA,IAAA,EAAM,UAAA,CAAW,WAAA;AAAA;AAAA,UAGF,oBAAA,SACP,SAAA,CAAU,cAAA,QAAsB,oBAAA;AAAA,iBAE1B,eAAA,CAAA;EAAkB,QAAA;EAAU,SAAA;EAAW,MAAA;EAAA,GAAW;AAAA,GAAS,oBAAA,GAAoB,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA"}

package/dist/components/compound/pipe-form/content.mjs

@@ -1,40 +1,38 @@
-import { useFormCustomization } from "../../../context/form-customization-context.mjs";
 import { usePipeFormContext } from "../../../context/pipe-form-context.mjs";
-import { applyFormCustomization } from "../../../utils/build-section-handlers.mjs";
-import { FormLevelErrors } from "../../internal/form-level-errors.mjs";
+import { PipeFormErrors } from "./errors.mjs";
 import { PipeFormSection } from "./section.mjs";
-import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/compound/pipe-form/content.tsx
 function PipeFormContent({ children, className, render, ...props }) {
-	const context = usePipeFormContext();
-	const [customization] = useFormCustomization();
-	const filteredSections = useMemo(() => applyFormCustomization(context.sections, customization), [context.sections, customization]);
-	const fieldPaths = useMemo(() => new Set(filteredSections.flatMap((s) => s.groups.flatMap((g) => g.fields.map((f) => f.path)))), [filteredSections]);
-	const anyFieldError = Object.values(context.fieldLoadStates).some((s) => s.status === "error");
-	const defaultChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		filteredSections.map((section) => /* @__PURE__ */ jsx(PipeFormSection, { section }, section.key)),
-		anyFieldError && /* @__PURE__ */ jsx("div", {
-			"data-p0": "store-error",
-			role: "alert",
-			className: "pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-destructive/50 pz:bg-destructive/5 pz:px-3 pz:py-2 pz:text-destructive pz:text-xs pz:font-medium",
-			children: /* @__PURE__ */ jsx("span", { children: "Failed to load options for one or more fields. Check that your connection is valid." })
-		}),
-		/* @__PURE__ */ jsx(FormLevelErrors, {
-			control: context.form.control,
-			fieldPaths
-		})
-	] });
+	const { sections, fieldPaths, hasFieldLoaderError, isFieldLoaderLoading, form } = usePipeFormContext();
+	const defaultBody = /* @__PURE__ */ jsxs(Fragment, { children: [sections.map((section, idx) => {
+		const prev = idx > 0 ? sections[idx - 1] : null;
+		return /* @__PURE__ */ jsx(PipeFormSection, {
+			section,
+			hideLabel: !!(section.label && prev && prev.label === section.label)
+		}, section.key);
+	}), /* @__PURE__ */ jsx(PipeFormErrors, {})] });
 	return useRender({
 		defaultTagName: "div",
 		render,
-		state: { sections: filteredSections },
+		state: {
+			sections,
+			fieldPaths,
+			hasFieldLoaderError,
+			isFieldLoaderLoading,
+			form
+		},
+		stateAttributesMapping: {
+			sections: () => null,
+			fieldPaths: () => null,
+			form: () => null
+		},
 		props: mergeProps({
 			className,
-			children: children ?? defaultChildren,
+			children: children ?? defaultBody,
 			"data-p0": "form-content"
 		}, props)
 	});

package/dist/components/compound/pipe-form/content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/content.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useMemo } from \"react\";\nimport { useFormCustomization } from \"../../../context/form-customization-context.js\";\nimport { usePipeFormContext } from \"../../../context/pipe-form-context.js\";\nimport type { FormSectionHandle } from \"../../../types/form-handle.js\";\nimport { applyFormCustomization } from \"../../../utils/build-section-handlers.js\";\nimport { FormLevelErrors } from \"../../internal/form-level-errors.js\";\nimport { PipeFormSection } from \"./section.js\";\n\nexport interface PipeFormContentState {\n  sections: FormSectionHandle[];\n}\n\nexport interface PipeFormContentProps\n  extends useRender.ComponentProps<\"div\", PipeFormContentState> {}\n\nexport function PipeFormContent({ children, className, render, ...props }: PipeFormContentProps) {\n  const context = usePipeFormContext();\n  const [customization] = useFormCustomization();\n\n  const filteredSections = useMemo(\n    () => applyFormCustomization(context.sections, customization),\n    [context.sections, customization],\n  );\n\n  const fieldPaths = useMemo(\n    () =>\n      new Set(\n        filteredSections.flatMap((s) => s.groups.flatMap((g) => g.fields.map((f) => f.path))),\n      ),\n    [filteredSections],\n  );\n\n  const anyFieldError = Object.values(context.fieldLoadStates).some((s) => s.status === \"error\");\n\n  const defaultChildren = (\n    <>\n      {filteredSections.map((section) => (\n        <PipeFormSection key={section.key} section={section} />\n      ))}\n      {anyFieldError && (\n        <div\n          data-p0=\"store-error\"\n          role=\"alert\"\n          className=\"pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-destructive/50 pz:bg-destructive/5 pz:px-3 pz:py-2 pz:text-destructive pz:text-xs pz:font-medium\"\n        >\n          <span>\n            Failed to load options for one or more fields. Check that your connection is valid.\n          </span>\n        </div>\n      )}\n      <FormLevelErrors control={context.form.control} fieldPaths={fieldPaths} />\n    </>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: { sections: filteredSections },\n    props: mergeProps<\"div\">(\n      {\n        className,\n        children: children ?? defaultChildren,\n        ...({ \"data-p0\": \"form-content\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;AAiBA,SAAgB,gBAAgB,EAAE,UAAU,WAAW,QAAQ,GAAG,SAA+B;CAC/F,MAAM,UAAU,oBAAoB;CACpC,MAAM,CAAC,iBAAiB,sBAAsB;CAE9C,MAAM,mBAAmB,cACjB,uBAAuB,QAAQ,UAAU,cAAc,EAC7D,CAAC,QAAQ,UAAU,cAAc,CAClC;CAED,MAAM,aAAa,cAEf,IAAI,IACF,iBAAiB,SAAS,MAAM,EAAE,OAAO,SAAS,MAAM,EAAE,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,CACtF,EACH,CAAC,iBAAiB,CACnB;CAED,MAAM,gBAAgB,OAAO,OAAO,QAAQ,gBAAgB,CAAC,MAAM,MAAM,EAAE,WAAW,QAAQ;CAE9F,MAAM,kBACJ;EACG,iBAAiB,KAAK,YACrB,oBAAC,iBAAD,EAA4C,SAAW,EAAjC,QAAQ,IAAyB,CACvD;EACD,iBACC,oBAAC,OAAD;GACE,WAAQ;GACR,MAAK;GACL,WAAU;aAEV,oBAAC,QAAD,YAAM,uFAEC;GACH;EAER,oBAAC,iBAAD;GAAiB,SAAS,QAAQ,KAAK;GAAqB;GAAc;EACzE;AAGL,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,EAAE,UAAU,kBAAkB;EACrC,OAAO,WACL;GACE;GACA,UAAU,YAAY;GAChB,WAAW;GAClB,EACD,MACD;EACF,CAAC"}
+{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/content.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { PipePayload } from \"@pipe0/base\";\nimport { usePipeFormContext } from \"../../../context/pipe-form-context.js\";\nimport type { FormHandle, FormSectionHandle } from \"../../../types/form-handle.js\";\nimport { PipeFormErrors } from \"./errors.js\";\nimport { PipeFormSection } from \"./section.js\";\n\nexport interface PipeFormContentState {\n  sections: FormSectionHandle[];\n  fieldPaths: Set<string>;\n  hasFieldLoaderError: boolean;\n  isFieldLoaderLoading: boolean;\n  form: FormHandle<PipePayload>;\n}\n\nexport interface PipeFormContentProps\n  extends useRender.ComponentProps<\"div\", PipeFormContentState> {}\n\nexport function PipeFormContent({ children, className, render, ...props }: PipeFormContentProps) {\n  const { sections, fieldPaths, hasFieldLoaderError, isFieldLoaderLoading, form } =\n    usePipeFormContext();\n\n  // Sections that share a label (e.g. several \"I/O & conditions\" sections)\n  // render under one umbrella header. We hide the label on every section\n  // except the first in each contiguous cluster.\n  const defaultBody = (\n    <>\n      {sections.map((section, idx) => {\n        const prev = idx > 0 ? sections[idx - 1] : null;\n        const hideLabel = !!(section.label && prev && prev.label === section.label);\n        return <PipeFormSection key={section.key} section={section} hideLabel={hideLabel} />;\n      })}\n      <PipeFormErrors />\n    </>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: { sections, fieldPaths, hasFieldLoaderError, isFieldLoaderLoading, form },\n    stateAttributesMapping: {\n      sections: () => null,\n      fieldPaths: () => null,\n      form: () => null,\n    },\n    props: mergeProps<\"div\">(\n      {\n        className,\n        children: children ?? defaultBody,\n        ...({ \"data-p0\": \"form-content\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,gBAAgB,EAAE,UAAU,WAAW,QAAQ,GAAG,SAA+B;CAC/F,MAAM,EAAE,UAAU,YAAY,qBAAqB,sBAAsB,SACvE,oBAAoB;CAKtB,MAAM,cACJ,4CACG,SAAS,KAAK,SAAS,QAAQ;EAC9B,MAAM,OAAO,MAAM,IAAI,SAAS,MAAM,KAAK;AAE3C,SAAO,oBAAC,iBAAD;GAA4C;GAAS,WAD1C,CAAC,EAAE,QAAQ,SAAS,QAAQ,KAAK,UAAU,QAAQ;GACe,EAAvD,QAAQ,IAA+C;GACpF,EACF,oBAAC,gBAAD,EAAkB,EACjB;AAGL,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GAAE;GAAU;GAAY;GAAqB;GAAsB;GAAM;EAChF,wBAAwB;GACtB,gBAAgB;GAChB,kBAAkB;GAClB,YAAY;GACb;EACD,OAAO,WACL;GACE;GACA,UAAU,YAAY;GAChB,WAAW;GAClB,EACD,MACD;EACF,CAAC"}

package/dist/components/compound/pipe-form/errors.d.mts

@@ -0,0 +1,27 @@
+import { FormHandle } from "../../../types/form-handle.mjs";
+import { useRender } from "@base-ui/react/use-render";
+import * as _$react from "react";
+import { PipePayload } from "@pipe0/base";
+
+//#region src/components/compound/pipe-form/errors.d.ts
+interface PipeFormErrorsState {
+  hasFieldLoaderError: boolean;
+  fieldPaths: Set<string>;
+  form: FormHandle<PipePayload>;
+}
+interface PipeFormErrorsProps extends useRender.ComponentProps<"div", PipeFormErrorsState> {}
+/**
+ * Renders form-wide errors that don't belong to a specific visible field:
+ * the field-loader banner (when a resolver fails to load options for a
+ * field) and form-level validation errors (errors not attached to any
+ * rendered field).
+ */
+declare function PipeFormErrors({
+  children,
+  className,
+  render,
+  ...props
+}: PipeFormErrorsProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+//#endregion
+export { PipeFormErrors };
+//# sourceMappingURL=errors.d.mts.map

package/dist/components/compound/pipe-form/errors.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/errors.tsx"],"mappings":";;;;;;UAQiB,mBAAA;EACf,mBAAA;EACA,UAAA,EAAY,GAAA;EACZ,IAAA,EAAM,UAAA,CAAW,WAAA;AAAA;AAAA,UAGF,mBAAA,SAA4B,SAAA,CAAU,cAAA,QAAsB,mBAAA;;;;;;;iBAQ7D,cAAA,CAAA;EAAiB,QAAA;EAAU,SAAA;EAAW,MAAA;EAAA,GAAW;AAAA,GAAS,mBAAA,GAAmB,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA"}

package/dist/components/compound/pipe-form/errors.mjs

@@ -0,0 +1,48 @@
+import { usePipeFormContext } from "../../../context/pipe-form-context.mjs";
+import { asInternalForm } from "../../../utils/internal-form.mjs";
+import { FormLevelErrors } from "../../internal/form-level-errors.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/compound/pipe-form/errors.tsx
+/**
+* Renders form-wide errors that don't belong to a specific visible field:
+* the field-loader banner (when a resolver fails to load options for a
+* field) and form-level validation errors (errors not attached to any
+* rendered field).
+*/
+function PipeFormErrors({ children, className, render, ...props }) {
+	const { hasFieldLoaderError, fieldPaths, form } = usePipeFormContext();
+	const defaultBody = /* @__PURE__ */ jsxs(Fragment, { children: [hasFieldLoaderError && /* @__PURE__ */ jsx("div", {
+		"data-p0": "store-error",
+		role: "alert",
+		className: "pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-destructive/50 pz:bg-destructive/5 pz:px-3 pz:py-2 pz:text-destructive pz:text-xs pz:font-medium",
+		children: /* @__PURE__ */ jsx("span", { children: "Failed to load options for one or more fields. Check that your connection is valid." })
+	}), /* @__PURE__ */ jsx(FormLevelErrors, {
+		control: asInternalForm(form).control,
+		fieldPaths
+	})] });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		state: {
+			hasFieldLoaderError,
+			fieldPaths,
+			form
+		},
+		stateAttributesMapping: {
+			fieldPaths: () => null,
+			form: () => null
+		},
+		props: mergeProps({
+			className,
+			children: children ?? defaultBody,
+			"data-p0": "form-errors"
+		}, props)
+	});
+}
+
+//#endregion
+export { PipeFormErrors };
+//# sourceMappingURL=errors.mjs.map

package/dist/components/compound/pipe-form/errors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/errors.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { PipePayload } from \"@pipe0/base\";\nimport { usePipeFormContext } from \"../../../context/pipe-form-context.js\";\nimport type { FormHandle } from \"../../../types/form-handle.js\";\nimport { asInternalForm } from \"../../../utils/internal-form.js\";\nimport { FormLevelErrors } from \"../../internal/form-level-errors.js\";\n\nexport interface PipeFormErrorsState {\n  hasFieldLoaderError: boolean;\n  fieldPaths: Set<string>;\n  form: FormHandle<PipePayload>;\n}\n\nexport interface PipeFormErrorsProps extends useRender.ComponentProps<\"div\", PipeFormErrorsState> {}\n\n/**\n * Renders form-wide errors that don't belong to a specific visible field:\n * the field-loader banner (when a resolver fails to load options for a\n * field) and form-level validation errors (errors not attached to any\n * rendered field).\n */\nexport function PipeFormErrors({ children, className, render, ...props }: PipeFormErrorsProps) {\n  const { hasFieldLoaderError, fieldPaths, form } = usePipeFormContext();\n\n  const defaultBody = (\n    <>\n      {hasFieldLoaderError && (\n        <div\n          data-p0=\"store-error\"\n          role=\"alert\"\n          className=\"pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-destructive/50 pz:bg-destructive/5 pz:px-3 pz:py-2 pz:text-destructive pz:text-xs pz:font-medium\"\n        >\n          <span>\n            Failed to load options for one or more fields. Check that your connection is valid.\n          </span>\n        </div>\n      )}\n      <FormLevelErrors control={asInternalForm(form).control} fieldPaths={fieldPaths} />\n    </>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: { hasFieldLoaderError, fieldPaths, form },\n    stateAttributesMapping: {\n      fieldPaths: () => null,\n      form: () => null,\n    },\n    props: mergeProps<\"div\">(\n      {\n        className,\n        children: children ?? defaultBody,\n        ...({ \"data-p0\": \"form-errors\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,SAAgB,eAAe,EAAE,UAAU,WAAW,QAAQ,GAAG,SAA8B;CAC7F,MAAM,EAAE,qBAAqB,YAAY,SAAS,oBAAoB;CAEtE,MAAM,cACJ,4CACG,uBACC,oBAAC,OAAD;EACE,WAAQ;EACR,MAAK;EACL,WAAU;YAEV,oBAAC,QAAD,YAAM,uFAEC;EACH,GAER,oBAAC,iBAAD;EAAiB,SAAS,eAAe,KAAK,CAAC;EAAqB;EAAc,EACjF;AAGL,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GAAE;GAAqB;GAAY;GAAM;EAChD,wBAAwB;GACtB,kBAAkB;GAClB,YAAY;GACb;EACD,OAAO,WACL;GACE;GACA,UAAU,YAAY;GAChB,WAAW;GAClB,EACD,MACD;EACF,CAAC"}

package/dist/components/compound/pipe-form/footer.d.mts

@@ -1,14 +1,14 @@
-import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import * as _$react from "react";
 
 //#region src/components/compound/pipe-form/footer.d.ts
+interface PipeFormFooterProps extends useRender.ComponentProps<"div"> {}
 declare function PipeFormFooter({
   children,
-  className
-}: {
-  children?: ReactNode;
-  className?: string;
-}): _$react_jsx_runtime0.JSX.Element;
+  className,
+  render,
+  ...props
+}: PipeFormFooterProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
 //#endregion
 export { PipeFormFooter };
 //# sourceMappingURL=footer.d.mts.map

package/dist/components/compound/pipe-form/footer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/footer.tsx"],"mappings":";;;;iBAEgB,cAAA,CAAA;EACd,QAAA;EACA;AAAA;EAEA,QAAA,GAAW,SAAA;EACX,SAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"footer.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/footer.tsx"],"mappings":";;;;UAGiB,mBAAA,SAA4B,SAAA,CAAU,cAAA;AAAA,iBAEvC,cAAA,CAAA;EAAiB,QAAA;EAAU,SAAA;EAAW,MAAA;EAAA,GAAW;AAAA,GAAS,mBAAA,GAAmB,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA"}

package/dist/components/compound/pipe-form/footer.mjs

@@ -1,11 +1,16 @@
-import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/compound/pipe-form/footer.tsx
-function PipeFormFooter({ children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-p0": "form-footer",
-		className,
-		children
+function PipeFormFooter({ children, className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			className,
+			children,
+			"data-p0": "form-footer"
+		}, props)
 	});
 }
 

package/dist/components/compound/pipe-form/footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"footer.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/footer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport function PipeFormFooter({\n  children,\n  className,\n}: {\n  children?: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div data-p0=\"form-footer\" className={className}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,eAAe,EAC7B,UACA,aAIC;AACD,QACE,oBAAC,OAAD;EAAK,WAAQ;EAAyB;EACnC;EACG"}
+{"version":3,"file":"footer.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/footer.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\n\nexport interface PipeFormFooterProps extends useRender.ComponentProps<\"div\"> {}\n\nexport function PipeFormFooter({ children, className, render, ...props }: PipeFormFooterProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className,\n        children,\n        ...({ \"data-p0\": \"form-footer\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;AAKA,SAAgB,eAAe,EAAE,UAAU,WAAW,QAAQ,GAAG,SAA8B;AAC7F,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE;GACA;GACM,WAAW;GAClB,EACD,MACD;EACF,CAAC"}

package/dist/components/compound/pipe-form/header.d.mts

@@ -1,14 +1,14 @@
-import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import * as _$react from "react";
 
 //#region src/components/compound/pipe-form/header.d.ts
+interface PipeFormHeaderProps extends useRender.ComponentProps<"div"> {}
 declare function PipeFormHeader({
   children,
-  className
-}: {
-  children?: ReactNode;
-  className?: string;
-}): _$react_jsx_runtime0.JSX.Element;
+  className,
+  render,
+  ...props
+}: PipeFormHeaderProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
 //#endregion
 export { PipeFormHeader };
 //# sourceMappingURL=header.d.mts.map

package/dist/components/compound/pipe-form/header.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/header.tsx"],"mappings":";;;;iBAEgB,cAAA,CAAA;EACd,QAAA;EACA;AAAA;EAEA,QAAA,GAAW,SAAA;EACX,SAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/header.tsx"],"mappings":";;;;UAGiB,mBAAA,SAA4B,SAAA,CAAU,cAAA;AAAA,iBAEvC,cAAA,CAAA;EAAiB,QAAA;EAAU,SAAA;EAAW,MAAA;EAAA,GAAW;AAAA,GAAS,mBAAA,GAAmB,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA"}

package/dist/components/compound/pipe-form/header.mjs

@@ -1,11 +1,16 @@
-import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/compound/pipe-form/header.tsx
-function PipeFormHeader({ children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-p0": "form-header",
-		className,
-		children
+function PipeFormHeader({ children, className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			className,
+			children,
+			"data-p0": "form-header"
+		}, props)
 	});
 }
 

package/dist/components/compound/pipe-form/header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/header.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport function PipeFormHeader({\n  children,\n  className,\n}: {\n  children?: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div data-p0=\"form-header\" className={className}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,eAAe,EAC7B,UACA,aAIC;AACD,QACE,oBAAC,OAAD;EAAK,WAAQ;EAAyB;EACnC;EACG"}
+{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/header.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\n\nexport interface PipeFormHeaderProps extends useRender.ComponentProps<\"div\"> {}\n\nexport function PipeFormHeader({ children, className, render, ...props }: PipeFormHeaderProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className,\n        children,\n        ...({ \"data-p0\": \"form-header\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;AAKA,SAAgB,eAAe,EAAE,UAAU,WAAW,QAAQ,GAAG,SAA8B;AAC7F,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE;GACA;GACM,WAAW;GAClB,EACD,MACD;EACF,CAAC"}

package/dist/components/compound/pipe-form/index.d.mts

@@ -1,9 +1,10 @@
 import { PipeFormContent } from "./content.mjs";
+import { PipeFormErrors } from "./errors.mjs";
 import { PipeFormField } from "./field.mjs";
 import { PipeFormFooter } from "./footer.mjs";
 import { PipeFormGroup } from "./group.mjs";
 import { PipeFormHeader } from "./header.mjs";
-import { PipeForm, PipeFormInstanceProps, PipeFormLegacyProps, PipeFormProps } from "./root.mjs";
+import { PipeForm, PipeFormInstanceProps, PipeFormProps, PipeFormZeroConfigProps } from "./root.mjs";
 import { PipeFormSection } from "./section.mjs";
 import { PipeFormSubmitButton } from "./submit-button.mjs";
 import { PipeFormTitle } from "./title.mjs";

package/dist/components/compound/pipe-form/root.d.mts

@@ -1,35 +1,40 @@
+import { FormHandle } from "../../../types/form-handle.mjs";
 import { PipeFormContext } from "../../../context/pipe-form-context.mjs";
 import { FieldAdapterMap, FormClassNames } from "../../../types/adapters.mjs";
 import { GroupMap, PathMap, SectionMap } from "../../../types/form-customization.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { FormResolvers, PipeId, PipePayload, ValidationContext } from "@pipe0/base";
-import { UseFormReturn } from "react-hook-form";
 
 //#region src/components/compound/pipe-form/root.d.ts
 type PipeFormSubmitHandler = (payload: PipePayload, ctx: {
-  form: UseFormReturn<PipePayload>;
+  form: FormHandle<PipePayload>;
 }) => void | Promise<void>;
-interface CustomizationProps {
-  sectionMap?: SectionMap;
-  groupMap?: GroupMap;
-  pathMap?: PathMap;
+interface RenderingProps {
   classNames?: FormClassNames;
   adapters?: FieldAdapterMap;
   className?: string;
 }
-interface PipeFormInstanceProps extends CustomizationProps {
+interface PipeFormInstanceProps extends RenderingProps {
   context: PipeFormContext;
   onSubmit: PipeFormSubmitHandler;
   children?: ReactNode;
 }
-interface PipeFormLegacyProps extends CustomizationProps {
+interface PipeFormZeroConfigProps extends RenderingProps {
   pipeId: PipeId;
   publicKey: string;
   onSubmit: PipeFormSubmitHandler;
   defaultValues?: PipePayload;
   validationContext?: ValidationContext;
   resolvers?: FormResolvers;
+  /**
+   * Hide / relabel / reorder sections by section key. `null` hides a section.
+   * Forwarded to the internal `usePipeForm` call. For `<PipeForm context={...}>`,
+   * pass these to `usePipeForm` directly instead.
+   */
+  sectionMap?: SectionMap;
+  groupMap?: GroupMap;
+  pathMap?: PathMap;
   /**
    * Form-level scope tags. Bundled into every `resolvers.getSecrets` call so
    * the backend can return only the secrets allowed in the declared scopes.
@@ -42,15 +47,17 @@ interface PipeFormLegacyProps extends CustomizationProps {
   teamId?: string;
   children?: ReactNode;
 }
-type PipeFormProps = PipeFormInstanceProps | PipeFormLegacyProps;
+type PipeFormProps = PipeFormInstanceProps | PipeFormZeroConfigProps;
 /**
  * Compound root for pipe forms.
  *
  * Two modes:
  * - Compound: `<PipeForm context={ctx} onSubmit={...}>...</PipeForm>` — pass the context from `usePipeForm`.
- * - Zero-config: `<PipeForm pipeId="..." publicKey="..." onSubmit={...} />` — legacy API.
+ *   Visibility customization (`sectionMap`/`groupMap`/`pathMap`) lives on the hook in this mode.
+ * - Zero-config: `<PipeForm pipeId="..." publicKey="..." onSubmit={...} />` — fresh hook created
+ *   internally; visibility maps may be passed as props and forward to that hook.
  */
 declare function PipeForm(props: PipeFormProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { PipeForm, PipeFormInstanceProps, PipeFormLegacyProps, PipeFormProps };
+export { PipeForm, PipeFormInstanceProps, PipeFormProps, PipeFormZeroConfigProps };
 //# sourceMappingURL=root.d.mts.map

package/dist/components/compound/pipe-form/root.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/root.tsx"],"mappings":";;;;;;;;;KAuBY,qBAAA,IACV,OAAA,EAAS,WAAA,EACT,GAAA;EAAO,IAAA,EAAM,aAAA,CAAc,WAAA;AAAA,aACjB,OAAA;AAAA,UAEF,kBAAA;EACR,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,QAAA;EACX,OAAA,GAAU,OAAA;EACV,UAAA,GAAa,cAAA;EACb,QAAA,GAAW,eAAA;EACX,SAAA;AAAA;AAAA,UAGe,qBAAA,SAA8B,kBAAA;EAC7C,OAAA,EAAS,eAAA;EACT,QAAA,EAAU,qBAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,mBAAA,SAA4B,kBAAA;EAC3C,MAAA,EAAQ,MAAA;EACR,SAAA;EACA,QAAA,EAAU,qBAAA;EACV,aAAA,GAAgB,WAAA;EAChB,iBAAA,GAAoB,iBAAA;EACpB,SAAA,GAAY,aAAA;;;;;EAKZ,MAAA;EArBW;;;;EA0BX,MAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,KAGD,aAAA,GAAgB,qBAAA,GAAwB,mBAAA;;;;;;;;iBASpC,QAAA,CAAS,KAAA,EAAO,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"root.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/root.tsx"],"mappings":";;;;;;;;;KAoBY,qBAAA,IACV,OAAA,EAAS,WAAA,EACT,GAAA;EAAO,IAAA,EAAM,UAAA,CAAW,WAAA;AAAA,aACd,OAAA;AAAA,UAEF,cAAA;EACR,UAAA,GAAa,cAAA;EACb,QAAA,GAAW,eAAA;EACX,SAAA;AAAA;AAAA,UAGe,qBAAA,SAA8B,cAAA;EAC7C,OAAA,EAAS,eAAA;EACT,QAAA,EAAU,qBAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,uBAAA,SAAgC,cAAA;EAC/C,MAAA,EAAQ,MAAA;EACR,SAAA;EACA,QAAA,EAAU,qBAAA;EACV,aAAA,GAAgB,WAAA;EAChB,iBAAA,GAAoB,iBAAA;EACpB,SAAA,GAAY,aAAA;EApBK;AAAO;;;;EA0BxB,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,QAAA;EACX,OAAA,GAAU,OAAA;EAxBC;;;;EA6BX,MAAA;EAzBqC;;;;EA8BrC,MAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,KAGD,aAAA,GAAgB,qBAAA,GAAwB,uBAAA;;;;;;;;;;iBAWpC,QAAA,CAAS,KAAA,EAAO,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/compound/pipe-form/root.mjs

@@ -1,12 +1,11 @@
 import { PortalContainerContext } from "../../../context/portal-container-context.mjs";
-import { FormCustomizationProvider, useFormCustomization } from "../../../context/form-customization-context.mjs";
 import { PipeFormContext, usePipeFormContext } from "../../../context/pipe-form-context.mjs";
 import { PipeFormContent } from "./content.mjs";
 import { FormProvider, FormRoot } from "../../../context/form-provider.mjs";
 import { usePipeForm } from "../../../hooks/use-pipe-form.mjs";
 import { DefaultForm } from "../../defaults/layout/form.mjs";
 import { PipeFormSubmitButton } from "./submit-button.mjs";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { validatePipesOrError } from "@pipe0/base";
 
@@ -16,17 +15,19 @@ import { validatePipesOrError } from "@pipe0/base";
 *
 * Two modes:
 * - Compound: `<PipeForm context={ctx} onSubmit={...}>...</PipeForm>` — pass the context from `usePipeForm`.
-* - Zero-config: `<PipeForm pipeId="..." publicKey="..." onSubmit={...} />` — legacy API.
+*   Visibility customization (`sectionMap`/`groupMap`/`pathMap`) lives on the hook in this mode.
+* - Zero-config: `<PipeForm pipeId="..." publicKey="..." onSubmit={...} />` — fresh hook created
+*   internally; visibility maps may be passed as props and forward to that hook.
 */
 function PipeForm(props) {
 	if ("context" in props) return /* @__PURE__ */ jsx(PipeFormWithContext, { ...props });
-	return /* @__PURE__ */ jsx(PipeFormLegacy, { ...props });
+	return /* @__PURE__ */ jsx(PipeFormZeroConfig, { ...props });
 }
-function PipeFormLegacy({ pipeId, publicKey, defaultValues, onSubmit, resolvers, scopes, teamId, validationContext = validatePipesOrError({
+function PipeFormZeroConfig({ pipeId, publicKey, defaultValues, onSubmit, resolvers, scopes, teamId, sectionMap, groupMap, pathMap, validationContext = validatePipesOrError({
 	config: { environment: "production" },
 	pipes: [],
 	input: []
-}), children, ...customization }) {
+}), children, classNames, adapters, className }) {
 	return /* @__PURE__ */ jsx(PipeFormWithContext, {
 		context: usePipeForm({
 			pipeId,
@@ -35,26 +36,26 @@ function PipeFormLegacy({ pipeId, publicKey, defaultValues, onSubmit, resolvers,
 			resolvers,
 			scopes,
 			teamId,
-			validationContext
+			validationContext,
+			sectionMap,
+			groupMap,
+			pathMap
 		}),
 		onSubmit,
-		...customization,
+		className,
+		classNames,
+		adapters,
 		children
 	});
 }
-function PipeFormWithContext({ context, onSubmit, children, className, sectionMap, groupMap, pathMap, classNames, adapters }) {
+function PipeFormWithContext({ context, onSubmit, children, className, classNames, adapters }) {
 	const hasLocalOverrides = classNames || adapters;
-	const inner = /* @__PURE__ */ jsx(FormCustomizationProvider, {
-		sectionMap,
-		groupMap,
-		pathMap,
-		children: /* @__PURE__ */ jsx(PipeFormContext.Provider, {
-			value: context,
-			children: /* @__PURE__ */ jsx(PipeFormShell, {
-				className,
-				onSubmit,
-				children
-			})
+	const inner = /* @__PURE__ */ jsx(PipeFormContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(PipeFormShell, {
+			className,
+			onSubmit,
+			children
 		})
 	});
 	if (hasLocalOverrides) return /* @__PURE__ */ jsx(FormRoot, { children: /* @__PURE__ */ jsx(FormProvider, {
@@ -65,14 +66,7 @@ function PipeFormWithContext({ context, onSubmit, children, className, sectionMa
 	return /* @__PURE__ */ jsx(FormRoot, { children: inner });
 }
 function PipeFormShell({ children, className, onSubmit }) {
-	const [, dispatch] = useFormCustomization();
 	const context = usePipeFormContext();
-	useEffect(() => {
-		if (!context.resolvers?.getConnections) dispatch({
-			type: "HIDE_SECTION",
-			payload: "connector"
-		});
-	}, [context.resolvers, dispatch]);
 	const [portalContainer, setPortalContainer] = useState(null);
 	const portalRef = useCallback((node) => {
 		setPortalContainer(node);

package/dist/components/compound/pipe-form/root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"root.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/root.tsx"],"sourcesContent":["import {\n  type FormResolvers,\n  type PipeId,\n  type PipePayload,\n  type ValidationContext,\n  validatePipesOrError,\n} from \"@pipe0/base\";\nimport { type ReactNode, useCallback, useEffect, useState } from \"react\";\nimport type { UseFormReturn } from \"react-hook-form\";\nimport {\n  FormCustomizationProvider,\n  useFormCustomization,\n} from \"../../../context/form-customization-context.js\";\nimport { FormProvider, FormRoot } from \"../../../context/form-provider.js\";\nimport { PipeFormContext, usePipeFormContext } from \"../../../context/pipe-form-context.js\";\nimport { PortalContainerContext } from \"../../../context/portal-container-context.js\";\nimport { usePipeForm } from \"../../../hooks/use-pipe-form.js\";\nimport type { FieldAdapterMap, FormClassNames } from \"../../../types/adapters.js\";\nimport type { GroupMap, PathMap, SectionMap } from \"../../../types/form-customization.js\";\nimport { DefaultForm } from \"../../defaults/layout/form.js\";\nimport { PipeFormContent } from \"./content.js\";\nimport { PipeFormSubmitButton } from \"./submit-button.js\";\n\nexport type PipeFormSubmitHandler = (\n  payload: PipePayload,\n  ctx: { form: UseFormReturn<PipePayload> },\n) => void | Promise<void>;\n\ninterface CustomizationProps {\n  sectionMap?: SectionMap;\n  groupMap?: GroupMap;\n  pathMap?: PathMap;\n  classNames?: FormClassNames;\n  adapters?: FieldAdapterMap;\n  className?: string;\n}\n\nexport interface PipeFormInstanceProps extends CustomizationProps {\n  context: PipeFormContext;\n  onSubmit: PipeFormSubmitHandler;\n  children?: ReactNode;\n}\n\nexport interface PipeFormLegacyProps extends CustomizationProps {\n  pipeId: PipeId;\n  publicKey: string;\n  onSubmit: PipeFormSubmitHandler;\n  defaultValues?: PipePayload;\n  validationContext?: ValidationContext;\n  resolvers?: FormResolvers;\n  /**\n   * Form-level scope tags. Bundled into every `resolvers.getSecrets` call so\n   * the backend can return only the secrets allowed in the declared scopes.\n   */\n  scopes?: string[];\n  /**\n   * Current team context. Bundled into every `resolvers.getSecrets` call so\n   * the backend can restrict team-level secrets to this team only.\n   */\n  teamId?: string;\n  children?: ReactNode;\n}\n\nexport type PipeFormProps = PipeFormInstanceProps | PipeFormLegacyProps;\n\n/**\n * Compound root for pipe forms.\n *\n * Two modes:\n * - Compound: `<PipeForm context={ctx} onSubmit={...}>...</PipeForm>` — pass the context from `usePipeForm`.\n * - Zero-config: `<PipeForm pipeId=\"...\" publicKey=\"...\" onSubmit={...} />` — legacy API.\n */\nexport function PipeForm(props: PipeFormProps) {\n  if (\"context\" in props) {\n    return <PipeFormWithContext {...props} />;\n  }\n  return <PipeFormLegacy {...props} />;\n}\n\nfunction PipeFormLegacy({\n  pipeId,\n  publicKey,\n  defaultValues,\n  onSubmit,\n  resolvers,\n  scopes,\n  teamId,\n  validationContext = validatePipesOrError({\n    config: { environment: \"production\" },\n    pipes: [],\n    input: [],\n  }),\n  children,\n  ...customization\n}: PipeFormLegacyProps) {\n  const context = usePipeForm({\n    pipeId,\n    publicKey,\n    defaultValues,\n    resolvers,\n    scopes,\n    teamId,\n    validationContext,\n  });\n\n  return (\n    <PipeFormWithContext context={context} onSubmit={onSubmit} {...customization}>\n      {children}\n    </PipeFormWithContext>\n  );\n}\n\nfunction PipeFormWithContext({\n  context,\n  onSubmit,\n  children,\n  className,\n  sectionMap,\n  groupMap,\n  pathMap,\n  classNames,\n  adapters,\n}: PipeFormInstanceProps) {\n  const hasLocalOverrides = classNames || adapters;\n\n  const inner = (\n    <FormCustomizationProvider sectionMap={sectionMap} groupMap={groupMap} pathMap={pathMap}>\n      <PipeFormContext.Provider value={context}>\n        <PipeFormShell className={className} onSubmit={onSubmit}>\n          {children}\n        </PipeFormShell>\n      </PipeFormContext.Provider>\n    </FormCustomizationProvider>\n  );\n\n  if (hasLocalOverrides) {\n    return (\n      <FormRoot>\n        <FormProvider classNames={classNames} adapters={adapters}>\n          {inner}\n        </FormProvider>\n      </FormRoot>\n    );\n  }\n\n  return <FormRoot>{inner}</FormRoot>;\n}\n\nfunction PipeFormShell({\n  children,\n  className,\n  onSubmit,\n}: {\n  children?: ReactNode;\n  className?: string;\n  onSubmit: PipeFormSubmitHandler;\n}) {\n  const [, dispatch] = useFormCustomization();\n  const context = usePipeFormContext();\n\n  useEffect(() => {\n    if (!context.resolvers?.getConnections) {\n      dispatch({ type: \"HIDE_SECTION\", payload: \"connector\" });\n    }\n  }, [context.resolvers, dispatch]);\n\n  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n  const portalRef = useCallback((node: HTMLElement | null) => {\n    setPortalContainer(node);\n  }, []);\n\n  const body = children ?? (\n    <>\n      <PipeFormContent />\n      <PipeFormSubmitButton />\n    </>\n  );\n\n  const handleFormSubmit = context.form.handleSubmit(async (values) => {\n    await onSubmit(values, { form: context.form });\n  });\n\n  return (\n    <DefaultForm\n      onSubmit={handleFormSubmit}\n      ref={portalRef}\n      data-p0=\"form\"\n      data-p0-pipe={context.id}\n      className={className}\n    >\n      <PortalContainerContext.Provider value={portalContainer}>\n        {body}\n      </PortalContainerContext.Provider>\n    </DefaultForm>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,SAAS,OAAsB;AAC7C,KAAI,aAAa,MACf,QAAO,oBAAC,qBAAD,EAAqB,GAAI,OAAS;AAE3C,QAAO,oBAAC,gBAAD,EAAgB,GAAI,OAAS;;AAGtC,SAAS,eAAe,EACtB,QACA,WACA,eACA,UACA,WACA,QACA,QACA,oBAAoB,qBAAqB;CACvC,QAAQ,EAAE,aAAa,cAAc;CACrC,OAAO,EAAE;CACT,OAAO,EAAE;CACV,CAAC,EACF,UACA,GAAG,iBACmB;AAWtB,QACE,oBAAC,qBAAD;EAAqB,SAXP,YAAY;GAC1B;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EAGiD;EAAU,GAAI;EAC5D;EACmB;;AAI1B,SAAS,oBAAoB,EAC3B,SACA,UACA,UACA,WACA,YACA,UACA,SACA,YACA,YACwB;CACxB,MAAM,oBAAoB,cAAc;CAExC,MAAM,QACJ,oBAAC,2BAAD;EAAuC;EAAsB;EAAmB;YAC9E,oBAAC,gBAAgB,UAAjB;GAA0B,OAAO;aAC/B,oBAAC,eAAD;IAA0B;IAAqB;IAC5C;IACa;GACS;EACD;AAG9B,KAAI,kBACF,QACE,oBAAC,UAAD,YACE,oBAAC,cAAD;EAA0B;EAAsB;YAC7C;EACY,GACN;AAIf,QAAO,oBAAC,UAAD,YAAW,OAAiB;;AAGrC,SAAS,cAAc,EACrB,UACA,WACA,YAKC;CACD,MAAM,GAAG,YAAY,sBAAsB;CAC3C,MAAM,UAAU,oBAAoB;AAEpC,iBAAgB;AACd,MAAI,CAAC,QAAQ,WAAW,eACtB,UAAS;GAAE,MAAM;GAAgB,SAAS;GAAa,CAAC;IAEzD,CAAC,QAAQ,WAAW,SAAS,CAAC;CAEjC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAChF,MAAM,YAAY,aAAa,SAA6B;AAC1D,qBAAmB,KAAK;IACvB,EAAE,CAAC;CAEN,MAAM,OAAO,YACX,8CACE,oBAAC,iBAAD,EAAmB,GACnB,oBAAC,sBAAD,EAAwB,EACvB;AAOL,QACE,oBAAC,aAAD;EACE,UANqB,QAAQ,KAAK,aAAa,OAAO,WAAW;AACnE,SAAM,SAAS,QAAQ,EAAE,MAAM,QAAQ,MAAM,CAAC;IAC9C;EAKE,KAAK;EACL,WAAQ;EACR,gBAAc,QAAQ;EACX;YAEX,oBAAC,uBAAuB,UAAxB;GAAiC,OAAO;aACrC;GAC+B;EACtB"}
+{"version":3,"file":"root.mjs","names":[],"sources":["../../../../src/components/compound/pipe-form/root.tsx"],"sourcesContent":["import {\n  type FormResolvers,\n  type PipeId,\n  type PipePayload,\n  type ValidationContext,\n  validatePipesOrError,\n} from \"@pipe0/base\";\nimport { type ReactNode, useCallback, useState } from \"react\";\nimport { FormProvider, FormRoot } from \"../../../context/form-provider.js\";\nimport type { PipeFormContext as PipeFormContextValue } from \"../../../context/pipe-form-context.js\";\nimport { PipeFormContext, usePipeFormContext } from \"../../../context/pipe-form-context.js\";\nimport { PortalContainerContext } from \"../../../context/portal-container-context.js\";\nimport { usePipeForm } from \"../../../hooks/use-pipe-form.js\";\nimport type { FieldAdapterMap, FormClassNames } from \"../../../types/adapters.js\";\nimport type { GroupMap, PathMap, SectionMap } from \"../../../types/form-customization.js\";\nimport type { FormHandle } from \"../../../types/form-handle.js\";\nimport { DefaultForm } from \"../../defaults/layout/form.js\";\nimport { PipeFormContent } from \"./content.js\";\nimport { PipeFormSubmitButton } from \"./submit-button.js\";\n\nexport type PipeFormSubmitHandler = (\n  payload: PipePayload,\n  ctx: { form: FormHandle<PipePayload> },\n) => void | Promise<void>;\n\ninterface RenderingProps {\n  classNames?: FormClassNames;\n  adapters?: FieldAdapterMap;\n  className?: string;\n}\n\nexport interface PipeFormInstanceProps extends RenderingProps {\n  context: PipeFormContextValue;\n  onSubmit: PipeFormSubmitHandler;\n  children?: ReactNode;\n}\n\nexport interface PipeFormZeroConfigProps extends RenderingProps {\n  pipeId: PipeId;\n  publicKey: string;\n  onSubmit: PipeFormSubmitHandler;\n  defaultValues?: PipePayload;\n  validationContext?: ValidationContext;\n  resolvers?: FormResolvers;\n  /**\n   * Hide / relabel / reorder sections by section key. `null` hides a section.\n   * Forwarded to the internal `usePipeForm` call. For `<PipeForm context={...}>`,\n   * pass these to `usePipeForm` directly instead.\n   */\n  sectionMap?: SectionMap;\n  groupMap?: GroupMap;\n  pathMap?: PathMap;\n  /**\n   * Form-level scope tags. Bundled into every `resolvers.getSecrets` call so\n   * the backend can return only the secrets allowed in the declared scopes.\n   */\n  scopes?: string[];\n  /**\n   * Current team context. Bundled into every `resolvers.getSecrets` call so\n   * the backend can restrict team-level secrets to this team only.\n   */\n  teamId?: string;\n  children?: ReactNode;\n}\n\nexport type PipeFormProps = PipeFormInstanceProps | PipeFormZeroConfigProps;\n\n/**\n * Compound root for pipe forms.\n *\n * Two modes:\n * - Compound: `<PipeForm context={ctx} onSubmit={...}>...</PipeForm>` — pass the context from `usePipeForm`.\n *   Visibility customization (`sectionMap`/`groupMap`/`pathMap`) lives on the hook in this mode.\n * - Zero-config: `<PipeForm pipeId=\"...\" publicKey=\"...\" onSubmit={...} />` — fresh hook created\n *   internally; visibility maps may be passed as props and forward to that hook.\n */\nexport function PipeForm(props: PipeFormProps) {\n  if (\"context\" in props) {\n    return <PipeFormWithContext {...props} />;\n  }\n  return <PipeFormZeroConfig {...props} />;\n}\n\nfunction PipeFormZeroConfig({\n  pipeId,\n  publicKey,\n  defaultValues,\n  onSubmit,\n  resolvers,\n  scopes,\n  teamId,\n  sectionMap,\n  groupMap,\n  pathMap,\n  validationContext = validatePipesOrError({\n    config: { environment: \"production\" },\n    pipes: [],\n    input: [],\n  }),\n  children,\n  classNames,\n  adapters,\n  className,\n}: PipeFormZeroConfigProps) {\n  const context = usePipeForm({\n    pipeId,\n    publicKey,\n    defaultValues,\n    resolvers,\n    scopes,\n    teamId,\n    validationContext,\n    sectionMap,\n    groupMap,\n    pathMap,\n  });\n\n  return (\n    <PipeFormWithContext\n      context={context}\n      onSubmit={onSubmit}\n      className={className}\n      classNames={classNames}\n      adapters={adapters}\n    >\n      {children}\n    </PipeFormWithContext>\n  );\n}\n\nfunction PipeFormWithContext({\n  context,\n  onSubmit,\n  children,\n  className,\n  classNames,\n  adapters,\n}: PipeFormInstanceProps) {\n  const hasLocalOverrides = classNames || adapters;\n\n  const inner = (\n    <PipeFormContext.Provider value={context}>\n      <PipeFormShell className={className} onSubmit={onSubmit}>\n        {children}\n      </PipeFormShell>\n    </PipeFormContext.Provider>\n  );\n\n  if (hasLocalOverrides) {\n    return (\n      <FormRoot>\n        <FormProvider classNames={classNames} adapters={adapters}>\n          {inner}\n        </FormProvider>\n      </FormRoot>\n    );\n  }\n\n  return <FormRoot>{inner}</FormRoot>;\n}\n\nfunction PipeFormShell({\n  children,\n  className,\n  onSubmit,\n}: {\n  children?: ReactNode;\n  className?: string;\n  onSubmit: PipeFormSubmitHandler;\n}) {\n  const context = usePipeFormContext();\n\n  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n  const portalRef = useCallback((node: HTMLElement | null) => {\n    setPortalContainer(node);\n  }, []);\n\n  const body = children ?? (\n    <>\n      <PipeFormContent />\n      <PipeFormSubmitButton />\n    </>\n  );\n\n  const handleFormSubmit = context.form.handleSubmit(async (values) => {\n    await onSubmit(values, { form: context.form });\n  });\n\n  return (\n    <DefaultForm\n      onSubmit={handleFormSubmit}\n      ref={portalRef}\n      data-p0=\"form\"\n      data-p0-pipe={context.id}\n      className={className}\n    >\n      <PortalContainerContext.Provider value={portalContainer}>\n        {body}\n      </PortalContainerContext.Provider>\n    </DefaultForm>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4EA,SAAgB,SAAS,OAAsB;AAC7C,KAAI,aAAa,MACf,QAAO,oBAAC,qBAAD,EAAqB,GAAI,OAAS;AAE3C,QAAO,oBAAC,oBAAD,EAAoB,GAAI,OAAS;;AAG1C,SAAS,mBAAmB,EAC1B,QACA,WACA,eACA,UACA,WACA,QACA,QACA,YACA,UACA,SACA,oBAAoB,qBAAqB;CACvC,QAAQ,EAAE,aAAa,cAAc;CACrC,OAAO,EAAE;CACT,OAAO,EAAE;CACV,CAAC,EACF,UACA,YACA,UACA,aAC0B;AAc1B,QACE,oBAAC,qBAAD;EACE,SAfY,YAAY;GAC1B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EAKY;EACC;EACC;EACF;EAET;EACmB;;AAI1B,SAAS,oBAAoB,EAC3B,SACA,UACA,UACA,WACA,YACA,YACwB;CACxB,MAAM,oBAAoB,cAAc;CAExC,MAAM,QACJ,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC/B,oBAAC,eAAD;GAA0B;GAAqB;GAC5C;GACa;EACS;AAG7B,KAAI,kBACF,QACE,oBAAC,UAAD,YACE,oBAAC,cAAD;EAA0B;EAAsB;YAC7C;EACY,GACN;AAIf,QAAO,oBAAC,UAAD,YAAW,OAAiB;;AAGrC,SAAS,cAAc,EACrB,UACA,WACA,YAKC;CACD,MAAM,UAAU,oBAAoB;CAEpC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAChF,MAAM,YAAY,aAAa,SAA6B;AAC1D,qBAAmB,KAAK;IACvB,EAAE,CAAC;CAEN,MAAM,OAAO,YACX,8CACE,oBAAC,iBAAD,EAAmB,GACnB,oBAAC,sBAAD,EAAwB,EACvB;AAOL,QACE,oBAAC,aAAD;EACE,UANqB,QAAQ,KAAK,aAAa,OAAO,WAAW;AACnE,SAAM,SAAS,QAAQ,EAAE,MAAM,QAAQ,MAAM,CAAC;IAC9C;EAKE,KAAK;EACL,WAAQ;EACR,gBAAc,QAAQ;EACX;YAEX,oBAAC,uBAAuB,UAAxB;GAAiC,OAAO;aACrC;GAC+B;EACtB"}

package/dist/components/compound/pipe-form/submit-button.d.mts

@@ -1,9 +1,20 @@
-import { DefaultSubmitButtonProps } from "../../defaults/layout/submit-button.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import * as _$react from "react";
 
 //#region src/components/compound/pipe-form/submit-button.d.ts
-type PipeFormSubmitButtonProps = Omit<DefaultSubmitButtonProps, "isSubmitting">;
-declare function PipeFormSubmitButton(props: PipeFormSubmitButtonProps): _$react_jsx_runtime0.JSX.Element;
+interface PipeFormSubmitButtonState {
+  isSubmitting: boolean;
+  isFieldLoaderLoading: boolean;
+  disabled: boolean;
+}
+interface PipeFormSubmitButtonProps extends useRender.ComponentProps<"button", PipeFormSubmitButtonState> {}
+declare function PipeFormSubmitButton({
+  className,
+  children,
+  render,
+  disabled: disabledProp,
+  ...props
+}: PipeFormSubmitButtonProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
 //#endregion
 export { PipeFormSubmitButton };
 //# sourceMappingURL=submit-button.d.mts.map

package/dist/components/compound/pipe-form/submit-button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"submit-button.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/submit-button.tsx"],"mappings":";;;;KAMY,yBAAA,GAA4B,IAAA,CAAK,wBAAA;AAAA,iBAE7B,oBAAA,CAAqB,KAAA,EAAO,yBAAA,GAAyB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"submit-button.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-form/submit-button.tsx"],"mappings":";;;;UAMiB,yBAAA;EACf,YAAA;EACA,oBAAA;EACA,QAAA;AAAA;AAAA,UAGe,yBAAA,SACP,SAAA,CAAU,cAAA,WAAyB,yBAAA;AAAA,iBAE7B,oBAAA,CAAA;EACd,SAAA;EACA,QAAA;EACA,MAAA;EACA,QAAA,EAAU,YAAA;EAAA,GACP;AAAA,GACF,yBAAA,GAAyB,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA"}

package/dist/components/compound/pipe-form/submit-button.mjs

@@ -1,14 +1,29 @@
+import { cn } from "../../../lib/utils.mjs";
+import { buttonVariants } from "../../ui/button.mjs";
 import { usePipeFormContext } from "../../../context/pipe-form-context.mjs";
-import { DefaultSubmitButton } from "../../defaults/layout/submit-button.mjs";
-import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/compound/pipe-form/submit-button.tsx
-function PipeFormSubmitButton(props) {
-	const { form, fieldLoadStates } = usePipeFormContext();
-	const anyLoading = Object.values(fieldLoadStates).some((s) => s.status === "loading");
-	return /* @__PURE__ */ jsx(DefaultSubmitButton, {
-		isSubmitting: form.formState.isSubmitting || anyLoading,
-		...props
+function PipeFormSubmitButton({ className, children, render, disabled: disabledProp, ...props }) {
+	const { form, isFieldLoaderLoading } = usePipeFormContext();
+	const isSubmitting = form.formState.isSubmitting;
+	const disabled = disabledProp ?? (isSubmitting || isFieldLoaderLoading);
+	return useRender({
+		defaultTagName: "button",
+		render,
+		state: {
+			isSubmitting,
+			isFieldLoaderLoading,
+			disabled
+		},
+		props: mergeProps({
+			type: "submit",
+			disabled,
+			className: cn(buttonVariants({}), className),
+			children: children ?? (isSubmitting ? "Submitting..." : "Submit"),
+			"data-p0": "submit"
+		}, props)
 	});
 }