@conuti-das/prince-ui-forms 1.0.1

package/dist/index.js

@@ -0,0 +1,1378 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Form, Button, DescriptionList, Field, Separator, TextField, CheckboxGroup, Checkbox, RadioGroup, Radio, Select, SelectItem, DatePicker, NumberField, ComboBox, ComboBoxItem, TagGroup, Tag, SegmentedControl, Segment, Card, EmptyState, Notice } from '@conuti-das/prince-ui';
+import { parseDate } from '@internationalized/date';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/model/task-form.ts
+function mapValidationConstraints(constraints) {
+  if (!constraints || constraints.length === 0) return void 0;
+  const validate = {};
+  for (const c of constraints) {
+    const name = c.name?.toLowerCase();
+    const cfg = c.configuration;
+    switch (name) {
+      case "required":
+        validate.required = true;
+        break;
+      case "minlength":
+        if (cfg != null && cfg !== "") validate.minLength = Number(cfg);
+        break;
+      case "maxlength":
+        if (cfg != null && cfg !== "") validate.maxLength = Number(cfg);
+        break;
+      case "min":
+        if (cfg != null && cfg !== "") validate.min = Number(cfg);
+        break;
+      case "max":
+        if (cfg != null && cfg !== "") validate.max = Number(cfg);
+        break;
+    }
+  }
+  return Object.keys(validate).length > 0 ? validate : void 0;
+}
+function mapValues(values) {
+  if (!values) return void 0;
+  const out = Object.entries(values).map(([value, label]) => ({
+    value,
+    label: label ?? value
+  }));
+  return out.length > 0 ? out : void 0;
+}
+function camundaTypeName(type) {
+  if (typeof type === "string") return type;
+  return type?.name ?? "string";
+}
+function camundaTypeToFieldType(field) {
+  const name = camundaTypeName(field.type);
+  switch (name) {
+    case "enum":
+      return "select";
+    case "boolean":
+      return "checkbox";
+    case "date":
+      return "datetime";
+    case "long":
+    case "integer":
+    case "double":
+    case "short":
+      return "number";
+    case "string":
+    default:
+      return "textfield";
+  }
+}
+function camundaSubmitType(name) {
+  switch (name) {
+    case "boolean":
+      return "Boolean";
+    case "long":
+    case "integer":
+    case "short":
+      return "Integer";
+    case "double":
+      return "Double";
+    case "date":
+      return "Date";
+    case "enum":
+    case "string":
+    default:
+      return "String";
+  }
+}
+function taskFormToSchema(fields) {
+  const components = (fields ?? []).map((f) => {
+    const type = camundaTypeToFieldType(f);
+    const field = {
+      id: f.id,
+      key: f.id,
+      type,
+      label: f.label ?? f.id
+    };
+    if (f.defaultValue !== void 0) field.defaultValue = f.defaultValue;
+    field._camundaType = camundaSubmitType(camundaTypeName(f.type));
+    const validate = mapValidationConstraints(f.validationConstraints);
+    if (validate) field.validate = validate;
+    const values = mapValues(f.values);
+    if (values) field.values = values;
+    return field;
+  });
+  return {
+    type: "default",
+    components,
+    schemaVersion: 1,
+    exporter: { name: "@conuti-das/prince-ui-forms", version: "0.1.0" }
+  };
+}
+
+// src/model/conditional.ts
+function evalConditional(hideExpr, data) {
+  if (!hideExpr) return false;
+  let expr = hideExpr.trim();
+  if (expr.startsWith("=")) expr = expr.slice(1).trim();
+  if (!expr) return false;
+  try {
+    return Boolean(evalExpr(expr, data));
+  } catch {
+    return false;
+  }
+}
+function evalExpr(expr, data) {
+  const orParts = splitTopLevel(expr, " or ");
+  if (orParts.length > 1) {
+    return orParts.some((p) => Boolean(evalExpr(p.trim(), data)));
+  }
+  const andParts = splitTopLevel(expr, " and ");
+  if (andParts.length > 1) {
+    return andParts.every((p) => Boolean(evalExpr(p.trim(), data)));
+  }
+  return evalComparison(expr.trim(), data);
+}
+function splitTopLevel(expr, sep) {
+  const out = [];
+  let buf = "";
+  let quote = null;
+  for (let i = 0; i < expr.length; i++) {
+    const ch = expr[i];
+    if (quote) {
+      buf += ch;
+      if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      buf += ch;
+      continue;
+    }
+    if (expr.startsWith(sep, i)) {
+      out.push(buf);
+      buf = "";
+      i += sep.length - 1;
+      continue;
+    }
+    buf += ch;
+  }
+  out.push(buf);
+  return out;
+}
+var COMPARATORS = ["!=", ">=", "<=", "==", ">", "<", "="];
+function evalComparison(expr, data) {
+  if (expr.toLowerCase().startsWith("not(") && expr.endsWith(")")) {
+    return !evalExpr(expr.slice(4, -1).trim(), data);
+  }
+  if (expr.startsWith("!")) {
+    return !evalExpr(expr.slice(1).trim(), data);
+  }
+  for (const op of COMPARATORS) {
+    const idx = findOperator(expr, op);
+    if (idx >= 0) {
+      const left = resolveValue(expr.slice(0, idx).trim(), data);
+      const right = resolveValue(expr.slice(idx + op.length).trim(), data);
+      return compare(left, right, op);
+    }
+  }
+  return Boolean(resolveValue(expr, data));
+}
+function findOperator(expr, op) {
+  let quote = null;
+  for (let i = 0; i <= expr.length - op.length; i++) {
+    const ch = expr[i];
+    if (quote) {
+      if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      continue;
+    }
+    if (expr.startsWith(op, i)) {
+      if (op === "=") {
+        const prev = expr[i - 1];
+        const next = expr[i + 1];
+        if (prev === "!" || prev === ">" || prev === "<" || prev === "=") continue;
+        if (next === "=") continue;
+      }
+      return i;
+    }
+  }
+  return -1;
+}
+function compare(left, right, op) {
+  switch (op) {
+    case "==":
+    case "=":
+      return looseEq(left, right);
+    case "!=":
+      return !looseEq(left, right);
+    case ">":
+      return Number(left) > Number(right);
+    case ">=":
+      return Number(left) >= Number(right);
+    case "<":
+      return Number(left) < Number(right);
+    case "<=":
+      return Number(left) <= Number(right);
+    default:
+      return false;
+  }
+}
+function looseEq(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return a == null && b == null;
+  return String(a) === String(b);
+}
+function resolveValue(token, data) {
+  const t = token.trim();
+  if (t === "") return void 0;
+  if (t === "true") return true;
+  if (t === "false") return false;
+  if (t === "null") return null;
+  if (t.startsWith('"') && t.endsWith('"') || t.startsWith("'") && t.endsWith("'")) {
+    return t.slice(1, -1);
+  }
+  if (/^-?\d+(\.\d+)?$/.test(t)) return Number(t);
+  return getPath(data, t);
+}
+function getPath(obj, path) {
+  if (!path) return void 0;
+  const parts = path.split(".");
+  let cur = obj;
+  for (const part of parts) {
+    if (cur == null || typeof cur !== "object") return void 0;
+    cur = cur[part];
+  }
+  return cur;
+}
+function setPath(obj, path, value) {
+  const parts = path.split(".");
+  let cur = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    if (typeof cur[part] !== "object" || cur[part] === null) {
+      cur[part] = {};
+    }
+    cur = cur[part];
+  }
+  cur[parts[parts.length - 1]] = value;
+}
+
+// src/model/schema.ts
+var PRESENTATIONAL_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "spacer",
+  "separator",
+  "button",
+  "group"
+]);
+function isDataField(field) {
+  return !PRESENTATIONAL_TYPES.has(field.type) && typeof field.key === "string" && field.key !== "";
+}
+function flattenFields(schema) {
+  const out = [];
+  const walk = (fields) => {
+    if (!fields) return;
+    for (const f of fields) {
+      out.push(f);
+      if (f.type === "group" && Array.isArray(f.components)) {
+        walk(f.components);
+      }
+    }
+  };
+  walk(schema.components);
+  return out;
+}
+function dataFields(schema) {
+  return flattenFields(schema).filter(isDataField);
+}
+
+// src/model/camunda.ts
+function camundaTypeOf(value) {
+  if (typeof value === "boolean") return "Boolean";
+  if (typeof value === "number") {
+    return Number.isInteger(value) ? "Integer" : "Double";
+  }
+  if (value instanceof Date) return "Date";
+  if (value !== null && typeof value === "object") return "Json";
+  return "String";
+}
+function camundaTypeForField(field, value) {
+  if (field) {
+    const declared = field._camundaType;
+    if (typeof declared === "string" && declared) return declared;
+    switch (field.type) {
+      case "number":
+        return camundaTypeOf(typeof value === "number" ? value : Number(value));
+      case "checkbox":
+        return "Boolean";
+      case "datetime":
+        return "Date";
+    }
+  }
+  return camundaTypeOf(value);
+}
+function formDataToCamundaVariables(data, schema) {
+  const out = {};
+  if (schema) {
+    for (const field of dataFields(schema)) {
+      if (evalConditional(field.conditional?.hide, data)) continue;
+      const key = field.key;
+      const value = getPath(data, key);
+      if (value === void 0) continue;
+      out[key] = { value, type: camundaTypeForField(field, value) };
+    }
+    return out;
+  }
+  for (const [key, value] of Object.entries(data ?? {})) {
+    if (value === void 0) continue;
+    out[key] = { value, type: camundaTypeOf(value) };
+  }
+  return out;
+}
+
+// src/model/validation.ts
+var VALIDATION_MESSAGES = {
+  required: "Dieses Feld ist erforderlich.",
+  min: (min) => `Wert muss mindestens ${min} sein.`,
+  max: (max) => `Wert darf h\xF6chstens ${max} sein.`,
+  minLength: (n) => `Mindestens ${n} Zeichen erforderlich.`,
+  maxLength: (n) => `H\xF6chstens ${n} Zeichen erlaubt.`,
+  pattern: "Eingabe entspricht nicht dem erwarteten Format."
+};
+function isEmpty(value) {
+  return value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
+}
+function validateField(field, value) {
+  const errors = [];
+  const v = field.validate;
+  if (!v) return errors;
+  if (v.required && isEmpty(value)) {
+    errors.push(VALIDATION_MESSAGES.required);
+    return errors;
+  }
+  if (isEmpty(value)) return errors;
+  if (typeof v.min === "number" && Number(value) < v.min) {
+    errors.push(VALIDATION_MESSAGES.min(v.min));
+  }
+  if (typeof v.max === "number" && Number(value) > v.max) {
+    errors.push(VALIDATION_MESSAGES.max(v.max));
+  }
+  const str = typeof value === "string" ? value : String(value);
+  if (typeof v.minLength === "number" && str.length < v.minLength) {
+    errors.push(VALIDATION_MESSAGES.minLength(v.minLength));
+  }
+  if (typeof v.maxLength === "number" && str.length > v.maxLength) {
+    errors.push(VALIDATION_MESSAGES.maxLength(v.maxLength));
+  }
+  if (v.pattern) {
+    try {
+      if (!new RegExp(v.pattern).test(str)) {
+        errors.push(VALIDATION_MESSAGES.pattern);
+      }
+    } catch {
+    }
+  }
+  return errors;
+}
+function validateForm(schema, data) {
+  const errors = {};
+  for (const field of dataFields(schema)) {
+    if (evalConditional(field.conditional?.hide, data)) continue;
+    const key = field.key;
+    const fieldErrors = validateField(field, getPath(data, key));
+    if (fieldErrors.length > 0) errors[key] = fieldErrors;
+  }
+  return errors;
+}
+function buildInitialData(schema, seed) {
+  const out = seed ? structuredClone(seed) : {};
+  for (const field of dataFields(schema)) {
+    const key = field.key;
+    if (getPath(out, key) !== void 0) continue;
+    if (field.defaultValue !== void 0) {
+      setPath(out, key, field.defaultValue);
+      continue;
+    }
+    switch (field.type) {
+      case "checkbox":
+        setPath(out, key, false);
+        break;
+      case "checklist":
+      case "taglist":
+        setPath(out, key, []);
+        break;
+    }
+  }
+  return out;
+}
+function FormRenderer({
+  schema,
+  data,
+  defaultData,
+  onChange,
+  onSubmit,
+  readOnly = false,
+  submitVariableFormat = "camunda",
+  submitLabel = "Absenden",
+  actionsSlot,
+  className
+}) {
+  const isControlled = data !== void 0;
+  const [internal, setInternal] = useState(
+    () => buildInitialData(schema, isControlled ? data : defaultData)
+  );
+  const values = isControlled ? data : internal;
+  const [errors, setErrors] = useState({});
+  const [submitted, setSubmitted] = useState(false);
+  const setValue = useCallback(
+    (key, value) => {
+      const next = structuredClone(values);
+      setPath(next, key, value);
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+      if (submitted) setErrors(validateForm(schema, next));
+    },
+    [values, isControlled, onChange, submitted, schema]
+  );
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const errs = validateForm(schema, values);
+      setErrors(errs);
+      setSubmitted(true);
+      const variables = submitVariableFormat === "camunda" ? formDataToCamundaVariables(values, schema) : values;
+      onSubmit?.({ data: values, errors: errs, variables });
+    },
+    [schema, values, submitVariableFormat, onSubmit]
+  );
+  const isHidden = useCallback(
+    (field) => evalConditional(field.conditional?.hide, values),
+    [values]
+  );
+  if (readOnly) {
+    return /* @__PURE__ */ jsx(
+      ReadOnlyForm,
+      {
+        schema,
+        values,
+        isHidden,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      className: cxForm(className),
+      onSubmit: handleSubmit,
+      validationBehavior: "aria",
+      "data-prn-form-renderer": "",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "prn-form-fields", children: schema.components.map((field, i) => /* @__PURE__ */ jsx(
+          FieldRenderer,
+          {
+            field,
+            values,
+            errors,
+            isHidden,
+            setValue
+          },
+          field.id ?? field.key ?? `${field.type}-${i}`
+        )) }),
+        (submitLabel !== null || actionsSlot) && /* @__PURE__ */ jsxs("div", { className: "prn-form-actions", children: [
+          actionsSlot,
+          submitLabel !== null && /* @__PURE__ */ jsx(Button, { type: "submit", variant: "filled", children: submitLabel })
+        ] })
+      ]
+    }
+  );
+}
+function cxForm(className) {
+  return className ? `prn-form-renderer ${className}` : "prn-form-renderer";
+}
+function ReadOnlyForm({
+  schema,
+  values,
+  isHidden,
+  className
+}) {
+  const fields = dataFields(schema).filter((f) => !isHidden(f));
+  return /* @__PURE__ */ jsx("div", { className: cxForm(className), "data-prn-form-readonly": "", children: /* @__PURE__ */ jsx(DescriptionList, { layout: "stacked", children: fields.map((field) => {
+    const key = field.key;
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: field.label ?? key,
+        value: formatReadOnly(field, getPath(values, key))
+      },
+      field.id ?? key
+    );
+  }) }) });
+}
+function formatReadOnly(field, value) {
+  if (value === void 0 || value === null || value === "") return "\u2014";
+  if (typeof value === "boolean") return value ? "Ja" : "Nein";
+  if (Array.isArray(value)) {
+    const labels = value.map((v) => optionLabel(field, v));
+    return labels.length ? labels.join(", ") : "\u2014";
+  }
+  if (field.values) return optionLabel(field, value);
+  return String(value);
+}
+function optionLabel(field, value) {
+  const opt = field.values?.find((o) => o.value === String(value));
+  return opt?.label ?? String(value);
+}
+function FieldRenderer({ field, values, errors, isHidden, setValue }) {
+  if (isHidden(field)) return null;
+  switch (field.type) {
+    case "group":
+      return /* @__PURE__ */ jsxs("fieldset", { className: "prn-form-group", children: [
+        field.label && /* @__PURE__ */ jsx("legend", { className: "prn-form-group-legend", children: field.label }),
+        (field.components ?? []).map((child, i) => /* @__PURE__ */ jsx(
+          FieldRenderer,
+          {
+            field: child,
+            values,
+            errors,
+            isHidden,
+            setValue
+          },
+          child.id ?? child.key ?? `${child.type}-${i}`
+        ))
+      ] });
+    case "text":
+      return /* @__PURE__ */ jsx("div", { className: "prn-form-text", children: field.text ?? field.label });
+    case "separator":
+      return /* @__PURE__ */ jsx(Separator, { className: "prn-form-separator" });
+    case "spacer":
+      return /* @__PURE__ */ jsx("div", { className: "prn-form-spacer", "aria-hidden": true });
+    case "button":
+      return null;
+    // Submit-Button wird zentral gerendert.
+    default:
+      return /* @__PURE__ */ jsx(
+        DataFieldRenderer,
+        {
+          field,
+          values,
+          errors,
+          setValue
+        }
+      );
+  }
+}
+function DataFieldRenderer({
+  field,
+  values,
+  errors,
+  setValue
+}) {
+  if (!isDataField(field)) return null;
+  const key = field.key;
+  const value = getPath(values, key);
+  const error = errors[key]?.[0];
+  const label = field.label ?? key;
+  const required = field.validate?.required;
+  const options = field.values ?? [];
+  const commonField = {
+    label,
+    description: field.description,
+    errorMessage: error,
+    isInvalid: Boolean(error),
+    isRequired: required
+  };
+  switch (field.type) {
+    case "textarea":
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...commonField,
+          value: value == null ? "" : String(value),
+          onChange: (v) => setValue(key, v)
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberField,
+        {
+          ...commonField,
+          value: typeof value === "number" ? value : Number.NaN,
+          minValue: field.validate?.min,
+          maxValue: field.validate?.max,
+          onChange: (v) => setValue(key, Number.isNaN(v) ? void 0 : v)
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsxs(
+        Checkbox,
+        {
+          isSelected: Boolean(value),
+          isInvalid: Boolean(error),
+          onChange: (v) => setValue(key, v),
+          children: [
+            label,
+            required ? " *" : ""
+          ]
+        }
+      );
+    case "datetime": {
+      let dateValue = null;
+      const raw = value == null ? "" : String(value).slice(0, 10);
+      if (raw.trim()) {
+        try {
+          dateValue = parseDate(raw);
+        } catch {
+          dateValue = null;
+        }
+      }
+      return /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          ...commonField,
+          value: dateValue,
+          onChange: (v) => setValue(key, v ? v.toString() : void 0)
+        }
+      );
+    }
+    case "select":
+      return /* @__PURE__ */ jsxs("div", { className: "prn-form-select-wrap", children: [
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            label,
+            isInvalid: Boolean(error),
+            isRequired: required,
+            selectedKey: value == null ? null : String(value),
+            onSelectionChange: (k) => setValue(key, k == null ? void 0 : String(k)),
+            children: options.map((o) => /* @__PURE__ */ jsx(SelectItem, { id: o.value, textValue: o.label, children: o.label }, o.value))
+          }
+        ),
+        field.description && /* @__PURE__ */ jsx("div", { className: "prn-form-hint", children: field.description }),
+        error && /* @__PURE__ */ jsx("div", { className: "prn-form-error", role: "alert", children: error })
+      ] });
+    case "radio":
+      return /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          ...commonField,
+          value: value == null ? null : String(value),
+          onChange: (v) => setValue(key, v),
+          children: options.map((o) => /* @__PURE__ */ jsx(Radio, { value: o.value, children: o.label }, o.value))
+        }
+      );
+    case "checklist":
+      return /* @__PURE__ */ jsx(
+        CheckboxGroup,
+        {
+          ...commonField,
+          value: Array.isArray(value) ? value.map(String) : [],
+          onChange: (v) => setValue(key, v),
+          children: options.map((o) => /* @__PURE__ */ jsx(Checkbox, { value: o.value, children: o.label }, o.value))
+        }
+      );
+    case "taglist":
+      return /* @__PURE__ */ jsx(
+        TaglistField,
+        {
+          label,
+          options,
+          selected: Array.isArray(value) ? value.map(String) : [],
+          onChange: (v) => setValue(key, v),
+          error
+        }
+      );
+    case "textfield":
+    default:
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...commonField,
+          value: value == null ? "" : String(value),
+          onChange: (v) => setValue(key, v)
+        }
+      );
+  }
+}
+function TaglistField({
+  label,
+  options,
+  selected,
+  onChange,
+  error
+}) {
+  const available = options.filter((o) => !selected.includes(o.value));
+  const labelFor = (v) => options.find((o) => o.value === v)?.label ?? v;
+  return /* @__PURE__ */ jsxs("div", { className: "prn-form-taglist", children: [
+    /* @__PURE__ */ jsx(
+      ComboBox,
+      {
+        label,
+        errorMessage: error,
+        isInvalid: Boolean(error),
+        selectedKey: null,
+        onSelectionChange: (k) => {
+          if (k != null) onChange([...selected, String(k)]);
+        },
+        children: available.map((o) => /* @__PURE__ */ jsx(ComboBoxItem, { id: o.value, textValue: o.label, children: o.label }, o.value))
+      }
+    ),
+    selected.length > 0 && /* @__PURE__ */ jsx(
+      TagGroup,
+      {
+        "aria-label": `${String(label)} Auswahl`,
+        onRemove: (keys) => onChange(selected.filter((s) => !keys.has(s))),
+        children: selected.map((v) => /* @__PURE__ */ jsx(Tag, { id: v, children: labelFor(v) }, v))
+      }
+    )
+  ] });
+}
+
+// src/builder/builder-model.ts
+var BUILDER_FIELD_TYPES = [
+  "textfield",
+  "textarea",
+  "number",
+  "checkbox",
+  "checklist",
+  "radio",
+  "select",
+  "datetime",
+  "taglist",
+  "text",
+  "separator",
+  "spacer"
+];
+var FIELD_TYPE_LABELS = {
+  textfield: "Textfeld",
+  textarea: "Textbereich",
+  number: "Zahl",
+  checkbox: "Checkbox",
+  checklist: "Checkliste",
+  radio: "Optionsfeld",
+  select: "Auswahl",
+  datetime: "Datum",
+  taglist: "Tag-Liste",
+  text: "Text",
+  separator: "Trennlinie",
+  spacer: "Abstand"
+};
+var PRESENTATIONAL = /* @__PURE__ */ new Set([
+  "text",
+  "separator",
+  "spacer"
+]);
+var OPTION_TYPES = /* @__PURE__ */ new Set([
+  "select",
+  "radio",
+  "checklist",
+  "taglist"
+]);
+function isPresentational(type) {
+  return PRESENTATIONAL.has(type);
+}
+function hasOptions(type) {
+  return OPTION_TYPES.has(type);
+}
+var idCounter = 0;
+function generateFieldId() {
+  idCounter += 1;
+  const rand = Math.random().toString(36).slice(2, 8);
+  return `Field_${rand}${idCounter}`;
+}
+function emptySchema() {
+  return {
+    type: "default",
+    components: [],
+    schemaVersion: 1,
+    exporter: { name: "@conuti-das/prince-ui-forms", version: "0.1.0" }
+  };
+}
+function createField(type) {
+  const id = generateFieldId();
+  if (isPresentational(type)) {
+    if (type === "text") return { id, type, text: "Statischer Text" };
+    return { id, type };
+  }
+  const field = {
+    id,
+    type,
+    key: id,
+    label: FIELD_TYPE_LABELS[type]
+  };
+  if (hasOptions(type)) {
+    field.values = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" }
+    ];
+  }
+  return field;
+}
+function insertField(schema, field, index) {
+  const components = [...schema.components];
+  const at = index == null ? components.length : Math.max(0, Math.min(index, components.length));
+  components.splice(at, 0, field);
+  return { ...schema, components };
+}
+function removeFieldAt(schema, index) {
+  const components = schema.components.filter((_, i) => i !== index);
+  return { ...schema, components };
+}
+function moveField(schema, from, to) {
+  const components = [...schema.components];
+  if (from < 0 || from >= components.length) return schema;
+  const clampedTo = Math.max(0, Math.min(to, components.length - 1));
+  const [moved] = components.splice(from, 1);
+  if (moved === void 0) return schema;
+  components.splice(clampedTo, 0, moved);
+  return { ...schema, components };
+}
+function updateFieldAt(schema, index, patch) {
+  const components = schema.components.map(
+    (f, i) => i === index ? { ...f, ...patch } : f
+  );
+  return { ...schema, components };
+}
+var DND_MIME = "application/x-prn-field-type";
+function FormBuilder({
+  value,
+  defaultValue,
+  onChange,
+  onSave,
+  mode,
+  onModeChange,
+  fieldTypes = BUILDER_FIELD_TYPES,
+  className
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(
+    () => value ?? defaultValue ?? emptySchema()
+  );
+  const schema = isControlled ? value : internal;
+  const [modeInternal, setModeInternal] = useState(mode ?? "design");
+  const activeMode = mode ?? modeInternal;
+  const [selectedIndex, setSelectedIndex] = useState(null);
+  const [dropIndex, setDropIndex] = useState(null);
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const setMode = useCallback(
+    (m) => {
+      if (mode === void 0) setModeInternal(m);
+      onModeChange?.(m);
+    },
+    [mode, onModeChange]
+  );
+  const dragFrom = useRef(null);
+  const onPaletteDragStart = (e, type) => {
+    e.dataTransfer.setData(DND_MIME, type);
+    e.dataTransfer.effectAllowed = "copy";
+    dragFrom.current = null;
+  };
+  const onCanvasItemDragStart = (e, index) => {
+    e.dataTransfer.setData(DND_MIME, "__move__");
+    e.dataTransfer.effectAllowed = "move";
+    dragFrom.current = index;
+  };
+  const onDropAt = (e, index) => {
+    e.preventDefault();
+    const data = e.dataTransfer.getData(DND_MIME);
+    setDropIndex(null);
+    if (dragFrom.current != null) {
+      const next = moveField(schema, dragFrom.current, index);
+      commit(next);
+      setSelectedIndex(index);
+      dragFrom.current = null;
+      return;
+    }
+    if (data && data !== "__move__") {
+      const field = createField(data);
+      commit(insertField(schema, field, index));
+      setSelectedIndex(index);
+    }
+  };
+  const onDropEnd = (e) => {
+    e.preventDefault();
+    const data = e.dataTransfer.getData(DND_MIME);
+    setDropIndex(null);
+    if (dragFrom.current != null) {
+      commit(moveField(schema, dragFrom.current, schema.components.length - 1));
+      dragFrom.current = null;
+      return;
+    }
+    if (data && data !== "__move__") {
+      const field = createField(data);
+      commit(insertField(schema, field));
+      setSelectedIndex(schema.components.length);
+    }
+  };
+  const selectedField = selectedIndex != null ? schema.components[selectedIndex] : void 0;
+  const patchSelected = useCallback(
+    (patch) => {
+      if (selectedIndex == null) return;
+      commit(updateFieldAt(schema, selectedIndex, patch));
+    },
+    [selectedIndex, schema, commit]
+  );
+  const deleteSelected = useCallback(() => {
+    if (selectedIndex == null) return;
+    commit(removeFieldAt(schema, selectedIndex));
+    setSelectedIndex(null);
+  }, [selectedIndex, schema, commit]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("prn-form-builder", className), "data-mode": activeMode, children: [
+    /* @__PURE__ */ jsxs("div", { className: "prn-fb-toolbar", children: [
+      /* @__PURE__ */ jsxs(
+        SegmentedControl,
+        {
+          "aria-label": "Builder-Modus",
+          selectedKeys: /* @__PURE__ */ new Set([activeMode]),
+          onSelectionChange: (keys) => {
+            const next = [...keys][0];
+            if (next) setMode(next);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Segment, { id: "design", children: "Designer" }),
+            /* @__PURE__ */ jsx(Segment, { id: "expert", children: "Experte (form-js)" })
+          ]
+        }
+      ),
+      onSave && /* @__PURE__ */ jsx(Button, { variant: "filled", onPress: () => onSave(schema), children: "Speichern" })
+    ] }),
+    activeMode === "expert" ? /* @__PURE__ */ jsx(ExpertEditor, { schema, onChange: commit }) : /* @__PURE__ */ jsxs("div", { className: "prn-fb-grid", children: [
+      /* @__PURE__ */ jsx(Card, { title: "Felder", className: "prn-fb-palette", children: /* @__PURE__ */ jsx("div", { className: "prn-fb-palette-list", children: fieldTypes.map((type) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "prn-fb-palette-item",
+          draggable: true,
+          onDragStart: (e) => onPaletteDragStart(e, type),
+          onClick: () => {
+            commit(insertField(schema, createField(type)));
+            setSelectedIndex(schema.components.length);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "prn-fb-palette-glyph", "aria-hidden": true, children: GLYPH[type] ?? FALLBACK_GLYPH }),
+            FIELD_TYPE_LABELS[type]
+          ]
+        },
+        type
+      )) }) }),
+      /* @__PURE__ */ jsx(Card, { title: "Formular", className: "prn-fb-canvas", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "prn-fb-canvas-drop",
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDropIndex(schema.components.length);
+          },
+          onDrop: onDropEnd,
+          children: schema.components.length === 0 ? /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              title: "Leeres Formular",
+              description: "Felder aus der Palette hierher ziehen oder anklicken."
+            }
+          ) : /* @__PURE__ */ jsx("ul", { className: "prn-fb-canvas-list", role: "list", children: schema.components.map((field, index) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "prn-fb-canvas-item",
+              "data-selected": selectedIndex === index || void 0,
+              "data-dropbefore": dropIndex === index || void 0,
+              draggable: true,
+              onDragStart: (e) => onCanvasItemDragStart(e, index),
+              onDragOver: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setDropIndex(index);
+              },
+              onDrop: (e) => {
+                e.stopPropagation();
+                onDropAt(e, index);
+              },
+              onClick: () => setSelectedIndex(index),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "prn-fb-item-type", children: FIELD_TYPE_LABELS[field.type] ?? field.type }),
+                /* @__PURE__ */ jsx("span", { className: "prn-fb-item-label", children: isPresentational(field.type) ? field.text ?? "\u2014" : field.label ?? field.key ?? "\u2014" }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "plain",
+                    className: "prn-fb-item-remove",
+                    "aria-label": "Feld entfernen",
+                    onPress: () => {
+                      commit(removeFieldAt(schema, index));
+                      if (selectedIndex === index) setSelectedIndex(null);
+                    },
+                    children: "\u2715"
+                  }
+                )
+              ]
+            },
+            field.id ?? index
+          )) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Card, { title: "Eigenschaften", className: "prn-fb-props", children: selectedField ? /* @__PURE__ */ jsx(
+        PropertiesPanel,
+        {
+          field: selectedField,
+          onPatch: patchSelected,
+          onDelete: deleteSelected
+        }
+      ) : /* @__PURE__ */ jsx("p", { className: "prn-fb-props-empty", children: "Kein Feld ausgew\xE4hlt." }) }),
+      /* @__PURE__ */ jsx(Card, { title: "Vorschau", className: "prn-fb-preview", children: schema.components.length === 0 ? /* @__PURE__ */ jsx("p", { className: "prn-fb-props-empty", children: "Noch keine Felder." }) : /* @__PURE__ */ jsx(FormRenderer, { schema, submitLabel: null }) })
+    ] })
+  ] });
+}
+var ic = (children) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    width: "15",
+    height: "15",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children
+  }
+);
+var FALLBACK_GLYPH = ic(/* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "2.5" }));
+var GLYPH = {
+  textfield: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "5.5", width: "12", height: "5", rx: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.5 8h3" })
+    ] })
+  ),
+  textarea: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "10", rx: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.5 6h7M4.5 8.5h7M4.5 11h4" })
+    ] })
+  ),
+  number: ic(/* @__PURE__ */ jsx("path", { d: "M6 2.5 4.5 13.5M11.5 2.5 10 13.5M2.5 5.5h11M2 10.5h11" })),
+  checkbox: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "2.5", y: "2.5", width: "11", height: "11", rx: "2.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M5.5 8.2l1.8 1.8 3.2-3.6" })
+    ] })
+  ),
+  checklist: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M6 4.5h7.5M6 8h7.5M6 11.5h7.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M2.3 4.2l.8.9 1.5-1.7M2.3 7.7l.8.9 1.5-1.7M2.3 11.2l.8.9 1.5-1.7" })
+    ] })
+  ),
+  radio: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "5.5" }),
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "2.2", fill: "currentColor", stroke: "none" })
+    ] })
+  ),
+  select: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "12", height: "8", rx: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M6 7.5 8 9.5 10 7.5" })
+    ] })
+  ),
+  datetime: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "2.25", y: "3.25", width: "11.5", height: "10.5", rx: "2.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M2.25 6.5h11.5M5 2v2.2M11 2v2.2" })
+    ] })
+  ),
+  taglist: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M2.5 7.6V3.6a1 1 0 0 1 1-1h4l6 6-5 5-6-6z" }),
+      /* @__PURE__ */ jsx("circle", { cx: "5.4", cy: "5.5", r: "1", fill: "currentColor", stroke: "none" })
+    ] })
+  ),
+  text: ic(/* @__PURE__ */ jsx("path", { d: "M4 4h8M8 4v8M6.5 12h3" })),
+  separator: ic(/* @__PURE__ */ jsx("path", { d: "M2.5 8h11" })),
+  spacer: ic(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 3v10" }),
+      /* @__PURE__ */ jsx("path", { d: "M5.5 5 8 2.5 10.5 5M5.5 11 8 13.5 10.5 11" })
+    ] })
+  )
+};
+function PropertiesPanel({
+  field,
+  onPatch,
+  onDelete
+}) {
+  const presentational = isPresentational(field.type);
+  const optioned = hasOptions(field.type);
+  return /* @__PURE__ */ jsxs("div", { className: "prn-fb-props-form", children: [
+    presentational ? field.type === "text" && /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: "Text",
+        value: field.text ?? "",
+        onChange: (v) => onPatch({ text: v })
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Label",
+          value: field.label ?? "",
+          onChange: (v) => onPatch({ label: v })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Key (Datenbindung)",
+          value: field.key ?? "",
+          onChange: (v) => onPatch({ key: v })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Beschreibung",
+          value: field.description ?? "",
+          onChange: (v) => onPatch({ description: v })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          isSelected: Boolean(field.validate?.required),
+          onChange: (v) => onPatch({ validate: { ...field.validate, required: v } }),
+          children: "Pflichtfeld"
+        }
+      ),
+      field.type === "number" && /* @__PURE__ */ jsxs("div", { className: "prn-fb-props-row", children: [
+        /* @__PURE__ */ jsx(
+          NumberField,
+          {
+            label: "Min",
+            value: field.validate?.min ?? Number.NaN,
+            onChange: (v) => onPatch({
+              validate: { ...field.validate, min: Number.isNaN(v) ? void 0 : v }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberField,
+          {
+            label: "Max",
+            value: field.validate?.max ?? Number.NaN,
+            onChange: (v) => onPatch({
+              validate: { ...field.validate, max: Number.isNaN(v) ? void 0 : v }
+            })
+          }
+        )
+      ] }),
+      (field.type === "textfield" || field.type === "textarea") && /* @__PURE__ */ jsxs("div", { className: "prn-fb-props-row", children: [
+        /* @__PURE__ */ jsx(
+          NumberField,
+          {
+            label: "Min. L\xE4nge",
+            value: field.validate?.minLength ?? Number.NaN,
+            onChange: (v) => onPatch({
+              validate: {
+                ...field.validate,
+                minLength: Number.isNaN(v) ? void 0 : v
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberField,
+          {
+            label: "Max. L\xE4nge",
+            value: field.validate?.maxLength ?? Number.NaN,
+            onChange: (v) => onPatch({
+              validate: {
+                ...field.validate,
+                maxLength: Number.isNaN(v) ? void 0 : v
+              }
+            })
+          }
+        )
+      ] }),
+      field.type === "textfield" && /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Pattern (RegEx)",
+          value: field.validate?.pattern ?? "",
+          onChange: (v) => onPatch({ validate: { ...field.validate, pattern: v || void 0 } })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Sichtbar wenn versteckt (conditional.hide)",
+          description: 'FEEL-nah, z. B. role = "user"',
+          value: field.conditional?.hide ?? "",
+          onChange: (v) => onPatch({ conditional: { hide: v || void 0 } })
+        }
+      ),
+      optioned && /* @__PURE__ */ jsx(
+        OptionsEditor,
+        {
+          options: field.values ?? [],
+          onChange: (values) => onPatch({ values })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "tinted", onPress: onDelete, className: "prn-fb-delete", children: "Feld l\xF6schen" })
+  ] });
+}
+function OptionsEditor({
+  options,
+  onChange
+}) {
+  const update = (i, patch) => onChange(options.map((o, idx) => idx === i ? { ...o, ...patch } : o));
+  return /* @__PURE__ */ jsxs("div", { className: "prn-fb-options", children: [
+    /* @__PURE__ */ jsx("div", { className: "prn-fb-options-head", children: "Optionen" }),
+    options.map((o, i) => /* @__PURE__ */ jsxs("div", { className: "prn-fb-props-row", children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Label",
+          value: o.label,
+          onChange: (v) => update(i, { label: v })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Wert",
+          value: o.value,
+          onChange: (v) => update(i, { value: v })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "plain",
+          "aria-label": "Option entfernen",
+          onPress: () => onChange(options.filter((_, idx) => idx !== i)),
+          children: "\u2715"
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "tinted",
+        onPress: () => onChange([
+          ...options,
+          { label: `Option ${options.length + 1}`, value: `option${options.length + 1}` }
+        ]),
+        children: "Option hinzuf\xFCgen"
+      }
+    )
+  ] });
+}
+function ExpertEditor({
+  schema,
+  onChange
+}) {
+  const containerRef = useRef(null);
+  const editorRef = useRef(null);
+  const [status, setStatus] = useState(
+    "loading"
+  );
+  const [errorMsg, setErrorMsg] = useState(null);
+  const initialSchema = useRef(schema);
+  useEffect(() => {
+    let cancelled = false;
+    const el = containerRef.current;
+    if (!el) return;
+    setStatus("loading");
+    setErrorMsg(null);
+    (async () => {
+      try {
+        await Promise.all([
+          // @ts-ignore CSS-Asset ohne Typdeklaration; vom Bundler aufgelöst.
+          import(
+            /* @vite-ignore */
+            '@bpmn-io/form-js-editor/dist/assets/form-js-editor.css'
+          )
+        ]).catch(() => {
+        });
+        const mod = await import(
+          /* @vite-ignore */
+          '@bpmn-io/form-js-editor'
+        );
+        if (cancelled) return;
+        const version = mod.schemaVersion ?? 18;
+        const baseSchema = {
+          schemaVersion: version,
+          ...initialSchema.current
+        };
+        let editor;
+        try {
+          editor = await mod.createFormEditor({ container: el, schema: baseSchema });
+        } catch {
+          editor = await mod.createFormEditor({
+            container: el,
+            schema: { schemaVersion: version, type: "default", components: [] }
+          });
+        }
+        if (cancelled) {
+          editor.destroy();
+          return;
+        }
+        editorRef.current = editor;
+        editor.on("changed", () => {
+          try {
+            onChange(editor.getSchema());
+          } catch {
+          }
+        });
+        if (!cancelled) setStatus("ready");
+        window.setTimeout(() => {
+          if (cancelled) return;
+          const fjs = el.querySelector(".fjs-container");
+          if (fjs && fjs.children.length === 0) setStatus("empty");
+        }, 800);
+      } catch (e) {
+        if (!cancelled) {
+          setErrorMsg(e?.message ?? String(e));
+          setStatus("error");
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      const editor = editorRef.current;
+      try {
+        editor?.destroy?.();
+      } catch {
+      }
+      editorRef.current = null;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "prn-fb-expert", children: [
+    status === "error" && /* @__PURE__ */ jsxs(Notice, { tone: "negative", title: "form-js nicht verf\xFCgbar", children: [
+      "Der Experten-Editor (`@bpmn-io/form-js-editor`) konnte nicht geladen werden. Stellen Sie sicher, dass das optionale Peer-Paket installiert ist.",
+      errorMsg ? ` (${errorMsg})` : ""
+    ] }),
+    status === "empty" && /* @__PURE__ */ jsx(Notice, { tone: "info", title: "Experten-Editor konnte nicht gerendert werden", children: 'Der form-js-Editor wurde geladen, aber in dieser Umgebung nicht dargestellt (bekanntes Bundler-/Preact-Problem). Nutzen Sie bitte den \u201EDesigner"-Modus \u2014 er deckt dieselben Funktionen ab.' }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "prn-fb-expert-host",
+        "data-status": status
+      }
+    )
+  ] });
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+export { BUILDER_FIELD_TYPES, FIELD_TYPE_LABELS, FormBuilder, FormRenderer, PRESENTATIONAL_TYPES, VALIDATION_MESSAGES, camundaSubmitType, camundaTypeName, camundaTypeOf, camundaTypeToFieldType, createField, dataFields, emptySchema, evalConditional, flattenFields, formDataToCamundaVariables, getPath, insertField, isDataField, moveField, removeFieldAt, setPath, taskFormToSchema, updateFieldAt, validateField, validateForm };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map