@object-ui/react 14.0.0 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,141 @@
 # @object-ui/react
 
+## 15.0.0
+
+### Patch Changes
+
+- @object-ui/types@15.0.0
+- @object-ui/core@15.0.0
+- @object-ui/i18n@15.0.0
+- @object-ui/data-objectstack@15.0.0
+
+## 14.1.0
+
+### Minor Changes
+
+- 5523fc4: Dashboard-level filters — the three #2578 item-5 enhancements (framework#2501):
+
+  - **react**: nested `PageVariablesProvider`s now MERGE instead of shadowing
+    wholesale. A filtered dashboard embedded in a Page with its own `variables`
+    keeps the outer page variables readable inside widget subtrees (`page.*`);
+    an inner definition shadows only the SAME name; writes route to the scope
+    that defines the variable (writing an outer-defined name from inside the
+    nested subtree updates the outer provider); `resetVariables` stays local.
+    Names defined nowhere still write locally, exactly as before.
+  - **core**: `buildWidgetScopedFilter` accepts an optional `knownFields` set —
+    a DEFAULT binding whose target field is not on the widget's object is
+    skipped with a console warning instead of emitting a query the backend
+    empty-matches. Explicit `filterBindings` strings are always honoured (a
+    typo surfaces as a visibly empty widget, never a silently dropped filter).
+    Omitting `knownFields` preserves the previous unchecked behaviour.
+  - **plugin-dashboard**: `DashboardRenderer` feeds `knownFields` from
+    `dataSource.getObjectSchema` for inline `object` widgets (best-effort —
+    unchecked while metadata loads or when the source can't describe objects).
+    `optionsFrom` dynamic filter options now resolve DISTINCT values
+    server-side via a dataset GROUP BY (`queryDataset` with an inline draft)
+    when the data source supports it, falling back to the previous client-side
+    top-200 dedupe otherwise.
+
+- dea65f7: Unify the list-view conditional tier onto the canonical CEL engine (#1584).
+
+  Conditional formatting (list / grid / kanban) and row-action `visible` /
+  `disabled` predicates are now evaluated by `@objectstack/formula`'s
+  `ExpressionEngine` — the same engine the server uses — instead of the legacy
+  JS-dialect `ExpressionEvaluator`, matching how `@objectstack/spec` already types
+  these surfaces (`ExpressionInputSchema` / CEL). The whole platform now speaks one
+  expression dialect (framework ADR-0058).
+
+  - `@object-ui/core`: new `evalRowPredicate` + `resolveConditionalFormatting`
+    helpers (next to `evalFieldPredicate`). One implementation of all three
+    formatting rule shapes; dialect routing (a `{ dialect: 'cel' }` envelope is
+    always CEL; a bare string is CEL unless it carries legacy-only syntax
+    (`${…}` / `===` / `?.` / `.includes()`), which routes to the old engine with a
+    one-time deprecation warning); the native `{ field, operator, value }` form is
+    translated to CEL.
+  - `@object-ui/react`: new `useRowPredicate` hook (canonical CEL, ambient
+    predicate scope merged).
+  - Consumers converged: `ListView.evaluateConditionalFormatting` (thin wrapper,
+    export kept), `ObjectGrid` row styling (inline copy removed), kanban card
+    styles, and the grid / data-table row-action menus. `plugin-view`'s kanban
+    branch now forwards top-level `conditionalFormatting` (previously dropped).
+  - Row-action `visible` fails **closed** (broken predicate → hidden + warn);
+    `disabled` fails soft. The CEL `in` operator (and list membership) now work in
+    row predicates — the legacy engine could not parse them.
+  - The legacy `FormField.condition: { field, equals/notEquals/in }` is retired to
+    a CEL translation (back-compat preserved); `FieldDesigner` migrated to
+    `visibleWhen`.
+
+  Fully back-compat: existing conditional-formatting rules, row-action predicates,
+  and form `condition` metadata keep working (translated / routed as needed).
+
+- 5b52624: feat(detail): record-level inline edit — shared `InlineEditContext` + one atomic Save (objectui#2407 P1)
+
+  Lift the inline-edit session out of `DetailView`'s private state into a
+  record-level, shared context so a record page's surfaces can share ONE draft and
+  commit it in ONE atomic, cross-field-validated write (replacing the per-field
+  save loop).
+
+  - **`InlineEditContext` / `InlineEditProvider` / `useInlineEdit`** (@object-ui/react)
+    — pure UI state (`editing`, `canEdit`, `draft`, `autoFocusField`, `saving`,
+    `error` + `enter` / `setField` / `cancel` / `reset`). A _separate_ context from
+    `RecordContext` (mirrors `HighlightFieldsContext`) so per-keystroke draft churn
+    doesn't re-render other `record:*` consumers.
+  - **`<InlineEditSaveBar>`** (@object-ui/plugin-detail) — the record-level sticky
+    Save/Cancel bar. Commits the whole draft in ONE
+    `dataSource.update(obj, id, draft, { ifMatch: data.updated_at })` → `refresh()`;
+    a `409 CONCURRENT_UPDATE` reuses `<ConcurrentUpdateDialog>` (reload / overwrite).
+    A callback mode (`onFieldSave`) preserves the drawer's per-field persistence
+    contract with plugin-gantt/calendar/kanban.
+  - **`DetailView`** now consumes `useInlineEdit()` instead of owning inline-edit
+    state; its header/inline Save-Cancel bars and per-field batch-save are removed
+    (the approval-lock badge stays). Rendered without a provider it is simply
+    read-only.
+  - **`record:details`** and **`RecordDetailDrawer`** each wrap their `DetailView`
+    in an `<InlineEditProvider>` + `<InlineEditSaveBar>`. The object-lifecycle /
+    permission gate flows through `canEdit`; computed / readonly / system fields
+    and the OCC path are unchanged.
+
+  Guardrails preserved: computed (`formula`/`summary`/`rollup`/`auto_number`) +
+  `readonly` + system fields expose no editor; `canEdit` gate; OCC (`ifMatch` +
+  `ConcurrentUpdateDialog`); the atomic partial update carries only user-edited
+  keys (never computed/read-only). Editable highlights ride on top of this in P2.
+
+- f94905d: remove(react): drop the unused `FormRenderer` / `FieldFactory` duplicate render path (#2545)
+
+  `FormRenderer` (and its captive `FieldFactory`) was an exported-but-dead second
+  form render path: zero runtime consumers anywhere in the repo — the only import
+  was its own test file. It duplicated `@object-ui/plugin-form`'s `ObjectForm`
+  (the path every app actually uses via the component registry) but had drifted
+  into a degraded variant: raw-HTML/Tailwind instead of the shared UI primitives,
+  a hard-coded Submit button, and no support for `submitBehavior` / `aria` /
+  `groups`.
+
+  **Breaking (ships as minor per the pre-1.0 launch-window convention):** the
+  public exports `FormRenderer`, `FormRendererProps`, `FieldFactory`,
+  `FieldFactoryProps`, and `ExtendedFormField` are removed from
+  `@object-ui/react`. Render forms through the `object-form` schema node
+  (`@object-ui/plugin-form` `ObjectForm`, reachable from a `FormViewSchema` via
+  `SchemaRenderer` / the spec bridge) instead. Closes Phase 4 of #2545.
+
+### Patch Changes
+
+- Updated dependencies [82441e4]
+- Updated dependencies [2efa9fd]
+- Updated dependencies [0890fa7]
+- Updated dependencies [2ded18c]
+- Updated dependencies [e628d1f]
+- Updated dependencies [5523fc4]
+- Updated dependencies [887062c]
+- Updated dependencies [23d65c3]
+- Updated dependencies [9e2d58f]
+- Updated dependencies [dea65f7]
+- Updated dependencies [d5b1bc0]
+- Updated dependencies [f0f10f5]
+  - @object-ui/i18n@14.1.0
+  - @object-ui/core@14.1.0
+  - @object-ui/types@14.1.0
+  - @object-ui/data-objectstack@14.1.0
+
 ## 14.0.0
 
 ### Minor Changes

package/dist/context/InlineEditContext.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ *
+ * InlineEditContext — record-level inline-edit session shared across the
+ * `record:*` renderers of a record page (objectui#2407 P1). Lifting the
+ * edit session out of `DetailView`'s private state lets the details body and
+ * (P2) the highlights strip share ONE draft + ONE atomic Save.
+ *
+ * This is a *separate* context from `RecordContext` (mirrors
+ * `HighlightFieldsContext`) on purpose: the draft mutates on every keystroke,
+ * and routing that churn through `RecordContext` would re-render every
+ * `record:*` consumer. Consumers that don't edit stay subscribed only to
+ * `RecordContext` and never re-render on draft changes.
+ *
+ * The context holds PURE UI state — it knows nothing about the DataSource,
+ * OCC, or how a draft is persisted. The atomic save + conflict handling live
+ * in `<InlineEditSaveBar>` (@object-ui/plugin-detail), which reads this
+ * context for the draft/editing flags and drives `saving`/`error`/`reset`.
+ */
+import React from 'react';
+export interface InlineEditContextValue {
+    /** True while the record is in inline-edit mode. */
+    editing: boolean;
+    /**
+     * Whether inline editing is allowed at all for this record — the object
+     * lifecycle / permission gate, decided by the host. When false, `enter()`
+     * is a no-op and consumers must not surface the edit affordance.
+     */
+    canEdit: boolean;
+    /**
+     * Draft of user-edited values. Holds ONLY the keys the user actually
+     * changed, so the save path never writes computed / read-only / untouched
+     * fields. Read a field's live value as `draft[name] ?? data[name]`.
+     */
+    draft: Record<string, any>;
+    /** Field to auto-focus when edit was entered from a specific field. */
+    autoFocusField: string | null;
+    /** True while an atomic save is in flight (driven by the save bar). */
+    saving: boolean;
+    /** Last save error message, or null (driven by the save bar). */
+    error: string | null;
+    /** Enter inline-edit mode, optionally focused on `field`. No-op when `!canEdit`. */
+    enter: (field?: string) => void;
+    /** Stage a single field edit into the draft. */
+    setField: (field: string, value: any) => void;
+    /** Exit edit mode and discard the draft (Cancel). */
+    cancel: () => void;
+    /** Exit edit mode and clear the draft — used after a successful save. */
+    reset: () => void;
+    /** Set the in-flight saving flag (used by the save bar). */
+    setSaving: (saving: boolean) => void;
+    /** Set or clear the save error message (used by the save bar). */
+    setError: (error: string | null) => void;
+}
+export interface InlineEditProviderProps {
+    /**
+     * Whether inline editing is allowed (object-lifecycle + permission gate).
+     * Threaded into `canEdit` so `enter()` and the edit affordance are gated at
+     * a single source. Defaults to `true`.
+     */
+    canEdit?: boolean;
+    children: React.ReactNode;
+}
+export declare const InlineEditProvider: React.FC<InlineEditProviderProps>;
+/**
+ * Read the current inline-edit session. Returns `null` when called outside an
+ * `<InlineEditProvider>` — a `DetailView` rendered without a provider (bare /
+ * legacy usage) simply treats the record as read-only rather than throwing.
+ */
+export declare function useInlineEdit(): InlineEditContextValue | null;

package/dist/context/InlineEditContext.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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.
+ *
+ * InlineEditContext — record-level inline-edit session shared across the
+ * `record:*` renderers of a record page (objectui#2407 P1). Lifting the
+ * edit session out of `DetailView`'s private state lets the details body and
+ * (P2) the highlights strip share ONE draft + ONE atomic Save.
+ *
+ * This is a *separate* context from `RecordContext` (mirrors
+ * `HighlightFieldsContext`) on purpose: the draft mutates on every keystroke,
+ * and routing that churn through `RecordContext` would re-render every
+ * `record:*` consumer. Consumers that don't edit stay subscribed only to
+ * `RecordContext` and never re-render on draft changes.
+ *
+ * The context holds PURE UI state — it knows nothing about the DataSource,
+ * OCC, or how a draft is persisted. The atomic save + conflict handling live
+ * in `<InlineEditSaveBar>` (@object-ui/plugin-detail), which reads this
+ * context for the draft/editing flags and drives `saving`/`error`/`reset`.
+ */
+import React from 'react';
+const InlineEditContext = React.createContext(null);
+export const InlineEditProvider = ({ canEdit = true, children, }) => {
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState({});
+    const [autoFocusField, setAutoFocusField] = React.useState(null);
+    const [saving, setSaving] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const enter = React.useCallback((field) => {
+        // Object-lifecycle / permission gate: never enter edit on a record the
+        // host has marked non-editable, even if a stray affordance fires.
+        if (!canEdit)
+            return;
+        setAutoFocusField(field ?? null);
+        setEditing(true);
+        setError(null);
+    }, [canEdit]);
+    const setField = React.useCallback((field, value) => {
+        setDraft((prev) => ({ ...prev, [field]: value }));
+    }, []);
+    // Cancel and reset share the same teardown (clear draft, exit edit, clear
+    // transient state). They are named separately so call sites read
+    // intentionally — `cancel()` on the Cancel button, `reset()` after a
+    // successful save — and so the two can diverge later without touching callers.
+    const teardown = React.useCallback(() => {
+        setDraft({});
+        setEditing(false);
+        setAutoFocusField(null);
+        setSaving(false);
+        setError(null);
+    }, []);
+    const value = React.useMemo(() => ({
+        editing,
+        canEdit,
+        draft,
+        autoFocusField,
+        saving,
+        error,
+        enter,
+        setField,
+        cancel: teardown,
+        reset: teardown,
+        setSaving,
+        setError,
+    }), [editing, canEdit, draft, autoFocusField, saving, error, enter, setField, teardown]);
+    return _jsx(InlineEditContext.Provider, { value: value, children: children });
+};
+/**
+ * Read the current inline-edit session. Returns `null` when called outside an
+ * `<InlineEditProvider>` — a `DetailView` rendered without a provider (bare /
+ * legacy usage) simply treats the record as read-only rather than throwing.
+ */
+export function useInlineEdit() {
+    return React.useContext(InlineEditContext);
+}

package/dist/context/index.d.ts

@@ -6,6 +6,7 @@ export * from './NotificationContext';
 export * from './DndContext';
 export * from './AppShellContext';
 export * from './RecordContext';
+export * from './InlineEditContext';
 export * from './DiscussionContext';
 export * from './DrillNavigationContext';
 export * from './RelatedRecordActionsContext';

package/dist/context/index.js

@@ -6,6 +6,7 @@ export * from './NotificationContext';
 export * from './DndContext';
 export * from './AppShellContext';
 export * from './RecordContext';
+export * from './InlineEditContext';
 export * from './DiscussionContext';
 export * from './DrillNavigationContext';
 export * from './RelatedRecordActionsContext';

package/dist/hooks/useExpression.d.ts

@@ -51,15 +51,32 @@ export declare function toPredicateInput(value: unknown): string | boolean | und
  * ```
  */
 export declare function useExpression(expression: string | boolean | number | null | undefined, context?: Record<string, any>): any;
+export declare function useCondition(condition: string | boolean | undefined, context?: Record<string, any>, options?: {
+    throwOnError?: boolean;
+    label?: string;
+}): boolean;
 /**
- * Hook for evaluating conditional expressions
- * Returns a boolean value
+ * Evaluate a **row-scoped predicate** (a row-action `visible` / `disabled`, or a
+ * conditional-formatting `condition`) against a record on the canonical CEL
+ * engine — the same engine the server uses (issue #1584 / ADR-0058).
  *
- * @example
- * ```tsx
- * const isVisible = useCondition('${data.status === "active"}', { data });
- * ```
+ * Unlike {@link useCondition} (schema/widget tier, legacy `${}` dialect), this
+ * routes to `@object-ui/core`'s `evalRowPredicate`: a bare string is CEL (the
+ * spec contract for `ActionSchema.visible`), a `{ dialect: 'cel', source }`
+ * envelope is always CEL, and only a legacy-dialect string falls back to the
+ * old engine (with a deprecation warning). The row is bound as `record.*` and
+ * bare fields; the ambient predicate scope (`features` / `user` / …) is merged
+ * alongside so deployment-level gates keep resolving.
+ *
+ * @param pred     The raw predicate: `boolean` (returned as-is), a CEL string,
+ *                 an `{ dialect, source }` envelope, or `null`/`undefined`/`''`.
+ * @param row      The row record to evaluate against.
+ * @param options  `fallback` — value when the predicate is absent or faults
+ *                 (default `true`); `warnOnError` — log when a present predicate
+ *                 faults (fail-soft-but-logged, ADR-0058); `label` — for the log.
  */
-export declare function useCondition(condition: string | boolean | undefined, context?: Record<string, any>, options?: {
-    throwOnError?: boolean;
+export declare function useRowPredicate(pred: unknown, row: Record<string, any> | null | undefined, options?: {
+    fallback?: boolean;
+    warnOnError?: boolean;
+    label?: string;
 }): boolean;

package/dist/hooks/useExpression.js

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { createContext, createElement, useContext, useMemo } from 'react';
-import { ExpressionEvaluator } from '@object-ui/core';
+import { ExpressionEvaluator, evalRowPredicate } from '@object-ui/core';
 /**
  * Global predicate scope — populated by host shells (e.g. app-shell's
  * `ExpressionProvider`) so renderers like action buttons can resolve
@@ -95,6 +95,8 @@ export function useExpression(expression, context = {}) {
  * const isVisible = useCondition('${data.status === "active"}', { data });
  * ```
  */
+/** One-time registry for fail-closed predicate warnings (see useCondition). */
+const _warnedConditions = new Set();
 export function useCondition(condition, context = {}, options) {
     const scope = usePredicateScope();
     // We evaluate directly without caching the evaluator to avoid issues with context changes
@@ -108,10 +110,59 @@ export function useCondition(condition, context = {}, options) {
             try {
                 return evaluator.evaluateCondition(condition, { throwOnError: true });
             }
-            catch {
+            catch (err) {
+                // A throwing predicate is almost always an authoring bug (wrong
+                // scope variable, bare field reference) — warn once per
+                // (label, predicate) so the silent hide is diagnosable (#2358)
+                // without spamming re-renders.
+                const src = typeof condition === 'string' ? condition : String(condition);
+                const key = `${options?.label ?? ''}::${src}`;
+                if (!_warnedConditions.has(key)) {
+                    _warnedConditions.add(key);
+                    const msg = err instanceof Error ? err.message : String(err);
+                    console.warn(`[object-ui] ${options?.label ?? 'a component'} was hidden/disabled: ` +
+                        `its predicate threw — ${msg}. Predicate: ${src}.`);
+                }
                 return false;
             }
         }
         return evaluator.evaluateCondition(condition);
-    }, [condition, context, scope, options?.throwOnError]);
+    }, [condition, context, scope, options?.throwOnError, options?.label]);
+}
+/**
+ * Evaluate a **row-scoped predicate** (a row-action `visible` / `disabled`, or a
+ * conditional-formatting `condition`) against a record on the canonical CEL
+ * engine — the same engine the server uses (issue #1584 / ADR-0058).
+ *
+ * Unlike {@link useCondition} (schema/widget tier, legacy `${}` dialect), this
+ * routes to `@object-ui/core`'s `evalRowPredicate`: a bare string is CEL (the
+ * spec contract for `ActionSchema.visible`), a `{ dialect: 'cel', source }`
+ * envelope is always CEL, and only a legacy-dialect string falls back to the
+ * old engine (with a deprecation warning). The row is bound as `record.*` and
+ * bare fields; the ambient predicate scope (`features` / `user` / …) is merged
+ * alongside so deployment-level gates keep resolving.
+ *
+ * @param pred     The raw predicate: `boolean` (returned as-is), a CEL string,
+ *                 an `{ dialect, source }` envelope, or `null`/`undefined`/`''`.
+ * @param row      The row record to evaluate against.
+ * @param options  `fallback` — value when the predicate is absent or faults
+ *                 (default `true`); `warnOnError` — log when a present predicate
+ *                 faults (fail-soft-but-logged, ADR-0058); `label` — for the log.
+ */
+export function useRowPredicate(pred, row, options) {
+    const scope = usePredicateScope();
+    const fallback = options?.fallback ?? true;
+    return useMemo(() => {
+        // A boolean predicate short-circuits (no expression to evaluate).
+        if (typeof pred === 'boolean')
+            return pred;
+        if (pred == null || pred === '')
+            return fallback;
+        return evalRowPredicate(pred, row ?? {}, {
+            fallback,
+            scope,
+            warnOnError: options?.warnOnError,
+            label: options?.label,
+        });
+    }, [pred, row, scope, fallback, options?.warnOnError, options?.label]);
 }

package/dist/hooks/usePageVariables.d.ts

@@ -43,6 +43,16 @@ export interface PageVariablesProviderProps {
  * Initializes variables from their definitions and provides read/write access
  * to all child components via the usePageVariables hook.
  *
+ * Nesting MERGES contexts (objectui#2578): a nested provider (e.g. a filtered
+ * dashboard embedded in a Page that declares its own `variables`) no longer
+ * shadows the outer scope wholesale. Inside the nested subtree, `variables`
+ * exposes the outer values plus the inner ones (an inner definition with the
+ * SAME name shadows the outer one, deliberately), and writes route to the
+ * scope that DEFINES the variable — writing an outer-defined name from inside
+ * the nested subtree updates the outer provider, so both subtrees stay in
+ * sync. Names defined nowhere are written locally. `resetVariables` resets
+ * only the local scope's definitions.
+ *
  * @example
  * ```tsx
  * <PageVariablesProvider definitions={[

package/dist/hooks/usePageVariables.js

@@ -50,6 +50,16 @@ function initializeVariables(definitions) {
  * Initializes variables from their definitions and provides read/write access
  * to all child components via the usePageVariables hook.
  *
+ * Nesting MERGES contexts (objectui#2578): a nested provider (e.g. a filtered
+ * dashboard embedded in a Page that declares its own `variables`) no longer
+ * shadows the outer scope wholesale. Inside the nested subtree, `variables`
+ * exposes the outer values plus the inner ones (an inner definition with the
+ * SAME name shadows the outer one, deliberately), and writes route to the
+ * scope that DEFINES the variable — writing an outer-defined name from inside
+ * the nested subtree updates the outer provider, so both subtrees stay in
+ * sync. Names defined nowhere are written locally. `resetVariables` resets
+ * only the local scope's definitions.
+ *
  * @example
  * ```tsx
  * <PageVariablesProvider definitions={[
@@ -61,18 +71,34 @@ function initializeVariables(definitions) {
  * ```
  */
 export const PageVariablesProvider = ({ definitions, children, }) => {
-    const [variables, setVariablesState] = useState(() => initializeVariables(definitions));
+    const parent = useContext(PageVariablesContext);
+    const [ownVariables, setVariablesState] = useState(() => initializeVariables(definitions));
+    const defs = useMemo(() => definitions ?? [], [definitions]);
+    // Names THIS provider owns (defines). Writes to a name an ancestor defines
+    // — and this provider doesn't — delegate upward; everything else (own
+    // names AND names defined nowhere) writes locally, so ad-hoc variables
+    // behave exactly as before.
+    const ownNames = useMemo(() => new Set(defs.map((d) => d.name)), [defs]);
     const setVariable = useCallback((name, value) => {
+        if (!ownNames.has(name) && parent && parent.definitions.some((d) => d.name === name)) {
+            parent.setVariable(name, value);
+            return;
+        }
         setVariablesState((prev) => ({ ...prev, [name]: value }));
-    }, []);
+    }, [ownNames, parent]);
     const setVariables = useCallback((updates) => {
-        setVariablesState((prev) => ({ ...prev, ...updates }));
-    }, []);
+        for (const [name, value] of Object.entries(updates))
+            setVariable(name, value);
+    }, [setVariable]);
     const resetVariables = useCallback(() => {
         setVariablesState(initializeVariables(definitions));
     }, [definitions]);
-    const defs = useMemo(() => definitions ?? [], [definitions]);
-    const value = useMemo(() => ({ variables, definitions: defs, setVariable, setVariables, resetVariables }), [variables, defs, setVariable, setVariables, resetVariables]);
+    // Merged view: outer scope first, own values win on name collisions.
+    const variables = useMemo(() => (parent ? { ...parent.variables, ...ownVariables } : ownVariables), [parent, ownVariables]);
+    const mergedDefs = useMemo(() => parent
+        ? [...parent.definitions.filter((d) => !ownNames.has(d.name)), ...defs]
+        : defs, [parent, defs, ownNames]);
+    const value = useMemo(() => ({ variables, definitions: mergedDefs, setVariable, setVariables, resetVariables }), [variables, mergedDefs, setVariable, setVariables, resetVariables]);
     return (_jsx(PageVariablesContext.Provider, { value: value, children: children }));
 };
 PageVariablesProvider.displayName = 'PageVariablesProvider';

package/dist/index.d.ts

@@ -8,7 +8,6 @@
 export * from './SchemaRenderer';
 export * from './hooks';
 export * from './context';
-export * from './components/form';
 export * from './LazyPluginLoader';
 export * from './spec-bridge';
 export * from './data-invalidation';

package/dist/index.js

@@ -8,7 +8,6 @@
 export * from './SchemaRenderer';
 export * from './hooks'; // will be empty for now
 export * from './context'; // will be empty for now
-export * from './components/form';
 export * from './LazyPluginLoader';
 export * from './spec-bridge';
 export * from './data-invalidation';

package/dist/spec-bridge/bridges/form-view.d.ts

@@ -8,6 +8,12 @@
 import type { BridgeFn } from '../types';
 interface FormField {
     field: string;
+    /** Field type (spec FormFieldSchema reuses Data.FieldType; auto-infers widget). */
+    type?: string;
+    /** Options for select/multiselect/radio/checkboxes fields. */
+    options?: any[];
+    /** Target object name for lookup/master_detail fields. */
+    reference?: string;
     label?: string;
     placeholder?: string;
     helpText?: string;
@@ -23,17 +29,45 @@ interface FormField {
     visibleOn?: string;
 }
 interface FormSection {
+    /** Stable section identifier for i18n lookup (spec FormSectionSchema.name). */
+    name?: string;
     label?: string;
+    description?: string;
     collapsible?: boolean;
     collapsed?: boolean;
     columns?: number;
+    /** Section-level conditional-visibility predicate (ADR-0089). */
+    visibleWhen?: string;
     fields?: FormField[];
 }
+/**
+ * The subset of `@objectstack/spec` FormViewSchema the bridge consumes.
+ * Every serializable spec key is either mapped onto the `object-form` node
+ * or listed here with an explicit reason for being ignored — the bridge must
+ * never silently drop spec configuration (#2545).
+ */
 interface FormViewSpec {
     type?: string;
+    layout?: string;
+    columns?: number;
+    title?: string;
+    description?: string;
+    defaultTab?: string;
+    tabPosition?: string;
+    allowSkip?: boolean;
+    showStepIndicator?: boolean;
+    splitDirection?: string;
+    splitSize?: number;
+    splitResizable?: boolean;
+    drawerSide?: string;
+    drawerWidth?: string;
+    modalSize?: string;
     data?: any;
     sections?: FormSection[];
-    groups?: any;
+    /** Legacy alias of `sections` (spec: "Legacy support → alias to sections"). */
+    groups?: FormSection[];
+    /** Inline master-detail child collections. */
+    subforms?: any[];
     defaultSort?: any;
     sharing?: any;
     aria?: {

package/dist/spec-bridge/bridges/form-view.js

@@ -10,6 +10,12 @@ function mapField(field) {
         name: field.field,
         label: field.label ?? field.field,
     };
+    if (field.type)
+        mapped.type = field.type;
+    if (field.options)
+        mapped.options = field.options;
+    if (field.reference)
+        mapped.reference = field.reference;
     if (field.placeholder)
         mapped.placeholder = field.placeholder;
     if (field.helpText)
@@ -39,14 +45,20 @@ function mapSection(section) {
     const mapped = {
         fields: (section.fields ?? []).map(mapField),
     };
+    if (section.name)
+        mapped.name = section.name;
     if (section.label)
         mapped.label = section.label;
+    if (section.description)
+        mapped.description = section.description;
     if (section.collapsible != null)
         mapped.collapsible = section.collapsible;
     if (section.collapsed != null)
         mapped.collapsed = section.collapsed;
     if (section.columns != null)
         mapped.columns = section.columns;
+    if (section.visibleWhen)
+        mapped.visibleWhen = section.visibleWhen;
     return mapped;
 }
 /** Maps spec formType to ObjectUI formType */
@@ -56,9 +68,35 @@ function mapFormType(type) {
     const validTypes = ['simple', 'tabbed', 'wizard', 'split', 'drawer', 'modal'];
     return validTypes.includes(type) ? type : undefined;
 }
+/**
+ * Spec FormViewSchema keys carried onto the `object-form` node verbatim.
+ * All of them are declared with the same name (and semantics) on
+ * `ObjectFormSchema`, so no per-key mapping is needed — only presence checks.
+ */
+const PASSTHROUGH_KEYS = [
+    'layout',
+    'columns',
+    'title',
+    'description',
+    'defaultTab',
+    'tabPosition',
+    'allowSkip',
+    'showStepIndicator',
+    'splitDirection',
+    'splitSize',
+    'splitResizable',
+    'drawerSide',
+    'drawerWidth',
+    'modalSize',
+    'subforms',
+];
 /** Transforms a FormView spec into a Form SchemaNode */
 export const bridgeFormView = (spec, _context) => {
-    const sections = (spec.sections ?? []).map(mapSection);
+    // Spec defines `groups` as a legacy alias of `sections`; normalize here so
+    // downstream renderers only ever see `sections` (ObjectForm never reads a
+    // `groups` key — before this normalization a groups-only spec silently
+    // rendered no sections at all, #2545).
+    const sections = (spec.sections ?? spec.groups ?? []).map(mapSection);
     const formType = mapFormType(spec.type);
     const node = {
         type: 'object-form',
@@ -69,8 +107,12 @@ export const bridgeFormView = (spec, _context) => {
     // P1.2 — formType mapping (tabbed, wizard, split, drawer, modal)
     if (formType)
         node.formType = formType;
-    if (spec.groups)
-        node.groups = spec.groups;
+    // #2545 — same-name spec keys (layout, title, tab/wizard/split/drawer/modal
+    // options, subforms) pass straight through onto the node.
+    for (const key of PASSTHROUGH_KEYS) {
+        if (spec[key] != null)
+            node[key] = spec[key];
+    }
     if (spec.defaultSort)
         node.defaultSort = spec.defaultSort;
     if (spec.submitBehavior)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/react",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
@@ -26,10 +26,10 @@
   "dependencies": {
     "@objectstack/spec": "^14.6.0",
     "react-hook-form": "^7.81.0",
-    "@object-ui/core": "14.0.0",
-    "@object-ui/data-objectstack": "14.0.0",
-    "@object-ui/i18n": "14.0.0",
-    "@object-ui/types": "14.0.0"
+    "@object-ui/core": "15.0.0",
+    "@object-ui/data-objectstack": "15.0.0",
+    "@object-ui/i18n": "15.0.0",
+    "@object-ui/types": "15.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/dist/components/form/FieldFactory.d.ts

@@ -1,43 +0,0 @@
-/**
- * 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.
- */
-import React from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import type { FormField } from '@objectstack/spec/ui';
-/**
- * Extended form field with additional properties for complex widgets
- * These properties are not part of the standard FormField schema but may be
- * provided by specific implementations
- */
-export interface ExtendedFormField extends FormField {
-    multiple?: boolean;
-    accept?: string[];
-    options?: Array<{
-        label: string;
-        value: string;
-        disabled?: boolean;
-    }>;
-}
-export interface FieldFactoryProps {
-    /**
-     * Field configuration from FormFieldSchema
-     */
-    field: FormField;
-    /**
-     * React Hook Form methods
-     */
-    methods: UseFormReturn<any>;
-    /**
-     * Whether the field is disabled
-     */
-    disabled?: boolean;
-}
-/**
- * FieldFactory component that renders different input types based on
- * the widget property or field type
- */
-export declare const FieldFactory: React.FC<FieldFactoryProps>;

package/dist/components/form/FieldFactory.js

@@ -1,164 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { resolveI18nLabel } from '../../utils/i18n';
-import { createSafeTranslation } from '@object-ui/i18n';
-const useSafeTranslation = createSafeTranslation({ 'common.selectOption': 'Select an option' }, 'common.selectOption');
-/**
- * FieldFactory component that renders different input types based on
- * the widget property or field type
- */
-export const FieldFactory = ({ field, methods, disabled = false, }) => {
-    const { register, formState: { errors } } = methods;
-    const { t } = useSafeTranslation();
-    // Cast to extended field for properties not in base schema
-    const extendedField = field;
-    // Determine the widget type
-    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) {
-            return Array.from(value).map((opt) => opt.value);
-        }
-        return value;
-    };
-    // Handle conditional visibility
-    // 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: [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':
-        case 'string':
-        case 'email':
-        case 'password':
-        case 'url':
-        case 'tel':
-            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: 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: [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: 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 ? `${fieldLabel || fieldName} is required` : false,
-                    setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || t('common.selectOption') }), 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: 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: 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: 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: 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: 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: 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: 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: 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 ? `${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 ? `${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`, {
-                            required: field.required ? 'Latitude is required' : false,
-                            valueAsNumber: true,
-                        }) }), _jsx("input", { id: `${fieldName}-lng`, type: "number", placeholder: "Longitude", 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}.lng`, {
-                            required: field.required ? 'Longitude is required' : false,
-                            valueAsNumber: true,
-                        }) })] }));
-        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 ? `${fieldLabel || fieldName} is required` : false,
-                    setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || t('common.selectOption') }), 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 ? `${fieldLabel || fieldName} is required` : false,
-                    setValueAs: handleMultipleSelectValue,
-                }), 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: 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;
-                        try {
-                            JSON.parse(value);
-                            return true;
-                        }
-                        catch (e) {
-                            return 'Invalid JSON format';
-                        }
-                    },
-                }) }));
-        case 'vector':
-            // Vector fields are typically read-only or require specialized input
-            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: 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,
-                }) }));
-    }
-};
-FieldFactory.displayName = 'FieldFactory';

package/dist/components/form/FormRenderer.d.ts

@@ -1,40 +0,0 @@
-/**
- * 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.
- */
-import React from 'react';
-import type { FormView } from '@objectstack/spec/ui';
-export interface FormRendererProps {
-    /**
-     * The FormView schema from @objectstack/spec
-     */
-    schema: FormView;
-    /**
-     * Initial form data
-     */
-    data?: Record<string, any>;
-    /**
-     * Form submission handler
-     */
-    onSubmit?: (data: Record<string, any>) => void | Promise<void>;
-    /**
-     * Form change handler
-     */
-    onChange?: (data: Record<string, any>) => void;
-    /**
-     * Custom class name for the form
-     */
-    className?: string;
-    /**
-     * Whether the form is disabled
-     */
-    disabled?: boolean;
-}
-/**
- * FormRenderer component that renders forms based on FormViewSchema
- * from @objectstack/spec
- */
-export declare const FormRenderer: React.FC<FormRendererProps>;

package/dist/components/form/FormRenderer.js

@@ -1,132 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 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.
- */
-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
- */
-export const FormRenderer = ({ schema, data = {}, onSubmit, onChange, className = '', disabled = false, }) => {
-    // Create form methods with react-hook-form
-    const methods = useForm({
-        defaultValues: data,
-        mode: 'onChange',
-    });
-    const { handleSubmit, watch } = methods;
-    // Watch for form changes
-    React.useEffect(() => {
-        if (onChange) {
-            const subscription = watch((value) => {
-                onChange(value);
-            });
-            return () => subscription.unsubscribe();
-        }
-    }, [watch, onChange]);
-    // Handle form submission
-    const onSubmitForm = handleSubmit(async (formData) => {
-        if (onSubmit) {
-            await onSubmit(formData);
-        }
-    });
-    // Render sections or fields
-    const renderContent = () => {
-        if (!schema.sections || schema.sections.length === 0) {
-            return null;
-        }
-        return (_jsx("div", { className: "space-y-6", children: schema.sections.map((section, index) => (_jsx(FormSectionRenderer, { section: section, methods: methods, disabled: disabled }, index))) }));
-    };
-    return (_jsx(FormProvider, { ...methods, children: _jsxs("form", { onSubmit: onSubmitForm, className: `space-y-6 ${className}`, children: [renderContent(), _jsx("div", { className: "flex justify-end gap-2", children: _jsx("button", { type: "submit", disabled: disabled, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed", children: "Submit" }) })] }) }));
-};
-// Grid column classes for different column counts
-const GRID_COLS = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 md:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-3',
-    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-};
-// Column span classes
-const COL_SPAN = {
-    1: 'col-span-1',
-    2: 'col-span-2',
-    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 the conditional-visibility predicate. `visibleWhen` is canonical
-    // (ADR-0089); `visibleOn` is the deprecated alias, kept as a fallback for raw
-    // / un-normalized metadata.
-    const visiblePredicate = fieldConfig.visibleWhen ?? fieldConfig.visibleOn;
-    if (visiblePredicate) {
-        try {
-            const evaluator = new ExpressionEvaluator({ data: formValues, form: formValues });
-            return evaluator.evaluateCondition(visiblePredicate);
-        }
-        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
- */
-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.visibleWhen || !!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: 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;
-                    // Evaluate visibility: static hidden, visibleOn expression, dependsOn parent
-                    if (!evaluateFieldVisibility(fieldConfig, formValues || {})) {
-                        return null;
-                    }
-                    // Calculate colSpan for grid
-                    const colSpan = fieldConfig.colSpan || 1;
-                    const colSpanClass = COL_SPAN[Math.min(colSpan, section.columns || 1)];
-                    return (_jsx("div", { className: colSpanClass, children: _jsx(FieldFactory, { field: fieldConfig, methods: methods, disabled: disabled || fieldConfig.readonly }) }, `${fieldName}-${index}`));
-                }) }))] }));
-};
-FormRenderer.displayName = 'FormRenderer';

package/dist/components/form/index.d.ts

@@ -1,11 +0,0 @@
-/**
- * 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.
- */
-export { FormRenderer } from './FormRenderer';
-export type { FormRendererProps } from './FormRenderer';
-export { FieldFactory } from './FieldFactory';
-export type { FieldFactoryProps, ExtendedFormField } from './FieldFactory';

package/dist/components/form/index.js

@@ -1,9 +0,0 @@
-/**
- * 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.
- */
-export { FormRenderer } from './FormRenderer';
-export { FieldFactory } from './FieldFactory';