@shoppexio/builder-runtime 0.1.0 → 0.1.2

package/dist/search-bar-settings.d.ts

@@ -0,0 +1,33 @@
+import type { BuilderSettings } from '@shoppex/builder-contracts';
+export declare const SEARCH_BAR_MAX_WIDTH: Record<string, string>;
+export type ResolvedSearchBarSettings = {
+    placeholder: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderRadiusPx?: number;
+    maxWidth: string;
+    showShortcut: boolean;
+    showInHero: boolean;
+};
+export declare function getNavigationHeaderSettings(settings: BuilderSettings): Record<string, unknown>;
+export declare function readSetting(sources: Array<Record<string, unknown> | undefined>, path: string): unknown;
+export declare function isValidHexColor(value: unknown): value is string;
+export declare function normalizeHexColor(value: string): string;
+export declare function resolveSearchColor(value: unknown): string | undefined;
+export declare function resolveSearchBorderRadius(value: unknown): number | undefined;
+export declare function resolveSearchMaxWidth(value: unknown, fallback?: string): string;
+export declare function resolveSearchBoolean(value: unknown, fallback: boolean): boolean;
+export declare function resolveSearchPlaceholder(value: unknown, fallback: string): string;
+export declare function resolveSearchBarSettings(input: {
+    variant: 'hero' | 'navigation';
+    heroValues: Record<string, unknown>;
+    headerSettings: Record<string, unknown>;
+}): ResolvedSearchBarSettings;
+export declare function buildSearchShellStyle(settings: Pick<ResolvedSearchBarSettings, 'backgroundColor' | 'borderColor' | 'borderRadiusPx'>): {
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderStyle?: 'solid';
+    borderRadius?: string;
+} | undefined;
+//# sourceMappingURL=search-bar-settings.d.ts.map

package/dist/search-bar-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar-settings.d.ts","sourceRoot":"","sources":["../src/search-bar-settings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKvD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,eAAe,GACxB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAKzB;AAED,wBAAgB,WAAW,CACzB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,EACnD,IAAI,EAAE,MAAM,GACX,OAAO,CAUT;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAG/D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGvD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAGrE;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAG5E;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,SAAO,GAAG,MAAM,CAK7E;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,OAAO,CAG/E;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GACf,MAAM,CAER;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE;IAC9C,OAAO,EAAE,MAAM,GAAG,YAAY,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC,GAAG,yBAAyB,CAwD5B;AAED,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,IAAI,CACZ,yBAAyB,EACzB,iBAAiB,GAAG,aAAa,GAAG,gBAAgB,CACrD,GACA;IACD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,SAAS,CAoBZ"}

package/dist/search-bar-settings.js

@@ -0,0 +1,99 @@
+export const SEARCH_BAR_MAX_WIDTH = {
+    sm: '20rem',
+    md: '28rem',
+    lg: '36rem',
+    full: '100%',
+};
+export function getNavigationHeaderSettings(settings) {
+    const block = settings.theme.layout.navigation?.blocks.find((candidate) => candidate.type === 'header');
+    return block?.settings ?? {};
+}
+export function readSetting(sources, path) {
+    for (const source of sources) {
+        if (!source)
+            continue;
+        if (!Object.prototype.hasOwnProperty.call(source, path))
+            continue;
+        const value = source[path];
+        if (value !== undefined && value !== null && value !== '') {
+            return value;
+        }
+    }
+    return undefined;
+}
+export function isValidHexColor(value) {
+    if (typeof value !== 'string' || !value.trim())
+        return false;
+    return /^#?[a-f\d]{3}(?:[a-f\d]{3})?(?:[a-f\d]{2})?$/i.test(value.trim());
+}
+export function normalizeHexColor(value) {
+    const trimmed = value.trim();
+    return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+}
+export function resolveSearchColor(value) {
+    if (!isValidHexColor(value))
+        return undefined;
+    return normalizeHexColor(value);
+}
+export function resolveSearchBorderRadius(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return undefined;
+    return Math.max(0, Math.round(value));
+}
+export function resolveSearchMaxWidth(value, fallback = 'md') {
+    if (typeof value === 'string' && value in SEARCH_BAR_MAX_WIDTH) {
+        return SEARCH_BAR_MAX_WIDTH[value];
+    }
+    return SEARCH_BAR_MAX_WIDTH[fallback] ?? SEARCH_BAR_MAX_WIDTH.md;
+}
+export function resolveSearchBoolean(value, fallback) {
+    if (typeof value === 'boolean')
+        return value;
+    return fallback;
+}
+export function resolveSearchPlaceholder(value, fallback) {
+    return typeof value === 'string' && value.trim() ? value : fallback;
+}
+export function resolveSearchBarSettings(input) {
+    const navSources = [input.headerSettings];
+    const heroSources = [input.heroValues, input.headerSettings];
+    if (input.variant === 'hero') {
+        return {
+            placeholder: resolveSearchPlaceholder(readSetting(heroSources, 'hero.search.placeholder') ??
+                readSetting(navSources, 'navigation.search.placeholder'), 'Search products…'),
+            backgroundColor: resolveSearchColor(readSetting(heroSources, 'hero.search.background') ??
+                readSetting(navSources, 'navigation.search.background')),
+            borderColor: resolveSearchColor(readSetting(heroSources, 'hero.search.borderColor') ??
+                readSetting(navSources, 'navigation.search.borderColor')),
+            borderRadiusPx: resolveSearchBorderRadius(readSetting(heroSources, 'hero.search.borderRadius') ??
+                readSetting(navSources, 'navigation.search.borderRadius')),
+            maxWidth: resolveSearchMaxWidth(readSetting(heroSources, 'hero.search.maxWidth'), 'md'),
+            showShortcut: resolveSearchBoolean(readSetting(heroSources, 'hero.search.showShortcut'), true),
+            showInHero: resolveSearchBoolean(readSetting(heroSources, 'hero.search.show'), true),
+        };
+    }
+    return {
+        placeholder: resolveSearchPlaceholder(readSetting(navSources, 'navigation.search.placeholder'), 'Search products…'),
+        backgroundColor: resolveSearchColor(readSetting(navSources, 'navigation.search.background')),
+        borderColor: resolveSearchColor(readSetting(navSources, 'navigation.search.borderColor')),
+        borderRadiusPx: resolveSearchBorderRadius(readSetting(navSources, 'navigation.search.borderRadius')),
+        maxWidth: SEARCH_BAR_MAX_WIDTH.md,
+        showShortcut: true,
+        showInHero: true,
+    };
+}
+export function buildSearchShellStyle(settings) {
+    const style = {};
+    if (settings.backgroundColor) {
+        style.backgroundColor = settings.backgroundColor;
+    }
+    if (settings.borderColor) {
+        style.borderColor = settings.borderColor;
+        style.borderWidth = '1px';
+        style.borderStyle = 'solid';
+    }
+    if (settings.borderRadiusPx !== undefined) {
+        style.borderRadius = `${settings.borderRadiusPx}px`;
+    }
+    return Object.keys(style).length > 0 ? style : undefined;
+}

package/dist/standard-product-blocks.d.ts

@@ -0,0 +1,48 @@
+import type { BlockInstance } from '@shoppex/builder-contracts';
+import type { ReactNode } from 'react';
+import { getProductPageBlockAttributes } from './product-page.js';
+import { type StandardBuyBoxLabels, type StandardDetailsLabels, type StandardProductTabSpec } from './standard-product-page.js';
+import { type BuilderBlockRegistry } from './react.js';
+export { STANDARD_PRODUCT_BLOCK_TYPES, STANDARD_PRODUCT_PRIMARY_BLOCK_TYPES, STANDARD_PRODUCT_SECONDARY_BLOCK_TYPES, splitStandardProductPageBlocks, buildStandardProductInfoTabs, resolveStandardBuyBoxLabels, resolveStandardDetailsLabels, resolveStandardRelatedProductsTitle, resolveScopedBlockSettingText, } from './standard-product-page.js';
+export type { StandardBuyBoxLabels, StandardDetailsLabels, StandardProductTabSpec, StandardProductBlockType, StandardProductSettingScope, } from './standard-product-page.js';
+type StandardProductBlockAttrs = ReturnType<typeof getProductPageBlockAttributes>;
+export type StandardProductBlockRegistrySlots = {
+    renderGallery: (input: {
+        block: BlockInstance;
+        attrs: StandardProductBlockAttrs;
+    }) => ReactNode;
+    renderBuyBox: (input: {
+        block: BlockInstance;
+        attrs: StandardProductBlockAttrs;
+        labels: StandardBuyBoxLabels;
+    }) => ReactNode;
+    renderDetails: (input: {
+        block: BlockInstance;
+        attrs: StandardProductBlockAttrs;
+        labels: StandardDetailsLabels;
+        tabs: StandardProductTabSpec[];
+    }) => ReactNode;
+    renderRelatedProducts: (input: {
+        block: BlockInstance;
+        attrs: StandardProductBlockAttrs;
+        title: string | null;
+    }) => ReactNode | null;
+};
+export type StandardProductBlockRegistryOptions = {
+    useScopedKeys?: boolean;
+    includeReviewsTab?: boolean;
+    useShopReviewTabLabel?: boolean;
+};
+export type StandardProductBlockRegistryData = {
+    filteredDescription: string;
+    faqCount: number;
+    reviewCount: number;
+    reviewSource?: 'shop' | 'product';
+    relatedProductsCount: number;
+};
+export declare function createStandardProductBlockRegistry(input: {
+    slots: StandardProductBlockRegistrySlots;
+    data: StandardProductBlockRegistryData;
+    options?: StandardProductBlockRegistryOptions;
+}): BuilderBlockRegistry<null>;
+//# sourceMappingURL=standard-product-blocks.d.ts.map

package/dist/standard-product-blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard-product-blocks.d.ts","sourceRoot":"","sources":["../src/standard-product-blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAKL,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC5B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD,OAAO,EACL,4BAA4B,EAC5B,oCAAoC,EACpC,sCAAsC,EACtC,8BAA8B,EAC9B,4BAA4B,EAC5B,2BAA2B,EAC3B,4BAA4B,EAC5B,mCAAmC,EACnC,6BAA6B,GAC9B,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,EACxB,2BAA2B,GAC5B,MAAM,4BAA4B,CAAC;AAEpC,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AAElF,MAAM,MAAM,iCAAiC,GAAG;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE;QACrB,KAAK,EAAE,aAAa,CAAC;QACrB,KAAK,EAAE,yBAAyB,CAAC;KAClC,KAAK,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE;QACpB,KAAK,EAAE,aAAa,CAAC;QACrB,KAAK,EAAE,yBAAyB,CAAC;QACjC,MAAM,EAAE,oBAAoB,CAAC;KAC9B,KAAK,SAAS,CAAC;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE;QACrB,KAAK,EAAE,aAAa,CAAC;QACrB,KAAK,EAAE,yBAAyB,CAAC;QACjC,MAAM,EAAE,qBAAqB,CAAC;QAC9B,IAAI,EAAE,sBAAsB,EAAE,CAAC;KAChC,KAAK,SAAS,CAAC;IAChB,qBAAqB,EAAE,CAAC,KAAK,EAAE;QAC7B,KAAK,EAAE,aAAa,CAAC;QACrB,KAAK,EAAE,yBAAyB,CAAC;QACjC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,KAAK,SAAS,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,wBAAgB,kCAAkC,CAAC,KAAK,EAAE;IACxD,KAAK,EAAE,iCAAiC,CAAC;IACzC,IAAI,EAAE,gCAAgC,CAAC;IACvC,OAAO,CAAC,EAAE,mCAAmC,CAAC;CAC/C,GAAG,oBAAoB,CAAC,IAAI,CAAC,CA4C7B"}

package/dist/standard-product-blocks.js

@@ -0,0 +1,45 @@
+import { getProductPageBlockAttributes } from './product-page.js';
+import { buildStandardProductInfoTabs, resolveStandardBuyBoxLabels, resolveStandardDetailsLabels, resolveStandardRelatedProductsTitle, } from './standard-product-page.js';
+export { STANDARD_PRODUCT_BLOCK_TYPES, STANDARD_PRODUCT_PRIMARY_BLOCK_TYPES, STANDARD_PRODUCT_SECONDARY_BLOCK_TYPES, splitStandardProductPageBlocks, buildStandardProductInfoTabs, resolveStandardBuyBoxLabels, resolveStandardDetailsLabels, resolveStandardRelatedProductsTitle, resolveScopedBlockSettingText, } from './standard-product-page.js';
+export function createStandardProductBlockRegistry(input) {
+    const { slots, data, options = {} } = input;
+    return {
+        gallery: ({ block }) => slots.renderGallery({
+            block,
+            attrs: getProductPageBlockAttributes(block),
+        }),
+        'buy-box': ({ block }) => slots.renderBuyBox({
+            block,
+            attrs: getProductPageBlockAttributes(block),
+            labels: resolveStandardBuyBoxLabels(block, options),
+        }),
+        details: ({ block }) => {
+            const labels = resolveStandardDetailsLabels(block, options);
+            const tabs = buildStandardProductInfoTabs({
+                labels,
+                filteredDescription: data.filteredDescription,
+                faqCount: data.faqCount,
+                reviewCount: data.reviewCount,
+                reviewSource: data.reviewSource,
+                includeReviewsTab: options.includeReviewsTab ?? true,
+                useShopReviewTabLabel: options.useShopReviewTabLabel ?? false,
+            });
+            return slots.renderDetails({
+                block,
+                attrs: getProductPageBlockAttributes(block),
+                labels,
+                tabs,
+            });
+        },
+        'related-products': ({ block }) => {
+            if (data.relatedProductsCount <= 0) {
+                return null;
+            }
+            return slots.renderRelatedProducts({
+                block,
+                attrs: getProductPageBlockAttributes(block),
+                title: resolveStandardRelatedProductsTitle(block, options),
+            });
+        },
+    };
+}

package/dist/standard-product-page.d.ts

@@ -0,0 +1,69 @@
+import type { BlockInstance } from '@shoppex/builder-contracts';
+export declare const STANDARD_PRODUCT_BLOCK_TYPES: readonly ["gallery", "buy-box", "details", "related-products"];
+export type StandardProductBlockType = (typeof STANDARD_PRODUCT_BLOCK_TYPES)[number];
+export declare const STANDARD_PRODUCT_PRIMARY_BLOCK_TYPES: readonly ["gallery", "buy-box"];
+export declare const STANDARD_PRODUCT_SECONDARY_BLOCK_TYPES: readonly ["details", "related-products"];
+export type StandardProductSettingScope = 'buyBox' | 'details' | 'relatedProducts';
+export declare function splitStandardProductPageBlocks(blocks: BlockInstance[]): {
+    primary: {
+        id: string;
+        type: string;
+        visible: boolean;
+        settings: Record<string, unknown>;
+        variant?: string | undefined;
+        style_overrides?: Partial<Record<import("@shoppex/builder-contracts").StyleSlotId, import("@shoppex/builder-contracts").StyleSlotValue>> | undefined;
+    }[];
+    secondary: {
+        id: string;
+        type: string;
+        visible: boolean;
+        settings: Record<string, unknown>;
+        variant?: string | undefined;
+        style_overrides?: Partial<Record<import("@shoppex/builder-contracts").StyleSlotId, import("@shoppex/builder-contracts").StyleSlotValue>> | undefined;
+    }[];
+};
+export declare function resolveScopedBlockSettingText(block: Pick<BlockInstance, 'settings'>, scope: StandardProductSettingScope, key: string): string | null;
+export type StandardBuyBoxLabels = {
+    variantLabel: string | null;
+    addonsLabel: string | null;
+    primaryActionLabel: string | null;
+    buyNowLabel: string | null;
+    quantityLabel: string | null;
+    reviewsLabel: string | null;
+    noReviewsLabel: string | null;
+};
+export declare function resolveStandardBuyBoxLabels(block: Pick<BlockInstance, 'settings'>, options?: {
+    useScopedKeys?: boolean;
+}): StandardBuyBoxLabels;
+export type StandardDetailsLabels = {
+    descriptionTabLabel: string | null;
+    reviewsTabLabel: string | null;
+    shopReviewsTabLabel: string | null;
+    faqTabLabel: string | null;
+    emptyDescriptionLabel: string | null;
+    emptyReviewsTitle: string | null;
+    emptyReviewsDescription: string | null;
+    emptyFaqLabel: string | null;
+};
+export declare function resolveStandardDetailsLabels(block: Pick<BlockInstance, 'settings'>, options?: {
+    useScopedKeys?: boolean;
+}): StandardDetailsLabels;
+export type StandardProductTabSpec = {
+    id: 'description' | 'reviews' | 'faq';
+    label: string;
+    content?: string;
+    badge?: string;
+};
+export declare function buildStandardProductInfoTabs(input: {
+    labels: StandardDetailsLabels;
+    filteredDescription: string;
+    faqCount: number;
+    reviewCount: number;
+    reviewSource?: 'shop' | 'product';
+    includeReviewsTab?: boolean;
+    useShopReviewTabLabel?: boolean;
+}): StandardProductTabSpec[];
+export declare function resolveStandardRelatedProductsTitle(block: Pick<BlockInstance, 'settings'>, options?: {
+    useScopedKeys?: boolean;
+}): string | null;
+//# sourceMappingURL=standard-product-page.d.ts.map

package/dist/standard-product-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard-product-page.d.ts","sourceRoot":"","sources":["../src/standard-product-page.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAGhE,eAAO,MAAM,4BAA4B,gEAK/B,CAAC;AAEX,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,4BAA4B,CAAC,CAAC,MAAM,CAAC,CAAC;AAErF,eAAO,MAAM,oCAAoC,iCAAkC,CAAC;AACpF,eAAO,MAAM,sCAAsC,0CAA2C,CAAC;AAE/F,MAAM,MAAM,2BAA2B,GAAG,QAAQ,GAAG,SAAS,GAAG,iBAAiB,CAAC;AAQnF,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,aAAa,EAAE;;;;;;;;;;;;;;;;;EAKrE;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,EACtC,KAAK,EAAE,2BAA2B,EAClC,GAAG,EAAE,MAAM,GACV,MAAM,GAAG,IAAI,CAIf;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC;AAEF,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,EACtC,OAAO,CAAC,EAAE;IAAE,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GACpC,oBAAoB,CAetB;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,EACtC,OAAO,CAAC,EAAE;IAAE,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GACpC,qBAAqB,CAgBvB;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,KAAK,EAAE;IAClD,MAAM,EAAE,qBAAqB,CAAC;IAC9B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,GAAG,sBAAsB,EAAE,CAyC3B;AAED,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,EACtC,OAAO,CAAC,EAAE;IAAE,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GACpC,MAAM,GAAG,IAAI,CAKf"}

package/dist/standard-product-page.js

@@ -0,0 +1,89 @@
+import { getBuilderBlockSettingText } from './product-page.js';
+export const STANDARD_PRODUCT_BLOCK_TYPES = [
+    'gallery',
+    'buy-box',
+    'details',
+    'related-products',
+];
+export const STANDARD_PRODUCT_PRIMARY_BLOCK_TYPES = ['gallery', 'buy-box'];
+export const STANDARD_PRODUCT_SECONDARY_BLOCK_TYPES = ['details', 'related-products'];
+const SCOPE_PREFIX = {
+    buyBox: 'product.buyBox',
+    details: 'product.details',
+    relatedProducts: 'product.relatedProducts',
+};
+export function splitStandardProductPageBlocks(blocks) {
+    return {
+        primary: blocks.filter((block) => block.type === 'gallery' || block.type === 'buy-box'),
+        secondary: blocks.filter((block) => block.type === 'details' || block.type === 'related-products'),
+    };
+}
+export function resolveScopedBlockSettingText(block, scope, key) {
+    const prefixed = getBuilderBlockSettingText(block, `${SCOPE_PREFIX[scope]}.${key}`);
+    if (prefixed)
+        return prefixed;
+    return getBuilderBlockSettingText(block, key);
+}
+export function resolveStandardBuyBoxLabels(block, options) {
+    const read = (key) => options?.useScopedKeys
+        ? resolveScopedBlockSettingText(block, 'buyBox', key)
+        : getBuilderBlockSettingText(block, key);
+    return {
+        variantLabel: read('variantLabel'),
+        addonsLabel: read('addonsLabel'),
+        primaryActionLabel: read('primaryActionLabel'),
+        buyNowLabel: read('buyNowLabel'),
+        quantityLabel: read('quantityLabel'),
+        reviewsLabel: read('reviewsLabel'),
+        noReviewsLabel: read('noReviewsLabel'),
+    };
+}
+export function resolveStandardDetailsLabels(block, options) {
+    const read = (key) => options?.useScopedKeys
+        ? resolveScopedBlockSettingText(block, 'details', key)
+        : getBuilderBlockSettingText(block, key);
+    return {
+        descriptionTabLabel: read('descriptionTabLabel'),
+        reviewsTabLabel: read('reviewsTabLabel'),
+        shopReviewsTabLabel: read('shopReviewsTabLabel'),
+        faqTabLabel: read('faqTabLabel'),
+        emptyDescriptionLabel: read('emptyDescriptionLabel'),
+        emptyReviewsTitle: read('emptyReviewsTitle'),
+        emptyReviewsDescription: read('emptyReviewsDescription'),
+        emptyFaqLabel: read('emptyFaqLabel'),
+    };
+}
+export function buildStandardProductInfoTabs(input) {
+    const { labels, filteredDescription, faqCount, reviewCount, reviewSource = 'product', includeReviewsTab = true, useShopReviewTabLabel = false, } = input;
+    const tabs = [
+        {
+            id: 'description',
+            label: labels.descriptionTabLabel ?? 'Description',
+            content: filteredDescription,
+        },
+    ];
+    if (includeReviewsTab) {
+        const reviewsLabel = useShopReviewTabLabel && reviewSource === 'shop'
+            ? (labels.shopReviewsTabLabel ?? labels.reviewsTabLabel ?? 'Shop Reviews')
+            : (labels.reviewsTabLabel ?? 'Reviews');
+        tabs.push({
+            id: 'reviews',
+            label: reviewsLabel,
+            badge: String(reviewCount),
+        });
+    }
+    if (faqCount > 0) {
+        tabs.push({
+            id: 'faq',
+            label: labels.faqTabLabel ?? 'FAQ',
+            badge: String(faqCount),
+        });
+    }
+    return tabs;
+}
+export function resolveStandardRelatedProductsTitle(block, options) {
+    if (options?.useScopedKeys) {
+        return resolveScopedBlockSettingText(block, 'relatedProducts', 'title');
+    }
+    return getBuilderBlockSettingText(block, 'title');
+}

package/dist/storefront-google-fonts.d.ts

@@ -0,0 +1,2 @@
+export declare function syncStorefrontGoogleFontStylesheets(hrefs: string[]): () => void;
+//# sourceMappingURL=storefront-google-fonts.d.ts.map

package/dist/storefront-google-fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-google-fonts.d.ts","sourceRoot":"","sources":["../src/storefront-google-fonts.ts"],"names":[],"mappings":"AAEA,wBAAgB,mCAAmC,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAwC/E"}

package/dist/storefront-google-fonts.js

@@ -0,0 +1,28 @@
+const STOREFRONT_GOOGLE_FONT_MARKER = 'data-shoppex-storefront-google-font';
+export function syncStorefrontGoogleFontStylesheets(hrefs) {
+    if (typeof document === 'undefined') {
+        return () => { };
+    }
+    const nextHrefs = [...new Set(hrefs.filter((href) => href.trim().length > 0))];
+    const existing = Array.from(document.head.querySelectorAll(`link[rel="stylesheet"][${STOREFRONT_GOOGLE_FONT_MARKER}]`));
+    for (const link of existing) {
+        if (!nextHrefs.includes(link.href)) {
+            link.remove();
+        }
+    }
+    for (const href of nextHrefs) {
+        const alreadyPresent = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]')).some((link) => link.href === href);
+        if (alreadyPresent)
+            continue;
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.setAttribute(STOREFRONT_GOOGLE_FONT_MARKER, 'true');
+        document.head.appendChild(link);
+    }
+    return () => {
+        for (const link of Array.from(document.head.querySelectorAll(`link[rel="stylesheet"][${STOREFRONT_GOOGLE_FONT_MARKER}]`))) {
+            link.remove();
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoppexio/builder-runtime",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Theme-side Builder v2 runtime helpers for Shoppex storefront themes",
   "type": "module",
   "repository": {
@@ -75,11 +75,11 @@
   "author": "Shoppex",
   "license": "MIT",
   "peerDependencies": {
-    "@shoppexio/builder-contracts": "0.1.0",
+    "@shoppexio/builder-contracts": "0.1.1",
     "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@shoppex/builder-contracts": "npm:@shoppexio/builder-contracts@0.1.0"
+    "@shoppex/builder-contracts": "npm:@shoppexio/builder-contracts@0.1.1"
   },
   "devDependencies": {
     "jsdom": "^28.1.0",

package/src/builder-runtime.test.ts

@@ -9,6 +9,7 @@ import {
   getBuilderContentList,
   getBuilderContentString,
   getPageBlocks,
+  getThemePageBlockOrderFromManifest,
   resolveBlockSettings,
   resolveStyleSlotValue,
 } from './index.js';
@@ -40,6 +41,7 @@ function createSettings(): BuilderSettings {
       style_slots: {
         'button.radius': { base: 8, md: 12 },
         'color.primary': '#ff5500',
+        'theme.hero.overlay.opacity': 0.72,
       },
       pages: [],
       terms: {},
@@ -95,6 +97,60 @@ describe('@shoppex/builder-runtime', () => {
     expect(getPageBlocks(settings, 'missing')).toEqual([]);
   });
 
+  test('reads canonical default page block order from a manifest', () => {
+    expect(getThemePageBlockOrderFromManifest({
+      pages: {
+        home: {
+          allowedBlocks: ['hero', 'faq'],
+          defaultBlocks: [{ type: 'hero' }],
+        },
+        product: {
+          allowedBlocks: ['gallery', 'buy-box'],
+        },
+      },
+    }, 'home')).toEqual(['hero']);
+    expect(getThemePageBlockOrderFromManifest({
+      pages: {
+        product: {
+          allowedBlocks: ['gallery', 'buy-box'],
+        },
+      },
+    }, 'product')).toEqual(['gallery', 'buy-box']);
+  });
+
+  test('reads legacy builder.pages manifests used by custom imported themes', () => {
+    expect(getThemePageBlockOrderFromManifest({
+      id: 'cheatshub',
+      name: 'CheatsHub Theme',
+      version: '0.1.0',
+      builder: {
+        pages: [
+          {
+            id: 'home',
+            label: 'Home',
+            blocks: ['marquee', 'hero', 'products'],
+          },
+        ],
+        blocks: {
+          marquee: { label: 'Marquee', settings: {}, variants: [], exposedStyleSlots: [], presets: [] },
+          hero: { label: 'Hero', settings: {}, variants: [], exposedStyleSlots: [], presets: [] },
+          products: { label: 'Products', settings: {}, variants: [], exposedStyleSlots: [], presets: [] },
+        },
+      },
+    }, 'home')).toEqual(['marquee', 'hero', 'products']);
+  });
+
+  test('ignores malformed defaultBlocks in raw page manifests', () => {
+    expect(getThemePageBlockOrderFromManifest({
+      pages: {
+        home: {
+          allowedBlocks: ['hero', 'faq'],
+          defaultBlocks: { type: 'hero' },
+        },
+      },
+    }, 'home')).toEqual(['hero', 'faq']);
+  });
+
   test('resolves style slots with breakpoint fallback and block override', () => {
     const settings = createSettings();
     const block = settings.theme.layout.home.blocks[0];
@@ -108,6 +164,7 @@ describe('@shoppex/builder-runtime', () => {
 
     expect(css).toContain('--builder-button-radius: 8px;');
     expect(css).toContain('--builder-color-primary: #ff5500;');
+    expect(css).toContain('--builder-theme-hero-overlay-opacity: 0.72;');
     expect(css).toContain('@media (min-width: 768px)');
     expect(css).toContain('--builder-button-radius: 12px;');
   });

package/src/css-vars.ts

@@ -1,4 +1,4 @@
-import type { BuilderSettings, Breakpoint, StyleSlotId, StyleSlots } from '@shoppex/builder-contracts';
+import type { BuilderSettings, Breakpoint, CoreStyleSlotId, StyleSlotId, StyleSlots } from '@shoppex/builder-contracts';
 import { CORE_STYLE_SLOT_IDS } from '@shoppex/builder-contracts';
 import { isResponsiveRecord } from './style-slots.js';
 
@@ -9,7 +9,7 @@ const BREAKPOINT_MEDIA: Record<Exclude<Breakpoint, 'base'>, string> = {
   xl: '(min-width: 1280px)',
 };
 
-const STYLE_SLOT_CSS_VARIABLES: Record<StyleSlotId, { name: string; unit?: string }> = {
+const STYLE_SLOT_CSS_VARIABLES: Record<CoreStyleSlotId, { name: string; unit?: string }> = {
   'button.radius': { name: '--builder-button-radius', unit: 'px' },
   'button.background': { name: '--builder-button-background' },
   'button.foreground': { name: '--builder-button-foreground' },
@@ -37,19 +37,19 @@ const STYLE_SLOT_CSS_VARIABLES: Record<StyleSlotId, { name: string; unit?: strin
 };
 
 export function getStyleSlotCssVariable(slotId: StyleSlotId): string {
-  return STYLE_SLOT_CSS_VARIABLES[slotId].name;
+  return getStyleSlotCssVariableConfig(slotId).name;
 }
 
 export function createStyleSlotCssVariables(slots: StyleSlots): Record<string, string> {
   const variables: Record<string, string> = {};
 
-  for (const slotId of CORE_STYLE_SLOT_IDS) {
+  for (const slotId of getRenderableStyleSlotIds(slots)) {
     const value = slots[slotId];
     if (value === undefined || isResponsiveRecord(value)) {
       continue;
     }
 
-    variables[STYLE_SLOT_CSS_VARIABLES[slotId].name] = formatStyleSlotValue(slotId, value);
+    variables[getStyleSlotCssVariable(slotId)] = formatStyleSlotValue(slotId, value);
   }
 
   return variables;
@@ -68,13 +68,13 @@ export function createStyleSlotsCss(slots: StyleSlots, selector = ':root'): stri
     xl: [],
   };
 
-  for (const slotId of CORE_STYLE_SLOT_IDS) {
+  for (const slotId of getRenderableStyleSlotIds(slots)) {
     const value = slots[slotId];
     if (value === undefined) {
       continue;
     }
 
-    const cssVariable = STYLE_SLOT_CSS_VARIABLES[slotId].name;
+    const cssVariable = getStyleSlotCssVariable(slotId);
 
     if (!isResponsiveRecord(value)) {
       baseDeclarations.push(`${cssVariable}: ${formatStyleSlotValue(slotId, value)};`);
@@ -114,7 +114,7 @@ export function createStyleSlotsCss(slots: StyleSlots, selector = ':root'): stri
 }
 
 function formatStyleSlotValue(slotId: StyleSlotId, value: unknown): string {
-  const unit = STYLE_SLOT_CSS_VARIABLES[slotId].unit;
+  const unit = getStyleSlotCssVariableConfig(slotId).unit;
 
   if (typeof value === 'number') {
     return unit ? `${value}${unit}` : `${value}`;
@@ -122,3 +122,24 @@ function formatStyleSlotValue(slotId: StyleSlotId, value: unknown): string {
 
   return String(value);
 }
+
+function getStyleSlotCssVariableConfig(slotId: StyleSlotId): { name: string; unit?: string } {
+  return isCoreStyleSlotId(slotId)
+    ? STYLE_SLOT_CSS_VARIABLES[slotId]
+    : { name: `--builder-${slotId.split('.').join('-')}` };
+}
+
+function getRenderableStyleSlotIds(slots: StyleSlots): StyleSlotId[] {
+  const declared = new Set<StyleSlotId>();
+  for (const slotId of CORE_STYLE_SLOT_IDS) {
+    declared.add(slotId);
+  }
+  for (const slotId of Object.keys(slots)) {
+    declared.add(slotId as StyleSlotId);
+  }
+  return [...declared];
+}
+
+function isCoreStyleSlotId(slotId: StyleSlotId): slotId is CoreStyleSlotId {
+  return (CORE_STYLE_SLOT_IDS as readonly string[]).includes(slotId);
+}

package/src/index.ts

@@ -1,6 +1,10 @@
+export * from './preview-fixtures.js';
+export * from './product-page.js';
+export * from './standard-product-page.js';
 export * from './attributes.js';
 export * from './content.js';
 export * from './css-vars.js';
 export * from './layout.js';
 export * from './react.js';
+export * from './storefront-google-fonts.js';
 export * from './style-slots.js';