@velastack/cms 0.7.0 → 0.8.0

package/README.md

@@ -317,6 +317,8 @@ Hours, navigation, a team, a price list: one value with a fixed shape, edited in
 
 Templates use only these exports; there is no open item schema. A shape outside the presets is a new preset in the package. `fallback` takes the full value or a bare item list and is normalized like a stored value, so a hand-written seed with missing fields is safe. Prices, times, dates and day names format in the visitor's locale; `isOpenNow` is computed when the page renders, so a prerendered page shows the state at build time.
 
+**Prices are in the site's currency, formatted for the business's country.** A business has one currency, the one it prices in and is paid in, declared as a `currency` field in a Site Options group (see [Site options](#site-options)), and one country (`country`, ISO 3166-1 alpha-2). `CmsCollection` fills the currency into each item's `price`, and `CmsPricing` uses it when the block sets none, so a template formats `item.price` or reads `priceText` without knowing about it; `siteCurrency(cms.site)` reads it for anything else. Format with `siteLocale(cms.site, locale)`, the page's language in the business's country: a bare `es` shows MXN as `360,00 MXN`, `es-MX` as `$360.00`. There is no per-item currency in the editor; an item written with one before this is still read as written.
+
 Every value type (`CmsHoursValue`, `NavItem`, …), schema (`cmsHours`, …) and JSON-LD helper is exported from the package root.
 
 ### Building one
@@ -498,7 +500,8 @@ A cart whose checkout is a WhatsApp chat. Visitors add items with `whatsappCart.
 </CmsWhatsAppCart>
 ```
 
-- **One currency, the business's own.** Every price is in it, and the order and message are too. It comes from the `currency` site option (declare it in `createCms({ site })`), or the `currency` prop. `formatPrice` formats an amount in the page's language, so an English page shows MXN as `MX$5.50` and a Spanish one as `$5.50`.
+- **One currency, the business's own.** Every price is in it, and the order and message are too. It comes from the `currency` Site Option (a `currency` field in any group of `createCms({ site })`), or the `currency` prop. `formatPrice` formats an amount in the page's language in the business's country (`siteLocale`), so on a Mexican site an English page shows MXN as `MX$5.50` and a Spanish one as `$5.50`.
+- **The number** is the field's own setting, or the `number` prop when the template already keeps it in its contact details (`<CmsContact>`'s `whatsapp`), so an editor enters it once.
 - **Prices are optional**, and written as an editor types them (`4.5`). `cart.subtotal` exists only when every item has a price; otherwise the business quotes the total in the chat.
 - **The message is the editor's**, set from the pencil like `CmsWhatsAppForm`'s, with `{ref}`, `{items}`, `{total}`, `{name}`, `{phone}` and `{note}`. Until one is set, a default lists the items, the total and the customer. Lines an empty placeholder leaves blank are dropped.
 - **After checkout**, `placed` holds the order's reference and chat link until `cart.clear()`. Adding an item starts the next order.
@@ -653,7 +656,7 @@ editable page metadata (cms.metadata)
 
 ### Site options
 
-`createCms({ site })` declares the **Site Options** panel: project-wide values that never render on the page — the schema.org type (`enum`), the default share image (`image`), which locales are enabled (`boolean`). Field types are `text`, `markdown`, `number`, `datetime`, `url`, `color`, `image`, `enum` (with `values`) and `boolean`. Anything a visitor sees belongs in the root layout scope, edited in place with `scope="root"`; the site tree is one non-localised tree per project.
+`createCms({ site })` declares the **Site Options** panel: project-wide values that never render on the page — the schema.org type (`enum`), the default share image (`image`), which locales are enabled (`boolean`), the business's currency and country (`text`, ISO 4217 and ISO 3166-1 alpha-2, in a group such as `business`: `siteCurrency`, `siteCountry` and `siteLocale` find a `currency` or `country` field in any group). Field types are `text`, `markdown`, `number`, `datetime`, `url`, `color`, `image`, `enum` (with `values`) and `boolean`. Anything a visitor sees belongs in the root layout scope, edited in place with `scope="root"`; the site tree is one non-localised tree per project.
 
 ## Adapters
 

package/dist/components/cms/cms-collection.svelte

@@ -10,6 +10,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Structured from './cms-structured.svelte';
+	import { cms } from './cms-store.svelte.js';
+	import { siteCurrency } from '../../core/site-currency.js';
 	import {
 		cmsCollection,
 		collectionView,
@@ -33,6 +35,8 @@
 		children: Snippet<[CollectionItemView[]]>;
 	};
 	let { name, scope, fallback, value, limit, featured, tag, children }: Props = $props();
+	// Prices are in the site's currency unless an item still carries its own.
+	const currency = $derived(siteCurrency(cms.site));
 </script>
 
 <Structured
@@ -41,6 +45,6 @@
 	{scope}
 	{fallback}
 	{value}
-	view={(v: CmsCollectionValue) => collectionView(v, { limit, featured, tag })}
+	view={(v: CmsCollectionValue) => collectionView(v, { limit, featured, tag }, currency)}
 	{children}
 />

package/dist/components/cms/cms-pricing.svelte

@@ -6,7 +6,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Structured from './cms-structured.svelte';
-	import { cmsStore } from './cms-store.svelte.js';
+	import { cms, cmsStore } from './cms-store.svelte.js';
+	import { siteCurrency, siteLocale } from '../../core/site-currency.js';
 	import {
 		cmsPricing,
 		pricingView,
@@ -22,7 +23,10 @@
 		children: Snippet<[PricingTierView[]]>;
 	};
 	let { name, scope, fallback, value, children }: Props = $props();
-	const locale = $derived(cmsStore.activeLocale || 'en');
+	// The page's language in the business's country, and the site's currency
+	// unless the block sets one of its own.
+	const locale = $derived(siteLocale(cms.site, cmsStore.activeLocale || 'en') ?? 'en');
+	const currency = $derived(siteCurrency(cms.site));
 </script>
 
 <Structured
@@ -31,6 +35,6 @@
 	{scope}
 	{fallback}
 	{value}
-	view={(v: CmsPricingValue) => pricingView(v, locale)}
+	view={(v: CmsPricingValue) => pricingView(v, locale, currency)}
 	{children}
 />

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

@@ -45,6 +45,7 @@
 	import Structured from './cms-structured.svelte';
 	import FormControls from './cms-form-controls.svelte';
 	import { cms, cmsStore } from './cms-store.svelte.js';
+	import { siteCurrency, siteLocale } from '../../core/site-currency.js';
 	import { useFormTarget, type FormStatus } from './use-form-target.svelte.js';
 	import { setWhatsAppFieldNames } from './cms-whatsapp-form.svelte';
 	import { cmsWhatsApp, type CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
@@ -66,9 +67,14 @@
 		action?: string;
 		/**
 		 * ISO 4217: the business's currency, which every price is in. Defaults
-		 * to the `currency` site option.
+		 * to the `currency` Site Option.
 		 */
 		currency?: string;
+		/**
+		 * The business's WhatsApp number, when the template keeps it in its
+		 * contact details rather than in this field's settings.
+		 */
+		number?: string;
 		children: Snippet<[CmsWhatsAppCartState]>;
 	};
 	let {
@@ -79,20 +85,23 @@
 		key,
 		action,
 		currency,
+		number,
 		children: content,
 		...rest
 	}: Props = $props();
 
 	$effect.pre(() => {
-		const fromSite = cms.site.currency;
-		whatsappCart.currency =
-			currency ?? (typeof fromSite === 'string' ? fromSite.trim().toUpperCase() : '');
+		whatsappCart.currency = currency?.trim().toUpperCase() || siteCurrency(cms.site) || '';
 	});
 
-	// The page's language, not the browser's: an English page shows MXN as
-	// `MX$5.50`, a Spanish one as `$5.50`.
+	// The page's language in the business's country, not the browser's
+	// settings: on a Mexican site an English page shows MXN as `MX$5.50` and a
+	// Spanish one as `$5.50`.
 	const pageLocale = () =>
-		(typeof document !== 'undefined' && document.documentElement.lang) || undefined;
+		siteLocale(
+			cms.site,
+			(typeof document !== 'undefined' && document.documentElement.lang) || undefined
+		);
 
 	const target = useFormTarget(() => ({ key, action }));
 	setWhatsAppFieldNames(() => ORDER_PLACEHOLDERS);
@@ -172,7 +181,7 @@
 		const text = tidyMessage(
 			fillMessage(settings.message || DEFAULT_ORDER_MESSAGE, orderPlaceholders(order, pageLocale()))
 		);
-		const href = whatsappHref(settings.number, text);
+		const href = whatsappHref(number || settings.number, text);
 		if (!href) {
 			status = 'error';
 			message = 'No WhatsApp number is set.';

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

@@ -39,9 +39,14 @@ type Props = Omit<HTMLFormAttributes, 'action' | 'method' | 'children'> & {
     action?: string;
     /**
      * ISO 4217: the business's currency, which every price is in. Defaults
-     * to the `currency` site option.
+     * to the `currency` Site Option.
      */
     currency?: string;
+    /**
+     * The business's WhatsApp number, when the template keeps it in its
+     * contact details rather than in this field's settings.
+     */
+    number?: string;
     children: Snippet<[CmsWhatsAppCartState]>;
 };
 declare const CmsWhatsappCart: import("svelte").Component<Props, {}, "">;

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

@@ -14,7 +14,11 @@ export type CollectionDetail = {
 };
 export type CollectionPrice = {
     amount: number | null;
-    /** ISO 4217, e.g. `EUR`. */
+    /**
+     * ISO 4217. Normally blank: a price is in the site's currency (the
+     * `currency` Site Option), which `collectionView` fills in. Content
+     * written before that may still carry one per item; it is kept as read.
+     */
     currency: string;
     /** `night`, `person`, `hour`… shown after the amount. */
     period: string;
@@ -50,8 +54,12 @@ export type CollectionSlice = {
     /** Only items carrying this tag. */
     tag?: string;
 };
-/** Visible items (not hidden, with a title), optionally sliced. */
-export declare const collectionView: (value: CmsCollectionValue, slice?: CollectionSlice) => CollectionItemView[];
+/**
+ * Visible items (not hidden, with a title), optionally sliced. `currency` is
+ * the site's; a price without one of its own is in it, so templates format
+ * `item.price` as is.
+ */
+export declare const collectionView: (value: CmsCollectionValue, slice?: CollectionSlice, currency?: string) => CollectionItemView[];
 /** Every tag in use, in first-seen order. */
 export declare const collectionTags: (value: CmsCollectionValue) => string[];
 /** `from €120 / night`, or empty when there is no amount. */

package/dist/core/shapes/collection.js

@@ -128,22 +128,19 @@ export const cmsCollection = defineForm({
                     placeholder: 'from',
                     group: 'Pricing'
                 },
-                { key: 'price.amount', label: 'Amount', type: 'number', group: 'Pricing' },
-                {
-                    key: 'price.currency',
-                    label: 'Currency',
-                    type: 'text',
-                    half: true,
-                    placeholder: 'EUR',
-                    group: 'Pricing'
-                },
+                // In the site's currency (Site Options); there is no per-item one.
+                { key: 'price.amount', label: 'Amount', type: 'number', half: true, group: 'Pricing' },
                 { key: 'price.period', label: 'Per', type: 'text', placeholder: 'night', group: 'Pricing' }
             ]
         }
     ]
 });
-/** Visible items (not hidden, with a title), optionally sliced. */
-export const collectionView = (value, slice = {}) => {
+/**
+ * Visible items (not hidden, with a title), optionally sliced. `currency` is
+ * the site's; a price without one of its own is in it, so templates format
+ * `item.price` as is.
+ */
+export const collectionView = (value, slice = {}, currency) => {
     let items = value.items.filter((i) => !i.hidden && i.title !== '');
     if (slice.featured)
         items = items.filter((i) => i.featured);
@@ -151,7 +148,11 @@ export const collectionView = (value, slice = {}) => {
         items = items.filter((i) => i.tags.includes(slice.tag));
     if (slice.limit !== undefined && slice.limit >= 0)
         items = items.slice(0, slice.limit);
-    return items.map((i) => ({ ...i, href: i.link ? linkHref(i.link) || null : null }));
+    return items.map((i) => ({
+        ...i,
+        price: i.price.currency || !currency ? i.price : { ...i.price, currency },
+        href: i.link ? linkHref(i.link) || null : null
+    }));
 };
 /** Every tag in use, in first-seen order. */
 export const collectionTags = (value) => {

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

@@ -22,7 +22,7 @@ export type PricingTier = {
 };
 export type CmsPricingValue = {
     v: 1;
-    /** ISO 4217, e.g. `EUR`. */
+    /** ISO 4217. Blank means the site's currency (the `currency` Site Option). */
     currency: string;
     labels: {
         custom: string;
@@ -36,5 +36,8 @@ export type PricingTierView = PricingTier & {
 export declare const cmsPricing: import("./form.js").FormShape<CmsPricingValue>;
 /** `€29 / month`, the custom label, or empty without an amount. */
 export declare const formatPrice: (tier: PricingTier, value: Pick<CmsPricingValue, "currency" | "labels">, locale: string) => string;
-/** Tiers with a name, each with its formatted price and CTA href. */
-export declare const pricingView: (value: CmsPricingValue, locale: string) => PricingTierView[];
+/**
+ * Tiers with a name, each with its formatted price and CTA href. `currency`
+ * is the site's, used when the block sets none of its own.
+ */
+export declare const pricingView: (value: CmsPricingValue, locale: string, currency?: string) => PricingTierView[];

package/dist/core/shapes/pricing.js

@@ -42,7 +42,13 @@ export const cmsPricing = defineForm({
     },
     empty: () => ({ v: 1, currency: '', labels: { custom: 'Custom' }, items: [] }),
     fields: [
-        { key: 'currency', label: 'Currency', type: 'text', half: true, placeholder: 'EUR' },
+        {
+            key: 'currency',
+            label: 'Currency',
+            type: 'text',
+            half: true,
+            placeholder: 'Blank: the site’s'
+        },
         { key: 'labels.custom', label: '“Custom” price label', type: 'text' },
         {
             key: 'items',
@@ -105,11 +111,17 @@ export const formatPrice = (tier, value, locale) => {
     }
     return tier.price.period ? `${amount} / ${tier.price.period}` : amount;
 };
-/** Tiers with a name, each with its formatted price and CTA href. */
-export const pricingView = (value, locale) => value.items
-    .filter((t) => t.name !== '')
-    .map((t) => ({
-    ...t,
-    priceText: formatPrice(t, value, locale),
-    href: t.cta ? linkHref(t.cta) || null : null
-}));
+/**
+ * Tiers with a name, each with its formatted price and CTA href. `currency`
+ * is the site's, used when the block sets none of its own.
+ */
+export const pricingView = (value, locale, currency) => {
+    const priced = value.currency || !currency ? value : { ...value, currency };
+    return value.items
+        .filter((t) => t.name !== '')
+        .map((t) => ({
+        ...t,
+        priceText: formatPrice(t, priced, locale),
+        href: t.cta ? linkHref(t.cta) || null : null
+    }));
+};

package/dist/core/site-currency.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The business's currency, from Site Options.
+ *
+ * A site has one currency: the one the business prices in and is paid in
+ * (MXN for a bakery in Mexico). Templates declare it as a `currency` field in
+ * one of their Site Options groups (`business.currency`, say), and every
+ * price on the site is in it: a collection item's, a pricing tier's, the
+ * WhatsApp cart's. A visitor sees another currency only as a display
+ * conversion, which is a later concern, never as a second price.
+ */
+/**
+ * The ISO 4217 code a Site Options tree declares: a top-level `currency`, or
+ * a `currency` field in whichever group the template put it in. `undefined`
+ * when none is set or the value is not a three-letter code.
+ */
+export declare const siteCurrency: (site: Record<string, unknown> | undefined) => string | undefined;
+/**
+ * The ISO 3166-1 alpha-2 code of the country the business is in, from a
+ * `country` field declared like `currency`. `undefined` when none is set.
+ */
+export declare const siteCountry: (site: Record<string, unknown> | undefined) => string | undefined;
+/**
+ * The locale prices format in: the page's language, in the business's
+ * country. A bare language does not know where the business is, and that
+ * decides the format: Spanish alone shows MXN as `360,00 MXN`, Mexican
+ * Spanish (`es-MX`) as `$360.00`, which is what the bakery's customers read.
+ * A `language` that already names a region is kept as it is.
+ */
+export declare const siteLocale: (site: Record<string, unknown> | undefined, language: string | undefined) => string | undefined;

package/dist/core/site-currency.js

@@ -0,0 +1,60 @@
+/**
+ * The business's currency, from Site Options.
+ *
+ * A site has one currency: the one the business prices in and is paid in
+ * (MXN for a bakery in Mexico). Templates declare it as a `currency` field in
+ * one of their Site Options groups (`business.currency`, say), and every
+ * price on the site is in it: a collection item's, a pricing tier's, the
+ * WhatsApp cart's. A visitor sees another currency only as a display
+ * conversion, which is a later concern, never as a second price.
+ */
+const CURRENCY = /^[A-Z]{3}$/;
+const COUNTRY = /^[A-Z]{2}$/;
+const asCode = (value, shape) => {
+    if (typeof value !== 'string')
+        return undefined;
+    const code = value.trim().toUpperCase();
+    return shape.test(code) ? code : undefined;
+};
+/** A `key` field at the top level or in any group, as an upper-cased code of `shape`. */
+const siteCode = (site, key, shape) => {
+    if (!site)
+        return undefined;
+    const top = asCode(site[key], shape);
+    if (top)
+        return top;
+    for (const group of Object.values(site)) {
+        if (group && typeof group === 'object' && !Array.isArray(group)) {
+            const code = asCode(group[key], shape);
+            if (code)
+                return code;
+        }
+    }
+    return undefined;
+};
+/**
+ * The ISO 4217 code a Site Options tree declares: a top-level `currency`, or
+ * a `currency` field in whichever group the template put it in. `undefined`
+ * when none is set or the value is not a three-letter code.
+ */
+export const siteCurrency = (site) => siteCode(site, 'currency', CURRENCY);
+/**
+ * The ISO 3166-1 alpha-2 code of the country the business is in, from a
+ * `country` field declared like `currency`. `undefined` when none is set.
+ */
+export const siteCountry = (site) => siteCode(site, 'country', COUNTRY);
+/**
+ * The locale prices format in: the page's language, in the business's
+ * country. A bare language does not know where the business is, and that
+ * decides the format: Spanish alone shows MXN as `360,00 MXN`, Mexican
+ * Spanish (`es-MX`) as `$360.00`, which is what the bakery's customers read.
+ * A `language` that already names a region is kept as it is.
+ */
+export const siteLocale = (site, language) => {
+    const country = siteCountry(site);
+    if (!language)
+        return undefined;
+    if (!country || language.includes('-'))
+        return language;
+    return `${language}-${country}`;
+};

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export { default as CmsWhatsAppCart } from './components/cms/cms-whatsapp-cart.s
 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 { siteCountry, siteCurrency, siteLocale } from './core/site-currency.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

@@ -41,6 +41,7 @@ export { default as CmsFormFields } from './components/cms/cms-form-fields.svelt
 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 { siteCountry, siteCurrency, siteLocale } from './core/site-currency.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.7.0",
+	"version": "0.8.0",
 	"description": "A scope-aware CMS for SvelteKit, for static or dynamic sites.",
 	"keywords": [
 		"svelte",