@velastack/cms 0.4.0 → 0.5.1

package/dist/core/shapes/presets.js

@@ -0,0 +1,152 @@
+/**
+ * The six list presets: fixed item shapes behind exported components, so a
+ * template never invents a schema of its own. A new shape is a new preset.
+ */
+import { asItems, asString, isPlainObject } from '../structured.js';
+import { defineForm } from './form.js';
+import { asImage } from './image.js';
+import { asLink, linkHref } from './link.js';
+const definePreset = (o) => defineForm({
+    component: o.component,
+    label: o.label,
+    version: 1,
+    translatable: [],
+    items: { key: 'items', translatable: o.translatable },
+    normalize: (raw) => {
+        const items = Array.isArray(raw) ? raw : isPlainObject(raw) ? raw.items : [];
+        return { v: 1, items: asItems(items, o.normalizeItem) };
+    },
+    empty: () => ({ v: 1, items: [] }),
+    fields: [
+        {
+            key: 'items',
+            label: o.label,
+            type: 'list',
+            itemLabel: o.itemLabel,
+            titleKey: o.titleKey,
+            blank: o.blank,
+            fields: o.fields
+        }
+    ]
+});
+export const cmsStats = definePreset({
+    component: 'CmsStats',
+    label: 'Stats',
+    itemLabel: 'stat',
+    titleKey: 'label',
+    translatable: ['value', 'label', 'note'],
+    blank: () => ({ value: '', label: '', note: '' }),
+    fields: [
+        { key: 'value', label: 'Value', type: 'text', half: true, placeholder: '12k' },
+        { key: 'label', label: 'Label', type: 'text', placeholder: 'Guests a year' },
+        { key: 'note', label: 'Note', type: 'text' }
+    ],
+    normalizeItem: (r) => ({
+        value: asString(r.value),
+        label: asString(r.label),
+        note: asString(r.note)
+    })
+});
+export const cmsSteps = definePreset({
+    component: 'CmsSteps',
+    label: 'Steps',
+    itemLabel: 'step',
+    titleKey: 'title',
+    translatable: ['title', 'body'],
+    blank: () => ({ title: '', body: '', image: null }),
+    fields: [
+        { key: 'title', label: 'Title', type: 'text' },
+        { key: 'body', label: 'Body', type: 'html' },
+        { key: 'image', label: 'Image', type: 'image' }
+    ],
+    normalizeItem: (r) => ({
+        title: asString(r.title),
+        body: asString(r.body),
+        image: asImage(r.image)
+    })
+});
+export const cmsTimeline = definePreset({
+    component: 'CmsTimeline',
+    label: 'Timeline',
+    itemLabel: 'entry',
+    titleKey: 'title',
+    translatable: ['date', 'title', 'body'],
+    blank: () => ({ date: '', title: '', body: '', image: null }),
+    fields: [
+        { key: 'date', label: 'Date', type: 'text', half: true, placeholder: '2019' },
+        { key: 'title', label: 'Title', type: 'text' },
+        { key: 'body', label: 'Body', type: 'html' },
+        { key: 'image', label: 'Image', type: 'image' }
+    ],
+    normalizeItem: (r) => ({
+        date: asString(r.date),
+        title: asString(r.title),
+        body: asString(r.body),
+        image: asImage(r.image)
+    })
+});
+export const cmsGallery = definePreset({
+    component: 'CmsGallery',
+    label: 'Gallery',
+    itemLabel: 'photo',
+    titleKey: 'caption',
+    translatable: ['caption'],
+    blank: () => ({ image: null, caption: '' }),
+    fields: [
+        { key: 'image', label: 'Photo', type: 'image' },
+        { key: 'caption', label: 'Caption', type: 'text' }
+    ],
+    normalizeItem: (r) => ({ image: asImage(r.image ?? r.src), caption: asString(r.caption) })
+});
+export const cmsLogos = definePreset({
+    component: 'CmsLogos',
+    label: 'Logos',
+    itemLabel: 'logo',
+    titleKey: 'name',
+    translatable: [],
+    blank: () => ({ image: null, name: '', link: null }),
+    fields: [
+        { key: 'name', label: 'Name', type: 'text' },
+        { key: 'image', label: 'Logo', type: 'image' },
+        { key: 'link', label: 'Link', type: 'link' }
+    ],
+    normalizeItem: (r) => ({ image: asImage(r.image), name: asString(r.name), link: asLink(r.link) })
+});
+export const logosView = (value) => value.items
+    .filter((l) => l.image !== null)
+    .map((l) => ({ ...l, href: l.link ? linkHref(l.link) || null : null }));
+export const cmsSchedule = definePreset({
+    component: 'CmsSchedule',
+    label: 'Schedule',
+    itemLabel: 'session',
+    titleKey: 'title',
+    translatable: ['day', 'time', 'title', 'body', 'location'],
+    blank: () => ({ day: '', time: '', title: '', body: '', location: '' }),
+    fields: [
+        { key: 'day', label: 'Day', type: 'text', half: true, placeholder: 'Monday' },
+        { key: 'time', label: 'Time', type: 'text', placeholder: '10:00 – 11:00' },
+        { key: 'title', label: 'Title', type: 'text' },
+        { key: 'location', label: 'Location', type: 'text' },
+        { key: 'body', label: 'Details', type: 'html' }
+    ],
+    normalizeItem: (r) => ({
+        day: asString(r.day),
+        time: asString(r.time),
+        title: asString(r.title),
+        body: asString(r.body),
+        location: asString(r.location)
+    })
+});
+/** Sessions grouped by `day`, in first-seen order. */
+export const scheduleByDay = (value) => {
+    const out = [];
+    for (const item of value.items) {
+        if (item.title === '')
+            continue;
+        let group = out.find((g) => g.day === item.day);
+        if (!group)
+            out.push((group = { day: item.day, items: [] }));
+        group.items.push(item);
+    }
+    return out;
+};

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

@@ -0,0 +1,40 @@
+import { type CmsLinkValue } from './link.js';
+export type PricingFeature = {
+    id: string;
+    text: string;
+    included: boolean;
+};
+export type PricingTier = {
+    id: string;
+    name: string;
+    price: {
+        amount: number | null;
+        /** A quote, not a number: the template shows `labels.custom`. */
+        custom: boolean;
+        /** `month`, `person`… shown after the amount. */
+        period: string;
+    };
+    description: string;
+    features: PricingFeature[];
+    cta: CmsLinkValue | null;
+    highlighted: boolean;
+    badge: string;
+};
+export type CmsPricingValue = {
+    v: 1;
+    /** ISO 4217, e.g. `EUR`. */
+    currency: string;
+    labels: {
+        custom: string;
+    };
+    items: PricingTier[];
+};
+export type PricingTierView = PricingTier & {
+    priceText: string;
+    href: string | null;
+};
+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[];

package/dist/core/shapes/pricing.js

@@ -0,0 +1,115 @@
+/** `CmsPricing`: tiers with a feature checklist and a call to action. */
+import { asBoolean, asItems, asNumber, asString, isPlainObject } from '../structured.js';
+import { defineForm } from './form.js';
+import { asLink, linkHref } from './link.js';
+export const cmsPricing = defineForm({
+    component: 'CmsPricing',
+    label: 'Pricing',
+    version: 1,
+    translatable: ['labels.custom'],
+    items: {
+        key: 'items',
+        translatable: ['name', 'description', 'badge', 'price.period'],
+        items: { key: 'features', translatable: ['text'] }
+    },
+    normalize: (raw) => {
+        const r = isPlainObject(raw) ? raw : {};
+        const labels = isPlainObject(r.labels) ? r.labels : {};
+        return {
+            v: 1,
+            currency: asString(r.currency),
+            labels: { custom: asString(labels.custom, 'Custom') },
+            items: asItems(r.items, (t) => {
+                const p = isPlainObject(t.price) ? t.price : {};
+                return {
+                    name: asString(t.name),
+                    price: {
+                        amount: asNumber(p.amount),
+                        custom: asBoolean(p.custom, p.amount === 'custom'),
+                        period: asString(p.period)
+                    },
+                    description: asString(t.description),
+                    features: asItems(t.features, (f) => ({
+                        text: asString(f.text),
+                        included: asBoolean(f.included, true)
+                    })),
+                    cta: asLink(t.cta),
+                    highlighted: asBoolean(t.highlighted),
+                    badge: asString(t.badge)
+                };
+            })
+        };
+    },
+    empty: () => ({ v: 1, currency: '', labels: { custom: 'Custom' }, items: [] }),
+    fields: [
+        { key: 'currency', label: 'Currency', type: 'text', half: true, placeholder: 'EUR' },
+        { key: 'labels.custom', label: '“Custom” price label', type: 'text' },
+        {
+            key: 'items',
+            label: 'Tiers',
+            type: 'list',
+            itemLabel: 'tier',
+            titleKey: 'name',
+            blank: () => ({
+                name: '',
+                price: { amount: null, custom: false, period: '' },
+                description: '',
+                features: [],
+                cta: null,
+                highlighted: false,
+                badge: ''
+            }),
+            fields: [
+                { key: 'name', label: 'Name', type: 'text', half: true },
+                { key: 'badge', label: 'Badge', type: 'text', placeholder: 'Most popular' },
+                { key: 'price.amount', label: 'Price', type: 'number', half: true },
+                { key: 'price.period', label: 'Per', type: 'text', placeholder: 'month' },
+                { key: 'price.custom', label: 'Custom price (quote)', type: 'boolean' },
+                { key: 'description', label: 'Description', type: 'long-string' },
+                {
+                    key: 'features',
+                    label: 'Features',
+                    type: 'list',
+                    itemLabel: 'feature',
+                    titleKey: 'text',
+                    blank: () => ({ text: '', included: true }),
+                    fields: [
+                        { key: 'text', label: 'Feature', type: 'text' },
+                        { key: 'included', label: 'Included', type: 'boolean' }
+                    ]
+                },
+                { key: 'cta', label: 'Call to action', type: 'link' },
+                { key: 'highlighted', label: 'Highlighted', type: 'boolean' }
+            ]
+        }
+    ]
+});
+/** `€29 / month`, the custom label, or empty without an amount. */
+export const formatPrice = (tier, value, locale) => {
+    if (tier.price.custom)
+        return value.labels.custom;
+    if (tier.price.amount === null)
+        return '';
+    let amount;
+    try {
+        amount = value.currency
+            ? new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency: value.currency,
+                maximumFractionDigits: Number.isInteger(tier.price.amount) ? 0 : 2
+            }).format(tier.price.amount)
+            : new Intl.NumberFormat(locale).format(tier.price.amount);
+    }
+    catch {
+        amount = `${value.currency} ${tier.price.amount}`.trim();
+    }
+    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
+}));

package/dist/core/shapes/social-links.d.ts

@@ -0,0 +1,19 @@
+import { type ListValue } from './form.js';
+export declare const SOCIAL_PLATFORMS: readonly ["instagram", "facebook", "tiktok", "youtube", "linkedin", "x", "threads", "pinterest", "whatsapp", "tripadvisor", "google", "yelp", "other"];
+export type SocialPlatform = (typeof SOCIAL_PLATFORMS)[number];
+export declare const SOCIAL_PLATFORM_NAMES: Readonly<Record<SocialPlatform, string>>;
+export type SocialLink = {
+    id: string;
+    platform: SocialPlatform;
+    url: string;
+    label: string;
+};
+export type CmsSocialLinksValue = ListValue<SocialLink>;
+export type SocialLinkView = SocialLink & {
+    name: string;
+};
+export declare const cmsSocialLinks: import("./form.js").FormShape<CmsSocialLinksValue>;
+/** Profiles with a URL, each with a display `name` (the label, else the platform). */
+export declare const socialLinksView: (value: CmsSocialLinksValue) => SocialLinkView[];
+/** The `sameAs` list for an Organization or LocalBusiness JSON-LD node. */
+export declare const toSameAs: (value: CmsSocialLinksValue) => string[];

package/dist/core/shapes/social-links.js

@@ -0,0 +1,83 @@
+/**
+ * `CmsSocialLinks`: an ordered list of profiles. The template supplies the
+ * icon for `platform`; `label` defaults to the platform's name.
+ */
+import { asEnum, asItems, asString, isPlainObject } from '../structured.js';
+import { defineForm } from './form.js';
+export const SOCIAL_PLATFORMS = [
+    'instagram',
+    'facebook',
+    'tiktok',
+    'youtube',
+    'linkedin',
+    'x',
+    'threads',
+    'pinterest',
+    'whatsapp',
+    'tripadvisor',
+    'google',
+    'yelp',
+    'other'
+];
+export const SOCIAL_PLATFORM_NAMES = {
+    instagram: 'Instagram',
+    facebook: 'Facebook',
+    tiktok: 'TikTok',
+    youtube: 'YouTube',
+    linkedin: 'LinkedIn',
+    x: 'X',
+    threads: 'Threads',
+    pinterest: 'Pinterest',
+    whatsapp: 'WhatsApp',
+    tripadvisor: 'Tripadvisor',
+    google: 'Google',
+    yelp: 'Yelp',
+    other: 'Website'
+};
+export const cmsSocialLinks = defineForm({
+    component: 'CmsSocialLinks',
+    label: 'Social links',
+    version: 1,
+    translatable: [],
+    items: { key: 'items', translatable: ['label'] },
+    normalize: (raw) => {
+        const items = Array.isArray(raw) ? raw : isPlainObject(raw) ? raw.items : [];
+        return {
+            v: 1,
+            items: asItems(items, (r) => ({
+                platform: asEnum(r.platform, SOCIAL_PLATFORMS, 'other'),
+                url: asString(r.url),
+                label: asString(r.label)
+            }))
+        };
+    },
+    empty: () => ({ v: 1, items: [] }),
+    fields: [
+        {
+            key: 'items',
+            label: 'Profiles',
+            type: 'list',
+            itemLabel: 'profile',
+            titleKey: 'platform',
+            blank: () => ({ platform: 'instagram', url: '', label: '' }),
+            fields: [
+                {
+                    key: 'platform',
+                    label: 'Platform',
+                    type: 'enum',
+                    values: SOCIAL_PLATFORMS,
+                    names: SOCIAL_PLATFORM_NAMES,
+                    half: true
+                },
+                { key: 'url', label: 'URL', type: 'url', placeholder: 'https://…' },
+                { key: 'label', label: 'Label', type: 'text', placeholder: 'Defaults to the platform name' }
+            ]
+        }
+    ]
+});
+/** Profiles with a URL, each with a display `name` (the label, else the platform). */
+export const socialLinksView = (value) => value.items
+    .filter((i) => i.url !== '')
+    .map((i) => ({ ...i, name: i.label || SOCIAL_PLATFORM_NAMES[i.platform] }));
+/** The `sameAs` list for an Organization or LocalBusiness JSON-LD node. */
+export const toSameAs = (value) => value.items.map((i) => i.url).filter((u) => u !== '');

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

@@ -0,0 +1,22 @@
+import { type ListValue } from './form.js';
+import { type CmsImageValue } from './image.js';
+import { type SocialPlatform } from './social-links.js';
+export type TeamLink = {
+    id: string;
+    platform: SocialPlatform;
+    url: string;
+};
+export type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    bio: string;
+    photo: CmsImageValue | null;
+    email: string;
+    phone: string;
+    links: TeamLink[];
+};
+export type CmsTeamValue = ListValue<TeamMember>;
+export declare const cmsTeam: import("./form.js").FormShape<CmsTeamValue>;
+/** Members with a name. */
+export declare const teamView: (value: CmsTeamValue) => TeamMember[];

package/dist/core/shapes/team.js

@@ -0,0 +1,70 @@
+/** `CmsTeam`: people with a portrait, a role and a rich bio. */
+import { asEnum, asItems, asString, isPlainObject } from '../structured.js';
+import { defineForm } from './form.js';
+import { asImage } from './image.js';
+import { SOCIAL_PLATFORMS, SOCIAL_PLATFORM_NAMES } from './social-links.js';
+export const cmsTeam = defineForm({
+    component: 'CmsTeam',
+    label: 'Team',
+    version: 1,
+    translatable: [],
+    items: { key: 'items', translatable: ['role', 'bio'] },
+    normalize: (raw) => {
+        const items = Array.isArray(raw) ? raw : isPlainObject(raw) ? raw.items : [];
+        return {
+            v: 1,
+            items: asItems(items, (r) => ({
+                name: asString(r.name),
+                role: asString(r.role),
+                bio: asString(r.bio),
+                photo: asImage(r.photo),
+                email: asString(r.email),
+                phone: asString(r.phone),
+                links: asItems(r.links, (l) => ({
+                    platform: asEnum(l.platform, SOCIAL_PLATFORMS, 'other'),
+                    url: asString(l.url)
+                }))
+            }))
+        };
+    },
+    empty: () => ({ v: 1, items: [] }),
+    fields: [
+        {
+            key: 'items',
+            label: 'People',
+            type: 'list',
+            itemLabel: 'person',
+            titleKey: 'name',
+            blank: () => ({ name: '', role: '', bio: '', photo: null, email: '', phone: '', links: [] }),
+            fields: [
+                { key: 'name', label: 'Name', type: 'text', half: true },
+                { key: 'role', label: 'Role', type: 'text' },
+                { key: 'photo', label: 'Portrait', type: 'image' },
+                { key: 'bio', label: 'Bio', type: 'html' },
+                { key: 'email', label: 'Email', type: 'text', half: true },
+                { key: 'phone', label: 'Phone', type: 'text' },
+                {
+                    key: 'links',
+                    label: 'Profiles',
+                    type: 'list',
+                    itemLabel: 'profile',
+                    titleKey: 'platform',
+                    blank: () => ({ platform: 'linkedin', url: '' }),
+                    fields: [
+                        {
+                            key: 'platform',
+                            label: 'Platform',
+                            type: 'enum',
+                            values: SOCIAL_PLATFORMS,
+                            names: SOCIAL_PLATFORM_NAMES,
+                            half: true
+                        },
+                        { key: 'url', label: 'URL', type: 'url' }
+                    ]
+                }
+            ]
+        }
+    ]
+});
+/** Members with a name. */
+export const teamView = (value) => value.items.filter((m) => m.name !== '');

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

@@ -0,0 +1,24 @@
+import { type ListValue } from './form.js';
+import { type CmsImageValue } from './image.js';
+export type Testimonial = {
+    id: string;
+    quote: string;
+    author: string;
+    role: string;
+    company: string;
+    photo: CmsImageValue | null;
+    /** 1 to 5, or `null` when not rated. */
+    rating: number | null;
+    source: {
+        label: string;
+        url: string;
+    };
+    /** ISO date (`YYYY-MM-DD`), or empty. */
+    date: string;
+};
+export type CmsTestimonialsValue = ListValue<Testimonial>;
+export declare const cmsTestimonials: import("./form.js").FormShape<CmsTestimonialsValue>;
+/** Testimonials that have a quote. */
+export declare const testimonialsView: (value: CmsTestimonialsValue) => Testimonial[];
+/** A schema.org `Review` node. `itemReviewed` is the business or product node. */
+export declare const toReview: (item: Testimonial, itemReviewed?: Record<string, unknown>) => Record<string, unknown>;

package/dist/core/shapes/testimonials.js

@@ -0,0 +1,86 @@
+/** `CmsTestimonials`: quotes with an author, a rating and a source, plus Review JSON-LD. */
+import { asItems, asNumber, asString, isPlainObject } from '../structured.js';
+import { defineForm } from './form.js';
+import { asImage } from './image.js';
+const asRating = (v) => {
+    const n = asNumber(typeof v === 'string' ? Number(v) : v);
+    return n !== null && n >= 1 && n <= 5 ? Math.round(n) : null;
+};
+export const cmsTestimonials = defineForm({
+    component: 'CmsTestimonials',
+    label: 'Testimonials',
+    version: 1,
+    translatable: [],
+    items: { key: 'items', translatable: ['quote', 'role'] },
+    normalize: (raw) => {
+        const items = Array.isArray(raw) ? raw : isPlainObject(raw) ? raw.items : [];
+        return {
+            v: 1,
+            items: asItems(items, (r) => {
+                const source = isPlainObject(r.source) ? r.source : {};
+                return {
+                    quote: asString(r.quote),
+                    author: asString(r.author),
+                    role: asString(r.role),
+                    company: asString(r.company),
+                    photo: asImage(r.photo),
+                    rating: asRating(r.rating),
+                    source: { label: asString(source.label), url: asString(source.url) },
+                    date: asString(r.date)
+                };
+            })
+        };
+    },
+    empty: () => ({ v: 1, items: [] }),
+    fields: [
+        {
+            key: 'items',
+            label: 'Quotes',
+            type: 'list',
+            itemLabel: 'testimonial',
+            titleKey: 'author',
+            blank: () => ({
+                quote: '',
+                author: '',
+                role: '',
+                company: '',
+                photo: null,
+                rating: null,
+                source: { label: '', url: '' },
+                date: ''
+            }),
+            fields: [
+                { key: 'quote', label: 'Quote', type: 'html' },
+                { key: 'author', label: 'Author', type: 'text', half: true },
+                { key: 'role', label: 'Role', type: 'text' },
+                { key: 'company', label: 'Company', type: 'text', half: true },
+                { key: 'date', label: 'Date', type: 'date' },
+                { key: 'rating', label: 'Rating', type: 'rating' },
+                { key: 'photo', label: 'Photo', type: 'image' },
+                { key: 'source.label', label: 'Source', type: 'text', half: true, placeholder: 'Google' },
+                { key: 'source.url', label: 'Source URL', type: 'url' }
+            ]
+        }
+    ]
+});
+const stripTags = (html) => html.replace(/<[^>]*>/g, '').trim();
+/** Testimonials that have a quote. */
+export const testimonialsView = (value) => value.items.filter((t) => stripTags(t.quote) !== '');
+/** A schema.org `Review` node. `itemReviewed` is the business or product node. */
+export const toReview = (item, itemReviewed) => {
+    const out = {
+        '@type': 'Review',
+        reviewBody: stripTags(item.quote),
+        author: { '@type': 'Person', name: item.author }
+    };
+    if (item.rating !== null) {
+        out.reviewRating = { '@type': 'Rating', ratingValue: item.rating, bestRating: 5 };
+    }
+    if (item.date)
+        out.datePublished = item.date;
+    if (item.source.label)
+        out.publisher = { '@type': 'Organization', name: item.source.label };
+    if (itemReviewed)
+        out.itemReviewed = itemReviewed;
+    return out;
+};

package/dist/core/structured-registry.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Which exported component reads which structured shape. Structured
+ * components register their schema at module load, so the Locales panel can
+ * count translatable strings for every usage the manifest recorded on the
+ * current route without importing the components themselves.
+ */
+import type { Structured } from './structured.js';
+import type { Tree } from './path.js';
+export declare const registerStructured: <T extends Tree>(schema: Structured<T>) => Structured<T>;
+export declare const getStructured: (component: string) => Structured<Tree> | undefined;

package/dist/core/structured-registry.js

@@ -0,0 +1,6 @@
+const registry = new Map();
+export const registerStructured = (schema) => {
+    registry.set(schema.component, schema);
+    return schema;
+};
+export const getStructured = (component) => registry.get(component);