@velastack/cms 0.6.4 → 0.7.0

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

@@ -0,0 +1,46 @@
+/**
+ * The cart a `CmsWhatsAppCart` checks out: items kept in the browser, which
+ * checkout turns into a WhatsApp message to the business. Nothing is paid on
+ * the site, so what is stored is what the visitor asked for, not a price.
+ *
+ * Module state, filled from localStorage by `load()` in the browser only, so
+ * the server renders an empty cart and hydration agrees. Its methods run from
+ * event handlers, never during a server render.
+ */
+import { type OrderLine } from '@velastack/whatsapp';
+/** A line in the cart; its `price` is in the site's currency. */
+export type WhatsAppCartItem = OrderLine & {
+    /** The template's id for the item (a slug); lines with the same id merge. */
+    id: string;
+};
+/** An order sent to WhatsApp, kept until the visitor says they're done. */
+export type WhatsAppPlacedOrder = {
+    ref: string;
+    /** The chat link, to open it again. */
+    href: string;
+};
+declare class WhatsAppCart {
+    #private;
+    items: WhatsAppCartItem[];
+    /** For the template's drawer or sheet, if it has one. */
+    open: boolean;
+    placed: WhatsAppPlacedOrder | null;
+    count: number;
+    /**
+     * The currency every price is in: the business's own. `CmsWhatsAppCart`
+     * sets it from its `currency` prop or the `currency` site option.
+     */
+    currency: string;
+    /** Only when every item has a price; otherwise the business quotes. */
+    subtotal: number | undefined;
+    /** Reads the saved cart, once, in the browser. Safe to call from any component's mount. */
+    load(): void;
+    add(item: Omit<WhatsAppCartItem, 'quantity'>, quantity?: number): void;
+    /** A quantity of 0 removes the item. */
+    setQuantity(id: string, quantity: number): void;
+    remove(id: string): void;
+    place(order: WhatsAppPlacedOrder): void;
+    clear(): void;
+}
+export declare const whatsappCart: WhatsAppCart;
+export {};

package/dist/components/cms/whatsapp-cart.svelte.js

@@ -0,0 +1,86 @@
+/**
+ * The cart a `CmsWhatsAppCart` checks out: items kept in the browser, which
+ * checkout turns into a WhatsApp message to the business. Nothing is paid on
+ * the site, so what is stored is what the visitor asked for, not a price.
+ *
+ * Module state, filled from localStorage by `load()` in the browser only, so
+ * the server renders an empty cart and hydration agrees. Its methods run from
+ * event handlers, never during a server render.
+ */
+import { orderSubtotal } from '@velastack/whatsapp';
+const STORAGE_KEY = 'vela-cms:whatsapp-cart';
+class WhatsAppCart {
+    items = $state([]);
+    /** For the template's drawer or sheet, if it has one. */
+    open = $state(false);
+    placed = $state(null);
+    count = $derived(this.items.reduce((total, item) => total + item.quantity, 0));
+    /**
+     * The currency every price is in: the business's own. `CmsWhatsAppCart`
+     * sets it from its `currency` prop or the `currency` site option.
+     */
+    currency = $state('');
+    /** Only when every item has a price; otherwise the business quotes. */
+    subtotal = $derived(this.currency ? orderSubtotal(this.items, this.currency) : undefined);
+    #loaded = false;
+    /** Reads the saved cart, once, in the browser. Safe to call from any component's mount. */
+    load() {
+        if (typeof localStorage === 'undefined' || this.#loaded)
+            return;
+        this.#loaded = true;
+        try {
+            const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}');
+            if (Array.isArray(saved?.items))
+                this.items = saved.items;
+            if (saved?.placed)
+                this.placed = saved.placed;
+        }
+        catch {
+            // Unreadable or blocked storage starts an empty cart.
+        }
+    }
+    add(item, quantity = 1) {
+        this.load();
+        // Adding after an order was sent starts the next one.
+        if (this.placed)
+            this.clear();
+        const line = this.items.find((line) => line.id === item.id);
+        if (line)
+            line.quantity += quantity;
+        else
+            this.items.push({ ...item, quantity });
+        this.#save();
+    }
+    /** A quantity of 0 removes the item. */
+    setQuantity(id, quantity) {
+        if (quantity <= 0)
+            return this.remove(id);
+        const line = this.items.find((line) => line.id === id);
+        if (!line)
+            return;
+        line.quantity = quantity;
+        this.#save();
+    }
+    remove(id) {
+        this.items = this.items.filter((line) => line.id !== id);
+        this.#save();
+    }
+    place(order) {
+        this.placed = order;
+        this.#save();
+    }
+    clear() {
+        this.items = [];
+        this.placed = null;
+        this.#save();
+    }
+    #save() {
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify({ items: $state.snapshot(this.items), placed: this.placed }));
+        }
+        catch {
+            // Storage can be full or blocked; the cart still works for this visit.
+        }
+    }
+}
+export const whatsappCart = new WhatsAppCart();

package/dist/core/forms/order-message.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The message a `CmsWhatsAppCart` sends: the editor's template, filled from
+ * the order by `@velastack/whatsapp`'s `orderPlaceholders`.
+ */
+/** The `{placeholders}` an order message can use. */
+export declare const ORDER_PLACEHOLDERS: string[];
+/** Until the editor writes one. Lines left empty (no total, no note) are dropped. */
+export declare const DEFAULT_ORDER_MESSAGE = "Hi! I'd like to place an order ({ref}):\n\n{items}\n\n{total}\n\n{name} \u00B7 {phone}\n{note}";
+/** Drops the blank lines and dangling spaces that empty placeholders leave behind. */
+export declare const tidyMessage: (message: string) => string;

package/dist/core/forms/order-message.js

@@ -0,0 +1,13 @@
+/**
+ * The message a `CmsWhatsAppCart` sends: the editor's template, filled from
+ * the order by `@velastack/whatsapp`'s `orderPlaceholders`.
+ */
+/** The `{placeholders}` an order message can use. */
+export const ORDER_PLACEHOLDERS = ['ref', 'items', 'total', 'name', 'phone', 'note'];
+/** Until the editor writes one. Lines left empty (no total, no note) are dropped. */
+export const DEFAULT_ORDER_MESSAGE = "Hi! I'd like to place an order ({ref}):\n\n{items}\n\n{total}\n\n{name} · {phone}\n{note}";
+/** Drops the blank lines and dangling spaces that empty placeholders leave behind. */
+export const tidyMessage = (message) => message
+    .replace(/[ \t]+$/gm, '')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();

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

@@ -0,0 +1,9 @@
+/**
+ * Where a form posts when the template names a hosted form by `key`:
+ * velastack.dev serves a project's hosted forms beside its CMS, at
+ * `/v1/projects/<id>/forms/<key>`. Any other endpoint shape has no hosted
+ * forms, so `hostedFormUrl` gives `null` and the template passes `action`.
+ */
+export { hostedFormUrl } from '@velastack/whatsapp';
+/** 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,9 @@
+/**
+ * Where a form posts when the template names a hosted form by `key`:
+ * velastack.dev serves a project's hosted forms beside its CMS, at
+ * `/v1/projects/<id>/forms/<key>`. Any other endpoint shape has no hosted
+ * forms, so `hostedFormUrl` gives `null` and the template passes `action`.
+ */
+export { hostedFormUrl } from '@velastack/whatsapp';
+/** Fields a form carries for the endpoint rather than the submission. */
+export const isControlField = (name) => name.startsWith('_');

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,15 @@ 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 { default as CmsWhatsAppCart } from './components/cms/cms-whatsapp-cart.svelte';
+export type { CmsWhatsAppCartState } from './components/cms/cms-whatsapp-cart.svelte';
+export { whatsappCart } from './components/cms/whatsapp-cart.svelte.js';
+export type { WhatsAppCartItem, WhatsAppPlacedOrder } from './components/cms/whatsapp-cart.svelte.js';
 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';

package/dist/index.js

@@ -33,6 +33,14 @@ 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';
+// Forms: post to a hosted form by `key` or the template's own `action`.
+// The inputs are the template's children, or a `CmsFormFields` block when
+// editors should control them.
+export { default as CmsForm } 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 { default as CmsWhatsAppCart } from './components/cms/cms-whatsapp-cart.svelte';
+export { whatsappCart } from './components/cms/whatsapp-cart.svelte.js';
 export * from './core/shapes/index.js';
 // Admin bar (sync wrapper; admin-bar-internal + seo-panel are async chunks)
 export { default as AdminBar } from './components/admin-bar/admin-bar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@velastack/cms",
-	"version": "0.6.4",
+	"version": "0.7.0",
 	"description": "A scope-aware CMS for SvelteKit, for static or dynamic sites.",
 	"keywords": [
 		"svelte",
@@ -126,6 +126,7 @@
 		"@tiptap/extension-link": "^3.30.6",
 		"@tiptap/pm": "^3.30.6",
 		"@tiptap/starter-kit": "^3.30.6",
+		"@velastack/whatsapp": "^0.1.0",
 		"bits-ui": "^2.19.0",
 		"devalue": "^6.0.0",
 		"tailwind-merge": "^3.6.0"