@shoppexio/builder-runtime 0.1.1 → 0.1.2

package/src/react.tsx

@@ -3,7 +3,9 @@ import {
   BuilderSettingsSchema,
   PreviewMessageSchema,
   createEmptyBuilderSettings,
+  isTrustedPreviewParentOrigin,
   migrateLegacyBuilderSettings,
+  normalizeDedicatedPageId,
 } from '@shoppex/builder-contracts';
 import {
   createElement,
@@ -13,6 +15,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ComponentPropsWithoutRef,
   type ComponentType,
   type ElementType,
   type ReactNode,
@@ -24,8 +27,14 @@ import {
   getBuilderContentString,
   getBuilderContentValue,
 } from './content.js';
+import { BUILDER_PREVIEW_REVIEWS } from './preview-fixtures.js';
 import { createBuilderCss } from './css-vars.js';
+import { builderBlock, type BuilderAttributeMap } from './attributes.js';
 import { getPageBlocks, getPageLayout, getVisiblePageBlocks } from './layout.js';
+import {
+  getNavigationHeaderSettings,
+  resolveSearchBarSettings,
+} from './search-bar-settings.js';
 import { resolveStyleSlotValue } from './style-slots.js';
 
 type BuilderRuntimeContextValue = {
@@ -214,6 +223,7 @@ export function BuilderRuntimePreviewProvider({
         message: normalized.message,
         ...(normalized.stack ? { stack: normalized.stack } : {}),
         source,
+        phase: 'runtime',
         diagnostics: {
           name: normalized.name,
           href: window.location.href,
@@ -435,15 +445,86 @@ export function useVisibleBuilderPageBlocks(pageId: string) {
 
 export function useThemePageBlocks(pageId: string, defaultOrder: string[]): BlockInstance[] {
   const { settings } = useBuilderRuntime();
+  const canonicalPageId = normalizeDedicatedPageId(pageId);
 
   return useMemo(() => {
-    const page = settings.theme.layout[pageId];
+    const page = settings.theme.layout[canonicalPageId];
     if (page) {
       return page.blocks.filter((block) => block.visible);
     }
 
     return defaultOrder.map((type) => ({ id: type, type, visible: true, settings: {} }));
-  }, [defaultOrder, pageId, settings.theme.layout]);
+  }, [canonicalPageId, defaultOrder, settings.theme.layout]);
+}
+
+export function useThemePageBlockAttributes(
+  pageId: string,
+  defaultOrder: string[],
+): BuilderAttributeMap {
+  const canonicalPageId = normalizeDedicatedPageId(pageId);
+  const blocks = useThemePageBlocks(pageId, defaultOrder);
+  const block = blocks[0];
+
+  return useMemo(
+    () => ({
+      'data-page-id': canonicalPageId,
+      ...(block ? builderBlock(block.id, block.type) : {}),
+    }),
+    [block, canonicalPageId],
+  );
+}
+
+type DedicatedBuilderPageProps<T extends ElementType> = {
+  pageId: string;
+  defaultBlockOrder: string[];
+  as?: T;
+  children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children'>;
+
+export function DedicatedBuilderPage<T extends ElementType = 'section'>({
+  pageId,
+  defaultBlockOrder,
+  as,
+  children,
+  ...rest
+}: DedicatedBuilderPageProps<T>) {
+  const attrs = useThemePageBlockAttributes(pageId, defaultBlockOrder);
+  const Component = (as ?? 'section') as ElementType;
+
+  return createElement(Component, { ...attrs, ...rest }, children);
+}
+
+export function useBuilderPreviewReviews<T>(input: {
+  reviews: T[];
+  isLoading: boolean;
+  error: unknown;
+  fixtures?: T[];
+}): {
+  reviews: T[];
+  isLoading: boolean;
+  error: unknown;
+  isUsingFixtures: boolean;
+} {
+  const fixtures = input.fixtures ?? (BUILDER_PREVIEW_REVIEWS as T[]);
+  const shouldUseFixtures = isBuilderPreviewRuntime() && Boolean(input.error);
+
+  return useMemo(() => {
+    if (!shouldUseFixtures) {
+      return {
+        reviews: input.reviews,
+        isLoading: input.isLoading,
+        error: input.error,
+        isUsingFixtures: false,
+      };
+    }
+
+    return {
+      reviews: fixtures,
+      isLoading: false,
+      error: null,
+      isUsingFixtures: true,
+    };
+  }, [fixtures, input.error, input.isLoading, input.reviews, shouldUseFixtures]);
 }
 
 export function useBuilderStyleSlot(
@@ -485,7 +566,60 @@ function getNestedBuilderSetting(record: Record<string, unknown>, path: string):
   return current;
 }
 
-function isBuilderPreviewRuntime(): boolean {
+export function useSearchBarSettings(input: {
+  variant: 'hero' | 'navigation';
+  headerSettings?: Record<string, unknown>;
+}) {
+  const runtime = useBuilderRuntime();
+  const headerSettings = useMemo(
+    () => input.headerSettings ?? getNavigationHeaderSettings(runtime.settings),
+    [input.headerSettings, runtime.settings],
+  );
+
+  const heroPlaceholder = useBuilderContentValue('hero.search.placeholder');
+  const heroBackground = useBuilderContentValue('hero.search.background');
+  const heroBorderColor = useBuilderContentValue('hero.search.borderColor');
+  const heroBorderRadius = useBuilderContentValue('hero.search.borderRadius');
+  const heroMaxWidth = useBuilderContentValue('hero.search.maxWidth');
+  const heroShowShortcut = useBuilderContentValue('hero.search.showShortcut');
+  const heroShow = useBuilderContentValue('hero.search.show');
+
+  return useMemo(
+    () =>
+      resolveSearchBarSettings({
+        variant: input.variant,
+        headerSettings,
+        heroValues: {
+          'hero.search.placeholder': heroPlaceholder,
+          'hero.search.background': heroBackground,
+          'hero.search.borderColor': heroBorderColor,
+          'hero.search.borderRadius': heroBorderRadius,
+          'hero.search.maxWidth': heroMaxWidth,
+          'hero.search.showShortcut': heroShowShortcut,
+          'hero.search.show': heroShow,
+        },
+      }),
+    [
+      headerSettings,
+      heroBackground,
+      heroBorderColor,
+      heroBorderRadius,
+      heroMaxWidth,
+      heroPlaceholder,
+      heroShow,
+      heroShowShortcut,
+      input.variant,
+    ],
+  );
+}
+
+export {
+  buildSearchShellStyle,
+  getNavigationHeaderSettings,
+  resolveSearchBarSettings,
+} from './search-bar-settings.js';
+
+export function isBuilderPreviewRuntime(): boolean {
   if (typeof window === 'undefined') {
     return false;
   }
@@ -587,7 +721,7 @@ function getPreviewParentOrigin(location: Location, referrer: string): string |
 function isTrustedBuilderPreviewEmbed(location: Location, parentOrigin: string | null): boolean {
   if (window.parent === window || !parentOrigin) return false;
   if (!hasBuilderPreviewMode(location)) return false;
-  return isTrustedBuilderPreviewParentOrigin(parentOrigin);
+  return isTrustedPreviewParentOrigin(parentOrigin);
 }
 
 function hasBuilderPreviewMode(location: Location): boolean {
@@ -599,25 +733,6 @@ function hasBuilderPreviewMode(location: Location): boolean {
   );
 }
 
-function isTrustedBuilderPreviewParentOrigin(origin: string): boolean {
-  try {
-    const parsed = new URL(origin);
-    const hostname = parsed.hostname.toLowerCase();
-    return (
-      hostname === 'dashboard.shoppex.io'
-      || hostname === 'dashboard.shoppex.test'
-      || hostname === 'localhost'
-      || hostname === '127.0.0.1'
-      || hostname === '::1'
-      || hostname.endsWith('.localhost')
-      || hostname.endsWith('.vercel.app')
-      || hostname.endsWith('.vercel.run')
-    );
-  } catch {
-    return false;
-  }
-}
-
 function selectBuilderElement(blockId: string | undefined): void {
   document
     .querySelectorAll<HTMLElement>(BUILDER_SELECTED_SELECTOR)
@@ -631,7 +746,10 @@ function selectBuilderElement(blockId: string | undefined): void {
   if (!target) return;
 
   target.setAttribute('data-builder-selected', 'true');
-  target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  const pageId = target.getAttribute('data-page-id');
+  const scrollBlock =
+    pageId === 'footer' ? 'end' : pageId === 'navigation' ? 'start' : 'nearest';
+  target.scrollIntoView({ behavior: 'smooth', block: scrollBlock });
 }
 
 function createBuilderSelection(blockElement: HTMLElement, target: Element): BuilderSelection {
@@ -825,7 +943,8 @@ function installBuilderPreviewHoverInspector(): () => void {
   };
 }
 
-const INSERTER_HOVER_BAND_PX = 16;
+const INSERTER_HOVER_BAND_PX = 28;
+const INSERTER_CLEAR_DELAY_MS = 150;
 
 /**
  * Direct-manipulation bridge: tracks the bounding rect of the selected
@@ -924,30 +1043,49 @@ function installBuilderDirectManipulation(
   // a tracked block stack. We don't try to be clever about which gap;
   // every direct ancestor with a list of `[data-builder-block]` children
   // contributes one gap per pair.
+  let inserterClearTimer: number | null = null;
+
   const postInserter = (
     index: number | null,
     rect: DOMRect | null,
   ) => {
-    const key =
-      index === null || !rect
-        ? '__none__'
-        : `${index}|${rect.top}|${rect.left}|${rect.width}|${rect.height}`;
-    if (key === lastInserterKey) return;
-    lastInserterKey = key;
-    postMessage({
-      type: 'INSERTER_HOVER',
-      revision: getRevision(),
-      index,
-      rect:
-        rect === null
-          ? null
-          : {
-              top: rect.top,
-              left: rect.left,
-              width: rect.width,
-              height: rect.height,
-            },
-    });
+    const emitInserter = () => {
+      const key =
+        index === null || !rect
+          ? '__none__'
+          : `${index}|${rect.top}|${rect.left}|${rect.width}|${rect.height}`;
+      if (key === lastInserterKey) return;
+      lastInserterKey = key;
+      postMessage({
+        type: 'INSERTER_HOVER',
+        revision: getRevision(),
+        index,
+        rect:
+          rect === null
+            ? null
+            : {
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height,
+              },
+      });
+    };
+
+    if (index !== null && rect !== null) {
+      if (inserterClearTimer !== null) {
+        window.clearTimeout(inserterClearTimer);
+        inserterClearTimer = null;
+      }
+      emitInserter();
+      return;
+    }
+
+    if (inserterClearTimer !== null) return;
+    inserterClearTimer = window.setTimeout(() => {
+      inserterClearTimer = null;
+      emitInserter();
+    }, INSERTER_CLEAR_DELAY_MS);
   };
 
   const handleMouseMove = (event: MouseEvent) => {
@@ -1103,3 +1241,34 @@ function installBuilderDirectManipulation(
     window.removeEventListener('mousedown', handleMouseDown, true);
   };
 }
+
+export {
+  getBuilderBlockSettingText,
+  getBuilderProductBlockAttributes,
+  getLayoutPageBlockAttributes,
+  getProductBlockText,
+  getProductPageBlockAttributes,
+} from './product-page.js';
+export {
+  createStandardProductBlockRegistry,
+  splitStandardProductPageBlocks,
+  buildStandardProductInfoTabs,
+  resolveStandardBuyBoxLabels,
+  resolveStandardDetailsLabels,
+  resolveStandardRelatedProductsTitle,
+  resolveScopedBlockSettingText,
+  STANDARD_PRODUCT_BLOCK_TYPES,
+  STANDARD_PRODUCT_PRIMARY_BLOCK_TYPES,
+  STANDARD_PRODUCT_SECONDARY_BLOCK_TYPES,
+} from './standard-product-blocks.js';
+export type {
+  StandardBuyBoxLabels,
+  StandardDetailsLabels,
+  StandardProductBlockRegistryData,
+  StandardProductBlockRegistryOptions,
+  StandardProductBlockRegistrySlots,
+  StandardProductBlockType,
+  StandardProductSettingScope,
+  StandardProductTabSpec,
+} from './standard-product-blocks.js';
+export { getBuilderPreviewReviewFixtures } from './preview-fixtures.js';

package/src/search-bar-settings.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  buildSearchShellStyle,
+  resolveSearchBarSettings,
+  resolveSearchColor,
+  resolveSearchMaxWidth,
+} from './search-bar-settings';
+
+describe('resolveSearchBarSettings', () => {
+  test('hero variant prefers hero settings and falls back to navigation', () => {
+    const resolved = resolveSearchBarSettings({
+      variant: 'hero',
+      headerSettings: {
+        'navigation.search.placeholder': 'Header placeholder',
+        'navigation.search.background': '#111111',
+      },
+      heroValues: {
+        'hero.search.placeholder': 'Hero placeholder',
+        'hero.search.maxWidth': 'lg',
+      },
+    });
+
+    expect(resolved.placeholder).toBe('Hero placeholder');
+    expect(resolved.backgroundColor).toBe('#111111');
+    expect(resolved.maxWidth).toBe('36rem');
+    expect(resolved.showShortcut).toBe(true);
+    expect(resolved.showInHero).toBe(true);
+  });
+
+  test('navigation variant reads header settings only', () => {
+    const resolved = resolveSearchBarSettings({
+      variant: 'navigation',
+      headerSettings: {
+        'navigation.search.placeholder': 'Find products',
+        'navigation.search.borderRadius': 24,
+      },
+      heroValues: {
+        'hero.search.placeholder': 'Ignored in navigation mode',
+      },
+    });
+
+    expect(resolved.placeholder).toBe('Find products');
+    expect(resolved.borderRadiusPx).toBe(24);
+  });
+});
+
+describe('search shell helpers', () => {
+  test('resolveSearchColor normalizes hex values', () => {
+    expect(resolveSearchColor('f97316')).toBe('#f97316');
+    expect(resolveSearchColor('not-a-color')).toBeUndefined();
+  });
+
+  test('resolveSearchMaxWidth maps preset keys', () => {
+    expect(resolveSearchMaxWidth('full')).toBe('100%');
+  });
+
+  test('buildSearchShellStyle returns only overridden properties', () => {
+    expect(
+      buildSearchShellStyle({
+        backgroundColor: '#101010',
+        borderColor: '#333333',
+        borderRadiusPx: 999,
+      }),
+    ).toEqual({
+      backgroundColor: '#101010',
+      borderColor: '#333333',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderRadius: '999px',
+    });
+  });
+});

package/src/search-bar-settings.ts

@@ -0,0 +1,176 @@
+import type { BuilderSettings } from '@shoppex/builder-contracts';
+
+export const SEARCH_BAR_MAX_WIDTH: Record<string, string> = {
+  sm: '20rem',
+  md: '28rem',
+  lg: '36rem',
+  full: '100%',
+};
+
+export type ResolvedSearchBarSettings = {
+  placeholder: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderRadiusPx?: number;
+  maxWidth: string;
+  showShortcut: boolean;
+  showInHero: boolean;
+};
+
+export function getNavigationHeaderSettings(
+  settings: BuilderSettings,
+): Record<string, unknown> {
+  const block = settings.theme.layout.navigation?.blocks.find(
+    (candidate) => candidate.type === 'header',
+  );
+  return block?.settings ?? {};
+}
+
+export function readSetting(
+  sources: Array<Record<string, unknown> | undefined>,
+  path: string,
+): unknown {
+  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: unknown): value is string {
+  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: string): string {
+  const trimmed = value.trim();
+  return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+}
+
+export function resolveSearchColor(value: unknown): string | undefined {
+  if (!isValidHexColor(value)) return undefined;
+  return normalizeHexColor(value);
+}
+
+export function resolveSearchBorderRadius(value: unknown): number | undefined {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return undefined;
+  return Math.max(0, Math.round(value));
+}
+
+export function resolveSearchMaxWidth(value: unknown, fallback = 'md'): string {
+  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: unknown, fallback: boolean): boolean {
+  if (typeof value === 'boolean') return value;
+  return fallback;
+}
+
+export function resolveSearchPlaceholder(
+  value: unknown,
+  fallback: string,
+): string {
+  return typeof value === 'string' && value.trim() ? value : fallback;
+}
+
+export function resolveSearchBarSettings(input: {
+  variant: 'hero' | 'navigation';
+  heroValues: Record<string, unknown>;
+  headerSettings: Record<string, unknown>;
+}): ResolvedSearchBarSettings {
+  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: Pick<
+    ResolvedSearchBarSettings,
+    'backgroundColor' | 'borderColor' | 'borderRadiusPx'
+  >,
+): {
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  borderStyle?: 'solid';
+  borderRadius?: string;
+} | undefined {
+  const style: {
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderStyle?: 'solid';
+    borderRadius?: string;
+  } = {};
+  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/src/standard-product-blocks.test.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, test } from 'bun:test';
+import { createBlockInstance } from '@shoppex/builder-contracts';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { createStandardProductBlockRegistry } from './standard-product-blocks.js';
+
+describe('createStandardProductBlockRegistry', () => {
+  test('registers all standard product block types and resolves labels through slots', () => {
+    const registry = createStandardProductBlockRegistry({
+      data: {
+        filteredDescription: 'Description body',
+        faqCount: 1,
+        reviewCount: 2,
+        relatedProductsCount: 1,
+      },
+      slots: {
+        renderGallery: ({ attrs }) => createElement('div', { ...attrs, 'data-slot': 'gallery' }),
+        renderBuyBox: ({ attrs, labels }) =>
+          createElement('div', {
+            ...attrs,
+            'data-slot': 'buy-box',
+            'data-variant-label': labels.variantLabel ?? '',
+          }),
+        renderDetails: ({ attrs, tabs }) =>
+          createElement('div', {
+            ...attrs,
+            'data-slot': 'details',
+            'data-tab-count': String(tabs.length),
+          }),
+        renderRelatedProducts: ({ attrs, title }) =>
+          createElement('div', {
+            ...attrs,
+            'data-slot': 'related-products',
+            'data-title': title ?? '',
+          }),
+      },
+    });
+
+    expect(Object.keys(registry).sort()).toEqual([
+      'buy-box',
+      'details',
+      'gallery',
+      'related-products',
+    ]);
+
+    const buyBoxBlock = createBlockInstance({
+      id: 'buy-box-1',
+      type: 'buy-box',
+      settings: { variantLabel: 'Variant' },
+    });
+    const detailsBlock = createBlockInstance({ id: 'details-1', type: 'details' });
+    const relatedBlock = createBlockInstance({
+      id: 'related-1',
+      type: 'related-products',
+      settings: { title: 'More products' },
+    });
+
+    const buyBoxMarkup = renderToStaticMarkup(
+      createElement(registry['buy-box'], { block: buyBoxBlock, context: null }),
+    );
+    const detailsMarkup = renderToStaticMarkup(
+      createElement(registry.details, { block: detailsBlock, context: null }),
+    );
+    const relatedMarkup = renderToStaticMarkup(
+      createElement(registry['related-products'], { block: relatedBlock, context: null }),
+    );
+
+    expect(buyBoxMarkup).toContain('data-variant-label="Variant"');
+    expect(detailsMarkup).toContain('data-tab-count="3"');
+    expect(relatedMarkup).toContain('data-title="More products"');
+  });
+
+  test('skips related-products output when there are no related products', () => {
+    const registry = createStandardProductBlockRegistry({
+      data: {
+        filteredDescription: '',
+        faqCount: 0,
+        reviewCount: 0,
+        relatedProductsCount: 0,
+      },
+      slots: {
+        renderGallery: () => null,
+        renderBuyBox: () => null,
+        renderDetails: () => null,
+        renderRelatedProducts: () => createElement('div', { 'data-slot': 'related-products' }),
+      },
+    });
+
+    const relatedBlock = createBlockInstance({ id: 'related-1', type: 'related-products' });
+    const output = registry['related-products']({ block: relatedBlock, context: null });
+    expect(output).toBeNull();
+  });
+});