@genesislcap/foundation-react-utils 14.416.1-alpha-c3adbe7.0 → 14.417.0-FUI-0-react-renderers.1

package/dist/custom-elements.json

@@ -2,6 +2,58 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/create-react-renderer.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createReactRenderer",
+          "return": {
+            "type": {
+              "text": "RendererEntry"
+            }
+          },
+          "parameters": [
+            {
+              "name": "Component",
+              "type": {
+                "text": "ComponentType<RendererControlProps>"
+              }
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "{\n    /**\n     * The custom element tag name to register. Must be unique and contain a hyphen.\n     * e.g. 'my-price-renderer'\n     */\n    name: string;\n    /**\n     * RankedTester from @jsonforms/core — determines when this renderer applies.\n     * Use rankWith(rank, tester) — rank 5+ recommended to override built-ins.\n     */\n    tester: RankedTester;\n    /**\n     * Custom mapper if you need to transform state differently.\n     * Defaults to mapStateToControlProps from @jsonforms/core.\n     */\n    mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;\n    /**\n     * Whether to wrap the React component in the platform's <control-wrapper>,\n     * which provides consistent label rendering, error display, and accessibility.\n     * Defaults to true. Set to false if your React component handles its own labels/errors.\n     *\n     * Note: if your component has layout conflicts with control-wrapper's internal flex styles\n     * (e.g. a block-level combobox that shrinks to content width), prefer keeping this true\n     * and overriding via the exposed CSS part instead:\n     *\n     *   control-wrapper::part(wrapper) { display: block; }\n     *\n     * This avoids losing built-in label/error/accessibility while still allowing external styling.\n     * The `part=\"wrapper\"` is exposed on the inner slot-hosting div of <control-wrapper>.\n     */\n    wrapWithControlWrapper?: boolean;\n  }"
+              }
+            }
+          ],
+          "description": "Converts a React component into a `RendererEntry` for use with `foundation-form`'s\n`additionalRenderers` property.\n\nThe component is registered as a custom element via `r2wc` and wrapped in a FAST\n`html` template so it integrates with the JSON Forms dispatch renderer.\n\n**Important — use platform web components for inputs, not native HTML elements.**\nThe React component runs inside an `r2wc` custom element inside a FAST template,\ncreating a three-layer shadow DOM boundary. React's synthetic event system does not\ncross shadow boundaries, so `onChange` on a plain `<input>` will never fire.\nUse `rapid-number-field`, `rapid-text-field`, etc. and attach listeners via\n`addEventListener` in a `useEffect` instead.",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "WebComponent"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createReactRenderer",
+          "declaration": {
+            "name": "createReactRenderer",
+            "module": "src/create-react-renderer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "WebComponent",
+            "module": "src/create-react-renderer.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/index.ts",
@@ -22,6 +74,22 @@
             "name": "reactFactoryWithProvider",
             "module": "./react-layout-factory"
           }
+        },
+        {
+          "kind": "js",
+          "name": "createReactRenderer",
+          "declaration": {
+            "name": "createReactRenderer",
+            "module": "./create-react-renderer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RendererControlProps",
+          "declaration": {
+            "name": "RendererControlProps",
+            "package": "@genesislcap/foundation-forms"
+          }
         }
       ]
     }

package/dist/dts/create-react-renderer.d.ts

@@ -0,0 +1,84 @@
+import type { RendererControlProps, RendererEntry } from '@genesislcap/foundation-forms';
+import { type JsonFormsState, type OwnPropsOfControl, type RankedTester, type StatePropsOfControl } from '@jsonforms/core';
+import type { ComponentType } from 'react';
+/**
+ * Converts a React component into a `RendererEntry` for use with `foundation-form`'s
+ * `additionalRenderers` property.
+ *
+ * The component is registered as a custom element via `r2wc` and wrapped in a FAST
+ * `html` template so it integrates with the JSON Forms dispatch renderer.
+ *
+ * **Important — use platform web components for inputs, not native HTML elements.**
+ * The React component runs inside an `r2wc` custom element inside a FAST template,
+ * creating a three-layer shadow DOM boundary. React's synthetic event system does not
+ * cross shadow boundaries, so `onChange` on a plain `<input>` will never fire.
+ * Use `rapid-number-field`, `rapid-text-field`, etc. and attach listeners via
+ * `addEventListener` in a `useEffect` instead.
+ *
+ * @example
+ * ```tsx
+ * import { useEffect, useRef } from 'react';
+ * import { createReactRenderer, type RendererControlProps } from '@genesislcap/foundation-react-utils';
+ * import { isNumberControl, rankWith } from '@jsonforms/core';
+ *
+ * function PriceRenderer({ data, path, enabled, handleChange }: RendererControlProps) {
+ *   const ref = useRef<HTMLElement>(null);
+ *
+ *   useEffect(() => {
+ *     const el = ref.current as any;
+ *     if (!el) return;
+ *     const onChange = (e: CustomEvent) => {
+ *       const val = (e.target as any).value;
+ *       handleChange(path, val === '' ? undefined : Number(val));
+ *     };
+ *     el.addEventListener('change', onChange);
+ *     return () => el.removeEventListener('change', onChange);
+ *   }, [path, handleChange]);
+ *
+ *   return <rapid-number-field ref={ref} value={data ?? ''} disabled={!enabled || undefined} />;
+ * }
+ *
+ * export const priceRendererEntry = createReactRenderer(PriceRenderer, {
+ *   name: 'my-price-renderer',
+ *   tester: rankWith(6, isNumberControl),
+ * });
+ *
+ * // On the form element:
+ * // form.additionalRenderers = [priceRendererEntry];
+ * ```
+ *
+ * @public
+ */
+export declare function createReactRenderer(Component: ComponentType<RendererControlProps>, options: {
+    /**
+     * The custom element tag name to register. Must be unique and contain a hyphen.
+     * e.g. 'my-price-renderer'
+     */
+    name: string;
+    /**
+     * RankedTester from @jsonforms/core — determines when this renderer applies.
+     * Use rankWith(rank, tester) — rank 5+ recommended to override built-ins.
+     */
+    tester: RankedTester;
+    /**
+     * Custom mapper if you need to transform state differently.
+     * Defaults to mapStateToControlProps from @jsonforms/core.
+     */
+    mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;
+    /**
+     * Whether to wrap the React component in the platform's <control-wrapper>,
+     * which provides consistent label rendering, error display, and accessibility.
+     * Defaults to true. Set to false if your React component handles its own labels/errors.
+     *
+     * Note: if your component has layout conflicts with control-wrapper's internal flex styles
+     * (e.g. a block-level combobox that shrinks to content width), prefer keeping this true
+     * and overriding via the exposed CSS part instead:
+     *
+     *   control-wrapper::part(wrapper) { display: block; }
+     *
+     * This avoids losing built-in label/error/accessibility while still allowing external styling.
+     * The `part="wrapper"` is exposed on the inner slot-hosting div of <control-wrapper>.
+     */
+    wrapWithControlWrapper?: boolean;
+}): RendererEntry;
+//# sourceMappingURL=create-react-renderer.d.ts.map

package/dist/dts/create-react-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-react-renderer.d.ts","sourceRoot":"","sources":["../../src/create-react-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEzF,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,aAAa,CAAC,oBAAoB,CAAC,EAC9C,OAAO,EAAE;IACP;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,KAAK,mBAAmB,CAAC;IACrF;;;;;;;;;;;;;OAaG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GACA,aAAa,CAmDf"}

package/dist/dts/index.d.ts

@@ -7,4 +7,6 @@
  * Exports will be added here as utilities are developed.
  */
 export { reactFactory, reactFactoryWithProvider } from './react-layout-factory';
+export { createReactRenderer } from './create-react-renderer';
+export type { RendererControlProps } from '@genesislcap/foundation-forms';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/create-react-renderer.js

@@ -0,0 +1,99 @@
+import { html } from '@genesislcap/web-core';
+import { mapStateToControlProps, } from '@jsonforms/core';
+import r2wc from '@r2wc/react-to-web-component';
+/**
+ * Converts a React component into a `RendererEntry` for use with `foundation-form`'s
+ * `additionalRenderers` property.
+ *
+ * The component is registered as a custom element via `r2wc` and wrapped in a FAST
+ * `html` template so it integrates with the JSON Forms dispatch renderer.
+ *
+ * **Important — use platform web components for inputs, not native HTML elements.**
+ * The React component runs inside an `r2wc` custom element inside a FAST template,
+ * creating a three-layer shadow DOM boundary. React's synthetic event system does not
+ * cross shadow boundaries, so `onChange` on a plain `<input>` will never fire.
+ * Use `rapid-number-field`, `rapid-text-field`, etc. and attach listeners via
+ * `addEventListener` in a `useEffect` instead.
+ *
+ * @example
+ * ```tsx
+ * import { useEffect, useRef } from 'react';
+ * import { createReactRenderer, type RendererControlProps } from '@genesislcap/foundation-react-utils';
+ * import { isNumberControl, rankWith } from '@jsonforms/core';
+ *
+ * function PriceRenderer({ data, path, enabled, handleChange }: RendererControlProps) {
+ *   const ref = useRef<HTMLElement>(null);
+ *
+ *   useEffect(() => {
+ *     const el = ref.current as any;
+ *     if (!el) return;
+ *     const onChange = (e: CustomEvent) => {
+ *       const val = (e.target as any).value;
+ *       handleChange(path, val === '' ? undefined : Number(val));
+ *     };
+ *     el.addEventListener('change', onChange);
+ *     return () => el.removeEventListener('change', onChange);
+ *   }, [path, handleChange]);
+ *
+ *   return <rapid-number-field ref={ref} value={data ?? ''} disabled={!enabled || undefined} />;
+ * }
+ *
+ * export const priceRendererEntry = createReactRenderer(PriceRenderer, {
+ *   name: 'my-price-renderer',
+ *   tester: rankWith(6, isNumberControl),
+ * });
+ *
+ * // On the form element:
+ * // form.additionalRenderers = [priceRendererEntry];
+ * ```
+ *
+ * @public
+ */
+export function createReactRenderer(Component, options) {
+    var _a;
+    const WebComponent = r2wc(Component, {
+        props: {
+            data: 'json',
+            path: 'string',
+            label: 'string',
+            errors: 'string',
+            enabled: 'boolean',
+            required: 'boolean',
+            handleChange: 'function',
+            uischema: 'json',
+        },
+    });
+    if (!customElements.get(options.name)) {
+        customElements.define(options.name, WebComponent);
+    }
+    const { name } = options;
+    const useWrapper = options.wrapWithControlWrapper !== false;
+    const innerTemplate = (elementName) => html `
+    <${elementName}
+      :data=${(x) => x.control.data}
+      :path=${(x) => x.control.path}
+      :label=${(x) => x.control.label}
+      :errors=${(x) => x.control.errors}
+      :enabled=${(x) => x.control.enabled}
+      :required=${(x) => x.control.required}
+      :handleChange=${(x) => x.control.handleChange}
+      :uischema=${(x) => x.control.uischema}
+    ></${elementName}>
+  `;
+    const template = useWrapper
+        ? html `
+        <template>
+          <control-wrapper :control=${(x) => x.control} :json-forms=${(x) => x.jsonforms}>
+            ${innerTemplate(name)}
+          </control-wrapper>
+        </template>
+      `
+        : html `
+        <template>${innerTemplate(name)}</template>
+      `;
+    return {
+        renderer: template,
+        tester: options.tester,
+        mapper: (_a = options.mapper) !== null && _a !== void 0 ? _a : mapStateToControlProps,
+    };
+}

package/dist/esm/index.js

@@ -7,3 +7,4 @@
  * Exports will be added here as utilities are developed.
  */
 export { reactFactory, reactFactoryWithProvider } from './react-layout-factory';
+export { createReactRenderer } from './create-react-renderer';

package/dist/foundation-react-utils.api.json

@@ -172,6 +172,118 @@
       "name": "",
       "preserveMemberOrder": false,
       "members": [
+        {
+          "kind": "Function",
+          "canonicalReference": "@genesislcap/foundation-react-utils!createReactRenderer:function(1)",
+          "docComment": "/**\n * Converts a React component into a `RendererEntry` for use with `foundation-form`'s `additionalRenderers` property.\n *\n * The component is registered as a custom element via `r2wc` and wrapped in a FAST `html` template so it integrates with the JSON Forms dispatch renderer.\n *\n * **Important — use platform web components for inputs, not native HTML elements.** The React component runs inside an `r2wc` custom element inside a FAST template, creating a three-layer shadow DOM boundary. React's synthetic event system does not cross shadow boundaries, so `onChange` on a plain `<input>` will never fire. Use `rapid-number-field`, `rapid-text-field`, etc. and attach listeners via `addEventListener` in a `useEffect` instead.\n *\n * @example\n * ```tsx\n * import { useEffect, useRef } from 'react';\n * import { createReactRenderer, type RendererControlProps } from '@genesislcap/foundation-react-utils';\n * import { isNumberControl, rankWith } from '@jsonforms/core';\n *\n * function PriceRenderer({ data, path, enabled, handleChange }: RendererControlProps) {\n *   const ref = useRef<HTMLElement>(null);\n *\n *   useEffect(() => {\n *     const el = ref.current as any;\n *     if (!el) return;\n *     const onChange = (e: CustomEvent) => {\n *       const val = (e.target as any).value;\n *       handleChange(path, val === '' ? undefined : Number(val));\n *     };\n *     el.addEventListener('change', onChange);\n *     return () => el.removeEventListener('change', onChange);\n *   }, [path, handleChange]);\n *\n *   return <rapid-number-field ref={ref} value={data ?? ''} disabled={!enabled || undefined} />;\n * }\n *\n * export const priceRendererEntry = createReactRenderer(PriceRenderer, {\n *   name: 'my-price-renderer',\n *   tester: rankWith(6, isNumberControl),\n * });\n *\n * // On the form element:\n * // form.additionalRenderers = [priceRendererEntry];\n * ```\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function createReactRenderer(Component: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ComponentType",
+              "canonicalReference": "@types/react!React.ComponentType:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "RendererControlProps",
+              "canonicalReference": "@genesislcap/foundation-forms!RendererControlProps:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            },
+            {
+              "kind": "Content",
+              "text": ", options: "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    name: string;\n    tester: "
+            },
+            {
+              "kind": "Reference",
+              "text": "RankedTester",
+              "canonicalReference": "@jsonforms/core!RankedTester:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n    mapper?: (state: "
+            },
+            {
+              "kind": "Reference",
+              "text": "JsonFormsState",
+              "canonicalReference": "@jsonforms/core!JsonFormsState:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ", ownProps: "
+            },
+            {
+              "kind": "Reference",
+              "text": "OwnPropsOfControl",
+              "canonicalReference": "@jsonforms/core!OwnPropsOfControl:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ") => "
+            },
+            {
+              "kind": "Reference",
+              "text": "StatePropsOfControl",
+              "canonicalReference": "@jsonforms/core!StatePropsOfControl:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n    wrapWithControlWrapper?: boolean;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "RendererEntry",
+              "canonicalReference": "@genesislcap/foundation-forms!RendererEntry:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/create-react-renderer.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 16,
+            "endIndex": 17
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "Component",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 5
+              },
+              "isOptional": false
+            },
+            {
+              "parameterName": "options",
+              "parameterTypeTokenRange": {
+                "startIndex": 6,
+                "endIndex": 15
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "createReactRenderer"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@genesislcap/foundation-react-utils!reactFactory:function(1)",

package/dist/foundation-react-utils.d.ts

@@ -1,5 +1,93 @@
 import type { ComponentFactory } from '@genesislcap/foundation-layout';
+import type { ComponentType } from 'react';
+import { JsonFormsState } from '@jsonforms/core';
+import { OwnPropsOfControl } from '@jsonforms/core';
+import { RankedTester } from '@jsonforms/core';
 import * as React_2 from 'react';
+import { RendererControlProps } from '@genesislcap/foundation-forms';
+import type { RendererEntry } from '@genesislcap/foundation-forms';
+import { StatePropsOfControl } from '@jsonforms/core';
+
+/**
+ * Converts a React component into a `RendererEntry` for use with `foundation-form`'s
+ * `additionalRenderers` property.
+ *
+ * The component is registered as a custom element via `r2wc` and wrapped in a FAST
+ * `html` template so it integrates with the JSON Forms dispatch renderer.
+ *
+ * **Important — use platform web components for inputs, not native HTML elements.**
+ * The React component runs inside an `r2wc` custom element inside a FAST template,
+ * creating a three-layer shadow DOM boundary. React's synthetic event system does not
+ * cross shadow boundaries, so `onChange` on a plain `<input>` will never fire.
+ * Use `rapid-number-field`, `rapid-text-field`, etc. and attach listeners via
+ * `addEventListener` in a `useEffect` instead.
+ *
+ * @example
+ * ```tsx
+ * import { useEffect, useRef } from 'react';
+ * import { createReactRenderer, type RendererControlProps } from '@genesislcap/foundation-react-utils';
+ * import { isNumberControl, rankWith } from '@jsonforms/core';
+ *
+ * function PriceRenderer({ data, path, enabled, handleChange }: RendererControlProps) {
+ *   const ref = useRef<HTMLElement>(null);
+ *
+ *   useEffect(() => {
+ *     const el = ref.current as any;
+ *     if (!el) return;
+ *     const onChange = (e: CustomEvent) => {
+ *       const val = (e.target as any).value;
+ *       handleChange(path, val === '' ? undefined : Number(val));
+ *     };
+ *     el.addEventListener('change', onChange);
+ *     return () => el.removeEventListener('change', onChange);
+ *   }, [path, handleChange]);
+ *
+ *   return <rapid-number-field ref={ref} value={data ?? ''} disabled={!enabled || undefined} />;
+ * }
+ *
+ * export const priceRendererEntry = createReactRenderer(PriceRenderer, {
+ *   name: 'my-price-renderer',
+ *   tester: rankWith(6, isNumberControl),
+ * });
+ *
+ * // On the form element:
+ * // form.additionalRenderers = [priceRendererEntry];
+ * ```
+ *
+ * @public
+ */
+export declare function createReactRenderer(Component: ComponentType<RendererControlProps>, options: {
+    /**
+     * The custom element tag name to register. Must be unique and contain a hyphen.
+     * e.g. 'my-price-renderer'
+     */
+    name: string;
+    /**
+     * RankedTester from @jsonforms/core — determines when this renderer applies.
+     * Use rankWith(rank, tester) — rank 5+ recommended to override built-ins.
+     */
+    tester: RankedTester;
+    /**
+     * Custom mapper if you need to transform state differently.
+     * Defaults to mapStateToControlProps from @jsonforms/core.
+     */
+    mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;
+    /**
+     * Whether to wrap the React component in the platform's <control-wrapper>,
+     * which provides consistent label rendering, error display, and accessibility.
+     * Defaults to true. Set to false if your React component handles its own labels/errors.
+     *
+     * Note: if your component has layout conflicts with control-wrapper's internal flex styles
+     * (e.g. a block-level combobox that shrinks to content width), prefer keeping this true
+     * and overriding via the exposed CSS part instead:
+     *
+     *   control-wrapper::part(wrapper) { display: block; }
+     *
+     * This avoids losing built-in label/error/accessibility while still allowing external styling.
+     * The `part="wrapper"` is exposed on the inner slot-hosting div of <control-wrapper>.
+     */
+    wrapWithControlWrapper?: boolean;
+}): RendererEntry;
 
 /**
  * Creates a factory function for rendering React components in layout items.
@@ -49,4 +137,6 @@ export declare function reactFactoryWithProvider<CP = {}, WP = {}>(Component: Re
     children: React_2.ReactNode;
 }>, wrapperProps: WP, componentProps?: CP): ComponentFactory;
 
+export { RendererControlProps }
+
 export { }

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/react-layout-factory.tsx"],"version":"5.9.2"}
+{"root":["../src/create-react-renderer.ts","../src/index.ts","../src/react-layout-factory.tsx"],"version":"5.9.2"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-react-utils",
   "description": "Genesis Foundation React Utils",
-  "version": "14.416.1-alpha-c3adbe7.0",
+  "version": "14.417.0-FUI-0-react-renderers.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -29,21 +29,25 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.416.1-alpha-c3adbe7.0",
-    "@genesislcap/genx": "14.416.1-alpha-c3adbe7.0",
-    "@genesislcap/rollup-builder": "14.416.1-alpha-c3adbe7.0",
-    "@genesislcap/ts-builder": "14.416.1-alpha-c3adbe7.0",
-    "@genesislcap/uvu-playwright-builder": "14.416.1-alpha-c3adbe7.0",
-    "@genesislcap/vite-builder": "14.416.1-alpha-c3adbe7.0",
-    "@genesislcap/webpack-builder": "14.416.1-alpha-c3adbe7.0"
+    "@genesislcap/foundation-testing": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/genx": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/rollup-builder": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/ts-builder": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/uvu-playwright-builder": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/vite-builder": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/webpack-builder": "14.417.0-FUI-0-react-renderers.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-layout": "14.416.1-alpha-c3adbe7.0",
-    "@genesislcap/foundation-logger": "14.416.1-alpha-c3adbe7.0"
+    "@genesislcap/foundation-forms": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/foundation-layout": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/foundation-logger": "14.417.0-FUI-0-react-renderers.1",
+    "@genesislcap/web-core": "14.417.0-FUI-0-react-renderers.1",
+    "@jsonforms/core": "^3.2.1",
+    "@r2wc/react-to-web-component": "^2.0.2"
   },
   "repository": {
     "type": "git",
@@ -54,5 +58,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "b642cca2132b2e27c94aa89821d267a8bce6a180"
+  "gitHead": "41516c5593cc64a42b33da71ea45e3e3a8beab88"
 }

package/src/create-react-renderer.ts

@@ -0,0 +1,146 @@
+import type { RendererControlProps, RendererEntry } from '@genesislcap/foundation-forms';
+import { html } from '@genesislcap/web-core';
+import {
+  mapStateToControlProps,
+  type JsonFormsState,
+  type OwnPropsOfControl,
+  type RankedTester,
+  type StatePropsOfControl,
+} from '@jsonforms/core';
+import r2wc from '@r2wc/react-to-web-component';
+import type { ComponentType } from 'react';
+
+/**
+ * Converts a React component into a `RendererEntry` for use with `foundation-form`'s
+ * `additionalRenderers` property.
+ *
+ * The component is registered as a custom element via `r2wc` and wrapped in a FAST
+ * `html` template so it integrates with the JSON Forms dispatch renderer.
+ *
+ * **Important — use platform web components for inputs, not native HTML elements.**
+ * The React component runs inside an `r2wc` custom element inside a FAST template,
+ * creating a three-layer shadow DOM boundary. React's synthetic event system does not
+ * cross shadow boundaries, so `onChange` on a plain `<input>` will never fire.
+ * Use `rapid-number-field`, `rapid-text-field`, etc. and attach listeners via
+ * `addEventListener` in a `useEffect` instead.
+ *
+ * @example
+ * ```tsx
+ * import { useEffect, useRef } from 'react';
+ * import { createReactRenderer, type RendererControlProps } from '@genesislcap/foundation-react-utils';
+ * import { isNumberControl, rankWith } from '@jsonforms/core';
+ *
+ * function PriceRenderer({ data, path, enabled, handleChange }: RendererControlProps) {
+ *   const ref = useRef<HTMLElement>(null);
+ *
+ *   useEffect(() => {
+ *     const el = ref.current as any;
+ *     if (!el) return;
+ *     const onChange = (e: CustomEvent) => {
+ *       const val = (e.target as any).value;
+ *       handleChange(path, val === '' ? undefined : Number(val));
+ *     };
+ *     el.addEventListener('change', onChange);
+ *     return () => el.removeEventListener('change', onChange);
+ *   }, [path, handleChange]);
+ *
+ *   return <rapid-number-field ref={ref} value={data ?? ''} disabled={!enabled || undefined} />;
+ * }
+ *
+ * export const priceRendererEntry = createReactRenderer(PriceRenderer, {
+ *   name: 'my-price-renderer',
+ *   tester: rankWith(6, isNumberControl),
+ * });
+ *
+ * // On the form element:
+ * // form.additionalRenderers = [priceRendererEntry];
+ * ```
+ *
+ * @public
+ */
+export function createReactRenderer(
+  Component: ComponentType<RendererControlProps>,
+  options: {
+    /**
+     * The custom element tag name to register. Must be unique and contain a hyphen.
+     * e.g. 'my-price-renderer'
+     */
+    name: string;
+    /**
+     * RankedTester from @jsonforms/core — determines when this renderer applies.
+     * Use rankWith(rank, tester) — rank 5+ recommended to override built-ins.
+     */
+    tester: RankedTester;
+    /**
+     * Custom mapper if you need to transform state differently.
+     * Defaults to mapStateToControlProps from @jsonforms/core.
+     */
+    mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;
+    /**
+     * Whether to wrap the React component in the platform's <control-wrapper>,
+     * which provides consistent label rendering, error display, and accessibility.
+     * Defaults to true. Set to false if your React component handles its own labels/errors.
+     *
+     * Note: if your component has layout conflicts with control-wrapper's internal flex styles
+     * (e.g. a block-level combobox that shrinks to content width), prefer keeping this true
+     * and overriding via the exposed CSS part instead:
+     *
+     *   control-wrapper::part(wrapper) { display: block; }
+     *
+     * This avoids losing built-in label/error/accessibility while still allowing external styling.
+     * The `part="wrapper"` is exposed on the inner slot-hosting div of <control-wrapper>.
+     */
+    wrapWithControlWrapper?: boolean;
+  },
+): RendererEntry {
+  const WebComponent = r2wc(Component, {
+    props: {
+      data: 'json',
+      path: 'string',
+      label: 'string',
+      errors: 'string',
+      enabled: 'boolean',
+      required: 'boolean',
+      handleChange: 'function',
+      uischema: 'json',
+    },
+  });
+
+  if (!customElements.get(options.name)) {
+    customElements.define(options.name, WebComponent);
+  }
+
+  const { name } = options;
+  const useWrapper = options.wrapWithControlWrapper !== false;
+
+  const innerTemplate = (elementName: string) => html`
+    <${elementName}
+      :data=${(x: any) => x.control.data}
+      :path=${(x: any) => x.control.path}
+      :label=${(x: any) => x.control.label}
+      :errors=${(x: any) => x.control.errors}
+      :enabled=${(x: any) => x.control.enabled}
+      :required=${(x: any) => x.control.required}
+      :handleChange=${(x: any) => x.control.handleChange}
+      :uischema=${(x: any) => x.control.uischema}
+    ></${elementName}>
+  `;
+
+  const template = useWrapper
+    ? html`
+        <template>
+          <control-wrapper :control=${(x: any) => x.control} :json-forms=${(x: any) => x.jsonforms}>
+            ${innerTemplate(name)}
+          </control-wrapper>
+        </template>
+      `
+    : html`
+        <template>${innerTemplate(name)}</template>
+      `;
+
+  return {
+    renderer: template,
+    tester: options.tester,
+    mapper: options.mapper ?? mapStateToControlProps,
+  };
+}

package/src/index.ts

@@ -8,3 +8,5 @@
  */
 
 export { reactFactory, reactFactoryWithProvider } from './react-layout-factory';
+export { createReactRenderer } from './create-react-renderer';
+export type { RendererControlProps } from '@genesislcap/foundation-forms';