@duke333/builder-ui 0.2.4 → 0.2.5

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { createBuilderHooks, createBuilderKeys } from './hooks/index.js';
 import { BuilderDbTable, BuilderForm as BuilderForm$1, BuilderList, BuilderView as BuilderView$1, BuilderViewEntry, ListBuilderFormsQuery, ListBuilderFormsResponse, CreateBuilderFormInput, UpdateBuilderFormInput, ListBuilderListsQuery, ListBuilderListsResponse, CreateBuilderListInput, UpdateBuilderListInput, ListBuilderViewsQuery, ListBuilderViewsResponse, CreateBuilderViewInput, UpdateBuilderViewInput, ReplicateBuilderEntityInput, CreateBuilderViewEntryInput, CreateCompositeBuilderViewEntryInput, UpdateCompositeBuilderViewEntryInput, UpdateBuilderViewEntryInput, ListBuilderFieldOptionsQuery, ListBuilderFieldOptionsResponse, RunBuilderFieldTriggerInput, BuilderFieldTriggerEvent, BuilderFieldTriggerResponse, ListBuilderViewEntriesQuery, ListBuilderViewEntriesResponse, BuilderFileUploadRequest, BuilderFileUploadResponse, BuilderFilePresignResponse, BuilderField } from '@duke333/builder-contracts';
 import { FieldValues, Path } from 'react-hook-form';
 export { richTextToPlainText, toRichTextDocument } from './runtime/index.js';
-export { B as BUILDER_EDITOR_NONE_VALUE, a as BuilderAdminPageContracts, b as BuilderAdminPagesOptions, c as BuilderAdminPagesRoutes, d as BuilderDefaultEntity, e as BuilderDefaultEntityListResult, f as BuilderDefaultEntityManagerDependencies, g as BuilderDefaultEntityManagerLabels, h as BuilderDefaultEntityManagerState, i as BuilderDefaultEntityMutation, j as BuilderDefaultEntityQueryResult, k as BuilderDefaultFormEditorBodyOptions, l as BuilderDefaultListEditorBodyOptions, m as BuilderDefaultOption, n as BuilderEditorDbTable, o as BuilderEditorSelectOption, p as BuilderEditorTriggerValues, q as BuilderFormEditorBodyProps, r as BuilderFormEditorEntity, s as BuilderFormEditorFieldValues, t as BuilderFormEditorPageDependencies, u as BuilderFormEditorValues, v as BuilderListEditorBodyProps, w as BuilderListEditorColumnValues, x as BuilderListEditorEntity, y as BuilderListEditorOrderByValues, z as BuilderListEditorPageDependencies, A as BuilderListEditorValues, C as BuilderViewEditorEntity, D as BuilderViewEditorValues, E as builderEditorOptionsToText, F as builderEditorSearchFieldsToText, G as builderEditorTextToOptions, H as builderEditorTextToSearchFields, I as builderFormEditorFieldsFromTable, J as builderFormEditorInputFromValues, K as builderFormEditorValuesFromEntity, L as builderListEditorColumnsFromTable, M as builderListEditorInputFromValues, N as builderListEditorValuesFromEntity, O as builderViewEditorInputFromValues, P as builderViewEditorValuesFromEntity, Q as createBuilderAdminPages, R as createBuilderDefaultEntityManagerComponent, S as createBuilderDefaultFormEditorBody, T as createBuilderDefaultListEditorBody, U as createBuilderFormEditorPageComponent, V as createBuilderListEditorPageComponent, W as getBuilderEditorTriggerRoute } from './BuilderAdminPages-DwwdA8Dv.js';
+export { B as BUILDER_EDITOR_NONE_VALUE, a as BuilderAdminPageContracts, b as BuilderAdminPagesOptions, c as BuilderAdminPagesRoutes, d as BuilderDefaultEntity, e as BuilderDefaultEntityListResult, f as BuilderDefaultEntityManagerDependencies, g as BuilderDefaultEntityManagerLabels, h as BuilderDefaultEntityManagerState, i as BuilderDefaultEntityMutation, j as BuilderDefaultEntityQueryResult, k as BuilderDefaultFormEditorBodyOptions, l as BuilderDefaultListEditorBodyOptions, m as BuilderDefaultOption, n as BuilderEditorDbTable, o as BuilderEditorSelectOption, p as BuilderEditorTriggerValues, q as BuilderFormEditorBodyProps, r as BuilderFormEditorEntity, s as BuilderFormEditorFieldValues, t as BuilderFormEditorPageDependencies, u as BuilderFormEditorValues, v as BuilderListEditorBodyProps, w as BuilderListEditorColumnValues, x as BuilderListEditorEntity, y as BuilderListEditorOrderByValues, z as BuilderListEditorPageDependencies, A as BuilderListEditorValues, C as BuilderViewEditorEntity, D as BuilderViewEditorValues, E as builderEditorOptionsToText, F as builderEditorSearchFieldsToText, G as builderEditorTextToOptions, H as builderEditorTextToSearchFields, I as builderFormEditorFieldsFromTable, J as builderFormEditorInputFromValues, K as builderFormEditorValuesFromEntity, L as builderListEditorColumnsFromTable, M as builderListEditorInputFromValues, N as builderListEditorValuesFromEntity, O as builderViewEditorInputFromValues, P as builderViewEditorValuesFromEntity, Q as createBuilderAdminPages, R as createBuilderDefaultEntityManagerComponent, S as createBuilderDefaultFormEditorBody, T as createBuilderDefaultListEditorBody, U as createBuilderFormEditorPageComponent, V as createBuilderListEditorPageComponent, W as getBuilderEditorTriggerRoute } from './BuilderAdminPages-bV-lwDOp.js';
 export { BuilderDefaultViewEditorContracts, BuilderDefaultViewEditorPageOptions, BuilderEntityDialogManagerDependencies, BuilderEntityManagerActions, BuilderEntityManagerAddButtonProps, BuilderEntityManagerDataGridProps, BuilderEntityManagerDeleteDialogProps, BuilderEntityManagerDependencies, BuilderEntityManagerDialogAddButtonProps, BuilderEntityManagerEditorDialogProps, BuilderEntityManagerEntity, BuilderEntityManagerHookResult, BuilderEntityManagerLabels, BuilderEntityManagerMutation, BuilderFormLayoutDragPayload, BuilderFormLayoutItem, BuilderViewDialogBodyProps, BuilderViewDialogDependencies, BuilderViewDialogProps, BuilderViewDialogShellProps, builderFormLayoutDragDataType, clampBuilderFormLayoutSpan, createBuilderDefaultViewEditorPage, createBuilderEntityDialogManagerComponent, createBuilderEntityManagerComponent, createBuilderViewDialogComponent, nextBuilderFormLayoutGroupId, parseBuilderFormLayoutDragPayload, serializeBuilderFormLayoutDragPayload, swapBuilderFormLayoutItems, useBuilderFormLayoutEditor } from './admin/index.js';
 export { D as DynamicFormContracts, a as DynamicFormDependencies, b as DynamicFormErrorStateProps, c as DynamicFormFieldsProps, d as DynamicFormNotifications, e as DynamicFormProps, f as DynamicFormShellProps, g as DynamicFormSubmitProps, h as DynamicListContracts, i as DynamicListDataGridProps, j as DynamicListDependencies, k as DynamicListErrorStateProps, l as DynamicListProps, m as DynamicViewAddButtonProps, n as DynamicViewColumnActions, o as DynamicViewContracts, p as DynamicViewDataGridProps, q as DynamicViewDeleteDialogProps, r as DynamicViewDependencies, s as DynamicViewEntryDialogProps, t as DynamicViewErrorStateProps, u as DynamicViewInteractionEvent, v as DynamicViewProps, w as RuntimeEntryDialogActionsProps, x as RuntimeEntryDialogDependencies, y as RuntimeEntryDialogFieldsProps, z as RuntimeEntryDialogNotifications, A as RuntimeEntryDialogProps, B as RuntimeEntryDialogSaveArgs, C as RuntimeEntryDialogShellProps, E as RuntimeEntryDialogViewLike, F as createDynamicFormComponent, G as createDynamicListComponent, H as createDynamicViewComponent, I as createRuntimeEntryDialogComponent, J as shouldHandleDynamicViewRowClick } from './RuntimeEntryDialog-B4TbF8os.js';
 export { b as BuilderRuntimeEntryLike, c as BuilderRuntimeEntryValues, f as BuilderRuntimeFieldLike, a as BuilderRuntimeFormSchemaLike, d as BuilderRuntimeFormValues, B as BuilderRuntimePresentation, e as BuilderRuntimeViewLike, g as createBuilderEntryDefaultValues, h as createBuilderFormDefaultValues, i as formatBuilderRuntimeValue } from './runtimeUtils-CCtLyIf1.js';
@@ -149,6 +149,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                     icon?: string | undefined;
                 }[];
                 layout?: {
+                    presentation: "stacked" | "tabs";
                     groups: {
                         id: string;
                         columns: 8 | 6 | 12;
@@ -263,6 +264,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                 icon?: string | undefined;
             }[];
             layout?: {
+                presentation: "stacked" | "tabs";
                 groups: {
                     id: string;
                     columns: 8 | 6 | 12;
@@ -353,6 +355,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                 icon?: string | undefined;
             }[];
             layout?: {
+                presentation: "stacked" | "tabs";
                 groups: {
                     id: string;
                     columns: 8 | 6 | 12;
@@ -424,6 +427,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                 icon?: string | undefined;
             }[];
             layout?: {
+                presentation: "stacked" | "tabs";
                 groups: {
                     id: string;
                     columns: 8 | 6 | 12;
@@ -525,6 +529,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                 icon?: string | undefined;
             }[];
             layout?: {
+                presentation: "stacked" | "tabs";
                 groups: {
                     id: string;
                     columns: 8 | 6 | 12;
@@ -596,6 +601,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                 icon?: string | undefined;
             }[];
             layout?: {
+                presentation: "stacked" | "tabs";
                 groups: {
                     id: string;
                     columns: 8 | 6 | 12;
@@ -698,6 +704,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                 icon?: string | undefined;
             }[];
             layout?: {
+                presentation: "stacked" | "tabs";
                 groups: {
                     id: string;
                     columns: 8 | 6 | 12;
@@ -790,6 +797,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                 icon?: string | undefined;
             }[];
             layout?: {
+                presentation: "stacked" | "tabs";
                 groups: {
                     id: string;
                     columns: 8 | 6 | 12;
@@ -1233,6 +1241,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                         icon?: string | undefined;
                     }[];
                     layout?: {
+                        presentation: "stacked" | "tabs";
                         groups: {
                             id: string;
                             columns: 8 | 6 | 12;
@@ -1386,6 +1395,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                     icon?: string | undefined;
                 }[];
                 layout?: {
+                    presentation: "stacked" | "tabs";
                     groups: {
                         id: string;
                         columns: 8 | 6 | 12;
@@ -1549,6 +1559,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                     icon?: string | undefined;
                 }[];
                 layout?: {
+                    presentation: "stacked" | "tabs";
                     groups: {
                         id: string;
                         columns: 8 | 6 | 12;
@@ -1713,6 +1724,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                     icon?: string | undefined;
                 }[];
                 layout?: {
+                    presentation: "stacked" | "tabs";
                     groups: {
                         id: string;
                         columns: 8 | 6 | 12;
@@ -1864,6 +1876,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                     icon?: string | undefined;
                 }[];
                 layout?: {
+                    presentation: "stacked" | "tabs";
                     groups: {
                         id: string;
                         columns: 8 | 6 | 12;
@@ -1998,6 +2011,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                 icon?: string | undefined;
             }[];
             layout?: {
+                presentation: "stacked" | "tabs";
                 groups: {
                     id: string;
                     columns: 8 | 6 | 12;
@@ -2204,6 +2218,7 @@ declare function createBuilderClient({ transport, apiBasePath }: CreateBuilderCl
                     icon?: string | undefined;
                 }[];
                 layout?: {
+                    presentation: "stacked" | "tabs";
                     groups: {
                         id: string;
                         columns: 8 | 6 | 12;
@@ -2419,7 +2434,7 @@ declare function RichTextContent({ className, value }: RichTextContentProps): re
 
 declare const builderUiPackage: {
     readonly name: "@duke333/builder-ui";
-    readonly version: "0.2.4";
+    readonly version: "0.2.5";
 };
 
 export { BuilderApiClient, BuilderApiContracts, BuilderApiTransport, type BuilderClient, BuilderFieldOptionsQuery, BuilderForm, type BuilderFormProps, BuilderGrid, type BuilderGridProps, BuilderHooks, type BuilderNotification, BuilderProvider, type BuilderProviderProps, type BuilderRuntimeComponents, BuilderView, type BuilderViewProps, type CreateBuilderClientOptions, type ReadyBuilderContracts, ReadyFileField, ReadyRichTextField, RichTextContent, type RichTextContentProps, builderErrorMessage, builderUiPackage, createBuilderClient, useBuilderRuntime };

package/dist/index.js

@@ -514,7 +514,7 @@ function builderErrorMessage(error, fallback) {
 }
 
 // src/ready/BuilderRuntimeComponents.tsx
-import { useMemo as useMemo4, useRef as useRef7, useState as useState6 } from "react";
+import { useMemo as useMemo4, useRef as useRef7, useState as useState7 } from "react";
 import { FormProvider as FormProvider2, useForm as useForm2 } from "react-hook-form";
 
 // src/richText.ts
@@ -582,7 +582,7 @@ function formatBuilderRuntimeValue(value, locale = "mn-MN") {
 }
 
 // src/ready/ReadyFields.tsx
-import { useRef as useRef4 } from "react";
+import { useId as useId2, useRef as useRef4, useState as useState3 } from "react";
 import { useFormContext as useFormContext3, useWatch as useWatch3 } from "react-hook-form";
 
 // src/ready/ReadyFileField.tsx
@@ -931,15 +931,57 @@ function ReadyFields({
 }) {
   const fields = new Map(schema.fields.map((field) => [field.key, field]));
   const rendered = /* @__PURE__ */ new Set();
+  const groups = schema.layout?.groups ?? [];
+  const tabsId = useId2();
+  const [selectedGroupId, setSelectedGroupId] = useState3(groups[0]?.id ?? "");
+  const activeGroupId = groups.some((group) => group.id === selectedGroupId) ? selectedGroupId : groups[0]?.id ?? "";
+  const renderGroupFields = (group) => /* @__PURE__ */ jsx4("div", { className: "builder-form-grid", children: group.fields.map((item) => {
+    const field = fields.get(item.key);
+    if (!field) return null;
+    rendered.add(field.key);
+    return /* @__PURE__ */ jsx4("div", { style: { gridColumn: `span ${item.span}` }, children: /* @__PURE__ */ jsx4(
+      ReadyField,
+      {
+        field,
+        formId,
+        viewId,
+        parentValues
+      }
+    ) }, field.key);
+  }) });
   return /* @__PURE__ */ jsxs4("div", { className: "builder-form-fields", children: [
-    schema.layout?.groups.map((group) => /* @__PURE__ */ jsxs4("fieldset", { className: "builder-fieldset", children: [
+    schema.layout?.presentation === "tabs" && groups.length > 0 ? /* @__PURE__ */ jsxs4("div", { className: "builder-form-tabs", children: [
+      /* @__PURE__ */ jsx4("div", { "aria-label": "Form sections", className: "builder-form-tabs__list", role: "tablist", children: groups.map((group, index) => {
+        const isActive = group.id === activeGroupId;
+        return /* @__PURE__ */ jsx4(
+          "button",
+          {
+            "aria-controls": `${tabsId}-panel-${group.id}`,
+            "aria-selected": isActive,
+            className: "builder-form-tabs__trigger",
+            id: `${tabsId}-tab-${group.id}`,
+            onClick: () => setSelectedGroupId(group.id),
+            role: "tab",
+            type: "button",
+            children: group.title ?? `Group ${index + 1}`
+          },
+          group.id
+        );
+      }) }),
+      groups.map((group) => /* @__PURE__ */ jsx4(
+        "div",
+        {
+          "aria-labelledby": `${tabsId}-tab-${group.id}`,
+          hidden: group.id !== activeGroupId,
+          id: `${tabsId}-panel-${group.id}`,
+          role: "tabpanel",
+          children: renderGroupFields(group)
+        },
+        group.id
+      ))
+    ] }) : groups.map((group) => /* @__PURE__ */ jsxs4("fieldset", { className: "builder-fieldset", children: [
       group.title ? /* @__PURE__ */ jsx4("legend", { children: group.title }) : null,
-      /* @__PURE__ */ jsx4("div", { className: "builder-form-grid", children: group.fields.map((item) => {
-        const field = fields.get(item.key);
-        if (!field) return null;
-        rendered.add(field.key);
-        return /* @__PURE__ */ jsx4("div", { style: { gridColumn: `span ${item.span}` }, children: /* @__PURE__ */ jsx4(ReadyField, { field, formId, viewId, parentValues }) }, field.key);
-      }) })
+      renderGroupFields(group)
     ] }, group.id)),
     /* @__PURE__ */ jsx4("div", { className: "builder-form-grid", children: schema.fields.filter((field) => !rendered.has(field.key)).map((field) => /* @__PURE__ */ jsx4("div", { style: { gridColumn: "span 12" }, children: /* @__PURE__ */ jsx4(ReadyField, { field, formId, viewId, parentValues }) }, field.key)) }),
     extraItems.map((item) => /* @__PURE__ */ jsx4("div", { children: item.render() }, item.key))
@@ -947,7 +989,7 @@ function ReadyFields({
 }
 
 // src/ready/ReadyOverlay.tsx
-import { useEffect as useEffect2, useId as useId2, useRef as useRef5, useState as useState3 } from "react";
+import { useEffect as useEffect2, useId as useId3, useRef as useRef5, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ReadyOverlay({
@@ -960,9 +1002,9 @@ function ReadyOverlay({
 }) {
   const panelRef = useRef5(null);
   const onCloseRef = useRef5(onClose);
-  const [portalRoot, setPortalRoot] = useState3(null);
+  const [portalRoot, setPortalRoot] = useState4(null);
   onCloseRef.current = onClose;
-  const titleId = useId2();
+  const titleId = useId3();
   useEffect2(() => {
     setPortalRoot(document.body);
   }, []);
@@ -1046,16 +1088,16 @@ function ReadyErrorState({ title, description }) {
 }
 
 // src/ready/ReadySubform.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef6, useState as useState5 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef6, useState as useState6 } from "react";
 import { FormProvider, useForm, useFormContext as useFormContext4, useWatch as useWatch4 } from "react-hook-form";
 
 // src/ready/ReadyTable.tsx
-import { useMemo as useMemo2, useState as useState4 } from "react";
+import { useMemo as useMemo2, useState as useState5 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function useReadyTableState({ pageSize = 20 } = {}) {
-  const [page, setPage] = useState4(1);
-  const [search, setSearchValue] = useState4("");
-  const [sort, setSort] = useState4();
+  const [page, setPage] = useState5(1);
+  const [search, setSearchValue] = useState5("");
+  const [sort, setSort] = useState5();
   return {
     query: { page, pageSize, search: search || void 0, sort },
     page,
@@ -1074,7 +1116,7 @@ function useReadyTableState({ pageSize = 20 } = {}) {
   };
 }
 function useReadyTable(args) {
-  const [selectedIds, setSelectedIds] = useState4([]);
+  const [selectedIds, setSelectedIds] = useState5([]);
   return useMemo2(
     () => ({
       ...args,
@@ -1210,8 +1252,8 @@ function ReadySubform({ subform, parentEntry, rows, onRowsChange }) {
   const parentForm = useFormContext4();
   const watchedParentValues = useWatch4({ control: parentForm.control, name: "values" });
   const parentValues = watchedParentValues && typeof watchedParentValues === "object" && !Array.isArray(watchedParentValues) ? watchedParentValues : void 0;
-  const [open, setOpen] = useState5(false);
-  const [editing, setEditing] = useState5(null);
+  const [open, setOpen] = useState6(false);
+  const [editing, setEditing] = useState6(null);
   const initialized = useRef6(false);
   const parentValue = linkedValue(parentEntry, subform.parentField);
   const viewQuery = hooks.useRuntimeBuilderView(subform.viewId, Boolean(subform.viewId));
@@ -1380,7 +1422,7 @@ function changedSubformPayloads(rows, includeIdentity) {
 }
 function BuilderEntryEditor({ view, editing, open, onClose }) {
   const { hooks, notify } = useBuilderRuntime();
-  const [subforms, setSubforms] = useState6({});
+  const [subforms, setSubforms] = useState7({});
   const isSubmittingRef = useRef7(false);
   const save = hooks.useSaveBuilderViewEntry(view.id);
   const createComposite = hooks.useCreateCompositeBuilderViewEntry(view.id);
@@ -1428,9 +1470,9 @@ function BuilderEntryEditor({ view, editing, open, onClose }) {
 }
 function DefaultBuilderView({ viewId }) {
   const { hooks, notify } = useBuilderRuntime();
-  const [editing, setEditing] = useState6(null);
-  const [editorOpen, setEditorOpen] = useState6(false);
-  const [pendingDelete, setPendingDelete] = useState6(null);
+  const [editing, setEditing] = useState7(null);
+  const [editorOpen, setEditorOpen] = useState7(false);
+  const [pendingDelete, setPendingDelete] = useState7(null);
   const viewQuery = hooks.useRuntimeBuilderView(viewId);
   const state = useReadyTableState();
   const entriesQuery = hooks.useBuilderViewEntries(viewId, state.query);
@@ -1698,6 +1740,7 @@ function builderFormEditorValuesFromEntity(form, emptyValues) {
     sourceTable: source?.type === "dbTable" ? source.tableName : BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: source?.type === "apiEndpoint" ? source.basePath : "",
     fields,
+    layoutPresentation: form.schema.layout?.presentation ?? "stacked",
     layoutGroups: normalizeBuilderFormEditorLayoutGroups(
       form.schema.layout?.groups,
       fields,
@@ -1817,6 +1860,7 @@ function builderFormEditorInputFromValues(values) {
         }))
       })),
       layout: {
+        presentation: values.layoutPresentation,
         groups: normalizeBuilderFormEditorLayoutGroups(
           values.layoutGroups,
           values.fields,
@@ -2210,6 +2254,13 @@ function createBuilderDefaultFormEditorBody(options) {
             }
           )
         ] }),
+        /* @__PURE__ */ jsx10("div", { style: styles.grid, children: /* @__PURE__ */ jsxs9("label", { style: styles.field, children: [
+          /* @__PURE__ */ jsx10("span", { style: styles.label, children: "Group presentation" }),
+          /* @__PURE__ */ jsxs9("select", { style: styles.input, ...form.register("layoutPresentation"), children: [
+            /* @__PURE__ */ jsx10("option", { value: "stacked", children: "Stacked sections" }),
+            /* @__PURE__ */ jsx10("option", { value: "tabs", children: "Tabs" })
+          ] })
+        ] }) }),
         form.watch("layoutGroups").map((group, groupIndex) => /* @__PURE__ */ jsxs9("div", { style: styles.row, children: [
           /* @__PURE__ */ jsxs9("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx10("span", { style: styles.label, children: "Group title" }),
@@ -2596,7 +2647,7 @@ function createBuilderDefaultListEditorBody(options) {
 }
 
 // src/admin/BuilderDefaultEntityManager.tsx
-import { useMemo as useMemo5, useState as useState7 } from "react";
+import { useMemo as useMemo5, useState as useState8 } from "react";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var styles2 = {
   page: {
@@ -2693,7 +2744,7 @@ var styles2 = {
 };
 function createBuilderDefaultEntityManagerComponent(deps) {
   return function BuilderDefaultEntityManager() {
-    const [state, setState] = useState7({
+    const [state, setState] = useState8({
       page: 1,
       pageSize: 20,
       search: ""
@@ -3267,6 +3318,7 @@ function createBuilderAdminPages({
     sourceTable: BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: "",
     fields: [emptyField],
+    layoutPresentation: "stacked",
     layoutGroups: builderFormEditorDefaultLayoutGroups([emptyField]),
     subforms: [],
     triggers: [],
@@ -3525,11 +3577,11 @@ function createBuilderAdminPages({
 }
 
 // src/admin/BuilderEntityManager.tsx
-import { useCallback as useCallback2, useMemo as useMemo6, useState as useState8 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo6, useState as useState9 } from "react";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function createBuilderEntityManagerComponent(deps) {
   return function BuilderEntityManager() {
-    const [pendingDelete, setPendingDelete] = useState8(null);
+    const [pendingDelete, setPendingDelete] = useState9(null);
     const state = deps.useDataTableState({ pageSize: 20 });
     const query = deps.hooks.useEntities(state.query);
     const remove = deps.hooks.useDelete();
@@ -3589,9 +3641,9 @@ function createBuilderEntityManagerComponent(deps) {
 }
 function createBuilderEntityDialogManagerComponent(deps) {
   return function BuilderEntityDialogManager() {
-    const [editing, setEditing] = useState8(null);
-    const [isEditorOpen, setEditorOpen] = useState8(false);
-    const [pendingDelete, setPendingDelete] = useState8(null);
+    const [editing, setEditing] = useState9(null);
+    const [isEditorOpen, setEditorOpen] = useState9(false);
+    const [pendingDelete, setPendingDelete] = useState9(null);
     const state = deps.useDataTableState({ pageSize: 20 });
     const query = deps.hooks.useEntities(state.query);
     const remove = deps.hooks.useDelete();
@@ -3961,7 +4013,7 @@ function createDynamicListComponent(deps) {
 }
 
 // src/components/DynamicView.tsx
-import { useMemo as useMemo10, useState as useState9 } from "react";
+import { useMemo as useMemo10, useState as useState10 } from "react";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var interactiveRowTargetSelector = "button,a,input,select,textarea,[role='button'],[role='menuitem'],[data-builder-row-action]";
 function hasClosest(target) {
@@ -3974,9 +4026,9 @@ function shouldHandleDynamicViewRowClick(event) {
 }
 function createDynamicViewComponent(deps) {
   return function DynamicView({ viewId }) {
-    const [editing, setEditing] = useState9(null);
-    const [isDialogOpen, setDialogOpen] = useState9(false);
-    const [pendingDelete, setPendingDelete] = useState9(null);
+    const [editing, setEditing] = useState10(null);
+    const [isDialogOpen, setDialogOpen] = useState10(false);
+    const [pendingDelete, setPendingDelete] = useState10(null);
     const viewQuery = deps.hooks.useRuntimeBuilderView(viewId);
     const state = deps.useDataTableState({ pageSize: 20 });
     const entriesQuery = deps.hooks.useBuilderViewEntries(viewId, state.query);
@@ -4070,7 +4122,7 @@ function createDynamicViewComponent(deps) {
 }
 
 // src/components/RuntimeEntryDialog.tsx
-import { useEffect as useEffect7, useMemo as useMemo11, useRef as useRef8, useState as useState10 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo11, useRef as useRef8, useState as useState11 } from "react";
 import { FormProvider as FormProvider6, useForm as useForm7 } from "react-hook-form";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function isDbTableSource(source) {
@@ -4111,7 +4163,7 @@ function createRuntimeEntryDialogComponent(deps) {
     onSave,
     isSaving
   }) {
-    const [draftSubforms, setDraftSubforms] = useState10({});
+    const [draftSubforms, setDraftSubforms] = useState11({});
     const isSubmittingRef = useRef8(false);
     const compositeCreate = deps.useCreateCompositeEntry?.(view.id);
     const compositeUpdate = deps.useUpdateCompositeEntry?.(view.id);
@@ -4302,7 +4354,7 @@ function validateBuilderFrontendSetup(config) {
 // src/index.ts
 var builderUiPackage = {
   name: "@duke333/builder-ui",
-  version: "0.2.4"
+  version: "0.2.5"
 };
 export {
   BUILDER_EDITOR_NONE_VALUE,