@shoppexio/builder-runtime 0.1.1 → 0.1.3

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/dist/youtube-embed-block.d.ts

@@ -0,0 +1,10 @@
+import type { BlockInstance } from '@shoppex/builder-contracts';
+export type YouTubeEmbedBlockInstance = Pick<BlockInstance, 'id' | 'settings'>;
+export declare function readYouTubeEmbedBlockSettings(block: YouTubeEmbedBlockInstance): {
+    videoUrl: string;
+    title: string;
+    height: number | undefined;
+    privacyEnhanced: boolean;
+};
+export declare function getYouTubeEmbedBlockStyleProps(block: YouTubeEmbedBlockInstance): import("react").CSSProperties;
+//# sourceMappingURL=youtube-embed-block.d.ts.map

package/dist/youtube-embed-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube-embed-block.d.ts","sourceRoot":"","sources":["../src/youtube-embed-block.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAGhE,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,UAAU,CAAC,CAAC;AAE/E,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,yBAAyB;;;;;EAkB7E;AAED,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,yBAAyB,iCAE9E"}

package/dist/youtube-embed-block.js

@@ -0,0 +1,19 @@
+import { readManifestStyleBlockProps } from './block-style-settings.js';
+export function readYouTubeEmbedBlockSettings(block) {
+    const videoUrl = typeof block.settings.videoUrl === 'string' ? block.settings.videoUrl : '';
+    const title = typeof block.settings.title === 'string' && block.settings.title.trim().length > 0
+        ? block.settings.title.trim()
+        : 'YouTube video';
+    const heightRaw = block.settings.height;
+    const height = typeof heightRaw === 'number' && heightRaw > 0 ? heightRaw : undefined;
+    const privacyEnhanced = block.settings.privacyEnhanced === true;
+    return {
+        videoUrl,
+        title,
+        height,
+        privacyEnhanced,
+    };
+}
+export function getYouTubeEmbedBlockStyleProps(block) {
+    return readManifestStyleBlockProps(block.settings);
+}

package/dist/youtube.d.ts

@@ -0,0 +1,5 @@
+export declare function parseYouTubeVideoId(input: string): string | null;
+export declare function buildYouTubeEmbedSrc(videoId: string, options?: {
+    privacyEnhanced?: boolean;
+}): string;
+//# sourceMappingURL=youtube.d.ts.map

package/dist/youtube.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube.d.ts","sourceRoot":"","sources":["../src/youtube.ts"],"names":[],"mappings":"AAMA,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA+ChE;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,GACtC,MAAM,CAOR"}

package/dist/youtube.js

@@ -0,0 +1,52 @@
+const YOUTUBE_VIDEO_ID_PATTERN = /^[\w-]{11}$/;
+function isYouTubeVideoId(value) {
+    return YOUTUBE_VIDEO_ID_PATTERN.test(value);
+}
+export function parseYouTubeVideoId(input) {
+    const trimmed = input.trim();
+    if (!trimmed) {
+        return null;
+    }
+    if (isYouTubeVideoId(trimmed)) {
+        return trimmed;
+    }
+    try {
+        const url = trimmed.startsWith('http://') || trimmed.startsWith('https://')
+            ? new URL(trimmed)
+            : new URL(`https://${trimmed}`);
+        const host = url.hostname.replace(/^www\./, '');
+        if (host === 'youtu.be') {
+            const candidate = url.pathname.split('/').filter(Boolean)[0] ?? '';
+            return isYouTubeVideoId(candidate) ? candidate : null;
+        }
+        if (host === 'youtube.com' || host === 'm.youtube.com' || host === 'music.youtube.com') {
+            const watchId = url.searchParams.get('v');
+            if (watchId && isYouTubeVideoId(watchId)) {
+                return watchId;
+            }
+            const embedMatch = url.pathname.match(/^\/embed\/([\w-]{11})/);
+            if (embedMatch?.[1] && isYouTubeVideoId(embedMatch[1])) {
+                return embedMatch[1];
+            }
+            const shortsMatch = url.pathname.match(/^\/shorts\/([\w-]{11})/);
+            if (shortsMatch?.[1] && isYouTubeVideoId(shortsMatch[1])) {
+                return shortsMatch[1];
+            }
+            const liveMatch = url.pathname.match(/^\/live\/([\w-]{11})/);
+            if (liveMatch?.[1] && isYouTubeVideoId(liveMatch[1])) {
+                return liveMatch[1];
+            }
+        }
+    }
+    catch {
+        return null;
+    }
+    return null;
+}
+export function buildYouTubeEmbedSrc(videoId, options) {
+    if (!isYouTubeVideoId(videoId)) {
+        throw new Error(`Invalid YouTube video id: ${videoId}`);
+    }
+    const host = options?.privacyEnhanced ? 'www.youtube-nocookie.com' : 'www.youtube.com';
+    return `https://${host}/embed/${videoId}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoppexio/builder-runtime",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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/YouTubeEmbed.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useMemo } from 'react';
+import { buildYouTubeEmbedSrc, parseYouTubeVideoId } from './youtube.js';
+
+export interface YouTubeEmbedProps {
+  videoUrl?: string;
+  title?: string;
+  height?: number;
+  privacyEnhanced?: boolean;
+  className?: string;
+}
+
+const DEFAULT_HEIGHT = 400;
+const EMBED_MAX_WIDTH = 640;
+
+export function YouTubeEmbed({
+  videoUrl = '',
+  title = 'YouTube video',
+  height,
+  privacyEnhanced = false,
+  className = '',
+}: YouTubeEmbedProps) {
+  const videoId = useMemo(() => parseYouTubeVideoId(videoUrl), [videoUrl]);
+  const resolvedHeight =
+    typeof height === 'number' && height > 0 ? height : DEFAULT_HEIGHT;
+
+  if (!videoId) {
+    return null;
+  }
+
+  return (
+    <section className={`my-8 ${className}`} style={{ display: 'flex', justifyContent: 'center' }}>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          maxWidth: `${EMBED_MAX_WIDTH}px`,
+          height: `${resolvedHeight}px`,
+          borderRadius: 'inherit',
+        }}
+      >
+        <iframe
+          src={buildYouTubeEmbedSrc(videoId, { privacyEnhanced })}
+          title={title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+          loading="lazy"
+          style={{
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            border: 0,
+          }}
+        />
+      </div>
+    </section>
+  );
+}
+
+export function YouTubeEmbedPreviewPlaceholder({
+  className = '',
+  height,
+}: {
+  className?: string;
+  height?: number;
+}) {
+  const resolvedHeight =
+    typeof height === 'number' && height > 0 ? height : DEFAULT_HEIGHT;
+
+  return (
+    <section className={`my-8 ${className}`} style={{ display: 'flex', justifyContent: 'center' }}>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          maxWidth: `${EMBED_MAX_WIDTH}px`,
+          height: `${resolvedHeight}px`,
+          borderRadius: 'inherit',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%',
+            padding: '0 24px',
+            border: '1px dashed rgba(127, 127, 127, 0.35)',
+            borderRadius: 'inherit',
+            background: 'rgba(127, 127, 127, 0.06)',
+            color: '#5f6470',
+            fontFamily: 'Inter, system-ui, sans-serif',
+            fontSize: '13px',
+            textAlign: 'center',
+          }}
+          aria-hidden="true"
+        >
+          Paste a YouTube link or video ID in the Inspector to preview the player here.
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/YouTubeEmbedBuilderBlock.tsx

@@ -0,0 +1,49 @@
+import type { BlockInstance } from '@shoppex/builder-contracts';
+import { builderBlock } from './attributes.js';
+import { isBuilderPreviewMode } from './preview-mode.js';
+import { YouTubeEmbed, YouTubeEmbedPreviewPlaceholder } from './YouTubeEmbed.js';
+import {
+  getYouTubeEmbedBlockStyleProps,
+  readYouTubeEmbedBlockSettings,
+} from './youtube-embed-block.js';
+import { parseYouTubeVideoId } from './youtube.js';
+
+export type YouTubeEmbedBuilderBlockProps = {
+  block: Pick<BlockInstance, 'id' | 'type' | 'settings'>;
+  pageId?: string;
+};
+
+export function YouTubeEmbedBuilderBlock({
+  block,
+  pageId = 'home',
+}: YouTubeEmbedBuilderBlockProps) {
+  const settings = readYouTubeEmbedBlockSettings(block);
+  const videoId = parseYouTubeVideoId(settings.videoUrl);
+  const showPreviewPlaceholder = !videoId && isBuilderPreviewMode();
+
+  if (!videoId && !showPreviewPlaceholder) {
+    return null;
+  }
+
+  const styleProps = getYouTubeEmbedBlockStyleProps(block);
+
+  return (
+    <div
+      key={block.id}
+      data-page-id={pageId}
+      {...builderBlock(block.id, block.type)}
+      style={Object.keys(styleProps).length > 0 ? styleProps : undefined}
+    >
+      {videoId ? (
+        <YouTubeEmbed
+          videoUrl={settings.videoUrl}
+          title={settings.title}
+          height={settings.height}
+          privacyEnhanced={settings.privacyEnhanced}
+        />
+      ) : (
+        <YouTubeEmbedPreviewPlaceholder height={settings.height} />
+      )}
+    </div>
+  );
+}

package/src/block-style-settings.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+
+type StyleBlockSettings = Record<string, unknown>;
+
+export function readManifestStyleBlockProps(
+  settings: StyleBlockSettings,
+): CSSProperties {
+  const bg = settings['style.background'];
+  const radius = settings['style.borderRadius'];
+  const padding = settings['style.padding'];
+  const style: CSSProperties = {};
+
+  if (typeof bg === 'string' && bg.length > 0) {
+    style.backgroundColor = bg;
+  }
+  if (typeof radius === 'number') {
+    style.borderRadius = `${radius}px`;
+  }
+  if (typeof padding === 'number') {
+    style.padding = `${padding}px`;
+  }
+
+  return style;
+}

package/src/builder-runtime.test.ts

@@ -8,7 +8,9 @@ import {
   createBuilderCss,
   getBuilderContentList,
   getBuilderContentString,
+  normalizeGalleryItems,
   getPageBlocks,
+  getBlockSettingValue,
   getThemePageBlockOrderFromManifest,
   resolveBlockSettings,
   resolveStyleSlotValue,
@@ -90,6 +92,19 @@ describe('@shoppex/builder-runtime', () => {
     expect(getBuilderContentString(settings, 'hero.subtitle', 'Default subtitle')).toBe('');
   });
 
+  test('normalizes gallery list items from image or url keys', () => {
+    expect(
+      normalizeGalleryItems([
+        { image: '/media/a.png', alt: 'A' },
+        { url: '/media/b.png' },
+        { image: '' },
+      ]),
+    ).toEqual([
+      { url: '/media/a.png', alt: 'A' },
+      { url: '/media/b.png' },
+    ]);
+  });
+
   test('resolves page blocks', () => {
     const settings = createSettings();
 
@@ -118,6 +133,39 @@ describe('@shoppex/builder-runtime', () => {
     }, '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];
@@ -153,6 +201,27 @@ describe('@shoppex/builder-runtime', () => {
     expect(resolveBlockSettings(block, manifest)).toEqual({ title: 'Default hero' });
   });
 
+  test('reads block settings from snake_cased storefront manifest keys', () => {
+    const settings = createSettings();
+    settings.theme.layout.home.blocks.push(
+      createBlockInstance({
+        id: 'how-it-works-1',
+        type: 'how-it-works',
+        settings: {
+          'how_it_works.before_image': '/media/before.png',
+          'how_it_works.after_image': '/media/after.png',
+        },
+      }),
+    );
+
+    expect(getBlockSettingValue(settings, {
+      pageId: 'home',
+      blockId: 'how-it-works-1',
+      path: 'howItWorks.beforeImage',
+      fallback: '',
+    })).toBe('/media/before.png');
+  });
+
   test('creates the three supported builder attributes', () => {
     expect(builderContent('hero.title')).toEqual({ 'data-builder-content': 'hero.title' });
     expect(builderSlot('button.radius', { blockId: 'hero-1' })).toEqual({

package/src/content.ts

@@ -1,15 +1,10 @@
 import type { BuilderSettings } from '@shoppex/builder-contracts';
+import { resolveManifestSettingRecordValue } from './manifest-setting-paths.js';
 
 export type JsonRecord = Record<string, unknown>;
 
 export function getBuilderContentValue(settings: BuilderSettings, path: string): unknown {
-  const content = settings.theme.content;
-
-  if (Object.prototype.hasOwnProperty.call(content, path)) {
-    return content[path];
-  }
-
-  return getByDottedPath(content, path);
+  return resolveManifestSettingRecordValue(settings.theme.content, path);
 }
 
 export function getBuilderContentString(settings: BuilderSettings, path: string, fallback?: string): string | undefined {
@@ -22,6 +17,45 @@ export function getBuilderContentList<T = unknown>(settings: BuilderSettings, pa
   return Array.isArray(value) ? (value as T[]) : fallback;
 }
 
+export type NormalizedGalleryItem = {
+  url: string;
+  alt?: string;
+  caption?: string;
+};
+
+export function normalizeGalleryItems(raw: unknown): NormalizedGalleryItem[] {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+
+  const items: NormalizedGalleryItem[] = [];
+  for (const entry of raw) {
+    if (typeof entry !== 'object' || entry === null) {
+      continue;
+    }
+
+    const record = entry as Record<string, unknown>;
+    const url =
+      typeof record.url === 'string' && record.url.length > 0
+        ? record.url
+        : typeof record.image === 'string' && record.image.length > 0
+          ? record.image
+          : null;
+
+    if (!url) {
+      continue;
+    }
+
+    items.push({
+      url,
+      alt: typeof record.alt === 'string' ? record.alt : undefined,
+      caption: typeof record.caption === 'string' ? record.caption : undefined,
+    });
+  }
+
+  return items;
+}
+
 export function getBuilderContentRecord(settings: BuilderSettings): JsonRecord {
   return settings.theme.content;
 }
@@ -35,8 +69,9 @@ export function getBlockSettingValue<T = unknown>(
     return input.fallback;
   }
 
-  if (Object.prototype.hasOwnProperty.call(block.settings, input.path)) {
-    return block.settings[input.path] as T;
+  const resolved = resolveManifestSettingRecordValue(block.settings, input.path);
+  if (resolved !== undefined) {
+    return resolved as T;
   }
 
   const nested = getByDottedPath(block.settings, input.path);

package/src/index.ts

@@ -1,6 +1,14 @@
+export * from './manifest-setting-paths.js';
+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';
+export * from './block-style-settings.js';
+export * from './preview-mode.js';
+export * from './youtube.js';

package/src/layout.ts

@@ -1,12 +1,18 @@
-import type { BlockInstance, BuilderSettings, PageLayout, ThemeManifest } from '@shoppex/builder-contracts';
+import {
+  getThemePageBlockOrderFromManifest as resolveThemePageBlockOrder,
+  type BlockInstance,
+  type BuilderSettings,
+  type PageLayout,
+  type ThemeManifest,
+  type ThemePageBlockOrderPage,
+} from '@shoppex/builder-contracts';
 
 export type ThemePageBlockOrderManifest = {
-  pages?: Record<string, {
-    allowedBlocks?: string[];
-    defaultBlocks?: Array<{ type?: string }>;
-  }>;
+  pages?: Record<string, ThemePageBlockOrderPage>;
 };
 
+export { resolveThemePageBlockOrder as getThemePageBlockOrderFromManifest };
+
 export function getPageLayout(settings: BuilderSettings, pageId: string): PageLayout {
   return settings.theme.layout[pageId] ?? { blocks: [] };
 }
@@ -27,22 +33,6 @@ export function getAllowedBlockTypes(manifest: ThemeManifest, pageId: string): s
   return manifest.pages[pageId]?.allowedBlocks ?? [];
 }
 
-export function getThemePageBlockOrderFromManifest(
-  manifest: ThemePageBlockOrderManifest,
-  pageId: string,
-): string[] {
-  const page = manifest.pages?.[pageId];
-  if (!page) {
-    return [];
-  }
-
-  const defaultBlockTypes = (page.defaultBlocks ?? [])
-    .map((block) => block.type)
-    .filter((blockType): blockType is string => typeof blockType === 'string' && blockType.length > 0);
-
-  return defaultBlockTypes.length > 0 ? defaultBlockTypes : page.allowedBlocks ?? [];
-}
-
 export function canAddBlock(settings: BuilderSettings, manifest: ThemeManifest, pageId: string, blockType: string): boolean {
   const page = manifest.pages[pageId];
   const blockDefinition = manifest.blocks[blockType];