efficient-web-builder 29.0.0 → 30.0.0

package/dist/render/components/PreviewHeaderContext.d.ts

@@ -47,6 +47,10 @@ type Ctx = {
     setBlockGap: (v: number | null) => void;
     heroBackgroundFollowsWidth: boolean | null;
     setHeroBackgroundFollowsWidth: (v: boolean | null) => void;
+    sectionBackgroundWidth: "full" | "content" | null;
+    setSectionBackgroundWidth: (v: "full" | "content" | null) => void;
+    sectionContentWidth: "full" | "content" | null;
+    setSectionContentWidth: (v: "full" | "content" | null) => void;
     photographyGrayscale: boolean | null;
     setPhotographyGrayscale: (v: boolean | null) => void;
     shareButtonOnPosts: boolean | null;
@@ -58,7 +62,7 @@ type Ctx = {
     setSelectHandler: (fn: () => void) => void;
 };
 export declare const PreviewHeaderContext: import("react").Context<Ctx>;
-export declare function PreviewHeaderProvider({ children, websiteName, templateChrome, templateName, chromePlaceholder, themeMode, onThemeModeChange, themeSwitchShown, onThemeSwitchShownChange, theme, onThemeChange, fonts, onFontsChange, sizes, onSizesChange, cornerRadiusPx, onCornerRadiusPxChange, cardShadow, onCardShadowChange, shadowColor, onShadowColorChange, cardGap, onCardGapChange, hoverEffect, onHoverEffectChange, headingCompression, onHeadingCompressionChange, siteWidth, onSiteWidthChange, siteGutter, blockGap, onSiteGutterChange, onBlockGapChange, headingTypography, onHeadingTypographyChange, textStyles, onTextStylesChange, wordStyles, heroBackgroundFollowsWidth, onHeroBackgroundFollowsWidthChange, photographyGrayscale, onPhotographyGrayscaleChange, shareButtonOnPosts, onShareButtonOnPostsChange, themeFromDocument, }: {
+export declare function PreviewHeaderProvider({ children, websiteName, templateChrome, templateName, chromePlaceholder, themeMode, onThemeModeChange, themeSwitchShown, onThemeSwitchShownChange, theme, onThemeChange, fonts, onFontsChange, sizes, onSizesChange, cornerRadiusPx, onCornerRadiusPxChange, cardShadow, onCardShadowChange, shadowColor, onShadowColorChange, cardGap, onCardGapChange, hoverEffect, onHoverEffectChange, headingCompression, onHeadingCompressionChange, siteWidth, onSiteWidthChange, siteGutter, blockGap, onSiteGutterChange, onBlockGapChange, headingTypography, onHeadingTypographyChange, textStyles, onTextStylesChange, wordStyles, heroBackgroundFollowsWidth, onHeroBackgroundFollowsWidthChange, sectionBackgroundWidth, onSectionBackgroundWidthChange, sectionContentWidth, onSectionContentWidthChange, photographyGrayscale, onPhotographyGrayscaleChange, shareButtonOnPosts, onShareButtonOnPostsChange, themeFromDocument, }: {
     children: ReactNode;
     websiteName?: string | null;
     templateChrome?: boolean;
@@ -99,6 +103,10 @@ export declare function PreviewHeaderProvider({ children, websiteName, templateC
     onHeadingTypographyChange?: (v: ResolvedHeadingTypography) => void;
     heroBackgroundFollowsWidth?: boolean | null;
     onHeroBackgroundFollowsWidthChange?: (v: boolean | null) => void;
+    sectionBackgroundWidth?: "full" | "content" | null;
+    onSectionBackgroundWidthChange?: (v: "full" | "content" | null) => void;
+    sectionContentWidth?: "full" | "content" | null;
+    onSectionContentWidthChange?: (v: "full" | "content" | null) => void;
     photographyGrayscale?: boolean | null;
     onPhotographyGrayscaleChange?: (v: boolean | null) => void;
     shareButtonOnPosts?: boolean | null;

package/dist/render/components/PreviewHeaderContext.js

@@ -1 +1 @@
-"use client";import{jsx as k}from"react/jsx-runtime";import{createContext as Mt,useCallback as e,useContext as Rt,useMemo as Wt,useState as L}from"react";import{EditorSiteLogoContext as Bt}from"./SiteLogoContext.js";import{useSelectHandler as Nt}from"efficient-easel/draw/client";import{IDENTITY_CARD_GAP as U,DEFAULT_HEADING_COMPRESSION as O,DEFAULT_HEADING_TYPOGRAPHY as g,DEFAULT_SIZES as M,DEFAULT_SWITCH_SHOWN as R,DEFAULT_THEME_MODE as W,DEFAULT_THEME_VALUE as B}from"../../format/lib/theme.js";import{DEFAULT_FONTS as N}from"../../format/lib/fonts.js";const Y=Mt({settings:null,setSettings:()=>{},primeSettings:()=>{},websiteName:null,templateChrome:!1,templateName:null,chromePlaceholder:!1,themeMode:W,setThemeMode:()=>{},themeSwitchShown:R,setThemeSwitchShown:()=>{},theme:B,setTheme:()=>{},fonts:N,setFonts:()=>{},sizes:M,setSizes:()=>{},cornerRadiusPx:null,setCornerRadiusPx:()=>{},cardShadow:null,setCardShadow:()=>{},shadowColor:null,setShadowColor:()=>{},cardGap:U,setCardGap:()=>{},hoverEffect:null,setHoverEffect:()=>{},headingCompression:O,setHeadingCompression:()=>{},siteWidth:null,setSiteWidth:()=>{},siteGutter:null,blockGap:null,setSiteGutter:()=>{},setBlockGap:()=>{},headingTypography:g,setHeadingTypography:()=>{},textStyles:null,setTextStyles:()=>{},wordStyles:null,heroBackgroundFollowsWidth:null,setHeroBackgroundFollowsWidth:()=>{},photographyGrayscale:null,setPhotographyGrayscale:()=>{},shareButtonOnPosts:null,setShareButtonOnPosts:()=>{},themeFromDocument:!1,selected:!1,setSelected:()=>{},select:()=>{},setSelectHandler:()=>{}});function qt({children:j,websiteName:o=null,templateChrome:l=!1,templateName:r=null,chromePlaceholder:n=!1,themeMode:z=W,onThemeModeChange:c,themeSwitchShown:b=R,onThemeSwitchShownChange:u,theme:V=B,onThemeChange:i,fonts:Z=N,onFontsChange:d,sizes:q=M,onSizesChange:S,cornerRadiusPx:J=null,onCornerRadiusPxChange:a,cardShadow:K=null,onCardShadowChange:p,shadowColor:Q=null,onShadowColorChange:E,cardGap:X=U,onCardGapChange:f,hoverEffect:$=null,onHoverEffectChange:T,headingCompression:C=O,onHeadingCompressionChange:m,siteWidth:tt=null,onSiteWidthChange:H,siteGutter:et=null,blockGap:st=null,onSiteGutterChange:D,onBlockGapChange:_,headingTypography:lt=g,onHeadingTypographyChange:w,textStyles:ot=null,onTextStylesChange:P,wordStyles:rt=null,heroBackgroundFollowsWidth:nt=null,onHeroBackgroundFollowsWidthChange:x,photographyGrayscale:ct=null,onPhotographyGrayscaleChange:A,shareButtonOnPosts:ut=null,onShareButtonOnPostsChange:h,themeFromDocument:it=!1}){const[s,v]=L(null),dt=e(t=>v(gt=>gt??t),[]),[St,at]=L(!1),pt=e(t=>c?.(t),[c]),Et=e(t=>u?.(t),[u]),ft=e(t=>i?.(t),[i]),Tt=e(t=>d?.(t),[d]),mt=e(t=>S?.(t),[S]),Ht=e(t=>H?.(t),[H]),Dt=e(t=>D?.(t),[D]),_t=e(t=>_?.(t),[_]),wt=e(t=>x?.(t),[x]),Pt=e(t=>A?.(t),[A]),xt=e(t=>h?.(t),[h]),At=e(t=>a?.(t),[a]),ht=e(t=>p?.(t),[p]),vt=e(t=>E?.(t),[E]),Ft=e(t=>f?.(t),[f]),Gt=e(t=>T?.(t),[T]),yt=e(t=>m?.(t),[m]),It=e(t=>w?.(t),[w]),kt=e(t=>P?.(t),[P]),{select:Lt,setSelectHandler:Ut}=Nt(),F=s?.logoUrl,G=s?.logoReversed,y=s?.logoInkIsDark,I=s!==null,Ot=Wt(()=>({logo:I?{logoUrl:F,logoReversed:G,logoInkIsDark:y}:null,placeholder:l||n,wordmark:l?r:o}),[I,F,G,y,l,n,r,o]);return k(Bt.Provider,{value:Ot,children:k(Y.Provider,{value:{settings:s,setSettings:v,primeSettings:dt,websiteName:o,templateChrome:l,templateName:r,chromePlaceholder:n,themeMode:z,setThemeMode:pt,themeSwitchShown:b,setThemeSwitchShown:Et,theme:V,setTheme:ft,fonts:Z,setFonts:Tt,sizes:q,setSizes:mt,cornerRadiusPx:J,setCornerRadiusPx:At,cardShadow:K,setCardShadow:ht,shadowColor:Q,setShadowColor:vt,cardGap:X,setCardGap:Ft,hoverEffect:$,setHoverEffect:Gt,headingCompression:C,setHeadingCompression:yt,siteWidth:tt,setSiteWidth:Ht,siteGutter:et,blockGap:st,setSiteGutter:Dt,setBlockGap:_t,headingTypography:lt,setHeadingTypography:It,textStyles:ot,setTextStyles:kt,wordStyles:rt,heroBackgroundFollowsWidth:nt,setHeroBackgroundFollowsWidth:wt,photographyGrayscale:ct,setPhotographyGrayscale:Pt,shareButtonOnPosts:ut,setShareButtonOnPosts:xt,themeFromDocument:it,selected:St,setSelected:at,select:Lt,setSelectHandler:Ut},children:j})})}const Jt=()=>Rt(Y);export{Y as PreviewHeaderContext,qt as PreviewHeaderProvider,Jt as usePreviewHeader};
+"use client";import{jsx as U}from"react/jsx-runtime";import{createContext as jt,useCallback as e,useContext as zt,useMemo as bt,useState as W}from"react";import{EditorSiteLogoContext as Vt}from"./SiteLogoContext.js";import{useSelectHandler as Zt}from"efficient-easel/draw/client";import{IDENTITY_CARD_GAP as O,DEFAULT_HEADING_COMPRESSION as g,DEFAULT_HEADING_TYPOGRAPHY as B,DEFAULT_SIZES as M,DEFAULT_SWITCH_SHOWN as R,DEFAULT_THEME_MODE as N,DEFAULT_THEME_VALUE as Y}from"../../format/lib/theme.js";import{DEFAULT_FONTS as j}from"../../format/lib/fonts.js";const z=jt({settings:null,setSettings:()=>{},primeSettings:()=>{},websiteName:null,templateChrome:!1,templateName:null,chromePlaceholder:!1,themeMode:N,setThemeMode:()=>{},themeSwitchShown:R,setThemeSwitchShown:()=>{},theme:Y,setTheme:()=>{},fonts:j,setFonts:()=>{},sizes:M,setSizes:()=>{},cornerRadiusPx:null,setCornerRadiusPx:()=>{},cardShadow:null,setCardShadow:()=>{},shadowColor:null,setShadowColor:()=>{},cardGap:O,setCardGap:()=>{},hoverEffect:null,setHoverEffect:()=>{},headingCompression:g,setHeadingCompression:()=>{},siteWidth:null,setSiteWidth:()=>{},siteGutter:null,blockGap:null,setSiteGutter:()=>{},setBlockGap:()=>{},headingTypography:B,setHeadingTypography:()=>{},textStyles:null,setTextStyles:()=>{},wordStyles:null,heroBackgroundFollowsWidth:null,setHeroBackgroundFollowsWidth:()=>{},sectionBackgroundWidth:null,setSectionBackgroundWidth:()=>{},sectionContentWidth:null,setSectionContentWidth:()=>{},photographyGrayscale:null,setPhotographyGrayscale:()=>{},shareButtonOnPosts:null,setShareButtonOnPosts:()=>{},themeFromDocument:!1,selected:!1,setSelected:()=>{},select:()=>{},setSelectHandler:()=>{}});function Ct({children:b,websiteName:o=null,templateChrome:l=!1,templateName:n=null,chromePlaceholder:r=!1,themeMode:V=N,onThemeModeChange:c,themeSwitchShown:Z=R,onThemeSwitchShownChange:u,theme:q=Y,onThemeChange:i,fonts:J=j,onFontsChange:d,sizes:K=M,onSizesChange:S,cornerRadiusPx:Q=null,onCornerRadiusPxChange:a,cardShadow:X=null,onCardShadowChange:p,shadowColor:$=null,onShadowColorChange:E,cardGap:C=O,onCardGapChange:f,hoverEffect:tt=null,onHoverEffectChange:T,headingCompression:et=g,onHeadingCompressionChange:m,siteWidth:st=null,onSiteWidthChange:H,siteGutter:lt=null,blockGap:ot=null,onSiteGutterChange:D,onBlockGapChange:_,headingTypography:nt=B,onHeadingTypographyChange:h,textStyles:rt=null,onTextStylesChange:w,wordStyles:ct=null,heroBackgroundFollowsWidth:ut=null,onHeroBackgroundFollowsWidthChange:P,sectionBackgroundWidth:it=null,onSectionBackgroundWidthChange:x,sectionContentWidth:dt=null,onSectionContentWidthChange:A,photographyGrayscale:St=null,onPhotographyGrayscaleChange:k,shareButtonOnPosts:at=null,onShareButtonOnPostsChange:v,themeFromDocument:pt=!1}){const[s,F]=W(null),Et=e(t=>F(Yt=>Yt??t),[]),[ft,Tt]=W(!1),mt=e(t=>c?.(t),[c]),Ht=e(t=>u?.(t),[u]),Dt=e(t=>i?.(t),[i]),_t=e(t=>d?.(t),[d]),ht=e(t=>S?.(t),[S]),wt=e(t=>H?.(t),[H]),Pt=e(t=>D?.(t),[D]),xt=e(t=>_?.(t),[_]),At=e(t=>P?.(t),[P]),kt=e(t=>x?.(t),[x]),vt=e(t=>A?.(t),[A]),Ft=e(t=>k?.(t),[k]),Gt=e(t=>v?.(t),[v]),yt=e(t=>a?.(t),[a]),It=e(t=>p?.(t),[p]),Lt=e(t=>E?.(t),[E]),Ut=e(t=>f?.(t),[f]),Wt=e(t=>T?.(t),[T]),Ot=e(t=>m?.(t),[m]),gt=e(t=>h?.(t),[h]),Bt=e(t=>w?.(t),[w]),{select:Mt,setSelectHandler:Rt}=Zt(),G=s?.logoUrl,y=s?.logoReversed,I=s?.logoInkIsDark,L=s!==null,Nt=bt(()=>({logo:L?{logoUrl:G,logoReversed:y,logoInkIsDark:I}:null,placeholder:l||r,wordmark:l?n:o}),[L,G,y,I,l,r,n,o]);return U(Vt.Provider,{value:Nt,children:U(z.Provider,{value:{settings:s,setSettings:F,primeSettings:Et,websiteName:o,templateChrome:l,templateName:n,chromePlaceholder:r,themeMode:V,setThemeMode:mt,themeSwitchShown:Z,setThemeSwitchShown:Ht,theme:q,setTheme:Dt,fonts:J,setFonts:_t,sizes:K,setSizes:ht,cornerRadiusPx:Q,setCornerRadiusPx:yt,cardShadow:X,setCardShadow:It,shadowColor:$,setShadowColor:Lt,cardGap:C,setCardGap:Ut,hoverEffect:tt,setHoverEffect:Wt,headingCompression:et,setHeadingCompression:Ot,siteWidth:st,setSiteWidth:wt,siteGutter:lt,blockGap:ot,setSiteGutter:Pt,setBlockGap:xt,headingTypography:nt,setHeadingTypography:gt,textStyles:rt,setTextStyles:Bt,wordStyles:ct,heroBackgroundFollowsWidth:ut,setHeroBackgroundFollowsWidth:At,sectionBackgroundWidth:it,setSectionBackgroundWidth:kt,sectionContentWidth:dt,setSectionContentWidth:vt,photographyGrayscale:St,setPhotographyGrayscale:Ft,shareButtonOnPosts:at,setShareButtonOnPosts:Gt,themeFromDocument:pt,selected:ft,setSelected:Tt,select:Mt,setSelectHandler:Rt},children:b})})}const te=()=>zt(z);export{z as PreviewHeaderContext,Ct as PreviewHeaderProvider,te as usePreviewHeader};

package/dist/render/components/SpecStrip.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{say as a}from"../../format/lib/editor-words.js";const o=()=>[{text:a("Spec label"),tone:"normal"},{text:a("Spec value"),tone:"muted"},{text:a("Spec label"),tone:"normal"},{text:a("Spec value"),tone:"muted"}];function d({cells:l,fill:x="dark",editing:i=!1}){const n=(l??[]).filter(e=>(e?.text??"").trim()),r=n.length>0?n:i?o():[];if(r.length===0)return null;const s=x!=="none",p=t("div",{className:"mx-auto flex max-w-[min(var(--sf-page-cap,var(--sf-site-width,1600px)),var(--sf-site-width,1600px))] flex-wrap items-baseline justify-between gap-x-8 gap-y-1 px-[var(--sf-site-gutter,40px)] py-4 text-[length:var(--size-label,12px)] uppercase tracking-[0.1em] max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[800px]:px-[min(20px,var(--sf-site-gutter,40px))] max-[800px]:py-3",children:r.map((e,m)=>t("span",{className:s?e.tone==="muted"?"text-plate-band-fg-dim":"text-plate-band-fg":e.tone==="muted"?"text-fg-dim":"text-fg",children:e.text},m))});return t("section",{className:"w-full",children:s?t("div",{className:"bg-plate-band",children:p}):t("div",{className:"border-t border-line",children:p})})}export{d as default};
+import{jsx as t}from"react/jsx-runtime";import{say as a}from"../../format/lib/editor-words.js";const o=()=>[{text:a("Spec label"),tone:"normal"},{text:a("Spec value"),tone:"muted"},{text:a("Spec label"),tone:"normal"},{text:a("Spec value"),tone:"muted"}];function d({cells:p,fill:x="dark",editing:i=!1}){const n=(p??[]).filter(e=>(e?.text??"").trim()),r=n.length>0?n:i?o():[];if(r.length===0)return null;const l=x!=="none",s=t("div",{className:"mx-auto flex max-w-[var(--sf-site-width,1600px)] flex-wrap items-baseline justify-between gap-x-8 gap-y-1 px-[var(--sf-site-gutter,40px)] py-4 text-[length:var(--size-label,12px)] uppercase tracking-[0.1em] max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[800px]:px-[min(20px,var(--sf-site-gutter,40px))] max-[800px]:py-3",children:r.map((e,m)=>t("span",{className:l?e.tone==="muted"?"text-plate-band-fg-dim":"text-plate-band-fg":e.tone==="muted"?"text-fg-dim":"text-fg",children:e.text},m))});return t("section",{className:"w-full",children:l?t("div",{className:"bg-plate-band",children:s}):t("div",{className:"border-t border-line",children:s})})}export{d as default};

package/dist/render/lib/puck/blocks/general/IntroBleed/render.js

@@ -1,2 +1,2 @@
-import{jsx as l}from"react/jsx-runtime";import{PAGE_WIDTH as a,centredCap as b}from"../../../../../../format/lib/content/page-width.js";import{TYPE_SIZE_INHERIT as t}from"../../../../../../format/lib/content/section-type-size.js";import r from"../../../../../components/IntroBleed.js";import{hidableText as d}from"efficient-easel/draw";import{parseIntroBleedLayout as n}from"../../../../../../format/lib/sections/intro-bleed-layout.js";import{phHide as o,ctaHide as c}from"../../scaffold.js";const i={eyebrow:"— Label",title:`Section headline
-*Highlight line*`,body:"A sentence or two of supporting copy."};function y(e){if(e===!1)return b(`var(--sf-page-width, ${a.default}px)`)}const M={label:"Scroll-Over Text",defaultProps:{eyebrow:"",title:"",body:"",imageSrc:"",imageSrcMobile:"",heightDesktop:100,heightMobile:100,overlay:60,titleSizeDesktop:t,bodySizeDesktop:t,titleSizeMobile:t,bodySizeMobile:t,ctaText:"",ctaHref:"",buttonColor:"",buttonTextColor:"",sticky:!0,uppercase:!1,fullWidth:!0},render:e=>l(r,{eyebrow:o(e.eyebrow,i.eyebrow,e.puck),title:o(e.title,i.title,e.puck),body:o(e.body,i.body,e.puck),imageLabel:d(e.title)||i.title,imageSrc:e.imageSrc||void 0,imageSrcMobile:e.imageSrcMobile||void 0,cta:c(e.ctaText,e.ctaHref,e.puck),sticky:e.sticky,layout:n(e.layout),copyShareDesktop:e.copyShareDesktop,copyShareMobile:e.copyShareMobile,heightDesktop:e.heightDesktop,heightMobile:e.heightMobile,overlay:e.overlay,titleSizeDesktop:e.titleSizeDesktop,bodySizeDesktop:e.bodySizeDesktop,titleSizeMobile:e.titleSizeMobile,bodySizeMobile:e.bodySizeMobile,buttonColor:e.buttonColor||void 0,buttonTextColor:e.buttonTextColor||void 0,uppercase:e.uppercase,capStyle:y(e.fullWidth)})};export{i as INTRO_PH,M as IntroBleedRender};
+import{jsx as l}from"react/jsx-runtime";import{SITE_WIDTH_CAP as b,centredCap as a}from"../../../../../../format/lib/content/page-width.js";import{TYPE_SIZE_INHERIT as t}from"../../../../../../format/lib/content/section-type-size.js";import n from"../../../../../components/IntroBleed.js";import{hidableText as r}from"efficient-easel/draw";import{parseIntroBleedLayout as c}from"../../../../../../format/lib/sections/intro-bleed-layout.js";import{phHide as o,ctaHide as d}from"../../scaffold.js";const i={eyebrow:"— Label",title:`Section headline
+*Highlight line*`,body:"A sentence or two of supporting copy."};function y(e){if(e===!1)return a(b)}const M={label:"Scroll-Over Text",defaultProps:{eyebrow:"",title:"",body:"",imageSrc:"",imageSrcMobile:"",heightDesktop:100,heightMobile:100,overlay:60,titleSizeDesktop:t,bodySizeDesktop:t,titleSizeMobile:t,bodySizeMobile:t,ctaText:"",ctaHref:"",buttonColor:"",buttonTextColor:"",sticky:!0,uppercase:!1,contentWidth:"site"},render:e=>l(n,{eyebrow:o(e.eyebrow,i.eyebrow,e.puck),title:o(e.title,i.title,e.puck),body:o(e.body,i.body,e.puck),imageLabel:r(e.title)||i.title,imageSrc:e.imageSrc||void 0,imageSrcMobile:e.imageSrcMobile||void 0,cta:d(e.ctaText,e.ctaHref,e.puck),sticky:e.sticky,layout:c(e.layout),copyShareDesktop:e.copyShareDesktop,copyShareMobile:e.copyShareMobile,heightDesktop:e.heightDesktop,heightMobile:e.heightMobile,overlay:e.overlay,titleSizeDesktop:e.titleSizeDesktop,bodySizeDesktop:e.bodySizeDesktop,titleSizeMobile:e.titleSizeMobile,bodySizeMobile:e.bodySizeMobile,buttonColor:e.buttonColor||void 0,buttonTextColor:e.buttonTextColor||void 0,uppercase:e.uppercase,capStyle:y(e.fullWidth)})};export{i as INTRO_PH,M as IntroBleedRender};

package/dist/render/lib/puck/page-render.d.ts

@@ -1,5 +1,6 @@
 import type { Config } from "efficient-easel/blocks";
-export default function PageRender({ config, data }: {
+export default function PageRender({ config, data, metadata, }: {
     config: Config;
     data: unknown;
+    metadata?: Record<string, unknown>;
 }): import("react").JSX.Element;

package/dist/render/lib/puck/page-render.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{Render as m}from"efficient-easel/render";import{capHeroGroups as t}from"../../../format/lib/puck/cap-hero-groups.js";import{oneH1 as a}from"../../../format/lib/puck/one-h1.js";import{migrateLegacyPageData as i}from"./migrate-legacy.js";import{migrateRenamedProps as p}from"../../../format/lib/puck/renamed-props.js";function f({config:r,data:o}){return e(m,{config:r,data:a(t(p(i(o))))})}export{f as default};
+"use client";import{jsx as t}from"react/jsx-runtime";import{Render as a}from"efficient-easel/render";import{capHeroGroups as m}from"../../../format/lib/puck/cap-hero-groups.js";import{oneH1 as i}from"../../../format/lib/puck/one-h1.js";import{migrateLegacyPageData as p}from"./migrate-legacy.js";import{migrateRenamedProps as f}from"../../../format/lib/puck/renamed-props.js";function n({config:r,data:e,metadata:o}){return t(a,{config:r,metadata:o,data:i(m(f(p(e))))})}export{n as default};

package/dist/render/lib/puck/passes/section-width.d.ts

@@ -1,5 +1,11 @@
-import { type WidthMode } from "../../../../format/lib/content/section-width.js";
+import { type SectionWidths, type WidthAnswer, type WidthMode } from "../../../../format/lib/content/section-width.js";
 import type { BlockPass } from "../../../../format/lib/puck/passes/types.js";
+export declare function drawsTwoWidthRows(key: string): boolean;
+export declare const SITE_CONTENT_VAR = "--sf-sw-site";
+export declare const SECTION_CONTENT_VAR = "--sf-sw-content";
+export declare const SECTION_BACKGROUND_VAR = "--sf-bg-cap";
+export declare const SECTION_CONTENT_CLASS = "contents [--sf-site-width:var(--sf-sw-content)] max-[800px]:[--sf-site-width:var(--sf-sw-site)]";
+export declare function contentOverride(w: SectionWidths, background: WidthAnswer | null): string | null;
 export declare const sectionWidth: BlockPass;
 export declare function widthModeFields<T extends Record<string, unknown>>(fields: T, w: {
     mode: WidthMode;

package/dist/render/lib/puck/passes/section-width.js

@@ -1 +1 @@
-import{jsx as p}from"react/jsx-runtime";import{resolveContainerDirection as C}from"../../../../format/lib/content/container-direction.js";import{IMAGE_WIDTH as a}from"../../../../format/lib/content/image-width.js";import{HERO_BACKGROUND_VAR as E,HERO_CHROME_CAP_VAR as O,HERO_CHROME_INSET_VAR as S,SITE_WIDTH_CAP as w,centredCap as I}from"../../../../format/lib/content/page-width.js";import{resolveWidth as u}from"../../../../format/lib/content/section-width.js";import{isInsideSiteGutter as m}from"../../../../format/lib/content/site-gutter.js";import{parentCapsWidth as R}from"../../../../format/lib/sections/section-head-placement.js";import{addShowWhenFacts as f,withRowsShownWhen as h}from"../../../../format/lib/puck/show-when-attach.js";import{findParentNode as H,isNestedNode as N}from"../../../../format/lib/puck/passes/document-position.js";const W=new Set(["SectionHeader","ProductGrid","IntroBleed","RelatedProducts","Banner","Stats","Logos","Divider","OrderSummary","DeliveryOptions","PaymentBadges","CheckoutCTA","Ticker","CategoryBar","DocTabs","CustomHTML","Spacer","Flex","Grid"]),g=new Set(["Hero","HeroSingle","Manifesto","ProductHero"]),B=new Set(["ProductHero"]),K={name:"sectionWidth",applies:(e,n,t)=>n.isSection(e)&&!W.has(e)&&!!t&&typeof t.render=="function",panel(e,n,t){const r=t.widthField;e.fields={...e.fields,...r("full")};const o=e.resolveFields;e.resolveFields=(d,c)=>{const i=o?o(d,c):c.fields,s=u(d?.props??{},"full");return i&&typeof i.then=="function"?i.then(l=>_(l,s)):_(i,s)}},draw(e,n){const t=g.has(n),r=e.render;e.render=o=>{const{mode:d,inherited:c}=u(o,"full"),i=r(o);if(d==="full")return t&&!c&&!B.has(n)?p("div",{style:{[E]:"none",[S]:"initial",[O]:"initial"},children:i}):i;const s=I(w);return t?p("div",{style:{"--sf-page-cap":w},children:i}):p("div",{style:s,children:i})}}};function _(e,n){if(!e||!("widthMode"in e))return e;const t={...e},r=t.widthMode;return r&&(t.widthMode={...r,currentValue:n.mode,inherited:n.inherited}),t}const y=new Set(["Heading","Text","ImageBlock","ButtonBlock","Banner","Stats","Logos","Divider","Flex","Grid","OrderSummary","DeliveryOptions","PaymentBadges","CheckoutCTA"]),X={name:"containedWidth",applies:(e,n,t)=>y.has(e)&&!!t&&typeof t.render=="function",panel(e,n,t){const r=t.widthField;e.fields=F(n,e,{...e.fields,...r("page")});const o=e.resolveFields;e.resolveFields=(d,c)=>{const i=o?o(d,c):c.fields,s=u(d?.props??{},"page"),l=T=>_(T,s);return i&&typeof i.then=="function"?i.then(l):l(i)}},draw(e){const n=e.render;e.render=t=>{const{mode:r}=u(t,"page");return n({...t,contained:r!=="full"})}}},A={not:{context:"inHeroGroupRow",is:!0}},q={name:"buttonAlignInRow",applies:e=>e==="ButtonBlock",panel(e){const n=e;n.fields=h(n.fields??{},["align"],A),f(n,{inHeroGroupRow:(t,r)=>{const o=H(r.appState,t.props?.id);return!!o&&o.type==="HeroGroup"&&C("HeroGroup",o.props?.direction)==="row"}})}};function D(e){return Object.values(e).some(n=>!!n&&typeof n=="object"&&n.type==="slot")}const P={any:[]},x={not:{context:"insideSiteGutter",is:!0}},v={not:{context:"widthCappedByParent",is:!0}};function F(e,n,t){return e==="ButtonBlock"?h(t,["_gWidth","widthMode","pageWidth"],P):D(t)?(f(n,{insideSiteGutter:(r,o)=>m(o.appState?.data?.content,r.props?.id)}),h(t,["widthMode","pageWidth"],x)):(f(n,{widthCappedByParent:(r,o)=>"parent"in o?R(o.parent):N({props:r.props??{}},o)}),h(t,["widthMode","pageWidth"],v))}const z={name:"imageWidth",applies:e=>e==="ImageBlock",panel(e,n,t){const{slider:r,WidthIcon:o}=t;if(e?.fields){const d=r("Image width",p(o,{}),a.min,a.max,a.step,a.fallback,a.unit),c="focal",i=Object.entries(e.fields),s=i.findIndex(([l])=>l===c);e.fields=Object.fromEntries(s===-1?[...i,["width",d]]:[...i.slice(0,s+1),["width",d],...i.slice(s+1)])}}};export{q as buttonAlignInRow,X as containedWidth,z as imageWidth,K as sectionWidth,_ as widthModeFields};
+import{jsx as l}from"react/jsx-runtime";import{resolveContainerDirection as g}from"../../../../format/lib/content/container-direction.js";import{IMAGE_WIDTH as h}from"../../../../format/lib/content/image-width.js";import{HERO_BACKGROUND_VAR as E,HERO_CHROME_CAP_VAR as S,HERO_CHROME_INSET_VAR as I,SITE_WIDTH_CAP as p,centredCap as R,heroBackgroundTokens as m}from"../../../../format/lib/content/page-width.js";import{SECTION_WIDTH_FAMILY as W,resolveSectionWidth as A,resolveWidth as _,sectionHasWidthRows as H,siteWidthsOf as B}from"../../../../format/lib/content/section-width.js";import{isInsideSiteGutter as y}from"../../../../format/lib/content/site-gutter.js";import{parentCapsWidth as D}from"../../../../format/lib/sections/section-head-placement.js";import{addShowWhenFacts as T,withRowsShownWhen as w}from"../../../../format/lib/puck/show-when-attach.js";import{findParentNode as b,isNestedNode as F}from"../../../../format/lib/puck/passes/document-position.js";const P=new Set(["SectionHeader","ProductGrid","RelatedProducts","Banner","Stats","Logos","Divider","OrderSummary","DeliveryOptions","PaymentBadges","CheckoutCTA","Ticker","CategoryBar","DocTabs","CustomHTML","Spacer","Flex","Grid"]),M=new Set(["Manifesto","ProductHero"]),G=new Set(["ProductHero"]),k=new Set(["hero","scrollOver","background"]);function v(t){return H(t)&&k.has(W[t])}const x="--sf-sw-site",L="--sf-sw-content",V="--sf-bg-cap",j="contents [--sf-site-width:var(--sf-sw-content)] max-[800px]:[--sf-site-width:var(--sf-sw-site)]";function O(t,e){const n=e==="content";return t.content==="full"?n?null:"100vw":t.content==="content"&&t.contentMax!==null?n?`min(${t.contentMax}px,var(${x}))`:`${t.contentMax}px`:null}function C(t,e){return e===null?t:l("div",{className:"contents",style:{[x]:p},children:l("div",{className:j,style:{[L]:e},children:t})})}function U(t,e){const n=W[e],r=t.render;t.render=o=>{const d=B(o),c=A(e,o),i={...c,content:c.content??d.content};if(n==="hero"){const u=i.background??d.background,f=C(r(o),O(i,u));return u==="full"?l("div",{style:{[E]:"none",[I]:"initial",[S]:"initial"},children:f}):u==="content"?l("div",{style:m(!0),children:f}):f}const s=i.background??d.background??"full";if(n==="scrollOver"){const u=(i.content??"content")==="full",f=C(r({...o,fullWidth:u}),u?null:O(i,s));return s==="content"?l("div",{className:"contents",style:{[V]:p},children:f}):f}const a=C(r(o),O(i,s));return s==="content"?l("div",{style:R(p),children:a}):a}}const dt={name:"sectionWidth",applies:(t,e,n)=>e.isSection(t)&&!P.has(t)&&!!n&&typeof n.render=="function",panel(t,e,n){if(v(e)){t.fields={...t.fields,...n.sectionWidthFields(e)};return}const r=n.widthField;t.fields={...t.fields,...r("full")};const o=t.resolveFields;t.resolveFields=(d,c)=>{const i=o?o(d,c):c.fields,s=_(d?.props??{},"full");return i&&typeof i.then=="function"?i.then(a=>N(a,s)):N(i,s)}},draw(t,e){if(v(e)){U(t,e);return}const n=M.has(e),r=t.render;t.render=o=>{const{mode:d,inherited:c}=_(o,"full"),i=r(o);if(d==="full")return n&&!c&&!G.has(e)?l("div",{style:{[E]:"none",[I]:"initial",[S]:"initial"},children:i}):i;const s=R(p);return n?l("div",{style:{"--sf-page-cap":p},children:i}):l("div",{style:s,children:i})}}};function N(t,e){if(!t||!("widthMode"in t))return t;const n={...t},r=n.widthMode;return r&&(n.widthMode={...r,currentValue:e.mode,inherited:e.inherited}),n}const Y=new Set(["Heading","Text","ImageBlock","ButtonBlock","Banner","Stats","Logos","Divider","Flex","Grid","OrderSummary","DeliveryOptions","PaymentBadges","CheckoutCTA"]),ct={name:"containedWidth",applies:(t,e,n)=>Y.has(t)&&!!n&&typeof n.render=="function",panel(t,e,n){const r=n.widthField;t.fields=J(e,t,{...t.fields,...r("page")});const o=t.resolveFields;t.resolveFields=(d,c)=>{const i=o?o(d,c):c.fields,s=_(d?.props??{},"page"),a=u=>N(u,s);return i&&typeof i.then=="function"?i.then(a):a(i)}},draw(t){const e=t.render;t.render=n=>{const{mode:r}=_(n,"page");return e({...n,contained:r!=="full"})}}},$={not:{context:"inHeroGroupRow",is:!0}},lt={name:"buttonAlignInRow",applies:t=>t==="ButtonBlock",panel(t){const e=t;e.fields=w(e.fields??{},["align"],$),T(e,{inHeroGroupRow:(n,r)=>{const o=b(r.appState,n.props?.id);return!!o&&o.type==="HeroGroup"&&g("HeroGroup",o.props?.direction)==="row"}})}};function K(t){return Object.values(t).some(e=>!!e&&typeof e=="object"&&e.type==="slot")}const X={any:[]},q={not:{context:"insideSiteGutter",is:!0}},z={not:{context:"widthCappedByParent",is:!0}};function J(t,e,n){return t==="ButtonBlock"?w(n,["_gWidth","widthMode","pageWidth"],X):K(n)?(T(e,{insideSiteGutter:(r,o)=>y(o.appState?.data?.content,r.props?.id)}),w(n,["widthMode","pageWidth"],q)):(T(e,{widthCappedByParent:(r,o)=>"parent"in o?D(o.parent):F({props:r.props??{}},o)}),w(n,["widthMode","pageWidth"],z))}const at={name:"imageWidth",applies:t=>t==="ImageBlock",panel(t,e,n){const{slider:r,WidthIcon:o}=n;if(t?.fields){const d=r("Image width",l(o,{}),h.min,h.max,h.step,h.fallback,h.unit),c="focal",i=Object.entries(t.fields),s=i.findIndex(([a])=>a===c);t.fields=Object.fromEntries(s===-1?[...i,["width",d]]:[...i.slice(0,s+1),["width",d],...i.slice(s+1)])}}};export{V as SECTION_BACKGROUND_VAR,j as SECTION_CONTENT_CLASS,L as SECTION_CONTENT_VAR,x as SITE_CONTENT_VAR,lt as buttonAlignInRow,ct as containedWidth,O as contentOverride,v as drawsTwoWidthRows,at as imageWidth,dt as sectionWidth,N as widthModeFields};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "efficient-web-builder",
-  "version": "29.0.0",
+  "version": "30.0.0",
   "description": "The EFFICIENT website builder: the website editor, the general sections and the renderer that draws them, compiled. Hostable by any EFFICIENT product; nothing here imports a host.",
   "license": "UNLICENSED",
   "author": "Efficient Pty Ltd",

package/dist/editor/components/HeroImageField.d.ts

@@ -1,6 +0,0 @@
-export declare const HERO_IMAGE_LABEL = "Hero image";
-export default function HeroImageField({ value, onChange, showHint, }: {
-    value: boolean | null;
-    onChange: (v: boolean | null) => void;
-    showHint?: boolean;
-}): import("react").JSX.Element;

package/dist/editor/components/HeroImageField.js

@@ -1 +0,0 @@
-"use client";import{jsx as l}from"react/jsx-runtime";import{SettingsDefaultReset as h,SettingsField as g,SettingsSegmented as p}from"efficient-easel/panel";import{say as e,editorEaselWords as c}from"../../format/lib/editor-words.js";import{WIDTH_CHOICE_LABEL as d}from"../../format/lib/content/section-width.js";import{ImageIcon as m}from"efficient-easel/icons";const o="Hero image",i=[{followsWidth:!1,label:d.full},{followsWidth:!0,label:d.page}],u="Whether the big picture at the top of a page runs edge to edge, or sits inside the page width. The words follow the page width either way.";function w({value:a,onChange:n,showHint:f=!0}){const s=a===null,r=a??!1;return l(g,{label:e(o),icon:l(m,{}),value:e(i.find(t=>t.followsWidth===r).label),changed:!s,action:l(h,{words:c()?.panel,label:e(o),changed:!s,detail:e(i.find(t=>!t.followsWidth).label),onReset:()=>n(null)}),hint:f?e(u):void 0,children:l(p,{options:i.map(t=>({id:t.followsWidth,label:e(t.label)})),value:r,ariaLabel:e(o),onChange:n})})}export{o as HERO_IMAGE_LABEL,w as default};

package/dist/editor/components/SiteWidthField.d.ts

@@ -1,7 +0,0 @@
-export declare const SITE_WIDTH_LABEL = "Content width";
-export declare const SITE_WIDTH_HINT = "The standard width every page on this site renders at.";
-export default function SiteWidthField({ value, onChange, showHint, }: {
-    value: number | null;
-    onChange: (v: number | null) => void;
-    showHint?: boolean;
-}): import("react").JSX.Element;

package/dist/editor/components/SiteWidthField.js

@@ -1 +0,0 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{SettingsDefaultReset as l,SettingsField as m}from"efficient-easel/panel";import{WidthIcon as p}from"efficient-easel/icons";import{PAGE_WIDTH as t}from"../../format/lib/content/page-width.js";import{say as i,editorEaselWords as f}from"../../format/lib/editor-words.js";import{Slider as c}from"../lib/puck/controls.js";const o="Content width",r=t.default,u="The standard width every page on this site renders at.";function h({value:n,onChange:s,showHint:d=!0}){const a=n===null;return e(m,{label:i(o),labelId:"sf-site-width",icon:e(p,{}),value:`${n??r}px`,changed:!a,action:e(l,{words:f()?.panel,label:i(o),changed:!a,detail:`${r}px`,onReset:()=>s(null)}),hint:d?i(u):void 0,children:e(c,{min:t.min,max:t.max,step:t.step,value:n??r,readout:!1,ariaLabel:i(o),onChange:s})})}export{u as SITE_WIDTH_HINT,o as SITE_WIDTH_LABEL,h as default};