@frigear-nu/forms 0.0.5 → 0.0.7

package/dist/runtime/app/components/FormPhoneInput.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { composePhone, countryName, defaultPhoneCountry, parsePhone, phoneCountries } from "../../utils";
+const props = defineProps({
+  config: { type: Object, required: false },
+  locale: { type: String, required: true },
+  placeholder: { type: String, required: false },
+  countryLabel: { type: String, required: true }
+});
+const model = defineModel({ type: null });
+const country = ref(parsePhone(model.value ?? "", props.config).country);
+const national = ref(parsePhone(model.value ?? "", props.config, country.value).national);
+const countries = computed(() => phoneCountries(props.config));
+const items = computed(() => countries.value.map(({ code, dial, flag }) => ({
+  value: code,
+  label: `${flag} ${countryName(code, props.locale)} (+${dial})`,
+  short: `${flag} +${dial}`
+})));
+const current = computed(() => items.value.find((item) => item.value === country.value));
+watch(model, (value) => {
+  if ((value ?? "") === composePhone(country.value, national.value)) return;
+  const parsed = parsePhone(value ?? "", props.config, country.value);
+  country.value = parsed.country;
+  national.value = parsed.national;
+});
+watch(() => props.config, () => {
+  if (!countries.value.some((item) => item.code === country.value)) country.value = defaultPhoneCountry(props.config);
+}, { deep: true });
+watch([country, national], () => {
+  model.value = composePhone(country.value, national.value) || void 0;
+});
+</script>
+
+<template>
+  <UFieldGroup class="w-full">
+    <USelectMenu
+      v-model="country"
+      :items="items"
+      value-key="value"
+      :search-input="{ placeholder: countryLabel }"
+      :aria-label="countryLabel"
+      :ui="{ base: 'w-28 shrink-0', content: 'min-w-72' }"
+    >
+      <template #default>
+        <span class="truncate">{{ current?.short }}</span>
+      </template>
+    </USelectMenu>
+    <UInput
+      v-model="national"
+      type="tel"
+      inputmode="tel"
+      autocomplete="tel-national"
+      :placeholder="placeholder"
+      class="w-full"
+    />
+  </UFieldGroup>
+</template>

package/dist/runtime/app/components/FormPhoneInput.vue.d.ts

@@ -0,0 +1,20 @@
+import type { PhoneConfig } from '../../../types.js';
+type __VLS_Props = {
+    config?: PhoneConfig;
+    locale: string;
+    placeholder?: string;
+    /** Name of the country selector for assistive technology. */
+    countryLabel: string;
+};
+type __VLS_ModelProps = {
+    /** The single merged value, e.g. `+4512345678`. */
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormPreview.d.vue.ts

@@ -0,0 +1,12 @@
+import type { FormDefinition } from '../../../types.js';
+type __VLS_Props = {
+    slug: string;
+    name?: string;
+    /** `undefined` when the definition is invalid. */
+    definition?: Omit<FormDefinition, 'delivery'>;
+    /** Bump to remount the renderer (e.g. after saving). */
+    contentKey?: string | number;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormPreview.vue

@@ -0,0 +1,244 @@
+<script setup>
+import { PREVIEW_WIDTHS, previewScale } from "../../utils";
+const props = defineProps({
+  slug: { type: String, required: true },
+  name: { type: String, required: false },
+  definition: { type: Object, required: false },
+  contentKey: { type: [String, Number], required: false }
+});
+const t = useModuleT("forms");
+const toast = useToast();
+const paths = useFormsPaths();
+const path = computed(() => paths("form", { slug: props.slug }));
+const STORAGE_KEY = "forms:preview-device";
+const device = ref("mobile");
+onMounted(() => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "mobile" || stored === "desktop") device.value = stored;
+  } catch {
+  }
+});
+watch(device, (value) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, value);
+  } catch {
+  }
+});
+const devices = computed(() => [
+  { value: "mobile", label: t("preview.mobile", "Mobile"), icon: "i-lucide-smartphone" },
+  { value: "desktop", label: t("preview.desktop", "Desktop"), icon: "i-lucide-monitor" }
+]);
+const width = computed(() => PREVIEW_WIDTHS[device.value]);
+const renderKey = computed(() => `${props.contentKey ?? ""}-${props.definition ? JSON.stringify(props.definition).length : "x"}`);
+const resetKey = ref(0);
+const hostRef = useTemplateRef("hostRef");
+const innerRef = useTemplateRef("innerRef");
+const available = ref(0);
+const innerHeight = ref(0);
+const scale = computed(() => previewScale(available.value, width.value));
+let observer;
+onMounted(() => {
+  observer = new ResizeObserver(() => {
+    available.value = hostRef.value?.clientWidth ?? 0;
+    innerHeight.value = innerRef.value?.offsetHeight ?? 0;
+  });
+  if (hostRef.value) observer.observe(hostRef.value);
+  if (innerRef.value) observer.observe(innerRef.value);
+});
+onBeforeUnmount(() => observer?.disconnect());
+const open = ref(false);
+const modalKey = ref(0);
+const result = ref(null);
+const json = computed(() => JSON.stringify(result.value, null, 2));
+function tryAgain() {
+  result.value = null;
+  modalKey.value++;
+}
+watch(open, (value) => {
+  if (value) tryAgain();
+});
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(json.value);
+    toast.add({ title: t("preview.copied", "Copied to clipboard."), color: "success" });
+  } catch {
+  }
+}
+</script>
+
+<template>
+  <div class="min-w-0 space-y-3">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <UFieldGroup :aria-label="t('preview.device', 'Device')">
+        <UButton
+          v-for="item in devices"
+          :key="item.value"
+          size="xs"
+          color="neutral"
+          :variant="device === item.value ? 'solid' : 'outline'"
+          :icon="item.icon"
+          :label="item.label"
+          :aria-pressed="device === item.value"
+          @click="device = item.value"
+        />
+      </UFieldGroup>
+      <div class="flex items-center gap-1">
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-rotate-ccw"
+          :label="t('preview.reset', 'Reset')"
+          @click="resetKey++"
+        />
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-maximize-2"
+          :label="t('preview.tryIt', 'Try it')"
+          :disabled="!definition"
+          @click="open = true"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg bg-elevated/50 p-3">
+      <div
+        :class="[
+  'mx-auto overflow-hidden bg-default shadow-sm ring-1 ring-default',
+  device === 'mobile' ? 'rounded-[1.75rem] border-[5px] border-inverted/80' : 'rounded-lg'
+]"
+        :style="{ width: `${Math.round(width * scale) + (device === 'mobile' ? 10 : 0)}px`, maxWidth: '100%' }"
+      >
+        <div
+          v-if="device === 'desktop'"
+          class="flex items-center gap-1.5 border-b border-default bg-elevated px-2 py-1.5"
+        >
+          <span class="size-2 rounded-full bg-error/70" />
+          <span class="size-2 rounded-full bg-warning/70" />
+          <span class="size-2 rounded-full bg-success/70" />
+          <span class="ml-2 min-w-0 flex-1 truncate rounded bg-default px-2 py-0.5 text-[10px] text-muted">{{ path }}</span>
+        </div>
+        <div
+          v-else
+          class="mx-auto mt-1.5 h-1 w-10 rounded-full bg-inverted/20"
+        />
+        <div
+          ref="hostRef"
+          class="max-h-[calc(100vh-14rem)] overflow-y-auto overflow-x-hidden"
+        >
+          <div :style="{ height: `${innerHeight * scale}px` }">
+            <div
+              ref="innerRef"
+              :style="{ width: `${width}px`, transform: `scale(${scale})`, transformOrigin: 'top left' }"
+            >
+              <UContainer class="max-w-2xl py-10">
+                <h1
+                  v-if="name"
+                  class="mb-6 text-3xl font-bold"
+                >
+                  {{ name }}
+                </h1>
+                <FormRenderer
+                  v-if="definition"
+                  :key="`${renderKey}-${resetKey}`"
+                  :form="{ slug, definition }"
+                  preview
+                />
+                <p
+                  v-else
+                  class="text-muted"
+                >
+                  {{ t("admin.previewUnavailable", "Fix the definition to see a preview.") }}
+                </p>
+              </UContainer>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <UModal
+      v-model:open="open"
+      :title="t('preview.tryIt', 'Try it')"
+      :ui="{ content: 'max-w-5xl' }"
+    >
+      <template #actions>
+        <UFieldGroup :aria-label="t('preview.device', 'Device')">
+          <UButton
+            v-for="item in devices"
+            :key="item.value"
+            size="xs"
+            color="neutral"
+            :variant="device === item.value ? 'solid' : 'outline'"
+            :icon="item.icon"
+            :label="item.label"
+            @click="device = item.value"
+          />
+        </UFieldGroup>
+      </template>
+      <template #body>
+        <div
+          class="mx-auto max-w-full rounded-lg border border-default"
+          :style="{ width: `${width}px` }"
+        >
+          <UContainer class="max-w-2xl py-8">
+            <div
+              v-if="result"
+              class="space-y-3"
+            >
+              <h2 class="text-lg font-semibold">
+                {{ t("preview.result", "Result") }}
+              </h2>
+              <p class="text-sm text-muted">
+                {{ t("preview.resultHint", "This is what would be sent. Nothing was submitted.") }}
+              </p>
+              <pre
+                data-testid="preview-result"
+                class="max-h-96 overflow-auto rounded-md bg-elevated p-3 text-xs"
+              >{{ json }}</pre>
+              <div class="flex flex-wrap justify-end gap-2">
+                <UButton
+                  color="neutral"
+                  variant="outline"
+                  icon="i-lucide-copy"
+                  :label="t('preview.copy', 'Copy')"
+                  @click="copy"
+                />
+                <UButton
+                  color="neutral"
+                  variant="outline"
+                  icon="i-lucide-rotate-ccw"
+                  :label="t('preview.tryAgain', 'Try again')"
+                  @click="tryAgain"
+                />
+                <UButton
+                  :label="t('preview.close', 'Close')"
+                  @click="open = false"
+                />
+              </div>
+            </div>
+            <FormRenderer
+              v-else-if="definition"
+              :key="`${renderKey}-${modalKey}`"
+              :form="{ slug, definition }"
+              preview
+              @previewed="result = $event"
+            />
+          </UContainer>
+        </div>
+      </template>
+      <template #footer>
+        <UButton
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-rotate-ccw"
+          :label="t('preview.reset', 'Reset')"
+          @click="tryAgain"
+        />
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/app/components/FormPreview.vue.d.ts

@@ -0,0 +1,12 @@
+import type { FormDefinition } from '../../../types.js';
+type __VLS_Props = {
+    slug: string;
+    name?: string;
+    /** `undefined` when the definition is invalid. */
+    definition?: Omit<FormDefinition, 'delivery'>;
+    /** Bump to remount the renderer (e.g. after saving). */
+    contentKey?: string | number;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormRenderer.d.vue.ts

@@ -7,12 +7,18 @@ type __VLS_Props = {
     slug?: string;
     /** A definition to render directly (admin preview, tests). */
     form?: FormShape;
+    /** Shared password of a password-protected form (sent as `x-form-password`). */
+    password?: string;
     /** Validates and steps like normal, but never posts. */
     preview?: boolean;
+    /** Overrides the locale of translated form content (defaults to the app's locale). */
+    locale?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    previewed: (answers: Record<string, unknown>) => any;
     submitted: (id: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPreviewed?: ((answers: Record<string, unknown>) => any) | undefined;
     onSubmitted?: ((id: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/FormRenderer.vue

@@ -1,17 +1,21 @@
 <script setup>
-import { translate } from "../../utils";
+import { previewPayload, translate } from "../../utils";
 import { emptyAnswers, submitAnswers, useFormsLocale } from "../composables/useForms";
 import { useFormStepper } from "../composables/useFormStepper";
 const props = defineProps({
   slug: { type: String, required: false },
   form: { type: Object, required: false },
-  preview: { type: Boolean, required: false }
+  password: { type: String, required: false },
+  preview: { type: Boolean, required: false },
+  locale: { type: String, required: false }
 });
-const emit = defineEmits(["submitted"]);
+const emit = defineEmits(["submitted", "previewed"]);
+const listening = !!getCurrentInstance()?.vnode.props?.onPreviewed;
 const t = useModuleT("forms");
-const locale = useFormsLocale();
+const appLocale = useFormsLocale();
+const locale = computed(() => props.locale || appLocale.value);
 const toast = useToast();
-const loaded = props.slug ? await useForm(props.slug) : void 0;
+const loaded = props.slug ? await useForm(props.slug, () => props.password) : void 0;
 const form = computed(() => props.form ?? loaded?.data.value ?? void 0);
 const definition = computed(() => form.value?.definition);
 const state = reactive(form.value ? emptyAnswers(form.value.definition) : {});
@@ -22,18 +26,20 @@ watch(() => form.value?.definition, (next) => {
 const stepper = useFormStepper(definition, state, { t: () => t, locale });
 const formRef = useTemplateRef("formRef");
 const submitting = ref(false);
+const captchaResetKey = ref(0);
 const done = ref(false);
 const submitSettings = computed(() => definition.value?.submit);
 const title = (value) => translate(value, locale.value);
 async function onSubmit() {
   if (!stepper.isLast.value) return stepper.next();
   if (props.preview) {
-    toast.add({ title: t("preview.notSent", "Preview: nothing was sent."), color: "info" });
+    if (listening) emit("previewed", previewPayload(definition.value, state));
+    else toast.add({ title: t("preview.notSent", "Preview: nothing was sent."), color: "info" });
     return;
   }
   submitting.value = true;
   try {
-    const result = await submitAnswers(form.value.slug, definition.value, state, locale.value);
+    const result = await submitAnswers(form.value.slug, definition.value, state, locale.value, props.password);
     done.value = true;
     emit("submitted", result.id);
     const redirect = submitSettings.value?.redirect;
@@ -47,6 +53,7 @@ async function onSubmit() {
       toast.add({ title: t("error.generic", "Something went wrong. Please try again."), color: "error" });
     }
   } finally {
+    captchaResetKey.value++;
     submitting.value = false;
   }
 }
@@ -122,6 +129,8 @@ function sendAnother() {
         v-model="state[field.key]"
         :field="field"
         :locale="locale"
+        :preview="preview"
+        :captcha-reset-key="captchaResetKey"
       />
     </template>
 

package/dist/runtime/app/components/FormRenderer.vue.d.ts

@@ -7,12 +7,18 @@ type __VLS_Props = {
     slug?: string;
     /** A definition to render directly (admin preview, tests). */
     form?: FormShape;
+    /** Shared password of a password-protected form (sent as `x-form-password`). */
+    password?: string;
     /** Validates and steps like normal, but never posts. */
     preview?: boolean;
+    /** Overrides the locale of translated form content (defaults to the app's locale). */
+    locale?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    previewed: (answers: Record<string, unknown>) => any;
     submitted: (id: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPreviewed?: ((answers: Record<string, unknown>) => any) | undefined;
     onSubmitted?: ((id: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/FormSubmissionView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { isInputField, resolveVisibility, translate } from "../../utils";
+import { isAnswerField, resolveVisibility, translate } from "../../utils";
 const props = defineProps({
   submission: { type: Object, required: true }
 });
@@ -8,7 +8,7 @@ const locale = useFormsLocale();
 const sections = computed(() => resolveVisibility(props.submission.definition, props.submission.answers).map(({ step, fields }) => ({
   id: step.id,
   title: translate(step.title, locale.value),
-  rows: fields.filter(isInputField).map((field) => {
+  rows: fields.filter(isAnswerField).map((field) => {
     const value = props.submission.answers[field.key];
     const option = (v) => translate(field.options?.find((o) => o.value === v)?.label, locale.value) || v;
     return {

package/dist/runtime/app/composables/index.d.ts

@@ -1,2 +1,5 @@
-export { useForm, useFormsLocale, useFormsPaths, emptyAnswers, submitAnswers, fieldLabel } from './useForms.js';
+export { useForm, useFormAccess, useFormsLocale, useFormsLocales, useFormsPaths, emptyAnswers, submitAnswers, fieldLabel } from './useForms.js';
 export { useFormStepper } from './useFormStepper.js';
+export { useFormBuilderEditor } from './useFormBuilderEditor.js';
+export { useFormBuilderLabels, fieldTypeIcons } from './useFormBuilderLabels.js';
+export { useCaptchaSecrets } from './useCaptchaSecrets.js';

package/dist/runtime/app/composables/index.js

@@ -1,2 +1,5 @@
-export { useForm, useFormsLocale, useFormsPaths, emptyAnswers, submitAnswers, fieldLabel } from "./useForms.js";
+export { useForm, useFormAccess, useFormsLocale, useFormsLocales, useFormsPaths, emptyAnswers, submitAnswers, fieldLabel } from "./useForms.js";
 export { useFormStepper } from "./useFormStepper.js";
+export { useFormBuilderEditor } from "./useFormBuilderEditor.js";
+export { useFormBuilderLabels, fieldTypeIcons } from "./useFormBuilderLabels.js";
+export { useCaptchaSecrets } from "./useCaptchaSecrets.js";

package/dist/runtime/app/composables/useCaptcha.d.ts

@@ -0,0 +1,22 @@
+import type { CaptchaProvider, FormField } from '../../../types.js';
+type WidgetOptions = {
+    'sitekey': string;
+    'theme'?: string;
+    'size'?: string;
+    'callback': (token: string) => void;
+    'expired-callback': () => void;
+    'error-callback': () => void;
+};
+/** The part of the Turnstile / reCAPTCHA / hCaptcha browser APIs this module uses (they share one shape). */
+export type CaptchaApi = {
+    render: (container: HTMLElement, options: WidgetOptions) => string | number;
+    reset: (id?: string | number) => void;
+    remove?: (id?: string | number) => void;
+};
+/** Loads the provider's script once, in the browser only, and resolves with its global API. */
+export declare function loadCaptchaScript(provider: CaptchaProvider): Promise<CaptchaApi>;
+/** Provider of a captcha field with none set: `runtimeConfig.public.forms.captcha.defaultProvider` (env `NUXT_PUBLIC_FORMS_CAPTCHA_DEFAULT_PROVIDER`). */
+export declare function captchaDefaultProvider(): CaptchaProvider;
+/** Public site key for a captcha field: its own override, else the module's `public.forms.captcha.<provider>.siteKey`. */
+export declare function captchaSiteKey(field: Pick<FormField, 'captcha'>): string;
+export {};

package/dist/runtime/app/composables/useCaptcha.js

@@ -0,0 +1,39 @@
+import { normalizeCaptchaProvider, resolveCaptcha } from "../../utils/index.js";
+const SCRIPTS = {
+  turnstile: { src: "https://challenges.cloudflare.com/turnstile/v0/api.js", global: "turnstile" },
+  recaptcha: { src: "https://www.google.com/recaptcha/api.js", global: "grecaptcha" },
+  hcaptcha: { src: "https://js.hcaptcha.com/1/api.js", global: "hcaptcha" }
+};
+const loading = /* @__PURE__ */ new Map();
+export function loadCaptchaScript(provider) {
+  if (import.meta.server) return Promise.reject(new Error("Captcha scripts only load in the browser."));
+  const existing = loading.get(provider);
+  if (existing) return existing;
+  const { src, global } = SCRIPTS[provider];
+  const callback = `__formsCaptchaLoaded_${provider}`;
+  const promise = new Promise((resolve, reject) => {
+    const scope = window;
+    scope[callback] = () => resolve(scope[global]);
+    const script = document.createElement("script");
+    script.src = `${src}?render=explicit&onload=${callback}`;
+    script.async = true;
+    script.defer = true;
+    script.onerror = () => {
+      loading.delete(provider);
+      script.remove();
+      reject(new Error(`Could not load the ${provider} script.`));
+    };
+    document.head.appendChild(script);
+  });
+  loading.set(provider, promise);
+  return promise;
+}
+export function captchaDefaultProvider() {
+  return normalizeCaptchaProvider(useRuntimeConfig().public.forms?.captcha?.defaultProvider);
+}
+export function captchaSiteKey(field) {
+  const { provider, siteKey } = resolveCaptcha(field, captchaDefaultProvider());
+  if (siteKey) return siteKey;
+  const config = useRuntimeConfig().public.forms;
+  return config?.captcha?.[provider]?.siteKey ?? "";
+}

package/dist/runtime/app/composables/useCaptchaSecrets.d.ts

@@ -0,0 +1,7 @@
+import type { FormField } from '../../../types.js';
+/**
+ * The write-only captcha secret key of a saved form. It is stored right away through the admin secrets API,
+ * not with the definition. `field` is the currently selected field; the state only applies when it is a captcha.
+ */
+export declare function useCaptchaSecrets(formId: MaybeRefOrGetter<string | undefined>, field: MaybeRefOrGetter<FormField | undefined>): any;
+export type CaptchaSecrets = ReturnType<typeof useCaptchaSecrets>;

package/dist/runtime/app/composables/useCaptchaSecrets.js

@@ -0,0 +1,69 @@
+import { resolveCaptcha } from "../../utils/index.js";
+import { captchaDefaultProvider } from "./useCaptcha.js";
+export function useCaptchaSecrets(formId, field) {
+  const t = useModuleT("forms");
+  const toast = useToast();
+  const captcha = computed(() => {
+    const selected = toValue(field);
+    return selected?.type === "captcha" ? resolveCaptcha(selected, captchaDefaultProvider()) : void 0;
+  });
+  const secrets = ref();
+  const url = computed(() => toValue(formId) ? `/api/forms/admin/forms/${toValue(formId)}/secrets` : void 0);
+  const value = ref("");
+  const saving = ref(false);
+  const source = computed(() => captcha.value ? secrets.value?.captcha[captcha.value.provider]?.source : void 0);
+  const statusLabel = computed(() => ({
+    form: t("captcha.secretForm", "Configured via form"),
+    env: t("captcha.secretEnv", "Configured via environment"),
+    unset: t("captcha.secretUnset", "Not set")
+  })[source.value ?? "unset"]);
+  async function load() {
+    if (!url.value) return;
+    try {
+      secrets.value = await $fetch(url.value);
+    } catch {
+      secrets.value = void 0;
+    }
+  }
+  onMounted(load);
+  watch(() => captcha.value?.provider, () => {
+    value.value = "";
+  });
+  async function save() {
+    if (!url.value || !captcha.value || !value.value.trim()) return;
+    saving.value = true;
+    try {
+      secrets.value = await $fetch(url.value, { method: "PUT", body: { key: `captcha.${captcha.value.provider}.secretKey`, value: value.value.trim() } });
+      value.value = "";
+      toast.add({ title: t("captcha.secretSaved", "Secret key saved."), color: "success" });
+    } catch {
+      toast.add({ title: t("captcha.secretFailed", "The secret key could not be saved."), color: "error" });
+    } finally {
+      saving.value = false;
+    }
+  }
+  async function remove() {
+    if (!url.value || !captcha.value) return;
+    try {
+      secrets.value = await $fetch(`${url.value}/captcha.${captcha.value.provider}.secretKey`, { method: "DELETE" });
+      toast.add({ title: t("captcha.secretRemoved", "Secret key removed."), color: "success" });
+    } catch {
+      toast.add({ title: t("captcha.secretFailed", "The secret key could not be saved."), color: "error" });
+    }
+  }
+  return reactive({
+    /** The resolved captcha settings of the selected field. */
+    captcha,
+    secrets,
+    /** What the admin is typing, not saved yet. */
+    value,
+    saving,
+    source,
+    statusLabel,
+    setValue: (next) => {
+      value.value = next;
+    },
+    save,
+    remove
+  });
+}