efficient-web-builder 41.1.0 → 43.0.0

package/dist/editor/components/WebsiteSettingsPanel.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as _,Fragment as w}from"react/jsx-runtime";import{useEasel as N}from"efficient-easel/easel";import{useState as R}from"react";import W from"./ThemeField.js";import O from"./CornersField.js";import L from"./CardShadowField.js";import z from"./ShadowColourField.js";import v from"./BlockGapField.js";import G from"./HoverEffectField.js";import Y from"./PhotographyField.js";import j from"./ShareButtonField.js";import X from"./SideSpaceField.js";import{BackgroundWidthRow as U,ContentWidthRow as $,SITE_BACKGROUND_HINT as K,SITE_CONTENT_HINT as M}from"./SectionWidthRows.js";import q from"./SiteAccentField.js";import J from"./SiteTextStylesField.js";import{usePreviewHeader as m}from"../../render/components/PreviewHeaderContext.js";import{Tabs as Q,Tooltip as V,tabButtonId as Z,tabPanelId as D}from"efficient-shell/ui";import{ContrastIcon as ee,NoteIcon as te,SettingsIcon as ne,TypeIcon as oe}from"efficient-easel/icons";import{useThemeRowPersist as ie}from"../lib/theme-row-persist.js";import{themeSaveNotice as re}from"../../format/lib/theme-save-message.js";import{say as S}from"../../format/lib/editor-words.js";import{NEUTRAL_SITE_NAME as se}from"../../format/lib/content/site-name.js";import{PAGE_WIDTH as b}from"../../format/lib/content/page-width.js";import{previewFrame as ae}from"efficient-easel/screen/lib/document/preview-dom";import{useSiteTextStylesWriter as ce}from"../lib/site-text-styles-writer.js";import{CORNER_STYLE_TO_PX as le,normalizeCornerRadius as de,normalizeCornerStyle as he,normalizeShadowColor as ue,selectedThemeColors as pe}from"../../format/lib/theme.js";const E="sf-site-styles",fe="sf-site-styles-tabpanel",ge=!1,me="Show hints";function Se({shown:e,onChange:t}){return n("div",{className:"sf-hints",children:_("button",{type:"button","aria-pressed":e,onClick:()=>t(!e),className:`sf-rung sf-hints-toggle${e?" is-active":""}`,children:[n(te,{size:13}),S(me)]})})}const St="text",P=[{id:"basics",label:"Basics",icon:n(ne,{})},{id:"theme",label:"Theme",icon:n(ee,{})},{id:"text",label:"Text",icon:n(oe,{})}];function Ce({themeFromDocument:e,persist:t}){const{appState:o,dispatch:s}=N(u=>u),{theme:d,setTheme:a}=m(),c=o.data,p=c.root?.props??{},r=u=>{if(e){const f={...p,theme:u};s({type:"replaceRoot",root:{...c.root,props:f},recordHistory:!0})}else a(u);t({selected_preset:u.selected,theme_presets:u.themes})};return n(W,{value:e?p.theme:d,onChange:r})}function _e({themeFromDocument:e,persist:t}){const[o,s]=R(null),{theme:d,setFonts:a,setSizes:c,setHeadingTypography:p}=m(),r=ce({themeFromDocument:e,persist:t}),{old:u,saved:f,writeRoot:g}=r,l=r.fonts,h=r.sizes,x=r.typography,y=i=>i.values.size??be(we[i.id]??"body")??ye[i.kind],T=i=>r.write(i),F=xe(d),I=i=>{const C={...l,accent:i};e?g({fonts:C}):a(C),t({accent_font:i})},B=i=>{c({...h,accent:i}),t({accent_size_px:i})},k=i=>{const C={...x,weightStrong:i};e?g({headingTypography:C}):p(C),t({heading_weight_strong:i})},A=i=>{const C={...x,italicStrong:i};e?g({headingTypography:C}):p(C),t({accent_italic:i})};return _(w,{children:[n(J,{saved:f,old:u,colours:F,sizeOf:y,onChange:T,openId:o===H?null:o,onOpenChange:s,withoutSize:e}),n(q,{font:l.accent,size:h.accent,weight:x.weightStrong,italic:x.italicStrong,headingWeight:x.weight,open:o===H,onOpenChange:i=>s(i?H:null),onChange:i=>{i.key==="font"?I(i.value):i.key==="size"?B(i.value):i.key==="weight"?k(i.value):A(i.value)},withoutSize:e})]})}const H="accent";function xe(e){const t=pe(e);return[{key:"accent",name:S("Accent"),value:t.accent},{key:"text",name:S("Text"),value:t.text},{key:"labels",name:S("Labels"),value:t.muted??t.text}]}const we={"heading-1":"heading","heading-2":"heading2","heading-3":"heading3","body-1":"body","body-5":"label"},ye={heading:32,body:14},Te={heading:"main h1, main h2",heading2:"main h1, main h2",heading3:"main h1, main h2",accent:"main h1 em, main h2 em",body:"main p",label:"main .mono-eyebrow"};function be(e){if(typeof document>"u")return null;const o=(ae()?.contentDocument??document).querySelector(Te[e]);if(!o)return null;const s=parseFloat(getComputedStyle(o).fontSize);return Number.isFinite(s)?s:null}function Pe({themeFromDocument:e,persist:t,showHint:o}){const{appState:s,dispatch:d}=N(h=>h),{cornerRadiusPx:a,setCornerRadiusPx:c}=m(),p=s.data,r=p.root?.props??{},u=r.cornerRadiusPx===void 0?le[he(r.cornerStyle)]:de(r.cornerRadiusPx),f=e?u:a,g=h=>d({type:"replaceRoot",root:{...p.root,props:{...r,...h}},recordHistory:!0});return n(O,{value:f,onChange:h=>{e?g({cornerRadiusPx:h}):c(h),t({corner_radius_px:h})},showHint:o})}function Re(e){return{site_width:e}}function Ee({persist:e,showHint:t}){const{siteWidth:o,setSiteWidth:s,sectionBackgroundWidth:d,setSectionBackgroundWidth:a,sectionContentWidth:c,setSectionContentWidth:p}=m(),r=typeof o=="number"?o:b.default,u=l=>{s(l),e(Re(l),l===null)},f=l=>{a(l),e({section_background_width:l},!0)},g=l=>{p(l),e({section_content_width:l},!0)};return _(w,{children:[n(U,{value:d??"full",changed:d!==null,detail:S("Full width"),onChange:f,onReset:()=>f(null),hint:t?K:void 0}),n($,{mode:c??"content",px:r,min:b.min,max:b.max,changed:typeof o=="number"||c!==null,detail:`${S("Content width")} ${b.default}px`,onMode:g,onPx:l=>u(l),onReset:()=>{g(null),u(null)},hint:t?M:void 0})]})}function He(e){return{block_gap:e}}function Ne(e){return{site_gutter:e}}function Fe({persist:e,showHint:t}){const{siteGutter:o,setSiteGutter:s}=m();return n(X,{value:o,onChange:a=>{s(a),e(Ne(a),a===null)},showHint:t})}function Ie({persist:e,showHint:t}){const{blockGap:o,setBlockGap:s}=m();return n(v,{value:o,onChange:a=>{s(a),e(He(a),a===null)},showHint:t})}function Be({persist:e,showHint:t=!0}){return _(w,{children:[n(Ee,{persist:e,showHint:t}),n(Fe,{persist:e,showHint:t}),n(Ie,{persist:e,showHint:t})]})}function ke(e){return{card_shadow:e}}function Ae(e){return e===null?{shadow_color:null}:{shadow_color:ue(e)}}function We(e){return{hover_effect:e}}function Oe({persist:e,showHint:t=!0}){const{cardShadow:o,setCardShadow:s,shadowColor:d,setShadowColor:a,hoverEffect:c,setHoverEffect:p}=m();return _(w,{children:[n(L,{value:o,onChange:r=>{s(r),e(ke(r),!0)},showHint:t}),n(z,{value:d,onChange:r=>{a(r),e(Ae(r),r===null)},showHint:t}),n(G,{value:c,onChange:r=>{p(r),e(We(r),!0)},showHint:t})]})}function Le(e){return{photography_grayscale:e}}function ze({persist:e,showHint:t}){const{photographyGrayscale:o,setPhotographyGrayscale:s}=m();return n(Y,{value:o,onChange:a=>{s(a),e(Le(a),!0)},showHint:t})}function ve({persist:e,showHint:t=!0}){return n(w,{children:n(ze,{persist:e,showHint:t})})}function Ge(e){return{share_button_on_posts:e}}function Ye({persist:e,showHint:t=!0}){const{shareButtonOnPosts:o,setShareButtonOnPosts:s}=m();return n(j,{value:o,onChange:a=>{s(a),e(Ge(a),!0)},showHint:t})}function je(){const{websiteName:e}=m();return e?.trim()||se}function Ct(){const e=je();return n(V,{content:S("{name} — renamed in the Console: {place}.",{name:e,place:S("Storefront ▸ Sites ▸ Settings")}),className:"sf-name-tip",children:n("span",{className:"sf-panel-site",children:e})})}function Xe({themeFromDocument:e=!1,tokenRef:t,siteId:o,onNotify:s,tab:d,onTabChange:a}){const{persist:c}=ie({themeFromDocument:e,tokenRef:t,siteId:o,onResult:y=>{const T=re(y);T&&s?.(T.msg,T.tone)}}),[p,r]=R(P[0].id),u=d!==void 0,f=u?d:p,g=u?a??(()=>{}):r,l=P.find(y=>y.id===f)??P[0],[h,x]=R(ge);return _(w,{children:[n(Ue,{activeId:l.id,onSelect:g}),_("div",{id:D(E,l.id),className:fe,role:"tabpanel","aria-labelledby":Z(E,l.id),children:[f==="basics"&&_(w,{children:[n(Pe,{themeFromDocument:e,persist:c,showHint:h}),!e&&n(Oe,{persist:c,showHint:h}),!e&&n(Be,{persist:c,showHint:h}),!e&&n(ve,{persist:c,showHint:h}),!e&&n(Ye,{persist:c,showHint:h}),n(Se,{shown:h,onChange:x})]}),f==="theme"&&n(Ce,{themeFromDocument:e,persist:c}),f==="text"&&n(_e,{themeFromDocument:e,persist:c})]})]})}function Ue({activeId:e,onSelect:t}){return n("div",{className:"es-insp-tabs",children:n(Q,{variant:"underline",block:!0,labelsFit:!0,"aria-label":S("Styles"),idPrefix:E,value:e,onChange:t,items:P.map(o=>{const s=S(o.label);return{id:o.id,icon:o.icon,label:s}})})})}export{Oe as CardLookFields,Se as HintsToggle,Be as PageGroupFields,ve as PhotographyGroupFields,ge as SHOW_HINTS_DEFAULT,E as SITE_STYLES_ID_PREFIX,P as SITE_STYLES_TABS,St as SITE_STYLES_TEXT_TAB,Ye as ShareButtonRootField,Ue as SiteStylesTabStrip,fe as TABPANEL_CLASS,Ct as WebsiteNameReadonly,He as blockGapPatch,ke as cardShadowPatch,Xe as default,We as hoverEffectPatch,Le as photographyPatch,Ae as shadowColourPatch,Ge as shareButtonPatch,Ne as siteGutterPatch,Re as siteWidthPatch,je as useWebsiteName};
+"use client";import{jsx as n,jsxs as T,Fragment as y}from"react/jsx-runtime";import{useEasel as O,useRootFields as G}from"efficient-easel/easel";import{Inspector as W}from"efficient-easel/fields";import{SettingsGroup as v}from"efficient-easel/panel";import{useEffect as z,useRef as Y,useState as E}from"react";import j from"./ThemeField.js";import U from"./CornersField.js";import X from"./CardShadowField.js";import $ from"./ShadowColourField.js";import q from"./BlockGapField.js";import K from"./HoverEffectField.js";import M from"./PhotographyField.js";import V from"./ShareButtonField.js";import J from"./SideSpaceField.js";import{BackgroundWidthRow as Q,ContentWidthRow as Z,SITE_BACKGROUND_HINT as D,SITE_CONTENT_HINT as ee}from"./SectionWidthRows.js";import te from"./SiteAccentField.js";import ne from"./SiteTextStylesField.js";import{usePreviewHeader as S}from"../../render/components/PreviewHeaderContext.js";import{EmptyState as oe,Tabs as re,Tooltip as ie,tabButtonId as se,tabPanelId as ae}from"efficient-shell/ui";import{ContrastIcon as ce,NoteIcon as le,SettingsIcon as ue,TypeIcon as de}from"efficient-easel/icons";import{useThemeRowPersist as he}from"../lib/theme-row-persist.js";import{themeSaveNotice as pe}from"../../format/lib/theme-save-message.js";import{say as f}from"../../format/lib/editor-words.js";import{NEUTRAL_SITE_NAME as fe}from"../../format/lib/content/site-name.js";import{PAGE_WIDTH as R}from"../../format/lib/content/page-width.js";import{PAGE_STYLE_FIELDS as ge}from"../lib/document/page-root-fields.js";import{previewFrame as me}from"efficient-easel/screen/lib/document/preview-dom";import{useSiteTextStylesWriter as Se}from"../lib/site-text-styles-writer.js";import{CORNER_STYLE_TO_PX as Ce,normalizeCornerRadius as _e,normalizeCornerStyle as Te,normalizeShadowColor as xe,selectedThemeColors as ye}from"../../format/lib/theme.js";const H="sf-site-styles",we="sf-site-styles-tabpanel",be=!1,Pe="Show hints";function Ee({shown:e,onChange:t}){return n("div",{className:"sf-hints",children:T("button",{type:"button","aria-pressed":e,onClick:()=>t(!e),className:`sf-rung sf-hints-toggle${e?" is-active":""}`,children:[n(le,{size:13}),f(Pe)]})})}const At="text",B="basics",N="this-page-group",I=[{id:B,label:"Basics",icon:n(ue,{})},{id:"theme",label:"Theme",icon:n(ce,{})},{id:"text",label:"Text",icon:n(de,{})}];function Re({themeFromDocument:e,persist:t}){const{appState:o,dispatch:i}=O(l=>l),{theme:c,setTheme:r}=S(),p=o.data,h=p.root?.props??{},a=l=>{if(e){const g={...h,theme:l};i({type:"replaceRoot",root:{...p.root,props:g},recordHistory:!0})}else r(l);t({selected_preset:l.selected,theme_presets:l.themes})};return n(j,{value:e?h.theme:c,onChange:a})}function Ie({themeFromDocument:e,persist:t}){const[o,i]=E(null),{theme:c,setFonts:r,setSizes:p,setHeadingTypography:h}=S(),a=Se({themeFromDocument:e,persist:t}),{old:l,saved:g,writeRoot:m}=a,u=a.fonts,d=a.sizes,x=a.typography,w=s=>s.values.size??Be(He[s.id]??"body")??Ae[s.kind],C=s=>a.write(s),F=Fe(c),b=s=>{const _={...u,accent:s};e?m({fonts:_}):r(_),t({accent_font:s})},P=s=>{p({...d,accent:s}),t({accent_size_px:s})},k=s=>{const _={...x,weightStrong:s};e?m({headingTypography:_}):h(_),t({heading_weight_strong:s})},L=s=>{const _={...x,italicStrong:s};e?m({headingTypography:_}):h(_),t({accent_italic:s})};return T(y,{children:[n(ne,{saved:g,old:l,colours:F,sizeOf:w,onChange:C,openId:o===A?null:o,onOpenChange:i,withoutSize:e}),n(te,{font:u.accent,size:d.accent,weight:x.weightStrong,italic:x.italicStrong,headingWeight:x.weight,open:o===A,onOpenChange:s=>i(s?A:null),onChange:s=>{s.key==="font"?b(s.value):s.key==="size"?P(s.value):s.key==="weight"?k(s.value):L(s.value)},withoutSize:e})]})}const A="accent";function Fe(e){const t=ye(e);return[{key:"accent",name:f("Accent"),value:t.accent},{key:"text",name:f("Text"),value:t.text},{key:"labels",name:f("Labels"),value:t.muted??t.text}]}const He={"heading-1":"heading","heading-2":"heading2","heading-3":"heading3","body-1":"body","body-5":"label"},Ae={heading:32,body:14},Oe={heading:"main h1, main h2",heading2:"main h1, main h2",heading3:"main h1, main h2",accent:"main h1 em, main h2 em",body:"main p",label:"main .mono-eyebrow"};function Be(e){if(typeof document>"u")return null;const o=(me()?.contentDocument??document).querySelector(Oe[e]);if(!o)return null;const i=parseFloat(getComputedStyle(o).fontSize);return Number.isFinite(i)?i:null}function Ne({themeFromDocument:e,persist:t,showHint:o}){const{appState:i,dispatch:c}=O(d=>d),{cornerRadiusPx:r,setCornerRadiusPx:p}=S(),h=i.data,a=h.root?.props??{},l=a.cornerRadiusPx===void 0?Ce[Te(a.cornerStyle)]:_e(a.cornerRadiusPx),g=e?l:r,m=d=>c({type:"replaceRoot",root:{...h.root,props:{...a,...d}},recordHistory:!0});return n(U,{value:g,onChange:d=>{e?m({cornerRadiusPx:d}):p(d),t({corner_radius_px:d})},showHint:o})}function ke(e){return{site_width:e}}function Le({persist:e,showHint:t}){const{siteWidth:o,setSiteWidth:i,sectionBackgroundWidth:c,setSectionBackgroundWidth:r,sectionContentWidth:p,setSectionContentWidth:h}=S(),a=typeof o=="number"?o:R.default,l=u=>{i(u),e(ke(u),u===null)},g=u=>{r(u),e({section_background_width:u},!0)},m=u=>{h(u),e({section_content_width:u},!0)};return T(y,{children:[n(Q,{value:c??"full",changed:c!==null,detail:f("Full width"),onChange:g,onReset:()=>g(null),hint:t?D:void 0}),n(Z,{mode:p??"content",px:a,min:R.min,max:R.max,changed:typeof o=="number"||p!==null,detail:`${f("Content width")} ${R.default}px`,onMode:m,onPx:u=>l(u),onReset:()=>{m(null),l(null)},hint:t?ee:void 0})]})}function Ge(e){return{block_gap:e}}function We(e){return{site_gutter:e}}function ve({persist:e,showHint:t}){const{siteGutter:o,setSiteGutter:i}=S();return n(J,{value:o,onChange:r=>{i(r),e(We(r),r===null)},showHint:t})}function ze({persist:e,showHint:t}){const{blockGap:o,setBlockGap:i}=S();return n(q,{value:o,onChange:r=>{i(r),e(Ge(r),r===null)},showHint:t})}function Ye({persist:e,showHint:t=!0}){return T(y,{children:[n(Le,{persist:e,showHint:t}),n(ve,{persist:e,showHint:t}),n(ze,{persist:e,showHint:t})]})}function je(e){return{card_shadow:e}}function Ue(e){return e===null?{shadow_color:null}:{shadow_color:xe(e)}}function Xe(e){return{hover_effect:e}}function $e({persist:e,showHint:t=!0}){const{cardShadow:o,setCardShadow:i,shadowColor:c,setShadowColor:r,hoverEffect:p,setHoverEffect:h}=S();return T(y,{children:[n(X,{value:o,onChange:a=>{i(a),e(je(a),!0)},showHint:t}),n($,{value:c,onChange:a=>{r(a),e(Ue(a),a===null)},showHint:t}),n(K,{value:p,onChange:a=>{h(a),e(Xe(a),!0)},showHint:t})]})}function qe(e){return{photography_grayscale:e}}function Ke({persist:e,showHint:t}){const{photographyGrayscale:o,setPhotographyGrayscale:i}=S();return n(M,{value:o,onChange:r=>{i(r),e(qe(r),!0)},showHint:t})}function Me({persist:e,showHint:t=!0}){return n(y,{children:n(Ke,{persist:e,showHint:t})})}function Ve(e){return{share_button_on_posts:e}}function Je({persist:e,showHint:t=!0}){const{shareButtonOnPosts:o,setShareButtonOnPosts:i}=S();return n(V,{value:o,onChange:r=>{i(r),e(Ve(r),!0)},showHint:t})}function Qe(){const{websiteName:e}=S();return e?.trim()||fe}function Ot(){const e=Qe();return n(ie,{content:f("{name} — renamed in the Console: {place}.",{name:e,place:f("Storefront ▸ Sites ▸ Settings")}),className:"sf-name-tip",children:n("span",{className:"sf-panel-site",children:e})})}function Ze({themeFromDocument:e=!1,tokenRef:t,siteId:o,onNotify:i,tab:c,onTabChange:r,initialTab:p,revealPageGroup:h=!1,onPageGroupRevealed:a}){const{persist:l}=he({themeFromDocument:e,tokenRef:t,siteId:o,onResult:b=>{const P=pe(b);P&&i?.(P.msg,P.tone)}}),[g,m]=E(p??I[0].id),u=c!==void 0,d=u?c:g,x=u?r??(()=>{}):m,w=I.find(b=>b.id===d)??I[0],[C,F]=E(be);return T(y,{children:[n(tt,{activeId:w.id,onSelect:x}),T("div",{id:ae(H,w.id),className:we,role:"tabpanel","aria-labelledby":se(H,w.id),children:[d===B&&T(y,{children:[n(Ne,{themeFromDocument:e,persist:l,showHint:C}),!e&&n($e,{persist:l,showHint:C}),!e&&n(Ye,{persist:l,showHint:C}),!e&&n(Me,{persist:l,showHint:C}),!e&&n(Je,{persist:l,showHint:C}),n(De,{reveal:h,onRevealed:a}),n(Ee,{shown:C,onChange:F})]}),d==="theme"&&n(Re,{themeFromDocument:e,persist:l}),d==="text"&&n(Ie,{themeFromDocument:e,persist:l})]})]})}function De({reveal:e,onRevealed:t}){const[o,i]=E(!0),c=Y(t);return c.current=t,z(()=>{if(!e)return;i(!0);const r=requestAnimationFrame(()=>{document.getElementById(N)?.scrollIntoView({block:"start"}),c.current?.()});return()=>cancelAnimationFrame(r)},[e]),n(v,{title:f("This page"),open:o,onToggle:i,id:N,children:n(et,{})})}function et(){const{fields:e,values:t,readOnly:o,onChange:i}=G(),c=Object.fromEntries(ge.filter(r=>r in e).map(r=>[r,e[r]]));return Object.keys(c).length===0?n(oe,{variant:"none",icon:!1,message:f("This page has no look of its own to set.")}):n(W,{fields:c,values:t,onChange:i,readOnly:o,tabs:!1,idPrefix:"this-page",ariaLabel:f("This page")})}function tt({activeId:e,onSelect:t}){return n("div",{className:"es-insp-tabs",children:n(re,{variant:"underline",block:!0,labelsFit:!0,"aria-label":f("Styles"),idPrefix:H,value:e,onChange:t,items:I.map(o=>{const i=f(o.label);return{id:o.id,icon:o.icon,label:i}})})})}export{$e as CardLookFields,Ee as HintsToggle,Ye as PageGroupFields,Me as PhotographyGroupFields,be as SHOW_HINTS_DEFAULT,B as SITE_STYLES_BASICS_TAB,H as SITE_STYLES_ID_PREFIX,I as SITE_STYLES_TABS,At as SITE_STYLES_TEXT_TAB,Je as ShareButtonRootField,tt as SiteStylesTabStrip,we as TABPANEL_CLASS,N as THIS_PAGE_GROUP_ID,Ot as WebsiteNameReadonly,Ge as blockGapPatch,je as cardShadowPatch,Ze as default,Xe as hoverEffectPatch,qe as photographyPatch,Ue as shadowColourPatch,Ve as shareButtonPatch,We as siteGutterPatch,ke as siteWidthPatch,Qe as useWebsiteName};