efficient-web-builder 5.0.2 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 5.1.0 - 2026-10-12
+
+- **The site's text styles reach the page.** The editor canvas reads the
+  theme's saved `text_styles` (Heading 1-7, Body 1-7) and paints each value a
+  merchant set on that style's face class (`textStylesCss`); hosts get
+  `themeWithTextStyles` and `storedTextStyles` to do the same on the live
+  page. A site that has not saved the list renders exactly as before: the old
+  six font roles are read into Heading 1-3, Body 1 and Body 5 (Labels), and
+  nothing is written.
+- **`eyebrowStyleId`** is the one place that picks the style an eyebrow
+  follows: Body 7 when the site has it, otherwise its smallest Body.
+
 ## 5.0.2 - 2026-10-12
 
 - **The copy box bar no longer offers the three word styles.** Highlight,

package/dist/components/PreviewHeaderContext.d.ts

@@ -35,6 +35,8 @@ type Ctx = {
     setHeadingCompression: (v: HeadingCompression) => void;
     headingTypography: ResolvedHeadingTypography;
     setHeadingTypography: (v: ResolvedHeadingTypography) => void;
+    textStyles: unknown;
+    setTextStyles: (v: unknown) => void;
     siteWidth: number | null;
     setSiteWidth: (v: number | null) => void;
     siteGutter: number | null;
@@ -52,7 +54,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, heroBackgroundFollowsWidth, onHeroBackgroundFollowsWidthChange, photographyGrayscale, onPhotographyGrayscaleChange, 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, heroBackgroundFollowsWidth, onHeroBackgroundFollowsWidthChange, photographyGrayscale, onPhotographyGrayscaleChange, themeFromDocument, }: {
     children: ReactNode;
     websiteName?: string | null;
     templateChrome?: boolean;
@@ -86,6 +88,8 @@ export declare function PreviewHeaderProvider({ children, websiteName, templateC
     onSiteGutterChange?: (v: number | null) => void;
     onBlockGapChange?: (v: number | null) => void;
     onSiteWidthChange?: (v: number | null) => void;
+    textStyles?: unknown;
+    onTextStylesChange?: (v: unknown) => void;
     headingTypography?: ResolvedHeadingTypography;
     onHeadingTypographyChange?: (v: ResolvedHeadingTypography) => void;
     heroBackgroundFollowsWidth?: boolean | null;

package/dist/components/PreviewHeaderContext.js

@@ -1 +1 @@
-"use client";import{jsx as I}from"react/jsx-runtime";import{createContext as Ie,useCallback as t,useContext as ke,useMemo as Le,useState as k}from"react";import{EditorSiteLogoContext as Ue}from"./SiteLogoContext.js";import{useSelectHandler as ge}from"../lib/puck/preview-selection-context.js";import{IDENTITY_CARD_GAP as L,DEFAULT_HEADING_COMPRESSION as U,DEFAULT_HEADING_TYPOGRAPHY as g,DEFAULT_SIZES as y,DEFAULT_SWITCH_SHOWN as M,DEFAULT_THEME_MODE as R,DEFAULT_THEME_VALUE as O}from"../lib/theme.js";import{DEFAULT_FONTS as W}from"../lib/fonts.js";const N=Ie({settings:null,setSettings:()=>{},primeSettings:()=>{},websiteName:null,templateChrome:!1,templateName:null,chromePlaceholder:!1,themeMode:R,setThemeMode:()=>{},themeSwitchShown:M,setThemeSwitchShown:()=>{},theme:O,setTheme:()=>{},fonts:W,setFonts:()=>{},sizes:y,setSizes:()=>{},cornerRadiusPx:null,setCornerRadiusPx:()=>{},cardShadow:null,setCardShadow:()=>{},shadowColor:null,setShadowColor:()=>{},cardGap:L,setCardGap:()=>{},hoverEffect:null,setHoverEffect:()=>{},headingCompression:U,setHeadingCompression:()=>{},siteWidth:null,setSiteWidth:()=>{},siteGutter:null,blockGap:null,setSiteGutter:()=>{},setBlockGap:()=>{},headingTypography:g,setHeadingTypography:()=>{},heroBackgroundFollowsWidth:null,setHeroBackgroundFollowsWidth:()=>{},photographyGrayscale:null,setPhotographyGrayscale:()=>{},themeFromDocument:!1,selected:!1,setSelected:()=>{},select:()=>{},setSelectHandler:()=>{}});function Be({children:B,websiteName:o=null,templateChrome:l=!1,templateName:r=null,chromePlaceholder:n=!1,themeMode:Y=R,onThemeModeChange:c,themeSwitchShown:j=M,onThemeSwitchShownChange:i,theme:z=O,onThemeChange:u,fonts:b=W,onFontsChange:d,sizes:V=y,onSizesChange:a,cornerRadiusPx:Z=null,onCornerRadiusPxChange:S,cardShadow:q=null,onCardShadowChange:p,shadowColor:J=null,onShadowColorChange:E,cardGap:K=L,onCardGapChange:f,hoverEffect:Q=null,onHoverEffectChange:m,headingCompression:X=U,onHeadingCompressionChange:T,siteWidth:$=null,onSiteWidthChange:H,siteGutter:C=null,blockGap:ee=null,onSiteGutterChange:D,onBlockGapChange:_,headingTypography:te=g,onHeadingTypographyChange:w,heroBackgroundFollowsWidth:se=null,onHeroBackgroundFollowsWidthChange:A,photographyGrayscale:le=null,onPhotographyGrayscaleChange:h,themeFromDocument:oe=!1}){const[s,v]=k(null),re=t(e=>v(xe=>xe??e),[]),[ne,ce]=k(!1),ie=t(e=>c?.(e),[c]),ue=t(e=>i?.(e),[i]),de=t(e=>u?.(e),[u]),ae=t(e=>d?.(e),[d]),Se=t(e=>a?.(e),[a]),pe=t(e=>H?.(e),[H]),Ee=t(e=>D?.(e),[D]),fe=t(e=>_?.(e),[_]),me=t(e=>A?.(e),[A]),Te=t(e=>h?.(e),[h]),He=t(e=>S?.(e),[S]),De=t(e=>p?.(e),[p]),_e=t(e=>E?.(e),[E]),we=t(e=>f?.(e),[f]),Ae=t(e=>m?.(e),[m]),he=t(e=>T?.(e),[T]),ve=t(e=>w?.(e),[w]),{select:Fe,setSelectHandler:Ge}=ge(),F=s?.logoUrl,G=s?.logoReversed,P=s?.logoInkIsDark,x=s!==null,Pe=Le(()=>({logo:x?{logoUrl:F,logoReversed:G,logoInkIsDark:P}:null,placeholder:l||n,wordmark:l?r:o}),[x,F,G,P,l,n,r,o]);return I(Ue.Provider,{value:Pe,children:I(N.Provider,{value:{settings:s,setSettings:v,primeSettings:re,websiteName:o,templateChrome:l,templateName:r,chromePlaceholder:n,themeMode:Y,setThemeMode:ie,themeSwitchShown:j,setThemeSwitchShown:ue,theme:z,setTheme:de,fonts:b,setFonts:ae,sizes:V,setSizes:Se,cornerRadiusPx:Z,setCornerRadiusPx:He,cardShadow:q,setCardShadow:De,shadowColor:J,setShadowColor:_e,cardGap:K,setCardGap:we,hoverEffect:Q,setHoverEffect:Ae,headingCompression:X,setHeadingCompression:he,siteWidth:$,setSiteWidth:pe,siteGutter:C,blockGap:ee,setSiteGutter:Ee,setBlockGap:fe,headingTypography:te,setHeadingTypography:ve,heroBackgroundFollowsWidth:se,setHeroBackgroundFollowsWidth:me,photographyGrayscale:le,setPhotographyGrayscale:Te,themeFromDocument:oe,selected:ne,setSelected:ce,select:Fe,setSelectHandler:Ge},children:B})})}const Ye=()=>ke(N);export{N as PreviewHeaderContext,Be as PreviewHeaderProvider,Ye as usePreviewHeader};
+"use client";import{jsx as k}from"react/jsx-runtime";import{createContext as Le,useCallback as t,useContext as Ue,useMemo as ge,useState as y}from"react";import{EditorSiteLogoContext as Me}from"./SiteLogoContext.js";import{useSelectHandler as Re}from"../lib/puck/preview-selection-context.js";import{IDENTITY_CARD_GAP as L,DEFAULT_HEADING_COMPRESSION as U,DEFAULT_HEADING_TYPOGRAPHY as g,DEFAULT_SIZES as M,DEFAULT_SWITCH_SHOWN as R,DEFAULT_THEME_MODE as O,DEFAULT_THEME_VALUE as W}from"../lib/theme.js";import{DEFAULT_FONTS as N}from"../lib/fonts.js";const B=Le({settings:null,setSettings:()=>{},primeSettings:()=>{},websiteName:null,templateChrome:!1,templateName:null,chromePlaceholder:!1,themeMode:O,setThemeMode:()=>{},themeSwitchShown:R,setThemeSwitchShown:()=>{},theme:W,setTheme:()=>{},fonts:N,setFonts:()=>{},sizes:M,setSizes:()=>{},cornerRadiusPx:null,setCornerRadiusPx:()=>{},cardShadow:null,setCardShadow:()=>{},shadowColor:null,setShadowColor:()=>{},cardGap:L,setCardGap:()=>{},hoverEffect:null,setHoverEffect:()=>{},headingCompression:U,setHeadingCompression:()=>{},siteWidth:null,setSiteWidth:()=>{},siteGutter:null,blockGap:null,setSiteGutter:()=>{},setBlockGap:()=>{},headingTypography:g,setHeadingTypography:()=>{},textStyles:null,setTextStyles:()=>{},heroBackgroundFollowsWidth:null,setHeroBackgroundFollowsWidth:()=>{},photographyGrayscale:null,setPhotographyGrayscale:()=>{},themeFromDocument:!1,selected:!1,setSelected:()=>{},select:()=>{},setSelectHandler:()=>{}});function ze({children:Y,websiteName:o=null,templateChrome:l=!1,templateName:r=null,chromePlaceholder:n=!1,themeMode:j=O,onThemeModeChange:c,themeSwitchShown:z=R,onThemeSwitchShownChange:i,theme:b=W,onThemeChange:u,fonts:V=N,onFontsChange:d,sizes:Z=M,onSizesChange:S,cornerRadiusPx:q=null,onCornerRadiusPxChange:a,cardShadow:J=null,onCardShadowChange:p,shadowColor:K=null,onShadowColorChange:E,cardGap:Q=L,onCardGapChange:f,hoverEffect:X=null,onHoverEffectChange:T,headingCompression:$=U,onHeadingCompressionChange:m,siteWidth:C=null,onSiteWidthChange:H,siteGutter:ee=null,blockGap:te=null,onSiteGutterChange:D,onBlockGapChange:_,headingTypography:se=g,onHeadingTypographyChange:w,textStyles:le=null,onTextStylesChange:x,heroBackgroundFollowsWidth:oe=null,onHeroBackgroundFollowsWidthChange:A,photographyGrayscale:re=null,onPhotographyGrayscaleChange:v,themeFromDocument:ne=!1}){const[s,F]=y(null),ce=t(e=>F(ye=>ye??e),[]),[ie,ue]=y(!1),de=t(e=>c?.(e),[c]),Se=t(e=>i?.(e),[i]),ae=t(e=>u?.(e),[u]),pe=t(e=>d?.(e),[d]),Ee=t(e=>S?.(e),[S]),fe=t(e=>H?.(e),[H]),Te=t(e=>D?.(e),[D]),me=t(e=>_?.(e),[_]),He=t(e=>A?.(e),[A]),De=t(e=>v?.(e),[v]),_e=t(e=>a?.(e),[a]),we=t(e=>p?.(e),[p]),xe=t(e=>E?.(e),[E]),Ae=t(e=>f?.(e),[f]),ve=t(e=>T?.(e),[T]),Fe=t(e=>m?.(e),[m]),Ge=t(e=>w?.(e),[w]),Pe=t(e=>x?.(e),[x]),{select:he,setSelectHandler:Ie}=Re(),G=s?.logoUrl,P=s?.logoReversed,h=s?.logoInkIsDark,I=s!==null,ke=ge(()=>({logo:I?{logoUrl:G,logoReversed:P,logoInkIsDark:h}:null,placeholder:l||n,wordmark:l?r:o}),[I,G,P,h,l,n,r,o]);return k(Me.Provider,{value:ke,children:k(B.Provider,{value:{settings:s,setSettings:F,primeSettings:ce,websiteName:o,templateChrome:l,templateName:r,chromePlaceholder:n,themeMode:j,setThemeMode:de,themeSwitchShown:z,setThemeSwitchShown:Se,theme:b,setTheme:ae,fonts:V,setFonts:pe,sizes:Z,setSizes:Ee,cornerRadiusPx:q,setCornerRadiusPx:_e,cardShadow:J,setCardShadow:we,shadowColor:K,setShadowColor:xe,cardGap:Q,setCardGap:Ae,hoverEffect:X,setHoverEffect:ve,headingCompression:$,setHeadingCompression:Fe,siteWidth:C,setSiteWidth:fe,siteGutter:ee,blockGap:te,setSiteGutter:Te,setBlockGap:me,headingTypography:se,setHeadingTypography:Ge,textStyles:le,setTextStyles:Pe,heroBackgroundFollowsWidth:oe,setHeroBackgroundFollowsWidth:He,photographyGrayscale:re,setPhotographyGrayscale:De,themeFromDocument:ne,selected:ie,setSelected:ue,select:he,setSelectHandler:Ie},children:Y})})}const be=()=>Ue(B);export{B as PreviewHeaderContext,ze as PreviewHeaderProvider,be as usePreviewHeader};

package/dist/components/StorefrontEditor.js

@@ -1 +1 @@
-"use client";import{jsx as d,jsxs as ct}from"react/jsx-runtime";import{useCallback as n,useEffect as p,useMemo as F,useRef as m,useState as o}from"react";import"efficient-easel/easel.css";import"efficient-easel/shell.css";import"efficient-easel/rail.css";import"efficient-easel/panel.css";import"efficient-easel/fields.css";import"efficient-easel/pick.css";import"efficient-easel/copy.css";import"efficient-easel/gold.css";import"efficient-easel/text-styles.css";import"efficient-easel/menu.css";import"efficient-easel/chrome.css";import"efficient-easel/tree.css";import"efficient-easel/drag.css";import"efficient-easel/screen.css";import"./storefront-editor.css";import{buildConfig as dt}from"../lib/puck/build-config.js";import{ChromeWrap as st}from"../lib/editor-chrome.js";import{sessionRegistry as ut}from"../lib/editor-session.js";import{backendOf as G,blocksOf as lt}from"../lib/website-session.js";import{useEditorSession as ht}from"../lib/editor-session-context.js";import{withSiteBlockGapFields as mt}from"../lib/puck/site-gap-fields.js";import{withTemplateMediaPlaceholders as pt}from"../lib/puck/templateFields.js";import{setEditorPage as he}from"../lib/puck/editor-page-context.js";import{resolveSiteName as ft}from"../lib/content/site-name.js";import{normalizeSiteGutter as St,normalizeSiteWidth as gt}from"../lib/content/page-width.js";import{normalizeSiteBlockGap as wt}from"../lib/content/container-gap.js";import _t,{DocumentScreen as Ct}from"./EditorScreenMount.js";import{useStorefrontDocument as Et}from"./StorefrontDocumentContext.js";import{PreviewHeaderProvider as Tt}from"./PreviewHeaderContext.js";import{PreviewFooterProvider as yt}from"./PreviewFooterContext.js";import{PreviewChatProvider as Pt,DEFAULT_CHAT_PREVIEW as vt}from"./PreviewChatContext.js";import{PreviewSocialProvider as It}from"./PreviewSocialContext.js";import{useSocialSettings as Ht}from"./useSocialSettings.js";import{PreviewSurfaceProvider as Rt}from"./PreviewSurfaceContext.js";import{PreviewFocusProvider as Mt}from"./PreviewFocusContext.js";import{SITE_FOOTER_SLUG as Ft}from"../lib/content/footer.js";import{markFooterReturn as Gt}from"../lib/puck/footer-return.js";import{WEBSITE_ADDRESSING as bt}from"../lib/website-document-addressing.js";import{PreviewTickerProvider as kt}from"./PreviewTickerContext.js";import{PreviewPartsProvider as Dt}from"./PreviewPartsContext.js";import{PreviewLocationPartProvider as zt}from"./PreviewLocationPartContext.js";import{PreviewPartStyleProvider as At}from"./PreviewPartStyleContext.js";import{SiteMapsProvider as Wt,readSiteMapsKey as xt,writeSiteMapsKey as me,readSiteMapId as Nt,writeSiteMapId as Ot}from"../lib/maps-config.js";import{CORNER_STYLE_TO_PX as Bt,DEFAULT_HEADING_COMPRESSION as Kt,DEFAULT_HEADING_TYPOGRAPHY as Lt,DEFAULT_SWITCH_SHOWN as b,DEFAULT_SIZES as Yt,DEFAULT_THEME_MODE as E,normalizeCornerRadius as Ut,normalizeCornerStyle as jt,normalizeCardShadow as Vt,normalizeCardGap as Xt,normalizeHoverEffect as Zt,normalizeShadowColor as qt,IDENTITY_CARD_GAP as pe,IDENTITY_CARD_SHADOW as Jt,IDENTITY_HOVER_EFFECT as Qt,headingTypographyFromRow as $t,normalizeHeadingCompression as er,normalizeSizes as tr,THEME_MODE_KEY as fe,THEME_STORAGE_KEY as rr,THEME_SWITCH_HIDE as Se,THEME_SWITCH_KEY as k}from"../lib/theme.js";import{DEFAULT_FONTS as or,normalizeFonts as nr}from"../lib/fonts.js";import{WEBSITE_SCREEN as ar}from"./WebsiteScreenParts.js";import{routeWebsiteHostMessage as ir}from"../lib/website-host-inbound.js";const cr=()=>{if(typeof window>"u")return E;try{const c=window.localStorage.getItem(fe);return c==="light"||c==="dark"||c==="auto"?c:E}catch{return E}},ge=c=>{if(!(typeof window>"u"))try{window.localStorage.setItem(fe,c)}catch{}},dr=()=>{if(typeof window>"u")return b;try{return window.localStorage.getItem(k)!==Se}catch{return b}},sr=()=>{if(!(typeof window>"u"))try{window.localStorage.removeItem(rr)}catch{}},we=c=>{if(!(typeof window>"u"))try{c?window.localStorage.removeItem(k):window.localStorage.setItem(k,Se)}catch{}};function ur(){const{adapter:c,capabilities:s,templateId:D,ready:f,token:h,siteId:i,currentSlug:S,currentKind:z,data:A,getLiveData:W,footerOriginSlug:g,navigate:w}=Et();p(()=>(he(S,z),()=>he(null,null)),[S,z]);const T=s.placeholderFrames,[_e,x]=o(null),[Ce,N]=o("");p(()=>{const e=c.templateName;if(!f||!D||!e){N("");return}let r=!1;return e().then(u=>!r&&N(u??"")).catch(()=>{}),()=>{r=!0}},[f,h,D,c]);const[Ee,y]=o(E),[Te,P]=o(b),[ye,O]=o({selected:0,themes:[]}),[Pe,B]=o(or),[ve,K]=o(Yt),[Ie,L]=o(null),[He,Y]=o(Kt),[Re,U]=o(null),[Me,j]=o(null),[Fe,V]=o(pe),[Ge,X]=o(null),[be,Z]=o(null),[ke,q]=o(null),[v,J]=o(null),l=ht(),Q=F(()=>dt(ut(l),lt(l)),[l]),De=F(()=>mt(pt(Q,T),v),[Q,T,v]),[ze,$]=o(Lt),[Ae,ee]=o(null),[We,te]=o(null),re=m(null),a=m(!1);p(()=>{y(cr()),P(dr())},[]);const xe=n(e=>{a.current=!0,sr(),ge(e),y(e)},[]),Ne=n(e=>{a.current=!0,we(e),P(e)},[]),Oe=n(e=>{a.current=!0,O(e)},[]),Be=n(e=>{a.current=!0,B(e)},[]),Ke=n(e=>{a.current=!0,K(e)},[]),Le=n(e=>{a.current=!0,L(e)},[]),Ye=n(e=>{a.current=!0,Y(e)},[]),Ue=n(e=>{a.current=!0,U(e)},[]),je=n(e=>{a.current=!0,j(e)},[]),Ve=n(e=>{a.current=!0,V(e)},[]),Xe=n(e=>{a.current=!0,X(e)},[]),Ze=n(e=>{a.current=!0,$(e)},[]),qe=n(e=>{a.current=!0,Z(e)},[]),Je=n(e=>{a.current=!0,q(e)},[]),Qe=n(e=>{a.current=!0,J(e)},[]),$e=n(e=>{a.current=!0,ee(e)},[]),et=n(e=>{a.current=!0,te(e)},[]);p(()=>{const e=G(l).theme;if(!h||!s.hasSiteTheme||!e)return;const r=i??"";re.current!==r&&(re.current=r,a.current=!1);let u=!1;return e.get(i?{siteId:i}:void 0).then(t=>{u||a.current||(ge(t.default_mode),we(t.show_theme_switch),y(t.default_mode),P(t.show_theme_switch),O({selected:t.selected_preset,themes:t.theme_presets}),B(nr({heading:t.heading_font,body:t.body_font,accent:t.accent_font,label:t.label_font})),K(tr({headingLarge:t.heading_size_large_px,headingMedium:t.heading_size_medium_px,headingSmall:t.heading_size_small_px,body:t.body_size_px,label:t.label_size_px})),L(t.corner_radius_px===void 0?Bt[jt(t.corner_style)]:Ut(t.corner_radius_px)),Y(er(t.heading_compression)),U(t.card_shadow==null?Jt:Vt(t.card_shadow)),V(t.card_gap==null?pe:Xt(t.card_gap)),X(t.hover_effect==null?Qt:Zt(t.hover_effect)),j(qt(t.shadow_color)),Z(gt(t.site_width)),q(St(t.site_gutter)),J(wt(t.block_gap)),$($t(t)),ee(t.hero_background_follows_width===!0),te(t.photography_grayscale===!0))}).catch(()=>{}),()=>{u=!0}},[h,i,s.hasSiteTheme,l]);const tt=Ht({token:h,siteId:i,enabled:s.hasSiteSettings}),[rt,oe]=o(vt),ne=m(null),I=m(!1),H=m(null),_=m({}),ot=n(e=>{I.current=!0,oe(r=>({...r,...e})),!(!s.hasSiteSettings||!h)&&(_.current={..._.current,...e},H.current&&clearTimeout(H.current),H.current=setTimeout(()=>{const r=_.current;_.current={},G(l).chat?.update(r,i?{siteId:i}:void 0).catch(()=>{})},500))},[s.hasSiteSettings,h,i,l]);p(()=>{if(!h||!s.hasSiteSettings)return;const e=i??"";ne.current!==e&&(ne.current=e,I.current=!1);let r=!1;const u=G(l).chat;if(u)return u.get(i?{siteId:i}:void 0).then(t=>{r||I.current||oe({enabled:t.enabled,title:t.title,subtitle:t.subtitle,greeting:t.greeting})}).catch(()=>{}),()=>{r=!0}},[h,i,s.hasSiteSettings,l]);const[C,R]=o(""),ae=m(null),M=m(!1);p(()=>R(xt()),[]);const ie=n(e=>{const r=e.trim();if(r===C)return;M.current=!0,me(r),R(r);const u=c.updateSite;!s.canEditSiteRecord||!f||!u||u({mapsApiKey:r}).catch(()=>{})},[C,s.canEditSiteRecord,f,c]),[ce,de]=o("");p(()=>de(Nt()),[]),p(()=>{const e=c.site;if(!f||!s.hasSiteRecord||!e){x(null);return}const r=i??"";ae.current!==r&&(ae.current=r,M.current=!1);let u=!1;return e().then(t=>{if(u||(x(ft(t.name)),M.current))return;const ue=t.mapsApiKey??"";me(ue),R(ue);const le=t.mapsMapId??"";Ot(le),de(le)}).catch(()=>{}),()=>{u=!0}},[f,h,s.hasSiteRecord,i,c]);const nt=F(()=>({apiKey:C,setApiKey:ie,mapId:ce}),[C,ie,ce]),se=m(null),at=n(()=>{se.current=W()??A??null,Gt(S),w({kind:"page",slug:Ft,siteId:i??void 0,originSlug:S})},[W,A,S,w,i]),it=n(()=>{g&&w({kind:"page",slug:g,siteId:i??void 0})},[g,w,i]);return d(Ct,{config:De,parts:ar,wrap:(e,r)=>d(Tt,{websiteName:_e,templateChrome:T,templateName:Ce||null,themeMode:Ee,onThemeModeChange:xe,themeSwitchShown:Te,onThemeSwitchShownChange:Ne,theme:ye,onThemeChange:Oe,fonts:Pe,onFontsChange:Be,cornerRadiusPx:Ie,onCornerRadiusPxChange:Le,cardShadow:Re,onCardShadowChange:Ue,shadowColor:Me,onShadowColorChange:je,cardGap:Fe,onCardGapChange:Ve,hoverEffect:Ge,onHoverEffectChange:Xe,headingCompression:He,onHeadingCompressionChange:Ye,headingTypography:ze,onHeadingTypographyChange:Ze,sizes:ve,onSizesChange:Ke,siteWidth:be,onSiteWidthChange:qe,siteGutter:ke,onSiteGutterChange:Je,blockGap:v,onBlockGapChange:Qe,heroBackgroundFollowsWidth:Ae,onHeroBackgroundFollowsWidthChange:$e,photographyGrayscale:We,onPhotographyGrayscaleChange:et,themeFromDocument:!s.hasSiteTheme,children:d(Mt,{originData:g?se.current:null,originSlug:g,exitFocus:it,children:d(yt,{editFooter:at,children:d(st,{wrap:l.chrome?.wrap,surface:"page",children:d(kt,{children:d(Dt,{children:d(zt,{children:d(At,{children:ct(Wt,{value:nt,children:[d(Pt,{chat:rt,onChatChange:ot,children:d(It,{value:tt,children:d(Rt,{children:e})})}),r]})})})})})})})})})})}function lr({target:c}){return d(_t,{target:c,addressing:bt,onHostMessage:ir,children:d(ur,{})})}export{lr as default};
+"use client";import{jsx as s,jsxs as pt}from"react/jsx-runtime";import{useCallback as n,useEffect as p,useMemo as D,useRef as m,useState as r}from"react";import"efficient-easel/easel.css";import"efficient-easel/shell.css";import"efficient-easel/rail.css";import"efficient-easel/panel.css";import"efficient-easel/fields.css";import"efficient-easel/pick.css";import"efficient-easel/copy.css";import"efficient-easel/gold.css";import"efficient-easel/text-styles.css";import"efficient-easel/menu.css";import"efficient-easel/chrome.css";import"efficient-easel/tree.css";import"efficient-easel/drag.css";import"efficient-easel/screen.css";import"./storefront-editor.css";import{buildConfig as ft}from"../lib/puck/build-config.js";import{ChromeWrap as St}from"../lib/editor-chrome.js";import{sessionRegistry as gt}from"../lib/editor-session.js";import{backendOf as A,blocksOf as _t}from"../lib/website-session.js";import{useEditorSession as wt}from"../lib/editor-session-context.js";import{withSiteBlockGapFields as yt}from"../lib/puck/site-gap-fields.js";import{withTemplateMediaPlaceholders as Tt}from"../lib/puck/templateFields.js";import{setEditorPage as fe}from"../lib/puck/editor-page-context.js";import{resolveSiteName as Ct}from"../lib/content/site-name.js";import{normalizeSiteGutter as Et,normalizeSiteWidth as Pt}from"../lib/content/page-width.js";import{normalizeSiteBlockGap as vt}from"../lib/content/container-gap.js";import xt,{DocumentScreen as bt}from"./EditorScreenMount.js";import{useStorefrontDocument as It}from"./StorefrontDocumentContext.js";import{PreviewHeaderProvider as Ht}from"./PreviewHeaderContext.js";import{PreviewFooterProvider as Mt}from"./PreviewFooterContext.js";import{PreviewChatProvider as Rt,DEFAULT_CHAT_PREVIEW as Ft}from"./PreviewChatContext.js";import{PreviewSocialProvider as Gt}from"./PreviewSocialContext.js";import{useSocialSettings as zt}from"./useSocialSettings.js";import{PreviewSurfaceProvider as kt}from"./PreviewSurfaceContext.js";import{PreviewFocusProvider as Dt}from"./PreviewFocusContext.js";import{SITE_FOOTER_SLUG as At}from"../lib/content/footer.js";import{markFooterReturn as Wt}from"../lib/puck/footer-return.js";import{WEBSITE_ADDRESSING as Nt}from"../lib/website-document-addressing.js";import{PreviewTickerProvider as Ot}from"./PreviewTickerContext.js";import{PreviewPartsProvider as Bt}from"./PreviewPartsContext.js";import{PreviewLocationPartProvider as Kt}from"./PreviewLocationPartContext.js";import{PreviewPartStyleProvider as Lt}from"./PreviewPartStyleContext.js";import{SiteMapsProvider as Yt,readSiteMapsKey as Ut,writeSiteMapsKey as Se,readSiteMapId as jt,writeSiteMapId as Vt}from"../lib/maps-config.js";import{CORNER_STYLE_TO_PX as Xt,DEFAULT_HEADING_COMPRESSION as Zt,DEFAULT_HEADING_TYPOGRAPHY as qt,DEFAULT_SWITCH_SHOWN as W,DEFAULT_SIZES as Jt,DEFAULT_THEME_MODE as E,normalizeCornerRadius as Qt,normalizeCornerStyle as $t,normalizeCardShadow as er,normalizeCardGap as tr,normalizeHoverEffect as rr,normalizeShadowColor as or,IDENTITY_CARD_GAP as ge,IDENTITY_CARD_SHADOW as nr,IDENTITY_HOVER_EFFECT as ar,headingTypographyFromRow as _e,normalizeHeadingCompression as N,normalizeSizes as we,THEME_MODE_KEY as ye,THEME_STORAGE_KEY as ir,THEME_SWITCH_HIDE as Te,THEME_SWITCH_KEY as O}from"../lib/theme.js";import{DEFAULT_FONTS as cr,normalizeFonts as B}from"../lib/fonts.js";import{WEBSITE_SCREEN as sr}from"./WebsiteScreenParts.js";import{routeWebsiteHostMessage as dr}from"../lib/website-host-inbound.js";import{resolveTextStyles as lr,textStylesToOld as ur}from"../lib/site-text-styles.js";const hr=()=>{if(typeof window>"u")return E;try{const c=window.localStorage.getItem(ye);return c==="light"||c==="dark"||c==="auto"?c:E}catch{return E}},Ce=c=>{if(!(typeof window>"u"))try{window.localStorage.setItem(ye,c)}catch{}},mr=()=>{if(typeof window>"u")return W;try{return window.localStorage.getItem(O)!==Te}catch{return W}},pr=()=>{if(!(typeof window>"u"))try{window.localStorage.removeItem(ir)}catch{}},Ee=c=>{if(!(typeof window>"u"))try{c?window.localStorage.removeItem(O):window.localStorage.setItem(O,Te)}catch{}};function fr(){const{adapter:c,capabilities:d,templateId:K,ready:S,token:h,siteId:i,currentSlug:g,currentKind:L,data:Y,getLiveData:U,footerOriginSlug:_,navigate:y}=It();p(()=>(fe(g,L),()=>fe(null,null)),[g,L]);const P=d.placeholderFrames,[Pe,j]=r(null),[ve,V]=r("");p(()=>{const e=c.templateName;if(!S||!K||!e){V("");return}let o=!1;return e().then(l=>!o&&V(l??"")).catch(()=>{}),()=>{o=!0}},[S,h,K,c]);const[xe,v]=r(E),[be,x]=r(W),[Ie,X]=r({selected:0,themes:[]}),[He,b]=r(cr),[Me,I]=r(Jt),[Re,Z]=r(null),[Fe,H]=r(Zt),[Ge,q]=r(null),[ze,J]=r(null),[ke,Q]=r(ge),[De,$]=r(null),[Ae,ee]=r(null),[We,te]=r(null),[M,re]=r(null),u=wt(),oe=D(()=>ft(gt(u),_t(u)),[u]),Ne=D(()=>yt(Tt(oe,P),M),[oe,P,M]),[Oe,R]=r(qt),[Be,ne]=r(null),[Ke,ae]=r(null),ie=m(null),a=m(!1);p(()=>{v(hr()),x(mr())},[]);const Le=n(e=>{a.current=!0,pr(),Ce(e),v(e)},[]),Ye=n(e=>{a.current=!0,Ee(e),x(e)},[]),Ue=n(e=>{a.current=!0,X(e)},[]),je=n(e=>{a.current=!0,b(e)},[]),Ve=n(e=>{a.current=!0,I(e)},[]),Xe=n(e=>{a.current=!0,Z(e)},[]),Ze=n(e=>{a.current=!0,H(e)},[]),qe=n(e=>{a.current=!0,q(e)},[]),Je=n(e=>{a.current=!0,J(e)},[]),Qe=n(e=>{a.current=!0,Q(e)},[]),$e=n(e=>{a.current=!0,$(e)},[]),et=n(e=>{a.current=!0,R(e)},[]),[tt,ce]=r(null),rt=n(e=>{a.current=!0,ce(e)},[]),ot=n(e=>{a.current=!0,ee(e)},[]),nt=n(e=>{a.current=!0,te(e)},[]),at=n(e=>{a.current=!0,re(e)},[]),it=n(e=>{a.current=!0,ne(e)},[]),ct=n(e=>{a.current=!0,ae(e)},[]);p(()=>{const e=A(u).theme;if(!h||!d.hasSiteTheme||!e)return;const o=i??"";ie.current!==o&&(ie.current=o,a.current=!1);let l=!1;return e.get(i?{siteId:i}:void 0).then(t=>{if(!(l||a.current)){if(Ce(t.default_mode),Ee(t.show_theme_switch),v(t.default_mode),x(t.show_theme_switch),X({selected:t.selected_preset,themes:t.theme_presets}),b(B({heading:t.heading_font,body:t.body_font,accent:t.accent_font,label:t.label_font})),I(we({headingLarge:t.heading_size_large_px,headingMedium:t.heading_size_medium_px,headingSmall:t.heading_size_small_px,body:t.body_size_px,label:t.label_size_px})),Z(t.corner_radius_px===void 0?Xt[$t(t.corner_style)]:Qt(t.corner_radius_px)),H(N(t.heading_compression)),q(t.card_shadow==null?nr:er(t.card_shadow)),Q(t.card_gap==null?ge:tr(t.card_gap)),$(t.hover_effect==null?ar:rr(t.hover_effect)),J(or(t.shadow_color)),ee(Pt(t.site_width)),te(Et(t.site_gutter)),re(vt(t.block_gap)),R(_e(t)),ce(t.text_styles??null),Array.isArray(t.text_styles)){const w={fonts:B({heading:t.heading_font,body:t.body_font,accent:t.accent_font,label:t.label_font}),sizes:we({headingLarge:t.heading_size_large_px,headingMedium:t.heading_size_medium_px,headingSmall:t.heading_size_small_px,body:t.body_size_px,label:t.label_size_px}),compression:N(t.heading_compression),typography:_e(t)},f=ur(lr(t.text_styles,w),w);b(B(f.fonts)),I(f.sizes),H(N(f.compression)),R(f.typography)}ne(t.hero_background_follows_width===!0),ae(t.photography_grayscale===!0)}}).catch(()=>{}),()=>{l=!0}},[h,i,d.hasSiteTheme,u]);const st=zt({token:h,siteId:i,enabled:d.hasSiteSettings}),[dt,se]=r(Ft),de=m(null),F=m(!1),G=m(null),T=m({}),lt=n(e=>{F.current=!0,se(o=>({...o,...e})),!(!d.hasSiteSettings||!h)&&(T.current={...T.current,...e},G.current&&clearTimeout(G.current),G.current=setTimeout(()=>{const o=T.current;T.current={},A(u).chat?.update(o,i?{siteId:i}:void 0).catch(()=>{})},500))},[d.hasSiteSettings,h,i,u]);p(()=>{if(!h||!d.hasSiteSettings)return;const e=i??"";de.current!==e&&(de.current=e,F.current=!1);let o=!1;const l=A(u).chat;if(l)return l.get(i?{siteId:i}:void 0).then(t=>{o||F.current||se({enabled:t.enabled,title:t.title,subtitle:t.subtitle,greeting:t.greeting})}).catch(()=>{}),()=>{o=!0}},[h,i,d.hasSiteSettings,u]);const[C,z]=r(""),le=m(null),k=m(!1);p(()=>z(Ut()),[]);const ue=n(e=>{const o=e.trim();if(o===C)return;k.current=!0,Se(o),z(o);const l=c.updateSite;!d.canEditSiteRecord||!S||!l||l({mapsApiKey:o}).catch(()=>{})},[C,d.canEditSiteRecord,S,c]),[he,me]=r("");p(()=>me(jt()),[]),p(()=>{const e=c.site;if(!S||!d.hasSiteRecord||!e){j(null);return}const o=i??"";le.current!==o&&(le.current=o,k.current=!1);let l=!1;return e().then(t=>{if(l||(j(Ct(t.name)),k.current))return;const w=t.mapsApiKey??"";Se(w),z(w);const f=t.mapsMapId??"";Vt(f),me(f)}).catch(()=>{}),()=>{l=!0}},[S,h,d.hasSiteRecord,i,c]);const ut=D(()=>({apiKey:C,setApiKey:ue,mapId:he}),[C,ue,he]),pe=m(null),ht=n(()=>{pe.current=U()??Y??null,Wt(g),y({kind:"page",slug:At,siteId:i??void 0,originSlug:g})},[U,Y,g,y,i]),mt=n(()=>{_&&y({kind:"page",slug:_,siteId:i??void 0})},[_,y,i]);return s(bt,{config:Ne,parts:sr,wrap:(e,o)=>s(Ht,{websiteName:Pe,templateChrome:P,templateName:ve||null,themeMode:xe,onThemeModeChange:Le,themeSwitchShown:be,onThemeSwitchShownChange:Ye,theme:Ie,onThemeChange:Ue,fonts:He,onFontsChange:je,cornerRadiusPx:Re,onCornerRadiusPxChange:Xe,cardShadow:Ge,onCardShadowChange:qe,shadowColor:ze,onShadowColorChange:Je,cardGap:ke,onCardGapChange:Qe,hoverEffect:De,onHoverEffectChange:$e,headingCompression:Fe,onHeadingCompressionChange:Ze,headingTypography:Oe,onHeadingTypographyChange:et,textStyles:tt,onTextStylesChange:rt,sizes:Me,onSizesChange:Ve,siteWidth:Ae,onSiteWidthChange:ot,siteGutter:We,onSiteGutterChange:nt,blockGap:M,onBlockGapChange:at,heroBackgroundFollowsWidth:Be,onHeroBackgroundFollowsWidthChange:it,photographyGrayscale:Ke,onPhotographyGrayscaleChange:ct,themeFromDocument:!d.hasSiteTheme,children:s(Dt,{originData:_?pe.current:null,originSlug:_,exitFocus:mt,children:s(Mt,{editFooter:ht,children:s(St,{wrap:u.chrome?.wrap,surface:"page",children:s(Ot,{children:s(Bt,{children:s(Kt,{children:s(Lt,{children:pt(Yt,{value:ut,children:[s(Rt,{chat:dt,onChatChange:lt,children:s(Gt,{value:st,children:s(kt,{children:e})})}),o]})})})})})})})})})})}function Sr({target:c}){return s(xt,{target:c,addressing:Nt,onHostMessage:dr,children:s(fr,{})})}export{Sr as default};

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

@@ -1 +1 @@
-import{jsx as n,jsxs as L}from"react/jsx-runtime";import{pageWidthMarker as M,PAGE_WIDTH_ATTR as X,SITE_WIDTH_CAP as K,siteWidthTokens as Y,siteGutterTokens as q,heroBackgroundTokens as J}from"../content/page-width.js";import{siteBlockGapTokens as Q}from"../content/container-gap.js";import{siteCardRadiusTokens as U}from"../content/card-corners.js";import{usePreviewHeader as Z}from"../../components/PreviewHeaderContext.js";import{SitePhotographyProvider as ee}from"../../components/SitePhotographyContext.js";import{CORNER_STYLE_TO_PX as te,normalizeCornerStyle as oe,normalizeCornerRadius as re,themeColorStyle as ne,typeSizesStyle as ae,headingTypographyStyle as se,themeAccentStyle as de,themeButtonStyle as ie,themePresetAccentVars as ce,themeSurfaceStyle as le,siteCornerRadiusTokens as C,shadowColorTokens as he,headingCompressionAttr as pe,cardShadowAttr as fe,cardGapAttr as me,hoverEffectAttr as ue}from"../theme.js";import{fontRoleStyle as ge}from"../fonts.js";import{isStandaloneSectionDocument as Se,pageHasHeaderSection as k,pageTakesTopSpace as ye,topSpaceMarker as Te,TOP_SPACE_ATTR as xe,HEADER_CLEARANCE_CLASS as Ce}from"./header-clearance.js";import{leadSectionInk as ke,HEADER_INK_ATTR as Ae}from"./header-ink.js";import{useEasel as ve}from"efficient-easel/easel";import{pageBackgroundVars as A}from"../content/page-background.js";const Ee="color-mix(in oklab, var(--bg) 40%, #ffffff)",Pe="12vh";function _e({style:t,frameClass:o,children:a}){const{appState:r}=ve(g=>g),s=r.data.content,d=r.data.root;if(Se(s))return n("div",{className:`sf-themed-content${o?` ${o}`:""}`,style:{...t,background:Ee,minHeight:"100vh",paddingBottom:Pe},children:n("div",{style:{background:"var(--bg)"},children:a})});const c=k(s)&&ye(d,s),l=k(s)?Te(d,s):null,f=l?{[xe]:l}:null,h=M(d?.widthChoice),m=h?{[X]:h}:null,p=c?null:ke(s),u=p?{[Ae]:p}:null;return n("div",{className:`sf-themed-content${c?` ${Ce}`:""}${o?` ${o}`:""}`,style:t,...u,...f,...m,children:n("div",{style:{background:"var(--bg)",minHeight:"100%"},children:a})})}function v(t){return{frameClass:void 0,style:{"--sf-page-width":K}}}function we({w:t,children:o}){const{frameClass:a,style:r}=v(t);return n("div",{className:a,style:r,children:o})}function Fe({propsTheme:t,propsFonts:o,propsCornerStyle:a,propsCornerRadiusPx:r,propsHeadingCompression:s,propsHeadingTypography:d,widthMode:c,fullWidth:l,pageWidth:f,pageBackground:h,chromeInheritsSiteBackground:m,suppressPreviewNav:p,footer:u,overlay:g,children:E}){const{theme:P,fonts:_,sizes:w,cornerRadiusPx:R,cardShadow:S,shadowColor:H,cardGap:W,hoverEffect:y,headingCompression:G,siteWidth:I,siteGutter:N,blockGap:b,headingTypography:B,heroBackgroundFollowsWidth:D,photographyGrayscale:z,themeFromDocument:e}=Z(),i=e?t:P,V=e?o:_,$=e?void 0:w,T=e?r===void 0?te[oe(a)]:re(r):R,F=e?s:G,O=e?d:B,x=v({widthMode:c,fullWidth:l,pageWidth:f}),j={...ne(i),...ae($),...se(O),...x.style,...m?{}:A(h)};return n("div",{className:"sf-theme-surfaces sf-theme-accent",style:{...ge(V),...de(i),...ie(i),...ce(i),...le(i),...C(T),...U(C(T)),...he(e?void 0:S,e?void 0:H,e?void 0:y),...Y(e?void 0:I),...q(e?void 0:N),...Q(e?void 0:b),...J(e?void 0:D)},"data-sf-headings":pe(F),"data-sf-card-shadow":e?void 0:fe(S),"data-sf-card-gap":e?void 0:me(W),"data-sf-card-hover":e?void 0:ue(y),onClickCapture:p,children:L(ee,{grayscale:e?void 0:z,children:[n(_e,{style:j,frameClass:x.frameClass,children:E}),u,g]})})}const Oe=t=>{t.target?.closest?.("a")&&t.preventDefault()};function je({pageBackground:t,inheritBackground:o=!1,w:a,children:r}){return n("div",{style:{...o?{}:A(t),background:"var(--bg)",minHeight:"100%",overflowX:"clip"},children:n(we,{w:a,children:r})})}export{_e as EditorPageBody,Fe as EditorThemedBody,we as PageWidthWrapper,je as PublishedPageFrame,Ee as SECTION_PREVIEW_CANVAS,Pe as SECTION_PREVIEW_CANVAS_TAIL,v as pageWidthTokens,Oe as suppressPreviewNav};
+import{jsx as r,jsxs as k}from"react/jsx-runtime";import{storedTextStyles as K,textStylesCss as Y}from"../site-text-styles.js";import{pageWidthMarker as q,PAGE_WIDTH_ATTR as J,SITE_WIDTH_CAP as Q,siteWidthTokens as U,siteGutterTokens as Z,heroBackgroundTokens as ee}from"../content/page-width.js";import{siteBlockGapTokens as te}from"../content/container-gap.js";import{siteCardRadiusTokens as oe}from"../content/card-corners.js";import{usePreviewHeader as ne}from"../../components/PreviewHeaderContext.js";import{SitePhotographyProvider as re}from"../../components/SitePhotographyContext.js";import{CORNER_STYLE_TO_PX as se,normalizeCornerStyle as ae,normalizeCornerRadius as de,themeColorStyle as ie,typeSizesStyle as ce,headingTypographyStyle as le,themeAccentStyle as he,themeButtonStyle as pe,themePresetAccentVars as fe,themeSurfaceStyle as me,siteCornerRadiusTokens as A,shadowColorTokens as ue,headingCompressionAttr as ge,cardShadowAttr as ye,cardGapAttr as Se,hoverEffectAttr as xe}from"../theme.js";import{fontRoleStyle as Te}from"../fonts.js";import{isStandaloneSectionDocument as Ce,pageHasHeaderSection as v,pageTakesTopSpace as ke,topSpaceMarker as Ae,TOP_SPACE_ATTR as ve,HEADER_CLEARANCE_CLASS as Ee}from"./header-clearance.js";import{leadSectionInk as _e,HEADER_INK_ATTR as Pe}from"./header-ink.js";import{useEasel as we}from"efficient-easel/easel";import{pageBackgroundVars as E}from"../content/page-background.js";const Re="color-mix(in oklab, var(--bg) 40%, #ffffff)",He="12vh";function We({style:t,frameClass:o,children:s}){const{appState:n}=we(g=>g),a=n.data.content,d=n.data.root;if(Ce(a))return r("div",{className:`sf-themed-content${o?` ${o}`:""}`,style:{...t,background:Re,minHeight:"100vh",paddingBottom:He},children:r("div",{style:{background:"var(--bg)"},children:s})});const c=v(a)&&ke(d,a),l=v(a)?Ae(d,a):null,f=l?{[ve]:l}:null,h=q(d?.widthChoice),m=h?{[J]:h}:null,p=c?null:_e(a),u=p?{[Pe]:p}:null;return r("div",{className:`sf-themed-content${c?` ${Ee}`:""}${o?` ${o}`:""}`,style:t,...u,...f,...m,children:r("div",{style:{background:"var(--bg)",minHeight:"100%"},children:s})})}function _(t){return{frameClass:void 0,style:{"--sf-page-width":Q}}}function Ie({w:t,children:o}){const{frameClass:s,style:n}=_(t);return r("div",{className:s,style:n,children:o})}function Xe({propsTheme:t,propsFonts:o,propsCornerStyle:s,propsCornerRadiusPx:n,propsHeadingCompression:a,propsHeadingTypography:d,widthMode:c,fullWidth:l,pageWidth:f,pageBackground:h,chromeInheritsSiteBackground:m,suppressPreviewNav:p,footer:u,overlay:g,children:P}){const{theme:w,fonts:R,sizes:H,cornerRadiusPx:W,cardShadow:y,shadowColor:I,cardGap:G,hoverEffect:S,headingCompression:N,siteWidth:b,siteGutter:B,blockGap:D,headingTypography:z,heroBackgroundFollowsWidth:V,photographyGrayscale:$,textStyles:F,themeFromDocument:e}=ne(),i=e?t:w,L=e?o:R,O=e?void 0:H,x=e?n===void 0?se[ae(s)]:de(n):W,j=e?a:N,T=Y(K(e?void 0:F)),M=e?d:z,C=_({widthMode:c,fullWidth:l,pageWidth:f}),X={...ie(i),...ce(O),...le(M),...C.style,...m?{}:E(h)};return k("div",{className:"sf-theme-surfaces sf-theme-accent",style:{...Te(L),...he(i),...pe(i),...fe(i),...me(i),...A(x),...oe(A(x)),...ue(e?void 0:y,e?void 0:I,e?void 0:S),...U(e?void 0:b),...Z(e?void 0:B),...te(e?void 0:D),...ee(e?void 0:V)},"data-sf-headings":ge(j),"data-sf-card-shadow":e?void 0:ye(y),"data-sf-card-gap":e?void 0:Se(G),"data-sf-card-hover":e?void 0:xe(S),onClickCapture:p,children:[T?r("style",{"data-sf-text-styles":"",dangerouslySetInnerHTML:{__html:T}}):null,k(re,{grayscale:e?void 0:$,children:[r(We,{style:X,frameClass:C.frameClass,children:P}),u,g]})]})}const Ke=t=>{t.target?.closest?.("a")&&t.preventDefault()};function Ye({pageBackground:t,inheritBackground:o=!1,w:s,children:n}){return r("div",{style:{...o?{}:E(t),background:"var(--bg)",minHeight:"100%",overflowX:"clip"},children:r(Ie,{w:s,children:n})})}export{We as EditorPageBody,Xe as EditorThemedBody,Ie as PageWidthWrapper,Ye as PublishedPageFrame,Re as SECTION_PREVIEW_CANVAS,He as SECTION_PREVIEW_CANVAS_TAIL,_ as pageWidthTokens,Ke as suppressPreviewNav};

package/dist/lib/site-text-styles.d.ts

@@ -0,0 +1,41 @@
+import type { TextStyleCase } from "efficient-easel/text-styles";
+import { type FontsValue } from "./fonts.js";
+import { type ResolvedHeadingTypography, type SizesValue } from "./theme.js";
+export type StoredTextStyleValues = {
+    font?: string;
+    color?: string;
+    size?: number;
+    weight?: number;
+    italic?: boolean;
+    lineHeight?: number;
+    letterSpacing?: number;
+    paragraphSpacing?: number;
+    letterCase?: TextStyleCase;
+    largestSize?: number;
+};
+export type StoredTextStyle = {
+    id: string;
+    kind: "heading" | "body";
+    name: string;
+    values: StoredTextStyleValues;
+};
+export type OldSiteText = {
+    fonts: Partial<FontsValue> | Record<string, string>;
+    sizes: Partial<SizesValue> | Record<string, number | null>;
+    compression: string;
+    typography: Partial<ResolvedHeadingTypography> | Record<string, unknown>;
+};
+export declare function textStylesFromOld(old: OldSiteText): StoredTextStyle[];
+export declare function storedTextStyles(value: unknown): StoredTextStyle[];
+export declare function resolveTextStyles(saved: unknown, old: OldSiteText): StoredTextStyle[];
+export declare function textStylesToOld(list: readonly StoredTextStyle[], prev: OldSiteText): OldSiteText;
+export declare function themeWithTextStyles<T extends {
+    fonts?: unknown;
+    sizes?: unknown;
+    headingCompression?: unknown;
+    headingTypography?: unknown;
+    textStyles?: unknown;
+}>(theme: T): T;
+export declare function faceClassOf(style: Pick<StoredTextStyle, "id">): string;
+export declare function textStylesCss(list: readonly StoredTextStyle[]): string;
+export declare function eyebrowStyleId(list: readonly Pick<StoredTextStyle, "id" | "kind">[]): string;

package/dist/lib/site-text-styles.js

@@ -0,0 +1,2 @@
+import{FONT_OPTIONS as S}from"./fonts.js";import{compressionMetrics as z}from"./theme.js";const h=e=>e==="sentence"?"none":void 0,d=e=>typeof e=="number"&&Number.isFinite(e)?e:void 0,g=e=>typeof e=="string"&&e?e:void 0,$=["font","color","size","weight","italic","lineHeight","letterSpacing","paragraphSpacing","letterCase","largestSize"];function c(e){const i={};for(const t of $)e[t]!==void 0&&(i[t]=e[t]);return i}function x(e){const i=e.fonts,t=e.sizes,n=e.typography,o=z(e.compression),s=(l,a)=>({id:`heading-${l}`,kind:"heading",name:`Heading ${l}`,values:c(a)}),r=(l,a={})=>({id:`body-${l}`,kind:"body",name:`Body ${l}`,values:c(a)});return[s(1,{font:g(i.heading),size:d(t.headingLarge),weight:d(n.weight),lineHeight:o.lineHeight,letterSpacing:o.letterSpacing,letterCase:h(n.case),largestSize:d(n.maxPx)}),s(2,{font:g(i.heading2),size:d(t.headingMedium),weight:d(n.weight2),lineHeight:o.lineHeight,letterSpacing:o.letterSpacing,letterCase:h(n.case2)}),s(3,{font:g(i.heading3),size:d(t.headingSmall),weight:d(n.weight3),lineHeight:o.lineHeight,letterSpacing:o.letterSpacing,letterCase:h(n.case3)}),r(1,{font:g(i.body),size:d(t.body)}),r(2),r(3),r(4),r(5,{font:g(i.label),size:d(t.label)})]}function y(e){return Array.isArray(e)&&e.every(t=>t&&typeof t=="object"&&typeof t.id=="string"&&(t.kind==="heading"||t.kind==="body")&&typeof t.name=="string")?e.map(t=>({...t,values:c(t.values??{})})):null}function M(e){return y(e)??[]}function w(e,i){const t=x(i),n=y(e);return n?n.map(o=>({...o,values:c({...C(t,o.id),...o.values})})):t}const C=(e,i)=>e.find(t=>t.id===i)?.values??{};function k(e,i){const t=p=>e.find(m=>m.id===p)?.values??{},n=t("heading-1"),o=t("heading-2"),s=t("heading-3"),r=t("body-1"),l=t("body-5"),a=i.fonts,f=i.sizes,b=i.typography,u=p=>p==="none"?"sentence":"authored";return{fonts:{...a,heading:n.font??a.heading,heading2:o.font??n.font??a.heading2,heading3:s.font??n.font??a.heading3,body:r.font??a.body,label:l.font??a.label},sizes:{...f,headingLarge:n.size??null,headingMedium:o.size??null,headingSmall:s.size??null,body:r.size??null,label:l.size??null},compression:i.compression,typography:{...b,case:u(n.letterCase),weight:n.weight??null,maxPx:n.largestSize??null,weight2:o.weight??null,weight3:s.weight??null,case2:u(o.letterCase),case3:u(s.letterCase)}}}function N(e){const i=y(e.textStyles);if(!i||i.every(o=>Object.keys(o.values).length===0))return e;const t={fonts:e.fonts??{},sizes:e.sizes??{},compression:String(e.headingCompression??"normal"),typography:e.headingTypography??{}},n=k(w(i,t),t);return{...e,fonts:n.fonts,sizes:n.sizes,headingCompression:n.compression,headingTypography:n.typography}}function v(e){switch(e.id){case"heading-1":return"font-display";case"heading-2":return"font-heading2";case"heading-3":return"font-heading3";case"body-1":return"font-body";case"body-5":return"font-mono";default:return`font-${e.id}`}}function H(e){return e==="accent"?"var(--accent)":e==="text"?"var(--fg)":e==="labels"?"var(--fg-dim)":/^#[0-9a-f]{6}$/i.test(e)?e:null}function O(e){const i=":is([data-sf-bullet], [data-sf-number])";return[`${e} br:not(br + br) { display: block; content: ""; margin-top: var(--sf-part-para) }`,`${e} ${i}:not(:first-child) { margin-top: var(--sf-part-para) }`,`${e} ${i}:not(:last-child) { margin-bottom: var(--sf-part-para) }`]}function F(e){const i=[];for(const t of e){const n=t.values,o=`.${v(t)}`,s=[],r=n.font!==void 0?S.find(f=>f.key===n.font)?.cssVar:void 0;if(r&&s.push(`font-family: var(${r})`),n.size!==void 0){const f=n.largestSize!==void 0?Math.min(n.size,n.largestSize):n.size;s.push(`font-size: ${f}px`)}const l=n.color!==void 0?H(n.color):null;l&&s.push(`color: ${l}`),n.italic===!0&&s.push("font-style: italic"),n.weight!==void 0&&s.push(`font-weight: ${n.weight}`);const a=[];n.lineHeight!==void 0&&a.push(`line-height: ${n.lineHeight}`),n.letterSpacing!==void 0&&a.push(`letter-spacing: ${n.letterSpacing}em`),t.kind==="body"&&s.push(...a),n.letterCase!==void 0&&s.push(`text-transform: ${n.letterCase==="upper"?"uppercase":n.letterCase==="lower"?"lowercase":"none"}`),n.paragraphSpacing&&s.push(`--sf-part-para: ${n.paragraphSpacing}px`),s.length&&i.push(`${o} { ${s.join("; ")} }`),t.kind==="heading"&&a.length&&i.push(`${o}, ${o}:is(h1, h2, h3, h4) { ${a.join("; ")} }`),n.paragraphSpacing&&i.push(...O(o))}return i.join(`
+`)}function L(e){const i=e.filter(t=>t.kind==="body").map(t=>Number(/^body-(\d+)$/.exec(t.id)?.[1])).filter(t=>Number.isInteger(t)&&t>0);return i.includes(7)?"body-7":i.length?`body-${Math.max(...i)}`:"body-1"}export{L as eyebrowStyleId,v as faceClassOf,w as resolveTextStyles,M as storedTextStyles,F as textStylesCss,x as textStylesFromOld,k as textStylesToOld,N as themeWithTextStyles};

package/dist/lib/site-theme-row.d.ts

@@ -48,5 +48,11 @@ export interface SiteThemeRow {
     hero_background_follows_width?: boolean | null;
     photography_grayscale?: boolean | null;
     word_styles?: Partial<Record<string, Record<string, unknown> | null>> | null;
+    text_styles?: {
+        id: string;
+        kind: "heading" | "body";
+        name: string;
+        values: Record<string, unknown>;
+    }[] | null;
 }
 export type SiteThemeRowPatch = Partial<Omit<SiteThemeRow, "id">>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "efficient-web-builder",
-  "version": "5.0.2",
+  "version": "5.1.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",