efficient-web-builder 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.8.1 — 2026-10-07
+
+- **The held hero frame stays on screen.** A hero slide with a video and no
+  poster holds on the video's first frame (0.8.0). That frame was a paused,
+  never-played `<video>`, and the browser does not always paint one: it could
+  go blank, for example after the editor window was resized, leaving the pale
+  surface under the slide's white words. The frame is now drawn once onto a
+  canvas, and the source video is dropped as soon as it is drawn.
+
+  A patch cut from 0.8.0 with this one fix (branch `release/web-builder-0.8.1`),
+  so it does not carry the changes that are still unreleased on `main`.
+
 ## 0.8.0 — 2026-10-06
 
 - **A hero slide with a video and no poster shows in the canvas.** A hero's

package/dist/chunks/{PreviewFooter-TTWVSN7F.js → PreviewFooter-SNJQZ6JZ.js}

@@ -1 +1 @@
-"use client";import{r as m}from"./chunk-2Z43RC3L.js";import{J as g}from"./chunk-XMRSKZIR.js";import"./chunk-5WIA75VU.js";import{_ as s,ef as a}from"./chunk-X2DL3VCU.js";import"./chunk-DN65SLZM.js";import{Ac as u,dd as d,id as f,ud as c}from"./chunk-764WH3TY.js";import"./chunk-4MT74TMP.js";import"./chunk-UBYBQ3KR.js";import"./chunk-Y6SLVHK3.js";import{Render as I}from"efficient-easel/render";import{jsx as p}from"react/jsx-runtime";function i({footerBlock:r,rootProps:e,headerSettings:o,siteName:t,legalName:l,foundedYear:n,socialLinks:h}){let v=a({root:{props:{...e??{},kind:s}},content:[r],zones:{}});return p(d.Provider,{value:{logoUrl:o?.logoUrl??null,logoReversed:o?.logoReversed??null,logoInkIsDark:o?.logoInkIsDark??null,siteName:t,legalName:l??null,foundedYear:n??null,socialLinks:h??f},children:p(I,{config:m,data:v})})}import{jsx as k}from"react/jsx-runtime";function P(){let{footerBlock:r,editFooter:e}=g(),{settings:o,websiteName:t}=c();if(!r)return null;let l=o?{logoUrl:o.logoUrl,logoReversed:o.logoReversed??null,logoInkIsDark:o.logoInkIsDark??null}:null;return k("div",{className:"sf-preview-footer-pick",onClick:e?n=>{n.stopPropagation(),e()}:void 0,style:e?{cursor:"pointer"}:void 0,title:e?"Edit the site footer \u2192":void 0,children:k(i,{footerBlock:r,headerSettings:l,siteName:t?.trim()||u})})}export{P as default};
+"use client";import{r as m}from"./chunk-RTCXXI5U.js";import{J as g}from"./chunk-XMRSKZIR.js";import"./chunk-6VNEBJKI.js";import{_ as s,ef as a}from"./chunk-WQ7W4AXL.js";import"./chunk-DN65SLZM.js";import{Ac as u,dd as d,id as f,ud as c}from"./chunk-764WH3TY.js";import"./chunk-4MT74TMP.js";import"./chunk-UBYBQ3KR.js";import"./chunk-Y6SLVHK3.js";import{Render as I}from"efficient-easel/render";import{jsx as p}from"react/jsx-runtime";function i({footerBlock:r,rootProps:e,headerSettings:o,siteName:t,legalName:l,foundedYear:n,socialLinks:h}){let v=a({root:{props:{...e??{},kind:s}},content:[r],zones:{}});return p(d.Provider,{value:{logoUrl:o?.logoUrl??null,logoReversed:o?.logoReversed??null,logoInkIsDark:o?.logoInkIsDark??null,siteName:t,legalName:l??null,foundedYear:n??null,socialLinks:h??f},children:p(I,{config:m,data:v})})}import{jsx as k}from"react/jsx-runtime";function P(){let{footerBlock:r,editFooter:e}=g(),{settings:o,websiteName:t}=c();if(!r)return null;let l=o?{logoUrl:o.logoUrl,logoReversed:o.logoReversed??null,logoInkIsDark:o.logoInkIsDark??null}:null;return k("div",{className:"sf-preview-footer-pick",onClick:e?n=>{n.stopPropagation(),e()}:void 0,style:e?{cursor:"pointer"}:void 0,title:e?"Edit the site footer \u2192":void 0,children:k(i,{footerBlock:r,headerSettings:l,siteName:t?.trim()||u})})}export{P as default};

package/dist/chunks/{SectionEditorShell-QHF74BM4.js → SectionEditorShell-U5FUJW2M.js}

@@ -1 +1 @@
-"use client";import{A as Ae,B as Re,D as Me,E as xe,e as v,f as _,n as Ee,p as Ce,t as he,v as f,w as E,x as Ie}from"./chunk-FEL3RPX5.js";import"./chunk-KZIT3J33.js";import{a as Te}from"./chunk-5WIA75VU.js";import{Ci as ve,Fj as w,Qa as fe,_e as ge,af as ye,bf as ke,ck as be,ek as Pe,gf as Se,j as ue,mk as we,yi as P}from"./chunk-X2DL3VCU.js";import{la as ae,pa as de,ra as pe,sa as me}from"./chunk-764WH3TY.js";import"./chunk-4MT74TMP.js";import"./chunk-UBYBQ3KR.js";import"./chunk-Y6SLVHK3.js";import{Fragment as Ne,useCallback as je,useEffect as x,useRef as Le,useState as Oe}from"react";import{SaveState as Ze}from"efficient-easel/chrome";import{parseZoneKey as N,zoneKey as et}from"efficient-easel/data";import{useTreeDrag as tt}from"efficient-easel/drag";import{TrashIcon as $e}from"efficient-easel/icons";import{LayersTree as ot,Subtree as Be,TreeRow as L,TreeRowAction as ze,TreeSeam as nt}from"efficient-easel/tree";import{saveIndicator as rt}from"efficient-easel/autosave";import{useEasel as st}from"efficient-easel/easel";import{Fragment as De,jsx as n,jsxs as k}from"react/jsx-runtime";var O=$=>C=>{C.target.closest(".es-tree-select, button")||$()};function it(){let{saveState:$,readOnly:C}=Se(),i=ue(),{appState:Fe,selectedItem:b,config:B}=st(e=>e),[T,c]=Oe(f),[K,W]=Oe(null),r=Fe.data.content?.[0]??null,g=r?.props.id??null,S=r?.type===pe,He=r?.type===me,U=Le(null),z=Le(null);Me(z);let Y=ge(),h=ke();x(()=>{let e=z.current;if(!h||!e)return;let t=o=>{o.key==="Escape"&&ye()};return e.addEventListener("keydown",t),()=>e.removeEventListener("keydown",t)},[h]),x(()=>{if(g&&U.current!==g){if(U.current=g,S){c(E);return}b||i.select({index:0})}},[g,b,i,S]);let{setSelectedHeroId:q,setSelectHandler:V}=Pe(),D=T.kind==="ticker"?T.heroId:null,I=je(e=>{e&&(c(t=>t.kind==="ticker"&&t.heroId===e?t:{kind:"ticker",heroId:e}),v(e))},[]);x(()=>{q(D)},[D,q]),x(()=>{V(I)},[V,I]);let{selectNode:_e}=Re({mode:T,setMode:c,onOpenPart:v}),F=e=>B.components[e]?.label??e,G=e=>fe(e,"section",F(e)),Ke=()=>{if(S){c(E);return}c(f),i.select({index:0})},J=!S&&T.kind==="puck"&&b?.props.id===g,a=r?w(r.type)?.spec??null:null,d=r&&a?`${r.props.id}:${a.slot}`:null,Q=r&&a&&Array.isArray(r.props[a.slot])?r.props[a.slot]:[],H=e=>we(e,F),X=(e,t)=>{!r||!a||!d||(c(f),a.slider?(_(String(r.props.id),e),i.select({index:e,zone:d}),v(String(r.props.id))):(i.select({index:e,zone:d}),v(t)))},j=()=>{if(!r||!a||!d)return;let e=Q.length;i.insertComponent(d,a.childType,e),c(f),a.slider?requestAnimationFrame(()=>{_(String(r.props.id),e),i.select({index:e,zone:d})}):i.select({index:e,zone:d})},We=e=>{d&&(i.removeComponent(d,e),c(f),i.select(null))},Z=e=>ae(B,e),ee=e=>{let{parentId:t,slot:o}=N(e),s=m=>{if(!m)return null;if(String(m.props.id)===t)return m;for(let p of Z(m.type)){let u=Array.isArray(m.props[p])?m.props[p]:[];for(let y of u){let M=s(y);if(M)return M}}return null},l=s(r)?.props[o];return Array.isArray(l)?l.length:0},te=(e,t,o)=>{let s=Math.min(Math.max(o,0),ee(e)),l=t<s?s-1:s;l!==t&&(i.reorderComponent(e,t,l),c(f),i.select({index:l,zone:e}))},A=tt({keyOf:e=>e.id,readOnly:!!C,canDrop:(e,t)=>et(t)===e.zone&&t.index>=0&&t.index<=ee(e.zone),onDrop:(e,t)=>te(e.zone,e.index,t.index),onStep:(e,t)=>te(e.zone,e.index,t<0?e.index-1:e.index+2)}),R=(e,t)=>n(nt,{...C?{}:A.seam({place:{...N(e),index:t}})},`seam:${e}:${t}`),Ue=e=>Z(e.type).flatMap(t=>(Array.isArray(e.props[t])?e.props[t]:[]).map((s,l)=>({child:s,zone:`${e.props.id}:${t}`,index:l}))),oe=e=>{let t=e.props;if(e.type==="FooterMenu"){let o=t.menu;return t.heading||o?.name||"Menu"}if(e.type==="FooterText"){let o=typeof t.text=="string"?t.text.trim():"";return o?o.length>28?`${o.slice(0,28)}\u2026`:o:"Text"}return e.type==="FooterEmailSignup"?t.heading||"Email signup":F(e.type)},ne=(e,t,o)=>{c(f),i.select({index:t,zone:e}),v(o)},re=(e,t,o)=>{i.insertComponent(e,t,o),c(f),i.select({index:o,zone:e}),W(null)},Ye=(e,t)=>{i.removeComponent(e,t),c(f),i.select(null)},qe=(e,t,o)=>n(Te,{choices:o,open:K===e,onToggle:()=>W(K===e?null:e),onPick:s=>re(e,s,t)}),se=(e,t)=>{let o=Ue(e),s=w(e.type),l=s?.choices??null,m=s?.source==="footer"?oe:H;return k(De,{children:[o.map(({child:p,zone:u,index:y})=>{let M=b?.props.id===p.props.id,Je=de(B,p.type,t),ie=m(p),le=String(p.props.id),ce=()=>ne(u,y,le),{rowProps:Qe,...Xe}=A.row({item:{id:le,zone:u,index:y},place:{...N(u),index:y}},{onClick:O(ce)});return k(Ne,{children:[y===0&&R(u,0),n(L,{icon:n(P,{type:p.type,size:13}),name:ie,selected:M,onSelect:ce,...Xe,actions:n(ze,{kind:"delete",label:`Delete ${ie}`,onClick:()=>Ye(u,y),children:n($e,{size:13})}),rowProps:Qe}),Je&&n(Be,{children:se(p,t+1)}),R(u,y+1)]},String(p.props.id??`${u}-${y}`))}),s&&l?qe(`${e.props.id}:${s.slot}`,o.length,l):null]})},Ve=r?.type==="HeroSingle",Ge=!!r&&(!!a||He||S||Ve);return k("div",{ref:z,className:"sf-editor es-editor",style:he(Ce),children:[n("div",{className:"sf-section-bar",children:n(Ze,{...rt($),role:"status"})}),k("div",{className:"sf-body",children:[h&&Y?n("aside",{className:"es-sidepanel es-sidepanel--left sf-panel sf-panel--left",children:n(Ee,{panel:Y,pick:h})}):Ge&&r&&k("aside",{className:"es-sidepanel es-sidepanel--left sf-panel sf-panel--left",children:[n("div",{className:"sf-panel-head",children:n("button",{type:"button",className:`sf-panel-title sf-panel-title--btn ${J?"is-selected":""}`,"aria-pressed":J,title:S?"Header settings":`${G(r.type)} settings`,onClick:Ke,children:G(r.type)})}),n(ot,{className:"sf-tree sf-scroll",rootProps:A.rootProps(),children:n(Be,{children:S?n(L,{icon:n(P,{type:"header",size:13}),name:"Header settings",selected:T.kind==="header",onSelect:()=>c(E),rowProps:{onClick:O(()=>c(E))}}):a?k(De,{children:[Q.map((e,t)=>{let o=b?.props.id===e.props.id,s=H(e),l=String(e.props.id),m=()=>X(t,l),{rowProps:p,...u}=A.row({item:{id:l,zone:d,index:t},place:{...N(d),index:t}},{onClick:O(m)});return k(Ne,{children:[t===0&&R(d,0),n(L,{icon:n(P,{type:e.type,size:13}),name:s,selected:o,onSelect:m,...u,actions:n(ze,{kind:"delete",label:`Delete ${s}`,onClick:()=>We(t),children:n($e,{size:13})}),rowProps:p}),R(d,t+1)]},String(e.props.id??t))}),k("button",{type:"button",className:"sf-add-card",onClick:j,children:[n("span",{className:"sf-plus sf-plus--sm",children:"+"}),a.addLabel]}),r.type==="Hero"&&g&&n(L,{icon:n(P,{type:"ticker",size:13}),name:be,selected:D===g,onSelect:()=>I(g),rowProps:{onClick:O(()=>I(g))}})]}):se(r,1)})})]}),n("div",{className:"sf-center",children:n("div",{className:"sf-preview-host",children:n(xe,{})})}),n(ve,{value:{selectChild:(e,t,o,s)=>w(s)?.source==="section"?X(t,o):ne(e,t,o),addChild:(e,t,o,s,l)=>w(l)?.source==="section"?j():re(`${e}:${t}`,o,s),childRowName:H,blockRowName:oe},children:n(Ae,{mode:T,onOpenWebsiteSettings:()=>c(Ie),onSelectNode:_e,hideNodeActions:!0})})]})]})}export{it as default};
+"use client";import{A as Ae,B as Re,D as Me,E as xe,e as v,f as _,n as Ee,p as Ce,t as he,v as f,w as E,x as Ie}from"./chunk-CZ46NWN5.js";import"./chunk-KZIT3J33.js";import{a as Te}from"./chunk-6VNEBJKI.js";import{Ci as ve,Fj as w,Qa as fe,_e as ge,af as ye,bf as ke,ck as be,ek as Pe,gf as Se,j as ue,mk as we,yi as P}from"./chunk-WQ7W4AXL.js";import{la as ae,pa as de,ra as pe,sa as me}from"./chunk-764WH3TY.js";import"./chunk-4MT74TMP.js";import"./chunk-UBYBQ3KR.js";import"./chunk-Y6SLVHK3.js";import{Fragment as Ne,useCallback as je,useEffect as x,useRef as Le,useState as Oe}from"react";import{SaveState as Ze}from"efficient-easel/chrome";import{parseZoneKey as N,zoneKey as et}from"efficient-easel/data";import{useTreeDrag as tt}from"efficient-easel/drag";import{TrashIcon as $e}from"efficient-easel/icons";import{LayersTree as ot,Subtree as Be,TreeRow as L,TreeRowAction as ze,TreeSeam as nt}from"efficient-easel/tree";import{saveIndicator as rt}from"efficient-easel/autosave";import{useEasel as st}from"efficient-easel/easel";import{Fragment as De,jsx as n,jsxs as k}from"react/jsx-runtime";var O=$=>C=>{C.target.closest(".es-tree-select, button")||$()};function it(){let{saveState:$,readOnly:C}=Se(),i=ue(),{appState:Fe,selectedItem:b,config:B}=st(e=>e),[T,c]=Oe(f),[K,W]=Oe(null),r=Fe.data.content?.[0]??null,g=r?.props.id??null,S=r?.type===pe,He=r?.type===me,U=Le(null),z=Le(null);Me(z);let Y=ge(),h=ke();x(()=>{let e=z.current;if(!h||!e)return;let t=o=>{o.key==="Escape"&&ye()};return e.addEventListener("keydown",t),()=>e.removeEventListener("keydown",t)},[h]),x(()=>{if(g&&U.current!==g){if(U.current=g,S){c(E);return}b||i.select({index:0})}},[g,b,i,S]);let{setSelectedHeroId:q,setSelectHandler:V}=Pe(),D=T.kind==="ticker"?T.heroId:null,I=je(e=>{e&&(c(t=>t.kind==="ticker"&&t.heroId===e?t:{kind:"ticker",heroId:e}),v(e))},[]);x(()=>{q(D)},[D,q]),x(()=>{V(I)},[V,I]);let{selectNode:_e}=Re({mode:T,setMode:c,onOpenPart:v}),F=e=>B.components[e]?.label??e,G=e=>fe(e,"section",F(e)),Ke=()=>{if(S){c(E);return}c(f),i.select({index:0})},J=!S&&T.kind==="puck"&&b?.props.id===g,a=r?w(r.type)?.spec??null:null,d=r&&a?`${r.props.id}:${a.slot}`:null,Q=r&&a&&Array.isArray(r.props[a.slot])?r.props[a.slot]:[],H=e=>we(e,F),X=(e,t)=>{!r||!a||!d||(c(f),a.slider?(_(String(r.props.id),e),i.select({index:e,zone:d}),v(String(r.props.id))):(i.select({index:e,zone:d}),v(t)))},j=()=>{if(!r||!a||!d)return;let e=Q.length;i.insertComponent(d,a.childType,e),c(f),a.slider?requestAnimationFrame(()=>{_(String(r.props.id),e),i.select({index:e,zone:d})}):i.select({index:e,zone:d})},We=e=>{d&&(i.removeComponent(d,e),c(f),i.select(null))},Z=e=>ae(B,e),ee=e=>{let{parentId:t,slot:o}=N(e),s=m=>{if(!m)return null;if(String(m.props.id)===t)return m;for(let p of Z(m.type)){let u=Array.isArray(m.props[p])?m.props[p]:[];for(let y of u){let M=s(y);if(M)return M}}return null},l=s(r)?.props[o];return Array.isArray(l)?l.length:0},te=(e,t,o)=>{let s=Math.min(Math.max(o,0),ee(e)),l=t<s?s-1:s;l!==t&&(i.reorderComponent(e,t,l),c(f),i.select({index:l,zone:e}))},A=tt({keyOf:e=>e.id,readOnly:!!C,canDrop:(e,t)=>et(t)===e.zone&&t.index>=0&&t.index<=ee(e.zone),onDrop:(e,t)=>te(e.zone,e.index,t.index),onStep:(e,t)=>te(e.zone,e.index,t<0?e.index-1:e.index+2)}),R=(e,t)=>n(nt,{...C?{}:A.seam({place:{...N(e),index:t}})},`seam:${e}:${t}`),Ue=e=>Z(e.type).flatMap(t=>(Array.isArray(e.props[t])?e.props[t]:[]).map((s,l)=>({child:s,zone:`${e.props.id}:${t}`,index:l}))),oe=e=>{let t=e.props;if(e.type==="FooterMenu"){let o=t.menu;return t.heading||o?.name||"Menu"}if(e.type==="FooterText"){let o=typeof t.text=="string"?t.text.trim():"";return o?o.length>28?`${o.slice(0,28)}\u2026`:o:"Text"}return e.type==="FooterEmailSignup"?t.heading||"Email signup":F(e.type)},ne=(e,t,o)=>{c(f),i.select({index:t,zone:e}),v(o)},re=(e,t,o)=>{i.insertComponent(e,t,o),c(f),i.select({index:o,zone:e}),W(null)},Ye=(e,t)=>{i.removeComponent(e,t),c(f),i.select(null)},qe=(e,t,o)=>n(Te,{choices:o,open:K===e,onToggle:()=>W(K===e?null:e),onPick:s=>re(e,s,t)}),se=(e,t)=>{let o=Ue(e),s=w(e.type),l=s?.choices??null,m=s?.source==="footer"?oe:H;return k(De,{children:[o.map(({child:p,zone:u,index:y})=>{let M=b?.props.id===p.props.id,Je=de(B,p.type,t),ie=m(p),le=String(p.props.id),ce=()=>ne(u,y,le),{rowProps:Qe,...Xe}=A.row({item:{id:le,zone:u,index:y},place:{...N(u),index:y}},{onClick:O(ce)});return k(Ne,{children:[y===0&&R(u,0),n(L,{icon:n(P,{type:p.type,size:13}),name:ie,selected:M,onSelect:ce,...Xe,actions:n(ze,{kind:"delete",label:`Delete ${ie}`,onClick:()=>Ye(u,y),children:n($e,{size:13})}),rowProps:Qe}),Je&&n(Be,{children:se(p,t+1)}),R(u,y+1)]},String(p.props.id??`${u}-${y}`))}),s&&l?qe(`${e.props.id}:${s.slot}`,o.length,l):null]})},Ve=r?.type==="HeroSingle",Ge=!!r&&(!!a||He||S||Ve);return k("div",{ref:z,className:"sf-editor es-editor",style:he(Ce),children:[n("div",{className:"sf-section-bar",children:n(Ze,{...rt($),role:"status"})}),k("div",{className:"sf-body",children:[h&&Y?n("aside",{className:"es-sidepanel es-sidepanel--left sf-panel sf-panel--left",children:n(Ee,{panel:Y,pick:h})}):Ge&&r&&k("aside",{className:"es-sidepanel es-sidepanel--left sf-panel sf-panel--left",children:[n("div",{className:"sf-panel-head",children:n("button",{type:"button",className:`sf-panel-title sf-panel-title--btn ${J?"is-selected":""}`,"aria-pressed":J,title:S?"Header settings":`${G(r.type)} settings`,onClick:Ke,children:G(r.type)})}),n(ot,{className:"sf-tree sf-scroll",rootProps:A.rootProps(),children:n(Be,{children:S?n(L,{icon:n(P,{type:"header",size:13}),name:"Header settings",selected:T.kind==="header",onSelect:()=>c(E),rowProps:{onClick:O(()=>c(E))}}):a?k(De,{children:[Q.map((e,t)=>{let o=b?.props.id===e.props.id,s=H(e),l=String(e.props.id),m=()=>X(t,l),{rowProps:p,...u}=A.row({item:{id:l,zone:d,index:t},place:{...N(d),index:t}},{onClick:O(m)});return k(Ne,{children:[t===0&&R(d,0),n(L,{icon:n(P,{type:e.type,size:13}),name:s,selected:o,onSelect:m,...u,actions:n(ze,{kind:"delete",label:`Delete ${s}`,onClick:()=>We(t),children:n($e,{size:13})}),rowProps:p}),R(d,t+1)]},String(e.props.id??t))}),k("button",{type:"button",className:"sf-add-card",onClick:j,children:[n("span",{className:"sf-plus sf-plus--sm",children:"+"}),a.addLabel]}),r.type==="Hero"&&g&&n(L,{icon:n(P,{type:"ticker",size:13}),name:be,selected:D===g,onSelect:()=>I(g),rowProps:{onClick:O(()=>I(g))}})]}):se(r,1)})})]}),n("div",{className:"sf-center",children:n("div",{className:"sf-preview-host",children:n(xe,{})})}),n(ve,{value:{selectChild:(e,t,o,s)=>w(s)?.source==="section"?X(t,o):ne(e,t,o),addChild:(e,t,o,s,l)=>w(l)?.source==="section"?j():re(`${e}:${t}`,o,s),childRowName:H,blockRowName:oe},children:n(Ae,{mode:T,onOpenWebsiteSettings:()=>c(Ie),onSelectNode:_e,hideNodeActions:!0})})]})]})}export{it as default};