@velastack/cms 0.6.4 → 0.6.5

package/dist/components/cms/cms-whatsapp-form-editable.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	/**
+	 * The editor for `CmsWhatsAppForm`: the shape's fields, plus the
+	 * `{placeholders}` the form's inputs provide, read from the form when the
+	 * popover opens so fields added through `CmsFormFields` show up too.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { Tree } from '../../core/path.js';
+	import type { FormShape } from '../../core/shapes/form.js';
+	import type { CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
+	import type { CmsField } from './use-cms-field.svelte.js';
+	import { getWhatsAppFieldNames } from './cms-whatsapp-form.svelte';
+	import StructuredEditorPopover from '../admin-bar/structured-editor-popover.svelte';
+	import FieldsForm from '../admin-bar/fields-form.svelte';
+
+	type Props = {
+		field: CmsField<CmsWhatsAppValue>;
+		schema: FormShape<CmsWhatsAppValue>;
+		preview: Snippet;
+	};
+	let { field, schema, preview }: Props = $props();
+
+	const fieldNames = getWhatsAppFieldNames();
+</script>
+
+<StructuredEditorPopover {field} {schema} label={schema.label} {preview}>
+	{#snippet editor(draft: CmsWhatsAppValue, update: (next: CmsWhatsAppValue) => void)}
+		{@const names = fieldNames()}
+		<FieldsForm
+			fields={schema.fields}
+			value={draft as Tree}
+			onChange={(next) => update(next as CmsWhatsAppValue)}
+		/>
+		{#if names.length > 0}
+			<p class="vela:text-[11px] vela:text-bar-text-tertiary vela:m-0">
+				Placeholders:
+				{#each names as name (name)}
+					<code class="vela:font-mono vela:mr-1">{`{${name}}`}</code>
+				{/each}
+			</p>
+		{/if}
+	{/snippet}
+</StructuredEditorPopover>

package/dist/components/cms/cms-whatsapp-form-editable.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+     * The editor for `CmsWhatsAppForm`: the shape's fields, plus the
+     * `{placeholders}` the form's inputs provide, read from the form when the
+     * popover opens so fields added through `CmsFormFields` show up too.
+     */
+import type { Snippet } from 'svelte';
+import type { FormShape } from '../../core/shapes/form.js';
+import type { CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
+import type { CmsField } from './use-cms-field.svelte.js';
+type Props = {
+    field: CmsField<CmsWhatsAppValue>;
+    schema: FormShape<CmsWhatsAppValue>;
+    preview: Snippet;
+};
+declare const CmsWhatsappFormEditable: import("svelte").Component<Props, {}, "">;
+type CmsWhatsappFormEditable = ReturnType<typeof CmsWhatsappFormEditable>;
+export default CmsWhatsappFormEditable;

package/dist/components/cms/cms-whatsapp-form.svelte

@@ -0,0 +1,167 @@
+<script lang="ts" module>
+	/** `CmsWhatsAppForm`: a form whose answers open a prefilled WhatsApp chat. */
+	import { getContext } from 'svelte';
+	import { isControlField } from '../../core/forms/target.js';
+	import type { CmsFormState } from './cms-form.svelte';
+
+	export * from '../../core/shapes/whatsapp.js';
+
+	export type CmsWhatsAppFormState = CmsFormState & {
+		/** A chat link with no message, for a `<noscript>` fallback; `null` without a number. */
+		readonly whatsappHref: string | null;
+	};
+
+	const FIELD_NAMES = Symbol('vela-cms:whatsapp-field-names');
+
+	/** For the settings editor: the `{placeholders}` this form's inputs provide. */
+	export const getWhatsAppFieldNames = (): (() => string[]) =>
+		getContext<() => string[]>(FIELD_NAMES) ?? (() => []);
+
+	const fieldNames = (form: HTMLFormElement): string[] => {
+		const names = new Set<string>();
+		for (const el of form.elements) {
+			const name = (el as HTMLInputElement).name;
+			const type = (el as HTMLInputElement).type;
+			if (name && !isControlField(name) && type !== 'submit' && type !== 'button') names.add(name);
+		}
+		return [...names];
+	};
+</script>
+
+<script lang="ts">
+	/**
+	 * Like `CmsForm`, but a submission opens `wa.me` with the editor's
+	 * message (answers substituted for `{field}` placeholders) addressed to
+	 * the editor's number. The answers are also posted in the background, so
+	 * the lead is kept even if the visitor never sends the chat.
+	 *
+	 * The chat opens inside the submit handler, before the post settles: a
+	 * popup opened after an `await` loses the click's user activation and is
+	 * blocked. `keepalive` lets the post finish if the page goes away. If the
+	 * popup is blocked anyway, this tab goes to WhatsApp instead.
+	 *
+	 * Without JavaScript the form posts normally, so the answers are still
+	 * stored and `redirect` applies; `whatsappHref` is there for a
+	 * `<noscript>` link.
+	 */
+	import { setContext, type Snippet } from 'svelte';
+	import type { HTMLFormAttributes } from 'svelte/elements';
+	import Structured from './cms-structured.svelte';
+	import FormControls from './cms-form-controls.svelte';
+	import { cmsStore } from './cms-store.svelte.js';
+	import { followRedirect, useFormTarget, type FormStatus } from './use-form-target.svelte.js';
+	import { cmsWhatsApp, type CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
+	import { fillMessage, whatsappHref } from '../../core/forms/whatsapp.js';
+
+	type Props = Omit<HTMLFormAttributes, 'action' | 'method' | 'children'> & {
+		/** The CMS field holding the number and message. */
+		name: string;
+		scope?: string;
+		fallback?: Partial<CmsWhatsAppValue>;
+		value?: unknown;
+		/** A hosted form's key, to record each submission to. */
+		key?: string;
+		/** Record to this route or SvelteKit action instead. */
+		action?: string;
+		/** Where this tab goes once the chat has opened in a new one. */
+		redirect?: string;
+		children: Snippet<[CmsWhatsAppFormState]>;
+	};
+	let {
+		name,
+		scope,
+		fallback,
+		value,
+		key,
+		action,
+		redirect,
+		children: content,
+		...rest
+	}: Props = $props();
+
+	const target = useFormTarget(() => ({ key, action }));
+
+	let formEl = $state<HTMLFormElement>();
+	setContext(FIELD_NAMES, () => (formEl ? fieldNames(formEl) : []));
+
+	let status = $state<FormStatus>('idle');
+	let message = $state<string | null>(null);
+
+	const stateFor = (settings: CmsWhatsAppValue): CmsWhatsAppFormState => ({
+		get status() {
+			return status;
+		},
+		get message() {
+			return message;
+		},
+		data: null,
+		whatsappHref: whatsappHref(settings.number)
+	});
+
+	const record = (body: FormData) => {
+		if (!target.url) {
+			status = 'success';
+			return;
+		}
+		body.delete('_redirect');
+		status = 'submitting';
+		fetch(target.url, {
+			method: 'POST',
+			body,
+			keepalive: true,
+			headers: { accept: 'application/json' }
+		})
+			.then(async (res) => {
+				status = res.ok ? 'success' : 'failure';
+				if (!res.ok) message = ((await res.json().catch(() => null))?.message as string) ?? null;
+			})
+			.catch(() => {
+				status = 'error';
+			});
+	};
+
+	const submit = (event: SubmitEvent, settings: CmsWhatsAppValue) => {
+		event.preventDefault();
+		if (cmsStore.isEditing) return;
+		const form = event.currentTarget as HTMLFormElement;
+		const body = new FormData(form, event.submitter);
+		const href = whatsappHref(settings.number, fillMessage(settings.message, body));
+		message = null;
+		record(body);
+		if (!href) {
+			status = 'error';
+			message = 'No WhatsApp number is set.';
+			return;
+		}
+		const chat = window.open(href, '_blank');
+		if (!chat) {
+			location.assign(href);
+			return;
+		}
+		chat.opener = null;
+		if (redirect) void followRedirect(redirect);
+	};
+</script>
+
+<Structured
+	schema={cmsWhatsApp}
+	{name}
+	{scope}
+	{fallback}
+	{value}
+	view={(settings) => settings}
+	editable={() => import('./cms-whatsapp-form-editable.svelte')}
+>
+	{#snippet children(settings)}
+		<form
+			{...rest}
+			method="POST"
+			action={target.url}
+			bind:this={formEl}
+			onsubmit={(event) => submit(event, settings)}
+		>
+			<FormControls {redirect} token={target.token} />
+			{@render content(stateFor(settings))}
+		</form>
+	{/snippet}
+</Structured>

package/dist/components/cms/cms-whatsapp-form.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { CmsFormState } from './cms-form.svelte';
+export * from '../../core/shapes/whatsapp.js';
+export type CmsWhatsAppFormState = CmsFormState & {
+    /** A chat link with no message, for a `<noscript>` fallback; `null` without a number. */
+    readonly whatsappHref: string | null;
+};
+/** For the settings editor: the `{placeholders}` this form's inputs provide. */
+export declare const getWhatsAppFieldNames: () => (() => string[]);
+/**
+     * Like `CmsForm`, but a submission opens `wa.me` with the editor's
+     * message (answers substituted for `{field}` placeholders) addressed to
+     * the editor's number. The answers are also posted in the background, so
+     * the lead is kept even if the visitor never sends the chat.
+     *
+     * The chat opens inside the submit handler, before the post settles: a
+     * popup opened after an `await` loses the click's user activation and is
+     * blocked. `keepalive` lets the post finish if the page goes away. If the
+     * popup is blocked anyway, this tab goes to WhatsApp instead.
+     *
+     * Without JavaScript the form posts normally, so the answers are still
+     * stored and `redirect` applies; `whatsappHref` is there for a
+     * `<noscript>` link.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import { type CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
+type Props = Omit<HTMLFormAttributes, 'action' | 'method' | 'children'> & {
+    /** The CMS field holding the number and message. */
+    name: string;
+    scope?: string;
+    fallback?: Partial<CmsWhatsAppValue>;
+    value?: unknown;
+    /** A hosted form's key, to record each submission to. */
+    key?: string;
+    /** Record to this route or SvelteKit action instead. */
+    action?: string;
+    /** Where this tab goes once the chat has opened in a new one. */
+    redirect?: string;
+    children: Snippet<[CmsWhatsAppFormState]>;
+};
+declare const CmsWhatsappForm: import("svelte").Component<Props, {}, "">;
+type CmsWhatsappForm = ReturnType<typeof CmsWhatsappForm>;
+export default CmsWhatsappForm;

package/dist/components/cms/index.d.ts

@@ -23,5 +23,10 @@ export { default as CmsGallery } from './cms-gallery.svelte';
 export { default as CmsLogos } from './cms-logos.svelte';
 export { default as CmsSchedule } from './cms-schedule.svelte';
 export { default as CmsEntries } from './cms-entries.svelte';
+export { default as CmsForm } from './cms-form.svelte';
+export type { CmsFormState, CmsFormStatus } from './cms-form.svelte';
+export { default as CmsFormFields } from './cms-form-fields.svelte';
+export { default as CmsWhatsAppForm } from './cms-whatsapp-form.svelte';
+export type { CmsWhatsAppFormState } from './cms-whatsapp-form.svelte';
 export { CMS_SCOPE, getCmsScope, getCmsValue } from './scope.js';
 export type { CmsScope, CmsPayload, CmsEntry } from './scope.js';

package/dist/components/cms/index.js

@@ -22,4 +22,7 @@ export { default as CmsGallery } from './cms-gallery.svelte';
 export { default as CmsLogos } from './cms-logos.svelte';
 export { default as CmsSchedule } from './cms-schedule.svelte';
 export { default as CmsEntries } from './cms-entries.svelte';
+export { default as CmsForm } from './cms-form.svelte';
+export { default as CmsFormFields } from './cms-form-fields.svelte';
+export { default as CmsWhatsAppForm } from './cms-whatsapp-form.svelte';
 export { CMS_SCOPE, getCmsScope, getCmsValue } from './scope.js';

package/dist/components/cms/use-form-target.svelte.d.ts

@@ -0,0 +1,18 @@
+export type FormStatus = 'idle' | 'submitting' | 'success' | 'failure' | 'error';
+export type FormTargetInput = {
+    key?: string;
+    action?: string;
+};
+/**
+ * After an enhanced post, go where `_redirect` would have sent a post
+ * without JavaScript. The hosted endpoint never answers an enhanced post
+ * with a redirect (the client would hand an external URL to `goto`), so the
+ * form follows it itself.
+ */
+export declare const followRedirect: (redirect: string) => Promise<void>;
+export type FormTarget = {
+    /** The form's `action`; `undefined` posts back to the page. */
+    readonly url: string | undefined;
+    readonly token: string | null;
+};
+export declare const useFormTarget: (input: () => FormTargetInput) => FormTarget;

package/dist/components/cms/use-form-target.svelte.js

@@ -0,0 +1,68 @@
+/**
+ * Where a `CmsForm` or `CmsWhatsAppForm` posts, and the load-time token a
+ * hosted form wants with it.
+ *
+ * `action` wins when given: the template's own route or SvelteKit action.
+ * Otherwise `key` names a hosted form beside the CMS endpoint (see
+ * `core/forms/target.ts`). The token only exists for hosted forms. It is
+ * fetched on mount because the endpoint refuses one younger than two
+ * seconds; a post without it is still stored, just as unverified.
+ */
+import { dev } from '$app/env';
+import { goto } from '$app/navigation';
+import { cms } from './cms-store.svelte.js';
+import { hostedFormUrl } from '../../core/forms/target.js';
+/**
+ * After an enhanced post, go where `_redirect` would have sent a post
+ * without JavaScript. The hosted endpoint never answers an enhanced post
+ * with a redirect (the client would hand an external URL to `goto`), so the
+ * form follows it itself.
+ */
+export const followRedirect = async (redirect) => {
+    const url = new URL(redirect, location.href);
+    if (url.origin === location.origin)
+        await goto(url.href);
+    else
+        location.assign(url.href);
+};
+export const useFormTarget = (input) => {
+    const hosted = $derived.by(() => {
+        const { key, action } = input();
+        return action === undefined && key ? hostedFormUrl(cms.endpoint, key) : null;
+    });
+    const url = $derived(input().action ?? hosted ?? undefined);
+    let token = $state(null);
+    $effect(() => {
+        const target = hosted;
+        token = null;
+        if (!target)
+            return;
+        let live = true;
+        fetch(target, { headers: { accept: 'application/json' } })
+            .then((res) => (res.ok ? res.json() : null))
+            .then((body) => {
+            if (live && typeof body?.token === 'string')
+                token = body.token;
+        })
+            .catch(() => { });
+        return () => {
+            live = false;
+        };
+    });
+    $effect(() => {
+        if (dev && url === undefined) {
+            const { key } = input();
+            console.warn(key
+                ? `[cms] Form "${key}" has no hosted endpoint (CMS endpoint "${cms.endpoint}"); pass \`action\`.`
+                : '[cms] Form has neither `key` nor `action`; it will post back to the page.');
+        }
+    });
+    return {
+        get url() {
+            return url;
+        },
+        get token() {
+            return token;
+        }
+    };
+};

package/dist/core/forms/target.d.ts

@@ -0,0 +1,3 @@
+export declare const hostedFormUrl: (endpoint: string, key: string) => string | null;
+/** Fields a form carries for the endpoint rather than the submission. */
+export declare const isControlField: (name: string) => boolean;

package/dist/core/forms/target.js

@@ -0,0 +1,16 @@
+/**
+ * Where a form posts when the template names a hosted form by `key`.
+ *
+ * velastack.dev serves a project's CMS at `/v1/projects/<id>/cms` and its
+ * hosted forms beside it at `/v1/projects/<id>/forms/<key>`, the forms a
+ * template's manifest declares. Any other endpoint shape (a same-app
+ * `/api/cms`, this package's own `/cms` backend) has no hosted forms, so
+ * there is nothing to derive and the template passes `action` instead.
+ */
+const HOSTED_CMS = /^(.*\/v1\/projects\/[^/?#]+)\/cms\/?$/;
+export const hostedFormUrl = (endpoint, key) => {
+    const match = HOSTED_CMS.exec(endpoint);
+    return match ? `${match[1]}/forms/${encodeURIComponent(key)}` : null;
+};
+/** Fields a form carries for the endpoint rather than the submission. */
+export const isControlField = (name) => name.startsWith('_');

package/dist/core/forms/whatsapp.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Building the `wa.me` link a `CmsWhatsAppForm` opens: the editor's format
+ * string with the visitor's answers substituted, sent to the editor's number.
+ */
+/**
+ * Substitute `{field}` placeholders with the submitted values. A field sent
+ * more than once (checkboxes, multi-selects) joins with commas; a placeholder
+ * with no matching field, and file uploads, become empty.
+ */
+export declare const fillMessage: (template: string, data: FormData) => string;
+/**
+ * The digits `wa.me` wants: country code and number, no `+`, spaces or
+ * dashes. A leading `00` international prefix is dropped, since no country
+ * code starts with 0.
+ */
+export declare const whatsappNumber: (raw: string) => string;
+/** `https://wa.me/<number>?text=<message>`, or `null` when no number is set. */
+export declare const whatsappHref: (number: string, message?: string) => string | null;

package/dist/core/forms/whatsapp.js

@@ -0,0 +1,29 @@
+/**
+ * Building the `wa.me` link a `CmsWhatsAppForm` opens: the editor's format
+ * string with the visitor's answers substituted, sent to the editor's number.
+ */
+const PLACEHOLDER = /\{([^{}\s]+)\}/g;
+/**
+ * Substitute `{field}` placeholders with the submitted values. A field sent
+ * more than once (checkboxes, multi-selects) joins with commas; a placeholder
+ * with no matching field, and file uploads, become empty.
+ */
+export const fillMessage = (template, data) => template.replace(PLACEHOLDER, (_, name) => data
+    .getAll(name)
+    .filter((value) => typeof value === 'string' && value !== '')
+    .join(', '));
+/**
+ * The digits `wa.me` wants: country code and number, no `+`, spaces or
+ * dashes. A leading `00` international prefix is dropped, since no country
+ * code starts with 0.
+ */
+export const whatsappNumber = (raw) => raw.replace(/\D/g, '').replace(/^00/, '');
+/** `https://wa.me/<number>?text=<message>`, or `null` when no number is set. */
+export const whatsappHref = (number, message = '') => {
+    const digits = whatsappNumber(number);
+    if (!digits)
+        return null;
+    return message
+        ? `https://wa.me/${digits}?text=${encodeURIComponent(message)}`
+        : `https://wa.me/${digits}`;
+};

package/dist/core/shapes/form-fields.d.ts

@@ -0,0 +1,20 @@
+import { type ListValue } from './form.js';
+export declare const FORM_FIELD_TYPES: readonly ["text", "email", "tel", "number", "date", "textarea", "select", "checkbox"];
+export type CmsFormFieldType = (typeof FORM_FIELD_TYPES)[number];
+export type CmsFormFieldItem = {
+    id: string;
+    /** The submitted field name. */
+    name: string;
+    label: string;
+    type: CmsFormFieldType;
+    required: boolean;
+    placeholder: string;
+    /** `select`: the choices, in order. */
+    options: string[];
+};
+export type CmsFormFieldsValue = ListValue<CmsFormFieldItem>;
+/** `Preferred date` → `preferred_date`; a label with no latin letters → `field`. */
+export declare const fieldNameFromLabel: (label: string) => string;
+export declare const cmsFormFields: import("./form.js").FormShape<CmsFormFieldsValue>;
+/** What a template renders: every field, in order. */
+export declare const formFieldsView: (value: CmsFormFieldsValue) => CmsFormFieldItem[];

package/dist/core/shapes/form-fields.js

@@ -0,0 +1,117 @@
+/**
+ * `CmsFormFields`: the inputs of a form, as content an editor can add to,
+ * remove from, reorder and retype.
+ *
+ * A field's `name` is the key its answer is stored under, so it must not
+ * follow later label edits or a form's submissions would split across keys.
+ * Fields from the template's fallback carry their own names. A field an
+ * editor adds has none until its label is first saved; reads derive one from
+ * the label, and the next save through the popover writes it down, after
+ * which renaming the label leaves it alone. The editor never shows `name`.
+ */
+import { asBoolean, asEnum, asItems, asString, asStrings, isPlainObject } from '../structured.js';
+import { defineForm } from './form.js';
+export const FORM_FIELD_TYPES = [
+    'text',
+    'email',
+    'tel',
+    'number',
+    'date',
+    'textarea',
+    'select',
+    'checkbox'
+];
+/** `Preferred date` → `preferred_date`; a label with no latin letters → `field`. */
+export const fieldNameFromLabel = (label) => label
+    .normalize('NFKD')
+    .replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '') || 'field';
+/**
+ * Give every field a distinct name. Stored names are kept and claimed
+ * first, so a newly added field can never take one an existing field's
+ * submissions already use; derived names get `_2`, `_3`, … on a clash.
+ */
+const assignNames = (items) => {
+    const taken = new Set();
+    const named = items.map((item) => {
+        if (!item.stored || taken.has(item.stored))
+            return { ...item, name: '' };
+        taken.add(item.stored);
+        return { ...item, name: item.stored };
+    });
+    return named.map(({ stored: _stored, ...item }) => {
+        if (item.name)
+            return item;
+        const base = fieldNameFromLabel(item.label);
+        let name = base;
+        for (let n = 2; taken.has(name); n++)
+            name = `${base}_${n}`;
+        taken.add(name);
+        return { ...item, name };
+    });
+};
+export const cmsFormFields = defineForm({
+    component: 'CmsFormFields',
+    label: 'Form fields',
+    version: 1,
+    translatable: [],
+    items: { key: 'items', translatable: ['label', 'placeholder', 'options'] },
+    normalize: (raw) => {
+        const items = Array.isArray(raw) ? raw : isPlainObject(raw) ? raw.items : [];
+        return {
+            v: 1,
+            items: assignNames(asItems(items, (r) => ({
+                stored: asString(r.name).trim(),
+                name: '',
+                label: asString(r.label),
+                type: asEnum(r.type, FORM_FIELD_TYPES, 'text'),
+                required: asBoolean(r.required),
+                placeholder: asString(r.placeholder),
+                options: asStrings(r.options)
+            })))
+        };
+    },
+    empty: () => ({ v: 1, items: [] }),
+    fields: [
+        {
+            key: 'items',
+            label: 'Fields',
+            type: 'list',
+            itemLabel: 'field',
+            titleKey: 'label',
+            blank: () => ({ label: '', type: 'text', required: false, placeholder: '', options: [] }),
+            fields: [
+                { key: 'label', label: 'Label', type: 'text' },
+                {
+                    key: 'type',
+                    label: 'Type',
+                    type: 'enum',
+                    values: FORM_FIELD_TYPES,
+                    names: {
+                        text: 'Short text',
+                        email: 'Email',
+                        tel: 'Phone',
+                        number: 'Number',
+                        date: 'Date',
+                        textarea: 'Long text',
+                        select: 'Dropdown',
+                        checkbox: 'Checkbox'
+                    },
+                    half: true
+                },
+                { key: 'required', label: 'Required', type: 'boolean' },
+                { key: 'placeholder', label: 'Placeholder', type: 'text' },
+                {
+                    key: 'options',
+                    label: 'Dropdown choices',
+                    type: 'strings',
+                    placeholder: 'One per line'
+                }
+            ]
+        }
+    ]
+});
+/** What a template renders: every field, in order. */
+export const formFieldsView = (value) => value.items;

package/dist/core/shapes/index.d.ts

@@ -27,5 +27,9 @@ export { cmsPricing, pricingView, formatPrice } from './pricing.js';
 export type { CmsPricingValue, PricingFeature, PricingTier, PricingTierView } from './pricing.js';
 export { cmsFaq, faqView, toFaqPage } from './faq.js';
 export type { CmsFaqValue, FaqItem } from './faq.js';
+export { cmsFormFields, formFieldsView, fieldNameFromLabel, FORM_FIELD_TYPES } from './form-fields.js';
+export type { CmsFormFieldsValue, CmsFormFieldItem, CmsFormFieldType } from './form-fields.js';
+export { cmsWhatsApp } from './whatsapp.js';
+export type { CmsWhatsAppValue } from './whatsapp.js';
 export { cmsStats, cmsSteps, cmsTimeline, cmsGallery, cmsLogos, cmsSchedule, logosView, scheduleByDay } from './presets.js';
 export type { CmsStatsValue, StatItem, CmsStepsValue, StepItem, CmsTimelineValue, TimelineItem, CmsGalleryValue, GalleryItem, CmsLogosValue, LogoItem, LogoItemView, CmsScheduleValue, ScheduleItem } from './presets.js';

package/dist/core/shapes/index.js

@@ -10,4 +10,6 @@ export { cmsTestimonials, testimonialsView, toReview } from './testimonials.js';
 export { cmsCollection, collectionView, collectionTags, formatCollectionPrice, toItemList } from './collection.js';
 export { cmsPricing, pricingView, formatPrice } from './pricing.js';
 export { cmsFaq, faqView, toFaqPage } from './faq.js';
+export { cmsFormFields, formFieldsView, fieldNameFromLabel, FORM_FIELD_TYPES } from './form-fields.js';
+export { cmsWhatsApp } from './whatsapp.js';
 export { cmsStats, cmsSteps, cmsTimeline, cmsGallery, cmsLogos, cmsSchedule, logosView, scheduleByDay } from './presets.js';

package/dist/core/shapes/whatsapp.d.ts

@@ -0,0 +1,8 @@
+export type CmsWhatsAppValue = {
+    v: 1;
+    /** International format; anything but digits is dropped when linking. */
+    number: string;
+    /** The message, with `{field}` placeholders for the visitor's answers. */
+    message: string;
+};
+export declare const cmsWhatsApp: import("./form.js").FormShape<CmsWhatsAppValue>;

package/dist/core/shapes/whatsapp.js

@@ -0,0 +1,28 @@
+/** `CmsWhatsAppForm`: the number a form's answers go to, and how they read. */
+import { asString, isPlainObject } from '../structured.js';
+import { defineForm } from './form.js';
+export const cmsWhatsApp = defineForm({
+    component: 'CmsWhatsAppForm',
+    label: 'WhatsApp',
+    version: 1,
+    translatable: ['message'],
+    normalize: (raw) => {
+        const r = isPlainObject(raw) ? raw : {};
+        return { v: 1, number: asString(r.number), message: asString(r.message) };
+    },
+    empty: () => ({ v: 1, number: '', message: '' }),
+    fields: [
+        {
+            key: 'number',
+            label: 'WhatsApp number',
+            type: 'text',
+            placeholder: '+1 555 010 0199'
+        },
+        {
+            key: 'message',
+            label: 'Message',
+            type: 'long-string',
+            placeholder: "Hi, I'm {name}…"
+        }
+    ]
+});

package/dist/index.d.ts

@@ -31,6 +31,11 @@ export { default as CmsTimeline } from './components/cms/cms-timeline.svelte';
 export { default as CmsGallery } from './components/cms/cms-gallery.svelte';
 export { default as CmsLogos } from './components/cms/cms-logos.svelte';
 export { default as CmsSchedule } from './components/cms/cms-schedule.svelte';
+export { default as CmsForm } from './components/cms/cms-form.svelte';
+export type { CmsFormState, CmsFormStatus } from './components/cms/cms-form.svelte';
+export { default as CmsFormFields } from './components/cms/cms-form-fields.svelte';
+export { default as CmsWhatsAppForm } from './components/cms/cms-whatsapp-form.svelte';
+export type { CmsWhatsAppFormState } from './components/cms/cms-whatsapp-form.svelte';
 export * from './core/shapes/index.js';
 export { default as AdminBar } from './components/admin-bar/admin-bar.svelte';
 export { useCmsField, resolveScopeRef, ROOT_SCOPE_ID } from './components/cms/use-cms-field.svelte.js';