@resistdesign/voltra 3.0.0-alpha.2 → 3.0.0-alpha.21

package/web/index.js

@@ -0,0 +1,1297 @@
+import * as styledBase from 'styled-components';
+import styledBase__default from 'styled-components';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useEffect, useRef, useMemo, useState, useCallback } from 'react';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget);
+
+// src/app/forms/core/getFieldKind.ts
+var hasSelectableValues = (field) => {
+  const possibleValues = field.possibleValues ?? [];
+  return possibleValues.some(
+    (value) => typeof value === "string" || typeof value === "number"
+  );
+};
+var getFieldKind = (field) => {
+  if (field.typeReference) {
+    return field.array ? "relation_array" : "relation_single";
+  }
+  if (field.tags?.customType) {
+    return field.array ? "custom_array" : "custom_single";
+  }
+  if (field.array) {
+    return "array";
+  }
+  if (hasSelectableValues(field)) {
+    return "enum_select";
+  }
+  if (field.type === "boolean") {
+    return "boolean";
+  }
+  if (field.type === "number") {
+    return "number";
+  }
+  return "string";
+};
+
+// src/app/forms/core/resolveSuite.ts
+var fieldKinds = [
+  "string",
+  "number",
+  "boolean",
+  "enum_select",
+  "array",
+  "relation_single",
+  "relation_array",
+  "custom_single",
+  "custom_array"
+];
+var getMissingKinds = (renderers) => {
+  return fieldKinds.filter((kind) => !renderers[kind]);
+};
+var resolveSuite = (overrides, fallback) => {
+  const mergedRenderers = {
+    ...fallback.renderers ?? {},
+    ...overrides?.renderers ?? {}
+  };
+  const missingKinds = getMissingKinds(mergedRenderers);
+  if (missingKinds.length) {
+    throw new Error(
+      `Missing renderers for field kinds: ${missingKinds.join(", ")}`
+    );
+  }
+  const mergedPrimitives = {
+    ...fallback.primitives ?? {},
+    ...overrides?.primitives ?? {}
+  };
+  return {
+    renderers: mergedRenderers,
+    primitives: Object.keys(mergedPrimitives).length ? mergedPrimitives : void 0
+  };
+};
+
+// src/app/forms/core/createAutoField.ts
+var createAutoField = (suite) => {
+  return (props) => {
+    const { field, fieldKey, value, onChange, error, disabled } = props;
+    const { tags } = field;
+    const context = {
+      field,
+      fieldKey,
+      label: tags?.label ?? fieldKey,
+      required: !field.optional,
+      disabled: !!disabled,
+      error,
+      value,
+      onChange,
+      constraints: tags?.constraints,
+      format: tags?.format,
+      possibleValues: field.possibleValues,
+      allowCustomSelection: tags?.allowCustomSelection,
+      customType: tags?.customType,
+      onRelationAction: props.onRelationAction,
+      onCustomTypeAction: props.onCustomTypeAction
+    };
+    const kind = getFieldKind(field);
+    return suite.renderers[kind](context);
+  };
+};
+
+// src/app/forms/core/createFormRenderer.ts
+var createFormRenderer = (options) => {
+  const resolvedSuite = resolveSuite(
+    options.suite,
+    options.fallbackSuite
+  );
+  const AutoField2 = createAutoField(resolvedSuite);
+  return {
+    AutoField: AutoField2,
+    suite: resolvedSuite
+  };
+};
+
+// src/app/helpers/styled.ts
+var styled_exports = {};
+__export(styled_exports, {
+  default: () => styled_default
+});
+__reExport(styled_exports, styledBase);
+var styled = typeof styledBase__default.default === "function" ? styledBase__default.default : styledBase__default;
+var styled_default = styled;
+
+// src/web/forms/primitives/index.ts
+var FieldWrapper = styled_default("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.25em;
+`;
+var ErrorMessage = styled_default("span")`
+  color: #AA0000;
+`;
+var ArrayContainer = styled_default("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.5em;
+`;
+var ArrayItemWrapper = styled_default("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.5em;
+`;
+var createArrayItemField = (field) => ({
+  ...field,
+  array: false,
+  tags: {
+    ...field.tags,
+    label: void 0
+  }
+});
+var toOptionValue = (val) => {
+  if (val === null || val === void 0) return void 0;
+  if (typeof val === "boolean") return void 0;
+  return String(val);
+};
+var parseNumberValue = (raw) => raw === "" ? null : Number(raw);
+var getSelectableValues = (possibleValues) => {
+  return possibleValues?.filter(
+    (v) => typeof v === "string" || typeof v === "number"
+  );
+};
+var formatCustomValue = (val) => {
+  if (val === null || val === void 0) return "None";
+  if (typeof val === "string" || typeof val === "number") return String(val);
+  return JSON.stringify(val, null, 2);
+};
+var renderRelationSingle = (context) => {
+  const { field, fieldKey, label, required, disabled, error, onRelationAction } = context;
+  const id = `field-${fieldKey}`;
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    onRelationAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-signifier": "manage",
+        type: "button",
+        disabled,
+        onClick: () => onRelationAction({
+          action: "open",
+          fieldKey,
+          field,
+          value: void 0,
+          fullPaging: field.tags?.fullPaging,
+          onChange: context.onChange
+        }),
+        children: "Manage"
+      }
+    ) : void 0,
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var renderRelationArray = (context) => {
+  const { field, fieldKey, label, required, disabled, error, onRelationAction } = context;
+  const id = `field-${fieldKey}`;
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    onRelationAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-signifier": "manage-related",
+        type: "button",
+        disabled,
+        onClick: () => onRelationAction({
+          action: "open",
+          fieldKey,
+          field,
+          value: void 0,
+          fullPaging: field.tags?.fullPaging,
+          onChange: context.onChange
+        }),
+        children: "Manage"
+      }
+    ) : void 0,
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var renderCustomSingle = (context) => {
+  const { field, fieldKey, label, required, disabled, error } = context;
+  const id = `field-${fieldKey}`;
+  const customType = field.tags?.customType;
+  const onCustomTypeAction = context.onCustomTypeAction;
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsx(RelationValue, { children: formatCustomValue(context.value) }),
+    customType && onCustomTypeAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-signifier": "manage",
+        type: "button",
+        disabled,
+        onClick: () => onCustomTypeAction({
+          action: "open",
+          fieldKey,
+          field,
+          customType,
+          value: context.value,
+          onChange: context.onChange
+        }),
+        children: "Manage"
+      }
+    ) : void 0,
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var renderCustomArray = (context) => {
+  const { field, fieldKey, label, required, disabled, error } = context;
+  const id = `field-${fieldKey}`;
+  const customType = field.tags?.customType;
+  const onCustomTypeAction = context.onCustomTypeAction;
+  const arrayValue = Array.isArray(context.value) ? context.value : [];
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsxs(RelationList, { children: [
+      arrayValue.length === 0 && /* @__PURE__ */ jsx(RelationValue, { children: "No items yet." }),
+      arrayValue.map((item, index) => /* @__PURE__ */ jsxs(RelationItem, { children: [
+        /* @__PURE__ */ jsx(RelationValue, { children: formatCustomValue(item) }),
+        /* @__PURE__ */ jsxs(RelationActions, { children: [
+          customType && onCustomTypeAction ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-signifier": "manage",
+              type: "button",
+              disabled,
+              onClick: () => onCustomTypeAction({
+                action: "edit",
+                fieldKey,
+                field,
+                customType,
+                value: context.value,
+                index,
+                onChange: context.onChange
+              }),
+              children: "Manage"
+            }
+          ) : void 0,
+          customType && onCustomTypeAction ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => onCustomTypeAction({
+                action: "remove",
+                fieldKey,
+                field,
+                customType,
+                value: context.value,
+                index,
+                onChange: context.onChange
+              }),
+              children: "Remove"
+            }
+          ) : void 0
+        ] })
+      ] }, `${fieldKey}-${index}`))
+    ] }),
+    customType && onCustomTypeAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => onCustomTypeAction({
+          action: "add",
+          fieldKey,
+          field,
+          customType,
+          value: context.value,
+          onChange: context.onChange
+        }),
+        children: "Add Item"
+      }
+    ) : void 0,
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var autoFieldRenderer;
+var renderArray = (context) => {
+  const { field, fieldKey, label, required, disabled, error } = context;
+  const id = `field-${fieldKey}`;
+  const itemField = createArrayItemField(field);
+  const arrayValue = Array.isArray(context.value) ? [...context.value] : [];
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsxs(ArrayContainer, { children: [
+      arrayValue.map((item, index) => /* @__PURE__ */ jsxs(ArrayItemWrapper, { children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: autoFieldRenderer({
+          field: itemField,
+          fieldKey: `${fieldKey}[${index}]`,
+          value: item,
+          onChange: (newItem) => {
+            const newValue = [...arrayValue];
+            newValue[index] = newItem;
+            context.onChange(newValue);
+          },
+          disabled
+        }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => {
+              const newValue = [...arrayValue];
+              newValue.splice(index, 1);
+              context.onChange(newValue);
+            },
+            children: "Remove"
+          }
+        )
+      ] }, index)),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => {
+            const baseValue = Array.isArray(context.value) ? context.value : [];
+            const newValue = [...baseValue];
+            const newItem = field.type === "number" ? 0 : field.type === "boolean" ? false : "";
+            newValue.push(newItem);
+            context.onChange(newValue);
+          },
+          children: "Add Item"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var renderString = (context) => {
+  const { fieldKey, label, required, disabled, error } = context;
+  const id = `field-${fieldKey}`;
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: context.format || "text",
+        value: context.value || "",
+        onChange: (e) => context.onChange(e.target.value),
+        disabled,
+        pattern: context.constraints?.pattern
+      }
+    ),
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var renderNumber = (context) => {
+  const { fieldKey, label, required, disabled, error } = context;
+  const id = `field-${fieldKey}`;
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "number",
+        value: context.value ?? "",
+        onChange: (e) => context.onChange(parseNumberValue(e.target.value)),
+        disabled,
+        min: context.constraints?.min,
+        max: context.constraints?.max,
+        step: context.constraints?.step
+      }
+    ),
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var renderBoolean = (context) => {
+  const { fieldKey, label, disabled, error } = context;
+  const id = `field-${fieldKey}`;
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          checked: !!context.value,
+          onChange: (e) => context.onChange(e.target.checked),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+        " ",
+        label,
+        " "
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var renderEnumSelect = (context) => {
+  const { field, fieldKey, label, required, disabled, error } = context;
+  const id = `field-${fieldKey}`;
+  const selectableValues = getSelectableValues(context.possibleValues);
+  const allowCustom = context.allowCustomSelection;
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    (field.type === "string" || field.type === "number") && selectableValues && allowCustom && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "text",
+          list: `list-${id}`,
+          value: context.value ?? "",
+          onChange: (e) => context.onChange(
+            field.type === "number" ? parseNumberValue(e.target.value) : e.target.value
+          ),
+          placeholder: "Select or type...",
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx("datalist", { id: `list-${id}`, children: selectableValues.map((val) => /* @__PURE__ */ jsx("option", { value: toOptionValue(val) }, String(val))) })
+    ] }),
+    (field.type === "string" || field.type === "number") && selectableValues && !allowCustom && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        value: context.value ?? "",
+        onChange: (e) => context.onChange(
+          field.type === "number" ? parseNumberValue(e.target.value) : e.target.value
+        ),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+          selectableValues.map((val) => /* @__PURE__ */ jsx("option", { value: toOptionValue(val), children: String(val) }, String(val)))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+  ] });
+};
+var webSuite = {
+  renderers: {
+    string: renderString,
+    number: renderNumber,
+    boolean: renderBoolean,
+    enum_select: renderEnumSelect,
+    array: renderArray,
+    relation_single: renderRelationSingle,
+    relation_array: renderRelationArray,
+    custom_single: renderCustomSingle,
+    custom_array: renderCustomArray
+  }
+};
+var resolvedWebSuite = resolveSuite(void 0, webSuite);
+autoFieldRenderer = createAutoField(resolvedWebSuite);
+var webAutoField = autoFieldRenderer;
+var RelationList = styled_default("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+`;
+var RelationItem = styled_default("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  padding: 0.5em;
+`;
+var RelationValue = styled_default("pre")`
+  margin: 0;
+  padding: 0.5em;
+  font-size: 0.85em;
+  white-space: pre-wrap;
+`;
+var RelationActions = styled_default("div")`
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
+`;
+var getDeniedOperation = (deniedOperations, operation) => {
+  if (!deniedOperations) {
+    return false;
+  }
+  const denied = deniedOperations[operation];
+  if (typeof denied === "boolean") {
+    return denied;
+  }
+  return deniedOperations[operation.toLowerCase()] ?? false;
+};
+var buildInitialValues = (initialValues, typeInfo) => {
+  const values = { ...initialValues };
+  for (const [key, field] of Object.entries(typeInfo.fields ?? {})) {
+    if (values[key] !== void 0) {
+      continue;
+    }
+    const defaultValue = field.tags?.constraints?.defaultValue;
+    if (defaultValue !== void 0) {
+      let parsedDefaultValue = defaultValue;
+      try {
+        parsedDefaultValue = JSON.parse(defaultValue);
+      } catch (error) {
+      }
+      values[key] = parsedDefaultValue;
+      continue;
+    }
+    if (field.array && !field.typeReference && !field.optional) {
+      values[key] = [];
+      continue;
+    }
+    if (field.type === "boolean" && !field.optional) {
+      values[key] = false;
+    }
+  }
+  return values;
+};
+var useFormEngine = (initialValues = {}, typeInfo, options) => {
+  const operation = options?.operation ?? "CREATE" /* CREATE */;
+  const [values, setValues] = useState(
+    buildInitialValues(initialValues, typeInfo)
+  );
+  const [errors, setErrors] = useState({});
+  const setFieldValue = useCallback((path, value) => {
+    setValues((prev) => {
+      return {
+        ...prev,
+        [path]: value
+      };
+    });
+  }, []);
+  const validate = useCallback(() => {
+    const newErrors = {};
+    for (const [key, field] of Object.entries(typeInfo.fields ?? {})) {
+      if (field.tags?.hidden) {
+        continue;
+      }
+      const val = values[key];
+      if (field.readonly && (val === void 0 || val === null || val === "")) {
+        continue;
+      }
+      const isMissing = val === void 0 || val === null || val === "" || field.array && (!Array.isArray(val) || val.length === 0);
+      if (!field.optional && isMissing) {
+        newErrors[key] = "This field is required";
+        continue;
+      }
+      if (isMissing) {
+        continue;
+      }
+      const constraints = field.tags?.constraints;
+      if (constraints?.pattern && typeof val === "string") {
+        const pattern = new RegExp(constraints.pattern);
+        if (!pattern.test(val)) {
+          newErrors[key] = "Value does not match required pattern";
+          continue;
+        }
+      }
+      if (field.type === "number" && typeof val === "number") {
+        if (constraints?.min !== void 0 && val < constraints.min) {
+          newErrors[key] = `Value must be at least ${constraints.min}`;
+          continue;
+        }
+        if (constraints?.max !== void 0 && val > constraints.max) {
+          newErrors[key] = `Value must be at most ${constraints.max}`;
+          continue;
+        }
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [typeInfo, values]);
+  const fields = useMemo(() => {
+    return Object.entries(typeInfo.fields ?? {}).map(([key, field]) => {
+      const { tags } = field;
+      const isPrimary = tags?.primaryField || typeInfo.primaryField === key;
+      return {
+        key,
+        field,
+        label: tags?.label ?? key,
+        required: !field.optional,
+        disabled: field.readonly || getDeniedOperation(typeInfo.tags?.deniedOperations, operation) || getDeniedOperation(tags?.deniedOperations, operation) || operation === "UPDATE" /* UPDATE */ && isPrimary,
+        hidden: !!tags?.hidden,
+        primary: isPrimary,
+        format: tags?.format,
+        constraints: tags?.constraints,
+        value: values[key],
+        onChange: (value) => setFieldValue(key, value),
+        error: errors[key]
+      };
+    });
+  }, [typeInfo, values, errors, setFieldValue, operation]);
+  return {
+    typeInfo,
+    typeTags: typeInfo.tags,
+    operation,
+    values,
+    errors,
+    fields,
+    setFieldValue,
+    validate,
+    setErrors
+  };
+};
+var AutoField = (props) => {
+  return webAutoField({
+    field: props.field,
+    fieldKey: props.fieldKey,
+    value: props.value,
+    onChange: props.onChange,
+    error: props.error,
+    disabled: props.disabled,
+    onRelationAction: props.onRelationAction,
+    onCustomTypeAction: props.onCustomTypeAction
+  });
+};
+var AutoFormView = ({
+  controller,
+  onSubmit,
+  submitDisabled,
+  onRelationAction,
+  onCustomTypeAction
+}) => {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (controller.validate()) {
+      onSubmit(controller.values);
+    }
+  };
+  return /* @__PURE__ */ jsxs(FormContainer, { onSubmit: handleSubmit, children: [
+    controller.fields.filter((fieldController) => !fieldController.hidden).map((fieldController) => /* @__PURE__ */ jsx(
+      AutoField,
+      {
+        field: fieldController.field,
+        fieldKey: fieldController.key,
+        value: fieldController.value,
+        onChange: fieldController.onChange,
+        error: fieldController.error,
+        onRelationAction,
+        disabled: fieldController.disabled,
+        onCustomTypeAction
+      },
+      fieldController.key
+    )),
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: submitDisabled, children: "Submit" })
+  ] });
+};
+var AutoForm = ({
+  typeInfo,
+  onSubmit,
+  initialValues,
+  onValuesChange,
+  onRelationAction,
+  onCustomTypeAction,
+  operation,
+  submitDisabled
+}) => {
+  const controller = useFormEngine(initialValues, typeInfo, { operation });
+  useEffect(() => {
+    if (onValuesChange) {
+      onValuesChange(controller.values);
+    }
+  }, [controller.values, onValuesChange]);
+  return /* @__PURE__ */ jsx(
+    AutoFormView,
+    {
+      controller,
+      onSubmit,
+      onRelationAction,
+      onCustomTypeAction,
+      submitDisabled
+    }
+  );
+};
+var FormContainer = styled_default("form")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 1em;
+`;
+
+// src/web/forms/createWebFormRenderer.ts
+var createWebFormRenderer = (options) => {
+  return createFormRenderer({
+    fallbackSuite: webSuite,
+    suite: options?.suite
+  });
+};
+
+// src/app/utils/easy-layout/parseTemplate.ts
+var parseTrackSpec = (token) => {
+  const trimmed = token.trim();
+  const numericMatch = trimmed.match(/^([0-9]*\.?[0-9]+)(fr|px|%)$/);
+  if (!numericMatch) {
+    throw new Error(
+      `Invalid track token "${trimmed}". Supported units are fr, px, and %.`
+    );
+  }
+  const value = Number(numericMatch[1]);
+  const suffix = numericMatch[2];
+  if (!Number.isFinite(value) || value < 0) {
+    throw new Error(`Track value must be a non-negative number. Received "${trimmed}".`);
+  }
+  if (suffix === "fr") {
+    return { kind: "fr", value };
+  }
+  if (suffix === "px") {
+    return { kind: "px", value };
+  }
+  return { kind: "pct", value };
+};
+var normalizeAreas = (areaPart) => {
+  return areaPart.trim().split(/\s+/g).map((token) => token.trim()).filter(Boolean);
+};
+var parseTemplate = (template = "") => {
+  const lines = template.split("\n").map((line) => line.trim()).filter(Boolean);
+  const areaGrid = [];
+  const rowTracks = [];
+  let colTracks = null;
+  for (const line of lines) {
+    if (line.startsWith("\\")) {
+      if (colTracks) {
+        throw new Error("Template can include only one column-track line.");
+      }
+      const colTokens = line.replace(/\\/g, " ").trim().split(/\s+/g).filter(Boolean);
+      colTracks = colTokens.map(parseTrackSpec);
+      continue;
+    }
+    const parts = line.split(",").map((part) => part.trim());
+    const areaPart = parts[0] || "";
+    if (!areaPart) {
+      continue;
+    }
+    if (parts.length > 2) {
+      throw new Error(
+        `Invalid row definition "${line}". Expected "<areas>, <row-track>".`
+      );
+    }
+    const areas = normalizeAreas(areaPart);
+    if (!areas.length) {
+      continue;
+    }
+    areaGrid.push(areas);
+    const rowTrack = parts[1];
+    if (rowTrack) {
+      rowTracks.push(parseTrackSpec(rowTrack));
+    }
+  }
+  if (!areaGrid.length) {
+    throw new Error("Template must include at least one area row.");
+  }
+  const expectedWidth = areaGrid[0].length;
+  for (let rowIndex = 0; rowIndex < areaGrid.length; rowIndex++) {
+    const width = areaGrid[rowIndex].length;
+    if (width !== expectedWidth) {
+      throw new Error(
+        `All area rows must have the same width. Expected ${expectedWidth}, received ${width} at row ${rowIndex + 1}.`
+      );
+    }
+  }
+  if (colTracks && colTracks.length !== expectedWidth) {
+    throw new Error(
+      `Column track count must match area width. Expected ${expectedWidth}, received ${colTracks.length}.`
+    );
+  }
+  const areaNames = Array.from(
+    new Set(
+      areaGrid.flat().map((name) => name.trim()).filter((name) => !!name && name !== ".")
+    )
+  );
+  return {
+    areaGrid,
+    rowTracks,
+    colTracks: colTracks || [],
+    areaNames
+  };
+};
+
+// src/app/utils/easy-layout/computeAreaBounds.ts
+var computeAreaBounds = (parsed) => {
+  const result = {};
+  for (let rowIndex = 0; rowIndex < parsed.areaGrid.length; rowIndex++) {
+    const row = parsed.areaGrid[rowIndex];
+    for (let colIndex = 0; colIndex < row.length; colIndex++) {
+      const name = row[colIndex];
+      if (!name || name === ".") {
+        continue;
+      }
+      const row1 = rowIndex + 1;
+      const col1 = colIndex + 1;
+      const existing = result[name];
+      if (!existing) {
+        result[name] = {
+          name,
+          rowStart: row1,
+          rowEnd: row1,
+          colStart: col1,
+          colEnd: col1
+        };
+        continue;
+      }
+      existing.rowStart = Math.min(existing.rowStart, row1);
+      existing.rowEnd = Math.max(existing.rowEnd, row1);
+      existing.colStart = Math.min(existing.colStart, col1);
+      existing.colEnd = Math.max(existing.colEnd, col1);
+    }
+  }
+  return result;
+};
+
+// src/app/utils/easy-layout/validateAreas.ts
+var validateAreas = (parsed) => {
+  const bounds = computeAreaBounds(parsed);
+  for (const areaName of parsed.areaNames) {
+    const bound = bounds[areaName];
+    if (!bound) {
+      continue;
+    }
+    for (let row = bound.rowStart; row <= bound.rowEnd; row++) {
+      for (let col = bound.colStart; col <= bound.colEnd; col++) {
+        const token = parsed.areaGrid[row - 1]?.[col - 1];
+        if (token !== areaName) {
+          throw new Error(
+            `Area "${areaName}" must be a rectangle. Missing "${areaName}" at row ${row}, col ${col}.`
+          );
+        }
+      }
+    }
+  }
+};
+
+// src/app/utils/EasyLayout.tsx
+var getPascalCaseAreaName = (area) => {
+  return area.split("-").map((a) => a[0].toUpperCase() + a.slice(1)).join("");
+};
+var convertLayoutToCSS = (layout = "", spacing = {}) => {
+  const parsed = parseTemplate(layout);
+  validateAreas(parsed);
+  const renderTrack = (track) => {
+    if (track.kind === "px") {
+      return `${track.value}px`;
+    }
+    if (track.kind === "pct") {
+      return `${track.value}%`;
+    }
+    return `${track.value}fr`;
+  };
+  const areaRows = parsed.areaGrid.map((row) => row.join(" "));
+  const rows = parsed.rowTracks.map(renderTrack);
+  let css = "";
+  if (parsed.colTracks.length) {
+    css += `
+grid-template-columns: ${parsed.colTracks.map(renderTrack).join(" ")};`;
+  }
+  css += `
+grid-template-areas:
+${areaRows.map((a) => `  "${a}"`).join("\n")};`;
+  if (rows.length) {
+    css += `
+grid-template-rows: ${rows.join(" ")};`;
+  }
+  if (typeof spacing.gap !== "undefined") {
+    css += `
+gap: ${typeof spacing.gap === "number" ? `${spacing.gap}px` : spacing.gap};`;
+  }
+  if (typeof spacing.padding !== "undefined") {
+    css += `
+padding: ${typeof spacing.padding === "number" ? `${spacing.padding}px` : spacing.padding};`;
+  }
+  return {
+    areasList: parsed.areaNames,
+    css
+  };
+};
+var createEasyLayout = (config, extendFrom, areasExtendFrom, spacing = {}) => {
+  return (layoutTemplate, ...expressions) => {
+    const mergedTemplate = layoutTemplate.reduce((acc, l, ind) => {
+      const expr = expressions[ind - 1];
+      const exprStr = typeof expr === "undefined" ? "" : expr;
+      return `${acc}${l}${exprStr}`;
+    }, "");
+    const { areasList, css } = convertLayoutToCSS(mergedTemplate, spacing);
+    const layout = config.createLayout({ base: extendFrom, css });
+    const areas = areasList.reduce((acc, area) => {
+      const pascalCaseAreaName = getPascalCaseAreaName(area);
+      const component = config.createArea({ base: areasExtendFrom, area });
+      return {
+        ...acc,
+        [pascalCaseAreaName]: component
+      };
+    }, {});
+    return {
+      layout,
+      areas
+    };
+  };
+};
+var EasyLayoutBase = styled_default("div")`
+  display: grid;
+  ${({ $layoutCss }) => $layoutCss}
+`;
+var EasyAreaBase = styled_default("div")`
+  grid-area: ${({ $area }) => $area};
+`;
+var styledFactory = {
+  createLayout: ({ base, css }) => {
+    const LayoutComponent = ({ children }) => {
+      const layoutProps = {
+        $layoutCss: css,
+        children
+      };
+      if (base) {
+        layoutProps.as = base;
+      }
+      return /* @__PURE__ */ jsx(EasyLayoutBase, { ...layoutProps });
+    };
+    return LayoutComponent;
+  },
+  createArea: ({ base, area }) => {
+    const AreaComponent = ({ children }) => {
+      const areaProps = {
+        $area: area,
+        children
+      };
+      if (base) {
+        areaProps.as = base;
+      }
+      return /* @__PURE__ */ jsx(EasyAreaBase, { ...areaProps });
+    };
+    return AreaComponent;
+  }
+};
+var getEasyLayout = (extendFrom, areasExtendFrom, options = {}) => {
+  return createEasyLayout(styledFactory, extendFrom, areasExtendFrom, options);
+};
+
+// src/common/Routing.ts
+var PATH_DELIMITER = "/";
+var getPotentialJSONValue = (value) => {
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    return value;
+  }
+};
+var getPathArray = (path, delimiter = PATH_DELIMITER, filterEmptyOutput = false, filterEmptyInput = true, useJson = true, uriDecodeParts = true) => path.split(delimiter).filter(filterEmptyInput ? (p) => p !== "" : () => true).map(uriDecodeParts ? decodeURIComponent : (x) => x).map(useJson ? getPotentialJSONValue : (p) => p).filter(filterEmptyOutput ? (p) => p ?? false : () => true);
+var getPathString = (parts = [], delimiter = PATH_DELIMITER, filterEmptyInput = false, useJson = true, uriEncodeParts = false) => parts.filter(filterEmptyInput ? (p) => p ?? false : () => true).map(useJson ? (p) => JSON.stringify(p) : (x) => x).map(uriEncodeParts ? encodeURIComponent : (x) => x).join(delimiter);
+var mergeStringPaths = (path1, path2, delimiter = PATH_DELIMITER, filterEmptyOutput = false, filterEmptyInput = true, useJson = true, uriEncodeParts = false) => getPathString(
+  [
+    ...getPathArray(
+      path1,
+      delimiter,
+      filterEmptyOutput,
+      filterEmptyInput,
+      useJson,
+      uriEncodeParts
+    ),
+    ...getPathArray(
+      path2,
+      delimiter,
+      filterEmptyOutput,
+      filterEmptyInput,
+      useJson,
+      uriEncodeParts
+    )
+  ],
+  delimiter,
+  filterEmptyInput,
+  useJson,
+  uriEncodeParts
+);
+var resolvePath = (currentPath, newPath) => {
+  const newSegments = getPathArray(newPath, PATH_DELIMITER, true);
+  let currentSegments = getPathArray(currentPath, PATH_DELIMITER, true);
+  if (newPath.startsWith("/")) {
+    currentSegments = [];
+  }
+  newSegments.forEach((segment) => {
+    if (segment === "..") {
+      if (currentSegments.length > 0) {
+        currentSegments.pop();
+      }
+    } else if (segment !== ".") {
+      currentSegments.push(segment);
+    }
+  });
+  return "/" + currentSegments.join("/");
+};
+var getParamsAndTestPath = (path, testPath, exact = false) => {
+  const pathList = getPathArray(path);
+  const testPathList = getPathArray(testPath);
+  if (exact && pathList.length !== testPathList.length) {
+    return false;
+  } else {
+    let params = {};
+    if (pathList.length >= testPathList.length) {
+      for (let i = 0; i < testPathList.length; i++) {
+        const testPathPart = testPathList[i];
+        const pathPart = pathList[i];
+        if (testPathPart.startsWith(":")) {
+          const paramName = testPathPart.slice(1);
+          params[paramName] = pathPart;
+        } else if (pathPart !== testPathPart) {
+          return false;
+        }
+      }
+    } else {
+      return false;
+    }
+    return params;
+  }
+};
+var RouteContext = createContext({
+  currentWindowPath: "",
+  parentPath: "",
+  params: {},
+  isTopLevel: true
+});
+var {
+  /**
+   * @ignore
+   */
+  Provider: RouteContextProvider,
+  /**
+   * @ignore
+   */
+  Consumer: RouteContextConsumer
+} = RouteContext;
+var useRouteContext = () => useContext(RouteContext);
+var RouteProvider = ({
+  adapter,
+  initialPath,
+  children
+}) => {
+  const [currentPath, setCurrentPath] = useState(
+    initialPath ?? adapter.getPath()
+  );
+  useEffect(() => {
+    return adapter.subscribe((nextPath) => {
+      setCurrentPath(nextPath);
+    });
+  }, [adapter]);
+  const contextValue = useMemo(
+    () => ({
+      currentWindowPath: currentPath,
+      parentPath: "",
+      params: {},
+      isTopLevel: true,
+      adapter
+    }),
+    [currentPath, adapter]
+  );
+  return /* @__PURE__ */ jsx(RouteContextProvider, { value: contextValue, children });
+};
+var Route = ({
+  /**
+   * Use `:` as the first character to denote a parameter in the path.
+   */
+  path = "",
+  onParamsChange,
+  exact = false,
+  children
+}) => {
+  const {
+    currentWindowPath = "",
+    parentPath = "",
+    params: parentParams = {},
+    adapter
+  } = useRouteContext();
+  const targetCurrentPath = useMemo(
+    () => currentWindowPath,
+    [currentWindowPath]
+  );
+  const fullPath = useMemo(
+    () => mergeStringPaths(parentPath, path),
+    [parentPath, path]
+  );
+  const newParams = useMemo(
+    () => getParamsAndTestPath(targetCurrentPath, fullPath, exact),
+    [targetCurrentPath, fullPath, exact]
+  );
+  const params = useMemo(
+    () => ({
+      ...parentParams,
+      ...newParams ? newParams : {}
+    }),
+    [parentParams, newParams]
+  );
+  const newRouteContext = useMemo(
+    () => ({
+      currentWindowPath: targetCurrentPath,
+      parentPath: fullPath,
+      params,
+      isTopLevel: false,
+      adapter
+    }),
+    [targetCurrentPath, fullPath, params, adapter]
+  );
+  useEffect(() => {
+    if (onParamsChange) {
+      onParamsChange(params);
+    }
+  }, [params, onParamsChange]);
+  return newParams ? /* @__PURE__ */ jsx(RouteContextProvider, { value: newRouteContext, children }) : null;
+};
+var getWindow = () => {
+  if (typeof globalThis === "undefined") {
+    return void 0;
+  }
+  if ("window" in globalThis) {
+    return globalThis.window;
+  }
+  return void 0;
+};
+var createBrowserRouteAdapter = () => {
+  const WINDOW = getWindow();
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    const path = WINDOW?.location?.pathname ?? "";
+    listeners.forEach((listener) => listener(path));
+  };
+  const handlePopState = () => {
+    notify();
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    if (WINDOW) {
+      WINDOW.addEventListener("popstate", handlePopState);
+      WINDOW.addEventListener("statechanged", handlePopState);
+    }
+    return () => {
+      listeners.delete(listener);
+      if (WINDOW) {
+        WINDOW.removeEventListener("popstate", handlePopState);
+        WINDOW.removeEventListener("statechanged", handlePopState);
+      }
+    };
+  };
+  return {
+    getPath: () => WINDOW?.location?.pathname ?? "",
+    subscribe,
+    push: (path, title = "") => {
+      if (!WINDOW?.history) {
+        return;
+      }
+      WINDOW.history.pushState({}, title, path);
+      notify();
+    },
+    replace: (path, title = "") => {
+      if (!WINDOW?.history?.replaceState) {
+        return;
+      }
+      WINDOW.history.replaceState({}, title, path);
+      notify();
+    }
+  };
+};
+var useBrowserLinkInterceptor = (adapter) => {
+  useEffect(() => {
+    const WINDOW = getWindow();
+    if (!WINDOW || !adapter?.push) {
+      return void 0;
+    }
+    const handleAnchorClick = (event) => {
+      let target = event.target;
+      while (target && target.nodeName !== "A") {
+        target = target.parentNode;
+      }
+      if (!target || target.nodeName !== "A") {
+        return;
+      }
+      const anchor = target;
+      const href = anchor.getAttribute("href");
+      const title = anchor.getAttribute("title") ?? "";
+      if (!href) {
+        return;
+      }
+      try {
+        new URL(href);
+        return;
+      } catch (error) {
+        const nextPath = resolvePath(WINDOW.location?.pathname ?? "", href);
+        event.preventDefault();
+        adapter.push?.(nextPath, title);
+      }
+    };
+    WINDOW.document.addEventListener("click", handleAnchorClick);
+    return () => {
+      WINDOW.document.removeEventListener("click", handleAnchorClick);
+    };
+  }, [adapter]);
+};
+var RouteProvider2 = ({ children }) => {
+  const adapterRef = useRef(null);
+  if (!adapterRef.current) {
+    adapterRef.current = createBrowserRouteAdapter();
+  }
+  useBrowserLinkInterceptor(adapterRef.current);
+  return /* @__PURE__ */ jsx(RouteProvider, { adapter: adapterRef.current, children });
+};
+var Route2 = (props) => {
+  const routeContext = useRouteContext();
+  const hasAdapter = useMemo(
+    () => typeof routeContext.adapter !== "undefined",
+    [routeContext.adapter]
+  );
+  if (hasAdapter) {
+    return /* @__PURE__ */ jsx(Route, { ...props });
+  }
+  return /* @__PURE__ */ jsx(RouteProvider2, { children: /* @__PURE__ */ jsx(Route, { ...props }) });
+};
+
+export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm, AutoFormView, ErrorMessage, FieldWrapper, Route2 as Route, RouteProvider2 as RouteProvider, createBrowserRouteAdapter, createWebFormRenderer, getEasyLayout, useRouteContext, webAutoField, webSuite };