efficient-web-builder 42.0.0 → 44.0.0

package/dist/render/components/Flex.d.ts

@@ -1,4 +1,5 @@
 import type { SlotComponent } from "efficient-easel/blocks";
+import { type PadValues } from "../lib/content/section-padding.js";
 type Direction = "row" | "column" | "tabs";
 type Justify = "start" | "center" | "between" | "end";
 type AlignItems = "start" | "center" | "end" | "stretch";
@@ -8,6 +9,7 @@ interface FlexProps {
     borderPhone?: unknown;
     direction: Direction;
     label?: string;
+    tabShape?: unknown;
     gap?: number | string;
     justify: Justify;
     align: AlignItems;
@@ -21,16 +23,10 @@ interface FlexProps {
     darken?: number;
     darkenStyle?: string;
     placement?: string;
-    padTop?: unknown;
-    padBottom?: unknown;
-    padTopPhone?: unknown;
-    padBottomPhone?: unknown;
-    padLeft?: unknown;
-    padRight?: unknown;
-    padLeftPhone?: unknown;
-    padRightPhone?: unknown;
+    pad?: PadValues;
     fillHeight?: boolean;
+    shadow?: unknown;
     content: SlotComponent;
 }
-export default function Flex({ direction, label, gap, justify, align, wrap, share, phoneRow, blockSpacing, bgImage, bgImagePhone, darken, darkenStyle, placement, padV2, border, borderPhone, padTop, padBottom, padTopPhone, padBottomPhone, padLeft, padRight, padLeftPhone, padRightPhone, contained, fillHeight, content: Content, }: FlexProps): import("react").JSX.Element;
+export default function Flex({ direction, label, tabShape, gap, justify, align, wrap, share, phoneRow, blockSpacing, bgImage, bgImagePhone, darken, darkenStyle, placement, padV2, border, borderPhone, pad, contained, fillHeight, shadow, content: Content, }: FlexProps): import("react").JSX.Element;
 export {};

package/dist/render/components/Flex.js

@@ -1 +1 @@
-import{jsx as e,jsxs as le,Fragment as ae}from"react/jsx-runtime";import ie from"./BoxTabs.js";import{BoxTabPaneContext as ce,useIsTabPane as me}from"./BoxTabPaneContext.js";import fe from"./SiteGutterFrame.js";import{BoxSurfaceProvider as ue}from"./BoxSurfaceContext.js";import{BoxCellWidthContext as be}from"./BoxCellWidthContext.js";import{useInSiteHeader as de}from"./PhoneMenuTools.js";import{FRAME_BASE as H,FRAME_GUTTER as T}from"./BlockFrame.js";import{containerGapProps as xe}from"../../format/lib/content/container-gap.js";import{boxLayoutClasses as pe,boxBlockSpacingClass as $e,boxPhoneRowClasses as _,boxShareClasses as W,boxWrapClass as ye}from"../../format/lib/content/box-layout.js";import{BOX_CARD_PAD as s,BOX_OWNS_SIDES_CLASS as Ce,boxDarkenStyle as Se,boxPlacementClasses as _e,CARD_SHADOW_CLASS as he,isBackgroundBox as R}from"../../format/lib/content/box-background.js";import{sectionBorderStyle as ve}from"../../format/lib/content/borders.js";import{sectionPadAttrs as Pe}from"../../format/lib/content/section-padding.js";import{ON_MEDIA_INK_STYLE as ge}from"../../format/lib/content/ink.js";import{sizedBackground as h}from"../../format/lib/sized-image.js";const z={"--sf-site-gutter":"0px"},Ae="bg-cover bg-center bg-[image:var(--sf-box-bg)] max-[720px]:bg-[image:var(--sf-box-bg-p)]";function Ee({direction:r,label:G,gap:I,justify:L,align:i,wrap:M,share:v,phoneRow:P,blockSpacing:U,bgImage:c,bgImagePhone:g,darken:X,darkenStyle:K,placement:Y,padV2:q=!1,border:J,borderPhone:Q,padTop:m,padBottom:f,padTopPhone:u,padBottomPhone:b,padLeft:d,padRight:x,padLeftPhone:p,padRightPhone:$,contained:V=!0,fillHeight:A=!1,content:Z}){const t=R(c),E=de(),N=me(),B=[W(v),$e(U)].filter(Boolean).join(" "),ee=B?` ${B}`:"",k=["flex",r==="row"?`flex-row ${_(P)}`:"flex-col",ye(M),t?_e(Y??"center",r):pe(L,i)].join(" ")+ee,o=A||t?" h-full":"",y=t||E||q?"":" py-6",se=`${H}${y} ${T}${o}`,oe=E?o.trim():`w-full${y}${o}`,n=xe("Flex",I,r==="row"?"inline":"block"),w=e(Z,{className:`${k}${n.className}${o}`,style:n.style,minEmptyHeight:120}),D=r==="tabs"?e(ie,{className:`${k}${n.className}${o}`,style:n.style,children:w}):w,C=N?e(ce.Provider,{value:!1,children:D}):D,re=G?.trim()||(N?"":void 0),te={values:{top:m,bottom:f,topPhone:u,bottomPhone:b,left:d,right:x,leftPhone:p,rightPhone:$},frame:y?24:0},F=a=>e(fe,{contained:V,framedClass:se,fillClass:oe,columnClass:`${H} ${T}${o}`,tabLabel:re,pad:t?void 0:te,border:ve(J,Q),children:a});if(!t){const a=i===void 0||i==="stretch",ne=W(v)!==""&&(a||_(P)!==_(void 0));return F((r==="row"?ne:r==="column"&&a)?e(be.Provider,{value:!0,children:C}):C)}const l=Se(X,K),O=R(g),S=Pe(typeof m=="number"?m:s.desktop,typeof f=="number"?f:s.desktop,typeof u=="number"?u:s.phone,typeof b=="number"?b:s.phone,typeof d=="number"?d:s.side,typeof x=="number"?x:s.side,typeof p=="number"?p:s.sidePhone,typeof $=="number"?$:s.sidePhone),j=e("div",{className:`relative z-[1] ${Ce} ${S?.className??""}${A?" h-full":""}`.trimEnd(),style:l?{...S?.style,...z,...ge}:{...S?.style,...z},children:C});return F(e(ae,{children:le("div",{className:`relative isolate overflow-hidden ${he}${o}${O?` ${Ae}`:""}`,style:O?{"--sf-box-bg":h(c??""),"--sf-box-bg-p":h(g??"")}:{backgroundImage:h(c??""),backgroundSize:"cover",backgroundPosition:"center"},children:[l&&e("div",{className:"absolute inset-0 z-0",style:l,"aria-hidden":!0}),l?e(ue,{children:j}):j]})}))}export{Ee as default};
+import{jsx as o,jsxs as se,Fragment as te}from"react/jsx-runtime";import re from"./BoxTabs.js";import{BoxTabPaneContext as ne,useIsTabPane as ae}from"./BoxTabPaneContext.js";import le from"./SiteGutterFrame.js";import{BoxSurfaceProvider as ie}from"./BoxSurfaceContext.js";import{BoxCellWidthContext as ce}from"./BoxCellWidthContext.js";import{useInSiteHeader as me}from"./PhoneMenuTools.js";import{FRAME_BASE as k,FRAME_GUTTER as w}from"./BlockFrame.js";import{containerGapProps as fe}from"../../format/lib/content/container-gap.js";import{boxLayoutClasses as de,boxBlockSpacingClass as be,boxFitContentClass as he,boxPhoneRowClasses as x,boxShareClasses as T,boxWrapClass as ue}from"../../format/lib/content/box-layout.js";import{BOX_CARD_PAD as s,BOX_OWNS_SIDES_CLASS as xe,boxDarkenStyle as pe,boxPlacementClasses as Pe,CARD_SHADOW_CLASS as Ce,isBackgroundBox as R}from"../../format/lib/content/box-background.js";import{boxShadowAttrs as $e}from"../../format/lib/content/box-shadow.js";import{sectionBorderStyle as Se}from"../../format/lib/content/borders.js";import{finiteNumber as t}from"../../format/lib/finite-number.js";import{sectionPadAttrs as ge}from"../lib/content/section-padding.js";import{ON_MEDIA_INK_STYLE as _e}from"../../format/lib/content/ink.js";import{sizedBackground as p}from"../../format/lib/sized-image.js";const D={"--sf-site-gutter":"0px"},ve="bg-cover bg-center bg-[image:var(--sf-box-bg)] max-[720px]:bg-[image:var(--sf-box-bg-p)]";function ye({direction:r,label:F,tabShape:L,gap:O,justify:j,align:m,wrap:H,share:f,phoneRow:P,blockSpacing:W,bgImage:d,bgImagePhone:C,darken:z,darkenStyle:G,placement:I,padV2:M=!1,border:U,borderPhone:X,pad:e={},contained:K=!0,fillHeight:$=!1,shadow:Y,content:q}){const a=R(d),S=me(),g=ae(),_=[T(f),r==="row"?he(f):"",be(W)].filter(Boolean).join(" "),J=_?` ${_}`:"",v=["flex",r==="row"?`flex-row ${x(P)}`:"flex-col",ue(H),a?Pe(I??"center",r):de(j,m)].join(" ")+J,n=$||a?" h-full":"",b=a||S||M?"":" py-6",Q=`${k}${b} ${w}${n}`,V=S?n.trim():`w-full${b}${n}`,l=fe("Flex",O,r==="row"?"inline":"block"),y=o(q,{className:`${v}${l.className}${n}`,style:l.style,minEmptyHeight:120}),A=r==="tabs"?o(re,{className:`${v}${l.className}${n}`,style:l.style,shape:L,children:y}):y,h=g?o(ne.Provider,{value:!1,children:A}):A,Z=F?.trim()||(g?"":void 0),ee={values:e,frame:b?24:0},B=c=>o(le,{contained:K,framedClass:Q,fillClass:V,columnClass:`${k} ${w}${n}`,tabLabel:Z,pad:a?void 0:ee,border:Se(U,X),outerAttrs:a?void 0:$e(Y),children:c});if(!a){const c=m===void 0||m==="stretch",oe=T(f)!==""&&(c||x(P)!==x(void 0));return B((r==="row"?oe:r==="column"&&c)?o(ce.Provider,{value:!0,children:h}):h)}const i=pe(z,G),N=R(C),u=ge({...e,top:t(e.top)??s.desktop,bottom:t(e.bottom)??s.desktop,topPhone:t(e.topPhone)??s.phone,bottomPhone:t(e.bottomPhone)??s.phone,left:t(e.left)??s.side,right:t(e.right)??s.side,leftPhone:t(e.leftPhone)??s.sidePhone,rightPhone:t(e.rightPhone)??s.sidePhone}),E=o("div",{className:`relative z-[1] ${xe} ${u?.className??""}${$?" h-full":""}`.trimEnd(),style:i?{...u?.style,...D,..._e}:{...u?.style,...D},children:h});return B(o(te,{children:se("div",{className:`relative isolate overflow-hidden ${Ce}${n}${N?` ${ve}`:""}`,style:N?{"--sf-box-bg":p(d??""),"--sf-box-bg-p":p(C??"")}:{backgroundImage:p(d??""),backgroundSize:"cover",backgroundPosition:"center"},children:[i&&o("div",{className:"absolute inset-0 z-0",style:i,"aria-hidden":!0}),i?o(ie,{children:E}):E]})}))}export{ye as default};

package/dist/render/components/Heading.d.ts

@@ -1,4 +1,4 @@
-import type { PadValues } from "../../format/lib/content/section-padding.js";
+import type { PadValues } from "../lib/content/section-padding.js";
 import type { CSSProperties } from "react";
 import type { BlockAlign as Align } from "../../format/lib/content/block-align.js";
 export type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";

package/dist/render/components/HeroGroup.d.ts

@@ -1,4 +1,5 @@
 import type { SlotComponent } from "efficient-easel/blocks";
+import { type PadValues } from "../lib/content/section-padding.js";
 export interface HeroGroupProps {
     name?: string;
     placement?: string;
@@ -10,15 +11,8 @@ export interface HeroGroupProps {
     justify?: string;
     align?: string;
     wrap?: unknown;
-    sectionPaddingTop?: unknown;
-    sectionPaddingBottom?: unknown;
-    sectionPaddingTopPhone?: unknown;
-    sectionPaddingBottomPhone?: unknown;
-    sectionPaddingLeft?: unknown;
-    sectionPaddingRight?: unknown;
-    sectionPaddingLeftPhone?: unknown;
-    sectionPaddingRightPhone?: unknown;
+    pad?: PadValues;
     content?: SlotComponent;
     dragRef?: ((element: Element | null) => void) | null;
 }
-export default function HeroGroup({ placement, nudgeX, nudgeY, width, gap, direction, justify, align, wrap, sectionPaddingTop, sectionPaddingBottom, sectionPaddingTopPhone, sectionPaddingBottomPhone, sectionPaddingLeft, sectionPaddingRight, sectionPaddingLeftPhone, sectionPaddingRightPhone, content: Content, dragRef, }: HeroGroupProps): import("react").JSX.Element;
+export default function HeroGroup({ placement, nudgeX, nudgeY, width, gap, direction, justify, align, wrap, pad, content: Content, dragRef, }: HeroGroupProps): import("react").JSX.Element;

package/dist/render/components/HeroGroup.js

@@ -1 +1 @@
-import{jsx as m}from"react/jsx-runtime";import{containerDirectionClass as k,resolveContainerDirection as v}from"../../format/lib/content/container-direction.js";import{containerGapProps as D}from"../../format/lib/content/container-gap.js";import{boxLayoutClasses as W,boxWrapClass as w}from"../../format/lib/content/box-layout.js";import{sectionPadAttrs as A}from"../../format/lib/content/section-padding.js";import{clampNudge as p,clampWidth as B,normalisePlacement as E,placementParts as F,placementRow as L}from"../../format/lib/hero-group-placement.js";function R({placement:c,nudgeX:f,nudgeY:u,width:r,gap:g,direction:t,justify:y,align:h,wrap:x,sectionPaddingTop:d,sectionPaddingBottom:b,sectionPaddingTopPhone:N,sectionPaddingBottomPhone:G,sectionPaddingLeft:H,sectionPaddingRight:P,sectionPaddingLeftPhone:j,sectionPaddingRightPhone:$,content:n,dragRef:C}){const s=E(c),a=p(f),l=p(u),i=D("HeroGroup",g,v("HeroGroup",t)==="column"?"block":"inline"),o={"--sf-hg-row":L(s),justifySelf:F(s).column};typeof r=="number"&&Number.isFinite(r)&&(o["--sf-hg-w"]=`${B(r)}%`),(a!==0||l!==0)&&(o["--sf-hg-nudge"]=`${a}px ${l}px`);const e=A(d,b,N,G,H,P,j,$);return m("div",{className:e?`sf-hero-group ${e.className}`:"sf-hero-group","data-hg":s,style:e?{...o,...e.style}:o,ref:C??void 0,children:n?m(n,{className:["sf-hero-group-blocks flex",k("HeroGroup",t),W(y,h),w(x)].filter(Boolean).join(" ")+i.className,style:i.style,minEmptyHeight:40}):null})}export{R as default};
+import{jsx as m}from"react/jsx-runtime";import{containerDirectionClass as N,resolveContainerDirection as G}from"../../format/lib/content/container-direction.js";import{containerGapProps as H}from"../../format/lib/content/container-gap.js";import{boxLayoutClasses as P,boxWrapClass as j}from"../../format/lib/content/box-layout.js";import{sectionPadAttrs as $}from"../lib/content/section-padding.js";import{clampNudge as p,clampWidth as C,normalisePlacement as k,placementParts as v,placementRow as D}from"../../format/lib/hero-group-placement.js";function W({placement:c,nudgeX:f,nudgeY:u,width:r,gap:g,direction:t,justify:d,align:y,wrap:h,pad:x={},content:n,dragRef:b}){const s=k(c),a=p(f),l=p(u),i=H("HeroGroup",g,G("HeroGroup",t)==="column"?"block":"inline"),o={"--sf-hg-row":D(s),justifySelf:v(s).column};typeof r=="number"&&Number.isFinite(r)&&(o["--sf-hg-w"]=`${C(r)}%`),(a!==0||l!==0)&&(o["--sf-hg-nudge"]=`${a}px ${l}px`);const e=$(x);return m("div",{className:e?`sf-hero-group ${e.className}`:"sf-hero-group","data-hg":s,style:e?{...o,...e.style}:o,ref:b??void 0,children:n?m(n,{className:["sf-hero-group-blocks flex",N("HeroGroup",t),P(d,y),j(h)].filter(Boolean).join(" ")+i.className,style:i.style,minEmptyHeight:40}):null})}export{W as default};

package/dist/render/components/HeroSection.js

@@ -1,11 +1 @@
-"use client";import{jsx as c,jsxs as R}from"react/jsx-runtime";import{useCallback as f,useEffect as h,useId as Oe,useRef as l,useState as k}from"react";import{markOverlayPortal as N}from"../../format/lib/document/overlay-portal.js";import Ce from"./Ticker.js";import{HeroSlideStyleContext as He}from"./HeroSlide.js";import Le from"./HeroArrows.js";import Ae from"./Reel.js";import{usePreviewTicker as Ne}from"./PreviewTickerContext.js";import{useReducedMotion as Ie}from"./useReducedMotion.js";import{CANVAS_ACCENT as Z}from"../../format/lib/canvas-accent.js";import{hasSectionHeight as Me,resolveSectionHeight as ee}from"../../format/lib/content/section-height.js";import{HEADER_HEIGHT_CSS as Pe}from"../lib/document/header-clearance.js";import{nextReel as De,normaliseHeroReelShape as Ve,reelShown as $e}from"../../format/lib/reel.js";import{arrowsShown as ze,arrowStep as Xe}from"../../format/lib/hero-arrows.js";import{swipeEnabled as Be,swipeStep as Ge}from"../../format/lib/hero-swipe.js";import{videoControlShown as je,videoHeld as Ye}from"../../format/lib/hero-video-control.js";import{HERO_SLIDER_GOTO_EVENT as I}from"efficient-easel/draw";import{say as te}from"../../format/lib/editor-words.js";import{markedChildren as re}from"../../format/lib/marked-children.js";import{DEFAULT_TICKER_ITEMS as qe}from"../../format/lib/hero-ticker.js";const Fe=`
-.hero-ticker-pick { cursor: pointer; }
-.hero-ticker-pick:hover {
-  outline: 2px solid color-mix(in srgb, ${Z} 45%, transparent);
-  outline-offset: -2px;
-}
-.hero-ticker-pick[data-selected] {
-  outline: 2px solid ${Z};
-  outline-offset: -2px;
-}
-`,Ke="Play video",Ue="Hold video",Je="flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-overlay-chrome/25 bg-overlay-scrim/80 px-[11px] font-mono text-[11px] leading-none tracking-[0.05em] text-overlay-fg",Qe=()=>te("item"),oe=new Map;function We(T,w){const p=T?.ownerDocument?.defaultView;if(p)return p.addEventListener(I,w),()=>p.removeEventListener(I,w)}function Ze({slides:T,alignment:w,textureOpacity:p,showTexture:ne,textureColor:se,phoneUpDown:ce,phoneSideways:ae,autoplay:M,autoplayInterval:O,showTicker:le,tickerItems:ie,heightDesktop:P,heightMobile:D,showPicker:ue,pickerShape:de,pickerPlacement:me,showArrows:fe,arrowsShape:he,arrowsPlacement:pe,editing:n}){const V=Me(P,D),ve=V?"h-[var(--sf-hero-h-m)] min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",be=V?{"--sf-hero-h-d":ee(P),"--sf-hero-h-m":ee(D)}:void 0,C=(ie??qe.map(e=>({text:e}))).map(e=>e?.text?.trim()?e.text:n?Qe():"").filter(Boolean),$=le!==!1,u=l(null),z=l(null),X=l(null),B=l(null),G=l(null),j=Oe(),E=l(j),[y,xe]=k([]),[ke,Y]=k(0),v=l(0),[q,F]=k(!1),[g,we]=k(!1),[K,Ee]=k(null),H=Ie(),{selectedHeroId:ye,select:U}=Ne(),S=f(()=>u.current?.querySelector(".hero-track")??null,[]),i=f((e,t=!1)=>{Y(e),v.current=e,oe.set(E.current,e);const r=u.current?.querySelector(".hero-track");if(r)if(t){const o=r.style.transition;r.style.transition="none",r.style.transform=`translateX(-${Math.max(0,e)*100}%)`,r.offsetHeight,r.style.transition=o}else r.style.transform=`translateX(-${Math.max(0,e)*100}%)`},[]);h(()=>{const e=u.current,t=e?.getAttribute("data-easel-block")||e?.closest("[data-easel-block]")?.getAttribute("data-easel-block")||j;E.current=t,Ee(t);const r=oe.get(t);typeof r=="number"&&(Y(r),v.current=r)},[]),h(()=>{const e=S();if(!e)return;const t=()=>{xe(o=>De(o,re(e,"data-slide-name")))};t();const r=new MutationObserver(t);return r.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-slide-name","data-slide-process","data-slide-media"]}),()=>{r.disconnect()}},[S]),h(()=>{if(!n)return;const e=t=>{const r=t.detail;if(!r||typeof r.index!="number")return;const o=u.current,a=o?.getAttribute("data-easel-block")||o?.closest("[data-easel-block]")?.getAttribute("data-easel-block")||E.current;r.id&&r.id!==a||i(r.index,!0)};return We(u.current,e)},[n,i]);const s=y.length,d=Math.min(Math.max(ke,0),Math.max(0,s-1)),L=$e({shown:ue,count:s}),J=ze({shown:fe,count:s}),Q=je({editing:n,shown:d,slides:y}),ge=Ye({editing:n,playing:g,controlShown:Q}),_=Be({count:s,editing:n}),m=l(null),b=l(null),Se=f(e=>{if(m.current=null,b.current=null,!_||e.touches.length!==1)return;const t=e.touches[0];m.current={x:t.clientX,y:t.clientY},b.current={x:t.clientX,y:t.clientY}},[_]),_e=f(e=>{if(!m.current)return;if(e.touches.length!==1){m.current=null;return}const t=e.touches[0];b.current={x:t.clientX,y:t.clientY}},[]),Re=f(()=>{const e=m.current,t=b.current;if(m.current=null,b.current=null,!_||!e||!t)return;const r=Ge(t.x-e.x,t.y-e.y,v.current,s);r!==v.current&&i(r)},[_,s,i]);h(()=>{if(n||!M||q||H||s<=1)return;const t=Math.max(1,typeof O=="number"?O:6)*1e3,r=window.setTimeout(()=>i((d+1)%s),t);return()=>window.clearTimeout(r)},[n,M,O,q,H,s,d,i]),h(()=>{const e=[z.current,X.current,B.current].filter(Boolean),t=e.map(o=>N(o)),r=o=>{const a=o.target,x=a.closest("[data-hero-nav]"),W=x??a.closest("[data-idx]");if(!W)return;o.stopPropagation(),o.preventDefault();const A=x?Xe(x.dataset.heroNav,v.current,s):Number(W.dataset.idx);Number.isNaN(A)||(i(A,n),re(S(),"data-slide-name")[A]?.click())};return e.forEach(o=>o.addEventListener("click",r,{capture:!0})),()=>{t.forEach(o=>o?.()),e.forEach(o=>o.removeEventListener("click",r,{capture:!0}))}},[s,i,S,n]),h(()=>{if(!n)return;const e=G.current;if(!e)return;const t=N(e),r=o=>{o.stopPropagation(),o.preventDefault();const a=u.current,x=a?.getAttribute("data-easel-block")||a?.closest("[data-easel-block]")?.getAttribute("data-easel-block")||E.current;U(x)};return e.addEventListener("click",r,{capture:!0}),()=>{t?.(),e.removeEventListener("click",r,{capture:!0})}},[n,U,$,C.length]);const Te=f(e=>{if(!e)return;const t=N(e),r=o=>{o.stopPropagation(),o.preventDefault(),we(a=>!a)};return e.addEventListener("click",r,{capture:!0}),()=>{t?.(),e.removeEventListener("click",r,{capture:!0})}},[]);return c(He.Provider,{value:{alignment:w,textureOpacity:p,textureOn:ne,textureColor:se,quietVideo:ge,phoneUpDown:ce,phoneSideways:ae},children:R("div",{ref:u,className:`relative mx-[var(--sf-hero-bleed-m,calc(50%_-_50vw))] w-[var(--sf-hero-bleed-w,100vw)] ${ve} max-w-[var(--sf-hero-cap,none)] overflow-hidden`,style:be,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),onTouchStart:Se,onTouchMove:_e,onTouchEnd:Re,children:[c(T,{className:"hero-track flex h-full [&>*]:h-full [&>*]:min-w-full [&>*]:shrink-0 [&>*]:basis-full",style:{transform:`translateX(-${d*100}%)`,transition:H?"none":"transform 600ms cubic-bezier(.22,.61,.36,1)"},minEmptyHeight:400}),Q&&c("div",{ref:Te,"data-hero-video-control":g?"playing":"held",className:"sf-hero-video-control absolute left-6 z-[7]",style:{top:`calc(${Pe} + 16px)`},children:R("button",{type:"button",className:Je,children:[c("span",{"aria-hidden":"true",children:g?"❚❚":"▶"}),te(g?Ue:Ke)]})}),(L||J)&&R("div",{className:"pointer-events-none absolute inset-y-0 left-[var(--sf-hero-chrome-x,var(--sf-site-gutter,40px))] right-[var(--sf-hero-chrome-x,var(--sf-site-gutter,40px))] z-[6] mx-auto max-w-[var(--sf-hero-chrome-cap,calc(var(--sf-site-width,1600px)_-_var(--sf-site-gutter,40px)*2))]",children:[L&&c(Ae,{ref:z,slides:y,active:d,shape:Ve(de),placement:me}),J&&c(Le,{ref:B,shape:he,placement:pe})]}),L&&c("div",{ref:X,className:"sf-hero-phone-dots absolute bottom-[80px] left-1/2 z-[6] hidden -translate-x-1/2 items-center gap-2",children:y.map((e,t)=>c("button",{type:"button","data-idx":t,"aria-label":`Go to slide ${t+1}`,className:`h-2 rounded-full transition-all motion-reduce:transition-none ${t===d?"w-5 bg-accent":"w-2 bg-white/45 hover:bg-white/70"}`},t))}),$&&C.length>0&&R("div",{ref:G,className:`sf-hero-ticker absolute inset-x-0 bottom-0 z-[5] border-t border-overlay-chrome/10 py-3.5${n?" hero-ticker-pick":""}`,"data-selected":n&&K!=null&&ye===K?"":void 0,style:{background:"rgba(10,10,10,.55)"},children:[n&&c("style",{children:Fe}),c(Ce,{items:C,backdrop:"dark-media"})]})]})})}export{I as HERO_SLIDER_GOTO_EVENT,Ue as HERO_VIDEO_HOLD_LABEL,Ke as HERO_VIDEO_PLAY_LABEL,Ze as default,We as subscribeSliderGoto};
+"use client";import{jsx as c,jsxs as A}from"react/jsx-runtime";import{useCallback as f,useEffect as b,useId as ke,useRef as i,useState as g}from"react";import{markOverlayPortal as K}from"../../format/lib/document/overlay-portal.js";import ge from"./Ticker.js";import{HeroSlideStyleContext as _e}from"./HeroSlide.js";import Se from"./HeroArrows.js";import Re from"./Reel.js";import{TICKER_PART_ATTR as Te}from"./PreviewTickerContext.js";import{useReducedMotion as Oe}from"./useReducedMotion.js";import{hasSectionHeight as He,resolveSectionHeight as U}from"../../format/lib/content/section-height.js";import{HEADER_HEIGHT_CSS as Le}from"../lib/document/header-clearance.js";import{nextReel as Ae,normaliseHeroReelShape as Ne,reelShown as Ce}from"../../format/lib/reel.js";import{arrowsShown as Me,arrowStep as Pe}from"../../format/lib/hero-arrows.js";import{swipeEnabled as De,swipeStep as Ie}from"../../format/lib/hero-swipe.js";import{videoControlShown as Ve,videoHeld as $e}from"../../format/lib/hero-video-control.js";import{HERO_SLIDER_GOTO_EVENT as N}from"efficient-easel/draw";import{say as J}from"../../format/lib/editor-words.js";import{markedChildren as Q}from"../../format/lib/marked-children.js";import{DEFAULT_TICKER_ITEMS as ze}from"../../format/lib/hero-ticker.js";const Xe="Play video",Ge="Hold video",je="flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-overlay-chrome/25 bg-overlay-scrim/80 px-[11px] font-mono text-[11px] leading-none tracking-[0.05em] text-overlay-fg",Be=()=>J("item"),W=new Map;function Ye(_,x){const h=_?.ownerDocument?.defaultView;if(h)return h.addEventListener(N,x),()=>h.removeEventListener(N,x)}function qe({slides:_,alignment:x,textureOpacity:h,showTexture:Z,textureColor:ee,phoneUpDown:te,phoneSideways:re,autoplay:C,autoplayInterval:S,showTicker:oe,tickerItems:ne,heightDesktop:M,heightMobile:P,showPicker:se,pickerShape:ce,pickerPlacement:ae,showArrows:ie,arrowsShape:le,arrowsPlacement:ue,editing:n}){const D=He(M,P),de=D?"h-[var(--sf-hero-h-m)] min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",me=D?{"--sf-hero-h-d":U(M),"--sf-hero-h-m":U(P)}:void 0,I=(ne??ze.map(e=>({text:e}))).map(e=>e?.text?.trim()?e.text:n?Be():"").filter(Boolean),fe=oe!==!1,l=i(null),V=i(null),$=i(null),z=i(null),X=ke(),R=i(X),[w,he]=g([]),[pe,G]=g(0),p=i(0),[j,B]=g(!1),[y,ve]=g(!1),T=Oe(),E=f(()=>l.current?.querySelector(".hero-track")??null,[]),a=f((e,t=!1)=>{G(e),p.current=e,W.set(R.current,e);const r=l.current?.querySelector(".hero-track");if(r)if(t){const o=r.style.transition;r.style.transition="none",r.style.transform=`translateX(-${Math.max(0,e)*100}%)`,r.offsetHeight,r.style.transition=o}else r.style.transform=`translateX(-${Math.max(0,e)*100}%)`},[]);b(()=>{const e=l.current,t=e?.getAttribute("data-easel-block")||e?.closest("[data-easel-block]")?.getAttribute("data-easel-block")||X;R.current=t;const r=W.get(t);typeof r=="number"&&(G(r),p.current=r)},[]),b(()=>{const e=E();if(!e)return;const t=()=>{he(o=>Ae(o,Q(e,"data-slide-name")))};t();const r=new MutationObserver(t);return r.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-slide-name","data-slide-process","data-slide-media"]}),()=>{r.disconnect()}},[E]),b(()=>{if(!n)return;const e=t=>{const r=t.detail;if(!r||typeof r.index!="number")return;const o=l.current,m=o?.getAttribute("data-easel-block")||o?.closest("[data-easel-block]")?.getAttribute("data-easel-block")||R.current;r.id&&r.id!==m||a(r.index,!0)};return Ye(l.current,e)},[n,a]);const s=w.length,u=Math.min(Math.max(pe,0),Math.max(0,s-1)),O=Ce({shown:se,count:s}),Y=Me({shown:ie,count:s}),q=Ve({editing:n,shown:u,slides:w}),be=$e({editing:n,playing:y,controlShown:q}),k=De({count:s,editing:n}),d=i(null),v=i(null),xe=f(e=>{if(d.current=null,v.current=null,!k||e.touches.length!==1)return;const t=e.touches[0];d.current={x:t.clientX,y:t.clientY},v.current={x:t.clientX,y:t.clientY}},[k]),we=f(e=>{if(!d.current)return;if(e.touches.length!==1){d.current=null;return}const t=e.touches[0];v.current={x:t.clientX,y:t.clientY}},[]),ye=f(()=>{const e=d.current,t=v.current;if(d.current=null,v.current=null,!k||!e||!t)return;const r=Ie(t.x-e.x,t.y-e.y,p.current,s);r!==p.current&&a(r)},[k,s,a]);b(()=>{if(n||!C||j||T||s<=1)return;const t=Math.max(1,typeof S=="number"?S:6)*1e3,r=window.setTimeout(()=>a((u+1)%s),t);return()=>window.clearTimeout(r)},[n,C,S,j,T,s,u,a]),b(()=>{const e=[V.current,$.current,z.current].filter(Boolean),t=e.map(o=>K(o)),r=o=>{const m=o.target,H=m.closest("[data-hero-nav]"),F=H??m.closest("[data-idx]");if(!F)return;o.stopPropagation(),o.preventDefault();const L=H?Pe(H.dataset.heroNav,p.current,s):Number(F.dataset.idx);Number.isNaN(L)||(a(L,n),Q(E(),"data-slide-name")[L]?.click())};return e.forEach(o=>o.addEventListener("click",r,{capture:!0})),()=>{t.forEach(o=>o?.()),e.forEach(o=>o.removeEventListener("click",r,{capture:!0}))}},[s,a,E,n]);const Ee=f(e=>{if(!e)return;const t=K(e),r=o=>{o.stopPropagation(),o.preventDefault(),ve(m=>!m)};return e.addEventListener("click",r,{capture:!0}),()=>{t?.(),e.removeEventListener("click",r,{capture:!0})}},[]);return c(_e.Provider,{value:{alignment:x,textureOpacity:h,textureOn:Z,textureColor:ee,quietVideo:be,phoneUpDown:te,phoneSideways:re},children:A("div",{ref:l,className:`relative mx-[var(--sf-hero-bleed-m,calc(50%_-_50vw))] w-[var(--sf-hero-bleed-w,100vw)] ${de} max-w-[var(--sf-hero-cap,none)] overflow-hidden`,style:me,onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1),onTouchStart:xe,onTouchMove:we,onTouchEnd:ye,children:[c(_,{className:"hero-track flex h-full [&>*]:h-full [&>*]:min-w-full [&>*]:shrink-0 [&>*]:basis-full",style:{transform:`translateX(-${u*100}%)`,transition:T?"none":"transform 600ms cubic-bezier(.22,.61,.36,1)"},minEmptyHeight:400}),q&&c("div",{ref:Ee,"data-hero-video-control":y?"playing":"held",className:"sf-hero-video-control absolute left-6 z-[7]",style:{top:`calc(${Le} + 16px)`},children:A("button",{type:"button",className:je,children:[c("span",{"aria-hidden":"true",children:y?"❚❚":"▶"}),J(y?Ge:Xe)]})}),(O||Y)&&A("div",{className:"pointer-events-none absolute inset-y-0 left-[var(--sf-hero-chrome-x,var(--sf-site-gutter,40px))] right-[var(--sf-hero-chrome-x,var(--sf-site-gutter,40px))] z-[6] mx-auto max-w-[var(--sf-hero-chrome-cap,calc(var(--sf-site-width,1600px)_-_var(--sf-site-gutter,40px)*2))]",children:[O&&c(Re,{ref:V,slides:w,active:u,shape:Ne(ce),placement:ae}),Y&&c(Se,{ref:z,shape:le,placement:ue})]}),O&&c("div",{ref:$,className:"sf-hero-phone-dots absolute bottom-[80px] left-1/2 z-[6] hidden -translate-x-1/2 items-center gap-2",children:w.map((e,t)=>c("button",{type:"button","data-idx":t,"aria-label":`Go to slide ${t+1}`,className:`h-2 rounded-full transition-all motion-reduce:transition-none ${t===u?"w-5 bg-accent":"w-2 bg-white/45 hover:bg-white/70"}`},t))}),fe&&I.length>0&&c("div",{className:"sf-hero-ticker absolute inset-x-0 bottom-0 z-[5] border-t border-overlay-chrome/10 py-3.5",...n?{[Te]:""}:{},style:{background:"rgba(10,10,10,.55)"},children:c(ge,{items:I,backdrop:"dark-media"})})]})})}export{N as HERO_SLIDER_GOTO_EVENT,Ge as HERO_VIDEO_HOLD_LABEL,Xe as HERO_VIDEO_PLAY_LABEL,qe as default,Ye as subscribeSliderGoto};

package/dist/render/components/HeroSingle.js

@@ -1,11 +1 @@
-"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import{useEffect as Z,useRef as C,useState as $}from"react";import I from"./HeroPoster.js";import{HeroVideoBackdrop as ee,HeroVideoPlayer as oe}from"./HeroVideoPlay.js";import{resolveMedia as l}from"../lib/media.js";import{hasSectionHeight as re,resolveSectionHeight as z}from"../../format/lib/content/section-height.js";import{DEFAULT_OVERLAY_COLOR as te,DEFAULT_OVERLAY_POSITION as se,overlayGradient as ne}from"../../format/lib/sections/hero-overlay.js";import{ON_MEDIA_INK_STYLE as ie}from"../../format/lib/content/ink.js";import{usePreviewHeroPart as ae}from"./PreviewHeroPartContext.js";import{CANVAS_ACCENT as M}from"../../format/lib/canvas-accent.js";import{HERO_PART_ATTR as ce,heroPartId as le,readHeroPartId as de}from"../lib/document/hero-media-parts.js";import{markOverlayPortal as me}from"../../format/lib/document/overlay-portal.js";import{hidableText as pe}from"efficient-easel/draw";import{normaliseVideoPlayback as ue,normaliseVideoSource as fe,parseYouTubeId as he}from"../../format/lib/hero-video.js";import{heroPictureCount as xe,normaliseMediaLayout as ve,resolvePhoneLayout as be}from"../../format/lib/hero-media-layout.js";const D=`
-.hero-part-pick { cursor: pointer; }
-.hero-part-pick:hover {
-  outline: 2px solid color-mix(in srgb, ${M} 45%, transparent);
-  outline-offset: -2px;
-}
-.hero-part-pick[data-selected] {
-  outline: 2px solid ${M};
-  outline-offset: -2px;
-}
-`;function ge({overlay:r=100,overlayColor:o=te,overlayPosition:y=se,mediaType:u="image",mediaSrc:i,poster:f,objectPosition:d,objectPositionPhone:m,tintColor:h="#000000",tintOpacity:n=0,heightDesktop:x,heightMobile:t,boxes:a,videoSource:k,youtubeUrl:v,videoPlayback:b,mediaLayout:T,mediaLayoutPhone:E,mediaImage2:F,objectPosition2:G,objectPosition2Phone:K,tintColor2:U="#000000",tintOpacity2:B=0,editing:s=!1}){const H=re(x,t),q=H?"h-[var(--sf-hero-h-m)] min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",J=H?{"--sf-hero-h-d":z(x),"--sf-hero-h-m":z(t)}:void 0,c=u==="video",A=c?l(i):void 0,R=c?l(f):l(i)??l(f),g=c&&fe(k)==="youtube",w=c&&ue(b)==="click",V=g?he(pe(v)):null,O=c&&!g&&!w,[L,Q]=$(!1),_=!L,W=C(null),X=u==="video"?"media":"image",P=ve(T),N=be(E,P),j=!c&&xe({mediaLayout:T,mediaLayoutPhone:E})>1;return p("section",{ref:W,className:`relative mx-[var(--sf-hero-bleed-m,calc(50%_-_50vw))] w-[var(--sf-hero-bleed-w,100vw)] ${q} max-w-[var(--sf-hero-cap,none)] overflow-hidden`,style:J,children:[j?p("div",{className:`absolute inset-0 z-[1] grid ${Pe[N]} ${ye[P]}`,"data-hero-layout":P,"data-hero-layout-phone":N,children:[s&&e("style",{children:D}),p(S,{part:"image",editing:s,className:"relative overflow-hidden",children:[e(I,{posterSrc:l(i),showVideo:!1,objectPosition:d,objectPositionPhone:m}),e(Y,{color:h,opacity:n})]}),p(S,{part:"image2",editing:s,className:`relative overflow-hidden${N==="one"?" max-[719px]:hidden":""}${P==="one"?" min-[720px]:hidden":""}`,children:[e(I,{posterSrc:l(F),showVideo:!1,objectPosition:G,objectPositionPhone:K}),e(Y,{color:U,opacity:B})]})]}):p(S,{part:X,editing:s,className:"absolute inset-0 z-[1]",children:[s&&e("style",{children:D}),e(I,{videoSrc:O?A:void 0,posterSrc:R,showVideo:O,objectPosition:d,objectPositionPhone:m}),g&&e(ee,{youTubeId:V,ownPoster:!!R,background:!w,editing:s})]}),w&&e(oe,{youTubeId:V,fileSrc:g?void 0:A,playing:L,onPlay:()=>Q(!0),editing:s}),_&&!j&&n>0&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:h,opacity:Math.min(Math.max(n,0),100)/100}}),_&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:ne(o,y),opacity:Math.min(Math.max(r,0),100)/100}}),_&&a&&e("div",{className:["sf-hero-group-layer absolute inset-0 z-[3] mx-auto","max-w-[var(--sf-site-width,1600px)]","px-[var(--sf-site-gutter,40px)] pt-[140px] pb-14",s?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:ie,children:e(a,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}const Pe={one:"max-[719px]:grid-cols-1 max-[719px]:grid-rows-1",side:"max-[719px]:grid-cols-2 max-[719px]:grid-rows-1",stacked:"max-[719px]:grid-cols-1 max-[719px]:grid-rows-2"},ye={one:"min-[720px]:grid-cols-1 min-[720px]:grid-rows-1",side:"min-[720px]:grid-cols-2 min-[720px]:grid-rows-1",stacked:"min-[720px]:grid-cols-1 min-[720px]:grid-rows-2"};function Y({color:r,opacity:o}){return o>0?e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:r,opacity:Math.min(Math.max(o,0),100)/100}}):null}function S({part:r,editing:o,className:y,children:u}){const i=C(null),{selectedHeroPart:f,select:d}=ae(),[m,h]=$(null);Z(()=>{if(!o)return;const t=i.current;if(!t)return;const a=t.closest("[data-easel-block]")?.getAttribute("data-easel-block")??null;h(a);const k=me(t),v=b=>{a&&(b.stopPropagation(),b.preventDefault(),d(le(a,r)))};return t.addEventListener("click",v,{capture:!0}),()=>{k(),t.removeEventListener("click",v,{capture:!0})}},[o,r,d]);const n=de(f),x=o&&m!=null&&n?.nodeId===m&&(n.part===r||n.part==="media");return e("div",{ref:i,className:`${y}${o?" hero-part-pick":""}`,...o?{[ce]:r}:{},"data-selected":x?"":void 0,children:u})}export{ge as default};
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useRef as J,useState as Q}from"react";import x from"./HeroPoster.js";import{HeroVideoBackdrop as W,HeroVideoPlayer as X}from"./HeroVideoPlay.js";import{resolveMedia as i}from"../lib/media.js";import{hasSectionHeight as Z,resolveSectionHeight as O}from"../../format/lib/content/section-height.js";import{DEFAULT_OVERLAY_COLOR as ee,DEFAULT_OVERLAY_POSITION as oe,overlayGradient as re}from"../../format/lib/sections/hero-overlay.js";import{ON_MEDIA_INK_STYLE as se}from"../../format/lib/content/ink.js";import{HERO_PART_ATTR as ie}from"../lib/document/hero-media-parts.js";import{hidableText as te}from"efficient-easel/draw";import{normaliseVideoPlayback as ne,normaliseVideoSource as ae,parseYouTubeId as ce}from"../../format/lib/hero-video.js";import{heroPictureCount as le,normaliseMediaLayout as de,resolvePhoneLayout as me}from"../../format/lib/hero-media-layout.js";function pe({overlay:t=100,overlayColor:o=ee,overlayPosition:d=oe,mediaType:a="image",mediaSrc:m,poster:v,objectPosition:b,objectPositionPhone:y,tintColor:w="#000000",tintOpacity:p=0,heightDesktop:P,heightMobile:N,boxes:_,videoSource:A,youtubeUrl:L,videoPlayback:M,mediaLayout:T,mediaLayoutPhone:S,mediaImage2:D,objectPosition2:Y,objectPosition2Phone:$,tintColor2:C="#000000",tintOpacity2:F=0,editing:r=!1}){const k=Z(P,N),G=k?"h-[var(--sf-hero-h-m)] min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",K=k?{"--sf-hero-h-d":O(P),"--sf-hero-h-m":O(N)}:void 0,s=a==="video",H=s?i(m):void 0,V=s?i(v):i(m)??i(v),c=s&&ae(A)==="youtube",u=s&&ne(M)==="click",E=c?ce(te(L)):null,I=s&&!c&&!u,[R,U]=Q(!1),h=!R,B=J(null),q=a==="video"?"media":"image",l=de(T),f=me(S,l),j=!s&&le({mediaLayout:T,mediaLayoutPhone:S})>1;return n("section",{ref:B,className:`relative mx-[var(--sf-hero-bleed-m,calc(50%_-_50vw))] w-[var(--sf-hero-bleed-w,100vw)] ${G} max-w-[var(--sf-hero-cap,none)] overflow-hidden`,style:K,children:[j?n("div",{className:`absolute inset-0 z-[1] grid ${ue[f]} ${he[l]}`,"data-hero-layout":l,"data-hero-layout-phone":f,children:[n(g,{part:"image",editing:r,className:"relative overflow-hidden",children:[e(x,{posterSrc:i(m),showVideo:!1,objectPosition:b,objectPositionPhone:y}),e(z,{color:w,opacity:p})]}),n(g,{part:"image2",editing:r,className:`relative overflow-hidden${f==="one"?" max-[719px]:hidden":""}${l==="one"?" min-[720px]:hidden":""}`,children:[e(x,{posterSrc:i(D),showVideo:!1,objectPosition:Y,objectPositionPhone:$}),e(z,{color:C,opacity:F})]})]}):n(g,{part:q,editing:r,className:"absolute inset-0 z-[1]",children:[e(x,{videoSrc:I?H:void 0,posterSrc:V,showVideo:I,objectPosition:b,objectPositionPhone:y}),c&&e(W,{youTubeId:E,ownPoster:!!V,background:!u,editing:r})]}),u&&e(X,{youTubeId:E,fileSrc:c?void 0:H,playing:R,onPlay:()=>U(!0),editing:r}),h&&!j&&p>0&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:w,opacity:Math.min(Math.max(p,0),100)/100}}),h&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:re(o,d),opacity:Math.min(Math.max(t,0),100)/100}}),h&&_&&e("div",{className:["sf-hero-group-layer absolute inset-0 z-[3] mx-auto","max-w-[var(--sf-site-width,1600px)]","px-[var(--sf-site-gutter,40px)] pt-[140px] pb-14",r?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:se,children:e(_,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}const ue={one:"max-[719px]:grid-cols-1 max-[719px]:grid-rows-1",side:"max-[719px]:grid-cols-2 max-[719px]:grid-rows-1",stacked:"max-[719px]:grid-cols-1 max-[719px]:grid-rows-2"},he={one:"min-[720px]:grid-cols-1 min-[720px]:grid-rows-1",side:"min-[720px]:grid-cols-2 min-[720px]:grid-rows-1",stacked:"min-[720px]:grid-cols-1 min-[720px]:grid-rows-2"};function z({color:t,opacity:o}){return o>0?e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:t,opacity:Math.min(Math.max(o,0),100)/100}}):null}function g({part:t,editing:o,className:d,children:a}){return e("div",{className:d,...o?{[ie]:t}:{},children:a})}export{pe as default};

package/dist/render/components/LogoBlock.d.ts

@@ -8,4 +8,4 @@ export interface LogoBlockProps {
     align?: BlockAlign;
     color?: string | null;
 }
-export default function LogoBlock({ src, alt, href, heightPx, reverse, align, color, }: LogoBlockProps): import("react").JSX.Element;
+export default function LogoBlock(props: LogoBlockProps): import("react").JSX.Element;

package/dist/render/components/LogoBlock.js

@@ -1 +1 @@
-"use client";import{jsx as i}from"react/jsx-runtime";import{useContext as L}from"react";import{SiteLink as v}from"../lib/site-runtime.js";import I,{FOOTER_LOGO_PX as C,WORDMARK_FIT_FLOOR_PX as O}from"./Logo.js";import{media as _}from"../lib/media.js";import{BoxSurfaceContext as h}from"./BoxSurfaceContext.js";import{useBoxCellHasWidth as D}from"./BoxCellWidthContext.js";import{useInSiteHeader as N}from"./PhoneMenuTools.js";import{useSiteLogo as B}from"./SiteLogoContext.js";import{BLOCK_ALIGN_JUSTIFY as F}from"../../format/lib/content/block-align.js";function T({src:f,alt:d,href:t,heightPx:k=C,reverse:u=!0,align:s,color:p=null}){const e=B(),a=(f??"").trim(),o=a?{src:_(a),reversedSrc:null,inkIsDark:null,wordmark:d?.trim()||null}:{src:e.src,reversedSrc:e.reversedSrc,inkIsDark:e.inkIsDark,wordmark:e.wordmark},x=L(h),l=N(),S=D(),r=!l&&S,n=i(I,{variant:"footer",sizePx:k,src:o.src,reverse:u,color:p,reversedSrc:o.reversedSrc,inkIsDark:o.inkIsDark,wordmark:o.wordmark,siteName:e.siteName,fitToContainer:l,fitWordmarkToContainer:r,fitFloorPx:r?O:void 0,...x?.dark?{onLightSurface:!1}:{}}),c=r?"inline-flex max-w-full overflow-x-clip":"inline-flex",m=t?i(v,{href:t,className:c,children:n}):r?i("span",{className:c,children:n}):n;if(!s&&!r)return m;const w=["flex min-w-0",s?F[s]:"",r?"[container-type:inline-size]":""].filter(Boolean).join(" ");return i("div",{className:w,children:m})}export{T as default};
+"use client";import{jsx as r}from"react/jsx-runtime";import{useContext as g}from"react";import{SiteLink as S}from"../lib/site-runtime.js";import v,{FOOTER_LOGO_PX as h,WORDMARK_FIT_FLOOR_PX as I}from"./Logo.js";import{media as C}from"../lib/media.js";import{BoxSurfaceContext as O}from"./BoxSurfaceContext.js";import{useBoxCellHasWidth as _}from"./BoxCellWidthContext.js";import{useInSiteHeader as N}from"./PhoneMenuTools.js";import{useSiteLogo as B}from"./SiteLogoContext.js";import{useLogoWall as D}from"./LogoWallContext.js";import{LogoWallMark as H}from"./Logos.js";import{BLOCK_ALIGN_JUSTIFY as W}from"../../format/lib/content/block-align.js";function F(t){const e=D();if(!e)return r(T,{...t});const n=(t.src??"").trim();return r("div",{className:"text-center",children:r(H,{src:n||void 0,alt:t.alt,look:e.look,logoHeight:e.logoHeight,grayscale:e.grayscale})})}function T({src:t,alt:e,href:n,heightPx:k=h,reverse:u=!0,align:l,color:x=null}){const i=B(),c=(t??"").trim(),s=c?{src:C(c),reversedSrc:null,inkIsDark:null,wordmark:e?.trim()||null}:{src:i.src,reversedSrc:i.reversedSrc,inkIsDark:i.inkIsDark,wordmark:i.wordmark},p=g(O),m=N(),L=_(),o=!m&&L,a=r(v,{variant:"footer",sizePx:k,src:s.src,reverse:u,color:x,reversedSrc:s.reversedSrc,inkIsDark:s.inkIsDark,wordmark:s.wordmark,siteName:i.siteName,fitToContainer:m,fitWordmarkToContainer:o,fitFloorPx:o?I:void 0,...p?.dark?{onLightSurface:!1}:{}}),f=o?"inline-flex max-w-full overflow-x-clip":"inline-flex",d=n?r(S,{href:n,className:f,children:a}):o?r("span",{className:f,children:a}):a;if(!l&&!o)return d;const w=["flex min-w-0",l?W[l]:"",o?"[container-type:inline-size]":""].filter(Boolean).join(" ");return r("div",{className:w,children:d})}export{F as default};

package/dist/render/components/LogoWallContext.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import type { LogoLook } from "../../format/lib/sections/logo-look.js";
+export type LogoWall = {
+    look: LogoLook;
+    logoHeight?: number;
+    grayscale?: boolean;
+};
+export declare function LogoWallProvider({ value, children }: {
+    value: LogoWall;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useLogoWall(): LogoWall | null;

package/dist/render/components/LogoWallContext.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import{createContext as n,useContext as l}from"react";const o=n(null);function s({value:e,children:r}){return t(o.Provider,{value:e,children:r})}function x(){return l(o)}export{s as LogoWallProvider,x as useLogoWall};

package/dist/render/components/Logos.d.ts

@@ -1,3 +1,6 @@
+import type { SlotComponent } from "efficient-easel/blocks";
+import type { ReactNode } from "react";
+import { type LogoLook } from "../../format/lib/sections/logo-look.js";
 interface LogoItem {
     src: string;
     alt: string;
@@ -10,6 +13,18 @@ interface LogosProps {
     grayscale?: boolean;
     logoHeight?: number;
     bandPadding?: number;
+    logos?: SlotComponent;
+    look?: LogoLook;
+    omitHead?: boolean;
 }
-export default function Logos({ items, contained, heading, columns, grayscale, logoHeight, bandPadding, }: LogosProps): import("react").JSX.Element;
+export default function Logos({ items, contained, heading, columns, grayscale, logoHeight, bandPadding, logos: LogoBlocks, look, omitHead, }: LogosProps): import("react").JSX.Element;
+export declare const CARD_WORDS_CLASS = "font-mono text-[12px] uppercase tracking-[0.18em]";
+export declare function LogoWallMark({ src, alt, look, logoHeight, grayscale, mark, }: {
+    src?: string;
+    alt?: string;
+    look: LogoLook;
+    logoHeight?: number;
+    grayscale?: boolean;
+    mark?: ReactNode;
+}): import("react").JSX.Element;
 export {};

package/dist/render/components/Logos.js

@@ -1 +1 @@
-import{jsx as t,jsxs as f}from"react/jsx-runtime";import x from"./BlockFrame.js";import{renderChrome as u,renderHeadline as d}from"./goldPhrases.js";import{media as y}from"../lib/media.js";import{sizedImage as h}from"../../format/lib/sized-image.js";const c={label:"text-[length:var(--size-label,13px)]"};function g({items:l,contained:e,heading:s,columns:n,grayscale:i,logoHeight:o,bandPadding:a}){const m=n!=null?{flex:`0 0 calc((100% - ${(n-1)*3.5}rem) / ${n})`}:void 0;return f(x,{contained:e,className:a==null?"py-10":"",style:a==null?void 0:{paddingTop:`${a}px`,paddingBottom:`${a}px`},children:[s!=null&&s!==""?t("h2",{className:`mb-8 text-center font-mono ${c.label} uppercase tracking-[0.2em] text-fg-dim`,children:d(s,!1)}):null,t("div",{className:"flex flex-wrap items-center justify-center gap-x-14 gap-y-8",children:(l??[]).map((r,p)=>t("div",{className:"text-center",style:m,children:r.src?t("img",{...$(y(r.src)),alt:r.alt,className:["mx-auto w-auto opacity-60 transition-opacity hover:opacity-100",o==null?"h-7":"",i===!1?"":"grayscale"].filter(Boolean).join(" "),style:o==null?void 0:{height:`${o}px`}}):t("span",{className:`font-mono ${c.label} uppercase tracking-[0.2em] text-fg-dim`,children:u(r.alt||"Logo")})},p))})]})}function $(l){const e=h(l,{fallbackWidth:640,maxWidth:960});return e.srcSet?{src:e.src,srcSet:e.srcSet,sizes:"240px"}:{src:l}}export{g as default};
+import{jsx as a,jsxs as y}from"react/jsx-runtime";import{PaymentMark as A,paymentMarkItems as j}from"efficient-shell/icons/payment";import v from"./BlockFrame.js";import{renderChrome as z,renderGold as C,renderHeadline as E}from"./goldPhrases.js";import{LogoWallProvider as G}from"./LogoWallContext.js";import{media as h}from"../lib/media.js";import{sizedImage as g}from"../../format/lib/sized-image.js";import{stripMarkup as S}from"../../format/lib/markup.js";import{DEFAULT_LOGO_LOOK as R}from"../../format/lib/sections/logo-look.js";const $={label:"text-[length:var(--size-label,13px)]"},o="sf-logo-wall",_="sf-logo-items",L="flex flex-wrap items-center justify-center",m="plain",p={plain:{x:3.5,y:2},cards:{x:.75,y:.75}},N=t=>({columnGap:`${p[t].x}rem`,rowGap:`${p[t].y}rem`}),O=(t,e)=>`calc((100% - ${(t-1)*p[e].x}rem) / ${t})`;function M({items:t,contained:e,heading:n,columns:r,grayscale:s,logoHeight:l,bandPadding:i,logos:f,look:c=R,omitHead:d=!1}){const b=r!=null?{flex:`0 0 ${O(r,m)}`}:void 0,x=!d;return y(v,{contained:e,className:x&&i==null?"py-10":"",style:!x||i==null?void 0:{paddingTop:`${i}px`,paddingBottom:`${i}px`},children:[!d&&n!=null&&n!==""?a("h2",{className:`mb-8 text-center font-mono ${$.label} uppercase tracking-[0.2em] text-fg-dim`,children:E(n,!1)}):null,f?y(G,{value:{look:c,logoHeight:l,grayscale:s},children:[a("style",{children:`.${o}:empty{display:none}.${o}:not(:empty)~.${_}{display:none}`+(r!=null?`.${o}-c${r}>*{flex:0 0 ${O(r,c)}}`:"")}),a(f,{className:[o,r!=null?`${o}-c${r}`:"",L].filter(Boolean).join(" "),style:N(c),minEmptyHeight:80})]}):null,a("div",{className:`${_} ${L}`,style:N(m),children:(t??[]).map((u,k)=>a("div",{className:"text-center",style:b,children:a(T,{src:u.src,alt:u.alt,look:m,logoHeight:l,grayscale:s})},k))})]})}const W="font-mono text-[12px] uppercase tracking-[0.18em]";function w(t){const e=j({name:S(t)});return!e.length||e.length===1&&e[0].kind==="words"&&!e[0].glyph?null:a("span",{className:"flex items-center gap-3",children:e.map((n,r)=>a(A,{item:n,size:20,className:W},r))})}function T({src:t,alt:e,look:n,logoHeight:r,grayscale:s,mark:l}){return n==="cards"?a("div",{className:"sf-card flex h-10 items-center border border-line bg-surface px-4",children:l||(!t&&e&&w(e)?w(e):t?a("img",{...I(h(t)),alt:S(e||""),className:s===!1?"max-h-5 w-auto opacity-90":"max-h-5 w-auto opacity-90 grayscale"}):e&&a("span",{className:W,children:C(e)}))}):t?a("img",{...B(h(t)),alt:e,className:["mx-auto w-auto opacity-60 transition-opacity hover:opacity-100",r==null?"h-7":"",s===!1?"":"grayscale"].filter(Boolean).join(" "),style:r==null?void 0:{height:`${r}px`}}):a("span",{className:`font-mono ${$.label} uppercase tracking-[0.2em] text-fg-dim`,children:z(e||"Logo")})}function I(t){const e=g(t,{fallbackWidth:320,maxWidth:640});return e.srcSet?{src:e.src,srcSet:e.srcSet,sizes:"120px"}:{src:t}}function B(t){const e=g(t,{fallbackWidth:640,maxWidth:960});return e.srcSet?{src:e.src,srcSet:e.srcSet,sizes:"240px"}:{src:t}}export{W as CARD_WORDS_CLASS,T as LogoWallMark,M as default};

package/dist/render/components/PaymentBadges.d.ts

@@ -1,6 +1,7 @@
 export interface PaymentBadge {
     label?: string;
     src?: string;
+    kind?: string;
 }
 interface PaymentBadgesProps {
     heading?: string;
@@ -9,6 +10,7 @@ interface PaymentBadgesProps {
         text?: string;
     }[];
     contained: boolean;
+    sourced?: boolean;
 }
-export default function PaymentBadges({ heading, badges, assurances, contained }: PaymentBadgesProps): import("react").JSX.Element;
+export default function PaymentBadges({ heading, badges, assurances, contained, sourced }: PaymentBadgesProps): import("react").JSX.Element;
 export {};

package/dist/render/components/PaymentBadges.js

@@ -1 +1 @@
-import{jsx as r,jsxs as i}from"react/jsx-runtime";import n from"./BlockFrame.js";import{media as o}from"../lib/media.js";import{sizedImage as p}from"../../format/lib/sized-image.js";import{stripMarkup as d}from"../../format/lib/markup.js";import{renderGold as c}from"./goldPhrases.js";function x({heading:a,badges:t,assurances:l,contained:m}){return r(n,{contained:m,className:"py-6",children:i("div",{className:"flex flex-col items-center gap-5 border-y border-line py-8 text-center",children:[a&&r("span",{className:"font-mono text-[13px] uppercase tracking-[0.3em] opacity-70",children:c(a)}),t.length>0&&r("ul",{className:"flex flex-wrap items-center justify-center gap-3",children:t.map((e,s)=>r("li",{className:"sf-card flex h-10 items-center border border-line bg-surface px-4",children:e.src?r("img",{...f(o(e.src)),alt:d(e.label||""),className:"max-h-5 w-auto opacity-90"}):e.label&&r("span",{className:"font-mono text-[12px] uppercase tracking-[0.18em]",children:c(e.label)})},s))}),l.length>0&&r("ul",{className:"flex flex-wrap items-center justify-center gap-x-6 gap-y-1",children:l.map((e,s)=>e.text&&i("li",{className:"flex items-center gap-2 text-[13px] opacity-60",children:[r("span",{className:"h-1 w-1 rounded-full bg-accent","aria-hidden":!0}),c(e.text)]},s))})]})})}function f(a){const t=p(a,{fallbackWidth:320,maxWidth:640});return t.srcSet?{src:t.src,srcSet:t.srcSet,sizes:"120px"}:{src:a}}export{x as default};
+import{jsx as a,jsxs as n}from"react/jsx-runtime";import{PaymentMark as d,paymentMarks as f}from"efficient-shell/icons/payment";import x from"./BlockFrame.js";import{CARD_WORDS_CLASS as y,LogoWallMark as c}from"./Logos.js";import{renderGold as i}from"./goldPhrases.js";function g({heading:r,badges:t,assurances:s,contained:o,sourced:p=!1}){const m=p?f(t.map(e=>({name:e.label,kind:e.kind}))).map(e=>({item:e})):t.map(e=>({src:e.src,label:e.label||""}));return a(x,{contained:o,className:"py-6",children:n("div",{className:"flex flex-col items-center gap-5 border-y border-line py-8 text-center",children:[r&&a("span",{className:"font-mono text-[13px] uppercase tracking-[0.3em] opacity-70",children:i(r)}),m.length>0&&a("ul",{className:"flex flex-wrap items-center justify-center gap-3",children:m.map((e,l)=>a("li",{children:"item"in e?a(c,{look:"cards",alt:e.item.label,mark:a(d,{item:e.item,size:20,className:y})}):a(c,{src:e.src,alt:e.label,look:"cards",grayscale:!1})},l))}),s.length>0&&a("ul",{className:"flex flex-wrap items-center justify-center gap-x-6 gap-y-1",children:s.map((e,l)=>e.text&&n("li",{className:"flex items-center gap-2 text-[13px] opacity-60",children:[a("span",{className:"h-1 w-1 rounded-full bg-accent","aria-hidden":!0}),i(e.text)]},l))})]})})}export{g as default};

package/dist/render/components/PreviewHeaderContext.d.ts

@@ -39,7 +39,6 @@ type Ctx = {
     textStyles: unknown;
     setTextStyles: (v: unknown) => void;
     wordStyles: Record<WordStyleName, ResolvedWordStyle> | null;
-    cardThemeIndex: number | null;
     siteWidth: number | null;
     setSiteWidth: (v: number | null) => void;
     siteGutter: number | null;
@@ -63,7 +62,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, textStyles, onTextStylesChange, wordStyles, cardThemeIndex, heroBackgroundFollowsWidth, onHeroBackgroundFollowsWidthChange, sectionBackgroundWidth, onSectionBackgroundWidthChange, sectionContentWidth, onSectionContentWidthChange, photographyGrayscale, onPhotographyGrayscaleChange, shareButtonOnPosts, onShareButtonOnPostsChange, 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, wordStyles, heroBackgroundFollowsWidth, onHeroBackgroundFollowsWidthChange, sectionBackgroundWidth, onSectionBackgroundWidthChange, sectionContentWidth, onSectionContentWidthChange, photographyGrayscale, onPhotographyGrayscaleChange, shareButtonOnPosts, onShareButtonOnPostsChange, themeFromDocument, }: {
     children: ReactNode;
     websiteName?: string | null;
     templateChrome?: boolean;
@@ -100,7 +99,6 @@ export declare function PreviewHeaderProvider({ children, websiteName, templateC
     textStyles?: unknown;
     onTextStylesChange?: (v: unknown) => void;
     wordStyles?: Record<WordStyleName, ResolvedWordStyle> | null;
-    cardThemeIndex?: number | null;
     headingTypography?: ResolvedHeadingTypography;
     onHeadingTypographyChange?: (v: ResolvedHeadingTypography) => void;
     heroBackgroundFollowsWidth?: boolean | null;

package/dist/render/components/PreviewHeaderContext.js

@@ -1 +1 @@
-"use client";import{jsx as W}from"react/jsx-runtime";import{createContext as zt,useCallback as e,useContext as bt,useMemo as Vt,useState as O}from"react";import{EditorSiteLogoContext as Zt}from"./SiteLogoContext.js";import{useSelectHandler as qt}from"efficient-easel/draw/client";import{IDENTITY_CARD_GAP as g,DEFAULT_HEADING_COMPRESSION as B,DEFAULT_HEADING_TYPOGRAPHY as M,DEFAULT_SIZES as R,DEFAULT_SWITCH_SHOWN as N,DEFAULT_THEME_MODE as Y,DEFAULT_THEME_VALUE as j}from"../../format/lib/theme.js";import{DEFAULT_FONTS as z}from"../../format/lib/fonts.js";const b=zt({settings:null,setSettings:()=>{},primeSettings:()=>{},websiteName:null,templateChrome:!1,templateName:null,chromePlaceholder:!1,themeMode:Y,setThemeMode:()=>{},themeSwitchShown:N,setThemeSwitchShown:()=>{},theme:j,setTheme:()=>{},fonts:z,setFonts:()=>{},sizes:R,setSizes:()=>{},cornerRadiusPx:null,setCornerRadiusPx:()=>{},cardShadow:null,setCardShadow:()=>{},shadowColor:null,setShadowColor:()=>{},cardGap:g,setCardGap:()=>{},hoverEffect:null,setHoverEffect:()=>{},headingCompression:B,setHeadingCompression:()=>{},siteWidth:null,setSiteWidth:()=>{},siteGutter:null,blockGap:null,setSiteGutter:()=>{},setBlockGap:()=>{},headingTypography:M,setHeadingTypography:()=>{},textStyles:null,setTextStyles:()=>{},wordStyles:null,cardThemeIndex:null,heroBackgroundFollowsWidth:null,setHeroBackgroundFollowsWidth:()=>{},sectionBackgroundWidth:null,setSectionBackgroundWidth:()=>{},sectionContentWidth:null,setSectionContentWidth:()=>{},photographyGrayscale:null,setPhotographyGrayscale:()=>{},shareButtonOnPosts:null,setShareButtonOnPosts:()=>{},themeFromDocument:!1,selected:!1,setSelected:()=>{},select:()=>{},setSelectHandler:()=>{}});function te({children:V,websiteName:o=null,templateChrome:l=!1,templateName:n=null,chromePlaceholder:r=!1,themeMode:Z=Y,onThemeModeChange:c,themeSwitchShown:q=N,onThemeSwitchShownChange:u,theme:J=j,onThemeChange:i,fonts:K=z,onFontsChange:d,sizes:Q=R,onSizesChange:S,cornerRadiusPx:X=null,onCornerRadiusPxChange:a,cardShadow:$=null,onCardShadowChange:p,shadowColor:C=null,onShadowColorChange:T,cardGap:tt=g,onCardGapChange:E,hoverEffect:et=null,onHoverEffectChange:f,headingCompression:st=B,onHeadingCompressionChange:m,siteWidth:lt=null,onSiteWidthChange:H,siteGutter:ot=null,blockGap:nt=null,onSiteGutterChange:h,onBlockGapChange:x,headingTypography:rt=M,onHeadingTypographyChange:_,textStyles:ct=null,onTextStylesChange:w,wordStyles:ut=null,cardThemeIndex:it=null,heroBackgroundFollowsWidth:dt=null,onHeroBackgroundFollowsWidthChange:D,sectionBackgroundWidth:St=null,onSectionBackgroundWidthChange:P,sectionContentWidth:at=null,onSectionContentWidthChange:A,photographyGrayscale:pt=null,onPhotographyGrayscaleChange:I,shareButtonOnPosts:Tt=null,onShareButtonOnPostsChange:k,themeFromDocument:v=!1}){const[s,G]=O(null),Et=e(t=>G(jt=>jt??t),[]),[ft,mt]=O(!1),Ht=e(t=>c?.(t),[c]),ht=e(t=>u?.(t),[u]),xt=e(t=>i?.(t),[i]),_t=e(t=>d?.(t),[d]),wt=e(t=>S?.(t),[S]),Dt=e(t=>H?.(t),[H]),Pt=e(t=>h?.(t),[h]),At=e(t=>x?.(t),[x]),It=e(t=>D?.(t),[D]),kt=e(t=>P?.(t),[P]),vt=e(t=>A?.(t),[A]),Gt=e(t=>I?.(t),[I]),yt=e(t=>k?.(t),[k]),Ft=e(t=>a?.(t),[a]),Lt=e(t=>p?.(t),[p]),Ut=e(t=>T?.(t),[T]),Wt=e(t=>E?.(t),[E]),Ot=e(t=>f?.(t),[f]),gt=e(t=>m?.(t),[m]),Bt=e(t=>_?.(t),[_]),Mt=e(t=>w?.(t),[w]),{select:Rt,setSelectHandler:Nt}=qt(),y=s?.logoUrl,F=s?.logoReversed,L=s?.logoInkIsDark,U=s!==null,Yt=Vt(()=>({logo:U?{logoUrl:y,logoReversed:F,logoInkIsDark:L}:null,placeholder:l||r,wordmark:l?n:o}),[U,y,F,L,l,r,n,o]);return W(Zt.Provider,{value:Yt,children:W(b.Provider,{value:{settings:s,setSettings:G,primeSettings:Et,websiteName:o,templateChrome:l,templateName:n,chromePlaceholder:r,themeMode:Z,setThemeMode:Ht,themeSwitchShown:q,setThemeSwitchShown:ht,theme:J,setTheme:xt,fonts:K,setFonts:_t,sizes:Q,setSizes:wt,cornerRadiusPx:X,setCornerRadiusPx:Ft,cardShadow:$,setCardShadow:Lt,shadowColor:C,setShadowColor:Ut,cardGap:tt,setCardGap:Wt,hoverEffect:et,setHoverEffect:Ot,headingCompression:st,setHeadingCompression:gt,siteWidth:lt,setSiteWidth:Dt,siteGutter:ot,blockGap:nt,setSiteGutter:Pt,setBlockGap:At,headingTypography:rt,setHeadingTypography:Bt,textStyles:ct,setTextStyles:Mt,wordStyles:ut,cardThemeIndex:v?null:it,heroBackgroundFollowsWidth:dt,setHeroBackgroundFollowsWidth:It,sectionBackgroundWidth:St,setSectionBackgroundWidth:kt,sectionContentWidth:at,setSectionContentWidth:vt,photographyGrayscale:pt,setPhotographyGrayscale:Gt,shareButtonOnPosts:Tt,setShareButtonOnPosts:yt,themeFromDocument:v,selected:ft,setSelected:mt,select:Rt,setSelectHandler:Nt},children:V})})}const ee=()=>bt(b);export{b as PreviewHeaderContext,te as PreviewHeaderProvider,ee as usePreviewHeader};
+"use client";import{jsx as U}from"react/jsx-runtime";import{createContext as jt,useCallback as e,useContext as zt,useMemo as bt,useState as W}from"react";import{EditorSiteLogoContext as Vt}from"./SiteLogoContext.js";import{useSelectHandler as Zt}from"efficient-easel/draw/client";import{IDENTITY_CARD_GAP as O,DEFAULT_HEADING_COMPRESSION as g,DEFAULT_HEADING_TYPOGRAPHY as B,DEFAULT_SIZES as M,DEFAULT_SWITCH_SHOWN as R,DEFAULT_THEME_MODE as N,DEFAULT_THEME_VALUE as Y}from"../../format/lib/theme.js";import{DEFAULT_FONTS as j}from"../../format/lib/fonts.js";const z=jt({settings:null,setSettings:()=>{},primeSettings:()=>{},websiteName:null,templateChrome:!1,templateName:null,chromePlaceholder:!1,themeMode:N,setThemeMode:()=>{},themeSwitchShown:R,setThemeSwitchShown:()=>{},theme:Y,setTheme:()=>{},fonts:j,setFonts:()=>{},sizes:M,setSizes:()=>{},cornerRadiusPx:null,setCornerRadiusPx:()=>{},cardShadow:null,setCardShadow:()=>{},shadowColor:null,setShadowColor:()=>{},cardGap:O,setCardGap:()=>{},hoverEffect:null,setHoverEffect:()=>{},headingCompression:g,setHeadingCompression:()=>{},siteWidth:null,setSiteWidth:()=>{},siteGutter:null,blockGap:null,setSiteGutter:()=>{},setBlockGap:()=>{},headingTypography:B,setHeadingTypography:()=>{},textStyles:null,setTextStyles:()=>{},wordStyles:null,heroBackgroundFollowsWidth:null,setHeroBackgroundFollowsWidth:()=>{},sectionBackgroundWidth:null,setSectionBackgroundWidth:()=>{},sectionContentWidth:null,setSectionContentWidth:()=>{},photographyGrayscale:null,setPhotographyGrayscale:()=>{},shareButtonOnPosts:null,setShareButtonOnPosts:()=>{},themeFromDocument:!1,selected:!1,setSelected:()=>{},select:()=>{},setSelectHandler:()=>{}});function Ct({children:b,websiteName:o=null,templateChrome:l=!1,templateName:n=null,chromePlaceholder:r=!1,themeMode:V=N,onThemeModeChange:c,themeSwitchShown:Z=R,onThemeSwitchShownChange:u,theme:q=Y,onThemeChange:i,fonts:J=j,onFontsChange:d,sizes:K=M,onSizesChange:S,cornerRadiusPx:Q=null,onCornerRadiusPxChange:a,cardShadow:X=null,onCardShadowChange:p,shadowColor:$=null,onShadowColorChange:E,cardGap:C=O,onCardGapChange:f,hoverEffect:tt=null,onHoverEffectChange:T,headingCompression:et=g,onHeadingCompressionChange:m,siteWidth:st=null,onSiteWidthChange:H,siteGutter:lt=null,blockGap:ot=null,onSiteGutterChange:D,onBlockGapChange:_,headingTypography:nt=B,onHeadingTypographyChange:h,textStyles:rt=null,onTextStylesChange:w,wordStyles:ct=null,heroBackgroundFollowsWidth:ut=null,onHeroBackgroundFollowsWidthChange:P,sectionBackgroundWidth:it=null,onSectionBackgroundWidthChange:x,sectionContentWidth:dt=null,onSectionContentWidthChange:A,photographyGrayscale:St=null,onPhotographyGrayscaleChange:k,shareButtonOnPosts:at=null,onShareButtonOnPostsChange:v,themeFromDocument:pt=!1}){const[s,F]=W(null),Et=e(t=>F(Yt=>Yt??t),[]),[ft,Tt]=W(!1),mt=e(t=>c?.(t),[c]),Ht=e(t=>u?.(t),[u]),Dt=e(t=>i?.(t),[i]),_t=e(t=>d?.(t),[d]),ht=e(t=>S?.(t),[S]),wt=e(t=>H?.(t),[H]),Pt=e(t=>D?.(t),[D]),xt=e(t=>_?.(t),[_]),At=e(t=>P?.(t),[P]),kt=e(t=>x?.(t),[x]),vt=e(t=>A?.(t),[A]),Ft=e(t=>k?.(t),[k]),Gt=e(t=>v?.(t),[v]),yt=e(t=>a?.(t),[a]),It=e(t=>p?.(t),[p]),Lt=e(t=>E?.(t),[E]),Ut=e(t=>f?.(t),[f]),Wt=e(t=>T?.(t),[T]),Ot=e(t=>m?.(t),[m]),gt=e(t=>h?.(t),[h]),Bt=e(t=>w?.(t),[w]),{select:Mt,setSelectHandler:Rt}=Zt(),G=s?.logoUrl,y=s?.logoReversed,I=s?.logoInkIsDark,L=s!==null,Nt=bt(()=>({logo:L?{logoUrl:G,logoReversed:y,logoInkIsDark:I}:null,placeholder:l||r,wordmark:l?n:o}),[L,G,y,I,l,r,n,o]);return U(Vt.Provider,{value:Nt,children:U(z.Provider,{value:{settings:s,setSettings:F,primeSettings:Et,websiteName:o,templateChrome:l,templateName:n,chromePlaceholder:r,themeMode:V,setThemeMode:mt,themeSwitchShown:Z,setThemeSwitchShown:Ht,theme:q,setTheme:Dt,fonts:J,setFonts:_t,sizes:K,setSizes:ht,cornerRadiusPx:Q,setCornerRadiusPx:yt,cardShadow:X,setCardShadow:It,shadowColor:$,setShadowColor:Lt,cardGap:C,setCardGap:Ut,hoverEffect:tt,setHoverEffect:Wt,headingCompression:et,setHeadingCompression:Ot,siteWidth:st,setSiteWidth:wt,siteGutter:lt,blockGap:ot,setSiteGutter:Pt,setBlockGap:xt,headingTypography:nt,setHeadingTypography:gt,textStyles:rt,setTextStyles:Bt,wordStyles:ct,heroBackgroundFollowsWidth:ut,setHeroBackgroundFollowsWidth:At,sectionBackgroundWidth:it,setSectionBackgroundWidth:kt,sectionContentWidth:dt,setSectionContentWidth:vt,photographyGrayscale:St,setPhotographyGrayscale:Ft,shareButtonOnPosts:at,setShareButtonOnPosts:Gt,themeFromDocument:pt,selected:ft,setSelected:Tt,select:Mt,setSelectHandler:Rt},children:b})})}const te=()=>zt(z);export{z as PreviewHeaderContext,Ct as PreviewHeaderProvider,te as usePreviewHeader};

package/dist/render/components/PreviewTickerContext.d.ts

@@ -2,3 +2,6 @@ export declare const TICKER_PART_LABEL = "Scrolling Bar";
 export declare const PreviewTickerProvider: ({ children }: {
     children: import("react").ReactNode;
 }) => import("react").JSX.Element, usePreviewTicker: () => import("efficient-easel/draw/client").PreviewIdSelection<"selectedHeroId">;
+export declare const TICKER_PART_ATTR = "data-sf-hero-ticker";
+export declare function tickerPartId(heroId: string): string;
+export declare function readTickerPartId(id: string | null | undefined): string | null;

package/dist/render/components/PreviewTickerContext.js

@@ -1 +1 @@
-"use client";import{createPreviewSelectionContext as e}from"efficient-easel/draw/client";const o="Scrolling Bar",{Provider:i,useSelection:t}=e("selectedHeroId");export{i as PreviewTickerProvider,o as TICKER_PART_LABEL,t as usePreviewTicker};
+"use client";import{createPreviewSelectionContext as r}from"efficient-easel/draw/client";const c="Scrolling Bar",{Provider:i,useSelection:n}=r("selectedHeroId"),l="data-sf-hero-ticker";function s(e){return`${e}::ticker`}function u(e){return!e||!e.endsWith("::ticker")?null:e.slice(0,-8)||null}export{i as PreviewTickerProvider,l as TICKER_PART_ATTR,c as TICKER_PART_LABEL,u as readTickerPartId,s as tickerPartId,n as usePreviewTicker};

package/dist/render/components/Reel.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as c,Fragment as s}from"react/jsx-runtime";import{normaliseReelShape as u,reelRailClass as h,reelSurfaceRailClass as p}from"../../format/lib/reel.js";function g({slides:a,active:r,shape:o,placement:e,ref:n,tone:i="media",label:d}){const l=u(o),m=i==="surface"?{"--overlay-fg":"var(--fg)","--overlay-chrome":"var(--fg)","--overlay-scrim":"var(--site-surface-2)"}:void 0;return c("aside",{ref:n,"aria-label":d??"Featured slides",className:i==="surface"?p(l):h(l,e),style:{color:"var(--overlay-fg)",...m},children:[l==="cards"&&t(b,{slides:a,active:r}),l==="dots"&&t(x,{count:a.length,active:r}),l==="numbers"&&t(f,{count:a.length,active:r}),l==="bar"&&t(y,{count:a.length,active:r}),l==="squares"&&t(v,{count:a.length,active:r}),l==="tabs"&&t(N,{slides:a,active:r})]})}function b({slides:a,active:r}){return c(s,{children:[t("span",{className:"mb-1 font-mono text-[length:var(--size-label,10px)] uppercase tracking-[0.28em] text-overlay-chrome/55",children:"Reel · pick a slide"}),a.map((o,e)=>{const n=e===r;return c("button",{type:"button","data-idx":e,"aria-pressed":n,"aria-label":`Go to ${o.name||`slide ${e+1}`}`,className:["group flex w-[170px] cursor-pointer flex-col items-start gap-0.5 border bg-overlay-scrim/55 px-3 py-2.5 text-left transition-all motion-reduce:transition-none max-[1100px]:w-[140px]",n?"border-accent bg-overlay-scrim/70":"border-overlay-chrome/15 hover:border-overlay-chrome/45 hover:bg-overlay-scrim/70"].join(" "),children:[t("span",{className:["font-display text-[length:var(--size-body,13px)] font-medium uppercase leading-tight tracking-[-0.01em]",n?"text-accent":"text-overlay-fg"].join(" "),children:o.name||`Slide ${e+1}`}),t("span",{className:"font-mono text-[length:var(--size-label,9px)] uppercase tracking-[0.2em] text-overlay-chrome/55",children:n?"▶ Now playing":o.process||" "})]},e)})]})}function x({count:a,active:r}){return t(s,{children:Array.from({length:a},(o,e)=>t("button",{type:"button","data-idx":e,"aria-pressed":e===r,"aria-label":`Go to slide ${e+1}`,className:`h-2 cursor-pointer rounded-full transition-all motion-reduce:transition-none ${e===r?"w-5 bg-accent":"w-2 bg-overlay-chrome/45 hover:bg-overlay-chrome/70"}`},e))})}function f({count:a,active:r}){return t(s,{children:Array.from({length:a},(o,e)=>t("button",{type:"button","data-idx":e,"aria-pressed":e===r,"aria-label":`Go to slide ${e+1}`,className:`cursor-pointer font-mono text-[length:var(--size-label,11px)] leading-none tracking-[0.06em] transition-colors ${e===r?"text-overlay-fg":"text-overlay-chrome/45 hover:text-overlay-chrome/80"}`,children:String(e+1).padStart(2,"0")},e))})}function v({count:a,active:r}){return t(s,{children:Array.from({length:a},(o,e)=>t("button",{type:"button","data-idx":e,"aria-pressed":e===r,"aria-label":`Go to slide ${e+1}`,className:`grid h-8 w-8 cursor-pointer place-items-center border border-overlay-chrome/25 text-[length:var(--size-label,14px)] font-bold leading-none transition-colors motion-reduce:transition-none ${e===r?"bg-accent text-[color:var(--accent-ink)]":"bg-overlay-scrim/45 text-overlay-chrome/75 hover:text-overlay-chrome"}`,children:e+1},e))})}function y({count:a,active:r}){return t(s,{children:Array.from({length:a},(o,e)=>t("button",{type:"button","data-idx":e,"aria-pressed":e===r,"aria-label":`Go to slide ${e+1}`,className:`h-full flex-1 cursor-pointer transition-colors ${e<=r?"bg-overlay-fg":"bg-overlay-chrome/25"}`},e))})}function N({slides:a,active:r}){return t(s,{children:a.map((o,e)=>{const n=e===r;return t("button",{type:"button","data-idx":e,"aria-pressed":n,className:["flex min-w-[140px] flex-1 cursor-pointer items-end px-6 py-7 text-left transition-colors",e>0?"border-l border-overlay-chrome/15":"",n?"bg-overlay-scrim/70":"hover:bg-overlay-scrim/40"].join(" "),children:t("span",{className:["font-heading3 text-[length:var(--size-headingSmall,24px)] font-medium uppercase leading-tight tracking-[-0.02em]",n?"text-overlay-fg":"text-overlay-chrome/55"].join(" "),children:o.name})},e)})})}export{g as default};
+"use client";import{jsx as t,jsxs as c,Fragment as s}from"react/jsx-runtime";import{normaliseReelShape as x,reelRailClass as g,reelSurfaceRailClass as u}from"../../format/lib/reel.js";function h({slides:a,active:r,shape:o,placement:e,ref:n,tone:i="media",label:m}){const l=x(o),p=i==="surface"?{"--overlay-fg":"var(--fg)","--overlay-chrome":"var(--fg)","--overlay-scrim":"var(--site-surface-2)"}:void 0;return c("aside",{ref:n,"aria-label":m??"Featured slides",className:i==="surface"?u(l):g(l,e),style:{color:"var(--overlay-fg)",...p},children:[l==="cards"&&t(b,{slides:a,active:r}),l==="dots"&&t(f,{count:a.length,active:r}),l==="numbers"&&t(v,{count:a.length,active:r}),l==="bar"&&t(N,{count:a.length,active:r}),l==="squares"&&t(y,{count:a.length,active:r}),l==="tabs"&&t($,{slides:a,active:r}),l==="largeTabs"&&t(k,{slides:a,active:r})]})}function b({slides:a,active:r}){return c(s,{children:[t("span",{className:"mb-1 font-mono text-[length:var(--size-label,10px)] uppercase tracking-[0.28em] text-overlay-chrome/55",children:"Reel · pick a slide"}),a.map((o,e)=>{const n=e===r;return c("button",{type:"button","data-idx":e,"aria-pressed":n,"aria-label":`Go to ${o.name||`slide ${e+1}`}`,className:["group flex w-[170px] cursor-pointer flex-col items-start gap-0.5 border bg-overlay-scrim/55 px-3 py-2.5 text-left transition-all motion-reduce:transition-none max-[1100px]:w-[140px]",n?"border-accent bg-overlay-scrim/70":"border-overlay-chrome/15 hover:border-overlay-chrome/45 hover:bg-overlay-scrim/70"].join(" "),children:[t("span",{className:["font-display text-[length:var(--size-body,13px)] font-medium uppercase leading-tight tracking-[-0.01em]",n?"text-accent":"text-overlay-fg"].join(" "),children:o.name||`Slide ${e+1}`}),t("span",{className:"font-mono text-[length:var(--size-label,9px)] uppercase tracking-[0.2em] text-overlay-chrome/55",children:n?"▶ Now playing":o.process||" "})]},e)})]})}function f({count:a,active:r}){return t(s,{children:Array.from({length:a},(o,e)=>t("button",{type:"button","data-idx":e,"aria-pressed":e===r,"aria-label":`Go to slide ${e+1}`,className:`h-2 cursor-pointer rounded-full transition-all motion-reduce:transition-none ${e===r?"w-5 bg-accent":"w-2 bg-overlay-chrome/45 hover:bg-overlay-chrome/70"}`},e))})}function v({count:a,active:r}){return t(s,{children:Array.from({length:a},(o,e)=>t("button",{type:"button","data-idx":e,"aria-pressed":e===r,"aria-label":`Go to slide ${e+1}`,className:`cursor-pointer font-mono text-[length:var(--size-label,11px)] leading-none tracking-[0.06em] transition-colors ${e===r?"text-overlay-fg":"text-overlay-chrome/45 hover:text-overlay-chrome/80"}`,children:String(e+1).padStart(2,"0")},e))})}function y({count:a,active:r}){return t(s,{children:Array.from({length:a},(o,e)=>t("button",{type:"button","data-idx":e,"aria-pressed":e===r,"aria-label":`Go to slide ${e+1}`,className:`grid h-8 w-8 cursor-pointer place-items-center border border-overlay-chrome/25 text-[length:var(--size-label,14px)] font-bold leading-none transition-colors motion-reduce:transition-none ${e===r?"bg-accent text-[color:var(--accent-ink)]":"bg-overlay-scrim/45 text-overlay-chrome/75 hover:text-overlay-chrome"}`,children:e+1},e))})}function N({count:a,active:r}){return t(s,{children:Array.from({length:a},(o,e)=>t("button",{type:"button","data-idx":e,"aria-pressed":e===r,"aria-label":`Go to slide ${e+1}`,className:`h-full flex-1 cursor-pointer transition-colors ${e<=r?"bg-overlay-fg":"bg-overlay-chrome/25"}`},e))})}function $({slides:a,active:r}){return t(s,{children:a.map((o,e)=>{const n=e===r;return t("button",{type:"button","data-idx":e,"aria-pressed":n,className:["flex min-w-[140px] flex-1 cursor-pointer items-end px-6 py-7 text-left transition-colors",e>0?"border-l border-overlay-chrome/15":"",n?"bg-overlay-scrim/70":"hover:bg-overlay-scrim/40"].join(" "),children:t("span",{className:["font-heading3 text-[length:var(--size-headingSmall,24px)] font-medium uppercase leading-tight tracking-[-0.02em]",n?"text-overlay-fg":"text-overlay-chrome/55"].join(" "),children:o.name})},e)})})}const d={label:"text-[length:var(--size-label,13px)]",labelUpTo720:"max-[720px]:text-[length:var(--size-label,11px)]",nameUpTo720:"max-[720px]:text-[length:var(--size-body,15px)]"};function k({slides:a,active:r}){return t(s,{children:a.map((o,e)=>{const n=e===r,i=o.name.trim().split(/\s+/),m=i.slice(0,-1).join(" "),l=i.slice(-1)[0]??"";return c("button",{type:"button","data-idx":e,"aria-pressed":n,className:["group relative grid flex-1 cursor-pointer grid-cols-[auto_1fr] items-end gap-5 px-6 py-8 text-left transition-colors",e<a.length-1?"border-r border-line":"","max-[720px]:grid-cols-[auto_1fr] max-[720px]:items-center max-[720px]:gap-2 max-[720px]:px-3 max-[720px]:py-3",n?"bg-surface":"hover:bg-fg/[0.04]"].join(" "),children:[t("span",{className:[`pb-2 font-mono ${d.label} tracking-[0.3em] max-[720px]:pb-0 ${d.labelUpTo720} max-[720px]:tracking-[0.24em]`,n?"text-accent":"text-fg-dim group-hover:text-accent"].join(" "),children:String.fromCharCode(65+e%26)}),c("span",{className:`font-heading2 text-[length:min(var(--size-headingMedium,clamp(28px,3.6vw,48px)),var(--sf-heading-max,9999px))] font-medium uppercase leading-none tracking-[-0.02em] ${d.nameUpTo720}`,children:[m?c(s,{children:[m," "]}):null,t("em",{className:"font-normal italic text-accent",children:l})]}),n&&t("span",{className:"pointer-events-none absolute inset-x-0 -bottom-px h-0.5 bg-accent"})]},e)})})}export{h as default};

package/dist/render/components/SiteGutterFrame.d.ts

@@ -1,9 +1,9 @@
 import { type CSSProperties, type ReactNode } from "react";
-import { type PadValues } from "../../format/lib/content/section-padding.js";
+import { type PadValues } from "../lib/content/section-padding.js";
 export declare function SplitBandAndColumn({ children }: {
     children?: ReactNode;
 }): import("react").JSX.Element;
-export default function SiteGutterFrame({ contained, framedClass, fillClass, columnClass, style, tabLabel, pad, border, children, }: {
+export default function SiteGutterFrame({ contained, framedClass, fillClass, columnClass, style, tabLabel, pad, border, outerAttrs, children, }: {
     contained: boolean;
     framedClass: string;
     fillClass: string;
@@ -15,5 +15,6 @@ export default function SiteGutterFrame({ contained, framedClass, fillClass, col
         frame: number;
     };
     border?: CSSProperties;
+    outerAttrs?: Record<string, string>;
     children?: ReactNode;
 }): import("react").JSX.Element;

package/dist/render/components/SiteGutterFrame.js

@@ -1 +1 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import{createContext as p,useContext as C}from"react";import{rootPadAttrs as E,wrapperPadAttrs as O}from"../../format/lib/content/section-padding.js";import{SECTION_BORDER_CLASS as P,SECTION_BORDER_SELF_CLASS as I}from"../../format/lib/content/borders.js";import{drawsSiteGutter as j}from"../../format/lib/content/site-gutter.js";const N=p(!1),u=p(!1);function g({children:o}){return t(u.Provider,{value:!0,children:o})}function w({contained:o,framedClass:h,fillClass:x,columnClass:y,style:d,tabLabel:R,pad:e,border:n,children:m}){const _=C(N),f=C(u),l=j(o,_),s=l&&!f,r=e&&!s?E(e.values,e.frame):null,a=n&&!s?n:null,A=[s?h:x,r?.className,a?I:null].filter(Boolean).join(" "),B=r||a?{...d,...r?.style,...a}:d,i=l?t(N.Provider,{value:!0,children:m}):m,v=t("div",{className:A,style:B,"data-tab-label":R,children:f?t(u.Provider,{value:!1,children:l?t("div",{className:y,children:i}):i}):i}),c=e&&s?O(e.values):null,S=c?t("div",{className:c.className,style:c.style,children:v}):v;return n&&s?t("div",{className:P,style:{display:"contents",...n},children:S}):S}export{g as SplitBandAndColumn,w as default};
+"use client";import{jsx as t}from"react/jsx-runtime";import{createContext as h,useContext as N}from"react";import{rootPadAttrs as j,wrapperPadAttrs as I}from"../lib/content/section-padding.js";import{SECTION_BORDER_CLASS as w,SECTION_BORDER_SELF_CLASS as A}from"../../format/lib/content/borders.js";import{drawsSiteGutter as G}from"../../format/lib/content/site-gutter.js";const y=h(!1),d=h(!1);function b({children:o}){return t(d.Provider,{value:!0,children:o})}function L({contained:o,framedClass:O,fillClass:x,columnClass:R,style:m,tabLabel:_,pad:e,border:s,outerAttrs:r,children:f}){const B=N(y),v=N(d),a=G(o,B),n=a&&!v,i=e&&!n?j(e.values,e.frame):null,c=s&&!n?s:null,E=[n?O:x,i?.className,c?A:null].filter(Boolean).join(" "),P=i||c?{...m,...i?.style,...c}:m,u=a?t(y.Provider,{value:!0,children:f}):f,l=e&&n?I(e.values):null,S=r&&Object.keys(r).length>0?r:null,p=t("div",{...l?null:S,className:E,style:P,"data-tab-label":_,children:v?t(d.Provider,{value:!1,children:a?t("div",{className:R,children:u}):u}):u}),C=l?t("div",{...S,className:l.className,style:l.style,children:p}):p;return s&&n?t("div",{className:w,style:{display:"contents",...s},children:C}):C}export{b as SplitBandAndColumn,L as default};

package/dist/render/components/Text.d.ts

@@ -1,4 +1,4 @@
-import type { PadValues } from "../../format/lib/content/section-padding.js";
+import type { PadValues } from "../lib/content/section-padding.js";
 import type { BlockAlign as Align } from "../../format/lib/content/block-align.js";
 type Tone = "default" | "dim";
 interface TextProps {

package/dist/render/lib/content/button-look.d.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties } from "react";
+export declare const BUTTON_PAD_KEYS: {
+    readonly top: "buttonPaddingTop";
+    readonly right: "buttonPaddingRight";
+    readonly bottom: "buttonPaddingBottom";
+    readonly left: "buttonPaddingLeft";
+};
+export declare const BUTTON_PAD_CLASSES = "px-6 py-4";
+export declare const BUTTON_PAD_BUILT_IN: {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+};
+export declare const SITE_BUTTON_FILL = "var(--btn)";
+export type ButtonLookProps = {
+    variant?: unknown;
+    buttonColor?: unknown;
+    buttonFillOpacity?: unknown;
+    buttonBorder?: unknown;
+};
+export declare function buttonLook(p: ButtonLookProps): {
+    fillOpacity: number;
+    border: {
+        width: number;
+        color: string;
+    };
+    changed: boolean;
+};
+export declare function buttonPaint(p: ButtonLookProps): CSSProperties | null;
+export declare function buttonPadAttrs(p: Record<string, unknown>): {
+    className: string;
+    style: CSSProperties;
+} | null;
+export declare const BUTTON_WORDS_BUILT_IN_CASE = "upper";
+export declare function buttonWordsSummary(style: unknown, siteStyles: readonly {
+    id?: unknown;
+    name?: unknown;
+}[] | null | undefined, words: {
+    noStyle: string;
+    styleName: (v: {
+        kind: "heading" | "body";
+        n: number;
+    }) => string;
+    cases: Record<"none" | "upper" | "capitalize" | "lower", string>;
+}): string;

package/dist/render/lib/content/button-look.js

@@ -0,0 +1 @@
+import{finiteNumber as s}from"../../../format/lib/finite-number.js";import{nonEmptyString as c}from"../../../format/lib/non-empty-string.js";import{padSideAttrs as g}from"./section-padding.js";const i={top:"buttonPaddingTop",right:"buttonPaddingRight",bottom:"buttonPaddingBottom",left:"buttonPaddingLeft"},y="px-6 py-4",x=4,d=t=>{const o=new RegExp(`\\bp${t}-(?:\\[(\\d+)px\\]|(\\d+))`).exec(y);if(!o)throw new Error(`BUTTON_PAD_CLASSES has no p${t}`);return o[1]!==void 0?Number(o[1]):Number(o[2])*x},B={top:d("y"),right:d("x"),bottom:d("y"),left:d("x")},b="var(--btn)",T=t=>t&&typeof t=="object"&&(s(t.width)!==void 0||c(t.color))?t:void 0,P=t=>Math.round(Math.min(Math.max(t,0),100));function S(t){const o=t.variant==="ghost",n=s(t.buttonFillOpacity),r=T(t.buttonBorder),e=c(t.buttonColor);return{fillOpacity:n!==void 0?P(n):o?0:100,border:{width:s(r?.width)??1,color:c(r?.color)??e??(o?"currentColor":b)},changed:n!==void 0||r!==void 0}}function $(t){const o=S(t);if(!o.changed)return null;const n=c(t.buttonColor)??b;return{background:o.fillOpacity===0?"transparent":o.fillOpacity===100?n:`color-mix(in srgb, ${n} ${o.fillOpacity}%, transparent)`,borderWidth:o.border.width,borderStyle:"solid",borderColor:o.border.color}}function A(t){const o={top:t[i.top],right:t[i.right],bottom:t[i.bottom],left:t[i.left]},n={top:t[`${i.top}Phone`],right:t[`${i.right}Phone`],bottom:t[`${i.bottom}Phone`],left:t[`${i.left}Phone`]},{classes:r,style:e}=g(o,n);return Object.keys(e).length?{className:r.join(" "),style:e}:null}const f="upper";function I(t,o,n){const r=t&&typeof t=="object"?t:{},e=c(r.textStyle),u=e?c(o?.find(h=>h?.id===e)?.name):void 0,l=e?/^(heading|body)-(\d+)$/.exec(e):null,p=e?u||(l?n.styleName({kind:l[1],n:Number(l[2])}):e):n.noStyle,{cases:a}=n,m=c(r.case)??f;return`${p} · ${a[m]??a[f]}`}export{B as BUTTON_PAD_BUILT_IN,y as BUTTON_PAD_CLASSES,i as BUTTON_PAD_KEYS,f as BUTTON_WORDS_BUILT_IN_CASE,b as SITE_BUTTON_FILL,S as buttonLook,A as buttonPadAttrs,$ as buttonPaint,I as buttonWordsSummary};

package/dist/{format → render}/lib/content/section-padding.d.ts

@@ -13,10 +13,28 @@ export declare const PAD_LEFT_PHONE_CLASS = "sf-pad-left-phone";
 export declare const PAD_RIGHT_PHONE_CLASS = "sf-pad-right-phone";
 export declare const PAD_LEFT_PHONE_VAR = "--sf-pad-l-phone";
 export declare const PAD_RIGHT_PHONE_VAR = "--sf-pad-r-phone";
-export declare function sectionPadAttrs(pt: unknown, pb: unknown, ptPhone: unknown, pbPhone: unknown, pl?: unknown, pr?: unknown, plPhone?: unknown, prPhone?: unknown): {
+export declare const PAD_TOP_TABLET_CLASS = "sf-pad-top-tablet";
+export declare const PAD_BOTTOM_TABLET_CLASS = "sf-pad-bottom-tablet";
+export declare const PAD_LEFT_TABLET_CLASS = "sf-pad-left-tablet";
+export declare const PAD_RIGHT_TABLET_CLASS = "sf-pad-right-tablet";
+export declare const PAD_TOP_TABLET_VAR = "--sf-pad-t-tablet";
+export declare const PAD_BOTTOM_TABLET_VAR = "--sf-pad-b-tablet";
+export declare const PAD_LEFT_TABLET_VAR = "--sf-pad-l-tablet";
+export declare const PAD_RIGHT_TABLET_VAR = "--sf-pad-r-tablet";
+export declare function sectionPadAttrs(v: PadValues): {
     className: string;
     style: CSSProperties;
 } | null;
+export type PadSides = {
+    top?: unknown;
+    right?: unknown;
+    bottom?: unknown;
+    left?: unknown;
+};
+export declare function padSideAttrs(inline: PadSides, phone: PadSides, tablet?: PadSides, desktop?: PadSides): {
+    classes: string[];
+    style: CSSProperties;
+};
 export interface SectionPaddingProps {
     padTop?: unknown;
     padBottom?: unknown;
@@ -34,14 +52,24 @@ export declare function resolveSectionPadding(props: SectionPaddingProps, fallba
 export type PadValues = {
     top?: unknown;
     bottom?: unknown;
-    topPhone?: unknown;
-    bottomPhone?: unknown;
     left?: unknown;
     right?: unknown;
+    topTablet?: unknown;
+    bottomTablet?: unknown;
+    leftTablet?: unknown;
+    rightTablet?: unknown;
+    topPhone?: unknown;
+    bottomPhone?: unknown;
     leftPhone?: unknown;
     rightPhone?: unknown;
 };
-export declare function padValuesOf(props: Record<string, unknown>): PadValues;
+export declare const SECTION_PAD_KEYS: {
+    readonly top: "sectionPaddingTop";
+    readonly bottom: "sectionPaddingBottom";
+    readonly left: "sectionPaddingLeft";
+    readonly right: "sectionPaddingRight";
+};
+export declare function padValuesOf(props: Record<string, unknown>, keys?: Record<"top" | "bottom" | "left" | "right", string>, sides?: boolean): PadValues;
 export declare function wrapperPadAttrs(v: PadValues): {
     className: string;
     style: CSSProperties;

package/dist/render/lib/content/section-padding.js

@@ -0,0 +1 @@
+import{phoneKey as u,tabletKey as h}from"efficient-easel/draw";import{viewOverrides as g}from"./view-values.js";import{finiteNumber as p}from"../../../format/lib/finite-number.js";const z={min:10,max:200,step:10};function x(t,e){const o=p(t),n=p(e);if(!(o===void 0&&n===void 0))return{paddingTop:o,paddingBottom:n}}const O="sf-pad-top-phone",E="sf-pad-bottom-phone",S="--sf-pad-t-phone",L="--sf-pad-b-phone",D="sf-pad-left-phone",B="sf-pad-right-phone",N="--sf-pad-l-phone",R="--sf-pad-r-phone",H="sf-pad-top-tablet",C="sf-pad-bottom-tablet",V="sf-pad-left-tablet",y="sf-pad-right-tablet",I="--sf-pad-t-tablet",w="--sf-pad-b-tablet",G="--sf-pad-l-tablet",F="--sf-pad-r-tablet";function T(t){const e=x(t.top,t.bottom),o=K({left:t.left,right:t.right},{top:t.topPhone,bottom:t.bottomPhone,left:t.leftPhone,right:t.rightPhone},{top:t.topTablet,bottom:t.bottomTablet,left:t.leftTablet,right:t.rightTablet},{top:t.top,bottom:t.bottom,left:t.left,right:t.right});return e===void 0&&!o.classes.length&&!Object.keys(o.style).length?null:{className:["sf-section-pad",...o.classes].join(" "),style:{...e,...o.style}}}const M=[["top","paddingTop",[H,I],[O,S]],["bottom","paddingBottom",[C,w],[E,L]],["left","paddingLeft",[V,G],[D,N]],["right","paddingRight",[y,F],[B,R]]];function K(t,e,o={},n=t){const s={},d={},i=[];for(const[r,l,...a]of M){const f=p(t[r]);f!==void 0&&(s[l]=f);const P=g("spacing",p(n[r]),p(o[r]),p(e[r]));for(const[A,[b,m]]of[["tablet",a[0]],["phone",a[1]]]){const c=P[A];typeof c=="number"&&(i.push(b),d[m]=`${c}px`)}}return{classes:i,style:{...s,...d}}}function _(t,e,o){const n=p(t)??o,s=p(e);return n===void 0?s:s===void 0?n:n+s}function J(t,e={}){return{top:_(t.padTop,t.sectionPaddingTop,e.top),bottom:_(t.padBottom,t.sectionPaddingBottom,e.bottom)}}const $={top:"sectionPaddingTop",bottom:"sectionPaddingBottom",left:"sectionPaddingLeft",right:"sectionPaddingRight"};function Q(t,e=$,o=!0){const n={};for(const s of o?["top","bottom","left","right"]:["top","bottom"])n[s]=t[e[s]],n[`${s}Tablet`]=t[h(e[s])],n[`${s}Phone`]=t[u(e[s])];return n}function U(t){return T(t)}function W(t,e){const o=n=>typeof n=="number"?n+e:void 0;return T({...t,top:o(t.top),bottom:o(t.bottom),topTablet:o(t.topTablet),bottomTablet:o(t.bottomTablet),topPhone:o(t.topPhone),bottomPhone:o(t.bottomPhone)})}export{E as PAD_BOTTOM_PHONE_CLASS,L as PAD_BOTTOM_PHONE_VAR,C as PAD_BOTTOM_TABLET_CLASS,w as PAD_BOTTOM_TABLET_VAR,D as PAD_LEFT_PHONE_CLASS,N as PAD_LEFT_PHONE_VAR,V as PAD_LEFT_TABLET_CLASS,G as PAD_LEFT_TABLET_VAR,B as PAD_RIGHT_PHONE_CLASS,R as PAD_RIGHT_PHONE_VAR,y as PAD_RIGHT_TABLET_CLASS,F as PAD_RIGHT_TABLET_VAR,O as PAD_TOP_PHONE_CLASS,S as PAD_TOP_PHONE_VAR,H as PAD_TOP_TABLET_CLASS,I as PAD_TOP_TABLET_VAR,z as SECTION_PADDING,$ as SECTION_PAD_KEYS,K as padSideAttrs,Q as padValuesOf,J as resolveSectionPadding,W as rootPadAttrs,T as sectionPadAttrs,x as sectionPadStyle,U as wrapperPadAttrs};

package/dist/render/lib/content/view-values.d.ts

@@ -0,0 +1,10 @@
+import { type AutoRule, type ViewValueKind } from "efficient-easel/draw";
+export declare const RESPONSIVE_RULES: "v1" | "v2";
+export declare function viewRules(): Record<ViewValueKind, AutoRule>;
+export declare const TABLET_MEDIA = "(min-width: 720px) and (max-width: 1099.98px)";
+export declare const PHONE_MEDIA = "(max-width: 719.98px)";
+export interface ViewOverrides<T> {
+    tablet?: T;
+    phone?: T;
+}
+export declare function viewOverrides<T>(kind: ViewValueKind, desktop: T, tablet: T | null | undefined, phone: T | null | undefined, rules?: Record<ViewValueKind, AutoRule>): ViewOverrides<T>;