@object-ui/react 0.5.0 → 2.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@2.0.0 build /home/runner/work/objectui/objectui/packages/react
 > tsc
 

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @object-ui/react
 
+## 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/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,
                 }) }));
     }
 };

package/dist/components/form/FormRenderer.js

@@ -9,6 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { FieldFactory } from './FieldFactory';
+import { ExpressionEvaluator } from '@object-ui/core';
+import { resolveI18nLabel } from '../../utils/i18n';
 /**
  * FormRenderer component that renders forms based on FormViewSchema
  * from @objectstack/spec
@@ -58,6 +60,33 @@ const COL_SPAN = {
     3: 'col-span-3',
     4: 'col-span-4',
 };
+/**
+ * Evaluate whether a field should be visible based on visibleOn expression
+ * and dependsOn parent field value.
+ */
+function evaluateFieldVisibility(fieldConfig, formValues) {
+    // If explicitly hidden, skip
+    if (fieldConfig.hidden) {
+        return false;
+    }
+    // Evaluate visibleOn expression
+    if (fieldConfig.visibleOn) {
+        try {
+            const evaluator = new ExpressionEvaluator({ data: formValues, form: formValues });
+            return evaluator.evaluateCondition(fieldConfig.visibleOn);
+        }
+        catch {
+            // On error, default to visible
+            return true;
+        }
+    }
+    // Evaluate dependsOn: field is hidden if parent field has no value
+    if (fieldConfig.dependsOn) {
+        const parentValue = formValues[fieldConfig.dependsOn];
+        return parentValue !== undefined && parentValue !== null && parentValue !== '';
+    }
+    return true;
+}
 /**
  * Renders a form section with grid layout
  */
@@ -65,17 +94,30 @@ const FormSectionRenderer = ({ section, methods, disabled = false, }) => {
     const [isCollapsed, setIsCollapsed] = React.useState(section.collapsed || false);
     // Determine grid columns based on section.columns
     const gridCols = GRID_COLS[section.columns || 1];
+    // Collect whether there are any conditional fields
+    const hasConditionalFields = React.useMemo(() => {
+        return section.fields.some((field) => {
+            if (typeof field === 'string')
+                return false;
+            return !!field.dependsOn || !!field.visibleOn;
+        });
+    }, [section.fields]);
+    // Watch form values for conditional field evaluation
+    // Only watch when there are fields with dependsOn or visibleOn to avoid
+    // unnecessary re-renders in forms without conditional fields.
+    const allFormValues = methods.watch();
+    const formValues = hasConditionalFields ? allFormValues : undefined;
     const handleToggleCollapse = () => {
         if (section.collapsible) {
             setIsCollapsed(!isCollapsed);
         }
     };
-    return (_jsxs("div", { className: "border rounded-lg p-4", children: [section.label && (_jsxs("div", { className: `flex items-center justify-between mb-4 ${section.collapsible ? 'cursor-pointer' : ''}`, onClick: handleToggleCollapse, children: [_jsx("h3", { className: "text-lg font-semibold", children: section.label }), section.collapsible && (_jsx("span", { className: "text-sm text-gray-500", children: isCollapsed ? '▶' : '▼' }))] })), !isCollapsed && (_jsx("div", { className: `grid ${gridCols} gap-4`, children: section.fields.map((field, index) => {
+    return (_jsxs("div", { className: "border rounded-lg p-4", children: [section.label && (_jsxs("div", { className: `flex items-center justify-between mb-4 ${section.collapsible ? 'cursor-pointer' : ''}`, onClick: handleToggleCollapse, children: [_jsx("h3", { className: "text-lg font-semibold", children: resolveI18nLabel(section.label) }), section.collapsible && (_jsx("span", { className: "text-sm text-gray-500", children: isCollapsed ? '▶' : '▼' }))] })), !isCollapsed && (_jsx("div", { className: `grid ${gridCols} gap-4`, children: section.fields.map((field, index) => {
                     // Handle both string fields (legacy) and FormFieldSchema objects
                     const fieldName = typeof field === 'string' ? field : field.field;
                     const fieldConfig = typeof field === 'string' ? { field: fieldName } : field;
-                    // Skip hidden fields
-                    if (fieldConfig.hidden) {
+                    // Evaluate visibility: static hidden, visibleOn expression, dependsOn parent
+                    if (!evaluateFieldVisibility(fieldConfig, formValues || {})) {
                         return null;
                     }
                     // Calculate colSpan for grid

package/dist/context/ActionContext.d.ts

@@ -0,0 +1,76 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @object-ui/react - Action Context
+ *
+ * Provides a shared ActionRunner instance and handlers to the component tree.
+ * Components can consume actions without creating their own runner instances.
+ */
+import React from 'react';
+import { ActionRunner, type ActionContext as ActionCtx, type ActionDef, type ActionResult, type ConfirmationHandler, type ToastHandler, type ModalHandler, type NavigationHandler, type ParamCollectionHandler } from '@object-ui/core';
+export interface ActionProviderProps {
+    children: React.ReactNode;
+    /** Initial action context (record, user, data, etc.) */
+    context?: ActionCtx;
+    /** Custom confirmation handler (e.g., Shadcn AlertDialog) */
+    onConfirm?: ConfirmationHandler;
+    /** Custom toast handler (e.g., Sonner) */
+    onToast?: ToastHandler;
+    /** Custom modal handler — render modals in response to modal actions */
+    onModal?: ModalHandler;
+    /** Custom navigation handler — SPA-aware routing (e.g., React Router navigate) */
+    onNavigate?: NavigationHandler;
+    /** Custom param collection handler — show dialog to collect ActionParam values */
+    onParamCollection?: ParamCollectionHandler;
+    /** Pre-registered custom action handlers */
+    handlers?: Record<string, (action: ActionDef, ctx: ActionCtx) => Promise<ActionResult>>;
+}
+interface ActionContextValue {
+    /** Execute an action */
+    execute: (action: ActionDef) => Promise<ActionResult>;
+    /** Execute multiple actions in chain */
+    executeChain: (actions: ActionDef[], mode?: 'sequential' | 'parallel') => Promise<ActionResult>;
+    /** Whether an action is currently being executed */
+    loading: boolean;
+    /** Last error message */
+    error: string | null;
+    /** Last action result */
+    result: ActionResult | null;
+    /** The underlying ActionRunner instance */
+    runner: ActionRunner;
+    /** Update context data */
+    updateContext: (ctx: Partial<ActionCtx>) => void;
+}
+/**
+ * ActionProvider — Provides a shared ActionRunner to the tree.
+ *
+ * @example
+ * ```tsx
+ * <ActionProvider
+ *   context={{ record: currentRecord, user }}
+ *   onToast={(msg, opts) => toast[opts?.type ?? 'info'](msg)}
+ *   onConfirm={async (msg) => showConfirmDialog(msg)}
+ *   onNavigate={(url) => router.push(url)}
+ * >
+ *   <SchemaRenderer schema={pageSchema} />
+ * </ActionProvider>
+ * ```
+ */
+export declare const ActionProvider: React.FC<ActionProviderProps>;
+/**
+ * Hook to consume the ActionProvider context.
+ * Returns the shared ActionRunner execute function, loading state, and more.
+ *
+ * Falls back to a local ActionRunner if no ActionProvider is present.
+ */
+export declare function useAction(): ActionContextValue;
+/**
+ * Hook to check if an ActionProvider is available.
+ */
+export declare function useHasActionProvider(): boolean;
+export {};