efficient-web-builder 2.1.0 → 4.0.0

package/dist/components/WebsiteSettingsPanel.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as y,Fragment as w}from"react/jsx-runtime";import{useEasel as F}from"efficient-easel/easel";import{useEffect as L,useRef as N,useState as x}from"react";import k from"./ThemeField.js";import W from"./CornersField.js";import v from"./CardShadowField.js";import B from"./ShadowColourField.js";import O from"./BlockGapField.js";import A from"./HoverEffectField.js";import j from"./HeroImageField.js";import U from"./PhotographyField.js";import Y from"./SideSpaceField.js";import M from"./SiteWidthField.js";import X from"./TextStylesField.js";import{usePreviewHeader as f}from"./PreviewHeaderContext.js";import{SettingsTabs as $}from"efficient-easel/panel";import{ContrastIcon as q,NoteIcon as J,SettingsIcon as Z,TypeIcon as K}from"efficient-easel/icons";import{useThemeRowPersist as Q}from"../lib/theme-row-persist.js";import{themeSaveNotice as V}from"../lib/theme-save-message.js";import{NEUTRAL_SITE_NAME as D}from"../lib/content/site-name.js";import{normalizeFonts as ee}from"../lib/fonts.js";import{previewFrame as oe}from"../lib/puck/preview-dom.js";import{CORNER_STYLE_TO_PX as te,normalizeCornerRadius as ne,normalizeCornerStyle as re,normalizeShadowColor as se,headingTypographyToRow as ie,normalizeHeadingCompression as ae,normalizeHeadingTypography as ce,DEFAULT_SIZES as le}from"../lib/theme.js";const b="sf-site-styles-tabpanel",de=!1,pe="Show hints";function he({shown:e,onChange:o}){return n("div",{className:"sf-hints",children:y("button",{type:"button","aria-pressed":e,onClick:()=>o(!e),className:`sf-rung sf-hints-toggle${e?" is-active":""}`,children:[n(J,{size:13}),pe]})})}const lo="text",R=[{id:"basics",label:"Basics",icon:n(Z,{}),htmlId:"sf-site-styles-tab-basics",panelId:b},{id:"theme",label:"Theme",icon:n(q,{}),htmlId:"sf-site-styles-tab-theme",panelId:b},{id:"text",label:"Text",icon:n(K,{}),htmlId:"sf-site-styles-tab-text",panelId:b}];function ue({themeFromDocument:e,persist:o}){const{appState:s,dispatch:r}=F(u=>u),{theme:a,setTheme:t}=f(),c=s.data,h=c.root?.props??{},i=u=>{if(e){const g={...h,theme:u};r({type:"replaceRoot",root:{...c.root,props:g},recordHistory:!0})}else t(u);o({selected_preset:u.selected,theme_presets:u.themes})};return n(k,{value:e?h.theme:a,onChange:i})}function ge(e,o){const[s,r]=x(null),a=N(null),t=JSON.stringify(e),c=N(o);return c.current=o,L(()=>{if(a.current===null){a.current=t;return}if(a.current===t)return;a.current=t;const h=window.setTimeout(()=>r(c.current),700),i=window.setTimeout(()=>r(null),2200);return()=>{window.clearTimeout(h),window.clearTimeout(i)}},[t]),s}function fe({themeFromDocument:e,persist:o}){const{appState:s,dispatch:r}=F(d=>d),[a,t]=x(null),{fonts:c,setFonts:h,sizes:i,setSizes:u,headingCompression:g,setHeadingCompression:S,headingTypography:_,setHeadingTypography:l}=f(),T=s.data,m=T.root?.props??{},C=e?ee(m.fonts):c,E=e?le:i,z=e?ae(m.headingCompression):g,I=e?ce(m.headingTypography):_,H=d=>r({type:"replaceRoot",root:{...T.root,props:{...m,...d}},recordHistory:!0}),G=ge({curFonts:C,curCompression:z,curTypography:I},a);return n(X,{fonts:C,sizes:E,compression:z,headingTypography:I,openRole:a,onOpenRole:t,onFontChange:(d,P)=>{const p={...C,[d]:P};e?H({fonts:p}):h(p),o({heading_font:p.heading,body_font:p.body,accent_font:p.accent,label_font:p.label})},onSizeChange:e?void 0:(d,P)=>{const p={...E,[d]:P};u(p),o({heading_size_large_px:p.headingLarge,heading_size_medium_px:p.headingMedium,heading_size_small_px:p.headingSmall,accent_size_px:p.accent,body_size_px:p.body,label_size_px:p.label})},onCompressionChange:d=>{e?H({headingCompression:d}):S(d),o({heading_compression:d})},onHeadingTypographyChange:d=>{e?H({headingTypography:d}):l(d),o(ie(d))},livePx:Ce,savedRole:G})}const me={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 Ce(e){if(typeof document>"u")return null;const s=(oe()?.contentDocument??document).querySelector(me[e]);if(!s)return null;const r=parseFloat(getComputedStyle(s).fontSize);return Number.isFinite(r)?r:null}function ye({themeFromDocument:e,persist:o,showHint:s}){const{appState:r,dispatch:a}=F(l=>l),{cornerRadiusPx:t,setCornerRadiusPx:c}=f(),h=r.data,i=h.root?.props??{},u=i.cornerRadiusPx===void 0?te[re(i.cornerStyle)]:ne(i.cornerRadiusPx),g=e?u:t,S=l=>a({type:"replaceRoot",root:{...h.root,props:{...i,...l}},recordHistory:!0});return n(W,{value:g,onChange:l=>{e?S({cornerRadiusPx:l}):c(l),o({corner_radius_px:l})},showHint:s})}function Se(e){return{site_width:e}}function _e({persist:e,showHint:o}){const{siteWidth:s,setSiteWidth:r}=f();return n(M,{value:s,onChange:t=>{r(t),e(Se(t),t===null)},showHint:o})}function we(e){return{block_gap:e}}function Te(e){return{site_gutter:e}}function xe({persist:e,showHint:o}){const{siteGutter:s,setSiteGutter:r}=f();return n(Y,{value:s,onChange:t=>{r(t),e(Te(t),t===null)},showHint:o})}function be({persist:e,showHint:o}){const{blockGap:s,setBlockGap:r}=f();return n(O,{value:s,onChange:t=>{r(t),e(we(t),t===null)},showHint:o})}function Re({persist:e,showHint:o}){const{heroBackgroundFollowsWidth:s,setHeroBackgroundFollowsWidth:r}=f();return n(j,{value:s,onChange:t=>{r(t),e({hero_background_follows_width:t},!0)},showHint:o})}function He({persist:e,showHint:o=!0}){return y(w,{children:[n(_e,{persist:e,showHint:o}),n(xe,{persist:e,showHint:o}),n(be,{persist:e,showHint:o}),n(Re,{persist:e,showHint:o})]})}function Pe(e){return{card_shadow:e}}function Fe(e){return e===null?{shadow_color:null}:{shadow_color:se(e)}}function Ee(e){return{hover_effect:e}}function ze({persist:e,showHint:o=!0}){const{cardShadow:s,setCardShadow:r,shadowColor:a,setShadowColor:t,hoverEffect:c,setHoverEffect:h}=f();return y(w,{children:[n(v,{value:s,onChange:i=>{r(i),e(Pe(i),!0)},showHint:o}),n(B,{value:a,onChange:i=>{t(i),e(Fe(i),i===null)},showHint:o}),n(A,{value:c,onChange:i=>{h(i),e(Ee(i),!0)},showHint:o})]})}function Ie(e){return{photography_grayscale:e}}function Ne({persist:e,showHint:o}){const{photographyGrayscale:s,setPhotographyGrayscale:r}=f();return n(U,{value:s,onChange:t=>{r(t),e(Ie(t),!0)},showHint:o})}function Ge({persist:e,showHint:o=!0}){return n(w,{children:n(Ne,{persist:e,showHint:o})})}function Le(){const{websiteName:e}=f();return e?.trim()||D}function po(){const e=Le();return n("p",{className:"sf-panel-site",title:`${e} — renamed in the Console: Storefront ▸ Sites ▸ Settings.`,children:e})}function ke({themeFromDocument:e=!1,tokenRef:o,siteId:s,onNotify:r,tab:a,onTabChange:t}){const{persist:c}=Q({themeFromDocument:e,tokenRef:o,siteId:s,onResult:m=>{const C=V(m);C&&r?.(C.msg,C.tone)}}),[h,i]=x(R[0].id),u=a!==void 0,g=u?a:h,S=u?t??(()=>{}):i,_=R.find(m=>m.id===g)??R[0],[l,T]=x(de);return y(w,{children:[n($,{items:R,activeId:_.id,onSelect:S,ariaLabel:"Site styles"}),y("div",{id:b,role:"tabpanel","aria-labelledby":_.htmlId,children:[g==="basics"&&y(w,{children:[n(ye,{themeFromDocument:e,persist:c,showHint:l}),!e&&n(ze,{persist:c,showHint:l}),!e&&n(He,{persist:c,showHint:l}),!e&&n(Ge,{persist:c,showHint:l}),n(he,{shown:l,onChange:T})]}),g==="theme"&&n(ue,{themeFromDocument:e,persist:c}),g==="text"&&n(fe,{themeFromDocument:e,persist:c})]})]})}export{ze as CardLookFields,he as HintsToggle,He as PageGroupFields,Ge as PhotographyGroupFields,de as SHOW_HINTS_DEFAULT,R as SITE_STYLES_TABS,lo as SITE_STYLES_TEXT_TAB,b as TABPANEL_ID,po as WebsiteNameReadonly,we as blockGapPatch,Pe as cardShadowPatch,ke as default,Ee as hoverEffectPatch,Ie as photographyPatch,Fe as shadowColourPatch,Te as siteGutterPatch,Se as siteWidthPatch,Le as useWebsiteName};
+"use client";import{jsx as n,jsxs as y,Fragment as w}from"react/jsx-runtime";import{useEasel as P}from"efficient-easel/easel";import{useEffect as G,useRef as N,useState as x}from"react";import k from"./ThemeField.js";import B from"./CornersField.js";import W from"./CardShadowField.js";import v from"./ShadowColourField.js";import A from"./BlockGapField.js";import O from"./HoverEffectField.js";import j from"./HeroImageField.js";import Y from"./PhotographyField.js";import U from"./SideSpaceField.js";import X from"./SiteWidthField.js";import M from"./TextStylesField.js";import{usePreviewHeader as f}from"./PreviewHeaderContext.js";import{SettingsTabs as $}from"efficient-easel/panel";import{Tooltip as q,tabButtonId as J,tabPanelId as Z}from"efficient-shell/ui";import{ContrastIcon as K,NoteIcon as Q,SettingsIcon as V,TypeIcon as D}from"efficient-easel/icons";import{useThemeRowPersist as ee}from"../lib/theme-row-persist.js";import{themeSaveNotice as oe}from"../lib/theme-save-message.js";import{NEUTRAL_SITE_NAME as te}from"../lib/content/site-name.js";import{normalizeFonts as ne}from"../lib/fonts.js";import{previewFrame as re}from"../lib/puck/preview-dom.js";import{CORNER_STYLE_TO_PX as se,normalizeCornerRadius as ie,normalizeCornerStyle as ae,normalizeShadowColor as ce,headingTypographyToRow as le,normalizeHeadingCompression as de,normalizeHeadingTypography as pe,DEFAULT_SIZES as he}from"../lib/theme.js";const E="sf-site-styles",ue="sf-site-styles-tabpanel",ge=!1,fe="Show hints";function me({shown:e,onChange:o}){return n("div",{className:"sf-hints",children:y("button",{type:"button","aria-pressed":e,onClick:()=>o(!e),className:`sf-rung sf-hints-toggle${e?" is-active":""}`,children:[n(Q,{size:13}),fe]})})}const fo="text",b=[{id:"basics",label:"Basics",icon:n(V,{})},{id:"theme",label:"Theme",icon:n(K,{})},{id:"text",label:"Text",icon:n(D,{})}];function Se({themeFromDocument:e,persist:o}){const{appState:s,dispatch:r}=P(u=>u),{theme:a,setTheme:t}=f(),c=s.data,h=c.root?.props??{},i=u=>{if(e){const g={...h,theme:u};r({type:"replaceRoot",root:{...c.root,props:g},recordHistory:!0})}else t(u);o({selected_preset:u.selected,theme_presets:u.themes})};return n(k,{value:e?h.theme:a,onChange:i})}function Ce(e,o){const[s,r]=x(null),a=N(null),t=JSON.stringify(e),c=N(o);return c.current=o,G(()=>{if(a.current===null){a.current=t;return}if(a.current===t)return;a.current=t;const h=window.setTimeout(()=>r(c.current),700),i=window.setTimeout(()=>r(null),2200);return()=>{window.clearTimeout(h),window.clearTimeout(i)}},[t]),s}function ye({themeFromDocument:e,persist:o}){const{appState:s,dispatch:r}=P(d=>d),[a,t]=x(null),{fonts:c,setFonts:h,sizes:i,setSizes:u,headingCompression:g,setHeadingCompression:_,headingTypography:C,setHeadingTypography:l}=f(),T=s.data,m=T.root?.props??{},S=e?ne(m.fonts):c,F=e?he:i,z=e?de(m.headingCompression):g,I=e?pe(m.headingTypography):C,R=d=>r({type:"replaceRoot",root:{...T.root,props:{...m,...d}},recordHistory:!0}),L=Ce({curFonts:S,curCompression:z,curTypography:I},a);return n(M,{fonts:S,sizes:F,compression:z,headingTypography:I,openRole:a,onOpenRole:t,onFontChange:(d,H)=>{const p={...S,[d]:H};e?R({fonts:p}):h(p),o({heading_font:p.heading,body_font:p.body,accent_font:p.accent,label_font:p.label})},onSizeChange:e?void 0:(d,H)=>{const p={...F,[d]:H};u(p),o({heading_size_large_px:p.headingLarge,heading_size_medium_px:p.headingMedium,heading_size_small_px:p.headingSmall,accent_size_px:p.accent,body_size_px:p.body,label_size_px:p.label})},onCompressionChange:d=>{e?R({headingCompression:d}):_(d),o({heading_compression:d})},onHeadingTypographyChange:d=>{e?R({headingTypography:d}):l(d),o(le(d))},livePx:we,savedRole:L})}const _e={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 we(e){if(typeof document>"u")return null;const s=(re()?.contentDocument??document).querySelector(_e[e]);if(!s)return null;const r=parseFloat(getComputedStyle(s).fontSize);return Number.isFinite(r)?r:null}function Te({themeFromDocument:e,persist:o,showHint:s}){const{appState:r,dispatch:a}=P(l=>l),{cornerRadiusPx:t,setCornerRadiusPx:c}=f(),h=r.data,i=h.root?.props??{},u=i.cornerRadiusPx===void 0?se[ae(i.cornerStyle)]:ie(i.cornerRadiusPx),g=e?u:t,_=l=>a({type:"replaceRoot",root:{...h.root,props:{...i,...l}},recordHistory:!0});return n(B,{value:g,onChange:l=>{e?_({cornerRadiusPx:l}):c(l),o({corner_radius_px:l})},showHint:s})}function xe(e){return{site_width:e}}function be({persist:e,showHint:o}){const{siteWidth:s,setSiteWidth:r}=f();return n(X,{value:s,onChange:t=>{r(t),e(xe(t),t===null)},showHint:o})}function Re(e){return{block_gap:e}}function He(e){return{site_gutter:e}}function Pe({persist:e,showHint:o}){const{siteGutter:s,setSiteGutter:r}=f();return n(U,{value:s,onChange:t=>{r(t),e(He(t),t===null)},showHint:o})}function Ee({persist:e,showHint:o}){const{blockGap:s,setBlockGap:r}=f();return n(A,{value:s,onChange:t=>{r(t),e(Re(t),t===null)},showHint:o})}function Fe({persist:e,showHint:o}){const{heroBackgroundFollowsWidth:s,setHeroBackgroundFollowsWidth:r}=f();return n(j,{value:s,onChange:t=>{r(t),e({hero_background_follows_width:t},!0)},showHint:o})}function ze({persist:e,showHint:o=!0}){return y(w,{children:[n(be,{persist:e,showHint:o}),n(Pe,{persist:e,showHint:o}),n(Ee,{persist:e,showHint:o}),n(Fe,{persist:e,showHint:o})]})}function Ie(e){return{card_shadow:e}}function Ne(e){return e===null?{shadow_color:null}:{shadow_color:ce(e)}}function Le(e){return{hover_effect:e}}function Ge({persist:e,showHint:o=!0}){const{cardShadow:s,setCardShadow:r,shadowColor:a,setShadowColor:t,hoverEffect:c,setHoverEffect:h}=f();return y(w,{children:[n(W,{value:s,onChange:i=>{r(i),e(Ie(i),!0)},showHint:o}),n(v,{value:a,onChange:i=>{t(i),e(Ne(i),i===null)},showHint:o}),n(O,{value:c,onChange:i=>{h(i),e(Le(i),!0)},showHint:o})]})}function ke(e){return{photography_grayscale:e}}function Be({persist:e,showHint:o}){const{photographyGrayscale:s,setPhotographyGrayscale:r}=f();return n(Y,{value:s,onChange:t=>{r(t),e(ke(t),!0)},showHint:o})}function We({persist:e,showHint:o=!0}){return n(w,{children:n(Be,{persist:e,showHint:o})})}function ve(){const{websiteName:e}=f();return e?.trim()||te}function mo(){const e=ve();return n(q,{content:`${e} — renamed in the Console: Storefront ▸ Sites ▸ Settings.`,className:"sf-name-tip",children:n("span",{className:"sf-panel-site",children:e})})}function Ae({themeFromDocument:e=!1,tokenRef:o,siteId:s,onNotify:r,tab:a,onTabChange:t}){const{persist:c}=ee({themeFromDocument:e,tokenRef:o,siteId:s,onResult:m=>{const S=oe(m);S&&r?.(S.msg,S.tone)}}),[h,i]=x(b[0].id),u=a!==void 0,g=u?a:h,_=u?t??(()=>{}):i,C=b.find(m=>m.id===g)??b[0],[l,T]=x(ge);return y(w,{children:[n($,{items:b,activeId:C.id,onSelect:_,ariaLabel:"Site styles",idPrefix:E}),y("div",{id:Z(E,C.id),className:ue,role:"tabpanel","aria-labelledby":J(E,C.id),children:[g==="basics"&&y(w,{children:[n(Te,{themeFromDocument:e,persist:c,showHint:l}),!e&&n(Ge,{persist:c,showHint:l}),!e&&n(ze,{persist:c,showHint:l}),!e&&n(We,{persist:c,showHint:l}),n(me,{shown:l,onChange:T})]}),g==="theme"&&n(Se,{themeFromDocument:e,persist:c}),g==="text"&&n(ye,{themeFromDocument:e,persist:c})]})]})}export{Ge as CardLookFields,me as HintsToggle,ze as PageGroupFields,We as PhotographyGroupFields,ge as SHOW_HINTS_DEFAULT,E as SITE_STYLES_ID_PREFIX,b as SITE_STYLES_TABS,fo as SITE_STYLES_TEXT_TAB,ue as TABPANEL_CLASS,mo as WebsiteNameReadonly,Re as blockGapPatch,Ie as cardShadowPatch,Ae as default,Le as hoverEffectPatch,ke as photographyPatch,Ne as shadowColourPatch,He as siteGutterPatch,xe as siteWidthPatch,ve as useWebsiteName};