react-luna-form 0.0.25 → 0.0.27

package/dist/client/esm/index.js

@@ -1,15 +1,31 @@
-// src/component/field/field-error.tsx
+// src/component/control.tsx
 import { jsx } from "react/jsx-runtime";
-function FieldError(props) {
-  if (!props.errors || props.errors.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "ul",
+function Control(props) {
+  const content = typeof props.children === "function" ? props.children({ isPending: props.isPending }) : props.children;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "field-control", className: "w-full", children: content });
+}
+
+// src/component/field/field-set-advanced.tsx
+import { Activity, useCallback, useState } from "react";
+
+// src/component/chevron-icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ChevronIcon(props) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
     {
-      className: "text-sm text-red-600 dark:text-red-500",
-      id: props.name ? `${props.name}-error` : void 0,
-      children: props.errors?.map((error, index) => /* @__PURE__ */ jsx("li", { children: error }, props.name ? `${props.name}-error-${index}` : index))
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className: `size-4 transition-transform duration-200 ${props.expanded ? "rotate-90" : ""}`,
+      children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
+          clipRule: "evenodd"
+        }
+      )
     }
   );
 }
@@ -21,10 +37,12 @@ var INPUT_NUMBER = "input/number";
 var TEXTAREA = "textarea";
 var RADIO = "radio";
 var CHECKBOX = "checkbox";
+var LIST = "list";
 var SELECT = "select";
 var SELECT_MONTH = "select/month";
 var SELECT_YEAR = "select/year";
 var COLUMN = "column";
+var FIELDS = "fields";
 var LABEL = "label";
 var VALUE = "value";
 var OPTIONS = "options";
@@ -49,6 +67,7 @@ var STATE = "state";
 var COMMON_URL = "http://luna.internal";
 var VERTICAL = "vertical";
 var HORIZONTAL = "horizontal";
+var TYPE = "type";
 
 // ../luna-core/src/util/is-type.ts
 function isObject(value) {
@@ -58,7 +77,7 @@ function isEmpty(value) {
   return value === null || value === void 0 || value === "";
 }
 function isValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || typeof value === "number" || isBoolean(value);
 }
 function isString(value) {
   return typeof value === "string";
@@ -66,9 +85,13 @@ function isString(value) {
 function isDataSource(value) {
   return isObject(value) && "url" in value;
 }
+function isBoolean(value) {
+  return typeof value === "boolean";
+}
 
 // ../luna-core/src/util/extract.ts
 var REGEX_TYPE = /[^/]+$/;
+var REGEX_NUMERIC = /^\d+$/;
 function getEntity(selected, collection = [], entity = VALUE) {
   if (Array.isArray(collection)) {
     return collection.find((item) => {
@@ -78,6 +101,7 @@ function getEntity(selected, collection = [], entity = VALUE) {
       }
     }) ?? { value: selected };
   }
+  return { value: selected };
 }
 function getCurrentValue(value, entity = VALUE) {
   if (value !== null && value !== void 0) {
@@ -162,6 +186,46 @@ function getFormData(formData) {
   }
   return data;
 }
+function unflatten(data) {
+  const result = {};
+  for (const key in data) {
+    const parts = key.split(".");
+    if (parts.length === 1) {
+      result[key] = data[key];
+      continue;
+    }
+    let current = result;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i];
+      const next = parts[i + 1];
+      const isNextIndex = REGEX_NUMERIC.test(next);
+      if (!(part in current)) {
+        current[part] = isNextIndex ? [] : {};
+      }
+      current = current[part];
+    }
+    const last = parts[parts.length - 1];
+    current[last] = data[key];
+  }
+  compactArrays(result);
+  return result;
+}
+function compactArrays(obj) {
+  for (const key in obj) {
+    const value = obj[key];
+    if (Array.isArray(value)) {
+      const compacted = value.filter((item) => item !== void 0);
+      compacted.forEach((item) => {
+        if (item !== null && typeof item === "object" && !Array.isArray(item)) {
+          compactArrays(item);
+        }
+      });
+      obj[key] = compacted;
+    } else if (value !== null && typeof value === "object") {
+      compactArrays(value);
+    }
+  }
+}
 
 // ../luna-core/src/util/string.ts
 var REGEX_MARKDOWN_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
@@ -183,6 +247,9 @@ function interpolate(template, values = {}) {
   }
   return template;
 }
+function interpolateIfNeeded(template, values = {}) {
+  return isInterpolated(template) ? interpolate(template, values) : template;
+}
 function isInterpolated(template) {
   if (isString(template)) {
     return /{([^}]+)}/.test(template);
@@ -259,7 +326,7 @@ function handleProxyEvent(events = [], callback) {
   const values = [];
   const sources = [];
   const states = [];
-  events.forEach((event) => {
+  for (const event of events) {
     if (event.action === VALUE) {
       values.push(event);
     }
@@ -269,17 +336,17 @@ function handleProxyEvent(events = [], callback) {
     if (event.action === STATE) {
       states.push(event);
     }
-  });
+  }
   callback({ sources, states, values });
 }
 
 // ../luna-core/src/handle/source-event.ts
 function handleSourceEvent(selected = null, events = [], setSource) {
-  events.forEach((event) => {
+  for (const event of events) {
     const { target, source } = event;
     if (!selected) {
       setSource(target, void 0);
-      return;
+      continue;
     }
     if (isDataSource(source)) {
       const newUrl = interpolate(source.url, selected);
@@ -290,7 +357,7 @@ function handleSourceEvent(selected = null, events = [], setSource) {
         body: newBody
       });
     }
-  });
+  }
 }
 
 // ../luna-core/src/util/operator.ts
@@ -363,31 +430,39 @@ function lte(current, value) {
 
 // ../luna-core/src/handle/state-event.ts
 function handleStateEvent(selected = null, events = [], setState) {
-  events.forEach((event) => {
+  for (const event of events) {
     const { target, state, when } = event;
+    const targets = Array.isArray(target) ? target : [target];
     if (!selected) {
-      setState(target);
-      return;
+      setState(targets);
+      continue;
     }
+    logger.info(`Selected value for state event: ${JSON.stringify(selected)}, evaluating condition: ${JSON.stringify(when)}`);
     const matches = evaluateCondition(selected, when);
-    setState(target, matches ? state : void 0);
-  });
+    logger.info(`Condition evaluated to: ${matches}, setting state for targets: ${targets.join(", ")}`);
+    setState(targets, matches ? state : void 0);
+  }
 }
 function evaluateCondition(selected, when) {
   if (when === void 0) {
     return true;
   }
   if (isString(when)) {
-    return getValue2(selected, "value") === when;
+    logger.info(`Evaluating string condition: ${when} against selected value: ${JSON.stringify(selected)} using VALUE field`);
+    logger.info(`Extracted value for comparison: ${JSON.stringify(getValue2(selected, VALUE))}`);
+    logger.info(`Comparison result: ${getValue2(selected, VALUE) === when}`);
+    return getValue2(selected, VALUE) === when;
+  }
+  if (isBoolean(when)) {
+    return Boolean(getValue2(selected, VALUE)) === when;
   }
   if (Array.isArray(when)) {
-    const current = getValue2(selected, "value");
-    return when.includes(String(current));
+    return when.includes(String(getValue2(selected, VALUE)));
   }
   return evaluateOperator(selected, when);
 }
 function evaluateOperator(selected = null, condition) {
-  const current = getValue2(selected, condition.field ?? "value");
+  const current = getValue2(selected, condition.field ?? VALUE);
   const { operator = "eq", value } = condition;
   const operation = operators[operator];
   if (operation) {
@@ -397,18 +472,18 @@ function evaluateOperator(selected = null, condition) {
 }
 function getValue2(selected, field) {
   if (isObject(selected)) {
-    return field.includes(".") ? extract(selected, field) : selected[field];
+    return extract(selected, field);
   }
   return selected;
 }
 
 // ../luna-core/src/handle/value-event.ts
 function handleValueEvent(selected = null, events = [], setValue) {
-  events.forEach((event) => {
-    Object.entries(event.value).forEach(([target, value]) => {
+  for (const event of events) {
+    for (const [target, value] of Object.entries(event.value)) {
       setValue(target, selected ? interpolate(value, selected) : void 0);
-    });
-  });
+    }
+  }
 }
 
 // ../luna-core/src/util/is-input.ts
@@ -430,11 +505,14 @@ var isNumber = createTypeChecker(INPUT_NUMBER, TYPE_NUMBER);
 function isClickable(field) {
   return isRadio(field) || isCheckbox(field);
 }
+function isList(slot) {
+  return slot.type === LIST;
+}
 function isColumn(slot) {
   return slot.type === COLUMN;
 }
 function isField(slot) {
-  return slot.type !== COLUMN;
+  return slot.type !== COLUMN && slot.type !== LIST;
 }
 function isOptions(field) {
   return isSelect(field) || isRadio(field);
@@ -699,7 +777,7 @@ function prepareInputValue(field, value) {
 var REGEX_REF = /^#\/definition\//;
 function prepare(base = [], definition) {
   const resolved = resolveRefs(base, definition);
-  return Array.isArray(resolved) ? resolved.sort((a, b) => getOrder(a) - getOrder(b)) : [];
+  return Array.isArray(resolved) ? resolved.filter(filter).sort((a, b) => getOrder(a) - getOrder(b)) : [];
 }
 function resolveRefs(base, definition, cache = /* @__PURE__ */ new Map(), visited = /* @__PURE__ */ new WeakSet()) {
   if (!isDefinition(definition) || !base || typeof base !== "object") {
@@ -740,6 +818,15 @@ function getOrder(item) {
 function isDefinition(definition) {
   return definition !== void 0 && isObject(definition) && Object.keys(definition).length > 0;
 }
+function filter(base) {
+  if (TYPE in base) {
+    return true;
+  }
+  if (Array.isArray(base[FIELDS])) {
+    return base[FIELDS].length > 0;
+  }
+  return true;
+}
 
 // ../luna-core/src/util/attributes.ts
 function getPrefixedAttributes(prefix, record) {
@@ -787,6 +874,31 @@ function getSpan(value) {
   }
 }
 
+// ../luna-core/src/util/list.ts
+function getInitialCount(list, value) {
+  const min2 = list.advanced?.length?.min ?? 1;
+  if (value) {
+    const data = extract(value, list.name);
+    if (Array.isArray(data)) {
+      return Math.max(data.length, min2);
+    }
+  }
+  return Math.max(min2, 0);
+}
+function isMultiFieldList(list) {
+  if (!Array.isArray(list.fields) || list.fields.length === 0) {
+    return false;
+  }
+  return list.fields.length > 1 || list.fields[0].type === COLUMN;
+}
+function getInitialList(list, value) {
+  const count = getInitialCount(list, value);
+  return Array.from({ length: count }, (_, index) => index);
+}
+function getLabel(list) {
+  return list.label ?? list.name;
+}
+
 // ../luna-core/src/util/schema.ts
 import { z } from "zod";
 
@@ -1079,161 +1191,140 @@ function mergeStyle(globalStyle, localStyle) {
   return { ...globalStyle, ...localStyle };
 }
 
-// src/component/field/field-base.tsx
-import { twMerge } from "tailwind-merge";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function FieldBase(props) {
-  const errors = props.errors && props.errors.length > 0;
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "field",
-      "data-clickable": props.isClickable ? "true" : "false",
-      ...errors && { [DATA_INVALID]: "true" },
-      ...props.disabled && { [DATA_READONLY]: "true" },
-      "data-orientation": props.orientation,
-      className: twMerge(
-        "group flex w-full flex-col items-center data-[invalid=true]:text-red-600 data-[invalid=true]:dark:text-red-500",
-        "data-[clickable=true]:items-start",
-        props.isCheckbox && (props.isReversed ? "flex-row-reverse!" : "flex-row!"),
-        "data-[clickable=true]:has-[>[data-slot=field-content]]:[&>:first-child]:mt-px",
-        props.className
-      ),
-      children: props.children
+// src/lib/string.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function formatMarkdown2(text) {
+  return formatMarkdown(
+    text,
+    (index, url, text2) => {
+      return /* @__PURE__ */ jsx3(
+        "a",
+        {
+          className: "underline",
+          href: url,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: text2
+        },
+        `${url}-${index}`
+      );
     }
   );
 }
 
-// src/component/field/field-vertical.tsx
-import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function FieldVertical(props) {
-  return /* @__PURE__ */ jsx3(
-    FieldBase,
+// src/component/field/field-set-advanced.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function FieldSetAdvanced(props) {
+  const { fields = [] } = props.section;
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOpen = useCallback(() => setIsOpen((previous) => !previous), []);
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
     {
-      ...props,
-      orientation: VERTICAL,
-      className: twMerge2(
-        "gap-3 has-[>[data-slot=field-content]]:items-start",
-        !props.isClickable && "[&>*]:w-full"
-      ),
-      children: props.children
+      "data-slot": "field-set",
+      "data-advanced": "true",
+      "data-expanded": isOpen,
+      "data-empty": fields.length === 0,
+      className: "flex flex-col",
+      id: props.section.id?.toString(),
+      children: [
+        /* @__PURE__ */ jsx4("legend", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "flex cursor-pointer items-center gap-2 text-base font-medium text-slate-600 dark:text-slate-400",
+            onClick: handleOpen,
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx4(ChevronIcon, { expanded: isOpen }),
+              /* @__PURE__ */ jsx4("span", { children: formatMarkdown2(props.section.title) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx4(Activity, { mode: isOpen ? "visible" : "hidden", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mt-3 ml-1.5 flex flex-col gap-4 border-l-2 border-slate-300 pl-4 dark:border-slate-600",
+            "data-slot": "field-set-content",
+            children: [
+              props.section.description && /* @__PURE__ */ jsx4("p", { className: "text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.section.description) }),
+              props.group
+            ]
+          }
+        ) })
+      ]
     }
   );
 }
 
-// src/component/field/field-horizontal.tsx
-import { twMerge as twMerge3 } from "tailwind-merge";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function FieldHorizontal(props) {
-  return /* @__PURE__ */ jsx4(
-    FieldBase,
+// src/component/legend.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function Legend(props) {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    props.title && /* @__PURE__ */ jsx5("legend", { className: "mb-3 font-medium text-slate-800 dark:text-slate-200", children: formatMarkdown2(props.title) }),
+    props.description && /* @__PURE__ */ jsx5("p", { className: "-mt-2 text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.description) })
+  ] });
+}
+
+// src/component/field/field-set-base.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function FieldSetBase(props) {
+  return /* @__PURE__ */ jsxs3(
+    "fieldset",
     {
-      ...props,
-      orientation: HORIZONTAL,
-      className: twMerge3(
-        "gap-2 md:flex-row md:gap-4",
-        "[&>[data-slot=field-content]]:min-w-0 [&>[data-slot=field-content]]:flex-grow [&>[data-slot=field-content]]:self-start",
-        "[&_[role=checkbox]]:mt-[1.5px]",
-        props.isClickable && "md:flex-col",
-        !props.isClickable && [
-          "md:justify-between",
-          "[&>*:not([data-slot=field-content])]:w-full",
-          "[&>*:not([data-slot=field-content])]:md:w-1/2",
-          "[&>*:not([data-slot=field-content])]:xl:w-2/5"
-        ]
-      ),
-      children: props.children
+      "data-slot": "field-set",
+      "data-empty": props.empty,
+      className: "flex flex-col data-[empty=false]:gap-6",
+      id: props.id,
+      children: [
+        /* @__PURE__ */ jsx6(Legend, { description: props.description, title: props.title }),
+        props.children
+      ]
     }
   );
 }
 
-// src/component/field/field-group.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function FieldGroup(props) {
-  const clickable = isClickable(props.field);
-  const checkbox = isCheckbox(props.field);
-  const reversed = buildReverse(props.field);
-  if (props.orientation === VERTICAL) {
-    return /* @__PURE__ */ jsx5(
-      FieldVertical,
-      {
-        disabled: props.disabled,
-        errors: props.errors,
-        isCheckbox: checkbox,
-        isReversed: reversed,
-        isClickable: clickable,
-        children: props.children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx5(
-    FieldHorizontal,
+// src/component/group.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Group(props) {
+  return /* @__PURE__ */ jsx7(
+    "div",
     {
-      disabled: props.disabled,
-      errors: props.errors,
-      isCheckbox: checkbox,
-      isReversed: reversed,
-      isClickable: clickable,
+      "data-slot": "field-group",
+      "data-compact": props.compact,
+      className: "flex w-full flex-col gap-8 data-[compact=true]:gap-3",
       children: props.children
     }
   );
 }
 
-// src/component/input/input-base.tsx
-function InputBase(props) {
-  if (!props.field.type) {
-    return null;
-  }
-  const commonProps = buildCommon(props.field, props.disabled);
-  const dataAttributes = buildDataAttributes(props.field);
-  const ariaAttributes = buildAriaAttributes(props.field, props.errors);
-  const field = {
-    ...props.field,
-    disabled: commonProps.disabled
-  };
-  return props.children({
-    ariaAttributes,
-    commonProps,
-    dataAttributes,
-    field,
-    orientation: props.orientation
+// src/component/field/field-set.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function FieldSet(props) {
+  const { fields = [] } = props.section;
+  const { compact } = mergeStyle(props.style, {
+    compact: props.section.compact
   });
+  const group = /* @__PURE__ */ jsx8(Group, { compact, children: props.children });
+  if (!props.section.title && !props.section.description) {
+    return group;
+  }
+  if (props.section.advanced) {
+    return /* @__PURE__ */ jsx8(FieldSetAdvanced, { section: props.section, group });
+  }
+  return /* @__PURE__ */ jsx8(
+    FieldSetBase,
+    {
+      description: props.section.description,
+      empty: fields.length === 0,
+      id: props.section.id?.toString(),
+      title: props.section.title,
+      children: group
+    }
+  );
 }
 
-// src/component/field/field.tsx
-import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
-function Field(props) {
-  const cols2 = props.field.advanced?.cols;
-  const errors = props.field.name ? props.errors?.[props.field.name] : void 0;
-  const { orientation } = mergeStyle(props.style, {
-    orientation: buildOrientation(props.field)
-  });
-  const disabled = buildDisabled(props.field, props.disabled);
-  return /* @__PURE__ */ jsxs("div", { className: twMerge4("flex flex-col gap-3", getSpan(cols2)), children: [
-    /* @__PURE__ */ jsx6(
-      FieldGroup,
-      {
-        disabled,
-        errors,
-        field: props.field,
-        orientation,
-        children: /* @__PURE__ */ jsx6(
-          InputBase,
-          {
-            disabled,
-            errors,
-            field: props.field,
-            orientation,
-            children: props.children
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx6(FieldError, { errors, name: props.field.name })
-  ] });
-}
+// src/client/component/guard/visibility-guard.tsx
+import { useAtomValue } from "jotai";
 
 // src/client/lib/store-helper.ts
 import { atom } from "jotai";
@@ -1379,179 +1470,80 @@ function createAtomStore(initialValue = {}) {
   };
 }
 
-// src/client/lib/error-store.ts
+// src/client/lib/state-store.ts
 var store = createAtomStore();
-var clearInputErrorAtom = store.clear;
-var reportErrorAtom = store.bulkReport;
-var reportInputErrorAtom = store.report;
+var fieldStateAtom = store.atom;
+var reportFieldStateAtom = store.report;
 
-// src/client/component/wrapper/with-error.tsx
-import { useAtomValue } from "jotai";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function withErrors(Component) {
-  const WithErrors = (props) => {
-    const errors = useAtomValue(reportInputErrorAtom(props.field.name));
-    return /* @__PURE__ */ jsx7(
-      Component,
-      {
-        ...props,
-        errors: errors ? { [props.field.name]: errors } : void 0
-      }
-    );
-  };
-  return WithErrors;
+// src/client/component/guard/visibility-guard.tsx
+function isColumnHidden(column, states) {
+  return column.fields.every((field) => isFieldHidden(field, states));
 }
-
-// src/client/lib/state-store.ts
-var store2 = createAtomStore();
-var fieldStateAtom = store2.atom;
-var reportFieldStateAtom = store2.report;
-
-// src/client/component/wrapper/with-field-state.tsx
-import { useAtomValue as useAtomValue2 } from "jotai";
-import { jsx as jsx8 } from "react/jsx-runtime";
-function withFieldState(Component) {
-  const WithFieldState = (props) => {
-    const fieldState = useAtomValue2(reportFieldStateAtom(props.field.name));
-    const hidden = fieldState?.hidden ?? props.field.hidden ?? false;
-    if (hidden) {
-      return null;
-    }
-    const disabled = fieldState?.disabled ?? props.disabled;
-    return /* @__PURE__ */ jsx8(Component, { ...props, disabled });
-  };
-  return WithFieldState;
+function isFieldHidden(field, states) {
+  return states[field.name]?.hidden ?? field.hidden ?? false;
 }
-
-// src/client/component/wrapper/index.tsx
-var Field2 = withFieldState(withErrors(Field));
-
-// src/component/control.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-function Control(props) {
-  const content = typeof props.children === "function" ? props.children({ isPending: props.isPending }) : props.children;
-  return /* @__PURE__ */ jsx9("div", { "data-slot": "field-control", className: "w-full", children: content });
+function isEntryHidden(entry, states) {
+  return isColumn(entry) ? isColumnHidden(entry, states) : isFieldHidden(entry, states);
 }
-
-// src/component/group.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-function Group(props) {
-  return /* @__PURE__ */ jsx10(
-    "div",
-    {
-      "data-slot": "field-group",
-      "data-compact": props.compact,
-      className: "flex w-full flex-col gap-8 data-[compact=true]:gap-3",
-      children: props.children
-    }
-  );
-}
-
-// src/lib/string.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-function formatMarkdown2(text) {
-  return formatMarkdown(
-    text,
-    (index, url, text2) => {
-      return /* @__PURE__ */ jsx11(
-        "a",
-        {
-          className: "underline",
-          href: url,
-          rel: "noopener noreferrer",
-          target: "_blank",
-          children: text2
-        },
-        `${url}-${index}`
-      );
+function VisibilityGuard(props) {
+  const states = useAtomValue(fieldStateAtom);
+  if (props.container) {
+    const hidden = states[props.container.name]?.hidden ?? props.container.hidden ?? false;
+    if (hidden) {
+      return null;
     }
-  );
-}
-
-// src/component/legend.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
-function Legend(props) {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    props.title && /* @__PURE__ */ jsx12("legend", { className: "mb-3 font-medium text-slate-800 dark:text-slate-200", children: formatMarkdown2(props.title) }),
-    props.description && /* @__PURE__ */ jsx12("p", { className: "-mt-2 text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.description) })
-  ] });
-}
-
-// src/component/field/field-set.tsx
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
-function FieldSet(props) {
-  const fields = props.section.fields || [];
-  const { compact } = mergeStyle(props.style, {
-    compact: props.section.compact
-  });
-  if (!props.section.title && !props.section.description) {
-    return /* @__PURE__ */ jsx13(Group, { compact, children: props.children });
   }
-  return /* @__PURE__ */ jsxs3(
-    "fieldset",
-    {
-      "data-slot": "field-set",
-      "data-empty": fields.length === 0,
-      className: "flex flex-col data-[empty=false]:gap-6",
-      id: props.section.id?.toString(),
-      children: [
-        /* @__PURE__ */ jsx13(
-          Legend,
-          {
-            description: props.section.description,
-            title: props.section.title
-          }
-        ),
-        /* @__PURE__ */ jsx13(Group, { compact, children: props.children })
-      ]
-    }
-  );
+  if (props.fields.length === 0) {
+    return null;
+  }
+  const allHidden = props.fields.every((entry) => isEntryHidden(entry, states));
+  if (allHidden) {
+    return null;
+  }
+  return props.children;
 }
 
-// src/component/form.tsx
-import { Fragment as Fragment2 } from "react";
-
 // src/component/separator.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Separator() {
-  return /* @__PURE__ */ jsx14("div", { "data-slot": "field-separator", className: "relative -my-2 h-5 text-sm", children: /* @__PURE__ */ jsx14("div", { className: "absolute inset-0 top-1/2 h-px w-full bg-slate-200 dark:bg-slate-800" }) });
+  return /* @__PURE__ */ jsx9("div", { "data-slot": "field-separator", className: "relative -my-2 h-5 text-sm", children: /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 top-1/2 h-px w-full bg-slate-200 dark:bg-slate-800" }) });
 }
 
 // src/component/form.tsx
-import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function Form(props) {
   const sections = prepare(props.sections, props.definition);
-  return /* @__PURE__ */ jsx15("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx15("form", { noValidate: props.noValidate, action: props.action, children: /* @__PURE__ */ jsxs4(Group, { children: [
-    sections.map((section, index) => /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx15(FieldSet, { section, style: props.config.style, children: props.children({
+  return /* @__PURE__ */ jsx10("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx10("form", { noValidate: props.noValidate, action: props.action, children: /* @__PURE__ */ jsxs4(Group, { children: [
+    sections.map((section, index) => /* @__PURE__ */ jsxs4(VisibilityGuard, { fields: section.fields ?? [], children: [
+      /* @__PURE__ */ jsx10(FieldSet, { section, style: props.config.style, children: props.children({
         disabled: props.readOnly,
         fields: section.fields
       }) }),
-      section.separator && /* @__PURE__ */ jsx15(Separator, {})
+      section.separator && /* @__PURE__ */ jsx10(Separator, {})
     ] }, index)),
-    props.control && /* @__PURE__ */ jsx15(Control, { isPending: props.isPending, children: props.control })
+    props.control && /* @__PURE__ */ jsx10(Control, { isPending: props.isPending, children: props.control })
   ] }) }) });
 }
 
 // src/component/description.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Description(props) {
-  return /* @__PURE__ */ jsx16("p", { className: "-mt-2 text-xs leading-normal font-normal text-slate-600 dark:text-slate-400", children: props.children });
+  return /* @__PURE__ */ jsx11("p", { className: "-mt-2 text-xs leading-normal font-normal text-slate-600 dark:text-slate-400", children: props.children });
 }
 
 // src/component/formatted-description.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function FormattedDescription(props) {
   const content = formatMarkdown2(props.text);
   if (content) {
-    return /* @__PURE__ */ jsx17(Description, { children: content });
+    return /* @__PURE__ */ jsx12(Description, { children: content });
   }
   return null;
 }
 
 // src/component/label.tsx
-import { twMerge as twMerge5 } from "tailwind-merge";
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function Label(props) {
   const showOptionalLabel = props.style?.showOptionalLabel ?? true;
   const normal = isRadio(props.field) || isCheckbox(props.field);
@@ -1560,7 +1552,7 @@ function Label(props) {
     {
       "data-slot": "field-label",
       "data-normal": normal,
-      className: twMerge5(
+      className: twMerge(
         "flex w-fit items-center gap-2 text-sm leading-snug font-medium select-none",
         "data-[normal=true]:font-normal",
         "group-data-[readonly=true]:cursor-not-allowed group-data-[readonly=true]:opacity-50"
@@ -1568,30 +1560,31 @@ function Label(props) {
       htmlFor: props.field.name,
       children: [
         props.children,
-        showOptionalLabel && !props.field.required && /* @__PURE__ */ jsx18("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
+        showOptionalLabel && !props.field.required && /* @__PURE__ */ jsx13("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
       ]
     }
   );
 }
 
 // src/component/input-label.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function InputLabel(props) {
-  const label = isInterpolated(props.field.label) ? interpolate(props.field.label, {
+  const interpolateOpts = {
     context: props.context,
     env: props.config?.env
-  }) : props.field.label;
-  const description = isInterpolated(props.field.description) ? interpolate(props.field.description, {
-    context: props.context,
-    env: props.config?.env
-  }) : props.field.description;
+  };
+  const label = interpolateIfNeeded(props.field.label, interpolateOpts);
+  const description = interpolateIfNeeded(
+    props.field.description,
+    interpolateOpts
+  );
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-slot": "field-content",
       className: "flex w-full flex-1 flex-col gap-1.5 leading-snug",
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx14(
           Label,
           {
             field: props.field,
@@ -1600,7 +1593,7 @@ function InputLabel(props) {
             children: translate(label, props.translations)
           }
         ),
-        props.orientation === HORIZONTAL && /* @__PURE__ */ jsx19(
+        props.orientation === HORIZONTAL && /* @__PURE__ */ jsx14(
           FormattedDescription,
           {
             text: translate(description, props.translations)
@@ -1612,10 +1605,10 @@ function InputLabel(props) {
 }
 
 // src/component/input-group.tsx
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function InputGroup(props) {
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    props.field.name && props.field.label && /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    props.field.name && props.field.label && /* @__PURE__ */ jsx15(
       InputLabel,
       {
         config: props.config,
@@ -1626,7 +1619,7 @@ function InputGroup(props) {
       }
     ),
     props.children,
-    props.orientation === VERTICAL && props.field.description && /* @__PURE__ */ jsx20(
+    props.orientation === VERTICAL && props.field.description && /* @__PURE__ */ jsx15(
       FormattedDescription,
       {
         text: translate(props.field.description, props.translations)
@@ -1643,8 +1636,14 @@ function renderIfExists(value, render) {
   return render(value);
 }
 
+// src/client/lib/error-store.ts
+var store2 = createAtomStore();
+var clearInputErrorAtom = store2.clear;
+var reportErrorAtom = store2.bulkReport;
+var reportInputErrorAtom = store2.report;
+
 // src/client/component/input.tsx
-import { useCallback as useCallback3, useRef as useRef3, useTransition } from "react";
+import { useCallback as useCallback4, useRef as useRef3, useTransition } from "react";
 
 // src/client/lib/source-store.ts
 import { atom as atom2 } from "jotai";
@@ -1750,7 +1749,7 @@ function useInput(field, onMount, onUnmount, translations) {
 import { useSetAtom, useStore } from "jotai";
 
 // src/client/hook/use-timeout.ts
-import { useCallback, useEffect as useEffect2, useRef } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
 function useTimeout() {
   const timeoutRef = useRef(null);
   useEffect2(() => {
@@ -1760,14 +1759,11 @@ function useTimeout() {
       }
     };
   }, []);
-  function clearTimeoutRef() {
+  const setTimeoutRef = useCallback2((callback, delay) => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
-  }
-  const setTimeoutRef = useCallback((callback, delay) => {
-    clearTimeoutRef();
     timeoutRef.current = setTimeout(callback, delay);
   }, []);
   return setTimeoutRef;
@@ -1782,26 +1778,27 @@ var reportValueAtom = store3.report;
 
 // src/client/hook/use-value.ts
 import { useAtom as useAtom2 } from "jotai";
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useEffectEvent as useEffectEvent2 } from "react";
 function useValue(field, currentValue) {
   const { name } = field;
   const skipNextOnChangeRef = useRef2(false);
   const [value, setValue] = useAtom2(reportValueAtom(name));
+  const onCurrentValueChange = useEffectEvent2(
+    (currentValue2) => {
+      const newValue = resolveValue(name, currentValue2);
+      if (isValidValue(newValue)) {
+        skipNextOnChangeRef.current = true;
+        setValue(newValue);
+      }
+    }
+  );
   useEffect3(() => {
-    if (!currentValue || !(name in currentValue)) {
+    if (!currentValue) {
       return;
     }
-    const newValue = currentValue[name];
-    if (isValidValue(newValue)) {
-      logger.info("useValue: setting skipNextOnChange to true", {
-        fieldName: name,
-        newValue
-      });
-      skipNextOnChangeRef.current = true;
-      setValue(newValue);
-    }
-  }, [name, currentValue, setValue]);
-  const shouldSkipOnChange = useCallback2(() => {
+    onCurrentValueChange(currentValue);
+  }, [currentValue]);
+  const shouldSkipOnChange = useCallback3(() => {
     if (skipNextOnChangeRef.current) {
       skipNextOnChangeRef.current = false;
       return true;
@@ -1814,14 +1811,38 @@ function useValue(field, currentValue) {
     value
   };
 }
+function resolveValue(name, currentValue) {
+  if (name in currentValue) {
+    return currentValue[name];
+  }
+  if (!name.includes(".")) {
+    return void 0;
+  }
+  const keys = name.split(".");
+  let result = currentValue;
+  for (const key of keys) {
+    if (result === null || result === void 0) {
+      return void 0;
+    }
+    if (Array.isArray(result)) {
+      const index = Number(key);
+      result = Number.isInteger(index) ? result[index] : void 0;
+    } else if (typeof result === "object") {
+      result = result[key];
+    } else {
+      return void 0;
+    }
+  }
+  return result;
+}
 
 // src/client/component/input.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Input(props) {
   const entity = props.field.advanced?.entity;
   const store4 = useStore();
   const setTimeoutRef = useTimeout();
-  const [, startTransition3] = useTransition();
+  const [, startTransition2] = useTransition();
   const { setValue, shouldSkipOnChange, value } = useValue(
     props.field,
     props.value
@@ -1864,7 +1885,7 @@ function Input(props) {
     }
   };
   const inputProps = prepareInputValue(props.field, defaultValue);
-  const validated = useCallback3(
+  const validated = useCallback4(
     (value2) => {
       const results = schema.safeParse(value2);
       const errors = results.error?.issues.map((issue) => issue.message) ?? [];
@@ -1879,7 +1900,7 @@ function Input(props) {
     },
     [props.field.validation?.custom, schema, setErrors, store4]
   );
-  const handleTriggerEvent = useCallback3(
+  const handleTriggerEvent = useCallback4(
     (value2, callback) => {
       if (hasTextable) {
         setTimeoutRef(() => {
@@ -1887,37 +1908,18 @@ function Input(props) {
         }, 500);
         return;
       }
-      const currentValue = getEntity(value2, data, entity);
-      callback(currentValue);
+      callback(getEntity(value2, data, entity));
     },
     [data, entity, hasTextable, setTimeoutRef]
   );
-  const onChange = useCallback3(
+  const onChange = useCallback4(
     (event) => {
       const inputValue = event.target.value;
-      logger.info("onChange fired", {
-        fieldName: props.field.name,
-        fieldType: props.field.type,
-        inputValue,
-        currentValue: valueRef.current,
-        hasTextable,
-        hasClickable
-      });
       if (!hasClickable && shouldSkipOnChange()) {
-        logger.info("shouldSkipOnChange returned true", {
-          fieldName: props.field.name,
-          willSkip: !hasTextable || inputValue === valueRef.current,
-          reason: !hasTextable ? "not textable (checkbox/radio/select)" : "value unchanged"
-        });
         if (!hasTextable || inputValue === valueRef.current) {
-          logger.info("SKIPPING onChange", { fieldName: props.field.name });
           return;
         }
       }
-      logger.info("onChange processing", {
-        fieldName: props.field.name,
-        inputValue
-      });
       onValueChangeRef.current?.(inputValue);
       if (props.config.validation.change) {
         validated(inputValue);
@@ -1926,19 +1928,32 @@ function Input(props) {
       if (events) {
         handleTriggerEvent(inputValue, (selected) => {
           handleProxyEvent(events, ({ sources, states, values }) => {
-            startTransition3(() => {
+            startTransition2(() => {
               handleSourceEvent(
                 selected,
                 sources,
                 (target, source) => setSource(target, source)
               );
-              handleStateEvent(selected, states, (target, state) => {
+              handleStateEvent(selected, states, (targets, state) => {
+                logger.info(
+                  `Setting field states for targets: ${targets.join(
+                    ", "
+                  )} with state: ${JSON.stringify(state)}`
+                );
                 setFieldStates((prev) => {
                   if (state) {
-                    return { ...prev, [target]: state };
+                    return targets.reduce(
+                      (acc, target) => ({
+                        ...acc,
+                        [target]: state
+                      }),
+                      prev
+                    );
                   }
-                  const { [target]: _removed, ...rest } = prev;
-                  return rest;
+                  return targets.reduce((acc, target) => {
+                    const { [target]: _removed, ...rest } = acc;
+                    return rest;
+                  }, prev);
                 });
               });
               handleValueEvent(selected, values, (target, value2) => {
@@ -1958,8 +1973,6 @@ function Input(props) {
       hasTextable,
       props.config.validation.change,
       props.field.event?.change,
-      props.field.name,
-      props.field.type,
       setFieldStates,
       setSource,
       setValues,
@@ -1967,7 +1980,7 @@ function Input(props) {
       validated
     ]
   );
-  const onBlur = useCallback3(
+  const onBlur = useCallback4(
     (event) => {
       if (!hasClickable) {
         const value2 = event.target.value;
@@ -1978,7 +1991,7 @@ function Input(props) {
     },
     [hasClickable, props.config.validation.blur, validated]
   );
-  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ jsx21(
+  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ jsx16(
     InputGroup,
     {
       config: props.config,
@@ -1986,7 +1999,7 @@ function Input(props) {
       field: props.field,
       orientation: props.orientation,
       translations: props.translations,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx16(
         Component,
         {
           ...commonPropsWithOptions,
@@ -2001,39 +2014,493 @@ function Input(props) {
   ));
 }
 
-// src/component/column.tsx
+// src/component/field/field-error.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function FieldError(props) {
+  if (!props.errors || props.errors.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx17(
+    "ul",
+    {
+      className: "text-sm text-red-600 dark:text-red-500",
+      id: props.name ? `${props.name}-error` : void 0,
+      children: props.errors?.map((error, index) => /* @__PURE__ */ jsx17("li", { children: error }, props.name ? `${props.name}-error-${index}` : index))
+    }
+  );
+}
+
+// src/component/field/field-base.tsx
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function FieldBase(props) {
+  const errors = props.errors && props.errors.length > 0;
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      "data-slot": "field",
+      "data-clickable": props.isClickable ? "true" : "false",
+      ...errors && { [DATA_INVALID]: "true" },
+      ...props.disabled && { [DATA_READONLY]: "true" },
+      "data-orientation": props.orientation,
+      className: twMerge2(
+        "group flex w-full flex-col items-center data-[invalid=true]:text-red-600 data-[invalid=true]:dark:text-red-500",
+        "data-[clickable=true]:items-start",
+        props.isCheckbox && (props.isReversed ? "flex-row-reverse!" : "flex-row!"),
+        "data-[clickable=true]:has-[>[data-slot=field-content]]:[&>:first-child]:mt-px",
+        props.className
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/component/field/field-vertical.tsx
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function FieldVertical(props) {
+  return /* @__PURE__ */ jsx19(
+    FieldBase,
+    {
+      ...props,
+      orientation: VERTICAL,
+      className: twMerge3(
+        "gap-3 has-[>[data-slot=field-content]]:items-start",
+        !props.isClickable && "[&>*]:w-full"
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/component/field/field-horizontal.tsx
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function FieldHorizontal(props) {
+  return /* @__PURE__ */ jsx20(
+    FieldBase,
+    {
+      ...props,
+      orientation: HORIZONTAL,
+      className: twMerge4(
+        "gap-2 md:flex-row md:gap-4",
+        "[&>[data-slot=field-content]]:min-w-0 [&>[data-slot=field-content]]:flex-grow [&>[data-slot=field-content]]:self-start",
+        "[&_[role=checkbox]]:mt-[1.5px]",
+        props.isClickable && "md:flex-col",
+        !props.isClickable && [
+          "md:justify-between",
+          "[&>*:not([data-slot=field-content])]:w-full",
+          "[&>*:not([data-slot=field-content])]:md:w-1/2",
+          "[&>*:not([data-slot=field-content])]:xl:w-2/5"
+        ]
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/component/field/field-group.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function FieldGroup(props) {
+  const clickable = isClickable(props.field);
+  const checkbox = isCheckbox(props.field);
+  const reversed = buildReverse(props.field);
+  if (props.orientation === VERTICAL) {
+    return /* @__PURE__ */ jsx21(
+      FieldVertical,
+      {
+        disabled: props.disabled,
+        errors: props.errors,
+        isCheckbox: checkbox,
+        isReversed: reversed,
+        isClickable: clickable,
+        children: props.children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx21(
+    FieldHorizontal,
+    {
+      disabled: props.disabled,
+      errors: props.errors,
+      isCheckbox: checkbox,
+      isReversed: reversed,
+      isClickable: clickable,
+      children: props.children
+    }
+  );
+}
+
+// src/component/input/input-base.tsx
+function InputBase(props) {
+  if (!props.field.type) {
+    return null;
+  }
+  const commonProps = buildCommon(props.field, props.disabled);
+  const dataAttributes = buildDataAttributes(props.field);
+  const ariaAttributes = buildAriaAttributes(props.field, props.errors);
+  const field = {
+    ...props.field,
+    disabled: commonProps.disabled
+  };
+  return props.children({
+    ariaAttributes,
+    commonProps,
+    dataAttributes,
+    field,
+    orientation: props.orientation
+  });
+}
+
+// src/component/field/field.tsx
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+function Field(props) {
+  const cols2 = props.field.advanced?.cols;
+  const errors = props.field.name ? props.errors?.[props.field.name] : void 0;
+  const { orientation } = mergeStyle(props.style, {
+    orientation: buildOrientation(props.field)
+  });
+  const disabled = buildDisabled(props.field, props.disabled);
+  return /* @__PURE__ */ jsxs8("div", { className: twMerge5("flex flex-col gap-3", getSpan(cols2)), children: [
+    /* @__PURE__ */ jsx22(
+      FieldGroup,
+      {
+        disabled,
+        errors,
+        field: props.field,
+        orientation,
+        children: /* @__PURE__ */ jsx22(
+          InputBase,
+          {
+            disabled,
+            errors,
+            field: props.field,
+            orientation,
+            children: props.children
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx22(FieldError, { errors, name: props.field.name })
+  ] });
+}
+
+// src/client/component/field/field-with-error.tsx
+import { useAtomValue as useAtomValue2 } from "jotai";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function withError(Component) {
+  const WithError = (props) => {
+    const errors = useAtomValue2(reportInputErrorAtom(props.field.name));
+    return /* @__PURE__ */ jsx23(
+      Component,
+      {
+        ...props,
+        errors: errors ? { [props.field.name]: errors } : void 0
+      }
+    );
+  };
+  return WithError;
+}
+
+// src/client/component/field/field-with-state.tsx
+import { useAtomValue as useAtomValue3 } from "jotai";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function withState(Component) {
+  const WithFieldState = (props) => {
+    const fieldState = useAtomValue3(reportFieldStateAtom(props.field.name));
+    const hidden = fieldState?.hidden ?? props.field.hidden ?? false;
+    if (hidden) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx24(Component, { ...props, disabled: fieldState?.disabled ?? props.disabled });
+  };
+  return WithFieldState;
+}
+
+// src/client/component/field/field.tsx
+var Field2 = withState(withError(Field));
+
+// src/component/field/field-list-item.tsx
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+function FieldListItem(props) {
+  function handleRemove() {
+    if (props.canRemove && props.onRemove) {
+      props.onRemove(props.index);
+    }
+  }
+  const removeButton = props.canRemove && props.onRemove != null && /* @__PURE__ */ jsx25(
+    "button",
+    {
+      "aria-label": `Remove ${props.label} item ${props.index + 1}`,
+      className: twMerge6(
+        "rounded p-1 text-xl text-slate-400",
+        "transition-colors duration-150",
+        "hover:text-red-500",
+        "focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:outline-none",
+        "dark:text-slate-500 dark:hover:text-red-400"
+      ),
+      onClick: handleRemove,
+      type: "button",
+      children: /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: "\xD7" })
+    }
+  );
+  if (props.isMultiField) {
+    return /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-slate-100 p-4 dark:border-slate-900", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "mb-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "text-sm font-medium text-slate-400 dark:text-slate-500", children: [
+          props.label,
+          " ",
+          props.index + 1
+        ] }),
+        removeButton
+      ] }),
+      /* @__PURE__ */ jsx25(Group, { children: props.children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx25(Group, { children: props.children }),
+    removeButton && /* @__PURE__ */ jsx25("div", { className: "shrink-0", children: removeButton })
+  ] });
+}
+
+// src/client/component/field/field-list.tsx
+import { twMerge as twMerge7 } from "tailwind-merge";
+
+// src/client/hook/use-field-list.ts
+import { useSetAtom as useSetAtom2 } from "jotai";
+import { useCallback as useCallback5, useRef as useRef4, useState as useState2 } from "react";
+function useFieldList(field, value) {
+  const min2 = field.advanced?.length?.min ?? 1;
+  const max2 = field.advanced?.length?.max ?? Infinity;
+  const [items, setItems] = useState2(
+    () => getInitialList(field, value)
+  );
+  const nextId = useRef4(items.length);
+  const itemsRef = useRef4(items);
+  itemsRef.current = items;
+  const setValues = useSetAtom2(valueAtom);
+  const addItem = useCallback5(() => {
+    setItems((previous) => {
+      if (previous.length >= max2) {
+        return previous;
+      }
+      const id = nextId.current++;
+      return [...previous, id];
+    });
+  }, [max2]);
+  const handleRemove = useCallback5(
+    (index) => {
+      if (items.length <= min2) {
+        return;
+      }
+      const stableId = items[index];
+      setItems((previous) => {
+        if (previous.length <= min2) {
+          return previous;
+        }
+        return previous.filter((_, i) => i !== index);
+      });
+      setValues((current) => {
+        const next = { ...current };
+        const prefix = `${field.name}.`;
+        const leafNames = [];
+        for (const row of field.fields) {
+          if (isColumn(row)) {
+            for (const columnField of row.fields) {
+              leafNames.push(columnField.name);
+            }
+          } else {
+            leafNames.push(row.name);
+          }
+        }
+        for (const name of leafNames) {
+          delete next[`${prefix}${stableId}.${name}`];
+        }
+        return next;
+      });
+    },
+    [field.name, field.fields, items, min2, setValues]
+  );
+  const canAdd = items.length < max2;
+  const canRemove = items.length > min2;
+  return [items, addItem, handleRemove, canAdd, canRemove, max2];
+}
+
+// src/client/component/field/field-list.tsx
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+function FieldList(props) {
+  const [items, addItem, handleRemove, canAdd, canRemove, max2] = useFieldList(
+    props.field,
+    props.value
+  );
+  const label = getLabel(props.field);
+  const action = props.field.advanced?.action ?? "Add item";
+  const hasLimit = max2 !== Infinity;
+  const isMultiField = isMultiFieldList(props.field);
+  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    items.map((key, index) => /* @__PURE__ */ jsx26(
+      FieldListItem,
+      {
+        canRemove,
+        index,
+        isMultiField,
+        label,
+        onRemove: handleRemove,
+        children: props.children(key)
+      },
+      key
+    )),
+    /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        "aria-disabled": !canAdd,
+        "aria-label": hasLimit ? `${action}, ${items.length} of ${max2}` : action,
+        className: twMerge7(
+          "flex w-full items-center gap-1.5 rounded py-1",
+          "text-sm font-medium text-slate-500",
+          "transition-colors duration-150",
+          "hover:text-slate-800",
+          "focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:outline-none",
+          "dark:text-slate-400 dark:hover:text-slate-200",
+          !canAdd && "cursor-not-allowed opacity-50 hover:text-slate-500 dark:hover:text-slate-400"
+        ),
+        disabled: !canAdd,
+        onClick: addItem,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: "+" }),
+          action,
+          hasLimit && /* @__PURE__ */ jsxs10(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ml-auto text-slate-400 tabular-nums dark:text-slate-500",
+              children: [
+                items.length,
+                " / ",
+                max2
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/component/list.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+function List(props) {
+  const empty = Array.isArray(props.field.fields) && props.field.fields.length === 0;
+  return /* @__PURE__ */ jsx27(
+    FieldSetBase,
+    {
+      description: props.field.description,
+      empty,
+      id: props.field.name,
+      title: props.field.label,
+      children: props.children
+    }
+  );
+}
+
+// src/client/component/guard/list-guard.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+function ListGuard({ children, field, value }) {
+  return /* @__PURE__ */ jsx28(VisibilityGuard, { container: field, fields: field.fields, children: /* @__PURE__ */ jsx28(List, { field, children: /* @__PURE__ */ jsx28(FieldList, { field, value, children }) }) });
+}
+
+// src/component/column.tsx
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Column(props) {
   const cols2 = getColumn(props.column?.advanced?.cols);
-  return /* @__PURE__ */ jsx22("div", { className: "flex w-full flex-col gap-4", children: /* @__PURE__ */ jsx22("div", { className: twMerge6("grid grid-cols-1 gap-3 sm:gap-4", cols2), children: props.children }) });
+  return /* @__PURE__ */ jsx29("div", { className: "flex w-full flex-col gap-4", children: /* @__PURE__ */ jsx29("div", { className: twMerge8("grid grid-cols-1 gap-3 sm:gap-4", cols2), children: props.children }) });
 }
 
 // src/component/slot/slot-base.tsx
 import { Fragment as Fragment4 } from "react";
-import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// src/component/slot/slot-list.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function SlotList(props) {
+  const fields = Array.isArray(props.field.fields) ? props.field.fields.map((field) => {
+    if (isField(field)) {
+      return {
+        ...field,
+        name: `${props.field.name}.${props.index}.${field.name}`
+      };
+    }
+    if (isColumn(field)) {
+      return {
+        ...field,
+        fields: field.fields.map((columnField) => ({
+          ...columnField,
+          name: `${props.field.name}.${props.index}.${columnField.name}`
+        }))
+      };
+    }
+    return field;
+  }) : [];
+  return /* @__PURE__ */ jsx30(
+    SlotBase,
+    {
+      children: props.children,
+      components: props.components,
+      disabled: props.disabled,
+      fields,
+      style: props.style,
+      value: props.value
+    }
+  );
+}
+
+// src/component/slot/slot-base.tsx
+import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 function SlotBase(props) {
-  const { column: Column2, field: Field3 } = props.components;
-  return prepare(props.fields).map((field, index) => /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    isColumn(field) && /* @__PURE__ */ jsx23(Column2, { column: field, children: /* @__PURE__ */ jsx23(SlotBase, { ...props, fields: field.fields }) }),
-    isField(field) && /* @__PURE__ */ jsx23(Field3, { disabled: props.disabled, field, style: props.style, children: props.children })
+  const { field: Field3, list: List2 } = props.components;
+  return prepare(props.fields).map((field, index) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    isColumn(field) && /* @__PURE__ */ jsx31(Column, { column: field, children: /* @__PURE__ */ jsx31(SlotBase, { ...props, fields: field.fields }) }),
+    isField(field) && /* @__PURE__ */ jsx31(Field3, { disabled: props.disabled, field, style: props.style, children: props.children }),
+    isList(field) && /* @__PURE__ */ jsx31(List2, { field, value: props.value, children: (index2) => /* @__PURE__ */ jsx31(
+      SlotList,
+      {
+        children: props.children,
+        components: props.components,
+        disabled: props.disabled,
+        field,
+        index: index2,
+        style: props.style,
+        value: props.value
+      }
+    ) })
   ] }, index));
 }
 
 // src/component/slot/slot-create.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
-function createSlot(Field3) {
-  const CreateSlot = (props) => /* @__PURE__ */ jsx24(SlotBase, { ...props, components: { column: Column, field: Field3 } });
+import { jsx as jsx32 } from "react/jsx-runtime";
+function createSlot(components) {
+  const CreateSlot = (props) => /* @__PURE__ */ jsx32(SlotBase, { ...props, components });
   return CreateSlot;
 }
 
+// src/client/component/slot/slot.tsx
+var Slot = createSlot({ field: Field2, list: ListGuard });
+
 // src/client/hook/use-form-action.ts
-import { useSetAtom as useSetAtom2 } from "jotai";
+import { useSetAtom as useSetAtom3 } from "jotai";
 import { startTransition, useActionState } from "react";
 function useFormState(getSchema2, action, options) {
-  const { onSuccess, preserveValues = false, validation = true } = options ?? {};
-  const setError = useSetAtom2(reportErrorAtom);
-  const clearValues = useSetAtom2(clearAllValueAtom);
+  const {
+    onSuccess,
+    preserveValues = false,
+    validation = true,
+    translations
+  } = options ?? {};
+  const setError = useSetAtom3(reportErrorAtom);
+  const clearValues = useSetAtom3(clearAllValueAtom);
   const initialState = {
     data: null,
     error: null,
@@ -2042,7 +2509,7 @@ function useFormState(getSchema2, action, options) {
   const [state, formAction, isPending] = useActionState(
     async (prevState, formData) => {
       const [schemas, fields] = getSchema2();
-      const schema = buildSchema(schemas, fields, options?.translations);
+      const schema = buildSchema(schemas, fields, translations);
       if (validation === false) {
         if (action) {
           return await action(formData, schema);
@@ -2057,16 +2524,23 @@ function useFormState(getSchema2, action, options) {
           setError(errors);
         });
         return failure(form, {
-          description: "Please correct the errors and try again.",
+          description: translate(
+            "Please correct the errors and try again.",
+            translations
+          ),
           details: [],
-          title: "There were validation errors submitting the form."
+          title: translate(
+            "There were validation errors submitting the form.",
+            translations
+          )
         });
       }
+      const unflattened = unflatten(form);
       if (action) {
         try {
-          const result = await action(form, schema);
+          const result = await action(unflattened, schema);
           if (!result.success) {
-            return failure(form, result.error);
+            return failure(unflattened, result.error);
           }
           onSuccess?.(result.data);
           if (!preserveValues) {
@@ -2074,12 +2548,15 @@ function useFormState(getSchema2, action, options) {
               clearValues();
             });
           }
-          return success(form, preserveValues);
+          return success(unflattened, preserveValues);
         } catch (error) {
           logger.error("Error executing form action:", error);
-          return failure(form, {
-            title: "An unexpected error occurred submitting the form.",
-            details: buildError(error)
+          return failure(unflattened, {
+            title: translate(
+              "An unexpected error occurred submitting the form.",
+              translations
+            ),
+            details: buildError(error, translations)
           });
         }
       }
@@ -2089,9 +2566,11 @@ function useFormState(getSchema2, action, options) {
   );
   return [formAction, state, isPending];
 }
-function buildError(error) {
-  const detail = error instanceof Error ? error.message : ["Unknown error"];
-  return Array.isArray(detail) ? detail : [detail];
+function buildError(error, translations) {
+  if (error instanceof Error) {
+    return [error.message];
+  }
+  return [translate("Unknown error", translations)];
 }
 function success(value, preserveValues = false) {
   const data = preserveValues ? value : null;
@@ -2110,16 +2589,16 @@ function failure(value, error) {
 }
 
 // src/client/hook/use-schema.ts
-import { startTransition as startTransition2, useCallback as useCallback5, useRef as useRef4 } from "react";
+import { useCallback as useCallback7, useRef as useRef5 } from "react";
 
 // src/client/hook/use-store.ts
-import { useCallback as useCallback4 } from "react";
-import { useSetAtom as useSetAtom3 } from "jotai";
+import { useCallback as useCallback6 } from "react";
+import { useSetAtom as useSetAtom4 } from "jotai";
 function useStore2() {
-  const clearErrors = useSetAtom3(clearInputErrorAtom);
-  const clearSources = useSetAtom3(clearInputSourceAtom);
-  const clearValues = useSetAtom3(clearInputValueAtom);
-  return useCallback4(
+  const clearErrors = useSetAtom4(clearInputErrorAtom);
+  const clearValues = useSetAtom4(clearInputValueAtom);
+  const clearSources = useSetAtom4(clearInputSourceAtom);
+  return useCallback6(
     (names) => {
       const target = Array.isArray(names) ? names : [names];
       clearErrors(target);
@@ -2133,42 +2612,34 @@ function useStore2() {
 // src/client/hook/use-schema.ts
 function useSchema() {
   const clear = useStore2();
-  const schemaRef = useRef4({});
-  const fieldsRef = useRef4([]);
-  const pendingUnmounts = useRef4(/* @__PURE__ */ new Set());
-  const onMount = useCallback5((name, schema, field) => {
+  const schemaRef = useRef5({});
+  const fieldsRef = useRef5([]);
+  const onMount = useCallback7((name, schema, field) => {
     if (!(name in schemaRef.current)) {
       schemaRef.current[name] = schema;
       fieldsRef.current.push(field);
     }
   }, []);
-  const onUnmount = useCallback5(
+  const onUnmount = useCallback7(
     (name) => {
       if (schemaRef.current[name]) {
         delete schemaRef.current[name];
         fieldsRef.current = fieldsRef.current.filter((field) => {
           return field.name !== name;
         });
-        pendingUnmounts.current.add(name);
-        startTransition2(() => {
-          if (pendingUnmounts.current.size > 0) {
-            clear(Array.from(pendingUnmounts.current));
-            pendingUnmounts.current.clear();
-          }
-        });
+        clear([name]);
       }
     },
     [clear]
   );
-  function getSchema2() {
+  const getSchema2 = useCallback7(() => {
     return [schemaRef.current, fieldsRef.current];
-  }
+  }, []);
   return [getSchema2, onMount, onUnmount];
 }
 
 // src/client/component/form-content.tsx
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
-var Slot = createSlot(Field2);
+import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
 function FormContent(props) {
   const translations = props.translations?.[props.lang ?? ""];
   const [schema, onMount, onUnmount] = useSchema();
@@ -2179,8 +2650,8 @@ function FormContent(props) {
   });
   const isShowingError = props.config.validation.showError && !state.success && state.error;
   const value = state.data ?? props.value;
-  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    isShowingError && renderIfExists(props.config.alert, (Alert) => /* @__PURE__ */ jsx25("div", { className: "mb-4 w-full", children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    isShowingError && renderIfExists(props.config.alert, (Alert) => /* @__PURE__ */ jsx33("div", { className: "mb-4 w-full", children: /* @__PURE__ */ jsx33(
       Alert,
       {
         description: state.error?.description,
@@ -2188,7 +2659,7 @@ function FormContent(props) {
         title: state.error.title
       }
     ) })),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx33(
       Form,
       {
         action,
@@ -2199,19 +2670,28 @@ function FormContent(props) {
         noValidate: true,
         readOnly: props.readOnly,
         sections: props.sections,
-        children: ({ disabled, fields }) => /* @__PURE__ */ jsx25(Slot, { disabled, fields, style: props.config.style, children: (internal) => /* @__PURE__ */ jsx25(
-          Input,
+        children: ({ disabled, fields }) => /* @__PURE__ */ jsx33(
+          Slot,
           {
-            ...internal,
-            config: props.config,
-            context: props.context,
-            onMount,
-            onUnmount,
-            onValueChange: props.onValueChange,
-            translations,
-            value
+            disabled,
+            fields,
+            style: props.config.style,
+            value,
+            children: (internal) => /* @__PURE__ */ jsx33(
+              Input,
+              {
+                ...internal,
+                config: props.config,
+                context: props.context,
+                onMount,
+                onUnmount,
+                onValueChange: props.onValueChange,
+                translations,
+                value
+              }
+            )
           }
-        ) })
+        )
       }
     )
   ] });
@@ -2219,9 +2699,9 @@ function FormContent(props) {
 
 // src/client/component/form.tsx
 import { Provider } from "jotai";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Form2(props) {
-  return /* @__PURE__ */ jsx26(Provider, { children: /* @__PURE__ */ jsx26(FormContent, { ...props }) });
+  return /* @__PURE__ */ jsx34(Provider, { children: /* @__PURE__ */ jsx34(FormContent, { ...props }) });
 }
 export {
   Form2 as Form