@shoppexio/builder-runtime 0.1.2 → 0.1.3

package/dist/YouTubeEmbed.d.ts

@@ -0,0 +1,13 @@
+export interface YouTubeEmbedProps {
+    videoUrl?: string;
+    title?: string;
+    height?: number;
+    privacyEnhanced?: boolean;
+    className?: string;
+}
+export declare function YouTubeEmbed({ videoUrl, title, height, privacyEnhanced, className, }: YouTubeEmbedProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function YouTubeEmbedPreviewPlaceholder({ className, height, }: {
+    className?: string;
+    height?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=YouTubeEmbed.d.ts.map

package/dist/YouTubeEmbed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YouTubeEmbed.d.ts","sourceRoot":"","sources":["../src/YouTubeEmbed.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAa,EACb,KAAuB,EACvB,MAAM,EACN,eAAuB,EACvB,SAAc,GACf,EAAE,iBAAiB,kDAoCnB;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,SAAc,EACd,MAAM,GACP,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CAsCA"}

package/dist/YouTubeEmbed.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { buildYouTubeEmbedSrc, parseYouTubeVideoId } from './youtube.js';
+const DEFAULT_HEIGHT = 400;
+const EMBED_MAX_WIDTH = 640;
+export function YouTubeEmbed({ videoUrl = '', title = 'YouTube video', height, privacyEnhanced = false, className = '', }) {
+    const videoId = useMemo(() => parseYouTubeVideoId(videoUrl), [videoUrl]);
+    const resolvedHeight = typeof height === 'number' && height > 0 ? height : DEFAULT_HEIGHT;
+    if (!videoId) {
+        return null;
+    }
+    return (_jsx("section", { className: `my-8 ${className}`, style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: {
+                position: 'relative',
+                width: '100%',
+                maxWidth: `${EMBED_MAX_WIDTH}px`,
+                height: `${resolvedHeight}px`,
+                borderRadius: 'inherit',
+            }, children: _jsx("iframe", { src: buildYouTubeEmbedSrc(videoId, { privacyEnhanced }), title: title, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy", style: {
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    border: 0,
+                } }) }) }));
+}
+export function YouTubeEmbedPreviewPlaceholder({ className = '', height, }) {
+    const resolvedHeight = typeof height === 'number' && height > 0 ? height : DEFAULT_HEIGHT;
+    return (_jsx("section", { className: `my-8 ${className}`, style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: {
+                position: 'relative',
+                width: '100%',
+                maxWidth: `${EMBED_MAX_WIDTH}px`,
+                height: `${resolvedHeight}px`,
+                borderRadius: 'inherit',
+            }, children: _jsx("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", children: "Paste a YouTube link or video ID in the Inspector to preview the player here." }) }) }));
+}

package/dist/YouTubeEmbedBuilderBlock.d.ts

@@ -0,0 +1,7 @@
+import type { BlockInstance } from '@shoppex/builder-contracts';
+export type YouTubeEmbedBuilderBlockProps = {
+    block: Pick<BlockInstance, 'id' | 'type' | 'settings'>;
+    pageId?: string;
+};
+export declare function YouTubeEmbedBuilderBlock({ block, pageId, }: YouTubeEmbedBuilderBlockProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=YouTubeEmbedBuilderBlock.d.ts.map

package/dist/YouTubeEmbedBuilderBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YouTubeEmbedBuilderBlock.d.ts","sourceRoot":"","sources":["../src/YouTubeEmbedBuilderBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAUhE,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,MAAe,GAChB,EAAE,6BAA6B,kDA8B/B"}

package/dist/YouTubeEmbedBuilderBlock.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 function YouTubeEmbedBuilderBlock({ block, pageId = 'home', }) {
+    const settings = readYouTubeEmbedBlockSettings(block);
+    const videoId = parseYouTubeVideoId(settings.videoUrl);
+    const showPreviewPlaceholder = !videoId && isBuilderPreviewMode();
+    if (!videoId && !showPreviewPlaceholder) {
+        return null;
+    }
+    const styleProps = getYouTubeEmbedBlockStyleProps(block);
+    return (_jsx("div", { "data-page-id": pageId, ...builderBlock(block.id, block.type), style: Object.keys(styleProps).length > 0 ? styleProps : undefined, children: videoId ? (_jsx(YouTubeEmbed, { videoUrl: settings.videoUrl, title: settings.title, height: settings.height, privacyEnhanced: settings.privacyEnhanced })) : (_jsx(YouTubeEmbedPreviewPlaceholder, { height: settings.height })) }, block.id));
+}

package/dist/block-style-settings.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from 'react';
+type StyleBlockSettings = Record<string, unknown>;
+export declare function readManifestStyleBlockProps(settings: StyleBlockSettings): CSSProperties;
+export {};
+//# sourceMappingURL=block-style-settings.d.ts.map

package/dist/block-style-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-style-settings.d.ts","sourceRoot":"","sources":["../src/block-style-settings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,KAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAElD,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,kBAAkB,GAC3B,aAAa,CAiBf"}

package/dist/block-style-settings.js

@@ -0,0 +1,16 @@
+export function readManifestStyleBlockProps(settings) {
+    const bg = settings['style.background'];
+    const radius = settings['style.borderRadius'];
+    const padding = settings['style.padding'];
+    const style = {};
+    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/dist/builder-runtime.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=builder-runtime.test.d.ts.map

package/dist/builder-runtime.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder-runtime.test.d.ts","sourceRoot":"","sources":["../src/builder-runtime.test.ts"],"names":[],"mappings":""}

package/dist/builder-runtime.test.js

@@ -0,0 +1,115 @@
+import { describe, expect, test } from 'bun:test';
+import { createBlockInstance, createEmptyBuilderSettings } from '@shoppex/builder-contracts';
+import { builderBlock, builderContent, builderSlot, canAddBlock, createBuilderCss, getBuilderContentList, getBuilderContentString, getPageBlocks, resolveBlockSettings, resolveStyleSlotValue, } from './index.js';
+function createSettings() {
+    return {
+        ...createEmptyBuilderSettings(1),
+        theme: {
+            content: {
+                'hero.title': 'Launch sale',
+                faq: {
+                    items: [{ question: 'Can I edit sections?', answer: 'Yes' }],
+                },
+            },
+            layout: {
+                home: {
+                    blocks: [
+                        createBlockInstance({
+                            id: 'hero-1',
+                            type: 'hero',
+                            settings: { title: 'Hero block' },
+                            style_overrides: {
+                                'button.radius': { base: 14 },
+                            },
+                        }),
+                    ],
+                },
+            },
+            style_slots: {
+                'button.radius': { base: 8, md: 12 },
+                'color.primary': '#ff5500',
+            },
+            pages: [],
+            terms: {},
+        },
+    };
+}
+const manifest = {
+    id: 'default',
+    name: 'Default',
+    version: '2.0.0',
+    pages: {
+        home: {
+            label: 'Home',
+            allowedBlocks: ['hero'],
+            defaultBlocks: [],
+        },
+    },
+    blocks: {
+        hero: {
+            label: 'Hero',
+            variants: [],
+            settings: {
+                title: { type: 'text', label: 'Headline', defaultValue: 'Default hero' },
+            },
+            exposedStyleSlots: ['button.radius'],
+            presets: [],
+        },
+    },
+    styleSlots: {},
+    presets: {},
+};
+describe('@shoppex/builder-runtime', () => {
+    test('reads direct and nested content values', () => {
+        const settings = createSettings();
+        expect(getBuilderContentString(settings, 'hero.title')).toBe('Launch sale');
+        expect(getBuilderContentList(settings, 'faq.items')).toEqual([{ question: 'Can I edit sections?', answer: 'Yes' }]);
+    });
+    test('preserves intentionally empty content strings', () => {
+        const settings = createSettings();
+        settings.theme.content['hero.subtitle'] = '';
+        expect(getBuilderContentString(settings, 'hero.subtitle', 'Default subtitle')).toBe('');
+    });
+    test('resolves page blocks', () => {
+        const settings = createSettings();
+        expect(getPageBlocks(settings, 'home')).toHaveLength(1);
+        expect(getPageBlocks(settings, 'missing')).toEqual([]);
+    });
+    test('resolves style slots with breakpoint fallback and block override', () => {
+        const settings = createSettings();
+        const block = settings.theme.layout.home.blocks[0];
+        expect(resolveStyleSlotValue(settings, 'button.radius', { breakpoint: 'lg' })).toBe(12);
+        expect(resolveStyleSlotValue(settings, 'button.radius', { block, breakpoint: 'md' })).toBe(14);
+    });
+    test('emits CSS variables with responsive media blocks', () => {
+        const css = createBuilderCss(createSettings());
+        expect(css).toContain('--builder-button-radius: 8px;');
+        expect(css).toContain('--builder-color-primary: #ff5500;');
+        expect(css).toContain('@media (min-width: 768px)');
+        expect(css).toContain('--builder-button-radius: 12px;');
+    });
+    test('checks block limits against the manifest', () => {
+        const settings = createSettings();
+        expect(canAddBlock(settings, manifest, 'home', 'hero')).toBe(true);
+        expect(canAddBlock(settings, manifest, 'home', 'faq')).toBe(false);
+    });
+    test('merges block defaults from the manifest', () => {
+        const block = createBlockInstance({
+            id: 'hero-2',
+            type: 'hero',
+            settings: {},
+        });
+        expect(resolveBlockSettings(block, manifest)).toEqual({ title: 'Default hero' });
+    });
+    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({
+            'data-builder-slot': 'button.radius',
+            'data-builder-block': 'hero-1',
+        });
+        expect(builderBlock('hero-1', 'hero')).toEqual({
+            'data-builder-block': 'hero-1',
+            'data-builder-block-type': 'hero',
+        });
+    });
+});

package/dist/content.d.ts

@@ -3,6 +3,12 @@ export type JsonRecord = Record<string, unknown>;
 export declare function getBuilderContentValue(settings: BuilderSettings, path: string): unknown;
 export declare function getBuilderContentString(settings: BuilderSettings, path: string, fallback?: string): string | undefined;
 export declare function getBuilderContentList<T = unknown>(settings: BuilderSettings, path: string, fallback?: T[]): T[];
+export type NormalizedGalleryItem = {
+    url: string;
+    alt?: string;
+    caption?: string;
+};
+export declare function normalizeGalleryItems(raw: unknown): NormalizedGalleryItem[];
 export declare function getBuilderContentRecord(settings: BuilderSettings): JsonRecord;
 export declare function getBlockSettingValue<T = unknown>(settings: BuilderSettings, input: {
     pageId: string;

package/dist/content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../src/content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEjD,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAQvF;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAGtH;AAED,wBAAgB,qBAAqB,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,CAAC,EAAO,GAAG,CAAC,EAAE,CAGnH;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,eAAe,GAAG,UAAU,CAE7E;AAED,wBAAgB,oBAAoB,CAAC,CAAC,GAAG,OAAO,EAC9C,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,CAAC,CAAA;CAAE,GACpE,CAAC,CAYH"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../src/content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEjD,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAEvF;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAGtH;AAED,wBAAgB,qBAAqB,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,CAAC,EAAO,GAAG,CAAC,EAAE,CAGnH;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,OAAO,GAAG,qBAAqB,EAAE,CA+B3E;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,eAAe,GAAG,UAAU,CAE7E;AAED,wBAAgB,oBAAoB,CAAC,CAAC,GAAG,OAAO,EAC9C,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,CAAC,CAAA;CAAE,GACpE,CAAC,CAaH"}

package/dist/content.js

@@ -1,9 +1,6 @@
+import { resolveManifestSettingRecordValue } from './manifest-setting-paths.js';
 export function getBuilderContentValue(settings, path) {
-    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, path, fallback) {
     const value = getBuilderContentValue(settings, path);
@@ -13,6 +10,32 @@ export function getBuilderContentList(settings, path, fallback = []) {
     const value = getBuilderContentValue(settings, path);
     return Array.isArray(value) ? value : fallback;
 }
+export function normalizeGalleryItems(raw) {
+    if (!Array.isArray(raw)) {
+        return [];
+    }
+    const items = [];
+    for (const entry of raw) {
+        if (typeof entry !== 'object' || entry === null) {
+            continue;
+        }
+        const record = entry;
+        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) {
     return settings.theme.content;
 }
@@ -21,8 +44,9 @@ export function getBlockSettingValue(settings, input) {
     if (!block) {
         return input.fallback;
     }
-    if (Object.prototype.hasOwnProperty.call(block.settings, input.path)) {
-        return block.settings[input.path];
+    const resolved = resolveManifestSettingRecordValue(block.settings, input.path);
+    if (resolved !== undefined) {
+        return resolved;
     }
     const nested = getByDottedPath(block.settings, input.path);
     return nested === undefined ? input.fallback : nested;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './manifest-setting-paths.js';
 export * from './preview-fixtures.js';
 export * from './product-page.js';
 export * from './standard-product-page.js';
@@ -8,4 +9,7 @@ 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';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './manifest-setting-paths.js';
 export * from './preview-fixtures.js';
 export * from './product-page.js';
 export * from './standard-product-page.js';
@@ -8,3 +9,6 @@ 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/dist/manifest-setting-paths.d.ts

@@ -0,0 +1,5 @@
+import type { JsonRecord } from './content.js';
+export declare function toSnakeCaseManifestSegment(value: string): string;
+export declare function toSnakeCaseManifestPath(path: string): string;
+export declare function resolveManifestSettingRecordValue(record: JsonRecord, path: string): unknown;
+//# sourceMappingURL=manifest-setting-paths.d.ts.map

package/dist/manifest-setting-paths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest-setting-paths.d.ts","sourceRoot":"","sources":["../src/manifest-setting-paths.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKhE;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAM5D;AAgBD,wBAAgB,iCAAiC,CAC/C,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,MAAM,GACX,OAAO,CAoBT"}

package/dist/manifest-setting-paths.js

@@ -0,0 +1,40 @@
+export function toSnakeCaseManifestSegment(value) {
+    return value
+        .replace(/([a-z0-9])([A-Z])/g, '$1_$2')
+        .replace(/[\s-]+/g, '_')
+        .toLowerCase();
+}
+export function toSnakeCaseManifestPath(path) {
+    return path
+        .split('.')
+        .filter(Boolean)
+        .map(toSnakeCaseManifestSegment)
+        .join('.');
+}
+function getByDottedPath(record, path) {
+    let current = record;
+    for (const segment of path.split('.')) {
+        if (!current || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[segment];
+    }
+    return current;
+}
+export function resolveManifestSettingRecordValue(record, path) {
+    if (Object.prototype.hasOwnProperty.call(record, path)) {
+        return record[path];
+    }
+    const snakePath = toSnakeCaseManifestPath(path);
+    if (snakePath !== path && Object.prototype.hasOwnProperty.call(record, snakePath)) {
+        return record[snakePath];
+    }
+    const nested = getByDottedPath(record, path);
+    if (nested !== undefined) {
+        return nested;
+    }
+    if (snakePath !== path) {
+        return getByDottedPath(record, snakePath);
+    }
+    return undefined;
+}

package/dist/merchant-custom-page.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentType, ReactNode } from 'react';
+import { type BuilderBlockRegistry } from './react.js';
+type CustomEmbedProps = {
+    embedHtml?: string;
+    height?: number;
+    autoResize?: boolean;
+    width?: 'full' | 'boxed' | 'embed';
+};
+type TextBlockProps = {
+    eyebrow?: string;
+    title?: string;
+    body?: string;
+    alignment?: 'left' | 'center' | 'right';
+    ctaLabel?: string;
+    ctaHref?: string;
+    styleBackground?: string;
+    styleAccentColor?: string;
+};
+export type MerchantCustomPageRegistryOptions = {
+    pageId: string;
+    CustomEmbed: ComponentType<CustomEmbedProps>;
+    TextBlock?: ComponentType<TextBlockProps>;
+};
+export declare function createMerchantCustomPageRegistry(options: MerchantCustomPageRegistryOptions): BuilderBlockRegistry;
+export declare function MerchantCustomPageBuilderView({ pageId, registry, className, children, }: {
+    pageId: string;
+    registry: BuilderBlockRegistry;
+    className?: string;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function useMerchantCustomPageRegistry(options: MerchantCustomPageRegistryOptions | null): BuilderBlockRegistry | null;
+export declare function useMerchantCustomPageView(slug: string | undefined, components: Pick<MerchantCustomPageRegistryOptions, 'CustomEmbed' | 'TextBlock'>): {
+    customPage: {
+        id: string;
+        title: string;
+        slug: string;
+        visible: boolean;
+        layout: {
+            blocks: {
+                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;
+            }[];
+        };
+        seo?: {
+            title?: string | undefined;
+            description?: string | undefined;
+        } | undefined;
+    } | undefined;
+    registry: BuilderBlockRegistry | null;
+    hasBuilderContent: boolean;
+};
+export {};
+//# sourceMappingURL=merchant-custom-page.d.ts.map

package/dist/merchant-custom-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merchant-custom-page.d.ts","sourceRoot":"","sources":["../src/merchant-custom-page.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EAAsD,KAAK,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAG3G,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;CACpC,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;CAC3C,CAAC;AAYF,wBAAgB,gCAAgC,CAC9C,OAAO,EAAE,iCAAiC,GACzC,oBAAoB,CAqDtB;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,kDAaA;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,iCAAiC,GAAG,IAAI,GAChD,oBAAoB,GAAG,IAAI,CAK7B;AAED,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,UAAU,EAAE,IAAI,CAAC,iCAAiC,EAAE,aAAa,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;EAsBjF"}

package/dist/merchant-custom-page.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { findCustomPageBySlug } from '@shoppex/builder-contracts';
+import { useMemo } from 'react';
+import { builderBlock } from './attributes.js';
+import { readManifestStyleBlockProps } from './block-style-settings.js';
+import { BuilderPage, useBuilderRuntime, useThemePageBlocks } from './react.js';
+import { YouTubeEmbedBuilderBlock } from './YouTubeEmbedBuilderBlock.js';
+function readStringSetting(block, key) {
+    const value = block.settings[key];
+    return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+function readNumberSetting(block, key) {
+    const value = block.settings[key];
+    return typeof value === 'number' && value > 0 ? value : undefined;
+}
+export function createMerchantCustomPageRegistry(options) {
+    const { pageId, CustomEmbed, TextBlock } = options;
+    const registry = {
+        'youtube-embed': ({ block }) => (_jsx(YouTubeEmbedBuilderBlock, { block: block, pageId: pageId })),
+        'custom-html': ({ block }) => {
+            const styleProps = readManifestStyleBlockProps(block.settings);
+            const width = block.settings.width;
+            return (_jsx("div", { "data-page-id": pageId, ...builderBlock(block.id, block.type), style: Object.keys(styleProps).length > 0 ? styleProps : undefined, children: _jsx(CustomEmbed, { embedHtml: readStringSetting(block, 'embedHtml'), height: readNumberSetting(block, 'height'), autoResize: block.settings.autoResize === true, width: width === 'full' || width === 'boxed' || width === 'embed'
+                        ? width
+                        : 'embed' }) }, block.id));
+        },
+    };
+    if (TextBlock) {
+        registry['text-block'] = ({ block }) => (_jsx("div", { "data-page-id": pageId, ...builderBlock(block.id, block.type), children: _jsx(TextBlock, { eyebrow: readStringSetting(block, 'eyebrow'), title: readStringSetting(block, 'title'), body: readStringSetting(block, 'body'), alignment: readStringSetting(block, 'alignment') ??
+                    undefined, ctaLabel: readStringSetting(block, 'ctaLabel'), ctaHref: readStringSetting(block, 'ctaHref'), styleBackground: readStringSetting(block, 'style.background'), styleAccentColor: readStringSetting(block, 'style.accentColor') }) }, block.id));
+    }
+    return registry;
+}
+export function MerchantCustomPageBuilderView({ pageId, registry, className, children, }) {
+    const blocks = useThemePageBlocks(pageId, []);
+    if (blocks.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: className, children: [children, _jsx(BuilderPage, { pageId: pageId, blocks: blocks, registry: registry, context: null })] }));
+}
+export function useMerchantCustomPageRegistry(options) {
+    return useMemo(() => (options ? createMerchantCustomPageRegistry(options) : null), [options?.pageId, options?.CustomEmbed, options?.TextBlock]);
+}
+export function useMerchantCustomPageView(slug, components) {
+    const { settings } = useBuilderRuntime();
+    const customPage = slug ? findCustomPageBySlug(settings, slug) : undefined;
+    const registry = useMerchantCustomPageRegistry(customPage
+        ? {
+            pageId: customPage.id,
+            CustomEmbed: components.CustomEmbed,
+            TextBlock: components.TextBlock,
+        }
+        : null);
+    const builderBlockCount = customPage
+        ? (settings.theme.layout[customPage.id]?.blocks.length ?? 0)
+        : 0;
+    return {
+        customPage,
+        registry,
+        hasBuilderContent: builderBlockCount > 0,
+    };
+}

package/dist/preview-mode.d.ts

@@ -0,0 +1,2 @@
+export declare function isBuilderPreviewMode(location?: Pick<Location, 'search'>): boolean;
+//# sourceMappingURL=preview-mode.d.ts.map

package/dist/preview-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-mode.d.ts","sourceRoot":"","sources":["../src/preview-mode.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAAC,QAAQ,GAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAmB,GAAG,OAAO,CAOlG"}

package/dist/preview-mode.js

@@ -0,0 +1,7 @@
+export function isBuilderPreviewMode(location = window.location) {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const mode = new URLSearchParams(location.search).get('shoppex-preview-mode');
+    return mode === 'theme' || mode === 'builder';
+}

package/dist/react-runtime.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=react-runtime.test.d.ts.map

package/dist/react-runtime.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-runtime.test.d.ts","sourceRoot":"","sources":["../src/react-runtime.test.tsx"],"names":[],"mappings":""}