@koehler8/cms 1.0.0-beta.10

package/src/utils/ctaCopy.js

@@ -0,0 +1,58 @@
+const camelToKebab = (value) =>
+  value.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`).toLowerCase();
+
+const kebabToCamel = (value) =>
+  value.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+
+function normalizeKey(type) {
+  if (!type) return '';
+  if (type.includes('-')) return type.toLowerCase();
+  const kebab = camelToKebab(type);
+  return kebab;
+}
+
+function getVariantConfig(siteData) {
+  if (!siteData || typeof siteData !== 'object') return null;
+  const root = siteData.site || siteData;
+  if (!root || typeof root !== 'object') return null;
+  const config = root.ctaCopy;
+  if (!config || typeof config !== 'object') return null;
+  return config;
+}
+
+function pickLabel(variant, key) {
+  if (!variant || typeof variant !== 'object') return '';
+  const kebabKey = normalizeKey(key);
+  const camelKey = kebabToCamel(kebabKey);
+  const direct = variant[key];
+  if (typeof direct === 'string' && direct.trim()) return direct.trim();
+  const camel = variant[camelKey];
+  if (typeof camel === 'string' && camel.trim()) return camel.trim();
+  const kebab = variant[kebabKey];
+  if (typeof kebab === 'string' && kebab.trim()) return kebab.trim();
+  return '';
+}
+
+export function resolveCtaCopy(siteDataRef, type, fallback) {
+  const rawSite = siteDataRef && typeof siteDataRef === 'object' && 'value' in siteDataRef
+    ? siteDataRef.value
+    : siteDataRef;
+
+  const config = getVariantConfig(rawSite);
+  if (!config) return fallback;
+
+  const { variants = {}, activeVariant, fallbackVariant } = config;
+
+  const normalizedActive = typeof activeVariant === 'string' ? activeVariant.trim().toLowerCase() : '';
+  const normalizedFallback = typeof fallbackVariant === 'string' ? fallbackVariant.trim().toLowerCase() : '';
+
+  const variant =
+    variants[normalizedActive] ||
+    variants[normalizedFallback] ||
+    variants.default ||
+    null;
+
+  const label = pickLabel(variant, type) || pickLabel(variants.default, type);
+
+  return label || fallback;
+}

package/src/utils/formatNumber.js

@@ -0,0 +1,115 @@
+const DEFAULT_LOCALE = 'en-US';
+
+const formatterCache = new Map();
+
+function getFormatter(options) {
+  const normalizedOptions = Object.entries(options)
+    .filter(([, value]) => value !== undefined)
+    .sort(([a], [b]) => (a > b ? 1 : -1));
+  const key = JSON.stringify(normalizedOptions);
+  if (!formatterCache.has(key)) {
+    formatterCache.set(key, new Intl.NumberFormat(DEFAULT_LOCALE, Object.fromEntries(normalizedOptions)));
+  }
+  return formatterCache.get(key);
+}
+
+function coerceNumber(value) {
+  if (value === null || value === undefined) return 0;
+  if (typeof value === 'bigint') return Number(value);
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+}
+
+export function formatDecimal(value, {
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2,
+  compact = false,
+  useGrouping = true,
+  signDisplay,
+} = {}) {
+  const numeric = coerceNumber(value);
+  const formatter = getFormatter({
+    style: 'decimal',
+    notation: compact ? 'compact' : 'standard',
+    minimumFractionDigits,
+    maximumFractionDigits,
+    useGrouping,
+    signDisplay,
+  });
+  return formatter.format(numeric);
+}
+
+export function formatCurrency(value, {
+  currency = 'USD',
+  minimumFractionDigits = 2,
+  maximumFractionDigits = 2,
+  compact = false,
+  useGrouping = true,
+} = {}) {
+  const numeric = coerceNumber(value);
+  const formatter = getFormatter({
+    style: 'currency',
+    currency,
+    notation: compact ? 'compact' : 'standard',
+    minimumFractionDigits,
+    maximumFractionDigits,
+    useGrouping,
+  });
+  return formatter.format(numeric);
+}
+
+export function formatCompact(value, {
+  maximumFractionDigits = 1,
+  minimumFractionDigits,
+  useGrouping = true,
+} = {}) {
+  const numeric = coerceNumber(value);
+  const formatter = getFormatter({
+    style: 'decimal',
+    notation: 'compact',
+    minimumFractionDigits,
+    maximumFractionDigits,
+    useGrouping,
+  });
+  return formatter.format(numeric);
+}
+
+export function formatPercent(value, {
+  maximumFractionDigits = 1,
+  minimumFractionDigits = 0,
+  assumeFraction = false,
+  useGrouping = false,
+} = {}) {
+  const numericInput = coerceNumber(value);
+  const scaled = assumeFraction ? numericInput : numericInput / 100;
+  const formatter = getFormatter({
+    style: 'percent',
+    minimumFractionDigits,
+    maximumFractionDigits,
+    useGrouping,
+  });
+  return formatter.format(scaled);
+}
+
+export function formatTokenAmount(value, {
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2,
+  compact = false,
+} = {}) {
+  return formatDecimal(value, {
+    minimumFractionDigits,
+    maximumFractionDigits,
+    compact,
+  });
+}
+
+export function formatUsd(value, options = {}) {
+  return formatCurrency(value, { currency: 'USD', ...options });
+}
+
+export function formatWithFallback(value, fallback = '0', formatter = formatDecimal) {
+  if (value === null || value === undefined) return fallback;
+  const numeric = coerceNumber(value);
+  if (!Number.isFinite(numeric)) return fallback;
+  return formatter(numeric);
+}

package/src/utils/imageSources.js

@@ -0,0 +1,179 @@
+import { computed, ref, watch, unref } from 'vue';
+import { resolveAsset } from './assetResolver.js';
+
+const DEFAULT_FORMATS = ['avif', 'webp'];
+
+function normalizeBasePath(relativePath = '') {
+  if (!relativePath || typeof relativePath !== 'string') {
+    return '';
+  }
+  const trimmed = relativePath.replace(/^\/+/, '');
+  return trimmed.replace(/\.[^/.]+$/, '');
+}
+
+function normalizeWidths(widths) {
+  const unique = new Set();
+  (Array.isArray(widths) ? widths : [])
+    .map((value) => Number.parseInt(value, 10))
+    .filter((value) => Number.isFinite(value) && value > 0)
+    .forEach((value) => unique.add(value));
+  return Array.from(unique).sort((a, b) => a - b);
+}
+
+function buildSrcSet(basePath, widthList, format) {
+  const entries = [];
+  for (const width of widthList) {
+    const candidate = `${basePath}-${width}.${format}`;
+    const url = resolveAsset(candidate);
+    if (url) {
+      entries.push(`${url} ${width}w`);
+    }
+  }
+
+  // Fallback to a non-suffixed asset when available.
+  if (entries.length === 0) {
+    const fallbackUrl = resolveAsset(`${basePath}.${format}`);
+    if (fallbackUrl) {
+      entries.push(`${fallbackUrl} 1x`);
+    }
+  }
+
+  return entries.join(', ');
+}
+
+function resolveBestFallback(basePath, widthList, format) {
+  const reversed = [...widthList].sort((a, b) => b - a);
+  for (const width of reversed) {
+    const candidate = resolveAsset(`${basePath}-${width}.${format}`);
+    if (candidate) {
+      return candidate;
+    }
+  }
+  return resolveAsset(`${basePath}.${format}`) || '';
+}
+
+/**
+ * Build responsive image sources for site media.
+ * @param {string} relativePath - Path relative to site asset directory (e.g. "img/promo").
+ * @param {object} [options]
+ * @param {number[]} [options.widths] - Explicit width breakpoints.
+ * @param {string} [options.fallbackFormat='jpg'] - Format for the <img> fallback.
+ * @param {string[]} [options.formats] - Additional <source> formats (default: avif + webp).
+ * @returns {{
+ *   sources: import('vue').ComputedRef<Array<{ type: string, srcset: string }>>,
+ *   fallbackSrc: import('vue').ComputedRef<string>,
+ *   fallbackSrcSet: import('vue').ComputedRef<string>,
+ *   placeholderSrc: import('vue').ComputedRef<string>
+ * }}
+ */
+export function useResponsiveImage(relativePath, options = {}) {
+  const basePath = computed(() => normalizeBasePath(unref(relativePath)));
+  const widthInput = options.widths;
+  const widths = computed(() => normalizeWidths(unref(widthInput)));
+  const fallbackFormat = computed(() => unref(options.fallbackFormat) || 'jpg');
+  const formats = computed(() => {
+    const provided = unref(options.formats);
+    return Array.isArray(provided) && provided.length ? provided : DEFAULT_FORMATS;
+  });
+  const errorHandled = ref(false);
+
+  const sources = computed(() => {
+    const base = basePath.value;
+    if (!base) return [];
+
+    return formats.value
+      .map((format) => {
+        const srcset = buildSrcSet(base, widths.value, format);
+        if (!srcset) return null;
+        return {
+          type: `image/${format}`,
+          srcset,
+        };
+      })
+      .filter(Boolean);
+  });
+
+  const fallbackSrc = computed(() => {
+    const base = basePath.value;
+    if (!base) return '';
+    return resolveBestFallback(base, widths.value, fallbackFormat.value);
+  });
+
+  const fallbackSrcSet = computed(() => {
+    const base = basePath.value;
+    if (!base) return '';
+    return buildSrcSet(base, widths.value, fallbackFormat.value);
+  });
+
+  const placeholderSrc = computed(() => {
+    const base = basePath.value;
+    if (!base) return '';
+    const widthList = widths.value;
+    if (widthList.length === 0) {
+      return resolveAsset(`${base}.${fallbackFormat.value}`) || '';
+    }
+    const smallestWidth = widthList[0];
+    return (
+      resolveAsset(`${base}-${smallestWidth}.${fallbackFormat.value}`) ||
+      resolveAsset(`${base}-${smallestWidth}.webp`) ||
+      resolveAsset(`${base}.${fallbackFormat.value}`) ||
+      ''
+    );
+  });
+
+  watch([fallbackSrc, fallbackSrcSet], () => {
+    errorHandled.value = false;
+  });
+
+  const handleError = (event) => {
+    if (errorHandled.value) return;
+    const target = event?.target;
+    if (!target || target.tagName !== 'IMG') return;
+    const fallback = fallbackSrc.value;
+    if (!fallback) return;
+    errorHandled.value = true;
+
+    const picture = target.closest('picture');
+    if (picture) {
+      picture.querySelectorAll('source').forEach((source) => {
+        source.removeAttribute('srcset');
+        source.removeAttribute('sizes');
+      });
+    }
+
+    target.removeAttribute('srcset');
+    target.removeAttribute('sizes');
+    target.onerror = null;
+
+    let absoluteFallback = fallback;
+    if (typeof window !== 'undefined') {
+      try {
+        absoluteFallback = new URL(fallback, window.location.href).href;
+      } catch (error) {
+        // Relative URL fallback; ignore.
+      }
+    }
+
+    if (target.src === absoluteFallback) {
+      target.removeAttribute('src');
+      const schedule =
+        typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function'
+          ? window.requestAnimationFrame.bind(window)
+          : (fn) => setTimeout(fn, 0);
+      schedule(() => {
+        target.src = fallback;
+      });
+    } else {
+      target.src = fallback;
+    }
+  };
+
+  return {
+    sources,
+    fallbackSrc,
+    fallbackSrcSet,
+    placeholderSrc,
+    fallbackFormat,
+    handleError,
+  };
+}

package/src/utils/inflateFlatConfig.js

@@ -0,0 +1,30 @@
+const ARRAY_INDEX_RE = /\[(\d+)]/g;
+
+function setNestedPath(root, dotPath, value) {
+  const segments = dotPath.replace(ARRAY_INDEX_RE, '.$1').split('.');
+  let current = root;
+
+  for (let i = 0; i < segments.length - 1; i++) {
+    const seg = segments[i];
+    const nextSeg = segments[i + 1];
+    const nextIsIndex = /^\d+$/.test(nextSeg);
+
+    if (current[seg] === undefined || current[seg] === null) {
+      current[seg] = nextIsIndex ? [] : {};
+    }
+    current = current[seg];
+  }
+
+  current[segments[segments.length - 1]] = value;
+}
+
+export function inflateFlatConfig(flat) {
+  if (!flat || typeof flat !== 'object') return flat;
+
+  const result = {};
+  for (const [key, value] of Object.entries(flat)) {
+    if (key.startsWith('$')) continue;
+    setNestedPath(result, key, value);
+  }
+  return result;
+}

package/src/utils/loadConfig.js

@@ -0,0 +1,319 @@
+import { inflateFlatConfig } from './inflateFlatConfig.js';
+import { unwrapDefault } from './unwrapDefault.js';
+
+function normalizeLocaleInput(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (Array.isArray(value)) {
+        for (const entry of value) {
+            const candidate = normalizeLocaleInput(entry);
+            if (candidate) {
+                return candidate;
+            }
+        }
+        return undefined;
+    }
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed.length ? trimmed : undefined;
+}
+
+export function cloneConfig(value) {
+    if (Array.isArray(value)) {
+        return value.map(cloneConfig);
+    }
+    if (value && typeof value === 'object') {
+        return Object.entries(value).reduce((acc, [key, val]) => {
+            acc[key] = cloneConfig(val);
+            return acc;
+        }, {});
+    }
+    return value;
+}
+
+export function mergeConfigTrees(target, source, options = {}) {
+    const { cloneTarget = false, skipEmpty = true } = options;
+
+    const result =
+        cloneTarget && target && typeof target === 'object'
+            ? cloneConfig(target)
+            : Array.isArray(target)
+                ? [...(target || [])]
+                : target && typeof target === 'object'
+                    ? { ...(target || {}) }
+                    : target;
+
+    const isEmptyish = (value) => {
+        if (!skipEmpty) return false;
+        if (value === undefined || value === null) return true;
+        if (typeof value === 'string' && value.trim() === '') return true;
+        if (Array.isArray(value) && value.length === 0) return true;
+        if (typeof value === 'object' && Object.keys(value).length === 0) return true;
+        return false;
+    };
+
+    if (Array.isArray(result) && Array.isArray(source)) {
+        const maxLength = Math.max(result.length, source.length);
+        const output = new Array(maxLength);
+
+        for (let i = 0; i < maxLength; i++) {
+            const baseVal = result[i];
+            const srcVal = source[i];
+
+            if (srcVal === undefined || isEmptyish(srcVal)) {
+                output[i] = cloneConfig(baseVal);
+                continue;
+            }
+
+            if (baseVal === undefined) {
+                output[i] = cloneConfig(srcVal);
+                continue;
+            }
+
+            if (Array.isArray(baseVal) && Array.isArray(srcVal)) {
+                output[i] = mergeConfigTrees(baseVal, srcVal, { cloneTarget: false, skipEmpty });
+                continue;
+            }
+
+            if (
+                baseVal &&
+                srcVal &&
+                typeof baseVal === 'object' &&
+                typeof srcVal === 'object' &&
+                !Array.isArray(baseVal) &&
+                !Array.isArray(srcVal)
+            ) {
+                output[i] = mergeConfigTrees(baseVal, srcVal, { cloneTarget: false, skipEmpty });
+                continue;
+            }
+
+            output[i] = cloneConfig(srcVal);
+        }
+
+        return output;
+    }
+
+    if (Array.isArray(source) && !Array.isArray(result)) {
+        return skipEmpty && isEmptyish(source) ? result : [...source];
+    }
+
+    if (source && typeof source === 'object') {
+        const base = result && typeof result === 'object' && !Array.isArray(result) ? result : {};
+        const output = cloneTarget ? cloneConfig(base) : { ...base };
+
+        for (const [key, value] of Object.entries(source)) {
+            if (isEmptyish(value)) continue;
+
+            const existing = output[key];
+            if (Array.isArray(existing) && Array.isArray(value)) {
+                output[key] = mergeConfigTrees(existing, value, { cloneTarget: false, skipEmpty });
+            } else if (
+                existing &&
+                value &&
+                typeof existing === 'object' &&
+                typeof value === 'object' &&
+                !Array.isArray(existing) &&
+                !Array.isArray(value)
+            ) {
+                output[key] = mergeConfigTrees(existing, value, { cloneTarget: false, skipEmpty });
+            } else {
+                output[key] = Array.isArray(value) ? [...value] : cloneConfig(value);
+            }
+        }
+
+        return output;
+    }
+
+    return source;
+}
+
+export function createConfigLoader(allModules) {
+    const toPlain = unwrapDefault;
+
+    // Discover which locale directories exist in the content folder by
+    // extracting unique locale codes from the allModules glob keys.
+    function discoverAvailableLocales() {
+        const locales = new Set();
+        const re = /\/content\/([a-z]{2,3}(?:-[a-zA-Z]{2,4})?)\//;
+        for (const key of Object.keys(allModules)) {
+            const match = key.match(re);
+            if (match) locales.add(match[1].toLowerCase());
+        }
+        return Array.from(locales).sort();
+    }
+
+    const availableLocales = discoverAvailableLocales();
+
+    // Find the content root (path ending in `/content/`) and resolve the base
+    // locale from content.config.json.
+    function findContentRoot() {
+        const keys = Object.keys(allModules);
+        const configKey = keys.find((key) => key.endsWith('/content/content.config.json'));
+        if (configKey) {
+            return configKey.slice(0, configKey.length - 'content.config.json'.length);
+        }
+        return null;
+    }
+
+    async function resolveBaseLocale(contentRoot) {
+        const configLoader = allModules[`${contentRoot}content.config.json`];
+        if (!configLoader) return 'en';
+        const config = toPlain(await configLoader());
+        return (config && config.baseLocale) || 'en';
+    }
+
+    // Assemble a config from a locale directory: inflates flat-format files
+    // (site.json, shared.json, pages/*.json) and returns { site, shared, pages }.
+    // When require is true, returns null if site.json is missing (used for
+    // base config). When false, assembles whatever files exist (used for
+    // locale overrides that may only contain partial translations).
+    async function assembleSplitConfig(localePrefix, { require: requireSite = false } = {}) {
+        const siteLoader = allModules[`${localePrefix}site.json`];
+        if (!siteLoader && requireSite) return null;
+
+        const sharedLoader = allModules[`${localePrefix}shared.json`];
+        const [rawSite, rawShared] = await Promise.all([
+            siteLoader ? siteLoader().then(toPlain) : Promise.resolve({}),
+            sharedLoader ? sharedLoader().then(toPlain) : Promise.resolve({}),
+        ]);
+        const siteData = inflateFlatConfig(rawSite);
+        const sharedData = inflateFlatConfig(rawShared);
+
+        const pagePrefix = `${localePrefix}pages/`;
+        const pages = {};
+        const pageLoads = [];
+        for (const [path, loader] of Object.entries(allModules)) {
+            if (path.startsWith(pagePrefix) && path.endsWith('.json')) {
+                const pageId = path.slice(pagePrefix.length, -5);
+                pageLoads.push(
+                    loader().then((mod) => { pages[pageId] = inflateFlatConfig(toPlain(mod)); })
+                );
+            }
+        }
+        await Promise.all(pageLoads);
+
+        // Return null if no files were found at all for this locale
+        if (!siteLoader && !sharedLoader && Object.keys(pages).length === 0) return null;
+
+        return { site: siteData, shared: sharedData, pages };
+    }
+
+    async function assembleBaseConfig() {
+        const contentRoot = findContentRoot();
+        if (!contentRoot) return null;
+
+        const baseLocale = await resolveBaseLocale(contentRoot);
+        const basePrefix = `${contentRoot}${baseLocale}/`;
+        const config = await assembleSplitConfig(basePrefix, { require: true });
+        if (!config) return null;
+
+        return { ...config, _contentRoot: contentRoot, _baseLocale: baseLocale };
+    }
+
+    async function loadConfigData(options) {
+        let explicitLocale;
+
+        if (typeof options === 'string' || Array.isArray(options)) {
+            explicitLocale = normalizeLocaleInput(options);
+        } else if (options && typeof options === 'object') {
+            explicitLocale = normalizeLocaleInput(options.locale);
+        }
+
+        let locale = explicitLocale;
+
+        if (!locale && typeof localStorage !== 'undefined') {
+            try {
+                locale = normalizeLocaleInput(localStorage.getItem('locale')) || undefined;
+            } catch {
+                locale = undefined;
+            }
+        }
+
+        const normalizedLocale = typeof locale === 'string' ? locale.toLowerCase() : undefined;
+
+        const getBaseConfig = async () => {
+            const assembled = await assembleBaseConfig();
+            if (assembled) return assembled;
+            throw new Error('Config file not found');
+        };
+
+        if (normalizedLocale === undefined) {
+            const config = await getBaseConfig();
+            delete config._contentRoot;
+            delete config._baseLocale;
+            return config;
+        }
+
+        const baseConfig = await getBaseConfig();
+
+        let mergedConfig = baseConfig;
+        const contentRoot = baseConfig._contentRoot;
+        const baseLocale = baseConfig._baseLocale;
+
+        // Only load locale overrides if the requested locale differs from the base
+        if (contentRoot && normalizedLocale !== baseLocale) {
+            const localePrefix = `${contentRoot}${normalizedLocale}/`;
+            const localeConfig = await assembleSplitConfig(localePrefix);
+            if (localeConfig) {
+                mergedConfig = mergeConfigTrees(baseConfig, localeConfig, { cloneTarget: true, skipEmpty: true });
+            }
+        }
+        if (mergedConfig && mergedConfig.pages && typeof mergedConfig.pages === 'object') {
+            for (const page of Object.values(mergedConfig.pages)) {
+                if (!page || typeof page !== 'object') continue;
+                if (!Array.isArray(page.components)) {
+                    page.components = [];
+                    continue;
+                }
+                page.components = page.components.map((entry) => {
+                    if (!entry || typeof entry !== 'object') {
+                        return entry;
+                    }
+                    const normalized = { ...entry };
+                    if (typeof normalized.enabled !== 'boolean') {
+                        normalized.enabled = true;
+                    }
+                    if (normalized.name && typeof normalized.name === 'string') {
+                        normalized.name = normalized.name.trim();
+                    }
+                    if (normalized.source && typeof normalized.source === 'string') {
+                        normalized.source = normalized.source.trim();
+                    }
+                    if (normalized.configKey && typeof normalized.configKey === 'string') {
+                        normalized.configKey = normalized.configKey.trim();
+                    }
+                    return normalized;
+                });
+            }
+        }
+        delete mergedConfig._contentRoot;
+        delete mergedConfig._baseLocale;
+        return mergedConfig;
+    }
+
+    return { loadConfigData, mergeConfigTrees, cloneConfig, availableLocales };
+}
+
+// ---- Runtime singleton ----
+// Components/composables import `loadConfigData` directly. The Vite plugin's
+// generated entry calls `setConfigLoader()` with the configured instance at
+// startup.
+
+let _loadConfigData = async () => {
+  throw new Error('[@koehler8/cms] loadConfigData() called before config loader was initialized');
+};
+
+let _availableLocales = [];
+
+export function setConfigLoader(instance) {
+  if (!instance) return;
+  _loadConfigData = instance.loadConfigData;
+  _availableLocales = instance.availableLocales || [];
+}
+
+export { _availableLocales as availableLocales };
+
+export const loadConfigData = (...args) => _loadConfigData(...args);