efficient-web-builder 28.1.0 → 30.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +76 -0
- package/dist/editor/components/MediaUploadField.js +1 -1
- package/dist/editor/components/SectionWidthRows.d.ts +35 -0
- package/dist/editor/components/SectionWidthRows.js +1 -0
- package/dist/editor/components/StorefrontEditor.js +1 -1
- package/dist/editor/components/WebsiteSettingsPanel.js +1 -1
- package/dist/editor/components/WidthFollowField.js +1 -1
- package/dist/editor/components/storefront-editor.css +1 -1
- package/dist/editor/lib/puck/blocks/general/IntroBleed/fields.js +1 -1
- package/dist/editor/lib/puck/controls.d.ts +3 -0
- package/dist/editor/lib/puck/controls.js +1 -1
- package/dist/editor/lib/puck/overrides.js +1 -1
- package/dist/editor/lib/puck/passes/inspector.js +1 -1
- package/dist/editor/lib/puck/section-width-fields.d.ts +1 -0
- package/dist/editor/lib/puck/section-width-fields.js +1 -0
- package/dist/format/lib/content/page-width.js +1 -1
- package/dist/format/lib/content/section-width.d.ts +24 -0
- package/dist/format/lib/content/section-width.js +1 -1
- package/dist/format/lib/editor-words-catalogue.d.ts +5 -2
- package/dist/format/lib/editor-words-catalogue.js +4 -4
- package/dist/format/lib/puck/passes/types.d.ts +1 -0
- package/dist/format/lib/site-theme-row.d.ts +2 -0
- package/dist/render/components/HeroSection.js +1 -1
- package/dist/render/components/HeroSingle.js +2 -2
- package/dist/render/components/HeroSlide.js +1 -1
- package/dist/render/components/IntroBleed.js +1 -1
- package/dist/render/components/PreviewHeaderContext.d.ts +9 -1
- package/dist/render/components/PreviewHeaderContext.js +1 -1
- package/dist/render/components/SpecStrip.js +1 -1
- package/dist/render/lib/puck/blocks/general/IntroBleed/render.js +2 -2
- package/dist/render/lib/puck/page-render.d.ts +2 -1
- package/dist/render/lib/puck/page-render.js +1 -1
- package/dist/render/lib/puck/passes/section-width.d.ts +7 -1
- package/dist/render/lib/puck/passes/section-width.js +1 -1
- package/package.json +7 -6
- package/dist/editor/components/HeroImageField.d.ts +0 -6
- package/dist/editor/components/HeroImageField.js +0 -1
- package/dist/editor/components/SiteWidthField.d.ts +0 -7
- package/dist/editor/components/SiteWidthField.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import{useEffect as Z,useRef as $,useState as z}from"react";import N from"./HeroPoster.js";import{HeroVideoBackdrop as ee,HeroVideoPlayer as oe}from"./HeroVideoPlay.js";import{resolveMedia as l}from"../lib/media.js";import{hasSectionHeight as re,resolveSectionHeight as M}from"../../format/lib/content/section-height.js";import{DEFAULT_OVERLAY_COLOR as te,DEFAULT_OVERLAY_POSITION as se,overlayGradient as ne}from"../../format/lib/sections/hero-overlay.js";import{ON_MEDIA_INK_STYLE as ie}from"../../format/lib/content/ink.js";import{usePreviewHeroPart as ae}from"./PreviewHeroPartContext.js";import{tk as C}from"../../format/components/floating-editor/tokens.js";import{HERO_PART_ATTR as ce,heroPartId as le,readHeroPartId as de}from"../lib/puck/hero-media-parts.js";import{markOverlayPortal as me}from"../../format/lib/puck/overlay-portal.js";import{hidableText as pe}from"efficient-easel/draw";import{normaliseVideoPlayback as ue,normaliseVideoSource as fe,parseYouTubeId as he}from"../../format/lib/hero-video.js";import{heroPictureCount as xe,normaliseMediaLayout as ve,resolvePhoneLayout as ge}from"../../format/lib/hero-media-layout.js";const D=`
|
|
2
2
|
.hero-part-pick { cursor: pointer; }
|
|
3
3
|
.hero-part-pick:hover {
|
|
4
4
|
outline: 2px solid color-mix(in srgb, ${C.accent} 45%, transparent);
|
|
@@ -8,4 +8,4 @@
|
|
|
8
8
|
outline: 2px solid ${C.accent};
|
|
9
9
|
outline-offset: -2px;
|
|
10
10
|
}
|
|
11
|
-
`;function Pe({overlay:r=100,overlayColor:o=te,overlayPosition:y=se,mediaType:u="image",mediaSrc:i,poster:f,objectPosition:d,objectPositionPhone:
|
|
11
|
+
`;function Pe({overlay:r=100,overlayColor:o=te,overlayPosition:y=se,mediaType:u="image",mediaSrc:i,poster:f,objectPosition:d,objectPositionPhone:m,tintColor:h="#000000",tintOpacity:n=0,heightDesktop:x,heightMobile:t,boxes:a,videoSource:k,youtubeUrl:v,videoPlayback:g,mediaLayout:S,mediaLayoutPhone:T,mediaImage2:F,objectPosition2:G,objectPosition2Phone:K,tintColor2:U="#000000",tintOpacity2:B=0,editing:s=!1}){const E=re(x,t),q=E?"h-[var(--sf-hero-h-m)] min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",J=E?{"--sf-hero-h-d":M(x),"--sf-hero-h-m":M(t)}:void 0,c=u==="video",R=c?l(i):void 0,O=c?l(f):l(i)??l(f),P=c&&fe(k)==="youtube",w=c&&ue(g)==="click",V=P?he(pe(v)):null,A=c&&!P&&!w,[L,Q]=z(!1),_=!L,W=$(null),X=u==="video"?"media":"image",b=ve(S),I=ge(T,b),j=!c&&xe({mediaLayout:S,mediaLayoutPhone:T})>1;return p("section",{ref:W,className:`relative mx-[var(--sf-hero-bleed-m,calc(50%_-_50vw))] w-[var(--sf-hero-bleed-w,100vw)] ${q} max-w-[var(--sf-hero-cap,none)] overflow-hidden`,style:J,children:[j?p("div",{className:`absolute inset-0 z-[1] grid ${be[I]} ${ye[b]}`,"data-hero-layout":b,"data-hero-layout-phone":I,children:[s&&e("style",{children:D}),p(H,{part:"image",editing:s,className:"relative overflow-hidden",children:[e(N,{posterSrc:l(i),showVideo:!1,objectPosition:d,objectPositionPhone:m}),e(Y,{color:h,opacity:n})]}),p(H,{part:"image2",editing:s,className:`relative overflow-hidden${I==="one"?" max-[719px]:hidden":""}${b==="one"?" min-[720px]:hidden":""}`,children:[e(N,{posterSrc:l(F),showVideo:!1,objectPosition:G,objectPositionPhone:K}),e(Y,{color:U,opacity:B})]})]}):p(H,{part:X,editing:s,className:"absolute inset-0 z-[1]",children:[s&&e("style",{children:D}),e(N,{videoSrc:A?R:void 0,posterSrc:O,showVideo:A,objectPosition:d,objectPositionPhone:m}),P&&e(ee,{youTubeId:V,ownPoster:!!O,background:!w,editing:s})]}),w&&e(oe,{youTubeId:V,fileSrc:P?void 0:R,playing:L,onPlay:()=>Q(!0),editing:s}),_&&!j&&n>0&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:h,opacity:Math.min(Math.max(n,0),100)/100}}),_&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:ne(o,y),opacity:Math.min(Math.max(r,0),100)/100}}),_&&a&&e("div",{className:["sf-hero-group-layer absolute inset-0 z-[3] mx-auto","max-w-[var(--sf-site-width,1600px)]","px-[var(--sf-site-gutter,40px)] pt-[140px] pb-14",s?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:ie,children:e(a,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}const be={one:"max-[719px]:grid-cols-1 max-[719px]:grid-rows-1",side:"max-[719px]:grid-cols-2 max-[719px]:grid-rows-1",stacked:"max-[719px]:grid-cols-1 max-[719px]:grid-rows-2"},ye={one:"min-[720px]:grid-cols-1 min-[720px]:grid-rows-1",side:"min-[720px]:grid-cols-2 min-[720px]:grid-rows-1",stacked:"min-[720px]:grid-cols-1 min-[720px]:grid-rows-2"};function Y({color:r,opacity:o}){return o>0?e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:r,opacity:Math.min(Math.max(o,0),100)/100}}):null}function H({part:r,editing:o,className:y,children:u}){const i=$(null),{selectedHeroPart:f,select:d}=ae(),[m,h]=z(null);Z(()=>{if(!o)return;const t=i.current;if(!t)return;const a=t.closest("[data-puck-component]")?.getAttribute("data-puck-component")??null;h(a);const k=me(t),v=g=>{a&&(g.stopPropagation(),g.preventDefault(),d(le(a,r)))};return t.addEventListener("click",v,{capture:!0}),()=>{k(),t.removeEventListener("click",v,{capture:!0})}},[o,r,d]);const n=de(f),x=o&&m!=null&&n?.nodeId===m&&(n.part===r||n.part==="media");return e("div",{ref:i,className:`${y}${o?" hero-part-pick":""}`,...o?{[ce]:r}:{},"data-selected":x?"":void 0,children:u})}export{Pe as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as N}from"react/jsx-runtime";import{createContext as k,useContext as H}from"react";import P from"./HeroPoster.js";import{resolveMedia as t}from"../lib/media.js";import{heroPhoneStackStyle as z}from"../../format/lib/hero-phone-stack.js";import{heroTextureGradient as C,heroTextureShown as D}from"../../format/lib/hero-texture.js";import{ON_MEDIA_INK_STYLE as M}from"../../format/lib/content/ink.js";const T=k({});function V({name:i,process:r,mediaType:u="video",mediaSrc:s,videoSpeed:a,poster:
|
|
1
|
+
"use client";import{jsx as e,jsxs as N}from"react/jsx-runtime";import{createContext as k,useContext as H}from"react";import P from"./HeroPoster.js";import{resolveMedia as t}from"../lib/media.js";import{heroPhoneStackStyle as z}from"../../format/lib/hero-phone-stack.js";import{heroTextureGradient as C,heroTextureShown as D}from"../../format/lib/hero-texture.js";import{ON_MEDIA_INK_STYLE as M}from"../../format/lib/content/ink.js";const T=k({});function V({name:i,process:r,mediaType:u="video",mediaSrc:s,videoSpeed:a,poster:l,objectPosition:f,objectPositionPhone:h,tintColor:x="#000000",tintOpacity:n=0,groups:d,editing:y=!1,themeClassName:c,themeStyle:v}){const{alignment:I="left",textureOpacity:p,textureOn:S,textureColor:g,quietVideo:b,phoneUpDown:w,phoneSideways:_}=H(T),o=u==="video",m=o?t(s):void 0,j=o?t(l):t(s)??t(l),E=typeof a=="number"?a/100:1;return N("section",{className:c?`relative h-full w-full overflow-hidden ${c}`:"relative h-full w-full overflow-hidden",style:v,"data-slide-name":i??"","data-slide-process":r??"","data-slide-media":m?"video":"still",children:[e(P,{videoSrc:m,posterSrc:j,showVideo:o,playbackRate:E,objectPosition:f,objectPositionPhone:o?void 0:h,quiet:b}),n>0&&e("div",{className:"absolute inset-0 z-[2]",style:{background:x,opacity:Math.min(Math.max(n,0),100)/100}}),D(S)&&e("div",{className:"absolute inset-0 z-[2]",style:{background:C(g),...p!==void 0?{opacity:p/100}:null}}),e("div",{className:["sf-hero-group-layer absolute inset-0 z-[3] mx-auto max-w-[var(--sf-site-width,1600px)] px-[var(--sf-site-gutter,40px)] pt-[140px] pb-14",y?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:{...M,...z(w,_)},children:d&&e(d,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}const K=Array.from({length:3},(i,r)=>({name:`Slide ${r+1}`,process:"Category",mediaType:"image",mediaVideo:"",poster:""}));export{K as HERO_SLIDE_SEEDS,T as HeroSlideStyleContext,V as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as Q}from"react/jsx-runtime";import U from"./Btn.js";import u from"./Placeholder.js";import V from"./SectionEyebrow.js";import{renderGold as N,renderHeadline as W,splitParagraphs as X}from"./goldPhrases.js";import{resolveTypeSize as
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as Q}from"react/jsx-runtime";import U from"./Btn.js";import u from"./Placeholder.js";import V from"./SectionEyebrow.js";import{renderGold as N,renderHeadline as W,splitParagraphs as X}from"./goldPhrases.js";import{resolveTypeSize as o}from"../../format/lib/content/section-type-size.js";import{HEADER_HEIGHT_CSS as j}from"../lib/puck/header-clearance.js";import{resolveSectionHeight as k}from"../../format/lib/content/section-height.js";import{INTRO_BLEED_COPY_SHARE as _,parseIntroBleedLayout as Z,resolveCopyShare as E}from"../../format/lib/sections/intro-bleed-layout.js";import{ON_MEDIA_INK_STYLE as ee}from"../../format/lib/content/ink.js";function te({eyebrow:a,title:l,body:s,cta:i,imageLabel:d,imageSrc:c,imageSrcMobile:w,layout:I,copyShareDesktop:z,copyShareMobile:D,sticky:m=!0,heightDesktop:H,heightMobile:S,overlay:p,titleSizeDesktop:B,titleSizeMobile:T,bodySizeDesktop:C,bodySizeMobile:L,buttonColor:M,buttonTextColor:A,uppercase:F=!1,capStyle:h}){const r=Z(I)==="stacked",x=n=>r?`calc(${k(n)} - ${j})`:k(n),O=x(H),P=x(S),R=o(B,"clamp(48px,7vw,96px)","heading","headingLarge"),$=o(T,"clamp(36px,7vw,96px)","heading","headingLarge"),G=o(C,"17px","body","body"),Y=o(L,"16px","body","body"),K=p!=null?p/100:r?0:.6,v=M||"var(--btn)",q=A||"var(--btn-ink)",f={"--intro-h-d":O,"--intro-h-m":P,"--intro-title-d":R,"--intro-title-m":$,"--intro-body-d":G,"--intro-body-m":Y,...r?{"--intro-copy-d":E(z,_.desktop),"--intro-copy-m":E(D,_.mobile),marginTop:j}:{}},g=h?"px-[var(--sf-site-gutter,40px)] max-[800px]:px-[min(20px,var(--sf-site-gutter,40px))]":"px-[60px] max-[960px]:px-6",b=t(Q,{children:[t("div",{className:"absolute inset-0",children:[e("div",{className:"absolute inset-0 hidden min-[960px]:block",children:e(u,{label:d,src:c})}),e("div",{className:"absolute inset-0 min-[960px]:hidden",children:e(u,{label:d,src:w||c})}),e("div",{className:"pointer-events-none absolute inset-0",style:{backgroundImage:"repeating-linear-gradient(45deg, transparent 0 80px, rgba(201,164,97,.04) 80px 81px)"}})]}),e("div",{className:"absolute inset-0",style:{background:`rgba(0,0,0,${K})`}})]}),y=t("div",{style:h,className:"flex flex-col gap-6",children:[a&&e(V,{text:a,size:14}),l&&e("h2",{className:["font-display font-medium leading-[0.95] tracking-[-0.03em]","text-[length:var(--intro-title-m)] min-[960px]:text-[length:var(--intro-title-d)]",F?"uppercase":""].join(" "),children:W(l,!1)}),s&&X(s).map((n,J)=>e("p",{className:"max-w-[560px] leading-[1.6] opacity-85 text-[length:var(--intro-body-m)] min-[960px]:text-[length:var(--intro-body-d)]",children:N(n)},J)),i.text&&e("div",{className:"mt-2 self-start",children:e(U,{href:i.href,variant:"ghost",style:{background:v,color:q,borderColor:v},children:N(i.text)})})]});return r?t("section",{style:f,className:[m?"sticky top-0":"relative","flex flex-col","h-[var(--intro-h-m)] min-[960px]:h-[var(--intro-h-d)] min-h-[420px]","overflow-hidden p-0 z-[1]"].join(" "),children:[e("div",{className:["relative z-[2] flex shrink-0 flex-col justify-center bg-bg py-10","min-h-[var(--intro-copy-m)] min-[960px]:min-h-[var(--intro-copy-d)]",g].join(" "),style:{color:"var(--fg)"},children:y}),e("div",{className:"relative min-h-0 flex-1 overflow-hidden",children:b})]}):t("section",{style:f,className:[m?"sticky top-0":"relative","h-[var(--intro-h-m)] min-[960px]:h-[var(--intro-h-d)] min-h-[420px]","overflow-hidden p-0 z-[1]","mx-auto w-full max-w-[var(--sf-bg-cap,none)]"].join(" "),children:[b,e("div",{className:["relative z-[2] flex h-full flex-col justify-center",g].join(" "),style:ee,children:y})]})}export{te as default};
|
|
@@ -47,6 +47,10 @@ type Ctx = {
|
|
|
47
47
|
setBlockGap: (v: number | null) => void;
|
|
48
48
|
heroBackgroundFollowsWidth: boolean | null;
|
|
49
49
|
setHeroBackgroundFollowsWidth: (v: boolean | null) => void;
|
|
50
|
+
sectionBackgroundWidth: "full" | "content" | null;
|
|
51
|
+
setSectionBackgroundWidth: (v: "full" | "content" | null) => void;
|
|
52
|
+
sectionContentWidth: "full" | "content" | null;
|
|
53
|
+
setSectionContentWidth: (v: "full" | "content" | null) => void;
|
|
50
54
|
photographyGrayscale: boolean | null;
|
|
51
55
|
setPhotographyGrayscale: (v: boolean | null) => void;
|
|
52
56
|
shareButtonOnPosts: boolean | null;
|
|
@@ -58,7 +62,7 @@ type Ctx = {
|
|
|
58
62
|
setSelectHandler: (fn: () => void) => void;
|
|
59
63
|
};
|
|
60
64
|
export declare const PreviewHeaderContext: import("react").Context<Ctx>;
|
|
61
|
-
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, }: {
|
|
65
|
+
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, }: {
|
|
62
66
|
children: ReactNode;
|
|
63
67
|
websiteName?: string | null;
|
|
64
68
|
templateChrome?: boolean;
|
|
@@ -99,6 +103,10 @@ export declare function PreviewHeaderProvider({ children, websiteName, templateC
|
|
|
99
103
|
onHeadingTypographyChange?: (v: ResolvedHeadingTypography) => void;
|
|
100
104
|
heroBackgroundFollowsWidth?: boolean | null;
|
|
101
105
|
onHeroBackgroundFollowsWidthChange?: (v: boolean | null) => void;
|
|
106
|
+
sectionBackgroundWidth?: "full" | "content" | null;
|
|
107
|
+
onSectionBackgroundWidthChange?: (v: "full" | "content" | null) => void;
|
|
108
|
+
sectionContentWidth?: "full" | "content" | null;
|
|
109
|
+
onSectionContentWidthChange?: (v: "full" | "content" | null) => void;
|
|
102
110
|
photographyGrayscale?: boolean | null;
|
|
103
111
|
onPhotographyGrayscaleChange?: (v: boolean | null) => void;
|
|
104
112
|
shareButtonOnPosts?: boolean | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"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};
|
|
@@ -1 +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:
|
|
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: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};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as l}from"react/jsx-runtime";import{
|
|
2
|
-
*Highlight line*`,body:"A sentence or two of supporting copy."};function y(e){if(e===!1)return b
|
|
1
|
+
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
|
|
2
|
+
*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};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Config } from "efficient-easel/blocks";
|
|
2
|
-
export default function PageRender({ config, data }: {
|
|
2
|
+
export default function PageRender({ config, data, metadata, }: {
|
|
3
3
|
config: Config;
|
|
4
4
|
data: unknown;
|
|
5
|
+
metadata?: Record<string, unknown>;
|
|
5
6
|
}): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"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};
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
import { type WidthMode } from "../../../../format/lib/content/section-width.js";
|
|
1
|
+
import { type SectionWidths, type WidthAnswer, type WidthMode } from "../../../../format/lib/content/section-width.js";
|
|
2
2
|
import type { BlockPass } from "../../../../format/lib/puck/passes/types.js";
|
|
3
|
+
export declare function drawsTwoWidthRows(key: string): boolean;
|
|
4
|
+
export declare const SITE_CONTENT_VAR = "--sf-sw-site";
|
|
5
|
+
export declare const SECTION_CONTENT_VAR = "--sf-sw-content";
|
|
6
|
+
export declare const SECTION_BACKGROUND_VAR = "--sf-bg-cap";
|
|
7
|
+
export declare const SECTION_CONTENT_CLASS = "contents [--sf-site-width:var(--sf-sw-content)] max-[800px]:[--sf-site-width:var(--sf-sw-site)]";
|
|
8
|
+
export declare function contentOverride(w: SectionWidths, background: WidthAnswer | null): string | null;
|
|
3
9
|
export declare const sectionWidth: BlockPass;
|
|
4
10
|
export declare function widthModeFields<T extends Record<string, unknown>>(fields: T, w: {
|
|
5
11
|
mode: WidthMode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "efficient-web-builder",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "30.0.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"author": "Efficient Pty Ltd",
|
|
@@ -43,17 +43,18 @@
|
|
|
43
43
|
"test:boundary": "node scripts/test-boundary.mjs",
|
|
44
44
|
"test:screen": "node scripts/test-screen-in-easel.mjs",
|
|
45
45
|
"test:own-ui": "efficient-shell-ui-check",
|
|
46
|
+
"test:media-hosts": "efficient-shell-media-host-check",
|
|
46
47
|
"build": "node scripts/build.mjs",
|
|
47
48
|
"verify:dist": "node scripts/verify-dist.mjs && node scripts/verify-published-entries.mjs",
|
|
48
|
-
"verify": "pnpm run typecheck && pnpm run test:boundary && pnpm run test:screen && pnpm run test:own-ui && pnpm run test:guards && pnpm run build && pnpm run verify:dist",
|
|
49
|
+
"verify": "pnpm run typecheck && pnpm run test:boundary && pnpm run test:screen && pnpm run test:own-ui && pnpm run test:media-hosts && pnpm run test:guards && pnpm run build && pnpm run verify:dist",
|
|
49
50
|
"test:guards": "tsc --noEmit -p scripts/tsconfig.json && node scripts/run-guards.mjs",
|
|
50
51
|
"words": "TSX_TSCONFIG_PATH=scripts/tsconfig.json tsx scripts/write-editor-words.ts",
|
|
51
52
|
"text-parts": "TSX_TSCONFIG_PATH=scripts/tsconfig.json tsx scripts/write-text-part-shapes.ts"
|
|
52
53
|
},
|
|
53
54
|
"peerDependencies": {
|
|
54
55
|
"@tabler/icons-react": "^3.46.0",
|
|
55
|
-
"efficient-easel": "^
|
|
56
|
-
"efficient-shell": "^8.
|
|
56
|
+
"efficient-easel": "^15.0.0",
|
|
57
|
+
"efficient-shell": "^8.10.1",
|
|
57
58
|
"isomorphic-dompurify": "^3.18.0",
|
|
58
59
|
"next": ">=16",
|
|
59
60
|
"react": ">=19",
|
|
@@ -72,8 +73,8 @@
|
|
|
72
73
|
"@types/node": "^20",
|
|
73
74
|
"@types/react": "^19",
|
|
74
75
|
"@types/react-dom": "^19",
|
|
75
|
-
"efficient-easel": "^
|
|
76
|
-
"efficient-shell": "^8.
|
|
76
|
+
"efficient-easel": "^15.0.0",
|
|
77
|
+
"efficient-shell": "^8.10.1",
|
|
77
78
|
"esbuild": "^0.28.0",
|
|
78
79
|
"happy-dom": "^20.14.5",
|
|
79
80
|
"isomorphic-dompurify": "^3.18.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"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};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export declare const SITE_WIDTH_LABEL = "Content width";
|
|
2
|
-
export declare const SITE_WIDTH_HINT = "The standard width every page on this site renders at.";
|
|
3
|
-
export default function SiteWidthField({ value, onChange, showHint, }: {
|
|
4
|
-
value: number | null;
|
|
5
|
-
onChange: (v: number | null) => void;
|
|
6
|
-
showHint?: boolean;
|
|
7
|
-
}): import("react").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"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};
|