@object-ui/react 0.5.0 → 3.0.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @object-ui/react@0.5.0 build /home/runner/work/objectui/objectui/packages/react
+> @object-ui/react@3.0.0 build /home/runner/work/objectui/objectui/packages/react
 > tsc
 

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @object-ui/react
 
+## 3.0.0
+
+### Minor Changes
+
+- 87979c3: Upgrade to @objectstack v3.0.0 and console bundle optimization
+  - Upgraded all @objectstack/\* packages from ^2.0.7 to ^3.0.0
+  - Breaking change migrations: Hub → Cloud namespace, definePlugin removed, PaginatedResult.value → .records, PaginatedResult.count → .total, client.meta.getObject() → client.meta.getItem()
+  - Console bundle optimization: split monolithic 3.7 MB chunk into 17 granular cacheable chunks (95% main entry reduction)
+  - Added gzip + brotli pre-compression via vite-plugin-compression2
+  - Lazy MSW loading for build:server (~150 KB gzip saved)
+  - Added bundle analysis with rollup-plugin-visualizer
+
+### Patch Changes
+
+- Updated dependencies [87979c3]
+  - @object-ui/types@3.0.0
+  - @object-ui/core@3.0.0
+  - @object-ui/i18n@3.0.0
+
+## 2.0.0
+
+### Major Changes
+
+- b859617: Release v1.0.0 — unify all package versions to 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [b859617]
+  - @object-ui/types@2.0.0
+  - @object-ui/core@2.0.0
+  - @object-ui/i18n@2.0.0
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/LazyPluginLoader.d.ts

@@ -11,6 +11,21 @@ export interface LazyPluginOptions {
      * Fallback component to show while loading
      */
     fallback?: React.ReactNode;
+    /**
+     * Number of retry attempts on load failure (default: 2)
+     */
+    retries?: number;
+    /**
+     * Delay in ms between retries (default: 1000)
+     */
+    retryDelay?: number;
+    /**
+     * Custom error fallback component
+     */
+    errorFallback?: React.ComponentType<{
+        error: Error;
+        retry: () => void;
+    }>;
 }
 /**
  * Create a lazy-loaded plugin component with Suspense wrapper
@@ -31,8 +46,37 @@ export interface LazyPluginOptions {
  *   () => import('@object-ui/plugin-grid'),
  *   { fallback: <div>Loading grid...</div> }
  * );
+ *
+ * // With retry and error handling
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   {
+ *     retries: 3,
+ *     errorFallback: ({ error, retry }) => (
+ *       <div>
+ *         <p>Failed to load: {error.message}</p>
+ *         <button onClick={retry}>Retry</button>
+ *       </div>
+ *     ),
+ *   }
+ * );
  * ```
  */
 export declare function createLazyPlugin<P extends object = any>(importFn: () => Promise<{
     default: React.ComponentType<P>;
 }>, options?: LazyPluginOptions): React.ComponentType<P>;
+/**
+ * Preload a plugin module without rendering it.
+ * Useful for preloading plugins that will be needed soon.
+ *
+ * @param importFn - Dynamic import function
+ * @returns Promise that resolves when the module is loaded
+ *
+ * @example
+ * ```tsx
+ * // Preload on hover
+ * const loadGrid = () => import('@object-ui/plugin-grid');
+ * <button onMouseEnter={() => preloadPlugin(loadGrid)}>Show Grid</button>
+ * ```
+ */
+export declare function preloadPlugin<T = unknown>(importFn: () => Promise<T>): Promise<T>;

package/dist/LazyPluginLoader.js

@@ -6,7 +6,55 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, Component } from 'react';
+class PluginErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { hasError: false, error: null }
+        });
+        Object.defineProperty(this, "handleRetry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ hasError: false, error: null });
+            }
+        });
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    render() {
+        if (this.state.hasError && this.state.error) {
+            const FallbackComponent = this.props.fallback;
+            if (FallbackComponent) {
+                return _jsx(FallbackComponent, { error: this.state.error, retry: this.handleRetry });
+            }
+            return null;
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Create a lazy-loaded import function with retry support
+ */
+function createRetryImport(importFn, retries, retryDelay) {
+    return () => {
+        let attempt = 0;
+        const tryImport = () => importFn().catch((err) => {
+            attempt++;
+            if (attempt <= retries) {
+                return new Promise((resolve) => setTimeout(() => resolve(tryImport()), retryDelay));
+            }
+            throw err;
+        });
+        return tryImport();
+    };
+}
 /**
  * Create a lazy-loaded plugin component with Suspense wrapper
  *
@@ -26,10 +74,51 @@ import { lazy, Suspense } from 'react';
  *   () => import('@object-ui/plugin-grid'),
  *   { fallback: <div>Loading grid...</div> }
  * );
+ *
+ * // With retry and error handling
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   {
+ *     retries: 3,
+ *     errorFallback: ({ error, retry }) => (
+ *       <div>
+ *         <p>Failed to load: {error.message}</p>
+ *         <button onClick={retry}>Retry</button>
+ *       </div>
+ *     ),
+ *   }
+ * );
  * ```
  */
 export function createLazyPlugin(importFn, options) {
-    const LazyComponent = lazy(importFn);
-    const PluginWrapper = (props) => (_jsx(Suspense, { fallback: options?.fallback || null, children: _jsx(LazyComponent, { ...props }) }));
+    const { retries = 2, retryDelay = 1000, errorFallback } = options || {};
+    const retryImport = retries > 0
+        ? createRetryImport(importFn, retries, retryDelay)
+        : importFn;
+    const LazyComponent = lazy(retryImport);
+    const PluginWrapper = (props) => {
+        const content = (_jsx(Suspense, { fallback: options?.fallback || null, children: _jsx(LazyComponent, { ...props }) }));
+        if (errorFallback) {
+            return (_jsx(PluginErrorBoundary, { fallback: errorFallback, children: content }));
+        }
+        return content;
+    };
     return PluginWrapper;
 }
+/**
+ * Preload a plugin module without rendering it.
+ * Useful for preloading plugins that will be needed soon.
+ *
+ * @param importFn - Dynamic import function
+ * @returns Promise that resolves when the module is loaded
+ *
+ * @example
+ * ```tsx
+ * // Preload on hover
+ * const loadGrid = () => import('@object-ui/plugin-grid');
+ * <button onMouseEnter={() => preloadPlugin(loadGrid)}>Show Grid</button>
+ * ```
+ */
+export function preloadPlugin(importFn) {
+    return importFn();
+}

package/dist/SchemaRenderer.d.ts

@@ -5,8 +5,27 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { Component } from 'react';
 import { SchemaNode } from '@object-ui/core';
+/**
+ * Per-component Error Boundary for SchemaRenderer.
+ * Catches render errors in individual components, preventing one broken
+ * component from crashing the entire page.
+ */
+interface SchemaErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class SchemaErrorBoundary extends Component<{
+    componentType?: string;
+    children: React.ReactNode;
+}, SchemaErrorBoundaryState> {
+    state: SchemaErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): SchemaErrorBoundaryState;
+    handleRetry: () => void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
 export declare const SchemaRenderer: React.ForwardRefExoticComponent<Omit<{
     schema: SchemaNode;
 } & Record<string, any>, "ref"> & React.RefAttributes<any>>;
+export {};

package/dist/SchemaRenderer.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * ObjectUI
  * Copyright (c) 2024-present ObjectStack Inc.
@@ -6,9 +6,63 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { forwardRef, useContext, useMemo } from 'react';
-import { ComponentRegistry, ExpressionEvaluator } from '@object-ui/core';
+import React, { forwardRef, useContext, useMemo, Component } from 'react';
+import { ComponentRegistry, ExpressionEvaluator, isObjectUIError, ERROR_CODES, debugLog, debugTime, debugTimeEnd, } from '@object-ui/core';
 import { SchemaRendererContext } from './context/SchemaRendererContext';
+import { resolveI18nLabel } from './utils/i18n';
+/**
+ * Extract AriaPropsSchema properties from a schema node and convert
+ * them to standard HTML ARIA attributes.
+ *
+ * @objectstack/spec AriaPropsSchema defines:
+ *   ariaLabel: string | I18nLabel (→ aria-label)
+ *   ariaDescribedBy: string (→ aria-describedby)
+ *   role: string (→ role)
+ */
+function resolveAriaProps(schema) {
+    const aria = {};
+    if (schema.ariaLabel) {
+        aria['aria-label'] = resolveI18nLabel(schema.ariaLabel);
+    }
+    if (schema.ariaDescribedBy) {
+        aria['aria-describedby'] = schema.ariaDescribedBy;
+    }
+    if (schema.role) {
+        aria['role'] = schema.role;
+    }
+    return aria;
+}
+export class SchemaErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { hasError: false, error: null }
+        });
+        Object.defineProperty(this, "handleRetry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ hasError: false, error: null });
+            }
+        });
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    render() {
+        if (this.state.hasError && this.state.error) {
+            const error = this.state.error;
+            const isDev = process.env.NODE_ENV !== 'production';
+            const objuiError = isObjectUIError(error) ? error : null;
+            return (_jsxs("div", { className: "p-4 border border-orange-400 rounded bg-orange-50 text-orange-700 my-2", role: "alert", children: [_jsxs("p", { className: "font-medium", children: ["Component", this.props.componentType ? ` "${this.props.componentType}"` : '', " failed to render"] }), _jsx("p", { className: "text-sm mt-1", children: error.message }), isDev && objuiError?.code && (_jsxs("p", { className: "text-xs mt-1 text-orange-500", children: ["Error code: ", objuiError.code, objuiError.details?.suggestion ? (_jsxs("span", { className: "block mt-0.5", children: ["\uD83D\uDCA1 ", String(objuiError.details.suggestion)] })) : null] })), _jsx("button", { onClick: this.handleRetry, className: "mt-2 text-sm underline hover:no-underline", children: "Retry" })] }));
+        }
+        return this.props.children;
+    }
+}
 export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
     const context = useContext(SchemaRendererContext);
     const dataSource = context?.dataSource || {};
@@ -43,22 +97,31 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
     // If schema is just a string, render it as text
     if (typeof evaluatedSchema === 'string')
         return _jsx(_Fragment, { children: evaluatedSchema });
+    debugLog('schema', 'Rendering schema node', { type: evaluatedSchema.type, id: evaluatedSchema.id });
     const Component = ComponentRegistry.get(evaluatedSchema.type);
     if (!Component) {
-        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type }), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(evaluatedSchema, null, 2) })] }));
+        debugLog('schema', 'Component not found in registry', { type: evaluatedSchema.type });
+        const errorInfo = ERROR_CODES['OBJUI-001'];
+        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", role: "alert", children: [_jsxs("p", { className: "font-medium", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type })] }), process.env.NODE_ENV !== 'production' && (_jsxs("p", { className: "text-xs mt-1", children: ["\uD83D\uDCA1 ", errorInfo.suggestion, " (OBJUI-001)"] })), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(evaluatedSchema, null, 2) })] }));
     }
     // Note: We don't forward the ref to the Component because components in the registry
     // may not support refs. The SchemaRenderer itself can still receive refs for its own use.
     // Extract schema metadata properties that should NOT be passed as React props
     const { type: _type, children: _children, body: _body, schema: _schema, visible: _visible, visibleOn: _visibleOn, hidden: _hidden, hiddenOn: _hiddenOn, disabled: _disabled, disabledOn: _disabledOn, ...componentProps } = evaluatedSchema;
-    return React.createElement(Component, {
-        schema: evaluatedSchema,
-        ...componentProps, // Spread non-metadata schema properties as props
-        ...(evaluatedSchema.props || {}), // Override with explicit props if provided
-        className: evaluatedSchema.className,
-        'data-obj-id': evaluatedSchema.id,
-        'data-obj-type': evaluatedSchema.type,
-        ...props
-    });
+    // Extract AriaPropsSchema properties for accessibility
+    const ariaProps = resolveAriaProps(evaluatedSchema);
+    debugTime(`render:${evaluatedSchema.type}:${evaluatedSchema.id ?? 'anon'}`);
+    const rendered = (_jsx(SchemaErrorBoundary, { componentType: evaluatedSchema.type, children: React.createElement(Component, {
+            schema: evaluatedSchema,
+            ...componentProps, // Spread non-metadata schema properties as props
+            ...(evaluatedSchema.props || {}), // Override with explicit props if provided
+            ...ariaProps, // Inject ARIA attributes from AriaPropsSchema
+            className: evaluatedSchema.className,
+            'data-obj-id': evaluatedSchema.id,
+            'data-obj-type': evaluatedSchema.type,
+            ...props
+        }) }));
+    debugTimeEnd(`render:${evaluatedSchema.type}:${evaluatedSchema.id ?? 'anon'}`);
+    return rendered;
 });
 SchemaRenderer.displayName = 'SchemaRenderer';

package/dist/components/form/FieldFactory.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveI18nLabel } from '../../utils/i18n';
 /**
  * FieldFactory component that renders different input types based on
  * the widget property or field type
@@ -11,6 +12,10 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
     const widgetType = field.widget || 'text';
     const fieldName = field.field;
     const error = errors[fieldName];
+    // Resolve I18nLabel values to plain strings
+    const fieldLabel = resolveI18nLabel(field.label);
+    const fieldPlaceholder = resolveI18nLabel(field.placeholder);
+    const fieldHelpText = resolveI18nLabel(field.helpText);
     // Helper function to handle multiple select value conversion
     const handleMultipleSelectValue = (value) => {
         if (extendedField.multiple && value instanceof HTMLCollection) {
@@ -19,14 +24,13 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
         return value;
     };
     // Handle conditional visibility
-    // Note: visibleOn expression evaluation is not yet implemented
-    // Fields are always visible unless explicitly hidden
-    // Skip if explicitly hidden
+    // Fields are hidden when explicitly hidden or when visibleOn evaluates to false
+    // Note: dependsOn is handled at the FormSectionRenderer level
     if (field.hidden) {
         return null;
     }
     // Common field wrapper
-    const renderField = (input) => (_jsxs("div", { className: "space-y-2", children: [field.label && (_jsxs("label", { htmlFor: fieldName, className: "block text-sm font-medium text-gray-700", children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), input, field.helpText && (_jsx("p", { className: "text-sm text-gray-500", children: field.helpText })), error && (_jsx("p", { className: "text-sm text-red-600", children: error.message }))] }));
+    const renderField = (input) => (_jsxs("div", { className: "space-y-2", children: [fieldLabel && (_jsxs("label", { htmlFor: fieldName, className: "block text-sm font-medium text-gray-700", children: [fieldLabel, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), input, fieldHelpText && (_jsx("p", { className: "text-sm text-gray-500", children: fieldHelpText })), error && (_jsx("p", { className: "text-sm text-red-600", children: error.message }))] }));
     // Render based on widget type
     switch (widgetType.toLowerCase()) {
         case 'text':
@@ -35,71 +39,71 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
         case 'password':
         case 'url':
         case 'tel':
-            return renderField(_jsx("input", { id: fieldName, type: widgetType === 'string' ? 'text' : widgetType, placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: widgetType === 'string' ? 'text' : widgetType, placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'number':
         case 'integer':
         case 'float':
-            return renderField(_jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: widgetType === 'integer' ? '1' : 'any', className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "number", placeholder: fieldPlaceholder, disabled: disabled, step: widgetType === 'integer' ? '1' : 'any', className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     valueAsNumber: true,
                 }) }));
         case 'checkbox':
         case 'boolean':
-            return (_jsxs("div", { className: "flex items-start space-x-2", children: [_jsx("input", { id: fieldName, type: "checkbox", disabled: disabled, className: "mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:opacity-50", ...register(fieldName) }), _jsxs("div", { className: "flex-1", children: [field.label && (_jsxs("label", { htmlFor: fieldName, className: "text-sm font-medium text-gray-700", children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), field.helpText && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: field.helpText })), error && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: error.message }))] })] }));
+            return (_jsxs("div", { className: "flex items-start space-x-2", children: [_jsx("input", { id: fieldName, type: "checkbox", disabled: disabled, className: "mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:opacity-50", ...register(fieldName) }), _jsxs("div", { className: "flex-1", children: [fieldLabel && (_jsxs("label", { htmlFor: fieldName, className: "text-sm font-medium text-gray-700", children: [fieldLabel, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), fieldHelpText && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: fieldHelpText })), error && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: error.message }))] })] }));
         case 'textarea':
-            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder, disabled: disabled, rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: fieldPlaceholder, disabled: disabled, rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'select':
         case 'dropdown':
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
         case 'date':
-            return renderField(_jsx("input", { id: fieldName, type: "date", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "date", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'datetime':
         case 'datetime-local':
-            return renderField(_jsx("input", { id: fieldName, type: "datetime-local", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "datetime-local", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'time':
-            return renderField(_jsx("input", { id: fieldName, type: "time", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "time", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'currency':
-            return renderField(_jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute left-3 top-2 text-gray-500", children: "$" }), _jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: "0.01", className: "w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                            required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute left-3 top-2 text-gray-500", children: "$" }), _jsx("input", { id: fieldName, type: "number", placeholder: fieldPlaceholder, disabled: disabled, step: "0.01", className: "w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                            required: field.required ? `${fieldLabel || fieldName} is required` : false,
                             valueAsNumber: true,
                         }) })] }));
         case 'percent':
-            return renderField(_jsxs("div", { className: "relative", children: [_jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: "0.01", min: "0", max: "100", className: "w-full pr-8 pl-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                            required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsxs("div", { className: "relative", children: [_jsx("input", { id: fieldName, type: "number", placeholder: fieldPlaceholder, disabled: disabled, step: "0.01", min: "0", max: "100", className: "w-full pr-8 pl-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                            required: field.required ? `${fieldLabel || fieldName} is required` : false,
                             valueAsNumber: true,
                         }) }), _jsx("span", { className: "absolute right-3 top-2 text-gray-500", children: "%" })] }));
         case 'phone':
-            return renderField(_jsx("input", { id: fieldName, type: "tel", placeholder: field.placeholder || '+1 (555) 000-0000', disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "tel", placeholder: fieldPlaceholder || '+1 (555) 000-0000', disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'markdown':
-            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter markdown text...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: fieldPlaceholder || 'Enter markdown text...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'html':
-            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter HTML...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: fieldPlaceholder || 'Enter HTML...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'file':
             return renderField(_jsx("input", { id: fieldName, type: "file", disabled: disabled, multiple: extendedField.multiple, accept: extendedField.accept?.join(','), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'image':
             return renderField(_jsx("input", { id: fieldName, type: "file", disabled: disabled, multiple: extendedField.multiple, accept: extendedField.accept?.join(',') || 'image/*', className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'location':
             return renderField(_jsxs("div", { className: "space-y-2", children: [_jsx("input", { id: `${fieldName}-lat`, type: "number", placeholder: "Latitude", disabled: disabled, step: "any", className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(`${fieldName}.lat`, {
@@ -112,23 +116,23 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
         case 'lookup':
         case 'master_detail':
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
         case 'user':
         case 'owner':
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select user' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || 'Select user' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
         case 'formula':
         case 'summary':
         case 'auto_number':
             // Read-only computed fields - display as disabled text input
             return renderField(_jsx("input", { id: fieldName, type: "text", disabled: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600", ...register(fieldName) }));
         case 'object':
-            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter JSON object...', disabled: disabled, rows: 6, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono text-sm", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: fieldPlaceholder || 'Enter JSON object...', disabled: disabled, rows: 6, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono text-sm", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     validate: (value) => {
                         if (!value)
                             return true;
@@ -143,14 +147,14 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
                 }) }));
         case 'vector':
             // Vector fields are typically read-only or require specialized input
-            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: field.placeholder || 'Vector data (read-only)', disabled: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600", ...register(fieldName) }));
+            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: fieldPlaceholder || 'Vector data (read-only)', disabled: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600", ...register(fieldName) }));
         case 'grid':
             // Grid fields require complex table/grid editor - placeholder for now
             return renderField(_jsx("div", { className: "w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600", children: _jsx("p", { className: "text-sm", children: "Grid editor not yet implemented" }) }));
         default:
             // Default to text input
-            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
     }
 };