@duke333/builder-ui 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,12 +1,3 @@
-// src/admin/BuilderEditorPage.tsx
-import { useEffect } from "react";
-import {
-  FormProvider,
-  useFieldArray,
-  useForm,
-  useWatch
-} from "react-hook-form";
-
 // src/admin/editorState.ts
 var BUILDER_EDITOR_NONE_VALUE = "__none";
 function builderEditorOptionsToText(options) {
@@ -310,15 +301,976 @@ function builderViewEditorInputFromValues(values, parseTriggers) {
   };
 }
 
+// src/admin/BuilderDefaultEditorBodies.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = {
+  page: {
+    display: "grid",
+    gap: "1rem"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "1rem",
+    alignItems: "flex-start",
+    flexWrap: "wrap"
+  },
+  title: {
+    margin: 0,
+    fontSize: "1.5rem",
+    fontWeight: 650
+  },
+  description: {
+    margin: "0.25rem 0 0",
+    color: "var(--muted-foreground, #64748b)"
+  },
+  actions: {
+    display: "flex",
+    gap: "0.5rem",
+    flexWrap: "wrap"
+  },
+  section: {
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.5rem",
+    background: "var(--background, #fff)",
+    overflow: "hidden"
+  },
+  sectionHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "1rem",
+    alignItems: "center",
+    padding: "0.75rem",
+    borderBottom: "1px solid var(--border, #d4d4d8)",
+    flexWrap: "wrap"
+  },
+  sectionTitle: {
+    margin: 0,
+    fontSize: "1rem",
+    fontWeight: 650
+  },
+  grid: {
+    display: "grid",
+    gap: "0.75rem",
+    padding: "0.75rem"
+  },
+  twoColumn: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(14rem, 1fr))",
+    gap: "0.75rem"
+  },
+  row: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(10rem, 1fr))",
+    gap: "0.5rem",
+    padding: "0.75rem",
+    borderBottom: "1px solid var(--border, #d4d4d8)"
+  },
+  field: {
+    display: "grid",
+    gap: "0.25rem",
+    fontSize: "0.875rem"
+  },
+  label: {
+    color: "var(--muted-foreground, #64748b)",
+    fontSize: "0.75rem",
+    fontWeight: 600
+  },
+  input: {
+    minWidth: 0,
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.375rem",
+    padding: "0.5rem 0.625rem",
+    background: "var(--background, #fff)",
+    color: "inherit"
+  },
+  textarea: {
+    minWidth: 0,
+    minHeight: "5rem",
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.375rem",
+    padding: "0.5rem 0.625rem",
+    background: "var(--background, #fff)",
+    color: "inherit",
+    resize: "vertical"
+  },
+  checkboxField: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    fontSize: "0.875rem",
+    minHeight: "2.25rem"
+  },
+  button: {
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.375rem",
+    background: "var(--background, #fff)",
+    color: "inherit",
+    cursor: "pointer",
+    padding: "0.5rem 0.75rem",
+    textDecoration: "none",
+    fontSize: "0.875rem"
+  },
+  primaryButton: {
+    border: "1px solid var(--primary, #18181b)",
+    borderRadius: "0.375rem",
+    background: "var(--primary, #18181b)",
+    color: "var(--primary-foreground, #fff)",
+    cursor: "pointer",
+    padding: "0.5rem 0.75rem",
+    textDecoration: "none",
+    fontSize: "0.875rem"
+  }
+};
+function optionItems(options) {
+  return options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value));
+}
+function createBuilderDefaultFormEditorBody(options) {
+  return function BuilderDefaultFormEditorBody({
+    formId,
+    form,
+    fieldArray,
+    subformArray,
+    triggerArray,
+    fields,
+    sourceType,
+    sourceTable,
+    tables,
+    emptyField,
+    emptyTrigger,
+    isSaving,
+    importFieldsFromTable
+  }) {
+    return /* @__PURE__ */ jsxs("div", { style: styles.page, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { style: styles.title, children: formId ? "Edit Dynamic Form" : "New Dynamic Form" }),
+          /* @__PURE__ */ jsx("p", { style: styles.description, children: "Configure fields, source mapping, layout, and triggers." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+          /* @__PURE__ */ jsx("a", { href: options.backHref, style: styles.button, children: "Cancel" }),
+          /* @__PURE__ */ jsx("button", { type: "submit", disabled: isSaving, style: styles.primaryButton, children: isSaving ? "Saving..." : "Save" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsx("div", { style: styles.sectionHeader, children: /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "Details" }) }),
+        /* @__PURE__ */ jsxs("div", { style: { ...styles.grid, ...styles.twoColumn }, children: [
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Title" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register("title", { required: true }) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Description" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register("description") })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Datasource" }),
+            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("sourceType"), children: [
+              /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
+              /* @__PURE__ */ jsx("option", { value: "dbTable", children: "DB table" }),
+              /* @__PURE__ */ jsx("option", { value: "apiEndpoint", children: "API endpoint" })
+            ] })
+          ] }),
+          sourceType === "dbTable" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Table" }),
+            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("sourceTable"), children: [
+              /* @__PURE__ */ jsx("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
+              tables.map((table) => /* @__PURE__ */ jsx("option", { value: table.name, children: table.label ?? table.name }, table.name))
+            ] })
+          ] }) : null,
+          sourceType === "apiEndpoint" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "API base path" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register("apiBasePath") })
+          ] }) : null,
+          sourceType === "dbTable" ? /* @__PURE__ */ jsx("div", { style: { ...styles.field, justifyContent: "end" }, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              disabled: sourceTable === BUILDER_EDITOR_NONE_VALUE,
+              onClick: importFieldsFromTable,
+              children: "Import fields"
+            }
+          ) }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "Fields" }),
+            /* @__PURE__ */ jsx("p", { style: styles.description, children: "Runtime form inputs." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => {
+                const key = `field${fieldArray.fields.length + 1}`;
+                fieldArray.append({
+                  ...emptyField,
+                  key,
+                  label: `Field ${fieldArray.fields.length + 1}`,
+                  type: options.fieldTypeOptions[0]?.value
+                });
+              },
+              children: "Add field"
+            }
+          )
+        ] }),
+        fieldArray.fields.map((field, index) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Key" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`fields.${index}.key`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Label" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`fields.${index}.label`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Type" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                style: styles.input,
+                ...form.register(`fields.${index}.type`),
+                children: optionItems(options.fieldTypeOptions)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`fields.${index}.required`) }),
+            "Required"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`fields.${index}.hidden`) }),
+            "Hidden"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`fields.${index}.disabled`) }),
+            "Disabled"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Placeholder" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`fields.${index}.placeholder`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Static options" }),
+            /* @__PURE__ */ jsx("textarea", { style: styles.textarea, ...form.register(`fields.${index}.optionsText`) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: styles.actions, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => fieldArray.remove(index),
+              disabled: fieldArray.fields.length <= 1,
+              children: "Remove"
+            }
+          ) })
+        ] }, field.id))
+      ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "Layout" }),
+            /* @__PURE__ */ jsx("p", { style: styles.description, children: "Default layout can be regenerated from current fields." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => form.setValue("layoutGroups", builderFormEditorDefaultLayoutGroups(fields), {
+                shouldDirty: true
+              }),
+              children: "Reset layout"
+            }
+          )
+        ] }),
+        form.watch("layoutGroups").map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Group title" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`layoutGroups.${groupIndex}.title`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Columns" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                style: styles.input,
+                value: group.columns,
+                onChange: (event) => form.setValue(
+                  `layoutGroups.${groupIndex}.columns`,
+                  Number(event.target.value),
+                  { shouldDirty: true }
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: 6, children: "6" }),
+                  /* @__PURE__ */ jsx("option", { value: 8, children: "8" }),
+                  /* @__PURE__ */ jsx("option", { value: 12, children: "12" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Fields" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: styles.input,
+                value: group.fields.map((item) => item.key).join(", "),
+                readOnly: true
+              }
+            )
+          ] })
+        ] }, group.id))
+      ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "Subforms" }),
+            /* @__PURE__ */ jsx("p", { style: styles.description, children: "Optional nested runtime view bindings." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => subformArray.append({
+                key: `subform${subformArray.fields.length + 1}`,
+                label: `Subform ${subformArray.fields.length + 1}`,
+                viewId: BUILDER_EDITOR_NONE_VALUE,
+                parentField: "id",
+                childField: "parentId",
+                buttonLabel: "",
+                icon: ""
+              }),
+              children: "Add subform"
+            }
+          )
+        ] }),
+        subformArray.fields.map((subform, index) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Key" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`subforms.${index}.key`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Label" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`subforms.${index}.label`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "View ID" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`subforms.${index}.viewId`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Parent field" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`subforms.${index}.parentField`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Child field" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`subforms.${index}.childField`) })
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: styles.button, onClick: () => subformArray.remove(index), children: "Remove" })
+        ] }, subform.id))
+      ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "Form Triggers" }),
+            /* @__PURE__ */ jsx("p", { style: styles.description, children: "Optional API callbacks for lifecycle events." })
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: styles.button, onClick: () => triggerArray.append(emptyTrigger), children: "Add trigger" })
+        ] }),
+        triggerArray.fields.map((trigger, index) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Event" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                style: styles.input,
+                ...form.register(
+                  `triggers.${index}.event`
+                ),
+                children: optionItems(options.formTriggerEventOptions)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Route" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`triggers.${index}.route`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`triggers.${index}.enabled`) }),
+            "Enabled"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`triggers.${index}.blocking`) }),
+            "Blocking"
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: styles.button, onClick: () => triggerArray.remove(index), children: "Remove" })
+        ] }, trigger.id))
+      ] })
+    ] });
+  };
+}
+function createBuilderDefaultListEditorBody(options) {
+  return function BuilderDefaultListEditorBody({
+    listId,
+    form,
+    columnArray,
+    triggerArray,
+    sourceType,
+    sourceTable,
+    tables,
+    emptyColumn,
+    emptyTrigger,
+    isSaving,
+    importColumnsFromTable
+  }) {
+    return /* @__PURE__ */ jsxs("div", { style: styles.page, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { style: styles.title, children: listId ? "Edit Dynamic List" : "New Dynamic List" }),
+          /* @__PURE__ */ jsx("p", { style: styles.description, children: "Configure list columns, source mapping, and triggers." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+          /* @__PURE__ */ jsx("a", { href: options.backHref, style: styles.button, children: "Cancel" }),
+          /* @__PURE__ */ jsx("button", { type: "submit", disabled: isSaving, style: styles.primaryButton, children: isSaving ? "Saving..." : "Save" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsx("div", { style: styles.sectionHeader, children: /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "Details" }) }),
+        /* @__PURE__ */ jsxs("div", { style: { ...styles.grid, ...styles.twoColumn }, children: [
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Title" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register("title", { required: true }) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Description" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register("description") })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Datasource" }),
+            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("sourceType"), children: [
+              /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
+              /* @__PURE__ */ jsx("option", { value: "dbTable", children: "DB table" }),
+              /* @__PURE__ */ jsx("option", { value: "apiEndpoint", children: "API endpoint" })
+            ] })
+          ] }),
+          sourceType === "dbTable" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Table" }),
+            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("sourceTable"), children: [
+              /* @__PURE__ */ jsx("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
+              tables.map((table) => /* @__PURE__ */ jsx("option", { value: table.name, children: table.label ?? table.name }, table.name))
+            ] })
+          ] }) : null,
+          sourceType === "apiEndpoint" ? /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "API base path" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register("apiBasePath") })
+          ] }) : null,
+          sourceType === "dbTable" ? /* @__PURE__ */ jsx("div", { style: { ...styles.field, justifyContent: "end" }, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              disabled: sourceTable === BUILDER_EDITOR_NONE_VALUE,
+              onClick: importColumnsFromTable,
+              children: "Import columns"
+            }
+          ) }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "Columns" }),
+            /* @__PURE__ */ jsx("p", { style: styles.description, children: "Runtime list columns." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => columnArray.append({
+                ...emptyColumn,
+                key: `field${columnArray.fields.length + 1}`,
+                label: `Column ${columnArray.fields.length + 1}`
+              }),
+              children: "Add column"
+            }
+          )
+        ] }),
+        columnArray.fields.map((column, index) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Key" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`columns.${index}.key`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Label" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`columns.${index}.label`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Align" }),
+            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register(`columns.${index}.align`), children: [
+              /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+              /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`columns.${index}.sortable`) }),
+            "Sortable"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => columnArray.remove(index),
+              disabled: columnArray.fields.length <= 1,
+              children: "Remove"
+            }
+          )
+        ] }, column.id))
+      ] }),
+      /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: "List Triggers" }),
+            /* @__PURE__ */ jsx("p", { style: styles.description, children: "Optional API callbacks for list lifecycle events." })
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: styles.button, onClick: () => triggerArray.append(emptyTrigger), children: "Add trigger" })
+        ] }),
+        triggerArray.fields.map((trigger, index) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Event" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                style: styles.input,
+                ...form.register(
+                  `triggers.${index}.event`
+                ),
+                children: optionItems(options.listTriggerEventOptions)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Route" }),
+            /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`triggers.${index}.route`) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`triggers.${index}.enabled`) }),
+            "Enabled"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", ...form.register(`triggers.${index}.blocking`) }),
+            "Blocking"
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: styles.button, onClick: () => triggerArray.remove(index), children: "Remove" })
+        ] }, trigger.id))
+      ] })
+    ] });
+  };
+}
+
+// src/admin/BuilderDefaultEntityManager.tsx
+import { useMemo, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var styles2 = {
+  page: {
+    display: "grid",
+    gap: "1rem"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "1rem",
+    alignItems: "flex-start",
+    flexWrap: "wrap"
+  },
+  title: {
+    margin: 0,
+    fontSize: "1.5rem",
+    fontWeight: 650
+  },
+  description: {
+    margin: "0.25rem 0 0",
+    color: "var(--muted-foreground, #64748b)"
+  },
+  button: {
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.375rem",
+    background: "var(--background, #fff)",
+    color: "inherit",
+    cursor: "pointer",
+    padding: "0.5rem 0.75rem",
+    textDecoration: "none",
+    fontSize: "0.875rem"
+  },
+  primaryButton: {
+    border: "1px solid var(--primary, #18181b)",
+    borderRadius: "0.375rem",
+    background: "var(--primary, #18181b)",
+    color: "var(--primary-foreground, #fff)",
+    cursor: "pointer",
+    padding: "0.5rem 0.75rem",
+    textDecoration: "none",
+    fontSize: "0.875rem"
+  },
+  card: {
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.5rem",
+    overflow: "hidden",
+    background: "var(--background, #fff)"
+  },
+  toolbar: {
+    padding: "0.75rem",
+    borderBottom: "1px solid var(--border, #d4d4d8)"
+  },
+  input: {
+    width: "100%",
+    maxWidth: "24rem",
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.375rem",
+    padding: "0.5rem 0.75rem",
+    background: "var(--background, #fff)",
+    color: "inherit"
+  },
+  tableWrap: {
+    overflowX: "auto"
+  },
+  table: {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "0.875rem"
+  },
+  th: {
+    padding: "0.75rem",
+    borderBottom: "1px solid var(--border, #d4d4d8)",
+    textAlign: "left",
+    color: "var(--muted-foreground, #64748b)",
+    fontWeight: 600,
+    whiteSpace: "nowrap"
+  },
+  td: {
+    padding: "0.75rem",
+    borderBottom: "1px solid var(--border, #d4d4d8)",
+    verticalAlign: "top"
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "0.5rem",
+    flexWrap: "wrap"
+  },
+  empty: {
+    padding: "2rem",
+    textAlign: "center",
+    color: "var(--muted-foreground, #64748b)"
+  }
+};
+function createBuilderDefaultEntityManagerComponent(deps) {
+  return function BuilderDefaultEntityManager() {
+    const [state, setState] = useState({
+      page: 1,
+      pageSize: 20,
+      search: ""
+    });
+    const query = deps.hooks.useEntities(useMemo(() => deps.buildQuery(state), [state]));
+    const remove = deps.hooks.useDelete();
+    const replicate = deps.hooks.useReplicate();
+    const items = query.data?.items ?? [];
+    const onReplicate = async (entity) => {
+      const title = window.prompt(
+        deps.labels.replicatePrompt(entity),
+        deps.labels.replicateDefaultTitle(entity)
+      );
+      if (!title) return;
+      await replicate.mutateAsync({ id: entity.id, input: { title } });
+    };
+    const onDelete = async (entity) => {
+      if (!window.confirm(deps.labels.deleteConfirm(entity))) return;
+      await remove.mutateAsync(entity.id);
+    };
+    return /* @__PURE__ */ jsxs2("section", { style: styles2.page, children: [
+      /* @__PURE__ */ jsxs2("div", { style: styles2.header, children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("h1", { style: styles2.title, children: deps.labels.title }),
+          /* @__PURE__ */ jsx2("p", { style: styles2.description, children: deps.labels.description })
+        ] }),
+        deps.createHref ? /* @__PURE__ */ jsx2("a", { href: deps.createHref, style: styles2.primaryButton, children: deps.labels.addLabel }) : null
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: styles2.card, children: [
+        /* @__PURE__ */ jsx2("div", { style: styles2.toolbar, children: /* @__PURE__ */ jsx2(
+          "input",
+          {
+            style: styles2.input,
+            placeholder: deps.labels.searchPlaceholder,
+            value: state.search,
+            onChange: (event) => setState((current) => ({ ...current, page: 1, search: event.target.value }))
+          }
+        ) }),
+        /* @__PURE__ */ jsx2("div", { style: styles2.tableWrap, children: /* @__PURE__ */ jsxs2("table", { style: styles2.table, children: [
+          /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+            /* @__PURE__ */ jsx2("th", { style: styles2.th, children: deps.labels.title }),
+            /* @__PURE__ */ jsx2("th", { style: styles2.th, children: "Detail" }),
+            /* @__PURE__ */ jsx2("th", { style: styles2.th, children: "Description" }),
+            /* @__PURE__ */ jsx2("th", { style: { ...styles2.th, textAlign: "right" }, children: "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx2("tbody", { children: items.map((entity) => /* @__PURE__ */ jsxs2("tr", { children: [
+            /* @__PURE__ */ jsx2("td", { style: styles2.td, children: /* @__PURE__ */ jsx2("a", { href: deps.editHref(entity), children: entity.title }) }),
+            /* @__PURE__ */ jsx2("td", { style: styles2.td, children: deps.getDetail?.(entity) ?? "-" }),
+            /* @__PURE__ */ jsx2("td", { style: styles2.td, children: entity.description || "-" }),
+            /* @__PURE__ */ jsx2("td", { style: styles2.td, children: /* @__PURE__ */ jsxs2("div", { style: styles2.actions, children: [
+              deps.runtimeHref ? /* @__PURE__ */ jsx2("a", { href: deps.runtimeHref(entity), style: styles2.button, children: deps.labels.runtimeLabel }) : null,
+              /* @__PURE__ */ jsx2("a", { href: deps.editHref(entity), style: styles2.button, children: deps.labels.editLabel }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  style: styles2.button,
+                  onClick: () => void onReplicate(entity),
+                  children: deps.labels.replicateLabel
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  style: styles2.button,
+                  disabled: remove.isPending,
+                  onClick: () => void onDelete(entity),
+                  children: deps.labels.deleteLabel
+                }
+              )
+            ] }) })
+          ] }, entity.id)) })
+        ] }) }),
+        query.isPending ? /* @__PURE__ */ jsx2("div", { style: styles2.empty, children: "Loading..." }) : null,
+        query.isError ? /* @__PURE__ */ jsx2("div", { style: styles2.empty, children: "Failed to load." }) : null,
+        !query.isPending && !query.isError && items.length === 0 ? /* @__PURE__ */ jsxs2("div", { style: styles2.empty, children: [
+          /* @__PURE__ */ jsx2("strong", { children: deps.labels.emptyTitle }),
+          /* @__PURE__ */ jsx2("div", { children: deps.labels.emptyDescription })
+        ] }) : null
+      ] })
+    ] });
+  };
+}
+
+// src/admin/BuilderDefaultViewEditorPage.tsx
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var styles3 = {
+  page: {
+    display: "grid",
+    gap: "1rem"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "1rem",
+    alignItems: "flex-start",
+    flexWrap: "wrap"
+  },
+  title: {
+    margin: 0,
+    fontSize: "1.5rem",
+    fontWeight: 650
+  },
+  description: {
+    margin: "0.25rem 0 0",
+    color: "var(--muted-foreground, #64748b)"
+  },
+  actions: {
+    display: "flex",
+    gap: "0.5rem",
+    flexWrap: "wrap"
+  },
+  section: {
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.5rem",
+    background: "var(--background, #fff)",
+    overflow: "hidden"
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(14rem, 1fr))",
+    gap: "0.75rem",
+    padding: "0.75rem"
+  },
+  field: {
+    display: "grid",
+    gap: "0.25rem",
+    fontSize: "0.875rem"
+  },
+  label: {
+    color: "var(--muted-foreground, #64748b)",
+    fontSize: "0.75rem",
+    fontWeight: 600
+  },
+  input: {
+    minWidth: 0,
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.375rem",
+    padding: "0.5rem 0.625rem",
+    background: "var(--background, #fff)",
+    color: "inherit"
+  },
+  textarea: {
+    minWidth: 0,
+    minHeight: "8rem",
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.375rem",
+    padding: "0.5rem 0.625rem",
+    background: "var(--background, #fff)",
+    color: "inherit",
+    resize: "vertical"
+  },
+  button: {
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.375rem",
+    background: "var(--background, #fff)",
+    color: "inherit",
+    cursor: "pointer",
+    padding: "0.5rem 0.75rem",
+    textDecoration: "none",
+    fontSize: "0.875rem"
+  },
+  primaryButton: {
+    border: "1px solid var(--primary, #18181b)",
+    borderRadius: "0.375rem",
+    background: "var(--primary, #18181b)",
+    color: "var(--primary-foreground, #fff)",
+    cursor: "pointer",
+    padding: "0.5rem 0.75rem",
+    textDecoration: "none",
+    fontSize: "0.875rem"
+  },
+  state: {
+    color: "var(--muted-foreground, #64748b)",
+    fontSize: "0.875rem"
+  }
+};
+var defaultEmptyValues = {
+  title: "",
+  description: "",
+  formId: BUILDER_EDITOR_NONE_VALUE,
+  listId: BUILDER_EDITOR_NONE_VALUE,
+  permissionRead: "org:manage",
+  permissionWrite: "org:manage",
+  triggersText: "[]",
+  version: 0
+};
+function createBuilderDefaultViewEditorPage(options) {
+  return function BuilderDefaultViewEditorPage({ viewId }) {
+    const view = options.hooks.useBuilderView(viewId);
+    const forms = options.hooks.useBuilderFormOptions();
+    const lists = options.hooks.useBuilderListOptions();
+    const save = options.hooks.useSaveBuilderView();
+    const form = useForm({
+      defaultValues: { ...defaultEmptyValues, permissionRead: options.defaultPermission, permissionWrite: options.defaultPermission }
+    });
+    useEffect(() => {
+      if (viewId && !view.data) return;
+      form.reset(
+        builderViewEditorValuesFromEntity(
+          view.data ?? null,
+          { ...defaultEmptyValues, permissionRead: options.defaultPermission, permissionWrite: options.defaultPermission },
+          options.defaultPermission
+        )
+      );
+    }, [form, view.data, viewId]);
+    const onSubmit = form.handleSubmit(async (values) => {
+      try {
+        const input = builderViewEditorInputFromValues(values, options.parseTriggers);
+        const saved = await save.mutateAsync({
+          id: viewId,
+          input
+        });
+        options.notifySuccess?.(viewId ? "View saved" : "View created");
+        if (!viewId) {
+          window.location.assign(options.editHref(saved.id));
+        }
+      } catch (error) {
+        if (options.notifyError) options.notifyError(error);
+        else throw error;
+      }
+    });
+    if (viewId && view.isPending) {
+      return /* @__PURE__ */ jsx3("div", { style: styles3.state, children: "Loading..." });
+    }
+    if (viewId && view.isError) {
+      return /* @__PURE__ */ jsx3("div", { style: styles3.state, children: "Failed to load view." });
+    }
+    return /* @__PURE__ */ jsxs3("form", { onSubmit, noValidate: true, style: styles3.page, children: [
+      /* @__PURE__ */ jsxs3("div", { style: styles3.header, children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx3("h1", { style: styles3.title, children: viewId ? "Edit Dynamic View" : "New Dynamic View" }),
+          /* @__PURE__ */ jsx3("p", { style: styles3.description, children: "Connect a form and list into a runtime screen." })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: styles3.actions, children: [
+          /* @__PURE__ */ jsx3("a", { href: options.backHref, style: styles3.button, children: "Cancel" }),
+          /* @__PURE__ */ jsx3("button", { type: "submit", disabled: save.isPending, style: styles3.primaryButton, children: save.isPending ? "Saving..." : "Save" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3("section", { style: styles3.section, children: /* @__PURE__ */ jsxs3("div", { style: styles3.grid, children: [
+        /* @__PURE__ */ jsxs3("label", { style: styles3.field, children: [
+          /* @__PURE__ */ jsx3("span", { style: styles3.label, children: "Title" }),
+          /* @__PURE__ */ jsx3("input", { style: styles3.input, ...form.register("title", { required: true }) })
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { style: styles3.field, children: [
+          /* @__PURE__ */ jsx3("span", { style: styles3.label, children: "Description" }),
+          /* @__PURE__ */ jsx3("input", { style: styles3.input, ...form.register("description") })
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { style: styles3.field, children: [
+          /* @__PURE__ */ jsx3("span", { style: styles3.label, children: "Form" }),
+          /* @__PURE__ */ jsxs3("select", { style: styles3.input, ...form.register("formId"), children: [
+            /* @__PURE__ */ jsx3("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "No form" }),
+            (forms.data ?? []).map((item) => /* @__PURE__ */ jsx3("option", { value: item.id, children: item.title }, item.id))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { style: styles3.field, children: [
+          /* @__PURE__ */ jsx3("span", { style: styles3.label, children: "List" }),
+          /* @__PURE__ */ jsxs3("select", { style: styles3.input, ...form.register("listId"), children: [
+            /* @__PURE__ */ jsx3("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "No list" }),
+            (lists.data ?? []).map((item) => /* @__PURE__ */ jsx3("option", { value: item.id, children: item.title }, item.id))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { style: styles3.field, children: [
+          /* @__PURE__ */ jsx3("span", { style: styles3.label, children: "Read permission" }),
+          /* @__PURE__ */ jsx3("select", { style: styles3.input, ...form.register("permissionRead"), children: options.permissionOptions.map((permission) => /* @__PURE__ */ jsx3("option", { value: permission.value, children: permission.label }, permission.value)) })
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { style: styles3.field, children: [
+          /* @__PURE__ */ jsx3("span", { style: styles3.label, children: "Write permission" }),
+          /* @__PURE__ */ jsx3("select", { style: styles3.input, ...form.register("permissionWrite"), children: options.permissionOptions.map((permission) => /* @__PURE__ */ jsx3("option", { value: permission.value, children: permission.label }, permission.value)) })
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { style: { ...styles3.field, gridColumn: "1 / -1" }, children: [
+          /* @__PURE__ */ jsx3("span", { style: styles3.label, children: "Triggers JSON" }),
+          /* @__PURE__ */ jsx3("textarea", { style: styles3.textarea, ...form.register("triggersText") })
+        ] })
+      ] }) })
+    ] });
+  };
+}
+
 // src/admin/BuilderEditorPage.tsx
-import { jsx } from "react/jsx-runtime";
+import { useEffect as useEffect2 } from "react";
+import {
+  FormProvider,
+  useFieldArray,
+  useForm as useForm2,
+  useWatch
+} from "react-hook-form";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function createBuilderFormEditorPageComponent(deps) {
   return function BuilderFormEditorPage({ formId }) {
     const Body = deps.Body;
     const entityQuery = deps.hooks.useEntity(formId);
     const tables = deps.hooks.useTables();
     const save = deps.hooks.useSave();
-    const form = useForm({
+    const form = useForm2({
       resolver: deps.resolver,
       defaultValues: deps.emptyValues
     });
@@ -329,7 +1281,7 @@ function createBuilderFormEditorPageComponent(deps) {
     const subforms = useWatch({ control: form.control, name: "subforms" }) ?? [];
     const sourceType = useWatch({ control: form.control, name: "sourceType" });
     const sourceTable = useWatch({ control: form.control, name: "sourceTable" });
-    useEffect(() => {
+    useEffect2(() => {
       if (formId && !entityQuery.data) return;
       form.reset(builderFormEditorValuesFromEntity(entityQuery.data ?? null, deps.emptyValues));
     }, [entityQuery.data, form, formId]);
@@ -352,12 +1304,12 @@ function createBuilderFormEditorPageComponent(deps) {
       }
     });
     if (formId && entityQuery.isPending) {
-      return /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: deps.states.loading });
+      return /* @__PURE__ */ jsx4("div", { className: "text-muted-foreground text-sm", children: deps.states.loading });
     }
     if (formId && entityQuery.isError) {
-      return /* @__PURE__ */ jsx("div", { className: "text-destructive text-sm", children: deps.states.error });
+      return /* @__PURE__ */ jsx4("div", { className: "text-destructive text-sm", children: deps.states.error });
     }
-    return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, noValidate: true, className: "space-y-6", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx4(FormProvider, { ...form, children: /* @__PURE__ */ jsx4("form", { onSubmit, noValidate: true, className: "space-y-6", children: /* @__PURE__ */ jsx4(
       Body,
       {
         formId,
@@ -384,7 +1336,7 @@ function createBuilderListEditorPageComponent(deps) {
     const entityQuery = deps.hooks.useEntity(listId);
     const tables = deps.hooks.useTables();
     const save = deps.hooks.useSave();
-    const form = useForm({
+    const form = useForm2({
       resolver: deps.resolver,
       defaultValues: deps.emptyValues
     });
@@ -392,7 +1344,7 @@ function createBuilderListEditorPageComponent(deps) {
     const triggerArray = useFieldArray({ control: form.control, name: "triggers" });
     const sourceType = useWatch({ control: form.control, name: "sourceType" });
     const sourceTable = useWatch({ control: form.control, name: "sourceTable" });
-    useEffect(() => {
+    useEffect2(() => {
       if (listId && !entityQuery.data) return;
       form.reset(builderListEditorValuesFromEntity(entityQuery.data ?? null, deps.emptyValues));
     }, [entityQuery.data, form, listId]);
@@ -411,12 +1363,12 @@ function createBuilderListEditorPageComponent(deps) {
       }
     });
     if (listId && entityQuery.isPending) {
-      return /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: deps.states.loading });
+      return /* @__PURE__ */ jsx4("div", { className: "text-muted-foreground text-sm", children: deps.states.loading });
     }
     if (listId && entityQuery.isError) {
-      return /* @__PURE__ */ jsx("div", { className: "text-destructive text-sm", children: deps.states.error });
+      return /* @__PURE__ */ jsx4("div", { className: "text-destructive text-sm", children: deps.states.error });
     }
-    return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, noValidate: true, className: "space-y-6", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx4(FormProvider, { ...form, children: /* @__PURE__ */ jsx4("form", { onSubmit, noValidate: true, className: "space-y-6", children: /* @__PURE__ */ jsx4(
       Body,
       {
         listId,
@@ -435,17 +1387,405 @@ function createBuilderListEditorPageComponent(deps) {
   };
 }
 
+// src/admin/BuilderAdminPages.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var defaultFieldTypeOptions = [
+  { value: "text", label: "Text" },
+  { value: "textarea", label: "Textarea" },
+  { value: "number", label: "Number" },
+  { value: "money", label: "Money" },
+  { value: "select", label: "Select" },
+  { value: "checkbox", label: "Checkbox" },
+  { value: "date", label: "Date" }
+];
+var defaultFormTriggerEventOptions = [
+  { value: "beforeCreate", label: "Before create" },
+  { value: "afterCreate", label: "After create" },
+  { value: "beforeUpdate", label: "Before update" },
+  { value: "afterUpdate", label: "After update" }
+];
+var defaultListTriggerEventOptions = [
+  { value: "beforeRead", label: "Before read" },
+  { value: "afterRead", label: "After read" },
+  { value: "beforeDelete", label: "Before delete" },
+  { value: "afterDelete", label: "After delete" }
+];
+var defaultFieldTriggerEventOptions = [
+  { value: "onChange", label: "On change" },
+  { value: "onBlur", label: "On blur" }
+];
+var defaultPermissionOptions = [{ value: "org:manage", label: "org:manage" }];
+function parseJsonArray(value) {
+  const parsed = JSON.parse(value);
+  return Array.isArray(parsed) ? parsed : [];
+}
+function joinPath(base, path) {
+  return `${base.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
+}
+function defaultQuery(state) {
+  return {
+    page: state.page,
+    pageSize: state.pageSize,
+    search: state.search || void 0
+  };
+}
+function detail(entity) {
+  return entity.key ?? entity.id;
+}
+var homeStyles = {
+  page: {
+    display: "grid",
+    gap: "1rem"
+  },
+  headerTitle: {
+    margin: 0,
+    fontSize: "1.5rem",
+    fontWeight: 650
+  },
+  description: {
+    margin: "0.25rem 0 0",
+    color: "var(--muted-foreground, #64748b)"
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(13rem, 1fr))",
+    gap: "0.75rem"
+  },
+  card: {
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: "0.5rem",
+    padding: "1rem",
+    background: "var(--background, #fff)",
+    color: "inherit",
+    textDecoration: "none"
+  },
+  cardTitle: {
+    margin: 0,
+    fontSize: "1rem",
+    fontWeight: 650
+  }
+};
+function createBuilderAdminPages({
+  hooks,
+  routes = {},
+  fieldTypeOptions = defaultFieldTypeOptions,
+  formTriggerEventOptions = defaultFormTriggerEventOptions,
+  listTriggerEventOptions = defaultListTriggerEventOptions,
+  fieldTriggerEventOptions = defaultFieldTriggerEventOptions,
+  permissionOptions = defaultPermissionOptions,
+  defaultPermission = "org:manage",
+  notifySuccess,
+  notifyError,
+  parseViewTriggers = parseJsonArray
+}) {
+  const adminBasePath = routes.adminBasePath ?? "/admin/dev/builder";
+  const runtimeBasePath = routes.runtimeBasePath ?? "/admin/winu";
+  const formsPath = routes.formsPath ?? joinPath(adminBasePath, "forms");
+  const newFormPath = routes.newFormPath ?? joinPath(formsPath, "new");
+  const editFormPath = routes.editFormPath ?? ((id) => `${joinPath(formsPath, "edit")}?id=${encodeURIComponent(id)}`);
+  const runtimeFormPath = routes.runtimeFormPath ?? ((id) => `${joinPath(runtimeBasePath, "form")}?id=${encodeURIComponent(id)}`);
+  const listsPath = routes.listsPath ?? joinPath(adminBasePath, "lists");
+  const newListPath = routes.newListPath ?? joinPath(listsPath, "new");
+  const editListPath = routes.editListPath ?? ((id) => `${joinPath(listsPath, "edit")}?id=${encodeURIComponent(id)}`);
+  const runtimeListPath = routes.runtimeListPath ?? ((id) => `${joinPath(runtimeBasePath, "list")}?id=${encodeURIComponent(id)}`);
+  const viewsPath = routes.viewsPath ?? joinPath(adminBasePath, "views");
+  const newViewPath = routes.newViewPath ?? joinPath(viewsPath, "new");
+  const editViewPath = routes.editViewPath ?? ((id) => `${joinPath(viewsPath, "edit")}?id=${encodeURIComponent(id)}`);
+  const runtimeViewPath = routes.runtimeViewPath ?? ((id) => `${joinPath(runtimeBasePath, "view")}?id=${encodeURIComponent(id)}`);
+  const formFieldType = fieldTypeOptions[0]?.value ?? "text";
+  const formTriggerEvent = formTriggerEventOptions[0]?.value ?? "beforeCreate";
+  const listTriggerEvent = listTriggerEventOptions[0]?.value ?? "beforeRead";
+  const emptyField = {
+    key: "name",
+    label: "Name",
+    type: formFieldType,
+    required: true,
+    hidden: false,
+    disabled: false,
+    placeholder: "",
+    optionsText: "",
+    optionsMode: "static",
+    optionsTable: BUILDER_EDITOR_NONE_VALUE,
+    optionsValueField: BUILDER_EDITOR_NONE_VALUE,
+    optionsLabelField: BUILDER_EDITOR_NONE_VALUE,
+    optionsSearchFieldsText: "",
+    optionsDependsOn: "",
+    optionsFilterField: "",
+    triggers: []
+  };
+  const emptyFormValues = {
+    title: "",
+    description: "",
+    sourceType: "none",
+    sourceTable: BUILDER_EDITOR_NONE_VALUE,
+    apiBasePath: "",
+    fields: [emptyField],
+    layoutGroups: builderFormEditorDefaultLayoutGroups([emptyField]),
+    subforms: [],
+    triggers: [],
+    version: 0
+  };
+  const emptyFormTrigger = {
+    event: formTriggerEvent,
+    route: "/api/v1/",
+    enabled: false,
+    blocking: true
+  };
+  const emptyColumn = {
+    key: "name",
+    label: "Name",
+    sortable: true,
+    align: "left"
+  };
+  const emptyListValues = {
+    title: "",
+    description: "",
+    sourceType: "none",
+    sourceTable: BUILDER_EDITOR_NONE_VALUE,
+    apiBasePath: "",
+    columns: [emptyColumn],
+    triggers: [],
+    version: 0
+  };
+  const emptyListTrigger = {
+    event: listTriggerEvent,
+    route: "/api/v1/",
+    enabled: false,
+    blocking: true
+  };
+  const FormEditorPage = createBuilderFormEditorPageComponent({
+    emptyValues: emptyFormValues,
+    emptyField,
+    emptyTrigger: emptyFormTrigger,
+    labels: {
+      created: "Form created",
+      saved: "Form saved"
+    },
+    states: {
+      loading: "Loading...",
+      error: "Failed to load form."
+    },
+    hooks: {
+      useEntity: hooks.useBuilderForm,
+      useTables: hooks.useBuilderDbTables,
+      useSave: hooks.useSaveBuilderForm
+    },
+    buildInput: (values) => builderFormEditorInputFromValues(values),
+    navigateAfterCreate: (entity) => window.location.assign(editFormPath(entity.id)),
+    notifications: {
+      success: (message) => notifySuccess?.(message),
+      error: (error) => {
+        if (notifyError) notifyError(error);
+        else throw error;
+      }
+    },
+    Body: createBuilderDefaultFormEditorBody({
+      backHref: formsPath,
+      fieldTypeOptions,
+      formTriggerEventOptions,
+      fieldTriggerEventOptions
+    })
+  });
+  const ListEditorPage = createBuilderListEditorPageComponent({
+    emptyValues: emptyListValues,
+    emptyColumn,
+    emptyTrigger: emptyListTrigger,
+    labels: {
+      created: "List created",
+      saved: "List saved"
+    },
+    states: {
+      loading: "Loading...",
+      error: "Failed to load list."
+    },
+    hooks: {
+      useEntity: hooks.useBuilderList,
+      useTables: hooks.useBuilderDbTables,
+      useSave: hooks.useSaveBuilderList
+    },
+    buildInput: (values) => builderListEditorInputFromValues(values),
+    navigateAfterCreate: (entity) => window.location.assign(editListPath(entity.id)),
+    notifications: {
+      success: (message) => notifySuccess?.(message),
+      error: (error) => {
+        if (notifyError) notifyError(error);
+        else throw error;
+      }
+    },
+    Body: createBuilderDefaultListEditorBody({
+      backHref: listsPath,
+      listTriggerEventOptions
+    })
+  });
+  const ViewEditorPage = createBuilderDefaultViewEditorPage({
+    hooks,
+    backHref: viewsPath,
+    editHref: editViewPath,
+    permissionOptions,
+    defaultPermission,
+    parseTriggers: parseViewTriggers,
+    notifySuccess,
+    notifyError
+  });
+  const AdminHomePage = function BuilderAdminHomePage() {
+    const items = [
+      {
+        title: "Dynamic Forms",
+        description: "Reusable form schemas.",
+        href: formsPath
+      },
+      {
+        title: "Dynamic Lists",
+        description: "Reusable list and grid schemas.",
+        href: listsPath
+      },
+      {
+        title: "Dynamic Views",
+        description: "Runtime screens composed from form and list schemas.",
+        href: viewsPath
+      }
+    ];
+    return /* @__PURE__ */ jsxs4("section", { style: homeStyles.page, children: [
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx5("h1", { style: homeStyles.headerTitle, children: "Builder" }),
+        /* @__PURE__ */ jsx5("p", { style: homeStyles.description, children: "Manage dynamic forms, lists, and views." })
+      ] }),
+      /* @__PURE__ */ jsx5("div", { style: homeStyles.grid, children: items.map((item) => /* @__PURE__ */ jsxs4("a", { href: item.href, style: homeStyles.card, children: [
+        /* @__PURE__ */ jsx5("h2", { style: homeStyles.cardTitle, children: item.title }),
+        /* @__PURE__ */ jsx5("p", { style: homeStyles.description, children: item.description })
+      ] }, item.href)) })
+    ] });
+  };
+  const AdminFormsPage = createBuilderDefaultEntityManagerComponent({
+    labels: {
+      title: "Dynamic Forms",
+      description: "Reusable form schemas.",
+      searchPlaceholder: "Search forms...",
+      emptyTitle: "No forms",
+      emptyDescription: "Create your first dynamic form.",
+      addLabel: "Add form",
+      editLabel: "Edit",
+      replicateLabel: "Replicate",
+      deleteLabel: "Delete",
+      runtimeLabel: "Open",
+      deleteConfirm: (entity) => `Delete ${entity.title}?`,
+      replicatePrompt: () => "New form title",
+      replicateDefaultTitle: (entity) => `${entity.title} copy`
+    },
+    createHref: newFormPath,
+    editHref: (entity) => editFormPath(entity.id),
+    runtimeHref: (entity) => runtimeFormPath(entity.id),
+    getDetail: detail,
+    buildQuery: (state) => defaultQuery(state),
+    hooks: {
+      useEntities: (query) => hooks.useBuilderForms(query),
+      useDelete: hooks.useDeleteBuilderForm,
+      useReplicate: hooks.useReplicateBuilderForm
+    }
+  });
+  const AdminListsPage = createBuilderDefaultEntityManagerComponent({
+    labels: {
+      title: "Dynamic Lists",
+      description: "Reusable list and grid schemas.",
+      searchPlaceholder: "Search lists...",
+      emptyTitle: "No lists",
+      emptyDescription: "Create your first dynamic list.",
+      addLabel: "Add list",
+      editLabel: "Edit",
+      replicateLabel: "Replicate",
+      deleteLabel: "Delete",
+      runtimeLabel: "Open",
+      deleteConfirm: (entity) => `Delete ${entity.title}?`,
+      replicatePrompt: () => "New list title",
+      replicateDefaultTitle: (entity) => `${entity.title} copy`
+    },
+    createHref: newListPath,
+    editHref: (entity) => editListPath(entity.id),
+    runtimeHref: (entity) => runtimeListPath(entity.id),
+    getDetail: detail,
+    buildQuery: (state) => defaultQuery(state),
+    hooks: {
+      useEntities: (query) => hooks.useBuilderLists(query),
+      useDelete: hooks.useDeleteBuilderList,
+      useReplicate: hooks.useReplicateBuilderList
+    }
+  });
+  const AdminViewsPage = createBuilderDefaultEntityManagerComponent({
+    labels: {
+      title: "Dynamic Views",
+      description: "Runtime screens composed from form and list schemas.",
+      searchPlaceholder: "Search views...",
+      emptyTitle: "No views",
+      emptyDescription: "Create a dynamic view after preparing a form and list.",
+      addLabel: "Add view",
+      editLabel: "Edit",
+      replicateLabel: "Replicate",
+      deleteLabel: "Delete",
+      runtimeLabel: "Open",
+      deleteConfirm: (entity) => `Delete ${entity.title}?`,
+      replicatePrompt: () => "New view title",
+      replicateDefaultTitle: (entity) => `${entity.title} copy`
+    },
+    createHref: newViewPath,
+    editHref: (entity) => editViewPath(entity.id),
+    runtimeHref: (entity) => runtimeViewPath(entity.id),
+    getDetail: detail,
+    buildQuery: (state) => defaultQuery(state),
+    hooks: {
+      useEntities: (query) => hooks.useBuilderViews(query),
+      useDelete: hooks.useDeleteBuilderView,
+      useReplicate: hooks.useReplicateBuilderView
+    }
+  });
+  return {
+    AdminHomePage,
+    AdminFormsPage,
+    AdminNewFormPage: function BuilderAdminNewFormPage() {
+      return /* @__PURE__ */ jsx5(FormEditorPage, {});
+    },
+    AdminEditFormPage: function BuilderAdminEditFormPage({ formId }) {
+      return /* @__PURE__ */ jsx5(FormEditorPage, { formId });
+    },
+    AdminListsPage,
+    AdminNewListPage: function BuilderAdminNewListPage() {
+      return /* @__PURE__ */ jsx5(ListEditorPage, {});
+    },
+    AdminEditListPage: function BuilderAdminEditListPage({ listId }) {
+      return /* @__PURE__ */ jsx5(ListEditorPage, { listId });
+    },
+    AdminViewsPage,
+    AdminNewViewPage: function BuilderAdminNewViewPage() {
+      return /* @__PURE__ */ jsx5(ViewEditorPage, {});
+    },
+    AdminEditViewPage: function BuilderAdminEditViewPage({ viewId }) {
+      return /* @__PURE__ */ jsx5(ViewEditorPage, { viewId });
+    },
+    routes: {
+      adminBasePath,
+      formsPath,
+      newFormPath,
+      editFormPath,
+      listsPath,
+      newListPath,
+      editListPath,
+      viewsPath,
+      newViewPath,
+      editViewPath
+    }
+  };
+}
+
 // src/admin/BuilderEntityManager.tsx
-import { useCallback, useMemo, useState } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function createBuilderEntityManagerComponent(deps) {
   return function BuilderEntityManager() {
-    const [pendingDelete, setPendingDelete] = useState(null);
+    const [pendingDelete, setPendingDelete] = useState2(null);
     const state = deps.useDataTableState({ pageSize: 20 });
     const query = deps.hooks.useEntities(state.query);
     const remove = deps.hooks.useDelete();
     const replicate = deps.hooks.useReplicate();
-    const columns = useMemo(
+    const columns = useMemo2(
       () => deps.buildColumns({
         onEdit: deps.navigateToEdit,
         onReplicate: async (entity) => {
@@ -465,8 +1805,8 @@ function createBuilderEntityManagerComponent(deps) {
       state,
       getRowId: (row) => row.id
     });
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx6(
         deps.DataGrid,
         {
           title: deps.labels.title,
@@ -477,10 +1817,10 @@ function createBuilderEntityManagerComponent(deps) {
           emptyTitle: deps.labels.emptyTitle,
           emptyDescription: deps.labels.emptyDescription,
           onRowClick: deps.navigateToEdit,
-          toolbarExtra: /* @__PURE__ */ jsx2(deps.AddButton, { href: deps.createHref, label: deps.labels.addLabel })
+          toolbarExtra: /* @__PURE__ */ jsx6(deps.AddButton, { href: deps.createHref, label: deps.labels.addLabel })
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx6(
         deps.DeleteDialog,
         {
           entity: pendingDelete,
@@ -500,9 +1840,9 @@ function createBuilderEntityManagerComponent(deps) {
 }
 function createBuilderEntityDialogManagerComponent(deps) {
   return function BuilderEntityDialogManager() {
-    const [editing, setEditing] = useState(null);
-    const [isEditorOpen, setEditorOpen] = useState(false);
-    const [pendingDelete, setPendingDelete] = useState(null);
+    const [editing, setEditing] = useState2(null);
+    const [isEditorOpen, setEditorOpen] = useState2(false);
+    const [pendingDelete, setPendingDelete] = useState2(null);
     const state = deps.useDataTableState({ pageSize: 20 });
     const query = deps.hooks.useEntities(state.query);
     const remove = deps.hooks.useDelete();
@@ -511,7 +1851,7 @@ function createBuilderEntityDialogManagerComponent(deps) {
       setEditing(entity);
       setEditorOpen(true);
     }, []);
-    const columns = useMemo(
+    const columns = useMemo2(
       () => deps.buildColumns({
         onEdit: (entity) => openEditor(entity),
         onReplicate: async (entity) => {
@@ -531,8 +1871,8 @@ function createBuilderEntityDialogManagerComponent(deps) {
       state,
       getRowId: (row) => row.id
     });
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx6(
         deps.DataGrid,
         {
           title: deps.labels.title,
@@ -543,10 +1883,10 @@ function createBuilderEntityDialogManagerComponent(deps) {
           emptyTitle: deps.labels.emptyTitle,
           emptyDescription: deps.labels.emptyDescription,
           onRowClick: openEditor,
-          toolbarExtra: /* @__PURE__ */ jsx2(deps.AddButton, { label: deps.labels.addLabel, onAdd: () => openEditor(null) })
+          toolbarExtra: /* @__PURE__ */ jsx6(deps.AddButton, { label: deps.labels.addLabel, onAdd: () => openEditor(null) })
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx6(
         deps.EditorDialog,
         {
           open: isEditorOpen,
@@ -554,7 +1894,7 @@ function createBuilderEntityDialogManagerComponent(deps) {
           onClose: () => setEditorOpen(false)
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx6(
         deps.DeleteDialog,
         {
           entity: pendingDelete,
@@ -574,9 +1914,9 @@ function createBuilderEntityDialogManagerComponent(deps) {
 }
 
 // src/admin/BuilderViewDialog.tsx
-import { useEffect as useEffect2 } from "react";
-import { FormProvider as FormProvider2, useForm as useForm2 } from "react-hook-form";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { useEffect as useEffect3 } from "react";
+import { FormProvider as FormProvider2, useForm as useForm3 } from "react-hook-form";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function createBuilderViewDialogComponent(deps) {
   return function BuilderViewDialog({
     open,
@@ -587,11 +1927,11 @@ function createBuilderViewDialogComponent(deps) {
     onSave,
     isSaving
   }) {
-    const form = useForm2({
+    const form = useForm3({
       resolver: deps.resolver,
       defaultValues: deps.emptyValues
     });
-    useEffect2(() => {
+    useEffect3(() => {
       if (!open) return;
       form.reset(
         builderViewEditorValuesFromEntity(editing, deps.emptyValues, deps.defaultPermission)
@@ -606,7 +1946,7 @@ function createBuilderViewDialogComponent(deps) {
         deps.notifications.error(error);
       }
     });
-    return /* @__PURE__ */ jsx3(deps.Shell, { open, editing, onClose, children: /* @__PURE__ */ jsx3(FormProvider2, { ...form, children: /* @__PURE__ */ jsx3("form", { onSubmit, noValidate: true, children: deps.Body({
+    return /* @__PURE__ */ jsx7(deps.Shell, { open, editing, onClose, children: /* @__PURE__ */ jsx7(FormProvider2, { ...form, children: /* @__PURE__ */ jsx7("form", { onSubmit, noValidate: true, children: deps.Body({
       form,
       editing,
       forms,
@@ -619,6 +1959,175 @@ function createBuilderViewDialogComponent(deps) {
   };
 }
 
+// src/admin/formLayoutEditorState.ts
+import { useMemo as useMemo3 } from "react";
+import { useWatch as useWatch2 } from "react-hook-form";
+var builderFormLayoutDragDataType = "application/x-winu-builder-layout-field";
+function clampBuilderFormLayoutSpan(span, columns) {
+  return Math.max(1, Math.min(columns, span));
+}
+function swapBuilderFormLayoutItems(items, from, to) {
+  if (from < 0 || from >= items.length || to < 0 || to >= items.length) return items;
+  const next = [...items];
+  const item = next[from];
+  next[from] = next[to];
+  next[to] = item;
+  return next;
+}
+function nextBuilderFormLayoutGroupId(groups) {
+  let index = groups.length + 1;
+  let id = `group${index}`;
+  const ids = new Set(groups.map((group) => group.id));
+  while (ids.has(id)) {
+    index += 1;
+    id = `group${index}`;
+  }
+  return id;
+}
+function serializeBuilderFormLayoutDragPayload(payload) {
+  return JSON.stringify(payload);
+}
+function parseBuilderFormLayoutDragPayload(raw) {
+  if (!raw) return null;
+  try {
+    const value = JSON.parse(raw);
+    if (value.type === "palette" && typeof value.key === "string" && value.key) {
+      return { type: value.type, key: value.key };
+    }
+    if (value.type === "layout" && typeof value.key === "string" && value.key && Number.isInteger(value.groupIndex) && Number.isInteger(value.fieldIndex) && (value.groupIndex ?? -1) >= 0 && (value.fieldIndex ?? -1) >= 0) {
+      return {
+        type: value.type,
+        groupIndex: value.groupIndex,
+        fieldIndex: value.fieldIndex,
+        key: value.key
+      };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function useBuilderFormLayoutEditor({ form, fields, subforms = [] }) {
+  const layoutGroups = useWatch2({ control: form.control, name: "layoutGroups" }) ?? [];
+  const layoutItems = useMemo3(
+    () => [
+      ...fields.map((field) => ({
+        key: field.key,
+        kind: "field",
+        meta: field.type,
+        span: builderFormEditorDefaultSpan(field)
+      })),
+      ...subforms.map((subform) => ({
+        key: subform.key,
+        kind: "subform",
+        meta: "subform",
+        span: 12
+      }))
+    ],
+    [fields, subforms]
+  );
+  const assignedKeys = useMemo3(
+    () => new Set(layoutGroups.flatMap((group) => group.fields.map((field) => field.key))),
+    [layoutGroups]
+  );
+  const unassignedItems = useMemo3(
+    () => layoutItems.filter((item) => !assignedKeys.has(item.key)),
+    [assignedKeys, layoutItems]
+  );
+  const setGroups = (groups) => {
+    form.setValue("layoutGroups", groups, { shouldDirty: true, shouldValidate: true });
+  };
+  const updateGroup = (groupIndex, group) => {
+    setGroups(layoutGroups.map((item, index) => index === groupIndex ? group : item));
+  };
+  const updateGroupFields = (groupIndex, updater) => {
+    const group = layoutGroups[groupIndex];
+    if (!group) return;
+    updateGroup(groupIndex, { ...group, fields: updater(group.fields) });
+  };
+  const addGroup = () => {
+    setGroups([
+      ...layoutGroups,
+      {
+        id: nextBuilderFormLayoutGroupId(layoutGroups),
+        title: `Group ${layoutGroups.length + 1}`,
+        columns: 12,
+        fields: []
+      }
+    ]);
+  };
+  const addItemToNewGroup = (itemKey) => {
+    if (assignedKeys.has(itemKey)) return;
+    const item = layoutItems.find((candidate) => candidate.key === itemKey);
+    if (!item) return;
+    setGroups([
+      ...layoutGroups,
+      {
+        id: nextBuilderFormLayoutGroupId(layoutGroups),
+        title: layoutGroups.length === 0 ? "\u04AE\u043D\u0434\u0441\u044D\u043D" : `Group ${layoutGroups.length + 1}`,
+        columns: 12,
+        fields: [{ key: itemKey, span: item.span }]
+      }
+    ]);
+  };
+  const addItemToGroup = (groupIndex, itemKey, insertAt) => {
+    if (assignedKeys.has(itemKey)) return;
+    const item = layoutItems.find((candidate) => candidate.key === itemKey);
+    const group = layoutGroups[groupIndex];
+    if (!item || !group) return;
+    const nextField = {
+      key: itemKey,
+      span: clampBuilderFormLayoutSpan(item.span, group.columns)
+    };
+    updateGroupFields(groupIndex, (groupFields) => {
+      const next = [...groupFields];
+      next.splice(insertAt ?? next.length, 0, nextField);
+      return next;
+    });
+  };
+  const moveLayoutField = (payload, targetGroupIndex, targetFieldIndex) => {
+    const sourceGroup = layoutGroups[payload.groupIndex];
+    const targetGroup = layoutGroups[targetGroupIndex];
+    if (!sourceGroup || !targetGroup) return;
+    const movingField = sourceGroup.fields[payload.fieldIndex];
+    if (!movingField) return;
+    const nextGroups = layoutGroups.map((group) => ({ ...group, fields: [...group.fields] }));
+    nextGroups[payload.groupIndex].fields.splice(payload.fieldIndex, 1);
+    let insertAt = targetFieldIndex ?? nextGroups[targetGroupIndex].fields.length;
+    if (payload.groupIndex === targetGroupIndex && payload.fieldIndex < insertAt) {
+      insertAt -= 1;
+    }
+    nextGroups[targetGroupIndex].fields.splice(insertAt, 0, {
+      ...movingField,
+      span: clampBuilderFormLayoutSpan(movingField.span, targetGroup.columns)
+    });
+    setGroups(nextGroups);
+  };
+  const applyDragPayload = (payload, targetGroupIndex, targetFieldIndex) => {
+    if (!payload) return;
+    if (payload.type === "palette") {
+      addItemToGroup(targetGroupIndex, payload.key, targetFieldIndex);
+      return;
+    }
+    moveLayoutField(payload, targetGroupIndex, targetFieldIndex);
+  };
+  const resetDefaultLayout = () => setGroups(builderFormEditorDefaultLayoutGroups(fields, subforms));
+  return {
+    assignedKeys,
+    layoutGroups,
+    layoutItems,
+    unassignedItems,
+    addGroup,
+    addItemToGroup,
+    addItemToNewGroup,
+    applyDragPayload,
+    resetDefaultLayout,
+    setGroups,
+    updateGroup,
+    updateGroupFields
+  };
+}
+
 // src/api/createBuilderApiClient.ts
 function queryParams(query) {
   return { ...query };
@@ -709,8 +2218,8 @@ function createBuilderApiClient(transport) {
 }
 
 // src/components/DynamicForm.tsx
-import { useMemo as useMemo2 } from "react";
-import { FormProvider as FormProvider3, useForm as useForm3 } from "react-hook-form";
+import { useMemo as useMemo4 } from "react";
+import { FormProvider as FormProvider3, useForm as useForm4 } from "react-hook-form";
 
 // src/runtime/runtimeUtils.ts
 function emptyFieldValue(field) {
@@ -739,16 +2248,16 @@ function formatBuilderRuntimeValue(value, locale = "mn-MN") {
 }
 
 // src/components/DynamicForm.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function createDynamicFormComponent(deps) {
   return function DynamicForm({ formId }) {
     const query = deps.hooks.useRuntimeBuilderForm(formId);
     const save = deps.hooks.useSaveRuntimeBuilderFormEntry(formId);
-    const formValues = useMemo2(
+    const formValues = useMemo4(
       () => query.data ? createBuilderFormDefaultValues(query.data.schema) : void 0,
       [query.data]
     );
-    const form = useForm3({
+    const form = useForm4({
       defaultValues: createBuilderFormDefaultValues(query.data?.schema),
       values: formValues
     });
@@ -762,7 +2271,7 @@ function createDynamicFormComponent(deps) {
       }
     });
     if (query.isError) {
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx8(
         deps.ErrorState,
         {
           title: "Form \u043D\u044D\u044D\u0433\u0434\u0441\u044D\u043D\u0433\u04AF\u0439",
@@ -771,22 +2280,22 @@ function createDynamicFormComponent(deps) {
       );
     }
     if (!query.data) return null;
-    return /* @__PURE__ */ jsx4(deps.FormShell, { title: query.data.title, children: /* @__PURE__ */ jsx4(FormProvider3, { ...form, children: /* @__PURE__ */ jsxs2("form", { onSubmit, noValidate: true, className: "space-y-6", children: [
-      /* @__PURE__ */ jsx4(deps.FormFields, { formId, schema: query.data.schema, namePrefix: "values" }),
-      /* @__PURE__ */ jsx4(deps.SubmitButton, { isSaving: save.isPending })
+    return /* @__PURE__ */ jsx8(deps.FormShell, { title: query.data.title, children: /* @__PURE__ */ jsx8(FormProvider3, { ...form, children: /* @__PURE__ */ jsxs6("form", { onSubmit, noValidate: true, className: "space-y-6", children: [
+      /* @__PURE__ */ jsx8(deps.FormFields, { formId, schema: query.data.schema, namePrefix: "values" }),
+      /* @__PURE__ */ jsx8(deps.SubmitButton, { isSaving: save.isPending })
     ] }) }) });
   };
 }
 
 // src/components/DynamicList.tsx
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function createDynamicListComponent(deps) {
   return function DynamicList({ listId }) {
     const query = deps.hooks.useRuntimeBuilderList(listId);
     const state = deps.useDataTableState({ pageSize: 20 });
     const entriesQuery = deps.hooks.useRuntimeBuilderListEntries(listId, state.query);
-    const columns = useMemo3(() => query.data ? deps.buildColumns(query.data) : [], [query.data]);
+    const columns = useMemo5(() => query.data ? deps.buildColumns(query.data) : [], [query.data]);
     const entries = entriesQuery.data?.items ?? [];
     const controller = deps.useDataTable({
       columns,
@@ -796,7 +2305,7 @@ function createDynamicListComponent(deps) {
       getRowId: (row) => row.id
     });
     if (query.isError) {
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx9(
         deps.ErrorState,
         {
           title: "List \u043D\u044D\u044D\u0433\u0434\u0441\u044D\u043D\u0433\u04AF\u0439",
@@ -804,7 +2313,7 @@ function createDynamicListComponent(deps) {
         }
       );
     }
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx9(
       deps.DataGrid,
       {
         title: query.data?.title ?? "Dynamic List",
@@ -820,20 +2329,20 @@ function createDynamicListComponent(deps) {
 }
 
 // src/components/DynamicView.tsx
-import { useMemo as useMemo4, useState as useState2 } from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useMemo as useMemo6, useState as useState3 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function createDynamicViewComponent(deps) {
   return function DynamicView({ viewId }) {
-    const [editing, setEditing] = useState2(null);
-    const [isDialogOpen, setDialogOpen] = useState2(false);
-    const [pendingDelete, setPendingDelete] = useState2(null);
+    const [editing, setEditing] = useState3(null);
+    const [isDialogOpen, setDialogOpen] = useState3(false);
+    const [pendingDelete, setPendingDelete] = useState3(null);
     const viewQuery = deps.hooks.useRuntimeBuilderView(viewId);
     const state = deps.useDataTableState({ pageSize: 20 });
     const entriesQuery = deps.hooks.useBuilderViewEntries(viewId, state.query);
     const save = deps.hooks.useSaveBuilderViewEntry(viewId);
     const remove = deps.hooks.useDeleteBuilderViewEntry(viewId);
     const view = viewQuery.data;
-    const columns = useMemo4(
+    const columns = useMemo6(
       () => view ? deps.buildColumns(view, {
         onEdit: (entry) => {
           setEditing(entry);
@@ -851,7 +2360,7 @@ function createDynamicViewComponent(deps) {
       getRowId: (row) => row.id
     });
     if (viewQuery.isError) {
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx10(
         deps.ErrorState,
         {
           title: "View \u043D\u044D\u044D\u0433\u0434\u0441\u044D\u043D\u0433\u04AF\u0439",
@@ -859,8 +2368,8 @@ function createDynamicViewComponent(deps) {
         }
       );
     }
-    return /* @__PURE__ */ jsxs3("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs7("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx10(
         deps.DataGrid,
         {
           title: view?.title ?? "Dynamic View",
@@ -874,7 +2383,7 @@ function createDynamicViewComponent(deps) {
             setEditing(entry);
             setDialogOpen(true);
           },
-          toolbarExtra: /* @__PURE__ */ jsx6(
+          toolbarExtra: /* @__PURE__ */ jsx10(
             deps.AddButton,
             {
               disabled: !view?.form,
@@ -886,7 +2395,7 @@ function createDynamicViewComponent(deps) {
           )
         }
       ),
-      view ? /* @__PURE__ */ jsx6(
+      view ? /* @__PURE__ */ jsx10(
         deps.EntryDialog,
         {
           open: isDialogOpen,
@@ -897,7 +2406,7 @@ function createDynamicViewComponent(deps) {
           isSaving: save.isPending
         }
       ) : null,
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx10(
         deps.DeleteDialog,
         {
           entry: pendingDelete,
@@ -915,9 +2424,9 @@ function createDynamicViewComponent(deps) {
 }
 
 // src/components/RuntimeEntryDialog.tsx
-import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
-import { FormProvider as FormProvider4, useForm as useForm4 } from "react-hook-form";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useMemo as useMemo7, useState as useState4 } from "react";
+import { FormProvider as FormProvider4, useForm as useForm5 } from "react-hook-form";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function isDbTableSource(source) {
   return source?.type === "dbTable" && "tableName" in source;
 }
@@ -950,19 +2459,19 @@ function createRuntimeEntryDialogComponent(deps) {
     onSave,
     isSaving
   }) {
-    const [draftSubforms, setDraftSubforms] = useState3({});
+    const [draftSubforms, setDraftSubforms] = useState4({});
     const compositeCreate = deps.useCreateCompositeEntry?.(view.id);
     const compositeUpdate = deps.useUpdateCompositeEntry?.(view.id);
-    const form = useForm4({
+    const form = useForm5({
       defaultValues: createBuilderEntryDefaultValues(view, editing),
       values: open ? createBuilderEntryDefaultValues(view, editing) : void 0
     });
     const mainTableName = runtimeViewTableName(view);
-    const hasDraftRows = useMemo5(
+    const hasDraftRows = useMemo7(
       () => Object.values(draftSubforms).some((draft) => draft.rows.length > 0),
       [draftSubforms]
     );
-    useEffect3(() => {
+    useEffect4(() => {
       if (open) setDraftSubforms({});
     }, [open]);
     const onSubmit = form.handleSubmit(async (values) => {
@@ -1014,7 +2523,7 @@ function createRuntimeEntryDialogComponent(deps) {
     const saving = isSaving || Boolean(compositeCreate?.isPending || compositeUpdate?.isPending);
     const extraItems = deps.SubformField && view.form?.schema.subforms?.length ? view.form.schema.subforms.map((subform) => ({
       key: subform.key,
-      render: () => deps.SubformField ? /* @__PURE__ */ jsx7(
+      render: () => deps.SubformField ? /* @__PURE__ */ jsx11(
         deps.SubformField,
         {
           subform,
@@ -1029,15 +2538,15 @@ function createRuntimeEntryDialogComponent(deps) {
         }
       ) : null
     })) : void 0;
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx11(
       deps.DialogShell,
       {
         open,
         title: editing ? "\u041C\u04E9\u0440 \u0437\u0430\u0441\u0430\u0445" : "\u041C\u04E9\u0440 \u043D\u044D\u043C\u044D\u0445",
         description: view.title,
         onClose,
-        children: /* @__PURE__ */ jsx7(FormProvider4, { ...form, children: /* @__PURE__ */ jsxs4("form", { onSubmit, noValidate: true, className: deps.formClassName, children: [
-          view.form ? /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx11(FormProvider4, { ...form, children: /* @__PURE__ */ jsxs8("form", { onSubmit, noValidate: true, className: deps.formClassName, children: [
+          view.form ? /* @__PURE__ */ jsx11(
             deps.FormFields,
             {
               formId: view.form.id,
@@ -1048,7 +2557,7 @@ function createRuntimeEntryDialogComponent(deps) {
               extraItems
             }
           ) : null,
-          /* @__PURE__ */ jsx7(deps.Actions, { isSaving: saving, onClose })
+          /* @__PURE__ */ jsx11(deps.Actions, { isSaving: saving, onClose })
         ] }) })
       }
     );
@@ -1056,9 +2565,9 @@ function createRuntimeEntryDialogComponent(deps) {
 }
 
 // src/components/RuntimeSubformField.tsx
-import { useEffect as useEffect4, useMemo as useMemo6, useRef, useState as useState4 } from "react";
-import { FormProvider as FormProvider5, useForm as useForm5 } from "react-hook-form";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useMemo as useMemo8, useRef, useState as useState5 } from "react";
+import { FormProvider as FormProvider5, useForm as useForm6 } from "react-hook-form";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 
 // src/hooks/createBuilderHooks.ts
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -1075,6 +2584,7 @@ function createBuilderKeys() {
     listOptions: () => [...builderKeys.lists, "options"],
     views: ["builder", "views"],
     viewList: (query) => [...builderKeys.views, "list", query],
+    view: (id) => [...builderKeys.views, "detail", id],
     runtimeForm: (id) => ["builder", "runtime", "form", id],
     runtimeFieldOptions: (formId, fieldKey, query) => [...builderKeys.runtimeForm(formId), "fields", fieldKey, "options", query],
     runtimeFormEntries: (id) => [...builderKeys.runtimeForm(id), "entries"],
@@ -1193,6 +2703,13 @@ function createBuilderHooks(client) {
       placeholderData: keepPreviousData
     });
   }
+  function useBuilderView(id) {
+    return useQuery({
+      queryKey: builderKeys.view(id ?? ""),
+      queryFn: () => client.getBuilderView(id ?? ""),
+      enabled: Boolean(id)
+    });
+  }
   function useSaveBuilderView() {
     const queryClient = useQueryClient();
     return useMutation({
@@ -1333,6 +2850,7 @@ function createBuilderHooks(client) {
     useBuilderListOptions,
     useBuilderLists,
     useBuilderViewEntries,
+    useBuilderView,
     useBuilderViews,
     useDeleteBuilderForm,
     useDeleteBuilderList,
@@ -1357,10 +2875,47 @@ function createBuilderHooks(client) {
   };
 }
 
+// src/integration/createBuilderIntegration.ts
+function normalizeBasePath(path) {
+  const trimmed = path.trim().replace(/\/+$/g, "");
+  if (!trimmed) return "/builder";
+  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+}
+function withQuery(path, query) {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(query)) {
+    if (value) params.set(key, value);
+  }
+  const queryString = params.toString();
+  return queryString ? `${path}?${queryString}` : path;
+}
+function createBuilderIntegration(config) {
+  const adminBasePath = normalizeBasePath(config.adminBasePath ?? "/admin/dev/builder");
+  const api = createBuilderApiClient(config.transport);
+  const hooks = createBuilderHooks(api);
+  const formsPath = `${adminBasePath}/forms`;
+  const listsPath = `${adminBasePath}/lists`;
+  return {
+    api,
+    hooks,
+    routes: {
+      adminBasePath,
+      adminHomePath: adminBasePath,
+      formsPath,
+      newFormPath: `${formsPath}/new`,
+      editFormPath: (id) => withQuery(`${formsPath}/edit`, { id }),
+      listsPath,
+      newListPath: `${listsPath}/new`,
+      editListPath: (id) => withQuery(`${listsPath}/edit`, { id }),
+      viewsPath: `${adminBasePath}/views`
+    }
+  };
+}
+
 // src/index.ts
 var builderUiPackage = {
   name: "@duke333/builder-ui",
-  version: "0.1.0"
+  version: "0.1.1"
 };
 export {
   BUILDER_EDITOR_NONE_VALUE,
@@ -1371,19 +2926,27 @@ export {
   builderFormEditorFieldsFromTable,
   builderFormEditorInputFromValues,
   builderFormEditorValuesFromEntity,
+  builderFormLayoutDragDataType,
   builderListEditorColumnsFromTable,
   builderListEditorInputFromValues,
   builderListEditorValuesFromEntity,
   builderUiPackage,
   builderViewEditorInputFromValues,
   builderViewEditorValuesFromEntity,
+  clampBuilderFormLayoutSpan,
+  createBuilderAdminPages,
   createBuilderApiClient,
+  createBuilderDefaultEntityManagerComponent,
+  createBuilderDefaultFormEditorBody,
+  createBuilderDefaultListEditorBody,
+  createBuilderDefaultViewEditorPage,
   createBuilderEntityDialogManagerComponent,
   createBuilderEntityManagerComponent,
   createBuilderEntryDefaultValues,
   createBuilderFormDefaultValues,
   createBuilderFormEditorPageComponent,
   createBuilderHooks,
+  createBuilderIntegration,
   createBuilderKeys,
   createBuilderListEditorPageComponent,
   createBuilderViewDialogComponent,
@@ -1392,6 +2955,11 @@ export {
   createDynamicViewComponent,
   createRuntimeEntryDialogComponent,
   formatBuilderRuntimeValue,
-  getBuilderEditorTriggerRoute
+  getBuilderEditorTriggerRoute,
+  nextBuilderFormLayoutGroupId,
+  parseBuilderFormLayoutDragPayload,
+  serializeBuilderFormLayoutDragPayload,
+  swapBuilderFormLayoutItems,
+  useBuilderFormLayoutEditor
 };
 //# sourceMappingURL=index.js.map