lib-pixelbuild 0.3.9 → 0.4.1

package/dist/builders/PageBuilder.js

@@ -3,6 +3,7 @@ import { Suspense, memo, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { BlockRenderer } from '../renderers/BlockRenderer.js';
 import { buildResponsiveCssForStyles } from '../utils/responsiveStyles.js';
+import { collectCustomCss } from '../utils/customCss.js';
 import { buildFontFamily } from '../utils/fonts.js';
 function mergeStyles(websiteStyles, pageStyles) {
     const merged = Object.assign({}, (websiteStyles || {}));
@@ -60,6 +61,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: ((_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." }))] })] }));
+    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("style", { children: collectCustomCss(website, page) }), _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/ButtonsComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbButton } from '../ui/PbButton.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
@@ -27,7 +27,7 @@ const ButtonsComponent = memo(function ButtonsComponent({ component }) {
         containerStyle.alignItems = align;
     else
         containerStyle.justifyContent = align;
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx("div", { style: containerStyle, children: elements.map((element) => {
+    return (_jsx(ComponentShell, { component: component, children: _jsx("div", { style: containerStyle, children: elements.map((element) => {
                 const props = element.properties || {};
                 const href = getString(props, 'path') || getString(props, 'href');
                 const text = getString(props, 'text') || getString(props, 'title');

package/dist/components/CardComponent.js

@@ -1,38 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
-const INSET_STYLE_KEYS = new Set([
-    'borderColor',
-    'borderStyle',
-    'borderWidth',
-    'borderTopWidth',
-    'borderRightWidth',
-    'borderBottomWidth',
-    'borderLeftWidth',
-    'borderRadius',
-    'backgroundColor',
-    'backgroundImage',
-    'backgroundSize',
-    'backgroundPosition',
-    'boxShadow'
-]);
-function splitCardStyles(styles, inset) {
-    const container = {};
-    const body = {};
-    for (const [key, value] of Object.entries(styles !== null && styles !== void 0 ? styles : {})) {
-        if (inset && INSET_STYLE_KEYS.has(key)) {
-            body[key] = value;
-        }
-        else {
-            container[key] = value;
-        }
-    }
-    return { container: container, body: body };
-}
 function applyCardStyles(element, props) {
     const overrides = {};
     if (element.elementType === 'icon') {
@@ -74,10 +46,7 @@ const CardComponent = memo(function CardComponent({ component }) {
         cardTitleSize: properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
         cardTextColor: properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
         cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize,
-        cardElementGap: properties === null || properties === void 0 ? void 0 : properties.cardElementGap,
-        cardContentPadding: properties === null || properties === void 0 ? void 0 : properties.cardContentPadding,
-        cardContentAlign: properties === null || properties === void 0 ? void 0 : properties.cardContentAlign,
-        cardInsetBorder: properties === null || properties === void 0 ? void 0 : properties.cardInsetBorder
+        cardElementGap: properties === null || properties === void 0 ? void 0 : properties.cardElementGap
     }), [
         properties === null || properties === void 0 ? void 0 : properties.cardElement1,
         properties === null || properties === void 0 ? void 0 : properties.cardElement2,
@@ -89,10 +58,7 @@ const CardComponent = memo(function CardComponent({ component }) {
         properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
         properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
         properties === null || properties === void 0 ? void 0 : properties.cardTextSize,
-        properties === null || properties === void 0 ? void 0 : properties.cardElementGap,
-        properties === null || properties === void 0 ? void 0 : properties.cardContentPadding,
-        properties === null || properties === void 0 ? void 0 : properties.cardContentAlign,
-        properties === null || properties === void 0 ? void 0 : properties.cardInsetBorder
+        properties === null || properties === void 0 ? void 0 : properties.cardElementGap
     ]);
     const orderedElements = useMemo(() => {
         const cardOrder = [
@@ -118,19 +84,6 @@ const CardComponent = memo(function CardComponent({ component }) {
     const layout = String((properties === null || properties === void 0 ? void 0 : properties.cardLayout) || 'stacked');
     const rawGap = cardProps.cardElementGap;
     const elementGap = rawGap === '' || rawGap == null ? '0' : String(rawGap);
-    const contentPadding = typeof cardProps.cardContentPadding === 'string' ? cardProps.cardContentPadding : '';
-    const insetBorder = cardProps.cardInsetBorder === true || cardProps.cardInsetBorder === 'true';
-    const contentAlign = typeof cardProps.cardContentAlign === 'string' && cardProps.cardContentAlign !== 'left'
-        ? cardProps.cardContentAlign
-        : undefined;
-    const { containerStyle, bodyStyle } = useMemo(() => {
-        const { container, body } = splitCardStyles(component.styles, insetBorder);
-        if (contentPadding)
-            body.padding = contentPadding;
-        if (contentAlign)
-            body.textAlign = contentAlign;
-        return { containerStyle: container, bodyStyle: body };
-    }, [component.styles, insetBorder, contentPadding, contentAlign]);
     const rowGapStyle = { gap: elementGap };
     let content;
     if (layout === 'icon-left' || layout === 'icon-right') {
@@ -148,6 +101,6 @@ const CardComponent = memo(function CardComponent({ component }) {
     else {
         content = (_jsx(PbRow, { id: "element-row", style: rowGapStyle, children: elements.map((element) => elementFactory.build(element)) }));
     }
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: containerStyle, children: _jsx("div", { style: bodyStyle, children: content }) }));
+    return _jsx(ComponentShell, { component: component, children: content });
 });
 export { CardComponent };

package/dist/components/DividerComponent.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from '../types/ComponentType.js';
+declare const DividerComponent: import("react").NamedExoticComponent<{
+    readonly component: ComponentType;
+}>;
+export { DividerComponent };

package/dist/components/DividerComponent.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
+import { getString } from '../utils/propertyUtils.js';
+const DividerComponent = memo(function DividerComponent({ component }) {
+    const properties = component.properties || {};
+    const orientation = getString(properties, 'orientation', 'horizontal');
+    const thickness = getString(properties, 'thickness', '1px');
+    const color = getString(properties, 'color', '#e5e7eb');
+    const lineStyle = getString(properties, 'lineStyle', 'solid');
+    const length = getString(properties, 'length', '100%');
+    const align = getString(properties, 'align', 'center');
+    const isVertical = orientation === 'vertical';
+    const marginLeft = align === 'left' ? '0' : align === 'right' ? 'auto' : 'auto';
+    const marginRight = align === 'right' ? '0' : align === 'left' ? 'auto' : 'auto';
+    const line = isVertical
+        ? {
+            width: 0,
+            height: length,
+            borderLeft: `${thickness} ${lineStyle} ${color}`,
+            marginLeft,
+            marginRight
+        }
+        : {
+            width: length,
+            height: 0,
+            borderTop: `${thickness} ${lineStyle} ${color}`,
+            marginLeft,
+            marginRight
+        };
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsx("div", { style: { display: 'flex', flexDirection: isVertical ? 'row' : 'column', minHeight: isVertical ? undefined : '1px' }, children: _jsx("div", { style: line, "aria-hidden": "true" }) }) }));
+});
+export { DividerComponent };

package/dist/components/FormComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
@@ -19,6 +19,6 @@ const FormComponent = memo(function FormComponent({ component }) {
     const handleSubmit = (event) => {
         event.preventDefault();
     };
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsx(PbRow, { style: { gap: 0 }, children: elements.map((element) => elementFactory.build(element, component.id)) }) }) }));
+    return (_jsx(ComponentShell, { component: component, children: _jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsx(PbRow, { style: { gap: 0 }, children: elements.map((element) => elementFactory.build(element, component.id)) }) }) }));
 });
 export { FormComponent };

package/dist/components/HeroComponent.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from '../types/ComponentType.js';
+declare const HeroComponent: import("react").NamedExoticComponent<{
+    readonly component: ComponentType;
+}>;
+export { HeroComponent };

package/dist/components/HeroComponent.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
+import { ElementFactory } from '../factories/ElementFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+import { getString } from '../utils/propertyUtils.js';
+const elementFactory = new ElementFactory();
+const HeroComponent = memo(function HeroComponent({ component }) {
+    const properties = component.properties || {};
+    const mediaType = getString(properties, 'mediaType', 'none');
+    const mediaSrc = getString(properties, 'mediaSrc', '');
+    const mediaPoster = getString(properties, 'mediaPoster', '');
+    const minHeight = getString(properties, 'minHeight', '600px');
+    const overlayColor = getString(properties, 'overlayColor', '#000000');
+    const overlayOpacity = properties.overlayOpacity !== undefined && properties.overlayOpacity !== ''
+        ? Number(properties.overlayOpacity)
+        : 0.5;
+    const contentAlign = getString(properties, 'contentAlign', 'center');
+    const contentVerticalAlign = getString(properties, 'contentVerticalAlign', 'center');
+    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    const justifyContent = contentAlign === 'left' ? 'flex-start' : contentAlign === 'right' ? 'flex-end' : 'center';
+    const alignItems = contentVerticalAlign === 'top' ? 'flex-start' : contentVerticalAlign === 'bottom' ? 'flex-end' : 'center';
+    const contentStyle = {
+        position: 'relative',
+        zIndex: 2,
+        minHeight,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: alignItems,
+        alignItems: justifyContent,
+        textAlign: contentAlign === 'left' || contentAlign === 'right' ? contentAlign : 'center'
+    };
+    const media = useMemo(() => {
+        if (mediaType === 'video' && mediaSrc) {
+            return (_jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, src: mediaSrc, poster: mediaPoster || undefined, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } }));
+        }
+        if (mediaType === 'image' && mediaSrc) {
+            return (_jsx("img", { src: mediaSrc, alt: "", style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } }));
+        }
+        return null;
+    }, [mediaType, mediaSrc, mediaPoster]);
+    const overlay = (_jsx("div", { style: {
+            position: 'absolute',
+            inset: 0,
+            zIndex: 1,
+            backgroundColor: overlayColor,
+            opacity: overlayOpacity
+        } }));
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsxs("div", { style: { position: 'relative', overflow: 'hidden', minHeight }, children: [media, overlay, _jsx("div", { style: contentStyle, children: elements.map((element) => elementFactory.build(element)) })] }) }));
+});
+export { HeroComponent };

package/dist/components/IconComponent.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
 const IconComponent = memo(function IconComponent({ component }) {
     const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", style: { justifyContent: 'center', gap: 0 }, children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(ComponentShell, { component: component, children: _jsx(PbRow, { id: "element-row", style: { justifyContent: 'center', gap: 0 }, children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { IconComponent };

package/dist/components/ImageComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -11,8 +11,12 @@ const ImageComponent = memo(function ImageComponent({ component }) {
     const fullBleed = getBoolean(component.properties, 'fullBleed', false);
     const elements = useMemo(() => orderBySort(component.elements).map((element) => resolveImageElement(component, element)), [component.elements, component.properties]);
     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: elements.map((element) => elementFactory.build(Object.assign(Object.assign({}, element), { fullBleed: true }))) }));
+        return (_jsx(ComponentShell, { component: component, outer: "div", outerStyle: {
+                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: elements.map((element) => elementFactory.build(Object.assign(Object.assign({}, element), { fullBleed: true }))) }));
     }
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", style: { gap: 0 }, children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(ComponentShell, { component: component, children: _jsx(PbRow, { id: "element-row", style: { gap: 0 }, children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { ImageComponent };

package/dist/components/ListComponent.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { ElementTypeEnum } from '../constants/ElementEnum.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -27,6 +28,6 @@ const ListComponent = memo(function ListComponent({ component }) {
         }
         return result;
     }, [elements]);
-    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: _jsx("ul", { style: { listStyle: 'none', paddingLeft: 0 }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: itemAlign, marginBottom: itemGap }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: itemFontSize }, children: text ? elementFactory.build(text) : null })] }, id))) }) }));
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsx("ul", { style: { listStyle: 'none', paddingLeft: 0 }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: itemAlign, marginBottom: itemGap }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: itemFontSize }, children: text ? elementFactory.build(text) : null })] }, id))) }) }));
 });
 export { ListComponent };

package/dist/components/MapComponent.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 const COORDS_PATTERN = /^-?\d+(\.\d+)?$/;
 function isValidCoord(value) {
     if (typeof value !== 'string')
@@ -18,7 +19,7 @@ export function MapComponent({ component }) {
         }
         return `https://maps.google.com/maps?q=${encodeURIComponent(`${latStr},${lngStr}`)}&z=${zoom}&output=embed`;
     }, [lat, lng, zoom]);
-    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: src ? (_jsx("iframe", { title: "Localiza\u00E7\u00E3o", src: src, width: "100%", height: height, style: { border: 0, borderRadius: '4px' }, allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" })) : (_jsx("div", { style: {
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: src ? (_jsx("iframe", { title: "Localiza\u00E7\u00E3o", src: src, width: "100%", height: height, style: { border: 0, borderRadius: '4px' }, allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" })) : (_jsx("div", { style: {
                 width: '100%',
                 height,
                 backgroundColor: placeholderBackgroundColor,

package/dist/components/SliderComponent.js

@@ -3,6 +3,7 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import { resolveResponsiveProperties, breakpointFromWidth } from '../utils/responsiveProperties.js';
+import { getComponentShellStyles } from '../utils/componentShell.js';
 const elementFactory = new ElementFactory();
 function cleanComponentStyles(styles) {
     const exclude = new Set(['minHeight', 'display', 'alignItems', 'justifyContent', 'flexDirection']);
@@ -177,13 +178,27 @@ export function SliderComponent({ component, editionMode = false }) {
     const chrome = resolveChromeColors(resolved);
     const useSharedImages = resolved.imageCustomization !== 'separate';
     const sharedImageStyles = resolved.imageStyles || {};
-    return (_jsxs("div", { ref: containerRef, "data-pb-component": component.id, style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { style: Object.assign({ overflow: 'hidden' }, (fixedHeight ? { height: fixedHeight } : {})), children: _jsx("div", { style: {
-                        display: 'flex',
-                        columnGap: spacing,
-                        transform: `translateX(${translateX}px)`,
-                        transition: animate && !dragging ? 'transform 0.3s ease' : 'none',
-                        cursor: dragging ? 'grabbing' : n > 1 ? 'grab' : 'default',
-                        touchAction: 'pan-y',
-                        userSelect: 'none'
-                    }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onTransitionEnd: handleTransitionEnd, children: trackSlides.map((element, i) => (_jsx("div", { style: { width: slideWidth, flexShrink: 0, overflow: 'hidden' }, children: buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) }, `${element.id}-${i}`))) }) }), showArrows && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, { side: "left", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index - 1) }), _jsx(ArrowButton, { side: "right", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index + 1) })] })), showDots && (_jsx(Dots, { count: n, current: currentIndex, size: chrome.dotSize, activeBackground: chrome.dotActiveBackground, background: chrome.dotBackground, activeColor: chrome.dotActiveColor, color: chrome.dotColor, onGoTo: goToDot }))] }));
+    const { containerStyle, bodyStyle } = useMemo(() => getComponentShellStyles(component), [component]);
+    if (resolved.mode === 'marquee') {
+        const animName = `pb-marquee-${String(component.id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+        const marqueeDuration = Number(resolved.marqueeDuration) > 0 ? Number(resolved.marqueeDuration) : 20;
+        const marqueeSlides = [...slides, ...slides];
+        const keyframes = `@keyframes ${animName}{from{transform:translateX(0)}to{transform:translateX(calc(-50% - ${spacing / 2}px))}}`;
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: keyframes }), _jsx("div", { ref: containerRef, "data-pb-component": component.id, style: Object.assign({ position: 'relative' }, cleanComponentStyles(containerStyle)), children: _jsx("div", { style: bodyStyle, children: _jsx("div", { style: { overflow: 'hidden' }, children: _jsx("div", { style: {
+                                    display: 'flex',
+                                    columnGap: spacing,
+                                    width: 'max-content',
+                                    animation: `${animName} ${marqueeDuration}s linear infinite`,
+                                    userSelect: 'none'
+                                }, children: marqueeSlides.map((element, i) => (_jsx("div", { style: { width: slideWidth, flexShrink: 0, overflow: 'hidden' }, children: buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) }, `${element.id}-${i}`))) }) }) }) })] }));
+    }
+    return (_jsx("div", { ref: containerRef, "data-pb-component": component.id, style: Object.assign({ position: 'relative' }, cleanComponentStyles(containerStyle)), children: _jsxs("div", { style: bodyStyle, children: [_jsx("div", { style: Object.assign({ overflow: 'hidden' }, (fixedHeight ? { height: fixedHeight } : {})), children: _jsx("div", { style: {
+                            display: 'flex',
+                            columnGap: spacing,
+                            transform: `translateX(${translateX}px)`,
+                            transition: animate && !dragging ? 'transform 0.3s ease' : 'none',
+                            cursor: dragging ? 'grabbing' : n > 1 ? 'grab' : 'default',
+                            touchAction: 'pan-y',
+                            userSelect: 'none'
+                        }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onTransitionEnd: handleTransitionEnd, children: trackSlides.map((element, i) => (_jsx("div", { style: { width: slideWidth, flexShrink: 0, overflow: 'hidden' }, children: buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) }, `${element.id}-${i}`))) }) }), showArrows && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, { side: "left", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index - 1) }), _jsx(ArrowButton, { side: "right", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index + 1) })] })), showDots && (_jsx(Dots, { count: n, current: currentIndex, size: chrome.dotSize, activeBackground: chrome.dotActiveBackground, background: chrome.dotBackground, activeColor: chrome.dotActiveColor, color: chrome.dotColor, onGoTo: goToDot }))] }) }));
 }

package/dist/components/TextComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -10,6 +10,6 @@ const elementFactory = new ElementFactory();
 const TextComponent = memo(function TextComponent({ component }) {
     const elements = useMemo(() => orderBySort(component.elements).map((element) => resolveImageElement(component, element)), [component.elements, component.properties]);
     const elementGap = getString(component.properties, 'elementGap', '');
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", style: { gap: elementGap }, children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(ComponentShell, { component: component, children: _jsx(PbRow, { id: "element-row", style: { gap: elementGap }, children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { TextComponent };

package/dist/components/VideoComponent.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { getBoolean, getString } from '../utils/propertyUtils.js';
 function toEmbed(src) {
     const value = src.trim();
@@ -124,7 +125,11 @@ export function VideoComponent({ component }) {
             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(ComponentShell, { component: component, outer: "div", outerStyle: {
+                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 }));
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: content }));
 }

package/dist/constants/ComponentEnum.d.ts

@@ -15,5 +15,6 @@ export declare const ComponentTypeEnum: {
     readonly List: "list";
     readonly Buttons: "buttons";
     readonly Icon: "icon";
+    readonly Divider: "divider";
 };
 export type ComponentTypeSlug = (typeof ComponentTypeEnum)[keyof typeof ComponentTypeEnum];

package/dist/constants/ComponentEnum.js

@@ -14,5 +14,6 @@ export const ComponentTypeEnum = {
     Map: 'map',
     List: 'list',
     Buttons: 'buttons',
-    Icon: 'icon'
+    Icon: 'icon',
+    Divider: 'divider'
 };

package/dist/designSystem/baseCss.d.ts

@@ -5,4 +5,4 @@
  * valores de destaque usam `var(--pb-*)` com fallback, então o design system
  * (Etapa 1) sobrescreve os tokens sem tocar nestes estilos.
  */
-export declare const baseCss = "\n/* \u2500\u2500\u2500 Reset e tipografia base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-root, .pb-root *, .pb-root *::before, .pb-root *::after {\n  box-sizing: border-box;\n}\n.pb-root {\n  margin: 0;\n  font-family: var(--pb-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);\n  font-size: var(--pb-font-size-base, 16px);\n  line-height: var(--pb-line-height, 1.6);\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-background, #ffffff);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n.pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {\n  margin: 0 0 0.5em;\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.2;\n  color: var(--pb-color-heading, #111827);\n}\n.pb-root p {\n  margin: 0;\n}\n.pb-root img {\n  max-width: 100%;\n  height: auto;\n}\n.pb-root a {\n  color: var(--pb-color-primary, #f58220);\n  text-decoration: none;\n}\n.pb-root a:hover {\n  text-decoration: underline;\n}\n\n/* \u2500\u2500\u2500 Layout: container / grade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-container {\n  width: 100%;\n  margin-inline: auto;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n.pb-container-fluid {\n  max-width: none !important;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n@media (min-width: 576px) {\n  .pb-container { max-width: 540px; }\n}\n@media (min-width: 768px) {\n  .pb-container { max-width: 720px; }\n}\n@media (min-width: 992px) {\n  .pb-container { max-width: 960px; }\n}\n@media (min-width: 1200px) {\n  .pb-container { max-width: 1140px; }\n}\n@media (min-width: 1400px) {\n  .pb-container { max-width: 1320px; }\n}\n\n.pb-row {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--pb-gutter, 0);\n}\n.pb-col {\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Bot\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--pb-radius-md, 8px);\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.pb-button:hover { text-decoration: none; }\n.pb-button:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.pb-button-primary {\n  background-color: var(--pb-color-primary, #f58220);\n  border-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-primary:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n}\n.pb-button-secondary {\n  background-color: var(--pb-color-secondary, #64748b);\n  border-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-success {\n  background-color: var(--pb-color-success, #16a34a);\n  border-color: var(--pb-color-success, #16a34a);\n  color: #ffffff;\n}\n.pb-button-danger {\n  background-color: var(--pb-color-danger, #dc2626);\n  border-color: var(--pb-color-danger, #dc2626);\n  color: #ffffff;\n}\n.pb-button-warning {\n  background-color: var(--pb-color-warning, #f59e0b);\n  border-color: var(--pb-color-warning, #f59e0b);\n  color: #1f2937;\n}\n.pb-button-info {\n  background-color: var(--pb-color-info, #0ea5e9);\n  border-color: var(--pb-color-info, #0ea5e9);\n  color: #ffffff;\n}\n.pb-button-light {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-button-dark {\n  background-color: var(--pb-color-dark, #0f172a);\n  border-color: var(--pb-color-dark, #0f172a);\n  color: #ffffff;\n}\n.pb-button-outline-primary {\n  background-color: transparent;\n  border-color: var(--pb-color-primary, #f58220);\n  color: var(--pb-color-primary, #f58220);\n}\n.pb-button-outline-primary:hover:not(:disabled) {\n  background-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-outline-secondary {\n  background-color: transparent;\n  border-color: var(--pb-color-secondary, #64748b);\n  color: var(--pb-color-secondary, #64748b);\n}\n.pb-button-outline-secondary:hover:not(:disabled) {\n  background-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-link {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--pb-color-primary, #f58220);\n  padding-inline: 0.5em;\n}\n.pb-button-sm {\n  padding: 0.375em 0.875em;\n  font-size: 0.875rem;\n  border-radius: var(--pb-radius-sm, 4px);\n}\n.pb-button-lg {\n  padding: 0.625em 1.5em;\n  font-size: 1.125rem;\n  border-radius: var(--pb-radius-lg, 12px);\n}\n\n/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-spinner {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 0.2em solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: pb-spin 0.75s linear infinite;\n  vertical-align: -0.25em;\n}\n.pb-spinner-sm {\n  width: 1rem;\n  height: 1rem;\n  border-width: 0.18em;\n}\n@keyframes pb-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500\u2500 Alertas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-alert {\n  padding: var(--pb-space-md, 16px) var(--pb-space-lg, 24px);\n  border: 1px solid;\n  border-radius: var(--pb-radius-md, 8px);\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-alert-title {\n  font-weight: var(--pb-font-weight-bold, 700);\n  margin-bottom: 0.25em;\n}\n.pb-alert-primary {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-info {\n  background-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-success {\n  background-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-warning {\n  background-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 12%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-danger {\n  background-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-secondary {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n\n/* \u2500\u2500\u2500 Formul\u00E1rios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-form-group {\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-form-label {\n  display: block;\n  margin-bottom: 0.375rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-form-control,\n.pb-form-select,\n.pb-form-textarea {\n  display: block;\n  width: 100%;\n  padding: 0.5em 0.75em;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-surface, #ffffff);\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.pb-form-control:focus,\n.pb-form-select:focus,\n.pb-form-textarea:focus {\n  outline: none;\n  border-color: var(--pb-color-primary, #f58220);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-color-primary, #f58220) 20%, transparent);\n}\n.pb-form-control-invalid,\n.pb-form-select-invalid,\n.pb-form-textarea-invalid {\n  border-color: var(--pb-color-danger, #dc2626);\n}\n.pb-invalid-feedback {\n  display: block;\n  margin-top: 0.375rem;\n  font-size: 0.875rem;\n  color: var(--pb-color-danger, #dc2626);\n}\n.pb-form-check {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.pb-form-check-input {\n  width: 1.1em;\n  height: 1.1em;\n  accent-color: var(--pb-color-primary, #f58220);\n  flex-shrink: 0;\n}\n.pb-form-check-label {\n  font-weight: normal;\n  margin-bottom: 0;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-header {\n  width: 100%;\n}\n.pb-header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--pb-space-md, 16px);\n  flex-wrap: wrap;\n  padding-block: var(--pb-space-sm, 8px);\n}\n.pb-brand {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  flex-shrink: 0;\n}\n.pb-brand img {\n  max-height: 56px;\n  width: auto;\n}\n.pb-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n.pb-nav-link {\n  display: inline-block;\n  padding: 0.5rem 0.75rem;\n  color: inherit;\n  text-decoration: none;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: color 0.2s ease, border-color 0.2s ease;\n}\n.pb-nav-link:hover {\n  text-decoration: none;\n  opacity: 0.85;\n}\n.pb-nav-link-active {\n  border-bottom-color: currentColor;\n}\n.pb-nav-toggle {\n  display: none;\n  padding: 0.375rem 0.625rem;\n  font-size: 1.25rem;\n  line-height: 1;\n  background: transparent;\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  cursor: pointer;\n  color: inherit;\n}\n@media (max-width: 991.98px) {\n  .pb-nav-toggle { display: inline-flex; align-items: center; }\n  .pb-nav { display: none; }\n  .pb-nav-open { display: flex; flex-direction: column; width: 100%; }\n}\n\n/* \u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-footer {\n  width: 100%;\n  padding-block: var(--pb-space-xl, 32px);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-footer-divider {\n  border: none;\n  border-top: 1px solid var(--pb-color-border, #e5e7eb);\n  margin: var(--pb-space-lg, 24px) 0;\n}\n.pb-social-icons {\n  display: flex;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  flex-wrap: wrap;\n}\n.pb-social-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n  color: inherit;\n  text-decoration: none;\n}\n.pb-social-icon:hover {\n  text-decoration: none;\n  opacity: 0.8;\n}\n\n/* \u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-loading {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n}\n\n/* \u2500\u2500\u2500 Utilit\u00E1rios de alinhamento \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-text-center { text-align: center; }\n.pb-mb-0 { margin-bottom: 0; }\n";
+export declare const baseCss = "\n/* \u2500\u2500\u2500 Reset e tipografia base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-root, .pb-root *, .pb-root *::before, .pb-root *::after {\n  box-sizing: border-box;\n}\n.pb-root {\n  margin: 0;\n  font-family: var(--pb-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);\n  font-size: var(--pb-font-size-base, 16px);\n  line-height: var(--pb-line-height, 1.6);\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-background, #ffffff);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n.pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {\n  margin: 0 0 0.5em;\n  font-family: var(--pb-font-heading, var(--pb-font-family, 'Inter', system-ui, sans-serif));\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.2;\n  color: var(--pb-color-heading, #111827);\n}\n.pb-root p {\n  margin: 0;\n}\n.pb-root img {\n  max-width: 100%;\n  height: auto;\n}\n.pb-root a {\n  color: var(--pb-color-primary, #f58220);\n  text-decoration: none;\n}\n.pb-root a:hover {\n  text-decoration: underline;\n}\n\n/* \u2500\u2500\u2500 Layout: container / grade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-container {\n  width: 100%;\n  margin-inline: auto;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n.pb-container-fluid {\n  max-width: none !important;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n@media (min-width: 576px) {\n  .pb-container { max-width: 540px; }\n}\n@media (min-width: 768px) {\n  .pb-container { max-width: 720px; }\n}\n@media (min-width: 992px) {\n  .pb-container { max-width: 960px; }\n}\n@media (min-width: 1200px) {\n  .pb-container { max-width: 1140px; }\n}\n@media (min-width: 1400px) {\n  .pb-container { max-width: 1320px; }\n}\n\n.pb-row {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--pb-gutter, 0);\n}\n.pb-col {\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Bot\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--pb-radius-md, 8px);\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.pb-button:hover { text-decoration: none; }\n.pb-button:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.pb-button-primary {\n  background-color: var(--pb-color-primary, #f58220);\n  border-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-primary:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n}\n.pb-button-secondary {\n  background-color: var(--pb-color-secondary, #64748b);\n  border-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-success {\n  background-color: var(--pb-color-success, #16a34a);\n  border-color: var(--pb-color-success, #16a34a);\n  color: #ffffff;\n}\n.pb-button-danger {\n  background-color: var(--pb-color-danger, #dc2626);\n  border-color: var(--pb-color-danger, #dc2626);\n  color: #ffffff;\n}\n.pb-button-warning {\n  background-color: var(--pb-color-warning, #f59e0b);\n  border-color: var(--pb-color-warning, #f59e0b);\n  color: #1f2937;\n}\n.pb-button-info {\n  background-color: var(--pb-color-info, #0ea5e9);\n  border-color: var(--pb-color-info, #0ea5e9);\n  color: #ffffff;\n}\n.pb-button-light {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-button-dark {\n  background-color: var(--pb-color-dark, #0f172a);\n  border-color: var(--pb-color-dark, #0f172a);\n  color: #ffffff;\n}\n.pb-button-outline-primary {\n  background-color: transparent;\n  border-color: var(--pb-color-primary, #f58220);\n  color: var(--pb-color-primary, #f58220);\n}\n.pb-button-outline-primary:hover:not(:disabled) {\n  background-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-outline-secondary {\n  background-color: transparent;\n  border-color: var(--pb-color-secondary, #64748b);\n  color: var(--pb-color-secondary, #64748b);\n}\n.pb-button-outline-secondary:hover:not(:disabled) {\n  background-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-link {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--pb-color-primary, #f58220);\n  padding-inline: 0.5em;\n}\n.pb-button-sm {\n  padding: 0.375em 0.875em;\n  font-size: 0.875rem;\n  border-radius: var(--pb-radius-sm, 4px);\n}\n.pb-button-lg {\n  padding: 0.625em 1.5em;\n  font-size: 1.125rem;\n  border-radius: var(--pb-radius-lg, 12px);\n}\n\n/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-spinner {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 0.2em solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: pb-spin 0.75s linear infinite;\n  vertical-align: -0.25em;\n}\n.pb-spinner-sm {\n  width: 1rem;\n  height: 1rem;\n  border-width: 0.18em;\n}\n@keyframes pb-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500\u2500 Alertas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-alert {\n  padding: var(--pb-space-md, 16px) var(--pb-space-lg, 24px);\n  border: 1px solid;\n  border-radius: var(--pb-radius-md, 8px);\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-alert-title {\n  font-weight: var(--pb-font-weight-bold, 700);\n  margin-bottom: 0.25em;\n}\n.pb-alert-primary {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-info {\n  background-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-success {\n  background-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-warning {\n  background-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 12%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-danger {\n  background-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-secondary {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n\n/* \u2500\u2500\u2500 Formul\u00E1rios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-form-group {\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-form-label {\n  display: block;\n  margin-bottom: 0.375rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-form-control,\n.pb-form-select,\n.pb-form-textarea {\n  display: block;\n  width: 100%;\n  padding: 0.5em 0.75em;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-surface, #ffffff);\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.pb-form-control:focus,\n.pb-form-select:focus,\n.pb-form-textarea:focus {\n  outline: none;\n  border-color: var(--pb-color-primary, #f58220);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-color-primary, #f58220) 20%, transparent);\n}\n.pb-form-control-invalid,\n.pb-form-select-invalid,\n.pb-form-textarea-invalid {\n  border-color: var(--pb-color-danger, #dc2626);\n}\n.pb-invalid-feedback {\n  display: block;\n  margin-top: 0.375rem;\n  font-size: 0.875rem;\n  color: var(--pb-color-danger, #dc2626);\n}\n.pb-form-check {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.pb-form-check-input {\n  width: 1.1em;\n  height: 1.1em;\n  accent-color: var(--pb-color-primary, #f58220);\n  flex-shrink: 0;\n}\n.pb-form-check-label {\n  font-weight: normal;\n  margin-bottom: 0;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-header {\n  width: 100%;\n}\n.pb-header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--pb-space-md, 16px);\n  flex-wrap: wrap;\n  padding-block: var(--pb-space-sm, 8px);\n}\n.pb-brand {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  flex-shrink: 0;\n}\n.pb-brand img {\n  max-height: 56px;\n  width: auto;\n}\n.pb-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n.pb-nav-link {\n  display: inline-block;\n  padding: 0.5rem 0.75rem;\n  color: inherit;\n  text-decoration: none;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: color 0.2s ease, border-color 0.2s ease;\n}\n.pb-nav-link:hover {\n  text-decoration: none;\n  opacity: 0.85;\n}\n.pb-nav-link-active {\n  border-bottom-color: currentColor;\n}\n.pb-nav-toggle {\n  display: none;\n  padding: 0.375rem 0.625rem;\n  font-size: 1.25rem;\n  line-height: 1;\n  background: transparent;\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  cursor: pointer;\n  color: inherit;\n}\n@media (max-width: 991.98px) {\n  .pb-nav-toggle { display: inline-flex; align-items: center; }\n  .pb-nav { display: none; }\n  .pb-nav-open { display: flex; flex-direction: column; width: 100%; }\n}\n\n/* \u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-footer {\n  width: 100%;\n  padding-block: var(--pb-space-xl, 32px);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-footer-divider {\n  border: none;\n  border-top: 1px solid var(--pb-color-border, #e5e7eb);\n  margin: var(--pb-space-lg, 24px) 0;\n}\n.pb-social-icons {\n  display: flex;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  flex-wrap: wrap;\n}\n.pb-social-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n  color: inherit;\n  text-decoration: none;\n}\n.pb-social-icon:hover {\n  text-decoration: none;\n  opacity: 0.8;\n}\n\n/* \u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-loading {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n}\n\n/* \u2500\u2500\u2500 Utilit\u00E1rios de alinhamento \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-text-center { text-align: center; }\n.pb-mb-0 { margin-bottom: 0; }\n";

package/dist/designSystem/baseCss.js

@@ -22,6 +22,7 @@ export const baseCss = `
 }
 .pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {
   margin: 0 0 0.5em;
+  font-family: var(--pb-font-heading, var(--pb-font-family, 'Inter', system-ui, sans-serif));
   font-weight: var(--pb-font-weight-bold, 700);
   line-height: 1.2;
   color: var(--pb-color-heading, #111827);

package/dist/designSystem/tokens.d.ts

@@ -24,6 +24,7 @@ export interface DesignColors {
 }
 export interface DesignTypography {
     fontFamily: string;
+    headingFontFamily: string;
     fontSizeBase: string;
     fontWeightNormal: string;
     fontWeightBold: string;

package/dist/designSystem/tokens.js

@@ -29,6 +29,7 @@ export const defaultTokens = {
     },
     typography: {
         fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+        headingFontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
         fontSizeBase: '16px',
         fontWeightNormal: '400',
         fontWeightBold: '700',
@@ -101,6 +102,7 @@ export function tokenToCssVars(tokens) {
         '--pb-color-muted': colors.muted,
         '--pb-color-border': colors.border,
         '--pb-font-family': typography.fontFamily,
+        '--pb-font-heading': typography.headingFontFamily,
         '--pb-font-size-base': typography.fontSizeBase,
         '--pb-font-weight-normal': typography.fontWeightNormal,
         '--pb-font-weight-bold': typography.fontWeightBold,

package/dist/factories/ComponentFactory.js

@@ -10,6 +10,8 @@ import { MapComponent } from '../components/MapComponent.js';
 import { ButtonsComponent } from '../components/ButtonsComponent.js';
 import { IconComponent } from '../components/IconComponent.js';
 import { VideoComponent } from '../components/VideoComponent.js';
+import { HeroComponent } from '../components/HeroComponent.js';
+import { DividerComponent } from '../components/DividerComponent.js';
 /**
  * Aplica os estilos padrão do design system (`componentDefaults`) antes dos
  * estilos da instância — o override da instância prevalece.
@@ -26,8 +28,11 @@ export class ComponentFactory {
         switch (resolved.componentType) {
             case ComponentTypeEnum.Text:
             case ComponentTypeEnum.TextWithImage:
-            case ComponentTypeEnum.HeroBanner:
                 return _jsx(TextComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.HeroBanner:
+                return _jsx(HeroComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.Divider:
+                return _jsx(DividerComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Image:
                 return _jsx(ImageComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.List:

package/dist/ui/PbComponentShell.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function ComponentShell({ component, outer, outerStyle, children }: {
+    readonly component: ComponentType;
+    readonly outer?: 'container' | 'div';
+    readonly outerStyle?: CSSProperties;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;

package/dist/ui/PbComponentShell.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { PbContainer } from './PbContainer.js';
+import { getComponentShellStyles } from '../utils/componentShell.js';
+export function ComponentShell({ component, outer = 'container', outerStyle, children }) {
+    const { containerStyle, bodyStyle } = useMemo(() => getComponentShellStyles(component), [component]);
+    const content = _jsx("div", { style: bodyStyle, children: children });
+    if (outer === 'div') {
+        return (_jsx("div", { "data-pb-component": component.id, style: Object.assign(Object.assign({}, containerStyle), outerStyle), children: content }));
+    }
+    return (_jsx(PbContainer, { "data-pb-component": component.id, style: Object.assign(Object.assign({}, containerStyle), outerStyle), children: content }));
+}

package/dist/utils/componentShell.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react';
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function splitComponentStyles(styles: Record<string, unknown> | undefined, inset: boolean): {
+    container: CSSProperties;
+    body: CSSProperties;
+};
+export declare function getComponentShellStyles(component: ComponentType): {
+    containerStyle: CSSProperties;
+    bodyStyle: CSSProperties;
+};

package/dist/utils/componentShell.js

@@ -0,0 +1,41 @@
+import { getString, getBoolean } from './propertyUtils.js';
+const INSET_STYLE_KEYS = new Set([
+    'borderColor',
+    'borderStyle',
+    'borderWidth',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderRadius',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundSize',
+    'backgroundPosition',
+    'boxShadow'
+]);
+export function splitComponentStyles(styles, inset) {
+    const container = {};
+    const body = {};
+    for (const [key, value] of Object.entries(styles !== null && styles !== void 0 ? styles : {})) {
+        if (inset && INSET_STYLE_KEYS.has(key)) {
+            body[key] = value;
+        }
+        else {
+            container[key] = value;
+        }
+    }
+    return { container: container, body: body };
+}
+export function getComponentShellStyles(component) {
+    const properties = component.properties || {};
+    const inset = getBoolean(properties, 'contentInsetBorder', false);
+    const { container, body } = splitComponentStyles(component.styles, inset);
+    const contentPadding = getString(properties, 'contentPadding', '');
+    const contentAlign = getString(properties, 'contentAlign', '');
+    if (contentPadding)
+        body.padding = contentPadding;
+    if (contentAlign && contentAlign !== 'left')
+        body.textAlign = contentAlign;
+    return { containerStyle: container, bodyStyle: body };
+}

package/dist/utils/customCss.d.ts

@@ -0,0 +1,8 @@
+import type { PageType } from '../types/PageType.js';
+import type { WebsiteType } from '../types/WebsiteType.js';
+/**
+ * Coleta o `customCss` declarado em qualquer nível (site, página, bloco,
+ * componente e elemento) e devolve um único bloco de CSS. É renderizado como
+ * `<style>` global, permitindo hover, pseudo-elementos, animações etc.
+ */
+export declare function collectCustomCss(website?: WebsiteType, page?: PageType): string;

package/dist/utils/customCss.js

@@ -0,0 +1,27 @@
+function extract(styles) {
+    if (!styles || typeof styles !== 'object')
+        return '';
+    const css = styles.customCss;
+    return typeof css === 'string' && css.trim() ? css.trim() : '';
+}
+/**
+ * Coleta o `customCss` declarado em qualquer nível (site, página, bloco,
+ * componente e elemento) e devolve um único bloco de CSS. É renderizado como
+ * `<style>` global, permitindo hover, pseudo-elementos, animações etc.
+ */
+export function collectCustomCss(website, page) {
+    var _a, _b, _c;
+    const parts = [];
+    parts.push(extract(website === null || website === void 0 ? void 0 : website.styles));
+    parts.push(extract(page === null || page === void 0 ? void 0 : page.styles));
+    for (const block of (_a = page === null || page === void 0 ? void 0 : page.blocks) !== null && _a !== void 0 ? _a : []) {
+        parts.push(extract(block.styles));
+        for (const component of (_b = block.components) !== null && _b !== void 0 ? _b : []) {
+            parts.push(extract(component.styles));
+            for (const element of (_c = component.elements) !== null && _c !== void 0 ? _c : []) {
+                parts.push(extract(element.styles));
+            }
+        }
+    }
+    return parts.filter(Boolean).join('\n');
+}

package/package.json

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