npm - @shoppexio/builder-runtime - Versions diffs - 0.1.2 → 0.1.3 - Mend

@shoppexio/builder-runtime 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/YouTubeEmbed.d.ts +13 -0
package/dist/YouTubeEmbed.d.ts.map +1 -0
package/dist/YouTubeEmbed.js +49 -0
package/dist/YouTubeEmbedBuilderBlock.d.ts +7 -0
package/dist/YouTubeEmbedBuilderBlock.d.ts.map +1 -0
package/dist/YouTubeEmbedBuilderBlock.js +16 -0
package/dist/block-style-settings.d.ts +5 -0
package/dist/block-style-settings.d.ts.map +1 -0
package/dist/block-style-settings.js +16 -0
package/dist/builder-runtime.test.d.ts +2 -0
package/dist/builder-runtime.test.d.ts.map +1 -0
package/dist/builder-runtime.test.js +115 -0
package/dist/content.d.ts +6 -0
package/dist/content.d.ts.map +1 -1
package/dist/content.js +31 -7
package/dist/index.d.ts +4 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +4 -0
package/dist/manifest-setting-paths.d.ts +5 -0
package/dist/manifest-setting-paths.d.ts.map +1 -0
package/dist/manifest-setting-paths.js +40 -0
package/dist/merchant-custom-page.d.ts +57 -0
package/dist/merchant-custom-page.d.ts.map +1 -0
package/dist/merchant-custom-page.js +63 -0
package/dist/preview-mode.d.ts +2 -0
package/dist/preview-mode.d.ts.map +1 -0
package/dist/preview-mode.js +7 -0
package/dist/react-runtime.test.d.ts +2 -0
package/dist/react-runtime.test.d.ts.map +1 -0
package/dist/react-runtime.test.js +332 -0
package/dist/react.d.ts +6 -0
package/dist/react.d.ts.map +1 -1
package/dist/react.js +16 -4
package/dist/youtube-embed-block.d.ts +10 -0
package/dist/youtube-embed-block.d.ts.map +1 -0
package/dist/youtube-embed-block.js +19 -0
package/dist/youtube.d.ts +5 -0
package/dist/youtube.d.ts.map +1 -0
package/dist/youtube.js +52 -0
package/package.json +1 -1
package/src/YouTubeEmbed.tsx +105 -0
package/src/YouTubeEmbedBuilderBlock.tsx +49 -0
package/src/block-style-settings.ts +24 -0
package/src/builder-runtime.test.ts +36 -0
package/src/content.ts +44 -9
package/src/index.ts +4 -0
package/src/manifest-setting-paths.test.ts +23 -0
package/src/manifest-setting-paths.ts +55 -0
package/src/merchant-custom-page.tsx +161 -0
package/src/preview-mode.ts +8 -0
package/src/react.tsx +29 -4
package/src/youtube-embed-block.test.ts +76 -0
package/src/youtube-embed-block.ts +28 -0
package/src/youtube-embed-builder-block.test.tsx +166 -0
package/src/youtube.test.ts +48 -0
package/src/youtube.ts +66 -0

package/dist/react-runtime.test.js ADDED Viewed

@@ -0,0 +1,332 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { createEmptyBuilderSettings } from '@shoppex/builder-contracts';
+import { JSDOM } from 'jsdom';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BuilderBlockFrame, BuilderBlockProvider, BuilderPage, BuilderRuntimePreviewProvider, useBuilderContent, useBuilderContentRecord, } from './react.js';
+function createSettings(revision, title) {
+    return {
+        ...createEmptyBuilderSettings(revision),
+        theme: {
+            content: {
+                'hero.title': title,
+            },
+            layout: {
+                home: {
+                    blocks: [
+                        {
+                            id: 'hero-1',
+                            type: 'hero',
+                            visible: true,
+                            settings: {},
+                        },
+                    ],
+                },
+            },
+            style_slots: {},
+            pages: [],
+            terms: {},
+        },
+    };
+}
+function Probe() {
+    const title = useBuilderContent('hero.title', '');
+    return (_jsx("section", { "data-builder-block": "hero-1", "data-builder-block-type": "hero", "data-page-id": "home", children: _jsx("h1", { "data-builder-content": "hero.title", children: title }) }));
+}
+function FallbackProbe() {
+    const title = useBuilderContent('hero.title', 'Default title');
+    return _jsx("h1", { "data-builder-content": "hero.title", children: title });
+}
+function SlotButtonProbe() {
+    return (_jsx("section", { "data-builder-block": "hero-1", "data-builder-block-type": "hero", "data-page-id": "home", children: _jsx("button", { type: "button", "data-builder-slot": "button.background", children: "Buy now" }) }));
+}
+function ScopedProbe() {
+    return (_jsx(BuilderBlockProvider, { block: {
+            id: 'hero-1',
+            type: 'hero',
+            visible: true,
+            settings: {
+                title: 'Scoped title',
+                subtitle: 'Scoped subtitle',
+            },
+        }, children: _jsx(ScopedProbeContent, {}) }));
+}
+function ScopedProbeContent() {
+    const title = useBuilderContent('hero.title', '');
+    const subtitle = useBuilderContent('hero.subtitle', '');
+    const contentRecord = useBuilderContentRecord();
+    return (_jsxs(_Fragment, { children: [_jsx("h1", { "data-testid": "scoped-title", children: title }), _jsx("p", { "data-testid": "scoped-subtitle", children: subtitle }), _jsx("span", { "data-testid": "scoped-record", children: String(contentRecord.hero.title) })] }));
+}
+function HeroBlock({ block }) {
+    const title = useBuilderContent('hero.title', '');
+    return (_jsx(BuilderBlockFrame, { as: "section", pageId: "home", block: block, children: _jsx("h1", { "data-builder-content": "hero.title", children: title }) }));
+}
+describe('BuilderRuntimePreviewProvider', () => {
+    let dom;
+    let root;
+    let postedMessages;
+    let parentWindow;
+    beforeEach(() => {
+        postedMessages = [];
+        parentWindow = {
+            postMessage: (message) => {
+                postedMessages.push(message);
+            },
+        };
+        dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', {
+            url: 'https://preview.shoppex.test/?shoppex-preview-mode=theme',
+            referrer: 'https://dashboard.shoppex.test/theme/editor',
+        });
+        Object.defineProperty(dom.window, 'parent', {
+            configurable: true,
+            value: parentWindow,
+        });
+        Object.assign(globalThis, {
+            window: dom.window,
+            document: dom.window.document,
+            navigator: dom.window.navigator,
+            Element: dom.window.Element,
+            HTMLElement: dom.window.HTMLElement,
+            HTMLImageElement: dom.window.HTMLImageElement,
+            Node: dom.window.Node,
+            MouseEvent: dom.window.MouseEvent,
+            MessageEvent: dom.window.MessageEvent,
+            CustomEvent: dom.window.CustomEvent,
+            CSS: {
+                escape: (value) => value.replaceAll('"', '\\"'),
+            },
+            IS_REACT_ACT_ENVIRONMENT: true,
+        });
+        root = createRoot(dom.window.document.getElementById('root'));
+    });
+    afterEach(async () => {
+        await act(async () => {
+            root.unmount();
+        });
+        dom.window.close();
+        const globals = globalThis;
+        for (const key of [
+            'window',
+            'document',
+            'navigator',
+            'Element',
+            'HTMLElement',
+            'HTMLImageElement',
+            'Node',
+            'MouseEvent',
+            'MessageEvent',
+            'CustomEvent',
+            'CSS',
+            'IS_REACT_ACT_ENVIRONMENT',
+        ]) {
+            delete globals[key];
+        }
+    });
+    test('sends READY with the initial revision', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Initial title'), children: _jsx(Probe, {}) }));
+        });
+        expect(postedMessages).toContainEqual({
+            type: 'READY',
+            revision: 3,
+            health: {
+                reactMounted: true,
+                builderRuntimeProvider: true,
+                protocolVersion: 2,
+            },
+        });
+        expect(dom.window.document.body.textContent).toContain('Initial title');
+    });
+    test('normalizes mixed initial builder settings before strict validation', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: {
+                    version: 2,
+                    revision: 9,
+                    theme: {
+                        content: {
+                            'hero.title': 'Mixed title',
+                        },
+                        layout: {
+                            home: {
+                                sections: [
+                                    {
+                                        id: 'hero',
+                                        visible: true,
+                                    },
+                                ],
+                            },
+                        },
+                        tokens_override: {
+                            colors: {
+                                primary: '#111827',
+                            },
+                        },
+                    },
+                }, children: _jsx(Probe, {}) }));
+        });
+        expect(postedMessages).toContainEqual({
+            type: 'READY',
+            revision: 9,
+            health: {
+                reactMounted: true,
+                builderRuntimeProvider: true,
+                protocolVersion: 2,
+            },
+        });
+        expect(dom.window.document.body.textContent).toContain('Mixed title');
+    });
+    test('preserves intentionally empty content strings in hooks', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(4, ''), children: _jsx(FallbackProbe, {}) }));
+        });
+        expect(dom.window.document.body.textContent).toBe('');
+    });
+    test('responds to explicit READY requests when the parent missed the initial message', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Initial title'), children: _jsx(Probe, {}) }));
+        });
+        postedMessages.length = 0;
+        await act(async () => {
+            dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
+                origin: 'https://dashboard.shoppex.test',
+                source: parentWindow,
+                data: {
+                    type: 'REQUEST_READY',
+                },
+            }));
+        });
+        expect(postedMessages).toEqual([{
+                type: 'READY',
+                revision: 3,
+                health: {
+                    reactMounted: true,
+                    builderRuntimeProvider: true,
+                    protocolVersion: 2,
+                },
+            }]);
+    });
+    test('reports iframe runtime errors to the builder parent', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(6, 'Initial title'), children: _jsx(Probe, {}) }));
+        });
+        postedMessages.length = 0;
+        dom.window.dispatchEvent(new dom.window.ErrorEvent('error', {
+            error: new Error('Preview crashed'),
+            message: 'Preview crashed',
+        }));
+        expect(postedMessages).toEqual([expect.objectContaining({
+                type: 'PREVIEW_ERROR',
+                revision: 6,
+                message: 'Preview crashed',
+                source: 'error',
+            })]);
+    });
+    test('applies preview state and acknowledges the exact revision', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Initial title'), children: _jsx(Probe, {}) }));
+        });
+        await act(async () => {
+            dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
+                origin: 'https://dashboard.shoppex.test',
+                source: parentWindow,
+                data: {
+                    type: 'APPLY_STATE',
+                    revision: 4,
+                    state: createSettings(4, 'Updated title'),
+                },
+            }));
+        });
+        expect(postedMessages).toContainEqual({ type: 'APPLIED', revision: 4 });
+        expect(dom.window.document.body.textContent).toContain('Updated title');
+    });
+    test('renders page blocks through a typed registry and shared block frame', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Registry title'), children: _jsx(BuilderPage, { pageId: "home", registry: {
+                        hero: HeroBlock,
+                    }, context: {} }) }));
+        });
+        const renderedBlock = dom.window.document.querySelector('[data-builder-block="hero-1"]');
+        expect(renderedBlock?.getAttribute('data-page-id')).toBe('home');
+        expect(renderedBlock?.getAttribute('data-builder-block-type')).toBe('hero');
+        expect(dom.window.document.body.textContent).toContain('Registry title');
+    });
+    test('prefers scoped block settings over global builder content inside a block provider', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Global title'), children: _jsx(ScopedProbe, {}) }));
+        });
+        expect(dom.window.document.querySelector('[data-testid="scoped-title"]')?.textContent).toBe('Scoped title');
+        expect(dom.window.document.querySelector('[data-testid="scoped-subtitle"]')?.textContent).toBe('Scoped subtitle');
+        expect(dom.window.document.querySelector('[data-testid="scoped-record"]')?.textContent).toBe('Scoped title');
+    });
+    test('rejects stale preview revisions without changing rendered content', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(5, 'Current title'), children: _jsx(Probe, {}) }));
+        });
+        await act(async () => {
+            dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
+                origin: 'https://dashboard.shoppex.test',
+                source: parentWindow,
+                data: {
+                    type: 'APPLY_STATE',
+                    revision: 4,
+                    state: createSettings(4, 'Stale title'),
+                },
+            }));
+        });
+        expect(postedMessages).toContainEqual({
+            type: 'APPLY_FAILED',
+            revision: 4,
+            error: 'Stale builder revision',
+        });
+        expect(dom.window.document.body.textContent).toContain('Current title');
+    });
+    test('emits block selection details from iframe clicks', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(7, 'Clickable title'), children: _jsx(Probe, {}) }));
+        });
+        const heading = dom.window.document.querySelector('h1');
+        heading?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, cancelable: true }));
+        expect(postedMessages).toContainEqual({
+            type: 'ELEMENT_CLICKED',
+            revision: 7,
+            selection: {
+                pageId: 'home',
+                blockId: 'hero-1',
+                blockType: 'hero',
+                contentPath: 'hero.title',
+                elementType: 'text',
+            },
+        });
+    });
+    test('classifies buttons before style slots for inspector clicks', async () => {
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(7, 'Clickable title'), children: _jsx(SlotButtonProbe, {}) }));
+        });
+        const button = dom.window.document.querySelector('button');
+        button?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, cancelable: true }));
+        expect(postedMessages).toContainEqual({
+            type: 'ELEMENT_CLICKED',
+            revision: 7,
+            selection: {
+                pageId: 'home',
+                blockId: 'hero-1',
+                blockType: 'hero',
+                slotId: 'button.background',
+                elementType: 'button',
+            },
+        });
+    });
+    test('does not intercept clicks outside trusted builder preview embeds', async () => {
+        dom.reconfigure({
+            url: 'https://preview.shoppex.test/',
+        });
+        await act(async () => {
+            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(7, 'Clickable title'), children: _jsx(Probe, {}) }));
+        });
+        postedMessages.length = 0;
+        const heading = dom.window.document.querySelector('h1');
+        heading?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, cancelable: true }));
+        expect(postedMessages).toEqual([]);
+    });
+});

package/dist/react.d.ts CHANGED Viewed

@@ -110,5 +110,11 @@ export declare function resolvePreviewReloadTarget(location: Pick<Location, 'sea
 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 { YouTubeEmbed, YouTubeEmbedPreviewPlaceholder, type YouTubeEmbedProps } from './YouTubeEmbed.js';
+export { YouTubeEmbedBuilderBlock, type YouTubeEmbedBuilderBlockProps, } from './YouTubeEmbedBuilderBlock.js';
+export { createMerchantCustomPageRegistry, MerchantCustomPageBuilderView, useMerchantCustomPageRegistry, useMerchantCustomPageView, type MerchantCustomPageRegistryOptions, } from './merchant-custom-page.js';
+export { isBuilderPreviewMode } from './preview-mode.js';
+export { getYouTubeEmbedBlockStyleProps, readYouTubeEmbedBlockSettings, type YouTubeEmbedBlockInstance, } from './youtube-embed-block.js';
+export { readManifestStyleBlockProps } from './block-style-settings.js';
 export { getBuilderPreviewReviewFixtures } from './preview-fixtures.js';
 //# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAoB,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAS5H,OAAO,EAQL,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;~~AAUf~~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~~AA8BD~~,wBAAgB,oBAAoB,CAAC,KAAK,EAAE;IAC1C,OAAO,EAAE,MAAM,GAAG,YAAY,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,gEA0CA;AAED,OAAO,EACL,qBAAqB,EACrB,2BAA2B,EAC3B,wBAAwB,GACzB,MAAM,0BAA0B,CAAC;AAElC,wBAAgB,uBAAuB,IAAI,OAAO,CAMjD;AA2CD,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAC,EAC3C,WAAW,EAAE,OAAO,GACnB,MAAM,GAAG,IAAI,CAMf;~~AAqjBD~~,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,4BAA4B,EAC5B,mBAAmB,EACnB,6BAA6B,GAC9B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,kCAAkC,EAClC,8BAA8B,EAC9B,4BAA4B,EAC5B,2BAA2B,EAC3B,4BAA4B,EAC5B,mCAAmC,EACnC,6BAA6B,EAC7B,4BAA4B,EAC5B,oCAAoC,EACpC,sCAAsC,GACvC,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,gCAAgC,EAChC,mCAAmC,EACnC,iCAAiC,EACjC,wBAAwB,EACxB,2BAA2B,EAC3B,sBAAsB,GACvB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,+BAA+B,EAAE,MAAM,uBAAuB,CAAC"}
1	+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}

package/dist/react.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { BuilderSettingsSchema, PreviewMessageSchema, createEmptyBuilderSettings, isTrustedPreviewParentOrigin, migrateLegacyBuilderSettings, normalizeDedicatedPageId, } from '@shoppex/builder-contracts';
 import { createElement, createContext, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { getBlockSettingValue, getBuilderContentList, getBuilderContentRecord, getBuilderContentString, getBuilderContentValue, } from './content.js';
+import { resolveManifestSettingRecordValue } from './manifest-setting-paths.js';
 import { BUILDER_PREVIEW_REVIEWS } from './preview-fixtures.js';
 import { createBuilderCss } from './css-vars.js';
 import { builderBlock } from './attributes.js';
@@ -352,12 +353,16 @@ function useScopedBuilderContentValue(path) {
     const block = useContext(BuilderBlockContext);
     if (!block)
         return undefined;
-    if (Object.prototype.hasOwnProperty.call(block.settings, path)) {
-        return block.settings[path];
+    const resolved = resolveManifestSettingRecordValue(block.settings, path);
+    if (resolved !== undefined) {
+        return resolved;
     }
     const shortPath = path.startsWith(`${block.type}.`) ? path.slice(block.type.length + 1) : path.split('.').at(-1);
-    if (shortPath && Object.prototype.hasOwnProperty.call(block.settings, shortPath)) {
-        return block.settings[shortPath];
+    if (shortPath) {
+        const shortResolved = resolveManifestSettingRecordValue(block.settings, shortPath);
+        if (shortResolved !== undefined) {
+            return shortResolved;
+        }
     }
     const nested = shortPath ? getNestedBuilderSetting(block.settings, shortPath) : undefined;
     return nested ?? getNestedBuilderSetting(block.settings, path);
@@ -661,6 +666,7 @@ function installBuilderPreviewHoverInspector() {
                     // we keep a small override table for these.
                     const SLUG_LABEL_OVERRIDES = {
                         'custom-html': 'Custom Embed',
+                        'youtube-embed': 'YouTube Video',
                     };
                     const override = SLUG_LABEL_OVERRIDES[type];
                     const label = override ?? type
@@ -964,4 +970,10 @@ function installBuilderDirectManipulation(postMessage, getRevision) {
 }
 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 { YouTubeEmbed, YouTubeEmbedPreviewPlaceholder } from './YouTubeEmbed.js';
+export { YouTubeEmbedBuilderBlock, } from './YouTubeEmbedBuilderBlock.js';
+export { createMerchantCustomPageRegistry, MerchantCustomPageBuilderView, useMerchantCustomPageRegistry, useMerchantCustomPageView, } from './merchant-custom-page.js';
+export { isBuilderPreviewMode } from './preview-mode.js';
+export { getYouTubeEmbedBlockStyleProps, readYouTubeEmbedBlockSettings, } from './youtube-embed-block.js';
+export { readManifestStyleBlockProps } from './block-style-settings.js';
 export { getBuilderPreviewReviewFixtures } from './preview-fixtures.js';

package/dist/youtube-embed-block.d.ts ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@shoppexio/builder-runtime",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Theme-side Builder v2 runtime helpers for Shoppex storefront themes",
   "type": "module",
   "repository": {

package/src/YouTubeEmbed.tsx ADDED Viewed

@@ -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>
+  );
+}