platform-types 1.10.674 → 1.10.676

package/dist/storefrontDesignRegistry.js

@@ -0,0 +1,122 @@
+const DESIGN_METADATA = {
+    scope: 'storefront',
+    allowedLayers: ['GLOBAL', 'WEB', 'WEB#store'],
+    audience: 'public',
+    lifecycle: 'release-owned',
+    storage: { policy: 'GLOBALS', override: 'design.settings' },
+    ownership: 'storefront-design',
+};
+const color = (key, defaultValue, label, help) => ({
+    ...DESIGN_METADATA,
+    key,
+    defaultValue,
+    valueType: 'string',
+    valueSchema: { type: 'string', format: 'hex-color', maxLength: 7 },
+    maxLength: 7,
+    description: help,
+    literal: { kind: 'text', label, help },
+});
+const choice = (key, allowedValues, defaultValue, label, help) => ({
+    ...DESIGN_METADATA,
+    key,
+    defaultValue,
+    valueType: 'string',
+    allowedValues,
+    valueSchema: { type: 'string', enum: allowedValues },
+    description: help,
+    literal: { kind: 'text', label, help },
+});
+const toggle = (key, defaultValue, label, help) => ({
+    ...DESIGN_METADATA,
+    key,
+    defaultValue,
+    valueType: 'boolean',
+    valueSchema: { type: 'boolean' },
+    description: help,
+    literal: { kind: 'text', label, help },
+});
+export const STOREFRONT_DESIGN_SETTINGS = {
+    primaryColor: color('primaryColor', '#0066CC', 'Color principal', 'Color solicitado para los elementos principales de la tienda.'),
+    accentColor: color('accentColor', '#0066CC', 'Color de acento', 'Color solicitado para los elementos destacados de la tienda.'),
+    backgroundColor: color('backgroundColor', '#FFFFFF', 'Color de fondo', 'Color solicitado para el fondo de la tienda.'),
+    headerColor: color('headerColor', '#0066CC', 'Color del encabezado', 'Color solicitado para el encabezado de la tienda.'),
+    footerColor: color('footerColor', '#212529', 'Color del pie', 'Color solicitado para el pie de la tienda.'),
+    headingFont: choice('headingFont', ['ubuntu', 'noto-sans', 'noto-serif'], 'ubuntu', 'Tipografía de títulos', 'Familia tipográfica de los títulos.'),
+    bodyFont: choice('bodyFont', ['ubuntu', 'noto-sans', 'noto-serif'], 'ubuntu', 'Tipografía de texto', 'Familia tipográfica del cuerpo de texto.'),
+    textSize: choice('textSize', ['compact', 'standard', 'large'], 'standard', 'Tamaño de texto', 'Escala de texto de la tienda.'),
+    cardImageRatio: choice('cardImageRatio', ['square', 'portrait'], 'square', 'Proporción de imágenes', 'Proporción de las imágenes en las tarjetas de productos.'),
+    cardDensity: choice('cardDensity', ['compact', 'spacious'], 'spacious', 'Espaciado de tarjetas', 'Espaciado entre los elementos de las tarjetas.'),
+    showBrand: toggle('showBrand', false, 'Mostrar marca', 'Mostrar la marca en las tarjetas de productos.'),
+    showSku: toggle('showSku', false, 'Mostrar SKU', 'Mostrar el código SKU en las tarjetas de productos.'),
+};
+export const isStorefrontDesignSettingKey = (key) => Object.hasOwn(STOREFRONT_DESIGN_SETTINGS, key);
+export const validateStorefrontSettingValue = (schema, value) => {
+    if (schema.type === 'boolean')
+        return typeof value === 'boolean';
+    if (typeof value !== 'string' || !value.isWellFormed())
+        return false;
+    if (schema.maxLength !== undefined && Array.from(value).length > schema.maxLength)
+        return false;
+    if (schema.format === 'hex-color' && !/^#[0-9a-fA-F]{6}$/.test(value))
+        return false;
+    return schema.enum === undefined || schema.enum.includes(value);
+};
+export const validateStorefrontDesignSetting = (key, value) => isStorefrontDesignSettingKey(key) &&
+    validateStorefrontSettingValue(STOREFRONT_DESIGN_SETTINGS[key].valueSchema, value);
+export const STOREFRONT_DESIGN_LITERAL_MAX_CODE_POINTS = 4096;
+export const resolveStorefrontDesignSettingsLayers = (layers, overrides = {}) => {
+    const values = {};
+    const provenance = {};
+    const ordered = ['GLOBAL', 'WEB', 'WEB#store'].flatMap((name) => layers.filter(({ layer }) => layer === name));
+    for (const key of Object.keys(STOREFRONT_DESIGN_SETTINGS)) {
+        Object.assign(values, { [key]: STOREFRONT_DESIGN_SETTINGS[key].defaultValue });
+        provenance[key] = 'default';
+        for (const { layer, values: inherited } of ordered) {
+            if (!Object.hasOwn(inherited, key) || !validateStorefrontDesignSetting(key, inherited[key]))
+                continue;
+            Object.assign(values, { [key]: inherited[key] });
+            provenance[key] = layer;
+        }
+        if (Object.hasOwn(overrides, key) && validateStorefrontDesignSetting(key, overrides[key])) {
+            Object.assign(values, { [key]: overrides[key] });
+            provenance[key] = 'design';
+        }
+    }
+    return { values, provenance };
+};
+export const resolveStorefrontDesignSettings = (overrides = {}, layers = []) => resolveStorefrontDesignSettingsLayers(layers, overrides).values;
+const LIVE_METADATA = {
+    allowedLayers: ['GLOBAL', 'WEB', 'WEB#store'],
+    audience: 'public',
+    lifecycle: 'live',
+    ownership: 'storefront-operation',
+    excludedFromSnapshot: true,
+};
+export const STOREFRONT_DESIGN_REGISTRY = {
+    settings: STOREFRONT_DESIGN_SETTINGS,
+    content: {
+        schema: 'StorefrontDesignV1',
+        lifecycle: 'release-owned',
+        ownership: 'storefront-design',
+        audience: 'public',
+        storage: { document: 'storefront-design' },
+    },
+    literalOverrides: {
+        catalog: 'WEB_LITERAL_DEFAULTS',
+        allowedLayers: DESIGN_METADATA.allowedLayers,
+        lifecycle: 'release-owned',
+        ownership: 'storefront-design',
+        audience: 'public',
+        storage: { source: 'LITERALS', override: 'design.literalOverrides' },
+    },
+    live: {
+        showIvaAlert: { ...LIVE_METADATA, storage: { source: 'featureFlags' } },
+        showCurrencySelector: { ...LIVE_METADATA, storage: { source: 'featureFlags' } },
+        enableSaveForLater: { ...LIVE_METADATA, storage: { source: 'featureFlags' } },
+        prices: { ...LIVE_METADATA, storage: { source: 'catalogue' } },
+        stock: { ...LIVE_METADATA, storage: { source: 'catalogue' } },
+        checkout: { ...LIVE_METADATA, storage: { source: 'store' } },
+        catalogue: { ...LIVE_METADATA, storage: { source: 'catalogue' } },
+        availability: { ...LIVE_METADATA, storage: { source: 'store' } },
+    },
+};

package/dist/storefrontTheme.d.ts

@@ -0,0 +1,54 @@
+import { type StorefrontDesignSettings } from './storefrontDesignRegistry.ts';
+type StorefrontThemeMode = 'light' | 'dark';
+type StorefrontThemeSurfaceId = 'page' | 'header' | 'footer';
+export interface StorefrontThemeSurface {
+    background: string;
+    text: string;
+    secondaryText: string;
+    link: string;
+    focus: string;
+    border: string;
+    button: {
+        background: string;
+        text: string;
+        hover: string;
+        hoverText: string;
+    };
+    disabled: {
+        background: string;
+        text: string;
+    };
+}
+export interface StorefrontThemeWarning {
+    mode: StorefrontThemeMode;
+    surface: StorefrontThemeSurfaceId;
+    role: 'link' | 'button' | 'focus';
+    requested: string;
+    effective: string;
+}
+export interface StorefrontResolvedTheme {
+    requested: StorefrontDesignSettings;
+    light: Record<StorefrontThemeSurfaceId, StorefrontThemeSurface>;
+    dark: Record<StorefrontThemeSurfaceId, StorefrontThemeSurface>;
+    typography: {
+        headingFont: StorefrontDesignSettings['headingFont'];
+        bodyFont: StorefrontDesignSettings['bodyFont'];
+        fontSize: number;
+        body1: number;
+        body2: number;
+        h1: number;
+        h2: number;
+        h3: number;
+        h4: number;
+        h5: number;
+        h6: number;
+    };
+    shape: {
+        borderRadius: number;
+    };
+    spacing: number;
+    warnings: StorefrontThemeWarning[];
+}
+export declare const storefrontContrastRatio: (foreground: string, background: string) => number;
+export declare const resolveStorefrontTheme: (overrides?: Partial<StorefrontDesignSettings>) => StorefrontResolvedTheme;
+export {};

package/dist/storefrontTheme.js

@@ -0,0 +1,97 @@
+import { resolveStorefrontDesignSettings } from "./storefrontDesignRegistry.js";
+const channels = (color) => [
+    Number.parseInt(color.slice(1, 3), 16),
+    Number.parseInt(color.slice(3, 5), 16),
+    Number.parseInt(color.slice(5, 7), 16),
+];
+const hex = (rgb) => `#${rgb
+    .map((value) => Math.round(value).toString(16).padStart(2, '0'))
+    .join('')
+    .toUpperCase()}`;
+// MUI's RGB lighten/darken arithmetic; fixed hex output keeps tokens CSS-independent.
+const mix = (color, target, amount) => {
+    const destination = channels(target);
+    return hex(channels(color).map((value, index) => value + (destination[index] - value) * amount));
+};
+const luminance = (color) => {
+    const linear = channels(color).map((channel) => {
+        const value = channel / 255;
+        return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+    });
+    return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
+};
+export const storefrontContrastRatio = (foreground, background) => {
+    const a = luminance(foreground);
+    const b = luminance(background);
+    return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+};
+const readableText = (background) => storefrontContrastRatio('#000000', background) >= storefrontContrastRatio('#FFFFFF', background)
+    ? '#000000'
+    : '#FFFFFF';
+const ensureContrast = (color, background, minimum) => {
+    if (storefrontContrastRatio(color, background) >= minimum)
+        return color.toUpperCase();
+    const target = readableText(background);
+    for (let step = 1; step <= 100; step++) {
+        const candidate = mix(color, target, step / 100);
+        if (storefrontContrastRatio(candidate, background) >= minimum)
+            return candidate;
+    }
+    return target;
+};
+const surfaceTokens = (background, settings, mode, surface, warnings) => {
+    const adjusted = (role, requested, minimum) => {
+        const effective = ensureContrast(requested, background, minimum);
+        if (effective !== requested.toUpperCase())
+            warnings.push({ mode, surface, role, requested, effective });
+        return effective;
+    };
+    const text = readableText(background);
+    const button = adjusted('button', settings.primaryColor, 3);
+    const hover = ensureContrast(mix(button, readableText(background), 0.2), background, 3);
+    const disabledBackground = mix(background, text, 0.12);
+    return {
+        background,
+        text,
+        secondaryText: ensureContrast(mix(background, text, 0.6), background, 4.5),
+        link: adjusted('link', settings.primaryColor, 4.5),
+        focus: adjusted('focus', settings.accentColor, 3),
+        border: ensureContrast(mix(background, text, 0.3), background, 3),
+        button: { background: button, text: readableText(button), hover, hoverText: readableText(hover) },
+        disabled: { background: disabledBackground, text: readableText(disabledBackground) },
+    };
+};
+export const resolveStorefrontTheme = (overrides = {}) => {
+    const settings = resolveStorefrontDesignSettings(overrides);
+    const warnings = [];
+    const makeMode = (mode) => {
+        const background = (requested) => mode === 'light' ? requested.toUpperCase() : mix(requested, '#000000', 0.9);
+        return {
+            page: surfaceTokens(background(settings.backgroundColor), settings, mode, 'page', warnings),
+            header: surfaceTokens(background(settings.headerColor), settings, mode, 'header', warnings),
+            footer: surfaceTokens(background(settings.footerColor), settings, mode, 'footer', warnings),
+        };
+    };
+    const scale = { compact: 0.875, standard: 1, large: 1.125 }[settings.textSize];
+    return {
+        requested: settings,
+        light: makeMode('light'),
+        dark: makeMode('dark'),
+        typography: {
+            headingFont: settings.headingFont,
+            bodyFont: settings.bodyFont,
+            fontSize: 14 * scale,
+            body1: 16 * scale,
+            body2: 14 * scale,
+            h1: 96 * scale,
+            h2: 60 * scale,
+            h3: 48 * scale,
+            h4: 34 * scale,
+            h5: 24 * scale,
+            h6: 20 * scale,
+        },
+        shape: { borderRadius: 4 },
+        spacing: 8,
+        warnings,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "platform-types",
-	"version": "1.10.674",
+	"version": "1.10.676",
 	"description": "Shared wire and entity contracts for the platform.",
 	"type": "module",
 	"main": "dist/index.js",