efficient-web-builder 29.0.0 → 30.1.0

package/CHANGELOG.md

@@ -2,6 +2,83 @@
 
 ## Unreleased
 
+## 30.1.0 - 2026-10-21
+
+**Every web-builder section draws the two Width rows** (Background, Content — 30.0.0's rows, mockup v6). 30.0.0 moved the heroes, Scroll-Over Text and the band sections; this moves the rest.
+
+### Changed for merchants
+
+- **Image & Text Split and Breadcrumb**: Content caps the columns (Split) and the trail (Breadcrumb) when set; unset they run edge to edge as before.
+- **Banner, Stats, Logos, Divider, Order Summary, Payment Badges, Box and Grid**: Background at Full width with Content at Content width now draws the band edge to edge and keeps the content on the column (before, the one row moved both together). A Box or Grid inside another frame hides the rows, as it hid the one row.
+- **Image & Text Columns, Recurring Columns, Stats with Text, Issue Header, Feature Banner, Article Text, Locations and Milestone Timeline**: Background now reaches the band (their old row did nothing), and Content reaches the words.
+- **Brand Text** and **Section Header**: Content is the words' row; Background is the band.
+- **Q&A** is a band section (its words always sat on the site column), not a band-and-content one.
+- The colour row of Stats, Recurring Columns, Stats with Text and Milestone Timeline is now `Background color`, so `Background` means one thing in the panel.
+- **No published page moves.** Checked by rendering 21 sections × 6 stored widths on 30.0.0 and on this release: every text box and band box lands on the same pixels at 1920, 1280 and 390 px (126 cases, 1704 text boxes).
+
+### Added
+
+- `components/SiteGutterFrame`: `SplitBandAndColumn`, and the frame's `columnClass` (the column when band and content split).
+- `lib/content/page-width`: `EDITORIAL_COLUMN` (the site column with the editorial sections' 24px phone step).
+- `lib/puck/passes/section-width`: `SECTION_CONTENT_CAP_VAR`, `SECTION_CONTENT_CAP_CLASS` (`--sf-content-cap`, for a section whose content runs edge to edge on its own).
+- `BlockRender.widthRows: "two"` (`lib/puck/blocks/block-types`): a host section whose render draws band and content apart opts in to the two rows. So a storefront-blocks release can move its sections without a builder release, and no mix of versions gives a section rows its render cannot draw.
+
+### Changed
+
+- The eight editorial sections above draw their root as the band and their words in `EDITORIAL_COLUMN`; they no longer read `sectionRunsFullWidth`. `Breadcrumb` wraps its trail in one `div`.
+- Section Header's own `Width` row is gone; the pass draws its two rows.
+- Inside a Box, a section hides its whole Width group (both rows), as it hid the one row. `WIDTH_ROW_KEYS` (`lib/puck/blocks/shared-fields`) and `LAYOUT_FIELD_KEYS` (`lib/puck/field-groups`) now include the two rows, read off `SECTION_WIDTH_FIELD_KEYS` (`lib/puck/section-width-fields`). 30.0.0 left Background and Content showing in a Box for every splittable section.
+- The storefront-blocks sections whose render must change (`AWAITING_BLOCKS` in the pass) keep their one row until their render says `widthRows: "two"`.
+
+### Guards
+
+- `scripts/test-section-width-draw.tsx` §7–§13 (red first): every web-builder family draws both rows, Split/Breadcrumb cap, the capped band, Brand Text, Section Header, the framed split.
+- `scripts/test-section-width-mapping.ts`: Q&A's rows, and a stray `contained` on Brand Text or Section Header (red first, found by the pixel check).
+- `scripts/test-full-width-means-full.ts` no longer lists the seven converted sections; `scripts/test-site-width.ts`'s cap floor is 20.
+
+## 30.0.0 - 2026-10-21
+
+A MAJOR: two editor components a host could import are gone (`components/SiteWidthField`, `components/HeroImageField`), and `PageRender` takes the site's Width defaults as `metadata`.
+
+**A section has two widths: Background and Content** (Lewis, 2026-10-20/21, mockup v6: https://claude.ai/artifact/DSJ1AXfJ2vkEhnVQ46HsA4). Site styles holds the same two rows as the site's defaults, and a section follows them until it sets its own.
+
+### Changed for merchants
+
+- **Site styles › Basics › Width**: `Background` (Full width / Content width; new, the band every section draws) and `Content` (Full width / Content width, and at Content width the site's ONE number — the old `Content width` row's, moved, not a second one). `Background` replaces the `Hero image` row; a hero on a site that has not set it still reads the old value, so no hero moves.
+- **Each row is the word choice `Full width / Content width` under its name** (the segmented the old Width row used). Beside the name it would need 287–309px and the name line has 286px at 320, so by R9 it sits under the name at every panel width. Content's number appears only at Content width.
+- **Hero Slideshow, Hero, Scroll-Over Text and the band sections** (Spec Strip, Story Timeline, Locations Map, Editorial Text, Lead Text, Cards, Key Features, Chart, Mockup Card, Testimonials, Call-to-Action Heading, Countdown, Document Header, Document Text, Document Detail Cards) draw the two rows. Content is Full width, or Content width at the site's number or a number of the section's own (400 to 2000 px). The hero's words, buttons and slide picker follow it.
+- **Content can never be wider than the background.** With Background at Content width, Content's Full width is greyed out and its number stops at the band. In the phone view both rows are greyed out: under 800px content fills the screen.
+- **Scroll-Over Text's `Full width` switch is gone**; its stored value is read as Content. A new Scroll-Over Text follows the site's Content.
+- **No published page moves.** Old stored widths are read through one table per section family (`lib/content/section-width.ts`); nothing stored is rewritten. Checked by rendering 11 stored cases (inovit.com's live Hero and Scroll-Over Text, Editorial Text, Spec Strip) on 28.1.0 and on this release: every text box and band box lands on the same pixels at 1920, 1280 and 390 px.
+- `Page settings`, `Header` and `Footer` draw their Width choices Full width first, like every Width row.
+
+### Added
+
+- `lib/content/section-width`: `resolveSectionWidth`, `SECTION_WIDTH_FAMILY`, `sectionHasWidthRows`, `FOLLOW_SITE`, `normalizeSiteBackground`, `siteWidthsMetadata`, `siteWidthsOf`, `SITE_WIDTHS_KEY`, and the types `SectionWidths`, `WidthAnswer`, `SiteWidths`.
+- `components/SectionWidthRows` (editor): `BackgroundWidthRow`, `ContentWidthRow` — the one pair of rows for Site styles and every section.
+- `lib/puck/section-width-fields` (editor): a section's `Width` group.
+- The theme row's `section_background_width` and `section_content_width` (efficient-backend `StorefrontThemeSettings`); `siteWidthsMetadata(background, content)` carries both to every section.
+
+### Removed
+
+- `components/SiteWidthField`, `components/HeroImageField` (replaced by `components/SectionWidthRows`).
+- The hero's own word cap: `HeroSlide`, `HeroSingle`, the hero's chrome and `SpecStrip` read `--sf-site-width`, not `min(var(--sf-page-cap, site), site)`. `HERO_CAP` is `SITE_WIDTH_CAP`.
+
+### For hosts
+
+- **Pass the site's Width defaults to the live render**: `<PageRender config={…} data={…} metadata={siteWidthsMetadata(theme.sectionBackgroundWidth, theme.sectionContentWidth)} />`. Without it every section draws the built-in Full width band and Content width content, as today.
+- The storefront's `/edit/preview-site-styles` harness imports the two removed components; draw `components/SectionWidthRows` there.
+
+### Guards
+
+- New `scripts/test-section-width-mapping.ts` (red first): every family × every old stored value → the two rows (786 checks).
+- New `scripts/test-section-width-draw.tsx`: no wrapper where a section follows the site; the old Content-width box byte for byte; the Content override, its clamp and its phone fallback; the site Background through metadata; no `--sf-page-cap` read for words.
+- The Site styles guards read the two rows; the panel's declared saves retire `hero_background_follows_width` and add `section_background_width`.
+
+### Next
+
+- The other section families (both, contained, content-only, capped, Product Grid) move onto the two rows in the next release; until then they keep their single `Width` row.
+
 ## 29.0.0 - 2026-10-20
 
 **MAJOR: easel peer ^15.** The `efficient-easel` peer range rises from `^14.1.0` to `^15.0.0` (and `efficient-shell` to `^8.10.1`), so a host on easel 14 must upgrade.

package/dist/editor/components/SectionWidthRows.d.ts

@@ -0,0 +1,35 @@
+import { type WidthAnswer } from "../../format/lib/content/section-width.js";
+export declare const WIDTH_GROUP_LABEL = "Width";
+export declare const BACKGROUND_LABEL = "Background";
+export declare const CONTENT_LABEL = "Content";
+export declare const WIDTH_CHOICES: readonly WidthAnswer[];
+export declare const SECTION_CONTENT_MIN = 400;
+export declare const CONTENT_INSIDE_BACKGROUND_HINT = "Content cannot be wider than the background.";
+export declare const SITE_BACKGROUND_HINT = "The width of every section's background, until the section sets its own.";
+export declare const SITE_CONTENT_HINT = "The width of every section's content, until the section sets its own.";
+export declare const WIDTH_PHONE_HINT = "On phones, content always fills the screen.";
+export declare function BackgroundWidthRow({ value, changed, detail, onChange, onReset, disabled, hint, labelId, }: {
+    value: WidthAnswer;
+    changed: boolean;
+    detail: string;
+    onChange: (next: WidthAnswer) => void;
+    onReset: () => void;
+    disabled?: boolean;
+    hint?: string;
+    labelId?: string;
+}): import("react").JSX.Element;
+export declare function ContentWidthRow({ mode, px, max, min, changed, detail, onMode, onPx, onReset, fullClosed, disabled, hint, labelId, }: {
+    mode?: WidthAnswer;
+    px: number;
+    max?: number;
+    min?: number;
+    changed: boolean;
+    detail: string;
+    onMode?: (next: WidthAnswer) => void;
+    onPx: (next: number) => void;
+    onReset: () => void;
+    fullClosed?: boolean;
+    disabled?: boolean;
+    hint?: string;
+    labelId?: string;
+}): import("react").JSX.Element;

package/dist/editor/components/SectionWidthRows.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as O}from"react/jsx-runtime";import{SettingsDefaultReset as x,SettingsField as I,SettingsSegmented as _}from"efficient-easel/panel";import{BackgroundIcon as w,WidthIcon as H}from"efficient-easel/icons";import{PAGE_WIDTH as N}from"../../format/lib/content/page-width.js";import{WIDTH_CHOICE_LABEL as L}from"../../format/lib/content/section-width.js";import{say as a,editorEaselWords as b}from"../../format/lib/editor-words.js";import{Slider as B}from"../lib/puck/controls.js";const U="Width",D="Background",S="Content",C=["full","content"],E=t=>a(L[t==="content"?"page":"full"]),W=400,K="Content cannot be wider than the background.",P="The width of every section's background, until the section sets its own.",M="The width of every section's content, until the section sets its own.",F="On phones, content always fills the screen.";function q({value:t,changed:l,detail:s,onChange:i,onReset:r,disabled:p=!1,hint:n,labelId:f}){const o=a(D);return e(I,{label:o,labelId:f,icon:e(w,{}),changed:l,hint:n?a(n):void 0,action:e(x,{words:b()?.panel,label:o,changed:l,detail:s,onReset:r}),children:e(_,{options:C.map(c=>({id:c,label:E(c)})),value:t,onChange:i,ariaLabel:o,disabled:p})})}function z({mode:t,px:l,max:s=N.max,min:i=W,changed:r,detail:p,onMode:n,onPx:f,onReset:o,fullClosed:c=!1,disabled:h=!1,hint:m,labelId:g}){const d=a(S),T=t!=="full"?e(B,{min:i,max:s,step:N.step,value:Math.min(Math.max(l,i),s),onChange:f,suffix:"px",ariaLabel:d,disabled:h}):null;return e(I,{label:d,labelId:g,icon:e(H,{}),changed:r,hint:m?a(m):void 0,action:e(x,{words:b()?.panel,label:d,changed:r,detail:p,onReset:o}),children:t===void 0||!n?T:O("div",{className:"flex w-full min-w-0 flex-col gap-2",children:[e(_,{options:C.map(u=>({id:u,label:E(u),disabled:u==="full"&&c})),value:t,onChange:n,ariaLabel:d,disabled:h}),T]})})}export{D as BACKGROUND_LABEL,q as BackgroundWidthRow,K as CONTENT_INSIDE_BACKGROUND_HINT,S as CONTENT_LABEL,z as ContentWidthRow,W as SECTION_CONTENT_MIN,P as SITE_BACKGROUND_HINT,M as SITE_CONTENT_HINT,C as WIDTH_CHOICES,U as WIDTH_GROUP_LABEL,F as WIDTH_PHONE_HINT};

package/dist/editor/components/StorefrontEditor.js

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

package/dist/editor/components/WebsiteSettingsPanel.js

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

package/dist/editor/components/WidthFollowField.js

@@ -1 +1 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import{SettingsDefaultReset as u,SettingsField as p,SettingsSegmented as h}from"efficient-easel/panel";import{WidthIcon as g}from"efficient-easel/icons";import{say as o,editorEaselWords as b}from"../../format/lib/editor-words.js";import{WIDTH_CHOICE_LABEL as d}from"../../format/lib/content/section-width.js";function W({value:l,resolved:a,onChange:i,label:s="Width",labelId:r,followsLabel:f,hint:c}){const e=l===void 0,m=e?a:l,n=o(s);return t(p,{label:n,labelId:r,icon:t(g,{}),value:e?f:void 0,changed:!e,action:t(u,{words:b()?.panel,label:n,changed:!e,onReset:()=>i(void 0)}),hint:c,children:t(h,{options:[{label:o(d.page),id:"content"},{label:o(d.full),id:"full"}],value:m,ariaLabel:n,onChange:i})})}export{W as default};
+"use client";import{jsx as t}from"react/jsx-runtime";import{SettingsDefaultReset as u,SettingsField as p,SettingsSegmented as h}from"efficient-easel/panel";import{WidthIcon as g}from"efficient-easel/icons";import{say as o,editorEaselWords as b}from"../../format/lib/editor-words.js";import{WIDTH_CHOICE_LABEL as d}from"../../format/lib/content/section-width.js";function W({value:l,resolved:a,onChange:i,label:s="Width",labelId:r,followsLabel:f,hint:c}){const e=l===void 0,m=e?a:l,n=o(s);return t(p,{label:n,labelId:r,icon:t(g,{}),value:e?f:void 0,changed:!e,action:t(u,{words:b()?.panel,label:n,changed:!e,onReset:()=>i(void 0)}),hint:c,children:t(h,{options:[{label:o(d.full),id:"full"},{label:o(d.page),id:"content"}],value:m,ariaLabel:n,onChange:i})})}export{W as default};

package/dist/editor/components/storefront-editor.css

@@ -2974,7 +2974,7 @@
    the day a second thing joined it. Written against `.es-field-ctl` rather than
    against this panel or that one, because the promise being kept is the SHELL's
    and every row it stacks is owed it — `PartSettingsPanel`'s Size / Line
-   spacing / Letter spacing and `SiteWidthField`'s Site width are the four this
+   spacing / Letter spacing and the Site styles Content number are the four this
    reaches today. Guarded by `scripts/test-part-slider-fills-row.ts`. */
 .es-field-ctl > .sf-slider {
   flex: 1;

package/dist/editor/lib/puck/blocks/general/IntroBleed/fields.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{CaseIcon as c,FullWidthIcon as b,OpacityIcon as u,PlacementIcon as y,StickyIcon as h,TextLinesIcon as a}from"efficient-easel/icons";import{colorInput as s,group as i,select as k,sizeField as l,slider as r,text as _,textarea as p,toggle as d,upload as m}from"../../../controls.js";import{deviceField as e,deviceNote as x}from"../../../device-fields.js";import{DEFAULT_INTRO_BLEED_LAYOUT as T,INTRO_BLEED_COPY_SHARE as t,INTRO_BLEED_LAYOUT_OPTIONS as S}from"../../../../../../format/lib/sections/intro-bleed-layout.js";import{heightField as g,ctaField as f}from"../../shared-fields.js";import{INTRO_PH as n}from"../../../../../../render/lib/puck/blocks/general/IntroBleed/render.js";const F={fields:{_dDevice:x(),_gContent:i("Content"),eyebrow:_("Eyebrow",n.eyebrow),title:p("Heading",n.title),body:p("Subtitle",n.body),uppercase:d("Uppercase heading",!1,o(c,{})),_gBackground:i("Background images"),imageSrc:e("desktop",m("Background image","image/*")),imageSrcMobile:e("mobile",m("Background image","image/*")),_gLayout:i("Layout"),layout:k("Text position",o(y,{}),S,T),heightDesktop:g("desktop"),heightMobile:g("mobile"),copyShareDesktop:e("desktop",r("Text height",o(a,{}),t.min,t.max,t.step,t.desktop,"%")),copyShareMobile:e("mobile",r("Text height",o(a,{}),t.min,t.max,t.step,t.mobile,"%")),sticky:d("Stick to top",!0,o(h,{})),_gWidth:i("Width"),fullWidth:d("Full width",!0,o(b,{})),overlay:r("Overlay",o(u,{}),0,100,5,60,"%"),_gTextDesktop:e("desktop",i("Text style")),titleSizeDesktop:e("desktop",l("Heading font size",32,120,1,96,"heading")),bodySizeDesktop:e("desktop",l("Subtitle font size",12,28,1,17,"body")),_gTextMobile:e("mobile",i("Text style")),titleSizeMobile:e("mobile",l("Heading font size",24,72,1,44,"heading")),bodySizeMobile:e("mobile",l("Subtitle font size",12,22,1,16,"body")),_gButton:i("Button"),...f,buttonColor:s("Button color","#C9A461"),buttonTextColor:s("Button text color","#000000")}};export{F as IntroBleedFields};
+import{jsx as t}from"react/jsx-runtime";import{CaseIcon as g,OpacityIcon as b,PlacementIcon as y,StickyIcon as u,TextLinesIcon as a}from"efficient-easel/icons";import{colorInput as d,group as i,select as k,sizeField as l,slider as r,text as h,textarea as s,toggle as m,upload as p}from"../../../controls.js";import{NoControlMark as _,noControlField as x}from"../../../panel-no-control-mark.js";import{deviceField as e,deviceNote as T}from"../../../device-fields.js";import{DEFAULT_INTRO_BLEED_LAYOUT as f,INTRO_BLEED_COPY_SHARE as o,INTRO_BLEED_LAYOUT_OPTIONS as S}from"../../../../../../format/lib/sections/intro-bleed-layout.js";import{heightField as c,ctaField as B}from"../../shared-fields.js";import{INTRO_PH as n}from"../../../../../../render/lib/puck/blocks/general/IntroBleed/render.js";const M={fields:{_dDevice:T(),_gContent:i("Content"),eyebrow:h("Eyebrow",n.eyebrow),title:s("Heading",n.title),body:s("Subtitle",n.body),uppercase:m("Uppercase heading",!1,t(g,{})),_gBackground:i("Background images"),imageSrc:e("desktop",p("Background image","image/*")),imageSrcMobile:e("mobile",p("Background image","image/*")),_gLayout:i("Layout"),layout:k("Text position",t(y,{}),S,f),heightDesktop:c("desktop"),heightMobile:c("mobile"),copyShareDesktop:e("desktop",r("Text height",t(a,{}),o.min,o.max,o.step,o.desktop,"%")),copyShareMobile:e("mobile",r("Text height",t(a,{}),o.min,o.max,o.step,o.mobile,"%")),sticky:m("Stick to top",!0,t(u,{})),fullWidth:{...x({type:"custom",render:()=>t(_,{})},"always"),reachedBy:"contentWidth"},overlay:r("Overlay",t(b,{}),0,100,5,60,"%"),_gTextDesktop:e("desktop",i("Text style")),titleSizeDesktop:e("desktop",l("Heading font size",32,120,1,96,"heading")),bodySizeDesktop:e("desktop",l("Subtitle font size",12,28,1,17,"body")),_gTextMobile:e("mobile",i("Text style")),titleSizeMobile:e("mobile",l("Heading font size",24,72,1,44,"heading")),bodySizeMobile:e("mobile",l("Subtitle font size",12,22,1,16,"body")),_gButton:i("Button"),...B,buttonColor:d("Button color","#C9A461"),buttonTextColor:d("Button text color","#000000")}};export{M as IntroBleedFields};

package/dist/editor/lib/puck/blocks/general/SectionHeader/fields.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{widthModeFields as S}from"../../../../../../render/lib/puck/passes/section-width.js";import{resolveWidth as E}from"../../../../../../format/lib/content/section-width.js";import{HashIcon as s,StylesIcon as o}from"efficient-easel/icons";import{group as t,linkField as _,plainText as d,segmented as O,select as i,text as l,textarea as r,upload as p,widthField as T,withPanelOnly as L}from"../../../controls.js";import{DEFAULT_SECTION_NUMBER_STYLE as a,SECTION_NUMBER_STYLE_OPTIONS as g}from"../../../../../../format/lib/sections/section-number-style.js";import{DEFAULT_SECTION_HEAD_STYLE as N,SECTION_HEAD_STYLE_OPTIONS as f,withHeadStyleRules as u}from"../../../../../../format/lib/sections/section-head-style.js";import{SECTION_EYEBROW_LOOK_OPTIONS as y,DEFAULT_SECTION_EYEBROW_LOOK as I}from"../../../../../../format/lib/sections/section-eyebrow-look.js";const B={fields:u({_gContent:t("Content"),headStyle:i("Style",e(o,{}),[...f],N),num:l("Number","01 / Section"),eyebrowLook:i("Eyebrow style",e(o,{}),[...y],I),numStyle:O("Number style",e(s,{}),[...g],a),title:r("Heading","Section *title*"),description:r("Body","Short supporting line"),linkText:l("Button","View all"),linkHref:_("Link"),_gLogo:t("Logo"),logoSrc:p("Logo image","image/*"),logoAlt:L(d("Logo alt text","Logo description")),...T("full")}),resolveFields:(n,{fields:m})=>S(m,E(n?.props??{},"full"))};export{B as SectionHeaderFields};
+import{jsx as e}from"react/jsx-runtime";import{HashIcon as r,StylesIcon as o}from"efficient-easel/icons";import{group as t,linkField as S,plainText as E,segmented as _,select as i,text as l,textarea as n,upload as m,withPanelOnly as O}from"../../../controls.js";import{DEFAULT_SECTION_NUMBER_STYLE as T,SECTION_NUMBER_STYLE_OPTIONS as s}from"../../../../../../format/lib/sections/section-number-style.js";import{DEFAULT_SECTION_HEAD_STYLE as L,SECTION_HEAD_STYLE_OPTIONS as a,withHeadStyleRules as g}from"../../../../../../format/lib/sections/section-head-style.js";import{SECTION_EYEBROW_LOOK_OPTIONS as p,DEFAULT_SECTION_EYEBROW_LOOK as N}from"../../../../../../format/lib/sections/section-eyebrow-look.js";const x={fields:g({_gContent:t("Content"),headStyle:i("Style",e(o,{}),[...a],L),num:l("Number","01 / Section"),eyebrowLook:i("Eyebrow style",e(o,{}),[...p],N),numStyle:_("Number style",e(r,{}),[...s],T),title:n("Heading","Section *title*"),description:n("Body","Short supporting line"),linkText:l("Button","View all"),linkHref:S("Link"),_gLogo:t("Logo"),logoSrc:m("Logo image","image/*"),logoAlt:O(E("Logo alt text","Logo description"))})};export{x as SectionHeaderFields};

package/dist/editor/lib/puck/blocks/general/Series/fields.js

@@ -1 +1 @@
-import{backgroundField as n,copyText as r,group as t,plainTextarea as d,text as i,textarea as o}from"../../../controls.js";import{SPLITTABLE_SECTIONS as m,headFieldsForPlacement as u,widthFieldsForParent as c}from"../../../../../../format/lib/sections/section-head-placement.js";import{WIDTH_ROW_KEYS as S}from"../../shared-fields.js";import{SECTION_BG_BUILT_IN as T}from"../../../../../../format/lib/puck/blocks/general/section-bg-built-in.js";import{SERIES_PH as a}from"../../../../../../render/lib/puck/blocks/general/Series/render.js";const y={fields:{_gHead:t("Section header"),headNum:i("Number",a.headNum),headTitle:o("Heading",a.headTitle),headDesc:o("Body",a.headDesc),_gCards:t("Cards"),cards:{type:"array",label:"Cards",arrayFields:{num:r("Number"),since:r("Right Top Text"),title:d("Title"),desc:d("Body"),entries:r("Entries count"),entriesLabel:r("Button Right Text")},getItemSummary:e=>e?.title||(e?.num?`Column ${e.num}`:"Column")},_gViewLabel:t("Card link"),viewLabel:i("Card button",a.viewLabel),_gStyle:t("Style"),background:n("Background",T.Series)},resolveFields:(e,{fields:l,parent:s})=>u(c(l,s,S),e.props.headPlacement,m.Series.headRows)};export{y as SeriesFields};
+import{backgroundField as n,copyText as r,group as t,plainTextarea as d,text as i,textarea as o}from"../../../controls.js";import{SPLITTABLE_SECTIONS as m,headFieldsForPlacement as u,widthFieldsForParent as c}from"../../../../../../format/lib/sections/section-head-placement.js";import{WIDTH_ROW_KEYS as S}from"../../shared-fields.js";import{SECTION_BG_BUILT_IN as T}from"../../../../../../format/lib/puck/blocks/general/section-bg-built-in.js";import{SERIES_PH as a}from"../../../../../../render/lib/puck/blocks/general/Series/render.js";const y={fields:{_gHead:t("Section header"),headNum:i("Number",a.headNum),headTitle:o("Heading",a.headTitle),headDesc:o("Body",a.headDesc),_gCards:t("Cards"),cards:{type:"array",label:"Cards",arrayFields:{num:r("Number"),since:r("Right Top Text"),title:d("Title"),desc:d("Body"),entries:r("Entries count"),entriesLabel:r("Button Right Text")},getItemSummary:e=>e?.title||(e?.num?`Column ${e.num}`:"Column")},_gViewLabel:t("Card link"),viewLabel:i("Card button",a.viewLabel),_gStyle:t("Style"),background:n("Background color",T.Series)},resolveFields:(e,{fields:l,parent:s})=>u(c(l,s,S),e.props.headPlacement,m.Series.headRows)};export{y as SeriesFields};

package/dist/editor/lib/puck/blocks/general/Stats/fields.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{ColumnsIcon as l}from"efficient-easel/icons";import{backgroundField as r,copyText as e,group as a,slider as s,text as m}from"../../../controls.js";import{SECTION_BG_BUILT_IN as n}from"../../../../../../format/lib/puck/blocks/general/section-bg-built-in.js";const p={fields:{_gContent:a("Content"),heading:m("Heading","By the *numbers*"),items:{type:"array",label:"Stats",arrayFields:{value:e("Value"),label:e("Label")},getItemSummary:t=>t.label||t.value||"stat"},columns:s("Columns",o(l,{}),2,4,1,4),_gStyle:a("Style"),background:r("Background",n.Stats)}};export{p as StatsFields};
+import{jsx as a}from"react/jsx-runtime";import{ColumnsIcon as l}from"efficient-easel/icons";import{backgroundField as r,copyText as e,group as o,slider as s,text as m}from"../../../controls.js";import{SECTION_BG_BUILT_IN as n}from"../../../../../../format/lib/puck/blocks/general/section-bg-built-in.js";const c={fields:{_gContent:o("Content"),heading:m("Heading","By the *numbers*"),items:{type:"array",label:"Stats",arrayFields:{value:e("Value"),label:e("Label")},getItemSummary:t=>t.label||t.value||"stat"},columns:s("Columns",a(l,{}),2,4,1,4),_gStyle:o("Style"),background:r("Background color",n.Stats)}};export{c as StatsFields};

package/dist/editor/lib/puck/blocks/general/StatsParagraph/fields.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{AccentIcon as p}from"efficient-easel/icons";import{backgroundField as m,group as t,plainText as e,plainTextarea as f,text as d,textarea as l,toggle as n}from"../../../controls.js";import{SPLITTABLE_SECTIONS as u,headFieldsForPlacement as S,widthFieldsForParent as g}from"../../../../../../format/lib/sections/section-head-placement.js";import{innerSpacingFields as b,WIDTH_ROW_KEYS as x}from"../../shared-fields.js";import{SECTION_BG_BUILT_IN as c}from"../../../../../../format/lib/puck/blocks/general/section-bg-built-in.js";import{STATS_PARAGRAPH_PH as r}from"../../../../../../render/lib/puck/blocks/general/StatsParagraph/render.js";const A={fields:{_gContent:t("Content"),eyebrow:d("Eyebrow",r.eyebrow),title:l("Heading",r.title),desc:l("Body",r.desc),stats:{type:"array",label:"Stats",arrayFields:{value:e("Number"),prefix:e("Prefix"),suffix:e("Unit"),supSuffix:e("Superscript"),emphasizeAll:n("Whole number Theme Color",!1,i(p,{})),label:e("Label"),sub:f("Body")},defaultItemProps:{value:"",prefix:"",suffix:"",supSuffix:"",emphasizeAll:!1,label:"",sub:""},getItemSummary:a=>a.label||a.value||"Stat"},_gStyle:t("Style"),background:m("Background",c.StatsParagraph),...b("StatsParagraph")},resolveFields:(a,{fields:o,parent:s})=>S(g(o,s,x),a.props.headPlacement,u.StatsParagraph.headRows)};export{A as StatsParagraphFields};
+import{jsx as i}from"react/jsx-runtime";import{AccentIcon as p}from"efficient-easel/icons";import{backgroundField as m,group as t,plainText as e,plainTextarea as f,text as d,textarea as l,toggle as n}from"../../../controls.js";import{SPLITTABLE_SECTIONS as u,headFieldsForPlacement as S,widthFieldsForParent as g}from"../../../../../../format/lib/sections/section-head-placement.js";import{innerSpacingFields as b,WIDTH_ROW_KEYS as c}from"../../shared-fields.js";import{SECTION_BG_BUILT_IN as x}from"../../../../../../format/lib/puck/blocks/general/section-bg-built-in.js";import{STATS_PARAGRAPH_PH as r}from"../../../../../../render/lib/puck/blocks/general/StatsParagraph/render.js";const A={fields:{_gContent:t("Content"),eyebrow:d("Eyebrow",r.eyebrow),title:l("Heading",r.title),desc:l("Body",r.desc),stats:{type:"array",label:"Stats",arrayFields:{value:e("Number"),prefix:e("Prefix"),suffix:e("Unit"),supSuffix:e("Superscript"),emphasizeAll:n("Whole number Theme Color",!1,i(p,{})),label:e("Label"),sub:f("Body")},defaultItemProps:{value:"",prefix:"",suffix:"",supSuffix:"",emphasizeAll:!1,label:"",sub:""},getItemSummary:a=>a.label||a.value||"Stat"},_gStyle:t("Style"),background:m("Background color",x.StatsParagraph),...b("StatsParagraph")},resolveFields:(a,{fields:o,parent:s})=>S(g(o,s,c),a.props.headPlacement,u.StatsParagraph.headRows)};export{A as StatsParagraphFields};

package/dist/editor/lib/puck/blocks/general/TimelineTrack/fields.js

@@ -1 +1 @@
-import{jsx as n}from"react/jsx-runtime";import{ClockIcon as s}from"efficient-easel/icons";import{backgroundField as d,plainText as m,plainTextarea as i,section as e,text as T,textarea as o,toggle as c}from"../../../controls.js";import{SPLITTABLE_SECTIONS as p,headFieldsForPlacement as u,widthFieldsForParent as f}from"../../../../../../format/lib/sections/section-head-placement.js";import{ctaField as _,innerSpacingFields as g,WIDTH_ROW_KEYS as y}from"../../shared-fields.js";import{SECTION_BG_BUILT_IN as I}from"../../../../../../format/lib/puck/blocks/general/section-bg-built-in.js";import{TIMELINE_TRACK_PH as r}from"../../../../../../render/lib/puck/blocks/general/TimelineTrack/render.js";const L={fields:{_sHeader:e("Header"),eyebrow:T("Eyebrow",r.eyebrow),title:o("Heading",r.title),intro:o("Body",r.intro),_sEntries:e("Milestones"),entries:{type:"array",label:"Milestones",arrayFields:{date:m("Year"),title:i("Title"),blurb:i("Body"),future:c("Upcoming",!1,n(s,{}))},defaultItemProps:{date:"",title:"",blurb:"",future:!1},getItemSummary:t=>t?.date||t?.title||"Milestone"},_sButton:e("Button"),..._,_dDesign:e("Design"),background:d("Background",I.TimelineTrack),_dLayout:e("Layout"),...g("TimelineTrack")},resolveFields:(t,{fields:a,parent:l})=>u(f(a,l,y),t.props.headPlacement,p.TimelineTrack.headRows)};export{L as TimelineTrackFields};
+import{jsx as n}from"react/jsx-runtime";import{ClockIcon as s}from"efficient-easel/icons";import{backgroundField as d,plainText as m,plainTextarea as i,section as e,text as T,textarea as o,toggle as c}from"../../../controls.js";import{SPLITTABLE_SECTIONS as p,headFieldsForPlacement as u,widthFieldsForParent as f}from"../../../../../../format/lib/sections/section-head-placement.js";import{ctaField as _,innerSpacingFields as g,WIDTH_ROW_KEYS as y}from"../../shared-fields.js";import{SECTION_BG_BUILT_IN as I}from"../../../../../../format/lib/puck/blocks/general/section-bg-built-in.js";import{TIMELINE_TRACK_PH as r}from"../../../../../../render/lib/puck/blocks/general/TimelineTrack/render.js";const L={fields:{_sHeader:e("Header"),eyebrow:T("Eyebrow",r.eyebrow),title:o("Heading",r.title),intro:o("Body",r.intro),_sEntries:e("Milestones"),entries:{type:"array",label:"Milestones",arrayFields:{date:m("Year"),title:i("Title"),blurb:i("Body"),future:c("Upcoming",!1,n(s,{}))},defaultItemProps:{date:"",title:"",blurb:"",future:!1},getItemSummary:t=>t?.date||t?.title||"Milestone"},_sButton:e("Button"),..._,_dDesign:e("Design"),background:d("Background color",I.TimelineTrack),_dLayout:e("Layout"),...g("TimelineTrack")},resolveFields:(t,{fields:a,parent:l})=>u(f(a,l,y),t.props.headPlacement,p.TimelineTrack.headRows)};export{L as TimelineTrackFields};

package/dist/editor/lib/puck/blocks/shared-fields.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{SECTION_PAD_INNER_DEFAULTS as n}from"../../../../render/lib/puck/passes/section-padding.js";import i,{SlotNoticeField as p}from"../../../components/SlotChildRows.js";import{SECTION_HEIGHT as r}from"../../../../format/lib/content/section-height.js";import{usePreviewHeader as a}from"../../../../render/components/PreviewHeaderContext.js";import{IMAGE_GRAYSCALE_LABEL as c}from"../../../../format/lib/content/image-treatment.js";import{AlignLeftIcon as m,BlackAndWhiteIcon as d,ContrastIcon as s,HeightIcon as u,TypeIcon as f}from"efficient-easel/icons";import{linkField as g,segmented as l,slider as h,spacingFields as x,text as F,toggle as y,widthField as T}from"../controls.js";import{deviceField as I}from"../device-fields.js";import{FieldGlyph as A}from"../../../components/FieldGlyph.js";import{fieldNoun as _}from"../../../../format/lib/puck/field-noun.js";import{CTA_PH as b}from"../../../../format/lib/puck/blocks/placeholders.js";const O=e=>I(e,h("Height",t(u,{}),r.min,r.max,r.step,r.fallback,r.unit)),P={ctaText:F("Button",b.text),ctaHref:g("Button link")},j=()=>l("Alignment",t(m,{}),[{label:"Left",value:"left"},{label:"Center",value:"center"},{label:"Right",value:"right"}],"left"),W=()=>l("Tone",t(s,{}),[{label:"Default",value:"default"},{label:"Muted",value:"dim"}],"default"),K=e=>x({...n[e],keys:{top:"padTop",bottom:"padBottom"},group:!1}),M=(e,o)=>({type:"custom",render:()=>t(i,{parentType:e,label:o})}),Y=e=>({type:"custom",render:()=>t(p,{parentType:e})});function E(e){const{photographyGrayscale:o}=a();return y(c,o===!0,t(d,{})).render(e)}function U(){return{type:"custom",render:e=>t(E,{...e})}}const q=Object.keys(T("full"));function z(e){const o=_(e);return o?t(A,{noun:o}):t(f,{})}export{q as WIDTH_ROW_KEYS,j as alignField,P as ctaField,O as heightField,K as innerSpacingFields,U as photographyToggle,Y as slotNoticeField,M as slotRowsField,z as textKindGlyph,W as toneField};
+import{jsx as t}from"react/jsx-runtime";import{SECTION_WIDTH_FIELD_KEYS as n}from"../section-width-fields.js";import{SECTION_PAD_INNER_DEFAULTS as i}from"../../../../render/lib/puck/passes/section-padding.js";import p,{SlotNoticeField as a}from"../../../components/SlotChildRows.js";import{SECTION_HEIGHT as r}from"../../../../format/lib/content/section-height.js";import{usePreviewHeader as m}from"../../../../render/components/PreviewHeaderContext.js";import{IMAGE_GRAYSCALE_LABEL as c}from"../../../../format/lib/content/image-treatment.js";import{AlignLeftIcon as d,BlackAndWhiteIcon as s,ContrastIcon as f,HeightIcon as u,TypeIcon as g}from"efficient-easel/icons";import{linkField as h,segmented as l,slider as x,spacingFields as F,text as T,toggle as y,widthField as I}from"../controls.js";import{deviceField as _}from"../device-fields.js";import{FieldGlyph as E}from"../../../components/FieldGlyph.js";import{fieldNoun as S}from"../../../../format/lib/puck/field-noun.js";import{CTA_PH as A}from"../../../../format/lib/puck/blocks/placeholders.js";const W=e=>_(e,x("Height",t(u,{}),r.min,r.max,r.step,r.fallback,r.unit)),j={ctaText:T("Button",A.text),ctaHref:h("Button link")},K=()=>l("Alignment",t(d,{}),[{label:"Left",value:"left"},{label:"Center",value:"center"},{label:"Right",value:"right"}],"left"),Y=()=>l("Tone",t(f,{}),[{label:"Default",value:"default"},{label:"Muted",value:"dim"}],"default"),M=e=>F({...i[e],keys:{top:"padTop",bottom:"padBottom"},group:!1}),U=(e,o)=>({type:"custom",render:()=>t(p,{parentType:e,label:o})}),q=e=>({type:"custom",render:()=>t(a,{parentType:e})});function b(e){const{photographyGrayscale:o}=m();return y(c,o===!0,t(s,{})).render(e)}function z(){return{type:"custom",render:e=>t(b,{...e})}}const J=[...new Set([...Object.keys(I("full")),...n])];function Q(e){const o=S(e);return o?t(E,{noun:o}):t(g,{})}export{J as WIDTH_ROW_KEYS,K as alignField,j as ctaField,W as heightField,M as innerSpacingFields,z as photographyToggle,q as slotNoticeField,U as slotRowsField,Q as textKindGlyph,Y as toneField};

package/dist/editor/lib/puck/controls.d.ts

@@ -12,6 +12,7 @@ import { type SectionBackground } from "../../../format/lib/content/section-back
 import { type TypeRole, type TypeSizeValue } from "../../../format/lib/content/section-type-size.js";
 import { type WidthMode } from "../../../format/lib/content/section-width.js";
 import type { Bucket, DesignGroup } from "./field-groups.js";
+export declare function sharedStyleKinds<T extends Record<string, unknown>>(fields: T): T;
 type SelectData = {
     options: readonly SelectOption[];
     fallback: string;
@@ -170,6 +171,7 @@ interface CornersRowTier {
     hint: ReactNode;
 }
 export declare function cornersRowField(tier: CornersRowTier): CustomField<number | null>;
+export declare function useSelectedSibling(key: string): [unknown, (next: unknown) => void];
 export declare function cornerSidesField(): CustomField<string[] | null>;
 export declare function sectionCornersField(): CustomField<number | null>;
 export declare const SECTION_BLEEDS_HINT = "This section runs edge to edge, so its corners sit off the page. Set Width to Content width to use them.";
@@ -188,6 +190,7 @@ export declare function boxPhoneRowField(): CustomField<number>;
 export declare function directionField(container: DirectionContainer): CustomField<string>;
 export declare function sizeField(label: string, min: number, max: number, step: number, fallback: number, role: TypeRole): CustomField<TypeSizeValue>;
 export declare function cellWidthFields(): Record<string, unknown>;
+export declare function useSelectedProps(): Record<string, unknown>;
 export declare function phoneOverrideField(opts: {
     label: string;
     desktopKey: string;