@metaobjectsdev/react 0.5.0-rc.1

package/LICENSE

@@ -0,0 +1,189 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship made available under
+      the License, as indicated by a copyright notice that is included in
+      or attached to the work (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other transformations
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean, as submitted to the Licensor for inclusion
+      in the Work by the copyright owner or by an individual or Legal Entity
+      authorized to submit on behalf of the copyright owner. For the purposes
+      of this definition, "submitted" means any form of electronic, verbal,
+      or written communication sent to the Licensor or its representatives,
+      including but not limited to communication on electronic mailing lists,
+      source code control systems, and issue tracking systems that are managed
+      by, or on behalf of, the Licensor for the purpose of recording and
+      discussing modifications to the Work, but excluding communication that
+      is conspicuously marked or designated in writing by the copyright owner
+      as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any Legal Entity on behalf of
+      whom a Contribution has been received by the Licensor and included
+      within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by the combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a cross-claim
+      or counterclaim in a lawsuit) alleging that the Work or any
+      Contribution embodied within the Work constitutes direct or contributory
+      patent infringement, then any patent licenses granted to You under
+      this License for that Work shall terminate as of the date such
+      litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or Derivative
+          Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, You must include a readable copy of the
+          attribution notices contained within such NOTICE file, in
+          at least one of the following places: within a NOTICE text
+          file distributed as part of the Derivative Works; within
+          the Source form or documentation, if provided along with the
+          Derivative Works; or, within a display generated by the
+          Derivative Works, if and wherever such third-party notices
+          normally appear. The contents of the NOTICE file are for
+          informational purposes only and do not modify the License.
+          You may add Your own attribution notices within Derivative
+          Works that You distribute, alongside or in addition to the
+          NOTICE text from the Work, provided that such additional
+          attribution notices cannot be construed as modifying the License.
+
+      You may add Your own license statement for Your modifications and
+      may provide additional grant of rights to use, reproduce, modify,
+      prepare derivative works of, distribute, and sublicense such modifications,
+      as an additional requirement of this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any conditions of TITLE,
+      NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR
+      PURPOSE. You are solely responsible for determining the
+      appropriateness of using or reproducing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or exemplary damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or all other
+      commercial damages or losses), even if such Contributor has been
+      advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may offer
+      only obligations consistent to this License provided that the
+      obligations are consistent with this License.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format in question. Also add information
+      on how to contact you electronically and/or by mail.
+
+      Copyright 2026 MetaObjects Contributors
+
+      Licensed under the Apache License, Version 2.0 (the "License");
+      you may not use this file except in compliance with the License.
+      You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.

package/README.md

@@ -0,0 +1,13 @@
+# @metaobjectsdev/react
+
+React runtime for metaobjects: `useEntityForm` hook (react-hook-form integration) and `<CurrencyInput>` component. Pairs with `@metaobjectsdev/codegen-ts-react`, which generates `<Entity>.form.tsx` files that import from this package.
+
+## Install
+
+```bash
+pnpm add @metaobjectsdev/react
+```
+
+## License
+
+Apache-2.0.

package/dist/currency-input.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from "react";
+export interface CurrencyInputProps {
+    /** Value in integer minor units (cents for USD). */
+    value: number;
+    /** Called with new value in integer minor units after blur. */
+    onChange: (cents: number) => void;
+    /** ISO 4217 currency code. Defaults to "USD". */
+    currency?: string;
+    /** BCP 47 locale code. Defaults to "en-US". */
+    locale?: string;
+    className?: string;
+    placeholder?: string;
+    required?: boolean;
+    id?: string;
+    name?: string;
+}
+/**
+ * Bidirectional currency input. Displays formatted dollars; captures
+ * dollars from the user; emits cents to onChange on blur.
+ *
+ * - Focus strips symbol + grouping for easier editing
+ * - Blur re-formats + emits cents
+ * - Empty input + !required → emits 0
+ * - Empty input + required → reverts to last valid; no onChange
+ * - Unparseable input on blur → reverts to last valid format; no onChange
+ * - Float drift avoided via Math.round in parseCurrency
+ */
+export declare function CurrencyInput(props: CurrencyInputProps): ReactElement;
+//# sourceMappingURL=currency-input.d.ts.map

package/dist/currency-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-input.d.ts","sourceRoot":"","sources":["../src/currency-input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AAGnE,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAuErE"}

package/dist/currency-input.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { formatCurrency, parseCurrency, minorUnitsFor } from "@metaobjectsdev/runtime-web";
+/**
+ * Bidirectional currency input. Displays formatted dollars; captures
+ * dollars from the user; emits cents to onChange on blur.
+ *
+ * - Focus strips symbol + grouping for easier editing
+ * - Blur re-formats + emits cents
+ * - Empty input + !required → emits 0
+ * - Empty input + required → reverts to last valid; no onChange
+ * - Unparseable input on blur → reverts to last valid format; no onChange
+ * - Float drift avoided via Math.round in parseCurrency
+ */
+export function CurrencyInput(props) {
+    const currency = props.currency ?? "USD";
+    const locale = props.locale ?? "en-US";
+    const [text, setText] = useState(() => formatCurrency(props.value, currency, locale));
+    const [isInvalid, setIsInvalid] = useState(false);
+    const lastValidValue = useRef(props.value);
+    // Re-format when external value changes (controlled component sync)
+    useEffect(() => {
+        if (props.value !== lastValidValue.current) {
+            setText(formatCurrency(props.value, currency, locale));
+            lastValidValue.current = props.value;
+        }
+    }, [props.value, currency, locale]);
+    function handleFocus(_e) {
+        setIsInvalid(false);
+        // Strip symbol + grouping so user can edit the raw number
+        const minorUnits = minorUnitsFor(currency, locale);
+        const factor = Math.pow(10, minorUnits);
+        const dollars = (props.value / factor).toFixed(minorUnits);
+        setText(dollars);
+    }
+    function handleBlur(_e) {
+        const trimmed = text.trim();
+        if (trimmed === "") {
+            if (props.required) {
+                setIsInvalid(true);
+                setText(formatCurrency(props.value, currency, locale));
+                return;
+            }
+            setIsInvalid(false);
+            props.onChange(0);
+            lastValidValue.current = 0;
+            setText(formatCurrency(0, currency, locale));
+            return;
+        }
+        const parsed = parseCurrency(trimmed, currency, locale);
+        if (parsed === null) {
+            // Unparseable — revert to last valid
+            setText(formatCurrency(lastValidValue.current, currency, locale));
+            return;
+        }
+        setIsInvalid(false);
+        props.onChange(parsed);
+        lastValidValue.current = parsed;
+        setText(formatCurrency(parsed, currency, locale));
+    }
+    function handleChange(e) {
+        setText(e.target.value);
+    }
+    return (_jsx("input", { type: "text", inputMode: "decimal", value: text, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, className: props.className, placeholder: props.placeholder, required: props.required, id: props.id, name: props.name, "data-invalid": isInvalid ? "true" : undefined }));
+}
+//# sourceMappingURL=currency-input.js.map

package/dist/currency-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-input.js","sourceRoot":"","sources":["../src/currency-input.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { useEntityForm, type EntityFieldMeta, type EntityMeta, type BoundInputProps, type InputAccessor, type UseEntityFormOptions, type UseEntityFormReturn, } from "./use-entity-form.js";
+export { CurrencyInput, type CurrencyInputProps } from "./currency-input.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EACb,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+// Public API surface for @metaobjectsdev/react.
+export { useEntityForm, } from "./use-entity-form.js";
+export { CurrencyInput } from "./currency-input.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,OAAO,EACL,aAAa,GAOd,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAA2B,MAAM,qBAAqB,CAAC"}

package/dist/use-entity-form.d.ts

@@ -0,0 +1,49 @@
+import { type FieldValues, type DefaultValues, type RegisterOptions, type UseFormReturn } from "react-hook-form";
+import type { ZodTypeAny } from "zod";
+export interface EntityFieldMeta {
+    readonly name: string;
+    readonly label: string;
+    readonly view: string;
+    readonly htmlType?: string;
+    readonly placeholder?: string;
+    readonly helpText?: string;
+    readonly rules?: RegisterOptions;
+}
+/**
+ * Minimal shape of an entity constants object. The `$`-prefixed keys are
+ * entity-level meta (entity name, table, route path). Every other key is a
+ * field-level meta object.
+ */
+export interface EntityMeta {
+    readonly $entity: string;
+    readonly $table: string;
+    readonly $path: string;
+    readonly [field: string]: string | EntityFieldMeta;
+}
+/** Props returned by `form.input.<fieldName>` — spreadable onto <input>. */
+export type BoundInputProps = Record<string, any>;
+/**
+ * Mapped type: for each non-`$`-prefixed key in TEntity, expose its
+ * pre-bound input props. Keys whose value isn't a field meta object are
+ * stripped out at the type level so consumers only see real fields.
+ */
+export type InputAccessor<TEntity> = {
+    readonly [K in keyof TEntity as TEntity[K] extends EntityFieldMeta ? K : never]: BoundInputProps;
+};
+export interface UseEntityFormOptions<T extends FieldValues> {
+    defaultValues?: DefaultValues<T>;
+}
+export type UseEntityFormReturn<T extends FieldValues, TEntity> = UseFormReturn<T> & {
+    input: InputAccessor<TEntity>;
+};
+/**
+ * React Hook Form set up with the generated Zod resolver, plus an `.input`
+ * accessor that binds register() output to each field's metadata-derived
+ * attrs (placeholder, type, aria-label, rules). Consumers spread these
+ * props onto <input> elements and never hand-pass anything else.
+ *
+ * For non-`<input>` controls (textarea, select), `type` will be omitted from
+ * the props and consumers render the right element themselves.
+ */
+export declare function useEntityForm<TEntity extends EntityMeta, T extends FieldValues = FieldValues>(entity: TEntity, schema: ZodTypeAny, opts?: UseEntityFormOptions<T>): UseEntityFormReturn<T, TEntity>;
+//# sourceMappingURL=use-entity-form.d.ts.map

package/dist/use-entity-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-entity-form.d.ts","sourceRoot":"","sources":["../src/use-entity-form.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,aAAa,EAElB,KAAK,eAAe,EACpB,KAAK,aAAa,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOtC,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;CAClC;AAED;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;CACpD;AAMD,4EAA4E;AAG5E,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAElD;;;;GAIG;AACH,MAAM,MAAM,aAAa,CAAC,OAAO,IAAI;IACnC,QAAQ,EAAE,CAAC,IAAI,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,eAAe,GAAG,CAAC,GAAG,KAAK,GAAG,eAAe;CACjG,CAAC;AAMF,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,WAAW;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAClC;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IACnF,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAC/B,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,SAAS,UAAU,EAAE,CAAC,SAAS,WAAW,GAAG,WAAW,EAC3F,MAAM,EAAE,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,IAAI,GAAE,oBAAoB,CAAC,CAAC,CAAM,GACjC,mBAAmB,CAAC,CAAC,EAAE,OAAO,CAAC,CAmCjC"}

package/dist/use-entity-form.js

@@ -0,0 +1,70 @@
+// React form helper — useEntityForm.
+//
+// Single export that returns React Hook Form's `useForm` surface PLUS a
+// pre-bound `.input` accessor: one entry per field on the entity, ready to
+// spread onto an <input> element. Every metadata-derived attribute
+// (placeholder, type, aria-label, RHF rules) rides along automatically.
+//
+// Usage:
+//
+//   import { useEntityForm } from '@metaobjectsdev/react';
+//   import { Subscriber, SubscriberInsertSchema } from './generated/Subscriber';
+//
+//   const form = useEntityForm(Subscriber, SubscriberInsertSchema);
+//
+//   <input {...form.input.email} />
+//   <input {...form.input.firstName} />
+//
+// React, react-hook-form, @hookform/resolvers, and zod are OPTIONAL peer
+// dependencies. The subpath is only loaded when imported.
+import { useMemo } from "react";
+import { useForm, } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+/**
+ * React Hook Form set up with the generated Zod resolver, plus an `.input`
+ * accessor that binds register() output to each field's metadata-derived
+ * attrs (placeholder, type, aria-label, rules). Consumers spread these
+ * props onto <input> elements and never hand-pass anything else.
+ *
+ * For non-`<input>` controls (textarea, select), `type` will be omitted from
+ * the props and consumers render the right element themselves.
+ */
+export function useEntityForm(entity, schema, opts = {}) {
+    // Cast the resolver: @hookform/resolvers' Zod adapter is typed for Zod 3;
+    // schemas authored by codegen-ts may be Zod 4. The runtime shape (safeParse)
+    // is compatible, so cast at the boundary.
+    // biome-ignore lint/suspicious/noExplicitAny: zod 3/4 type-shape gap
+    const resolver = zodResolver(schema);
+    const form = useForm({
+        resolver,
+        ...(opts.defaultValues !== undefined ? { defaultValues: opts.defaultValues } : {}),
+    });
+    // Build `.input` once per render. RHF's register() is stable across renders
+    // (its identity doesn't change unless the form instance does), so this is
+    // safe to memo on the form object.
+    const input = useMemo(() => {
+        const acc = {};
+        for (const [key, value] of Object.entries(entity)) {
+            if (key.startsWith("$"))
+                continue;
+            if (!value || typeof value !== "object" || !("name" in value))
+                continue;
+            const field = value;
+            // Cast rules: RegisterOptions is parameterized by the form's FieldValues
+            // and Path; constants emit a structurally-compatible plain RegisterOptions.
+            // biome-ignore lint/suspicious/noExplicitAny: structural rules pass through to RHF
+            const registered = form.register(field.name, (field.rules ?? {}));
+            const props = { ...registered, "aria-label": field.label };
+            if (field.htmlType !== undefined)
+                props.type = field.htmlType;
+            if (field.placeholder !== undefined)
+                props.placeholder = field.placeholder;
+            acc[key] = props;
+        }
+        return acc;
+        // form is the only relevant dep; entity is a stable codegen-emitted constant.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [form, entity]);
+    return Object.assign(form, { input });
+}
+//# sourceMappingURL=use-entity-form.js.map

package/dist/use-entity-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-entity-form.js","sourceRoot":"","sources":["../src/use-entity-form.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,EAAE;AACF,wEAAwE;AACxE,2EAA2E;AAC3E,mEAAmE;AACnE,wEAAwE;AACxE,EAAE;AACF,SAAS;AACT,EAAE;AACF,2DAA2D;AAC3D,iFAAiF;AACjF,EAAE;AACF,oEAAoE;AACpE,EAAE;AACF,oCAAoC;AACpC,wCAAwC;AACxC,EAAE;AACF,yEAAyE;AACzE,0DAA0D;AAE1D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EACL,OAAO,GAMR,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AA4DtD;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAC3B,MAAe,EACf,MAAkB,EAClB,OAAgC,EAAE;IAElC,0EAA0E;IAC1E,6EAA6E;IAC7E,0CAA0C;IAC1C,qEAAqE;IACrE,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAa,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,OAAO,CAAI;QACtB,QAAQ;QACR,GAAG,CAAC,IAAI,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KACnF,CAAC,CAAC;IAEH,4EAA4E;IAC5E,0EAA0E;IAC1E,mCAAmC;IACnC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,GAAG,GAAoC,EAAE,CAAC;QAChD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAClD,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC;gBAAE,SAAS;YAClC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC;gBAAE,SAAS;YACxE,MAAM,KAAK,GAAG,KAAwB,CAAC;YACvC,yEAAyE;YACzE,4EAA4E;YAC5E,mFAAmF;YACnF,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAe,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAQ,CAAC,CAAC;YACpF,MAAM,KAAK,GAAoB,EAAE,GAAG,UAAU,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;YAC5E,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS;gBAAE,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC;YAC9D,IAAI,KAAK,CAAC,WAAW,KAAK,SAAS;gBAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;YAC3E,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACnB,CAAC;QACD,OAAO,GAA6B,CAAC;QACrC,8EAA8E;QAC9E,uDAAuD;IACzD,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnB,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;AACxC,CAAC"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@metaobjectsdev/react",
+  "version": "0.5.0-rc.1",
+  "description": "React runtime for metaobjects: useEntityForm hook and CurrencyInput component.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "src", "README.md", "LICENSE"],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "test": "bun test"
+  },
+  "license": "Apache-2.0",
+  "author": "Doug Mealing <doug@dougmealing.com>",
+  "homepage": "https://metaobjects.dev",
+  "bugs": {
+  "url": "https://github.com/metaobjectsdev/metaobjects/issues"
+},
+"repository": {
+  "type": "git",
+  "url": "https://github.com/metaobjectsdev/metaobjects.git",
+  "directory": "client/web/packages/react"
+},
+"keywords": ["metaobjects", "react", "react-hook-form", "forms", "currency-input"],
+"publishConfig": {
+"access": "public"
+},
+"dependencies": {
+  "@metaobjectsdev/runtime-web": "0.5.0"
+},
+"peerDependencies": {
+  "@hookform/resolvers": ">=3.0.0",
+  "react": ">=18.0.0",
+  "react-hook-form": ">=7.0.0",
+  "zod": ">=3.23.0"
+},
+"peerDependenciesMeta": {
+  "@hookform/resolvers": {
+  "optional": true
+},
+"react": {
+"optional": true
+},
+"react-hook-form": {
+"optional": true
+},
+"zod": {
+"optional": true
+}
+},
+"devDependencies": {
+  "@hookform/resolvers": "^3.10.0",
+  "@testing-library/react": "^16.0.0",
+  "@testing-library/dom": "^10.0.0",
+  "@types/react": "^19.0.0",
+  "bun-types": "latest",
+  "jsdom": "^29.1.1",
+  "react": "^19.0.0",
+  "react-dom": "^19.0.0",
+  "react-hook-form": "^7.54.0",
+  "typescript": "^5.6.0",
+  "zod": "^4.4.3"
+}
+}

package/src/currency-input.tsx

@@ -0,0 +1,103 @@
+import { useState, useEffect, useRef } from "react";
+import type { ReactElement, FocusEvent, ChangeEvent } from "react";
+import { formatCurrency, parseCurrency, minorUnitsFor } from "@metaobjectsdev/runtime-web";
+
+export interface CurrencyInputProps {
+  /** Value in integer minor units (cents for USD). */
+  value: number;
+  /** Called with new value in integer minor units after blur. */
+  onChange: (cents: number) => void;
+  /** ISO 4217 currency code. Defaults to "USD". */
+  currency?: string;
+  /** BCP 47 locale code. Defaults to "en-US". */
+  locale?: string;
+  className?: string;
+  placeholder?: string;
+  required?: boolean;
+  id?: string;
+  name?: string;
+}
+
+/**
+ * Bidirectional currency input. Displays formatted dollars; captures
+ * dollars from the user; emits cents to onChange on blur.
+ *
+ * - Focus strips symbol + grouping for easier editing
+ * - Blur re-formats + emits cents
+ * - Empty input + !required → emits 0
+ * - Empty input + required → reverts to last valid; no onChange
+ * - Unparseable input on blur → reverts to last valid format; no onChange
+ * - Float drift avoided via Math.round in parseCurrency
+ */
+export function CurrencyInput(props: CurrencyInputProps): ReactElement {
+  const currency = props.currency ?? "USD";
+  const locale = props.locale ?? "en-US";
+
+  const [text, setText] = useState(() => formatCurrency(props.value, currency, locale));
+  const [isInvalid, setIsInvalid] = useState(false);
+  const lastValidValue = useRef(props.value);
+
+  // Re-format when external value changes (controlled component sync)
+  useEffect(() => {
+    if (props.value !== lastValidValue.current) {
+      setText(formatCurrency(props.value, currency, locale));
+      lastValidValue.current = props.value;
+    }
+  }, [props.value, currency, locale]);
+
+  function handleFocus(_e: FocusEvent<HTMLInputElement>) {
+    setIsInvalid(false);
+    // Strip symbol + grouping so user can edit the raw number
+    const minorUnits = minorUnitsFor(currency, locale);
+    const factor = Math.pow(10, minorUnits);
+    const dollars = (props.value / factor).toFixed(minorUnits);
+    setText(dollars);
+  }
+
+  function handleBlur(_e: FocusEvent<HTMLInputElement>) {
+    const trimmed = text.trim();
+    if (trimmed === "") {
+      if (props.required) {
+        setIsInvalid(true);
+        setText(formatCurrency(props.value, currency, locale));
+        return;
+      }
+      setIsInvalid(false);
+      props.onChange(0);
+      lastValidValue.current = 0;
+      setText(formatCurrency(0, currency, locale));
+      return;
+    }
+    const parsed = parseCurrency(trimmed, currency, locale);
+    if (parsed === null) {
+      // Unparseable — revert to last valid
+      setText(formatCurrency(lastValidValue.current, currency, locale));
+      return;
+    }
+    setIsInvalid(false);
+    props.onChange(parsed);
+    lastValidValue.current = parsed;
+    setText(formatCurrency(parsed, currency, locale));
+  }
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    setText(e.target.value);
+  }
+
+  return (
+    <input
+      type="text"
+      inputMode="decimal"
+      value={text}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      className={props.className}
+      placeholder={props.placeholder}
+      required={props.required}
+      id={props.id}
+      name={props.name}
+      data-invalid={isInvalid ? "true" : undefined}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+// Public API surface for @metaobjectsdev/react.
+export {
+  useEntityForm,
+  type EntityFieldMeta,
+  type EntityMeta,
+  type BoundInputProps,
+  type InputAccessor,
+  type UseEntityFormOptions,
+  type UseEntityFormReturn,
+} from "./use-entity-form.js";
+export { CurrencyInput, type CurrencyInputProps } from "./currency-input.js";

package/src/use-entity-form.tsx

@@ -0,0 +1,138 @@
+// React form helper — useEntityForm.
+//
+// Single export that returns React Hook Form's `useForm` surface PLUS a
+// pre-bound `.input` accessor: one entry per field on the entity, ready to
+// spread onto an <input> element. Every metadata-derived attribute
+// (placeholder, type, aria-label, RHF rules) rides along automatically.
+//
+// Usage:
+//
+//   import { useEntityForm } from '@metaobjectsdev/react';
+//   import { Subscriber, SubscriberInsertSchema } from './generated/Subscriber';
+//
+//   const form = useEntityForm(Subscriber, SubscriberInsertSchema);
+//
+//   <input {...form.input.email} />
+//   <input {...form.input.firstName} />
+//
+// React, react-hook-form, @hookform/resolvers, and zod are OPTIONAL peer
+// dependencies. The subpath is only loaded when imported.
+
+import { useMemo } from "react";
+import {
+  useForm,
+  type FieldValues,
+  type DefaultValues,
+  type Path,
+  type RegisterOptions,
+  type UseFormReturn,
+} from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { ZodTypeAny } from "zod";
+
+// ---------------------------------------------------------------------------
+// Field shape — what each non-`$`-prefixed key on an Entity constants object
+// looks like. The codegen emits this; consumers don't construct it by hand.
+// ---------------------------------------------------------------------------
+
+export interface EntityFieldMeta {
+  readonly name: string;
+  readonly label: string;
+  readonly view: string;
+  readonly htmlType?: string;
+  readonly placeholder?: string;
+  readonly helpText?: string;
+  readonly rules?: RegisterOptions;
+}
+
+/**
+ * Minimal shape of an entity constants object. The `$`-prefixed keys are
+ * entity-level meta (entity name, table, route path). Every other key is a
+ * field-level meta object.
+ */
+export interface EntityMeta {
+  readonly $entity: string;
+  readonly $table: string;
+  readonly $path: string;
+  readonly [field: string]: string | EntityFieldMeta;
+}
+
+// ---------------------------------------------------------------------------
+// Pre-bound input props per field. Spread onto a native <input>.
+// ---------------------------------------------------------------------------
+
+/** Props returned by `form.input.<fieldName>` — spreadable onto <input>. */
+// biome-ignore lint/suspicious/noExplicitAny: RHF's register() returns a heavily
+// generic type; we spread the result and add metadata-derived attrs alongside.
+export type BoundInputProps = Record<string, any>;
+
+/**
+ * Mapped type: for each non-`$`-prefixed key in TEntity, expose its
+ * pre-bound input props. Keys whose value isn't a field meta object are
+ * stripped out at the type level so consumers only see real fields.
+ */
+export type InputAccessor<TEntity> = {
+  readonly [K in keyof TEntity as TEntity[K] extends EntityFieldMeta ? K : never]: BoundInputProps;
+};
+
+// ---------------------------------------------------------------------------
+// useEntityForm
+// ---------------------------------------------------------------------------
+
+export interface UseEntityFormOptions<T extends FieldValues> {
+  defaultValues?: DefaultValues<T>;
+}
+
+export type UseEntityFormReturn<T extends FieldValues, TEntity> = UseFormReturn<T> & {
+  input: InputAccessor<TEntity>;
+};
+
+/**
+ * React Hook Form set up with the generated Zod resolver, plus an `.input`
+ * accessor that binds register() output to each field's metadata-derived
+ * attrs (placeholder, type, aria-label, rules). Consumers spread these
+ * props onto <input> elements and never hand-pass anything else.
+ *
+ * For non-`<input>` controls (textarea, select), `type` will be omitted from
+ * the props and consumers render the right element themselves.
+ */
+export function useEntityForm<TEntity extends EntityMeta, T extends FieldValues = FieldValues>(
+  entity: TEntity,
+  schema: ZodTypeAny,
+  opts: UseEntityFormOptions<T> = {},
+): UseEntityFormReturn<T, TEntity> {
+  // Cast the resolver: @hookform/resolvers' Zod adapter is typed for Zod 3;
+  // schemas authored by codegen-ts may be Zod 4. The runtime shape (safeParse)
+  // is compatible, so cast at the boundary.
+  // biome-ignore lint/suspicious/noExplicitAny: zod 3/4 type-shape gap
+  const resolver = zodResolver(schema as any);
+  const form = useForm<T>({
+    resolver,
+    ...(opts.defaultValues !== undefined ? { defaultValues: opts.defaultValues } : {}),
+  });
+
+  // Build `.input` once per render. RHF's register() is stable across renders
+  // (its identity doesn't change unless the form instance does), so this is
+  // safe to memo on the form object.
+  const input = useMemo(() => {
+    const acc: Record<string, BoundInputProps> = {};
+    for (const [key, value] of Object.entries(entity)) {
+      if (key.startsWith("$")) continue;
+      if (!value || typeof value !== "object" || !("name" in value)) continue;
+      const field = value as EntityFieldMeta;
+      // Cast rules: RegisterOptions is parameterized by the form's FieldValues
+      // and Path; constants emit a structurally-compatible plain RegisterOptions.
+      // biome-ignore lint/suspicious/noExplicitAny: structural rules pass through to RHF
+      const registered = form.register(field.name as Path<T>, (field.rules ?? {}) as any);
+      const props: BoundInputProps = { ...registered, "aria-label": field.label };
+      if (field.htmlType !== undefined) props.type = field.htmlType;
+      if (field.placeholder !== undefined) props.placeholder = field.placeholder;
+      acc[key] = props;
+    }
+    return acc as InputAccessor<TEntity>;
+    // form is the only relevant dep; entity is a stable codegen-emitted constant.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form, entity]);
+
+  return Object.assign(form, { input });
+}