lib-pixelbuild 0.2.3 → 0.3.4

package/dist/builders/PageBuilder.js

@@ -5,8 +5,8 @@ import { BlockRenderer } from '../renderers/BlockRenderer.js';
 import { buildResponsiveCssForStyles } from '../utils/responsiveStyles.js';
 import { buildFontFamily } from '../utils/fonts.js';
 function mergeStyles(websiteStyles, pageStyles) {
-    const merged = Object.assign({}, websiteStyles);
-    for (const key of Object.keys(pageStyles)) {
+    const merged = Object.assign({}, (websiteStyles || {}));
+    for (const key of Object.keys(pageStyles || {})) {
         const val = pageStyles[key];
         if (val !== '' && val !== null && val !== undefined) {
             ;
@@ -21,7 +21,7 @@ function toCssValue(val) {
     return undefined;
 }
 const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const mergedStyles = useMemo(() => mergeStyles(website.styles, page.styles), [website.styles, page.styles]);
     const designSystem = website.designSystem;
     const pageStyle = useMemo(() => {
@@ -60,6 +60,6 @@ const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
         (_d = designSystem === null || designSystem === void 0 ? void 0 : designSystem.typography) === null || _d === void 0 ? void 0 : _d.fontSizeBase,
         mergedStyles
     ]);
-    return (_jsxs(Suspense, { fallback: _jsx("div", { children: website.properties.loadingMessage }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsxs("div", { style: pageStyle, "data-pb-page": true, children: [_jsx("style", { children: buildResponsiveCssForStyles('[data-pb-page]', page.styles) }), _jsx(BlockRenderer, { blocks: page.blocks, editionMode: editionMode, componentDefaults: website.componentDefaults }), page.blocks.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhum conte\u00FAdo adicionado." }))] })] }));
+    return (_jsxs(Suspense, { fallback: _jsx("div", { children: ((_e = website.properties) === null || _e === void 0 ? void 0 : _e.loadingMessage) || 'Carregando...' }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsxs("div", { style: pageStyle, "data-pb-page": true, children: [_jsx("style", { children: buildResponsiveCssForStyles('[data-pb-page]', page.styles) }), _jsx(BlockRenderer, { blocks: page.blocks, editionMode: editionMode, componentDefaults: website.componentDefaults }), (page.blocks || []).length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhum conte\u00FAdo adicionado." }))] })] }));
 });
 export { PageBuilder };

package/dist/components/VideoComponent.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function VideoComponent({ component }: {
+    readonly component: ComponentType;
+}): import("react").JSX.Element;

package/dist/components/VideoComponent.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { getBoolean, getString } from '../utils/propertyUtils.js';
+function toEmbed(src) {
+    const value = src.trim();
+    if (!value)
+        return null;
+    const youtube = value.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/);
+    if (youtube)
+        return { kind: 'iframe', src: `https://www.youtube.com/embed/${youtube[1]}` };
+    const vimeo = value.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+    if (vimeo)
+        return { kind: 'iframe', src: `https://player.vimeo.com/video/${vimeo[1]}` };
+    return { kind: 'native', src: value };
+}
+function formatTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return '0:00';
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
+const playIcon = (_jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M8 5v14l11-7z" }) }));
+const pauseIcon = (_jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M6 5h4v14H6zM14 5h4v14h-4z" }) }));
+const fullscreenIcon = (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }), _jsx("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }), _jsx("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }), _jsx("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })] }));
+function NativeVideo({ src, poster, showFullscreen, showSettings, centerPlayButton, showProgressBar }) {
+    const containerRef = useRef(null);
+    const videoRef = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const customControls = centerPlayButton || !showProgressBar;
+    const togglePlay = useCallback(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        if (video.paused)
+            void video.play();
+        else
+            video.pause();
+    }, []);
+    const seek = useCallback((value) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.currentTime = value;
+        setCurrentTime(value);
+    }, []);
+    const toggleFullscreen = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (document.fullscreenElement)
+            void document.exitFullscreen();
+        else
+            void container.requestFullscreen();
+    }, []);
+    const videoStyle = { width: '100%', height: 'auto', display: 'block', borderRadius: '4px' };
+    if (!customControls) {
+        const controlsList = [
+            !showFullscreen ? 'nofullscreen' : '',
+            !showSettings ? 'nodownload noplaybackrate' : ''
+        ].filter(Boolean).join(' ');
+        return (_jsx("video", { controls: true, preload: "metadata", playsInline: true, src: src, poster: poster || undefined, controlsList: controlsList || undefined, disablePictureInPicture: !showSettings || undefined, style: videoStyle }));
+    }
+    return (_jsxs("div", { ref: containerRef, style: { position: 'relative', width: '100%', borderRadius: '4px', overflow: 'hidden', backgroundColor: '#000' }, children: [_jsx("video", { ref: videoRef, src: src, poster: poster || undefined, preload: "metadata", playsInline: true, onClick: togglePlay, onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onTimeUpdate: () => { var _a, _b; return setCurrentTime((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0); }, onLoadedMetadata: () => { var _a, _b; return setDuration((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0); }, style: { width: '100%', height: 'auto', display: 'block', cursor: 'pointer' } }), _jsx("button", { type: "button", "aria-label": playing ? 'Pausar' : 'Reproduzir', onClick: togglePlay, style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    width: 64,
+                    height: 64,
+                    borderRadius: '50%',
+                    border: 'none',
+                    cursor: 'pointer',
+                    backgroundColor: 'rgba(0,0,0,0.55)',
+                    color: '#fff',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    opacity: playing ? 0 : 1,
+                    pointerEvents: playing ? 'none' : 'auto',
+                    transition: 'opacity 0.15s ease'
+                }, children: playing ? pauseIcon : playIcon }), (showProgressBar || showFullscreen) && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    padding: '10px 12px',
+                    background: 'linear-gradient(transparent, rgba(0,0,0,0.65))'
+                }, children: [showProgressBar && (_jsx("input", { type: "range", min: 0, max: duration || 0, step: 0.1, value: currentTime, onChange: (event) => seek(Number(event.target.value)), style: { flex: 1, accentColor: '#fff' } })), showProgressBar && (_jsxs("span", { style: { color: '#fff', fontSize: 12, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }, children: [formatTime(currentTime), " / ", formatTime(duration)] })), showFullscreen && (_jsx("button", { type: "button", "aria-label": "Tela cheia", onClick: toggleFullscreen, style: { background: 'none', border: 'none', color: '#fff', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: fullscreenIcon }))] }))] }));
+}
+export function VideoComponent({ component }) {
+    const properties = component.properties;
+    const src = getString(properties, 'src', '');
+    const poster = getString(properties, 'poster', '');
+    const fullBleed = getBoolean(properties, 'fullBleed', false);
+    const showFullscreen = getBoolean(properties, 'showFullscreen', true);
+    const showSettings = getBoolean(properties, 'showSettings', true);
+    const centerPlayButton = getBoolean(properties, 'centerPlayButton', false);
+    const showProgressBar = getBoolean(properties, 'showProgressBar', true);
+    const placeholderBackgroundColor = getString(properties, 'placeholderBackgroundColor', '#e0e0e0');
+    const placeholderTextColor = getString(properties, 'placeholderTextColor', '#666');
+    const video = useMemo(() => toEmbed(src), [src]);
+    const content = (video === null || video === void 0 ? void 0 : video.kind) === 'iframe' ? (_jsx("div", { style: { width: '100%', aspectRatio: '16 / 9', borderRadius: '4px', overflow: 'hidden' }, children: _jsx("iframe", { title: "V\u00EDdeo", src: video.src, style: { width: '100%', height: '100%', border: 0, display: 'block' }, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }) })) : (video === null || video === void 0 ? void 0 : video.kind) === 'native' ? (_jsx(NativeVideo, { src: video.src, poster: poster, showFullscreen: showFullscreen, showSettings: showSettings, centerPlayButton: centerPlayButton, showProgressBar: showProgressBar })) : (_jsx("div", { style: {
+            width: '100%',
+            aspectRatio: '16 / 9',
+            backgroundColor: placeholderBackgroundColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '4px',
+            color: placeholderTextColor
+        }, children: "V\u00EDdeo n\u00E3o configurado" }));
+    if (fullBleed) {
+        return (_jsx("div", { "data-pb-component": component.id, style: Object.assign(Object.assign({}, component.styles), { width: 'calc(100% + var(--pb-gutter, 1.5rem))', marginLeft: 'calc(var(--pb-gutter, 1.5rem) * -0.5)', marginRight: 'calc(var(--pb-gutter, 1.5rem) * -0.5)' }), children: content }));
+    }
+    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: content }));
+}

package/dist/factories/ComponentFactory.js

@@ -9,6 +9,7 @@ import { CardComponent } from '../components/CardComponent.js';
 import { MapComponent } from '../components/MapComponent.js';
 import { ButtonsComponent } from '../components/ButtonsComponent.js';
 import { IconComponent } from '../components/IconComponent.js';
+import { VideoComponent } from '../components/VideoComponent.js';
 /**
  * Aplica os estilos padrão do design system (`componentDefaults`) antes dos
  * estilos da instância — o override da instância prevalece.
@@ -46,6 +47,8 @@ export class ComponentFactory {
                 return _jsx(ButtonsComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Icon:
                 return _jsx(IconComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.Video:
+                return _jsx(VideoComponent, { component: resolved }, resolved.id);
             default:
                 throw new Error('Invalid component type: ' + resolved.componentType);
         }

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { SiteLayout, type EmailApiConfig } from './layouts/SiteLayout.js';
 export { PageBuilder } from './builders/PageBuilder.js';
 export { BlockRenderer } from './renderers/BlockRenderer.js';
 export { IconComponent } from './components/IconComponent.js';
+export { VideoComponent } from './components/VideoComponent.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';

package/dist/index.js

@@ -4,6 +4,7 @@ export { SiteLayout } from './layouts/SiteLayout.js';
 export { PageBuilder } from './builders/PageBuilder.js';
 export { BlockRenderer } from './renderers/BlockRenderer.js';
 export { IconComponent } from './components/IconComponent.js';
+export { VideoComponent } from './components/VideoComponent.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';

package/dist/layouts/Footer.js

@@ -5,10 +5,10 @@ import { PbRow } from '../ui/PbRow.js';
 import { PbCol } from '../ui/PbCol.js';
 import { SocialIconsComponent } from '../components/SocialIconsComponent.js';
 export function Footer({ website }) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     const social = (_a = website.properties) === null || _a === void 0 ? void 0 : _a.social;
-    const footer = website.footer.properties;
-    const styles = website.footer.styles;
+    const footerProps = ((_b = website.footer) === null || _b === void 0 ? void 0 : _b.properties) || {};
+    const styles = ((_c = website.footer) === null || _c === void 0 ? void 0 : _c.styles) || {};
     const fluid = styles.fluid || undefined;
     const baseStyle = Object.assign({}, styles);
     delete baseStyle.fluid;
@@ -18,5 +18,5 @@ export function Footer({ website }) {
         flexDirection: 'column',
         alignItems: 'center'
     };
-    return (_jsx(PbContainer, { fluid: fluid || undefined, children: _jsx("footer", { id: "footer", className: "pb-footer", style: { backgroundColor: styles.backgroundColor }, children: _jsxs(PbRow, { children: [_jsx(PbCol, { width: { xs: 12 }, style: { marginBottom: '30px' }, children: social && _jsx(SocialIconsComponent, { social: social, color: styles.socialIconColor || styles.color }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }) }), _jsx(PbCol, { width: { xs: 12 }, style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }) }), _jsxs(PbCol, { width: { xs: 12 }, children: [_jsx("hr", { className: "pb-footer-divider" }), _jsxs("p", { className: "pb-text-center pb-mb-0", style: baseStyle, children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }) }));
+    return (_jsx(PbContainer, { fluid: fluid || undefined, children: _jsx("footer", { id: "footer", className: "pb-footer", style: { backgroundColor: styles.backgroundColor }, children: _jsxs(PbRow, { children: [_jsx(PbCol, { width: { xs: 12 }, style: { marginBottom: '30px' }, children: social && _jsx(SocialIconsComponent, { social: social, color: styles.socialIconColor || styles.color }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize((_d = footerProps.text1) !== null && _d !== void 0 ? _d : '') } }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize((_e = footerProps.text2) !== null && _e !== void 0 ? _e : '') } }) }), _jsx(PbCol, { width: { xs: 12 }, style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize((_f = footerProps.text3) !== null && _f !== void 0 ? _f : '') } }) }), _jsxs(PbCol, { width: { xs: 12 }, children: [_jsx("hr", { className: "pb-footer-divider" }), _jsxs("p", { className: "pb-text-center pb-mb-0", style: baseStyle, children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }) }));
 }

package/dist/layouts/Header.js

@@ -3,8 +3,9 @@ import { useMemo, useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { PbContainer } from '../ui/PbContainer.js';
 export function Header({ website, imageBaseUrl }) {
-    const headerProperties = website.header.properties;
-    const headerStyles = website.header.styles;
+    var _a, _b;
+    const headerProperties = ((_a = website.header) === null || _a === void 0 ? void 0 : _a.properties) || {};
+    const headerStyles = ((_b = website.header) === null || _b === void 0 ? void 0 : _b.styles) || {};
     const location = useLocation();
     const [menuOpen, setMenuOpen] = useState(false);
     const menuPages = useMemo(() => (website.pages || []).filter((p) => p.menu === true).sort((a, b) => (a.menuOrder || 0) - (b.menuOrder || 0)), [website.pages]);

package/dist/layouts/SiteLayout.js

@@ -8,7 +8,7 @@ import { ThemeStyle } from '../designSystem/theme.js';
 import { buildFontFamily, buildGoogleFontsHref } from '../utils/fonts.js';
 import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
 export function SiteLayout({ website, imageBaseUrl, emailApi }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const fontFamily = buildFontFamily((_a = website.styles) === null || _a === void 0 ? void 0 : _a.fontFamily);
     const fontHref = buildGoogleFontsHref((_b = website.styles) === null || _b === void 0 ? void 0 : _b.fontFamily);
     useEffect(() => {
@@ -36,5 +36,5 @@ export function SiteLayout({ website, imageBaseUrl, emailApi }) {
         (_f = (_e = website.properties) === null || _e === void 0 ? void 0 : _e.email) === null || _f === void 0 ? void 0 : _f.recipientName,
         (_h = (_g = website.properties) === null || _g === void 0 ? void 0 : _g.email) === null || _h === void 0 ? void 0 : _h.subject
     ]);
-    return (_jsxs(_Fragment, { children: [_jsx(ThemeStyle, { designSystem: website.designSystem }), fontHref && (_jsxs(Helmet, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: fontHref, rel: "stylesheet" })] })), _jsxs("div", { id: "site-layout", className: "pb-root", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color, fontFamily }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ThemeStyle, { designSystem: website.designSystem }), fontHref && (_jsxs(Helmet, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: fontHref, rel: "stylesheet" })] })), _jsxs("div", { id: "site-layout", className: "pb-root", style: { backgroundColor: (_j = website.styles) === null || _j === void 0 ? void 0 : _j.backgroundColor, color: (_k = website.styles) === null || _k === void 0 ? void 0 : _k.color, fontFamily }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.2.3",
+  "version": "0.3.4",
   "engines": {
     "node": "^24.0.0",
     "npm": ">=10"