@teamnovu/nuxt-statamic-formbuilder 0.1.0

package/README.md

@@ -0,0 +1,13 @@
+# @teamnovu/nuxt-statamic-formbuilder
+
+Core Nuxt module: form configuration types, Valibot validation from Statamic rules, field conditions, field registry, Statamic CSRF submit, and `StatamicFormBuilder`.
+
+See the [monorepo README](../../README.md) for install and usage.
+
+## Security / validation
+
+Client-side Valibot rules are for UX only. Authoritative validation is Statamic form/field `validate` on the server. Most PHP fieldtypes currently ship empty `rules()` — editors must set validation in the form blueprint (or accept weak server checks). Do not treat the Nuxt UI as a trust boundary.
+
+## Texts vs i18n
+
+Bundled locales cover field validation messages and toast titles. Submit / loading / success / error body copy belongs on CMS `FormBuilderTexts` (see monorepo README).

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export { BaseFieldConfig, DefaultInputField, DisplayTextFieldConfig, FormBuilderConfiguration, FormBuilderField, FormBuilderFieldBase, FormBuilderFieldType, FormBuilderRequestState, FormBuilderSubmitter, FormBuilderTexts, FormFieldOption, InputCheckboxesFieldConfig, InputDateFieldConfig, InputEmailFieldConfig, InputFileUploadFieldConfig, InputFormBuilderField, InputNumberFieldConfig, InputPhoneFieldConfig, InputRadioButtonsFieldConfig, InputRules, InputSelectFieldConfig, InputSliderFieldConfig, InputSwitchFieldConfig, InputTextFieldConfig, InputTextareaFieldConfig, TranslatableInput, UseFormBuilderOptions, ValidationTrigger, defaultInputField, formBuilderStateKey, isDisplayOrSpacerField, isFileUploadField, isInputField, isMultiValueField } from '../dist/runtime/types.js';
+
+interface ModuleOptions {
+    /**
+     * Base URL of the Statamic backend used for form submissions.
+     * Falls back to `runtimeConfig.public.BACKEND_URL` when unset.
+     */
+    serverUrl?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@teamnovu/nuxt-statamic-formbuilder",
+  "configKey": "formBuilder",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,83 @@
+import { defineNuxtModule, createResolver, addImports, addComponent } from '@nuxt/kit';
+export { formBuilderStateKey, isDisplayOrSpacerField, isFileUploadField, isInputField, isMultiValueField } from '../dist/runtime/types.js';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@teamnovu/nuxt-statamic-formbuilder",
+    configKey: "formBuilder"
+  },
+  defaults: {
+    serverUrl: void 0
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.public.formBuilder = {
+      serverUrl: options.serverUrl ?? nuxt.options.runtimeConfig.public.BACKEND_URL ?? ""
+    };
+    const composables = [
+      "useFormBuilder",
+      "useFormValidation",
+      "useFieldConditions",
+      "useTranslatableInput",
+      "useFormFieldRegistry"
+    ];
+    for (const name of composables) {
+      addImports({
+        name,
+        from: resolver.resolve(`./runtime/composables/${name}`)
+      });
+    }
+    addImports({
+      name: "registerFormField",
+      from: resolver.resolve("./runtime/composables/useFormFieldRegistry")
+    });
+    addImports({
+      name: "resolveFormField",
+      from: resolver.resolve("./runtime/composables/useFormFieldRegistry")
+    });
+    addImports({
+      name: "toFormBuilderConfiguration",
+      from: resolver.resolve("./runtime/utils/toFormBuilderConfiguration")
+    });
+    addImports({
+      name: "COMPONENT_FORM_BUILDER_FRAGMENT",
+      from: resolver.resolve("./runtime/utils/graphqlFragment")
+    });
+    addImports({
+      name: "removePTags",
+      from: resolver.resolve("./runtime/utils/removePTags")
+    });
+    for (const name of [
+      "isDisplayOrSpacerField",
+      "isInputField",
+      "isFileUploadField",
+      "isMultiValueField",
+      "formBuilderStateKey"
+    ]) {
+      addImports({
+        name,
+        from: resolver.resolve("./runtime/types")
+      });
+    }
+    addComponent({
+      name: "FormBuilderFields",
+      filePath: resolver.resolve("./runtime/components/FormBuilderFields.vue")
+    });
+    addComponent({
+      name: "StatamicFormBuilder",
+      filePath: resolver.resolve("./runtime/components/StatamicFormBuilder.vue")
+    });
+    nuxt.hook("i18n:registerModule", (register) => {
+      register({
+        langDir: resolver.resolve("./runtime/locales"),
+        locales: [
+          { code: "en", file: "en.json" },
+          { code: "de", file: "de.json" },
+          { code: "fr", file: "fr.json" }
+        ]
+      });
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/FormBuilderFields.d.vue.ts

@@ -0,0 +1,34 @@
+import type { FormBuilderConfiguration, FormBuilderField } from '../types.js';
+type __VLS_Props = {
+    form: FormBuilderConfiguration;
+    fields: Array<FormBuilderField>;
+    error?: Record<string, unknown>;
+    styleConfig?: Record<string, unknown>;
+    validationErrors?: Record<string, string | undefined>;
+};
+declare var __VLS_2: string, __VLS_3: {
+    field: FormBuilderField;
+    config: import("../fieldConfigs.js").BaseFieldConfig | import("../fieldConfigs.js").InputTextFieldConfig | import("../fieldConfigs.js").InputTextareaFieldConfig | import("../fieldConfigs.js").InputEmailFieldConfig | import("../fieldConfigs.js").InputPhoneFieldConfig | import("../fieldConfigs.js").InputNumberFieldConfig | import("../fieldConfigs.js").InputSelectFieldConfig | import("../fieldConfigs.js").InputDateFieldConfig | import("../fieldConfigs.js").InputSliderFieldConfig | import("../fieldConfigs.js").InputCheckboxesFieldConfig | import("../fieldConfigs.js").InputRadioButtonsFieldConfig | import("../fieldConfigs.js").InputSwitchFieldConfig | import("../fieldConfigs.js").InputFileUploadFieldConfig | import("../fieldConfigs.js").DisplayTextFieldConfig;
+    styleConfig: Record<string, unknown>;
+    input: {
+        name: string;
+        id: string;
+        ariaLabel: string;
+        rules: {
+            required: boolean | undefined;
+        };
+    };
+    error: {} | null;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormBuilderFields.vue

@@ -0,0 +1,86 @@
+<template>
+  <template
+    v-for="field in fields"
+    :key="field.handle"
+  >
+    <slot
+      :name="field.handle"
+      v-bind="slotBindings(field)"
+    >
+      <Transition name="form-field">
+        <component
+          :is="resolveFormField(field.type)"
+          v-if="resolveFormField(field.type) && isVisible(field) && field.type !== 'spacer'"
+          :class="getFormClasses(field.width)"
+          v-bind="slotBindings(field)"
+          :is-range="field.type === 'input_daterange'"
+        />
+        <div
+          v-else-if="field.type === 'spacer' && isVisible(field)"
+          :aria-hidden="true"
+          :class="getFormClasses(field.width)"
+          class="group"
+        />
+        <span
+          v-else-if="isVisible(field) && !resolveFormField(field.type) && field.type !== 'spacer'"
+          :class="getFormClasses(field.width)"
+          class="group"
+        >
+          Undefined field type {{ field.type }}
+        </span>
+      </Transition>
+    </slot>
+  </template>
+</template>
+
+<script setup>
+import { inject, ref } from "vue";
+import { formBuilderStateKey } from "../injectionKeys";
+import { useFieldConditions } from "../composables/useFieldConditions";
+import { resolveFormField } from "../composables/useFormFieldRegistry";
+const props = defineProps({
+  form: { type: Object, required: true },
+  fields: { type: Array, required: true },
+  error: { type: Object, required: false },
+  styleConfig: { type: Object, required: false },
+  validationErrors: { type: Object, required: false }
+});
+const state = inject(formBuilderStateKey, ref({}));
+const { isVisible } = useFieldConditions(
+  () => props.fields,
+  state
+);
+const slotBindings = (field) => ({
+  field,
+  config: field.config,
+  styleConfig: props.styleConfig ?? {},
+  input: {
+    name: field.handle,
+    id: field.handle,
+    ariaLabel: field.display ?? field.handle,
+    rules: {
+      required: props.form?.rules?.[field.handle]?.includes("required")
+    }
+  },
+  error: props.validationErrors?.[field.handle] ?? props.error?.[field.handle] ?? null
+});
+const getFormClasses = (width) => {
+  const classes = ["col-span-12"];
+  if (width === 25) {
+    classes.push("@md:col-span-3");
+  } else if (width === 33) {
+    classes.push("@md:col-span-4");
+  } else if (width === 50) {
+    classes.push("@md:col-span-6");
+  } else if (width === 66) {
+    classes.push("@md:col-span-8");
+  } else if (width === 75) {
+    classes.push("@md:col-span-9");
+  }
+  return classes;
+};
+</script>
+
+<style scoped>
+.form-field-enter-active,.form-field-leave-active{overflow:hidden;transition:height .35s ease,opacity .35s ease,padding-bottom .35s ease}.form-field-enter-from,.form-field-leave-to{height:0;opacity:0;padding-bottom:0}.form-field-enter-to,.form-field-leave-from{height:calc-size(auto,size);opacity:1}
+</style>

package/dist/runtime/components/FormBuilderFields.vue.d.ts

@@ -0,0 +1,34 @@
+import type { FormBuilderConfiguration, FormBuilderField } from '../types.js';
+type __VLS_Props = {
+    form: FormBuilderConfiguration;
+    fields: Array<FormBuilderField>;
+    error?: Record<string, unknown>;
+    styleConfig?: Record<string, unknown>;
+    validationErrors?: Record<string, string | undefined>;
+};
+declare var __VLS_2: string, __VLS_3: {
+    field: FormBuilderField;
+    config: import("../fieldConfigs.js").BaseFieldConfig | import("../fieldConfigs.js").InputTextFieldConfig | import("../fieldConfigs.js").InputTextareaFieldConfig | import("../fieldConfigs.js").InputEmailFieldConfig | import("../fieldConfigs.js").InputPhoneFieldConfig | import("../fieldConfigs.js").InputNumberFieldConfig | import("../fieldConfigs.js").InputSelectFieldConfig | import("../fieldConfigs.js").InputDateFieldConfig | import("../fieldConfigs.js").InputSliderFieldConfig | import("../fieldConfigs.js").InputCheckboxesFieldConfig | import("../fieldConfigs.js").InputRadioButtonsFieldConfig | import("../fieldConfigs.js").InputSwitchFieldConfig | import("../fieldConfigs.js").InputFileUploadFieldConfig | import("../fieldConfigs.js").DisplayTextFieldConfig;
+    styleConfig: Record<string, unknown>;
+    input: {
+        name: string;
+        id: string;
+        ariaLabel: string;
+        rules: {
+            required: boolean | undefined;
+        };
+    };
+    error: {} | null;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/StatamicFormBuilder.d.vue.ts

@@ -0,0 +1,26 @@
+import type { FormBuilderConfiguration, FormBuilderSubmitter, FormBuilderTexts } from '../types.js';
+type __VLS_Props = {
+    form: FormBuilderConfiguration;
+    texts: FormBuilderTexts;
+    serverUrl?: string;
+    styleConfig?: Record<string, unknown>;
+    submitter?: FormBuilderSubmitter;
+    /**
+     * Override the FormBuilder component (defaults to globally registered `FormBuilder`
+     * from a UI layer such as `@teamnovu/nuxt-statamic-formbuilder-nuxt-ui`).
+     */
+    formComponent?: unknown;
+};
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/StatamicFormBuilder.vue

@@ -0,0 +1,54 @@
+<template>
+  <component
+    :is="formBuilderComponent"
+    v-if="formBuilderComponent && form"
+    :server-url="resolvedServerUrl"
+    :form="form"
+    :texts="texts"
+    :style-config="styleConfig"
+    :submitter="submitter"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      :key="name"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData || {}"
+      />
+    </template>
+  </component>
+</template>
+
+<script setup>
+import { useRuntimeConfig } from "#imports";
+import { computed, resolveComponent } from "vue";
+const props = defineProps({
+  form: { type: Object, required: true },
+  texts: { type: Object, required: true },
+  serverUrl: { type: String, required: false },
+  styleConfig: { type: Object, required: false },
+  submitter: { type: Function, required: false },
+  formComponent: { type: null, required: false }
+});
+const runtimeConfig = useRuntimeConfig();
+const resolvedServerUrl = computed(
+  () => props.serverUrl || runtimeConfig.public.formBuilder?.serverUrl || runtimeConfig.public.BACKEND_URL || ""
+);
+const formBuilderComponent = computed(() => {
+  if (props.formComponent) {
+    return props.formComponent;
+  }
+  const resolved = resolveComponent("FormBuilder");
+  if (typeof resolved === "string") {
+    if (import.meta.dev) {
+      console.warn(
+        "[StatamicFormBuilder] No FormBuilder component found. Install a UI layer (e.g. @teamnovu/nuxt-statamic-formbuilder-nuxt-ui) or pass formComponent."
+      );
+    }
+    return null;
+  }
+  return resolved;
+});
+</script>

package/dist/runtime/components/StatamicFormBuilder.vue.d.ts

@@ -0,0 +1,26 @@
+import type { FormBuilderConfiguration, FormBuilderSubmitter, FormBuilderTexts } from '../types.js';
+type __VLS_Props = {
+    form: FormBuilderConfiguration;
+    texts: FormBuilderTexts;
+    serverUrl?: string;
+    styleConfig?: Record<string, unknown>;
+    submitter?: FormBuilderSubmitter;
+    /**
+     * Override the FormBuilder component (defaults to globally registered `FormBuilder`
+     * from a UI layer such as `@teamnovu/nuxt-statamic-formbuilder-nuxt-ui`).
+     */
+    formComponent?: unknown;
+};
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useFieldConditions.d.ts

@@ -0,0 +1,16 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { FormBuilderField } from '../types.js';
+/**
+ * Evaluates Statamic field conditions against the current form values.
+ *
+ * @param fields     - The form fields array (MaybeRefOrGetter for reactivity).
+ * @param formValues - The live form state (MaybeRefOrGetter for reactivity).
+ *
+ * @example
+ * const { isVisible } = useFieldConditions(fields, state)
+ * // In template: v-if="isVisible(field)"
+ */
+export declare function useFieldConditions(fields: MaybeRefOrGetter<FormBuilderField[]>, formValues: MaybeRefOrGetter<Record<string, unknown>>): {
+    isVisible: (field: FormBuilderField) => boolean;
+    visibilityMap: import("vue").ComputedRef<Record<string, boolean>>;
+};

package/dist/runtime/composables/useFieldConditions.js

@@ -0,0 +1,230 @@
+import { computed, toValue } from "vue";
+const CONDITION_KEYS = [
+  "if",
+  "unless"
+];
+const OPERATORS = [
+  "equals",
+  "not",
+  "contains",
+  "contains_any",
+  "===",
+  "!==",
+  ">",
+  ">=",
+  "<",
+  "<=",
+  "custom"
+];
+const OPERATOR_ALIASES = {
+  "is": "equals",
+  "==": "equals",
+  "isnt": "not",
+  "!=": "not",
+  "includes": "contains",
+  "includes_any": "contains_any"
+};
+const NUMBER_OPS = /* @__PURE__ */ new Set([">", ">=", "<", "<="]);
+function dataGet(obj, path) {
+  return path.split(".").reduce((acc, key) => {
+    if (acc == null || typeof acc !== "object") return void 0;
+    return acc[key];
+  }, obj);
+}
+function isEmpty(value) {
+  if (value == null) return true;
+  if (typeof value === "string") return value.trim() === "";
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "object") return Object.keys(value).length === 0;
+  return false;
+}
+const ALL_OPERATORS = [...OPERATORS, ...Object.keys(OPERATOR_ALIASES)].sort((a, b) => b.length - a.length);
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function normalizeConditionString(value) {
+  if (value === null) return "null";
+  if (value === "") return "empty";
+  return String(value);
+}
+function resolveAlias(op) {
+  return OPERATOR_ALIASES[op] ?? op;
+}
+function parseOperator(rhs) {
+  const str = normalizeConditionString(rhs);
+  for (const op of ALL_OPERATORS) {
+    if (new RegExp(`^${escapeRegex(op)} [^=]`).test(str)) {
+      return resolveAlias(op);
+    }
+  }
+  return "equals";
+}
+function parseValue(rhs) {
+  let str = normalizeConditionString(rhs);
+  for (const op of ALL_OPERATORS) {
+    if (new RegExp(`^${escapeRegex(op)} [^=]`).test(str)) {
+      str = str.replace(new RegExp(`^${escapeRegex(op)}\\s*`), "");
+      break;
+    }
+  }
+  return str;
+}
+function scopeField(field, prefix) {
+  if (field.startsWith("$root.") || field.startsWith("root.") || field.startsWith("$parent.")) {
+    return field;
+  }
+  return prefix ? prefix + field : field;
+}
+function parseConditions(raw, prefix) {
+  return Object.entries(raw).map(([field, rhs]) => ({
+    field: scopeField(field, prefix),
+    operator: parseOperator(rhs),
+    value: parseValue(rhs)
+  }));
+}
+function normalizeOperator(op) {
+  switch (op) {
+    case "equals":
+      return "==";
+    case "not":
+      return "!=";
+    case "contains":
+      return "includes";
+    case "contains_any":
+      return "includes_any";
+    default:
+      return op;
+  }
+}
+function resolveField(field, formValues) {
+  if (field.startsWith("$parent.")) {
+    return void 0;
+  }
+  if (field.startsWith("$root.") || field.startsWith("root.")) {
+    return dataGet(formValues, field.replace(/^\$?root\./, ""));
+  }
+  return dataGet(formValues, field);
+}
+function testCondition(condition, formValues) {
+  const op = normalizeOperator(condition.operator);
+  const rawLhs = resolveField(condition.field, formValues);
+  const rawRhs = condition.value;
+  if (op === "includes_any") {
+    const needles = rawRhs.split(",").map((s) => s.trim());
+    if (Array.isArray(rawLhs)) {
+      return rawLhs.some((v) => needles.includes(String(v)));
+    }
+    return new RegExp(needles.map(escapeRegex).join("|")).test(String(rawLhs ?? ""));
+  }
+  if (op === "includes") {
+    if (Array.isArray(rawLhs)) return rawLhs.includes(rawRhs);
+    if (rawLhs == null || typeof rawLhs === "object") return false;
+    return String(rawLhs).includes(rawRhs);
+  }
+  if (rawRhs === "empty") {
+    const lhsEmpty = isEmpty(rawLhs);
+    switch (op) {
+      case "==":
+        return lhsEmpty;
+      case "!=":
+        return !lhsEmpty;
+      case "===":
+        return lhsEmpty;
+      case "!==":
+        return !lhsEmpty;
+      default:
+        return false;
+    }
+  }
+  let rhs;
+  switch (rawRhs) {
+    case "null":
+      rhs = null;
+      break;
+    case "true":
+      rhs = true;
+      break;
+    case "false":
+      rhs = false;
+      break;
+    default:
+      rhs = rawRhs;
+  }
+  if (NUMBER_OPS.has(op)) {
+    const lhsNum = Number(rawLhs);
+    const rhsNum = Number(rhs);
+    switch (op) {
+      case ">":
+        return lhsNum > rhsNum;
+      case ">=":
+        return lhsNum >= rhsNum;
+      case "<":
+        return lhsNum < rhsNum;
+      case "<=":
+        return lhsNum <= rhsNum;
+    }
+  }
+  if (rawLhs !== null && typeof rawLhs === "object") return false;
+  let lhs = rawLhs;
+  if (typeof lhs === "string") {
+    const trimmed = lhs.trim();
+    lhs = trimmed === "" ? null : trimmed;
+  }
+  if (typeof rhs === "string") rhs = rhs.trim();
+  switch (op) {
+    // Loose equality intentional — mirrors the original eval() behaviour,
+    // e.g. null == "null" should be false but null == null should be true.
+    // eslint-disable-next-line eqeqeq
+    case "==":
+      return lhs == rhs;
+    // eslint-disable-next-line eqeqeq
+    case "!=":
+      return lhs != rhs;
+    case "===":
+      return lhs === rhs;
+    case "!==":
+      return lhs !== rhs;
+    default:
+      return false;
+  }
+}
+function evaluateFieldConditions(field, formValues) {
+  const condKey = CONDITION_KEYS.find(
+    (k) => field[k] != null
+  );
+  if (!condKey) return true;
+  const raw = field[condKey];
+  if (typeof raw === "string") {
+    if (import.meta.dev) {
+      console.warn(
+        `[useFieldConditions] Custom string conditions are not supported (field: "${field.handle}", condition: "${raw}"). Field will always be shown.`
+      );
+    }
+    return true;
+  }
+  if (typeof raw !== "object" || raw === null) return true;
+  const passOnAny = condKey.includes("any");
+  const showOnPass = !condKey.includes("unless") && !condKey.includes("hide_when");
+  const conditions = parseConditions(
+    raw,
+    field.prefix
+  );
+  const passes = passOnAny ? conditions.some((c) => testCondition(c, formValues)) : conditions.every((c) => testCondition(c, formValues));
+  return showOnPass ? passes : !passes;
+}
+export function useFieldConditions(fields, formValues) {
+  const visibilityMap = computed(() => {
+    const values = toValue(formValues);
+    return toValue(fields).reduce((acc, field) => {
+      acc[field.handle] = evaluateFieldConditions(field, values);
+      return acc;
+    }, {});
+  });
+  function isVisible(field) {
+    return evaluateFieldConditions(field, toValue(formValues));
+  }
+  return {
+    isVisible,
+    visibilityMap
+  };
+}

package/dist/runtime/composables/useFormBuilder.d.ts

@@ -0,0 +1,11 @@
+import type { Ref } from 'vue';
+import type { FormBuilderConfiguration, FormBuilderField, FormBuilderRequestState, UseFormBuilderOptions } from '../types.js';
+export declare function useFormBuilder(formBuilderConfiguration: FormBuilderConfiguration, serverUrlOrOptions?: string | UseFormBuilderOptions): {
+    requestState: Ref<FormBuilderRequestState, FormBuilderRequestState>;
+    submit: (_event?: unknown, stateRef?: Ref<Record<string, unknown>>) => Promise<unknown>;
+    reset: () => void;
+    state: Ref<Record<string, unknown>, Record<string, unknown>>;
+    fields: import("vue").ComputedRef<FormBuilderField[]>;
+    serverUrl: import("vue").ComputedRef<string>;
+};
+export default useFormBuilder;