efficient-web-builder 36.0.0 → 37.1.0

package/CHANGELOG.md

@@ -2,6 +2,69 @@
 
 ## Unreleased
 
+## 37.1.0 - 2026-10-23
+
+A MINOR: the website backend carries its shared sections (#251), the site text styles move to the render side (#252), and a Site styles theme card opens and closes with one arrow (#230). Nothing is removed.
+
+The efficient-easel peer range stays `^18.1.0`: every 18.x from 18.1.0 exports `text-styles/model`. Only the dev pin moves, to `^18.2.0`: the easel release that puts `text-styles/model` in its render group.
+
+### Added
+
+- **The website backend carries its shared sections** (Shared section design v4, approved by Lewis 2026-10-21; card [DESIGN] Shared Sections Used By Many Pages, build plan PR 6). `WebsiteBackend.sharedSections?: WebsiteSharedSections`, which is efficient-easel's `SharedSectionStore` (list, create, remove), the one type. easel's session reads it from the backend it is handed, so a backend (EFFICIENT's, in efficient-storefront-blocks) hands its store without a cast. Optional: a backend without it offers no shared sections. A MINOR.
+- **`render/lib/text-styles/site-text-styles`: the site's text styles on the render side.** The module writes every published page's text-style stylesheet (`textStylesCss`, `storedTextStyles`, `themeWithTextStyles`), so a shopper's page imports it; it was on the editor side only because it read `efficient-easel/text-styles`, the editor's list. It now reads the model with no React, `efficient-easel/text-styles/model` (the defaults and the case CSS), and is a render root in `scripts/entry-sides.mjs`. The module moved; its code did not change.
+
+### Deprecated
+
+- `editor/lib/site-text-styles`: kept, as a re-export of the render module, for hosts that still name it (storefront `lib/theme-settings`). Nothing in this package imports it. A later major can delete it.
+
+### Changed
+
+- **The Site styles theme card opens and closes with one arrow** (ruling A4f, Lewis 2026-10-13: "2. B"; the closed state is his direct yes, "Use the icon"). The text button "Edit" / "Done" in the card's foot is now the shell's ghost `IconButton` in the shell's `Tooltip`: closed, it draws `chevron-down` and the tooltip says "Edit colors"; open, it draws `chevron-up` and the tooltip says "Collapse". It is one button whose arrow flips. Its name still says which theme ("Edit colors for Theme 1", "Collapse Theme 1"), and it keeps `aria-expanded` / `aria-controls`.
+- Not changed: the "Edit" in the section's Theme menu card (it opens a sheet somewhere else, so it discloses nothing on the card) and the "Edit" on the closed section Theme trigger (`ThemeCardTrigger`). Both stay the shell's text `Button`.
+- Editor words: added "Collapse", "Collapse {name}", "Edit colors", "Edit colors for {name}"; removed "Done {name}" (nothing says it now). A host that translated "Done {name}" drops that line.
+
+### Guards
+
+- New `scripts/test-backend-shared-sections.ts` (red first: the scripts typecheck refused it on 37.0.0).
+- `scripts/test-two-ways-to-add.ts` §1 checks the easel peer range (`^18.1.0`) and the dev range (`^18.2.0`) apart.
+- `scripts/test-theme-card-chevron.tsx` (red first): closed and open, the foot's control is the shell's ghost `IconButton` at the `sm` rung with the shell's `chevron-down` / `chevron-up` glyph and no words; the shell's Tooltip says "Edit colors" / "Collapse"; in the real `ThemeField` one press opens and a second press on the same button closes; each card's name names its theme; no "Edit" or "Done" text button is left on a Site styles card.
+
+## 37.0.0 - 2026-10-23
+
+**MAJOR for hosts:** the efficient-easel peer range is `^18.1.0` (was `^18.0.0`; dev the same). A shared section somebody else holds is locked by its node, which easel 18.1.0 hands the lock rule; on 18.0.0 the lock would never hold and an edit could be lost. A host moves the pin; nothing else to change.
+
+### Added
+
+- **Shared sections are edited in place** (Shared section design v4, approved by Lewis 2026-10-21; card [DESIGN] Shared Sections Used By Many Pages, PR 5b of the build plan). A page holds a reference in its top level, `{ type: "SharedSection", props: { id, section } }`; the shared section is a page of kind `section` whose document holds the one section (efficient-backend `storefront/shared_sections.py`). On a page that edits in place:
+  - `lib/shared-section-docs` (format side, pure): `spliceShared` puts each loaded section in its reference's place, with its own ids, and `splitShared` takes it back out; byte for byte, as `lib/pinned-chrome-doc` does for the header and footer. A reference whose document did not load stays a reference and is kept.
+  - The site page adapter loads each referenced section beside the page, and saves each one only when it changed, against its OWN version and the tab's clientId. A refusal is reported on that section only; the page beside it saves. Each is claimed beside the page and never taken over; where Publish is per page, each goes live with it (the site's one Publish takes them anyway).
+  - `PinnedChromeState.sections` (optional): the shared sections not stored as shown — could not load, held by somebody else, changed elsewhere, save failed. The canvas notice names the first one, after the header's and footer's.
+  - The screen is handed efficient-easel 18's document half (`pinned.shared`, `lib/shared-sections-layer`): which top-level node is which section and the pages that use it (`usedOn`, from the store's list), opening one of those pages, Make shared (`adopt`), what Add puts down (`nodeOf`: the section's own node, once per page), Detach (`copyNode`, every id fresh) and a deleted section (`removed`: the page is read again). `sharedReach` says "On 3 pages" for a shared section.
+  - `blockRules.isLockedBlock(type, node)`: a shared section somebody else holds is locked ALONE, by its node (efficient-easel 18.1.0's second argument), so no edit of it is lost (GG 2026-10-22).
+- Words: "On 1 page", "On {count} pages", "On other pages", "A shared section", and four notices naming a shared section.
+
+### Changed
+
+- **The Text block takes the Heading's and the Eyebrow's places** (card [MERGE] One Text Block And Click Through Parts, T2b; GG 2026-10-22). No stored block is rewritten: every stored Heading and Eyebrow still draws, edits, moves and pastes.
+  - The Brand Text, Split and Subscribe presets and the Image & Text Columns seed lay down a Text with tag h2 that follows Heading 2 where they laid down a Heading, and a Text that follows Body 5 where they laid down the plain Eyebrow. The label keeps the plain eyebrow's look as its part's own values: the accent ink, 0.3em letter spacing, capitals and line 1.5. The two shapes are written once, in `lib/puck/text-seeds` (`headingTextSeed`, `labelTextSeed`).
+  - Heading and Eyebrow leave Add in a Box, a Grid cell and a Slide box (`BlockChoice.retired`, easel 17). Both stay in each list, so a move or a paste is still taken, and a Slide box's slot still allows them.
+  - A Text that follows a heading style draws the Heading block's frame too (py-6, the 24px its padding adds to; was py-4), so it is the Heading block at that level, frame and all. Its empty placeholder in the editor is the Heading's.
+  - Same look, measured: on the published page every text the presets lay down has the same face, size, weight, line, letter spacing, case, colour and box as before.
+- **A "Gap only" Box draws the same on the editor's canvas as on the page** (GG 2026-10-23, found by T2b's same-look proof). On the canvas a block in a Gap only Box kept its own top and bottom frame padding (a Heading +48px, a Text +32px), because the editor's item and the part host stand between the Box and the block, and the page's rule `.sf-box-gap-only > *` stops at the item. `components/storefront-editor.css` now reaches the block through both (`[data-puck-component] > [data-sf-part-host]`), and `components/PreviewPartAnchors` names its host `data-sf-part-host`. The published page does not change.
+
+### Not here
+
+- The `SharedSection` block (an editor placeholder for a reference that did not load, nothing on a published page) and the HTTP store are the host's registry and client: efficient-storefront-blocks, PR 6.
+
+### Guards
+
+- `scripts/test-shared-section-docs.ts` (red first): round trips with 0, 1 and 3 sections, where each stands, a reference not loaded, edits in the right half, moved and removed, `references`.
+- `test-two-ways-to-add`: the easel range is ^18.1.0.
+- `scripts/test-shared-section-adapter.ts`: the adapter against a fake backend — splice, page-only save, a section's own save, a conflict, a lock, a failed load, Make shared and Add, the store's names and counts, the notice, and what the screen is handed.
+- New `scripts/test-text-replaces-heading.tsx` (red first): no preset or seed lays down a Heading or an Eyebrow; the heading and label shapes; a Text at Heading 1-3 is the Heading block's whole markup; Add offers neither block in any Box menu, and every list still holds both.
+- New `scripts/test-gap-only-canvas.tsx` (red first): a Heading, a Text, a Text at Heading 2 and a Text with its own padding in a Gap only Box draw the same top and bottom padding on the canvas as on the page (happy-dom, the real canvas sheet, the page's two rules).
+
+
 ## 36.0.0 - 2026-10-22
 
 **MAJOR for hosts:** the efficient-easel peer range is `^18.0.0` (was `^17.0.0`) and the efficient-shell peer range `^8.20.0` (was `^8.18.0`); dev the same. easel 18 needs shell 8.20.0 (`TreeRow` `tone`, the `shared` glyph). A host moves both pins with this release; nothing else to change.

package/dist/editor/components/PartSettingsPanel.js

@@ -1 +1 @@
-"use client";import{jsx as t,Fragment as ne,jsxs as h}from"react/jsx-runtime";import{useContext as qe,useEffect as oe,useRef as Je,useState as Te}from"react";import{PartResetDot as Qe}from"./PartResetDot.js";import{FieldSelect as Ze,InspectorField as et}from"efficient-easel/fields";import{SettingsField as tt}from"efficient-easel/panel";import{InspectorUpLevel as K}from"efficient-easel/chrome";import{StylesIcon as nt,TypeIcon as ot}from"efficient-easel/icons";import{useEasel as lt}from"efficient-easel/easel";import{TextPartPanel as st}from"efficient-easel/copy";import{Tooltip as rt}from"efficient-shell/ui";import{PartTextBox as it,partTextCells as at}from"./PartTextBox.js";import{UiIcon as Ne}from"efficient-easel/draw/client";import{usePreviewHeader as ct}from"../../render/components/PreviewHeaderContext.js";import{UpdateStyleDialog as dt}from"./UpdateStyleDialog.js";import{ScreenDocumentContext as ut}from"efficient-easel/screen/components/ScreenDocumentContext";import{hasStyleChange as ft,partStyleToTextStyleValues as pt,pushIntoStyle as mt,resolveTextStyles as ht,styleIdOfRole as yt}from"../lib/site-text-styles.js";import{useSiteTextStylesWriter as St}from"../lib/site-text-styles-writer.js";import{useThemeRowPersist as gt}from"../lib/theme-row-persist.js";import{usePreviewDevice as xt}from"efficient-easel/draw/client";import{usePartStyle as bt}from"./PreviewPartStyleContext.js";import{say as l}from"../../format/lib/editor-words.js";import{readHidable as U,textFieldOffPage as Pt,textFieldPanelOnly as wt}from"../lib/puck/controls.js";import{TEXT_FIELD_MARKER as vt}from"efficient-easel/draw";import{useSectionOps as Tt}from"efficient-easel/screen/lib/puck/use-section-ops";import{FONT_OPTIONS as Nt,FONT_ROLES as Ce,FONT_ROLE_LABELS as ke,fontOption as le}from"../../format/lib/fonts.js";import{isMultilineKind as Ct,partPlaceholder as kt,typeInPlaceKind as Ot}from"../../render/lib/puck/part-text.js";import{partRowField as Rt}from"../lib/puck/part-row-field.js";import{decodePartKey as It,partPropsWithRowValue as Et,partRowValue as Ft}from"../../render/lib/puck/part-rows.js";import{PART_WIDTH_MAX as _t,followedStyleOf as zt,propsWithPartStyleValue as E,propsWithoutPartStyle as At,readPartStyle as Oe}from"../../render/lib/puck/part-styles.js";import{partThemeColors as Vt}from"../../format/lib/puck/part-inks.js";import{styleKeyForPart as Lt}from"../../format/lib/sections/section-text-kinds.js";import{commitPartText as Kt}from"../lib/puck/part-typing.js";import{keysOnCanvas as Ut,useCanvasTypingPart as Bt}from"../lib/puck/canvas-typing.js";import{useEaselHost as Dt}from"efficient-easel/screen/lib/host";import{SOURCE_LINES as Wt,SOURCE_ACTIONS as Mt,SOURCE_ACTION_LABEL as jt,partSourceNoteFor as Gt,partSourceOf as Ht,sourceMenuIdOf as $t,sourceSlugOf as Re}from"../../format/lib/puck/source-bound-parts.js";import{encodePartId as Xt,holdsAuthoredText as Yt}from"../../render/lib/puck/text-parts.js";import{regionsForSection as qt}from"../../format/lib/sections/section-text-regions.js";import{textRegionOfPartKey as Jt}from"../../format/lib/sections/text-regions.js";function se(n){return n?l(n):null}function Ie(n){return n.kind==="role"?ke[n.role]:n.kind==="custom"?"Custom":null}function Qt(n){const o=n.role;return o&&Ce.includes(o)?{kind:"role",role:o}:null}function Zt(n,o){if(!n)return{kind:"unread"};const{faceRole:s,base:i}=n;if(o[s]===i.fontKey)return{kind:"role",role:s};const c=Object.keys(o).filter(r=>o[r]===i.fontKey);return c.length===1?{kind:"role",role:c[0]}:{kind:"custom"}}function re(n,o,s,i){return Qt(Oe(n,o))??Zt(s,i)}function en(n,o){if(!n.length)return null;const s=o(n[0]);return n.every(i=>o(i)===s)?s:null}const B="";function tn({face:n,base:o,onPick:s}){const i=n.kind==="role"?n.role:B,c=[{label:l("No style"),value:B},...Ce.map(r=>({label:l(ke[r]),value:r}))];return t(Ze,{ariaLabel:l("Style"),value:i,options:c,inline:!0,onChange:r=>s(r===B?null:r),renderOption:r=>r.value===B?h(ne,{children:[t("span",{className:"es-fsel-label sf-part-style-keep",children:r.label}),t("span",{className:"sf-part-style-aside","aria-hidden":"true",children:l("Section’s own")})]}):t("span",{className:"es-fsel-label",style:{fontFamily:`var(--font-role-${r.value})`},children:r.label}),renderValue:()=>t("span",{style:{fontFamily:o?.fontKey?`var(${le(o.fontKey)?.cssVar})`:void 0,fontWeight:o?.weight},children:se(Ie(n))}),valueText:r=>se(Ie(n))??r?.label??""})}function nn({sectionName:n,onBack:o,textEditor:s,styleRow:i,children:c}){return h("div",{className:"sf-part-panel",children:[t(K,{inline:!0,name:l(n),onSelect:o}),s,i,c]})}function Ee({source:n,slug:o,menuId:s}){const i=Dt(),c=Mt[n],r=!c.needsSlug||!!o;return t("div",{className:"sf-note sf-note--source",children:h("p",{className:"es-field-hint sf-hint-keep",children:[l(Wt[n]),r?h(ne,{children:[" ",t("button",{type:"button",className:"sf-source-open",onClick:()=>{c.type==="storefront-editor:open-menus"?i.send(c.type,{menuId:s??null}):o&&i.send(c.type,{slug:o})},children:l(jt)})]}):null]})})}const Fe=4,on=120;function ln({region:n,sizePx:o,face:s,base:i,onFollowStyle:c,source:r,slug:D,onBack:v}){const F=n.follows;return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:l(n.label)})}),t("p",{children:o?l("Its size follows Site styles ▸ {follows} — {px}px right now.",{follows:l(F),px:Math.round(o)}):l("Its size follows Site styles ▸ {follows}.",{follows:l(F)})}),c?t(ne,{children:t(tt,{label:l("Style"),icon:t(nt,{}),hint:l("Every {part} in this section follows it. The face and the size change; the letter case is the section’s own and stays as it is.",{part:l(n.label).toLowerCase()}),children:t(tn,{face:s,base:i,onPick:c})})}):t("p",{className:"es-field-hint sf-hint-keep",children:l("Only the size follows a site style. This section sets its own font, weight and letter case.")}),r?t(Ee,{source:r,slug:D}):null,t(K,{inline:!0,name:l("Page"),onSelect:v})]})}function sn({onBack:n}){return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:l("This part is no longer here.")})}),t("p",{children:l("The section it belonged to has been changed or removed.")}),t(K,{inline:!0,name:l("Page"),onSelect:n})]})}function rn({onBack:n,partId:o,why:s}){return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:l("This part's settings did not open.")})}),t("p",{children:l("The words are still on your page and nothing has been lost. The editor could not work out which control belongs to them, which is a fault on our side. Go back and click the section to open its settings instead.")}),t("p",{className:"sf-note-detail",children:h("code",{children:[o," — ",s]})}),t(K,{inline:!0,name:l("Page"),onSelect:n})]})}function an({nodeId:n,propKey:o,onBack:s,onEditStyle:i}){const{getItemById:c,getSelectorForId:r,config:D}=lt(e=>e),v=Tt(),F=Bt(),{partStyle:_}=bt(),{fonts:W,textStyles:_e}=ct(),M=qe(ut),ie=!M?.capabilities?.hasSiteTheme,{persist:ze}=gt({themeFromDocument:ie,tokenRef:M?.tokenRef,siteId:M?.siteId??null}),R=St({themeFromDocument:ie,persist:ze}),[Ae,j]=Te(!1),Ve=xt()==="mobile",ae=Je(null),d=c(n),m=r(n),ce=d?D.components[d.type]:void 0,{key:S,row:g}=It(o),de=ce?.fields?.[S],y=g?Rt(de,g):de,T=Xt(n,o),p=d?.props??{},x=Ot(y),ue=Pt(y),fe=Yt(y),Le=d?Ht(d.type):null,pe=d?Gt(d.type,S):null,G=g?Ft(p[S],g):p[S],me=!!g&&!(Array.isArray(p[S])&&g.index<p[S].length);oe(()=>{if(Ut(document))return;ae.current?.querySelector(".es-copy [contenteditable='true'], .es-copy textarea, .sf-copybox textarea, .sf-copybox input")?.focus()},[T]);const[H,he]=Te(0);oe(()=>he(0),[T]);const $=!!d&&!me&&(!m||!y);oe(()=>{if(!$||H>=Fe)return;const e=setTimeout(()=>he(a=>a+1),on);return()=>clearTimeout(e)},[$,H]);const Ke=$&&H<Fe;if(!d||me)return t(sn,{onBack:s});const z=qt(d.type),ye=z?Jt(z,o):null;if(z&&ye){const e=_?.partId===T?_:null,a=z[ye],f=a.writable===!0&&!!m,b=te=>{m&&v.replaceComponent(m.zone,m.index,{...d,props:E(p,o,"role",te)})};return t(ln,{region:a,sizePx:e?.base.sizePx??null,face:re(p,o,e,W),base:e?.base??null,onFollowStyle:f?b:void 0,source:Le,slug:Re(p),onBack:s})}if(!m||!y)return Ke?t("div",{className:"sf-note","aria-busy":"true"}):t(rn,{onBack:s,partId:T,why:m?"no field":"no selector"});const Se=e=>{v.replaceComponent(m.zone,m.index,{...d,props:e})},X=e=>{if(U(e).hidden!==U(G).hidden||!x){const f=g?Et(p,S,g,e):{...p,[S]:e};f&&Se(f);return}Kt({node:d,propKey:o,kind:x,zone:m.zone,index:m.index},U(e).text,v.replaceComponent)},Ue=G,N=_?.partId===T?_:null,C=N?.styleOwner,A=C?c(C.owner):null,Y=C&&A?r(C.owner):null,q=!!(C&&A&&Y),k=q?A.props??{}:p,J=q?e=>v.replaceComponent(Y.zone,Y.index,{...A,props:e}):Se,V=q?C.kind:Lt(d?.type,o),P=Oe(k,V),u=[{partKey:V,face:re(k,V,N,W),sizeGroup:N?.sizeGroup??null,base:N?.base??dn,style:P}],Be=en(u,e=>e.sizeGroup),De=Vt(N?.inks),I=(e,a)=>{let f=k;for(const b of u)f=E(f,b.partKey,e,a);J(f)},We=e=>e?I("textStyle",e):Q({textStyle:null,role:null}),Q=e=>{let a=k;for(const f of u)for(const[b,te]of Object.entries(e))a=E(a,f.partKey,b,te??null);J(a)},Z=x==="text"||x==="textarea",{text:ge,hidden:O}=U(G),L=y?.[vt]?.label??o,xe=O?l("Show {label} on the slide",{label:l(L)}):l("Hide {label} on the slide",{label:l(L)}),be=h("div",{className:"sf-field-head",children:[t(ot,{}),t("span",{className:"sf-field-label sf-field-label--inline",children:l(L)}),Z&&t(rt,{content:xe,children:t("button",{type:"button",className:"sf-field-eye","aria-pressed":O,"aria-label":xe,onClick:()=>X({text:ge,hidden:!O}),children:O?t(Ne,{name:"eye-off",size:14}):t(Ne,{name:"eye",size:14})})})]}),Pe=!ue&&fe,Me=!!x&&(wt(y)||ue||O||!fe),we=re(k,V,N,W),je=we.kind==="role"?we.role:null,ee=zt(P)??yt(je),ve=ht(R.saved,R.old),Ge=Object.entries(P).filter(([e,a])=>e!=="role"&&e!=="textStyle"&&a!==void 0).length,He=()=>{let e=k;for(const a of u){const{role:f,textStyle:b}=a.style;e=At(e,a.partKey),f&&(e=E(e,a.partKey,"role",f)),b&&(e=E(e,a.partKey,"textStyle",b))}J(e)},w=ee,$e=ft(u[0].style),Xe=w?ve.find(e=>e.id===w)?.name??w:"",Ye=()=>{j(!1),w&&(R.write(mt({saved:R.saved,old:R.old,styleId:w,values:pt(u[0].style)}),!0),He())};return h(nn,{sectionName:ce?.label??d.type,onBack:s,textEditor:t("div",{ref:ae,className:"sf-part-text",children:Me?t(it,{text:ge,onTextChange:e=>X(Z?{text:e,hidden:O}:e),multiline:Ct(x),markup:x!=="plainText",styled:!1,style:u[0].style,base:u[0].base,setValue:Q,colors:De,placeholder:se(kt(y))??void 0,ariaLabel:l(L),head:be,typedOnCanvas:F===T}):x?Z?be:null:t(et,{field:y,name:o,value:Ue,onChange:X,id:`sf-part-${n}-${o}`})}),children:[pe&&t(Ee,{source:pe,slug:Re(p),menuId:$t(p)}),Pe&&t(st,{style:{value:ee??"",options:[{value:"",label:l("No style"),description:l("Section’s own")},...ve.map(e=>({value:e.id,label:e.name,description:e.values.font?le(e.values.font)?.label:void 0}))],onChange:e=>We(e||null),changed:Ge>0,onEditStyles:i,onUpdateStyle:w&&$e?()=>j(!0):void 0},font:{value:P.font??"",styleValue:le(u[0].base.fontKey)?.label,options:Nt.map(e=>({label:e.label,value:e.key})),onChange:e=>I("font",e||null)},italic:{value:P.italic,styleValue:cn(_e,ee),onChange:e=>I("italic",e??null)},cells:at(u[0].style,u[0].base,Q,{phone:Ve}),align:{value:P.align??"",styleValue:u[0].base.align,onChange:e=>I("align",e||null)},letterCase:{value:P.case??"",styleValue:u[0].base.case,onChange:e=>I("case",e||null)}}),Ae&&w&&t(dt,{styleName:Xe,onCancel:()=>j(!1),onConfirm:Ye}),Pe&&Be===null&&t("p",{className:"es-field-hint sf-hint-keep",children:l("Fixed size — the site’s Text setting doesn’t resize this.")})]})}function cn(n,o){return!o||!Array.isArray(n)?!1:n.find(i=>i?.id===o)?.values?.italic===!0}const dn={fontKey:"",sizePx:16,weight:400,lineRatio:1.4,letterEm:0,align:"left",case:"none",paddingPx:0,widthPx:_t};export{nn as PartPanelBody,Qe as PartResetDot,Ee as PartSourceNote,tn as PartStyleSelect,an as default,re as partFace};
+"use client";import{jsx as t,Fragment as ne,jsxs as h}from"react/jsx-runtime";import{useContext as qe,useEffect as oe,useRef as Je,useState as Te}from"react";import{PartResetDot as Qe}from"./PartResetDot.js";import{FieldSelect as Ze,InspectorField as et}from"efficient-easel/fields";import{SettingsField as tt}from"efficient-easel/panel";import{InspectorUpLevel as K}from"efficient-easel/chrome";import{StylesIcon as nt,TypeIcon as ot}from"efficient-easel/icons";import{useEasel as lt}from"efficient-easel/easel";import{TextPartPanel as st}from"efficient-easel/copy";import{Tooltip as rt}from"efficient-shell/ui";import{PartTextBox as it,partTextCells as at}from"./PartTextBox.js";import{UiIcon as Ne}from"efficient-easel/draw/client";import{usePreviewHeader as ct}from"../../render/components/PreviewHeaderContext.js";import{UpdateStyleDialog as dt}from"./UpdateStyleDialog.js";import{ScreenDocumentContext as ut}from"efficient-easel/screen/components/ScreenDocumentContext";import{hasStyleChange as ft,partStyleToTextStyleValues as pt,pushIntoStyle as mt,resolveTextStyles as ht,styleIdOfRole as yt}from"../../render/lib/text-styles/site-text-styles.js";import{useSiteTextStylesWriter as St}from"../lib/site-text-styles-writer.js";import{useThemeRowPersist as gt}from"../lib/theme-row-persist.js";import{usePreviewDevice as xt}from"efficient-easel/draw/client";import{usePartStyle as bt}from"./PreviewPartStyleContext.js";import{say as l}from"../../format/lib/editor-words.js";import{readHidable as U,textFieldOffPage as Pt,textFieldPanelOnly as wt}from"../lib/puck/controls.js";import{TEXT_FIELD_MARKER as vt}from"efficient-easel/draw";import{useSectionOps as Tt}from"efficient-easel/screen/lib/puck/use-section-ops";import{FONT_OPTIONS as Nt,FONT_ROLES as Ce,FONT_ROLE_LABELS as ke,fontOption as le}from"../../format/lib/fonts.js";import{isMultilineKind as Ct,partPlaceholder as kt,typeInPlaceKind as Ot}from"../../render/lib/puck/part-text.js";import{partRowField as Rt}from"../lib/puck/part-row-field.js";import{decodePartKey as It,partPropsWithRowValue as Et,partRowValue as Ft}from"../../render/lib/puck/part-rows.js";import{PART_WIDTH_MAX as _t,followedStyleOf as zt,propsWithPartStyleValue as E,propsWithoutPartStyle as At,readPartStyle as Oe}from"../../render/lib/puck/part-styles.js";import{partThemeColors as Vt}from"../../format/lib/puck/part-inks.js";import{styleKeyForPart as Lt}from"../../format/lib/sections/section-text-kinds.js";import{commitPartText as Kt}from"../lib/puck/part-typing.js";import{keysOnCanvas as Ut,useCanvasTypingPart as Bt}from"../lib/puck/canvas-typing.js";import{useEaselHost as Dt}from"efficient-easel/screen/lib/host";import{SOURCE_LINES as Wt,SOURCE_ACTIONS as Mt,SOURCE_ACTION_LABEL as jt,partSourceNoteFor as Gt,partSourceOf as Ht,sourceMenuIdOf as $t,sourceSlugOf as Re}from"../../format/lib/puck/source-bound-parts.js";import{encodePartId as Xt,holdsAuthoredText as Yt}from"../../render/lib/puck/text-parts.js";import{regionsForSection as qt}from"../../format/lib/sections/section-text-regions.js";import{textRegionOfPartKey as Jt}from"../../format/lib/sections/text-regions.js";function se(n){return n?l(n):null}function Ie(n){return n.kind==="role"?ke[n.role]:n.kind==="custom"?"Custom":null}function Qt(n){const o=n.role;return o&&Ce.includes(o)?{kind:"role",role:o}:null}function Zt(n,o){if(!n)return{kind:"unread"};const{faceRole:s,base:i}=n;if(o[s]===i.fontKey)return{kind:"role",role:s};const c=Object.keys(o).filter(r=>o[r]===i.fontKey);return c.length===1?{kind:"role",role:c[0]}:{kind:"custom"}}function re(n,o,s,i){return Qt(Oe(n,o))??Zt(s,i)}function en(n,o){if(!n.length)return null;const s=o(n[0]);return n.every(i=>o(i)===s)?s:null}const B="";function tn({face:n,base:o,onPick:s}){const i=n.kind==="role"?n.role:B,c=[{label:l("No style"),value:B},...Ce.map(r=>({label:l(ke[r]),value:r}))];return t(Ze,{ariaLabel:l("Style"),value:i,options:c,inline:!0,onChange:r=>s(r===B?null:r),renderOption:r=>r.value===B?h(ne,{children:[t("span",{className:"es-fsel-label sf-part-style-keep",children:r.label}),t("span",{className:"sf-part-style-aside","aria-hidden":"true",children:l("Section’s own")})]}):t("span",{className:"es-fsel-label",style:{fontFamily:`var(--font-role-${r.value})`},children:r.label}),renderValue:()=>t("span",{style:{fontFamily:o?.fontKey?`var(${le(o.fontKey)?.cssVar})`:void 0,fontWeight:o?.weight},children:se(Ie(n))}),valueText:r=>se(Ie(n))??r?.label??""})}function nn({sectionName:n,onBack:o,textEditor:s,styleRow:i,children:c}){return h("div",{className:"sf-part-panel",children:[t(K,{inline:!0,name:l(n),onSelect:o}),s,i,c]})}function Ee({source:n,slug:o,menuId:s}){const i=Dt(),c=Mt[n],r=!c.needsSlug||!!o;return t("div",{className:"sf-note sf-note--source",children:h("p",{className:"es-field-hint sf-hint-keep",children:[l(Wt[n]),r?h(ne,{children:[" ",t("button",{type:"button",className:"sf-source-open",onClick:()=>{c.type==="storefront-editor:open-menus"?i.send(c.type,{menuId:s??null}):o&&i.send(c.type,{slug:o})},children:l(jt)})]}):null]})})}const Fe=4,on=120;function ln({region:n,sizePx:o,face:s,base:i,onFollowStyle:c,source:r,slug:D,onBack:v}){const F=n.follows;return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:l(n.label)})}),t("p",{children:o?l("Its size follows Site styles ▸ {follows} — {px}px right now.",{follows:l(F),px:Math.round(o)}):l("Its size follows Site styles ▸ {follows}.",{follows:l(F)})}),c?t(ne,{children:t(tt,{label:l("Style"),icon:t(nt,{}),hint:l("Every {part} in this section follows it. The face and the size change; the letter case is the section’s own and stays as it is.",{part:l(n.label).toLowerCase()}),children:t(tn,{face:s,base:i,onPick:c})})}):t("p",{className:"es-field-hint sf-hint-keep",children:l("Only the size follows a site style. This section sets its own font, weight and letter case.")}),r?t(Ee,{source:r,slug:D}):null,t(K,{inline:!0,name:l("Page"),onSelect:v})]})}function sn({onBack:n}){return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:l("This part is no longer here.")})}),t("p",{children:l("The section it belonged to has been changed or removed.")}),t(K,{inline:!0,name:l("Page"),onSelect:n})]})}function rn({onBack:n,partId:o,why:s}){return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:l("This part's settings did not open.")})}),t("p",{children:l("The words are still on your page and nothing has been lost. The editor could not work out which control belongs to them, which is a fault on our side. Go back and click the section to open its settings instead.")}),t("p",{className:"sf-note-detail",children:h("code",{children:[o," — ",s]})}),t(K,{inline:!0,name:l("Page"),onSelect:n})]})}function an({nodeId:n,propKey:o,onBack:s,onEditStyle:i}){const{getItemById:c,getSelectorForId:r,config:D}=lt(e=>e),v=Tt(),F=Bt(),{partStyle:_}=bt(),{fonts:W,textStyles:_e}=ct(),M=qe(ut),ie=!M?.capabilities?.hasSiteTheme,{persist:ze}=gt({themeFromDocument:ie,tokenRef:M?.tokenRef,siteId:M?.siteId??null}),R=St({themeFromDocument:ie,persist:ze}),[Ae,j]=Te(!1),Ve=xt()==="mobile",ae=Je(null),d=c(n),m=r(n),ce=d?D.components[d.type]:void 0,{key:S,row:g}=It(o),de=ce?.fields?.[S],y=g?Rt(de,g):de,T=Xt(n,o),p=d?.props??{},x=Ot(y),ue=Pt(y),fe=Yt(y),Le=d?Ht(d.type):null,pe=d?Gt(d.type,S):null,G=g?Ft(p[S],g):p[S],me=!!g&&!(Array.isArray(p[S])&&g.index<p[S].length);oe(()=>{if(Ut(document))return;ae.current?.querySelector(".es-copy [contenteditable='true'], .es-copy textarea, .sf-copybox textarea, .sf-copybox input")?.focus()},[T]);const[H,he]=Te(0);oe(()=>he(0),[T]);const $=!!d&&!me&&(!m||!y);oe(()=>{if(!$||H>=Fe)return;const e=setTimeout(()=>he(a=>a+1),on);return()=>clearTimeout(e)},[$,H]);const Ke=$&&H<Fe;if(!d||me)return t(sn,{onBack:s});const z=qt(d.type),ye=z?Jt(z,o):null;if(z&&ye){const e=_?.partId===T?_:null,a=z[ye],f=a.writable===!0&&!!m,b=te=>{m&&v.replaceComponent(m.zone,m.index,{...d,props:E(p,o,"role",te)})};return t(ln,{region:a,sizePx:e?.base.sizePx??null,face:re(p,o,e,W),base:e?.base??null,onFollowStyle:f?b:void 0,source:Le,slug:Re(p),onBack:s})}if(!m||!y)return Ke?t("div",{className:"sf-note","aria-busy":"true"}):t(rn,{onBack:s,partId:T,why:m?"no field":"no selector"});const Se=e=>{v.replaceComponent(m.zone,m.index,{...d,props:e})},X=e=>{if(U(e).hidden!==U(G).hidden||!x){const f=g?Et(p,S,g,e):{...p,[S]:e};f&&Se(f);return}Kt({node:d,propKey:o,kind:x,zone:m.zone,index:m.index},U(e).text,v.replaceComponent)},Ue=G,N=_?.partId===T?_:null,C=N?.styleOwner,A=C?c(C.owner):null,Y=C&&A?r(C.owner):null,q=!!(C&&A&&Y),k=q?A.props??{}:p,J=q?e=>v.replaceComponent(Y.zone,Y.index,{...A,props:e}):Se,V=q?C.kind:Lt(d?.type,o),P=Oe(k,V),u=[{partKey:V,face:re(k,V,N,W),sizeGroup:N?.sizeGroup??null,base:N?.base??dn,style:P}],Be=en(u,e=>e.sizeGroup),De=Vt(N?.inks),I=(e,a)=>{let f=k;for(const b of u)f=E(f,b.partKey,e,a);J(f)},We=e=>e?I("textStyle",e):Q({textStyle:null,role:null}),Q=e=>{let a=k;for(const f of u)for(const[b,te]of Object.entries(e))a=E(a,f.partKey,b,te??null);J(a)},Z=x==="text"||x==="textarea",{text:ge,hidden:O}=U(G),L=y?.[vt]?.label??o,xe=O?l("Show {label} on the slide",{label:l(L)}):l("Hide {label} on the slide",{label:l(L)}),be=h("div",{className:"sf-field-head",children:[t(ot,{}),t("span",{className:"sf-field-label sf-field-label--inline",children:l(L)}),Z&&t(rt,{content:xe,children:t("button",{type:"button",className:"sf-field-eye","aria-pressed":O,"aria-label":xe,onClick:()=>X({text:ge,hidden:!O}),children:O?t(Ne,{name:"eye-off",size:14}):t(Ne,{name:"eye",size:14})})})]}),Pe=!ue&&fe,Me=!!x&&(wt(y)||ue||O||!fe),we=re(k,V,N,W),je=we.kind==="role"?we.role:null,ee=zt(P)??yt(je),ve=ht(R.saved,R.old),Ge=Object.entries(P).filter(([e,a])=>e!=="role"&&e!=="textStyle"&&a!==void 0).length,He=()=>{let e=k;for(const a of u){const{role:f,textStyle:b}=a.style;e=At(e,a.partKey),f&&(e=E(e,a.partKey,"role",f)),b&&(e=E(e,a.partKey,"textStyle",b))}J(e)},w=ee,$e=ft(u[0].style),Xe=w?ve.find(e=>e.id===w)?.name??w:"",Ye=()=>{j(!1),w&&(R.write(mt({saved:R.saved,old:R.old,styleId:w,values:pt(u[0].style)}),!0),He())};return h(nn,{sectionName:ce?.label??d.type,onBack:s,textEditor:t("div",{ref:ae,className:"sf-part-text",children:Me?t(it,{text:ge,onTextChange:e=>X(Z?{text:e,hidden:O}:e),multiline:Ct(x),markup:x!=="plainText",styled:!1,style:u[0].style,base:u[0].base,setValue:Q,colors:De,placeholder:se(kt(y))??void 0,ariaLabel:l(L),head:be,typedOnCanvas:F===T}):x?Z?be:null:t(et,{field:y,name:o,value:Ue,onChange:X,id:`sf-part-${n}-${o}`})}),children:[pe&&t(Ee,{source:pe,slug:Re(p),menuId:$t(p)}),Pe&&t(st,{style:{value:ee??"",options:[{value:"",label:l("No style"),description:l("Section’s own")},...ve.map(e=>({value:e.id,label:e.name,description:e.values.font?le(e.values.font)?.label:void 0}))],onChange:e=>We(e||null),changed:Ge>0,onEditStyles:i,onUpdateStyle:w&&$e?()=>j(!0):void 0},font:{value:P.font??"",styleValue:le(u[0].base.fontKey)?.label,options:Nt.map(e=>({label:e.label,value:e.key})),onChange:e=>I("font",e||null)},italic:{value:P.italic,styleValue:cn(_e,ee),onChange:e=>I("italic",e??null)},cells:at(u[0].style,u[0].base,Q,{phone:Ve}),align:{value:P.align??"",styleValue:u[0].base.align,onChange:e=>I("align",e||null)},letterCase:{value:P.case??"",styleValue:u[0].base.case,onChange:e=>I("case",e||null)}}),Ae&&w&&t(dt,{styleName:Xe,onCancel:()=>j(!1),onConfirm:Ye}),Pe&&Be===null&&t("p",{className:"es-field-hint sf-hint-keep",children:l("Fixed size — the site’s Text setting doesn’t resize this.")})]})}function cn(n,o){return!o||!Array.isArray(n)?!1:n.find(i=>i?.id===o)?.values?.italic===!0}const dn={fontKey:"",sizePx:16,weight:400,lineRatio:1.4,letterEm:0,align:"left",case:"none",paddingPx:0,widthPx:_t};export{nn as PartPanelBody,Qe as PartResetDot,Ee as PartSourceNote,tn as PartStyleSelect,an as default,re as partFace};

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

@@ -5,6 +5,12 @@ export declare const PINNED_CHROME_NOTES: {
     readonly conflict: "The header and footer were changed somewhere else. Nothing you change in them here is saved. Reload to get the latest.";
     readonly save: "The header and footer did not save. They are sent again with your next change.";
 };
+export declare const SHARED_SECTION_NOTES: {
+    readonly load: "{section} could not load. It stays on the page as it was. Reload to try again.";
+    readonly lock: "{name} is editing {section}. Nothing you change in it here is saved.";
+    readonly conflict: "{section} was changed somewhere else. Nothing you change in it here is saved. Reload to get the latest.";
+    readonly save: "{section} did not save. It is sent again with your next change.";
+};
 export declare const PINNED_CHROME_LOAD_NOTICE: "The header and footer could not load. They are hidden for now and nothing in them is saved. Reload to try again.";
 export declare const PINNED_CHROME_LOCK_NOTICE: "{name} is editing the header and footer. Nothing you change in them here is saved.";
 export declare const PINNED_CHROME_CONFLICT_NOTICE: "The header and footer were changed somewhere else. Nothing you change in them here is saved. Reload to get the latest.";

package/dist/editor/components/PinnedChromeLoadNotice.js

@@ -1 +1 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import{useEffect as d,useState as s}from"react";import{Banner as c}from"efficient-shell/ui";import{useOpenPinnedChromeReport as l,usePinnedChromeState as h}from"./usePinnedChromeState.js";import{say as n}from"../../format/lib/editor-words.js";const r={load:"The header and footer could not load. They are hidden for now and nothing in them is saved. Reload to try again.",lock:"{name} is editing the header and footer. Nothing you change in them here is saved.",conflict:"The header and footer were changed somewhere else. Nothing you change in them here is saved. Reload to get the latest.",save:"The header and footer did not save. They are sent again with your next change."},u=r.load,f=r.lock,m=r.conflict,N=r.save;function p(e){return e?e.loadFailed?n(u):e.lockHolder?n(f,{name:e.lockHolder.name||n("Somebody else")}):e.conflict?n(m):e.saveFailed?n(N):null:null}function C({report:e}){const o=p(h(e)),[a,i]=s(null);return d(()=>{o||i(null)},[o]),!o||a===o?null:t("aside",{className:"sf-canvas-notice",children:t(c,{tone:"warning",onDismiss:()=>i(o),children:o})})}function T(){return t(C,{report:l()})}export{T as OpenDocumentChromeLoadNotice,m as PINNED_CHROME_CONFLICT_NOTICE,u as PINNED_CHROME_LOAD_NOTICE,f as PINNED_CHROME_LOCK_NOTICE,r as PINNED_CHROME_NOTES,N as PINNED_CHROME_SAVE_NOTICE,C as PinnedChromeLoadNotice,p as pinnedChromeNoticeWords};
+"use client";import{jsx as a}from"react/jsx-runtime";import{useEffect as s,useState as d}from"react";import{Banner as c}from"efficient-shell/ui";import{useOpenPinnedChromeReport as l,usePinnedChromeState as h}from"./usePinnedChromeState.js";import{say as n}from"../../format/lib/editor-words.js";const r={load:"The header and footer could not load. They are hidden for now and nothing in them is saved. Reload to try again.",lock:"{name} is editing the header and footer. Nothing you change in them here is saved.",conflict:"The header and footer were changed somewhere else. Nothing you change in them here is saved. Reload to get the latest.",save:"The header and footer did not save. They are sent again with your next change."},m={load:"{section} could not load. It stays on the page as it was. Reload to try again.",lock:"{name} is editing {section}. Nothing you change in it here is saved.",conflict:"{section} was changed somewhere else. Nothing you change in it here is saved. Reload to get the latest.",save:"{section} did not save. It is sent again with your next change."},u=r.load,f=r.lock,N=r.conflict,g=r.save;function p(o){if(!o)return null;if(o.loadFailed)return n(u);if(o.lockHolder)return n(f,{name:o.lockHolder.name||n("Somebody else")});if(o.conflict)return n(N);if(o.saveFailed)return n(g);const e=o.sections?.[0];if(!e)return null;const i=e.title||n("A shared section"),t=e.holder?.name||n("Somebody else");return n(m[e.problem],{section:i,name:t})}function E({report:o}){const e=p(h(o)),[i,t]=d(null);return s(()=>{e||t(null)},[e]),!e||i===e?null:a("aside",{className:"sf-canvas-notice",children:a(c,{tone:"warning",onDismiss:()=>t(e),children:e})})}function I(){return a(E,{report:l()})}export{I as OpenDocumentChromeLoadNotice,N as PINNED_CHROME_CONFLICT_NOTICE,u as PINNED_CHROME_LOAD_NOTICE,f as PINNED_CHROME_LOCK_NOTICE,r as PINNED_CHROME_NOTES,g as PINNED_CHROME_SAVE_NOTICE,E as PinnedChromeLoadNotice,m as SHARED_SECTION_NOTES,p as pinnedChromeNoticeWords};

package/dist/editor/components/PreviewPartAnchors.js

@@ -1 +1 @@
-"use client";import{jsx as k}from"react/jsx-runtime";import{readInks as L}from"../../format/lib/puck/part-inks.js";import{useEffect as F,useRef as J}from"react";import{markOverlayPortal as z}from"../../format/lib/puck/overlay-portal.js";import{usePreviewParts as M}from"efficient-easel/draw/client";import{usePartStyle as Y}from"./PreviewPartStyleContext.js";import{usePreviewDevice as $}from"efficient-easel/draw/client";import{encodePartId as j}from"efficient-easel/draw";import{PUCK_COMPONENT_ATTR as B,engagePartAnchors as G}from"../lib/puck/part-anchors.js";import{PART_ATTR as R,PART_SELECTED_ATTR as E,PART_STYLE_KIND_ATTR as w,PART_STYLE_OWNER_ATTR as H,partStyleOwnerOf as _}from"../../render/lib/puck/text-parts.js";import{PART_STYLE_PROPERTIES as v,applyPartStyles as x,blockDrawsTextStyle as q,partFontKeyOf as U,partStyleBase as V,partStyleSource as Q}from"../../render/lib/puck/part-styles.js";import{fontRoleOfClassName as X,styleRoleOfClassName as Z}from"../../format/lib/fonts.js";import{typeScaleGroupOfClassName as N}from"../../format/lib/theme.js";import{styleKeyForPart as ee}from"../../format/lib/sections/section-text-kinds.js";function te(a){let o=null,s=null;for(let t=a;t&&(o===null||s===null);t=t.parentElement){const c=t.getAttribute("class");o??=Z(c),s??=N(c)}return{faceRole:o??"body",sizeGroup:s}}function C(a){const o=a.style,s={};for(const r of v)s[r]=o[r]??"",o[r]="";const t=getComputedStyle(a),c=getComputedStyle(a.ownerDocument.documentElement),p=V({fontSize:t.fontSize,fontWeight:t.fontWeight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,textAlign:t.textAlign,textTransform:t.textTransform,paddingTop:t.paddingTop,maxWidth:t.maxWidth},U(t.fontFamily,r=>c.getPropertyValue(r)));for(const r of v)o[r]=s[r];return p}function re({needles:a,styles:o,type:s,children:t}){const c=J(null),{selectedPartId:p}=M(),{setPartStyle:r}=Y(),d=$()==="mobile",y=JSON.stringify(a),S=JSON.stringify(o);return F(()=>{const f=c.current;if(!f)return;const g=[],T=()=>f.parentElement,D=l=>{const n=T();if(!n)return null;const m=new MutationObserver(l);return m.observe(n,{attributes:!0,attributeFilter:[B]}),()=>m.disconnect()},W=l=>{const n=new MutationObserver(l);return n.observe(f,{childList:!0,subtree:!0,characterData:!0}),()=>n.disconnect()};let u=[];g.push(()=>{for(const l of u)l();u=[]});const I=JSON.parse(y),P=JSON.parse(S),K=G(f,I,T,D,(l,n,m)=>{for(const e of u)e();u=[];const h=[];for(const e of m){const i=e,O=z(i);O&&u.push(O),i.getAttribute(R)===p?(i.setAttribute(E,""),h.push(i)):i.removeAttribute(E)}const b=Q(n,p,h,e=>X(e)!==null||N(e)!==null);if(b&&p){const e=b;r({partId:p,...te(e),base:C(e),inks:L(e),...(()=>{const i=_(e);return i?{styleOwner:i}:{}})()})}x(m.filter(e=>!_(e)).map(e=>({element:e,partId:e.getAttribute(R)??""})),P,e=>C(e),e=>ee(s,e),void 0,d,e=>q(s,e));const A=[...f.querySelectorAll(`[${H}="${CSS.escape(n)}"][${w}]`)];A.length&&x(A.map(e=>({element:e,partId:j(n,e.getAttribute(w)??"")})),P,void 0,e=>e,void 0,d)},W);return()=>{K();for(const l of g)l()}},[y,S,p,r,d]),k("div",{ref:c,style:{display:"contents"},children:t})}export{re as default,C as measureStyleBase,te as styleTagsOf};
+"use client";import{jsx as k}from"react/jsx-runtime";import{readInks as L}from"../../format/lib/puck/part-inks.js";import{useEffect as F,useRef as J}from"react";import{markOverlayPortal as z}from"../../format/lib/puck/overlay-portal.js";import{usePreviewParts as M}from"efficient-easel/draw/client";import{usePartStyle as Y}from"./PreviewPartStyleContext.js";import{usePreviewDevice as $}from"efficient-easel/draw/client";import{encodePartId as j}from"efficient-easel/draw";import{PUCK_COMPONENT_ATTR as B,engagePartAnchors as G}from"../lib/puck/part-anchors.js";import{PART_ATTR as R,PART_SELECTED_ATTR as E,PART_STYLE_KIND_ATTR as w,PART_STYLE_OWNER_ATTR as H,partStyleOwnerOf as _}from"../../render/lib/puck/text-parts.js";import{PART_STYLE_PROPERTIES as v,applyPartStyles as x,blockDrawsTextStyle as q,partFontKeyOf as U,partStyleBase as V,partStyleSource as Q}from"../../render/lib/puck/part-styles.js";import{fontRoleOfClassName as X,styleRoleOfClassName as Z}from"../../format/lib/fonts.js";import{typeScaleGroupOfClassName as N}from"../../format/lib/theme.js";import{styleKeyForPart as ee}from"../../format/lib/sections/section-text-kinds.js";function te(a){let o=null,s=null;for(let t=a;t&&(o===null||s===null);t=t.parentElement){const c=t.getAttribute("class");o??=Z(c),s??=N(c)}return{faceRole:o??"body",sizeGroup:s}}function C(a){const o=a.style,s={};for(const r of v)s[r]=o[r]??"",o[r]="";const t=getComputedStyle(a),c=getComputedStyle(a.ownerDocument.documentElement),p=V({fontSize:t.fontSize,fontWeight:t.fontWeight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,textAlign:t.textAlign,textTransform:t.textTransform,paddingTop:t.paddingTop,maxWidth:t.maxWidth},U(t.fontFamily,r=>c.getPropertyValue(r)));for(const r of v)o[r]=s[r];return p}function re({needles:a,styles:o,type:s,children:t}){const c=J(null),{selectedPartId:p}=M(),{setPartStyle:r}=Y(),d=$()==="mobile",y=JSON.stringify(a),S=JSON.stringify(o);return F(()=>{const f=c.current;if(!f)return;const g=[],T=()=>f.parentElement,D=l=>{const n=T();if(!n)return null;const m=new MutationObserver(l);return m.observe(n,{attributes:!0,attributeFilter:[B]}),()=>m.disconnect()},W=l=>{const n=new MutationObserver(l);return n.observe(f,{childList:!0,subtree:!0,characterData:!0}),()=>n.disconnect()};let u=[];g.push(()=>{for(const l of u)l();u=[]});const I=JSON.parse(y),h=JSON.parse(S),K=G(f,I,T,D,(l,n,m)=>{for(const e of u)e();u=[];const P=[];for(const e of m){const i=e,O=z(i);O&&u.push(O),i.getAttribute(R)===p?(i.setAttribute(E,""),P.push(i)):i.removeAttribute(E)}const b=Q(n,p,P,e=>X(e)!==null||N(e)!==null);if(b&&p){const e=b;r({partId:p,...te(e),base:C(e),inks:L(e),...(()=>{const i=_(e);return i?{styleOwner:i}:{}})()})}x(m.filter(e=>!_(e)).map(e=>({element:e,partId:e.getAttribute(R)??""})),h,e=>C(e),e=>ee(s,e),void 0,d,e=>q(s,e));const A=[...f.querySelectorAll(`[${H}="${CSS.escape(n)}"][${w}]`)];A.length&&x(A.map(e=>({element:e,partId:j(n,e.getAttribute(w)??"")})),h,void 0,e=>e,void 0,d)},W);return()=>{K();for(const l of g)l()}},[y,S,p,r,d]),k("div",{ref:c,"data-sf-part-host":"",style:{display:"contents"},children:t})}export{re as default,C as measureStyleBase,te as styleTagsOf};

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

@@ -1,5 +1,5 @@
 import { type TextStyleColour, type TextStyleFont } from "efficient-easel/text-styles";
-import { type OldSiteText, type StoredTextStyle } from "../lib/site-text-styles.js";
+import { type OldSiteText, type StoredTextStyle } from "../../render/lib/text-styles/site-text-styles.js";
 export declare const SITE_FONTS: TextStyleFont[];
 export default function SiteTextStylesField({ saved, old, colours, sizeOf, onChange, openId, onOpenChange, readOnly, withoutSize, }: {
     saved: unknown;

package/dist/editor/components/SiteTextStylesField.js

@@ -1 +1 @@
-"use client";import{jsx as y}from"react/jsx-runtime";import{useState as O}from"react";import{TextStylesList as v}from"efficient-easel/text-styles";import{FONT_OPTIONS as x}from"../../format/lib/fonts.js";import{usePreviewDevice as I}from"efficient-easel/draw/client";import{applyListChange as _,resolveTextStyles as C,toPanelStyles as E}from"../lib/site-text-styles.js";const c=["font","color","size","weight","emphasis","lineSpacing","letterSpacing","paragraphSpacing","letterCase","largestSize"],b=["size","lineSpacing","letterSpacing","letterCase"],k=500,w=x.map(e=>({value:e.key,label:e.label,family:`var(${e.cssVar})`,italic:e.italicLoaded}));function L({saved:e,old:s,colours:p,sizeOf:o,onChange:f,openId:a,onOpenChange:S,readOnly:d=!1,withoutSize:g=!1}){const[m,u]=O(null),T=I()==="mobile",l=C(e,s),r=E(l,o);return y(v,{styles:r,onChange:t=>f(_({saved:e,old:s,cur:r,next:t,sizeOf:o})),fonts:w,colours:p,settings:g?c.filter(t=>t!=="size"):c,auto:b,openId:a===void 0?m:a,onOpenChange:S??u,readOnly:d,device:T?"phone":"desktop",fallback:t=>{const n=l.find(h=>h.id===(t.kind==="heading"?"heading-1":"body-1")),i={};return n?.values.font&&t.id!==n.id&&(i.font=n.values.font),t.kind==="heading"&&(i.weight=k),i}})}export{w as SITE_FONTS,L as default};
+"use client";import{jsx as y}from"react/jsx-runtime";import{useState as O}from"react";import{TextStylesList as v}from"efficient-easel/text-styles";import{FONT_OPTIONS as x}from"../../format/lib/fonts.js";import{usePreviewDevice as I}from"efficient-easel/draw/client";import{applyListChange as _,resolveTextStyles as C,toPanelStyles as E}from"../../render/lib/text-styles/site-text-styles.js";const c=["font","color","size","weight","emphasis","lineSpacing","letterSpacing","paragraphSpacing","letterCase","largestSize"],b=["size","lineSpacing","letterSpacing","letterCase"],k=500,w=x.map(e=>({value:e.key,label:e.label,family:`var(${e.cssVar})`,italic:e.italicLoaded}));function L({saved:e,old:s,colours:p,sizeOf:o,onChange:f,openId:a,onOpenChange:S,readOnly:d=!1,withoutSize:g=!1}){const[m,u]=O(null),T=I()==="mobile",l=C(e,s),r=E(l,o);return y(v,{styles:r,onChange:t=>f(_({saved:e,old:s,cur:r,next:t,sizeOf:o})),fonts:w,colours:p,settings:g?c.filter(t=>t!=="size"):c,auto:b,openId:a===void 0?m:a,onOpenChange:S??u,readOnly:d,device:T?"phone":"desktop",fallback:t=>{const n=l.find(h=>h.id===(t.kind==="heading"?"heading-1":"body-1")),i={};return n?.values.font&&t.id!==n.id&&(i.font=n.values.font),t.kind==="heading"&&(i.weight=k),i}})}export{w as SITE_FONTS,L as default};

package/dist/editor/components/StorefrontEditor.js

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

package/dist/editor/components/ThemeCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as i,Fragment as _}from"react/jsx-runtime";import{SettingsField as b,SettingsGroupSub as L}from"efficient-easel/panel";import{Button as p}from"efficient-shell/ui";import O from"./ThemeColourField.js";import{say as o}from"../../format/lib/editor-words.js";import{ColourControl as k}from"../lib/puck/ColourControl.js";import{ButtonIcon as A,GroundIcon as D,LayoutIcon as j,SquareIcon as z,TextSmallIcon as P,TypeIcon as B}from"efficient-easel/icons";import{DEFAULT_THEMES as v,GRADE_LABEL as I,contrastRatio as T,gradeContrast as E,normalizeThemeColors as g,resolvedButtonInk as R,themeButtonColour as S,themeButtonInk as w}from"../../format/lib/theme.js";const G=t=>o("Theme {n}",{n:t+1});function $({colors:t}){const n=g(t),r=S(t)??n.accent;return i("span",{className:"sf-theme-page",style:{background:n.background,color:n.text},"aria-hidden":!0,children:[e("span",{className:"sf-theme-eyebrow",style:{color:n.muted},children:o("label")}),i("span",{className:"sf-theme-headline",children:[o("Heading")," ",e("span",{style:{color:n.accent},children:o("accent")})]}),e("span",{className:"sf-theme-body",children:o("body text")}),i("span",{className:"sf-theme-row",children:[e("span",{className:"sf-theme-btn",style:{background:r,color:R(t,n.accent)},children:o("button")}),e("span",{className:"sf-theme-mini",style:{background:n.surface,borderColor:n.line},children:o("card")})]})]})}const y={"Text color":e(B,{}),"Label color":e(P,{}),Background:e(D,{}),"Panels & cards":e(j,{}),Borders:e(z,{}),"Button color":e(A,{}),"Button text color":e(B,{})};function H({label:t,colorKey:n,value:r,onChange:c,idPrefix:a="sf-theme-ink"}){const s=`${a}-${n}`;return e(b,{label:o(t),icon:y[t],htmlFor:s,action:e(k,{id:s,label:o(t),value:r,onChange:l=>c(n,l)})})}function M({value:t,accent:n,onChange:r,idPrefix:c="sf-theme-ink"}){const a=`${c}-button`,s=/^#[0-9a-fA-F]{6}$/.test(t??""),l=s?t:n;return e(b,{label:o("Button color"),icon:y["Button color"],htmlFor:a,action:e(k,{id:a,label:o("Button color"),value:l,caption:s?l:o("Main"),onChange:r})})}function J({colors:t,accent:n,onChange:r,idPrefix:c="sf-theme-ink"}){const a=`${c}-button-ink`,s=w(t),l=R(t,n),d=S(t)??n,u=E(T(l,d)??0);return e(b,{label:o("Button text color"),icon:y["Button text color"],hint:s&&u!=="good"?o("{grade} on the button",{grade:o(I[u])}):void 0,htmlFor:a,action:e(k,{id:a,label:o("Button text color"),value:l,caption:s?l:o("Auto"),onChange:r})})}const U=[{colour:!0},{label:"Text color",key:"text"},{label:"Label color",key:"muted"},{button:!0},{buttonInk:!0},{group:"Surfaces"},{label:"Background",key:"background"},{label:"Panels & cards",key:"surface"},{label:"Borders",key:"line"}];function W({colors:t,onChange:n,idPrefix:r}){const c=g(t);return e(_,{children:U.map(a=>"colour"in a?e(O,{value:t,onChange:n},"colour"):"group"in a?e(L,{title:o(a.group)},a.group):"button"in a?e(M,{value:t.button,accent:c.accent,onChange:s=>n({...t,button:s}),idPrefix:r},"button"):"buttonInk"in a?e(J,{colors:t,accent:c.accent,onChange:s=>n({...t,buttonInk:s}),idPrefix:r},"buttonInk"):e(H,{label:a.label,colorKey:a.key,value:c[a.key],onChange:(s,l)=>n({...t,[s]:l}),idPrefix:r},a.key))})}function te({index:t,colors:n,selected:r,role:c="radio",open:a,editable:s=!0,onPick:l,onEdit:d,onChangeColors:u}){const m=g(n),h=G(t),f=t<v.length&&!n.brandInk?v[t]:null,N=E(T(m.text,m.background)??0),C=f?JSON.stringify(n)!==JSON.stringify(f):!1,x=a!==void 0;return i("div",{className:`sf-theme-card${r?" is-selected":""}`,children:[e("button",{type:"button",role:c,"aria-checked":c==="radio"?r:void 0,"aria-selected":c==="option"?r:void 0,"aria-label":h,className:"sf-theme-pick",onClick:l,children:e($,{colors:n})}),i("div",{className:"sf-theme-foot",children:[e("span",{className:"sf-theme-name",children:h}),N!=="good"&&e("span",{className:"sf-theme-warn",children:o(I[N])}),s&&d&&e(p,{variant:a?"primary":"secondary",size:"sm",className:"sf-theme-edit","aria-expanded":x?a:void 0,"aria-controls":x?`sf-theme-colours-${t}`:void 0,"aria-label":a?o("Done {name}",{name:h}):o("Edit {name}",{name:h}),onClick:d,children:a?o("Done"):o("Edit")})]}),a&&i("div",{id:`sf-theme-colours-${t}`,className:"sf-theme-colours",children:[e(W,{colors:n,onChange:F=>u?.(F)}),f&&e(p,{variant:"link",size:"sm",className:"sf-theme-reset",disabled:!C,onClick:()=>u?.({...f}),children:C?o("Reset {name} to the preset",{name:h}):o("Not changed")})]})]})}function ne({colors:t,name:n,nameId:r,open:c,menuId:a,labelId:s,buttonRef:l,onClick:d,onKeyDown:u,onEdit:m}){return i("div",{className:"sf-secttheme-btn",children:[e("button",{ref:l,type:"button",className:"sf-theme-pick","aria-expanded":c,"aria-controls":a,"aria-labelledby":`${s} ${r}`,onClick:d,onKeyDown:u,children:t?e($,{colors:t}):e("span",{className:"sf-secttheme-nopreview","aria-hidden":"true"})}),i("div",{className:"sf-theme-foot",children:[e("span",{id:r,className:"sf-theme-name",children:n}),m&&e(p,{variant:"secondary",size:"sm",className:"sf-theme-edit","aria-label":o("Edit {name}",{name:n}),onClick:m,children:o("Edit")}),e("button",{type:"button",className:"sf-secttheme-caret","aria-hidden":"true",tabIndex:-1,onClick:d,children:e("span",{className:"sf-multi-caret",children:"▾"})})]})]})}export{te as ThemeCard,ne as ThemeCardTrigger,H as ThemeColourRow,W as ThemeColourRows,$ as ThemePreview,G as themeName};
+"use client";import{jsx as e,jsxs as d,Fragment as _}from"react/jsx-runtime";import{SettingsField as b,SettingsGroupSub as z}from"efficient-easel/panel";import{Button as p,IconButton as L,Tooltip as O}from"efficient-shell/ui";import A from"./ThemeColourField.js";import{say as o}from"../../format/lib/editor-words.js";import{ColourControl as k}from"../lib/puck/ColourControl.js";import{ButtonIcon as j,ChevronDownIcon as w,ChevronUpIcon as D,GroundIcon as P,LayoutIcon as G,SquareIcon as H,TextSmallIcon as M,TypeIcon as x}from"efficient-easel/icons";import{DEFAULT_THEMES as I,GRADE_LABEL as v,contrastRatio as T,gradeContrast as E,normalizeThemeColors as g,resolvedButtonInk as R,themeButtonColour as S,themeButtonInk as U}from"../../format/lib/theme.js";const J=t=>o("Theme {n}",{n:t+1});function $({colors:t}){const n=g(t),r=S(t)??n.accent;return d("span",{className:"sf-theme-page",style:{background:n.background,color:n.text},"aria-hidden":!0,children:[e("span",{className:"sf-theme-eyebrow",style:{color:n.muted},children:o("label")}),d("span",{className:"sf-theme-headline",children:[o("Heading")," ",e("span",{style:{color:n.accent},children:o("accent")})]}),e("span",{className:"sf-theme-body",children:o("body text")}),d("span",{className:"sf-theme-row",children:[e("span",{className:"sf-theme-btn",style:{background:r,color:R(t,n.accent)},children:o("button")}),e("span",{className:"sf-theme-mini",style:{background:n.surface,borderColor:n.line},children:o("card")})]})]})}const N={"Text color":e(x,{}),"Label color":e(M,{}),Background:e(P,{}),"Panels & cards":e(G,{}),Borders:e(H,{}),"Button color":e(j,{}),"Button text color":e(x,{})};function W({label:t,colorKey:n,value:r,onChange:c,idPrefix:a="sf-theme-ink"}){const s=`${a}-${n}`;return e(b,{label:o(t),icon:N[t],htmlFor:s,action:e(k,{id:s,label:o(t),value:r,onChange:l=>c(n,l)})})}function q({value:t,accent:n,onChange:r,idPrefix:c="sf-theme-ink"}){const a=`${c}-button`,s=/^#[0-9a-fA-F]{6}$/.test(t??""),l=s?t:n;return e(b,{label:o("Button color"),icon:N["Button color"],htmlFor:a,action:e(k,{id:a,label:o("Button color"),value:l,caption:s?l:o("Main"),onChange:r})})}function K({colors:t,accent:n,onChange:r,idPrefix:c="sf-theme-ink"}){const a=`${c}-button-ink`,s=U(t),l=R(t,n),i=S(t)??n,u=E(T(l,i)??0);return e(b,{label:o("Button text color"),icon:N["Button text color"],hint:s&&u!=="good"?o("{grade} on the button",{grade:o(v[u])}):void 0,htmlFor:a,action:e(k,{id:a,label:o("Button text color"),value:l,caption:s?l:o("Auto"),onChange:r})})}const Q=[{colour:!0},{label:"Text color",key:"text"},{label:"Label color",key:"muted"},{button:!0},{buttonInk:!0},{group:"Surfaces"},{label:"Background",key:"background"},{label:"Panels & cards",key:"surface"},{label:"Borders",key:"line"}];function V({colors:t,onChange:n,idPrefix:r}){const c=g(t);return e(_,{children:Q.map(a=>"colour"in a?e(A,{value:t,onChange:n},"colour"):"group"in a?e(z,{title:o(a.group)},a.group):"button"in a?e(q,{value:t.button,accent:c.accent,onChange:s=>n({...t,button:s}),idPrefix:r},"button"):"buttonInk"in a?e(K,{colors:t,accent:c.accent,onChange:s=>n({...t,buttonInk:s}),idPrefix:r},"buttonInk"):e(W,{label:a.label,colorKey:a.key,value:c[a.key],onChange:(s,l)=>n({...t,[s]:l}),idPrefix:r},a.key))})}function se({index:t,colors:n,selected:r,role:c="radio",open:a,editable:s=!0,onPick:l,onEdit:i,onChangeColors:u}){const h=g(n),m=J(t),f=t<I.length&&!n.brandInk?I[t]:null,y=E(T(h.text,h.background)??0),C=f?JSON.stringify(n)!==JSON.stringify(f):!1,B=a!==void 0;return d("div",{className:`sf-theme-card${r?" is-selected":""}`,children:[e("button",{type:"button",role:c,"aria-checked":c==="radio"?r:void 0,"aria-selected":c==="option"?r:void 0,"aria-label":m,className:"sf-theme-pick",onClick:l,children:e($,{colors:n})}),d("div",{className:"sf-theme-foot",children:[e("span",{className:"sf-theme-name",children:m}),y!=="good"&&e("span",{className:"sf-theme-warn",children:o(v[y])}),s&&i&&B&&e("span",{className:"sf-theme-edit",children:e(O,{content:a?o("Collapse"):o("Edit colors"),children:e(L,{size:"sm","aria-expanded":a,"aria-controls":`sf-theme-colours-${t}`,"aria-label":a?o("Collapse {name}",{name:m}):o("Edit colors for {name}",{name:m}),onClick:i,children:a?e(D,{size:14}):e(w,{size:14})})})}),s&&i&&!B&&e(p,{variant:"secondary",size:"sm",className:"sf-theme-edit","aria-label":o("Edit {name}",{name:m}),onClick:i,children:o("Edit")})]}),a&&d("div",{id:`sf-theme-colours-${t}`,className:"sf-theme-colours",children:[e(V,{colors:n,onChange:F=>u?.(F)}),f&&e(p,{variant:"link",size:"sm",className:"sf-theme-reset",disabled:!C,onClick:()=>u?.({...f}),children:C?o("Reset {name} to the preset",{name:m}):o("Not changed")})]})]})}function re({colors:t,name:n,nameId:r,open:c,menuId:a,labelId:s,buttonRef:l,onClick:i,onKeyDown:u,onEdit:h}){return d("div",{className:"sf-secttheme-btn",children:[e("button",{ref:l,type:"button",className:"sf-theme-pick","aria-expanded":c,"aria-controls":a,"aria-labelledby":`${s} ${r}`,onClick:i,onKeyDown:u,children:t?e($,{colors:t}):e("span",{className:"sf-secttheme-nopreview","aria-hidden":"true"})}),d("div",{className:"sf-theme-foot",children:[e("span",{id:r,className:"sf-theme-name",children:n}),h&&e(p,{variant:"secondary",size:"sm",className:"sf-theme-edit","aria-label":o("Edit {name}",{name:n}),onClick:h,children:o("Edit")}),e("button",{type:"button",className:"sf-secttheme-caret","aria-hidden":"true",tabIndex:-1,onClick:i,children:e("span",{className:"sf-multi-caret",children:"▾"})})]})]})}export{se as ThemeCard,re as ThemeCardTrigger,W as ThemeColourRow,V as ThemeColourRows,$ as ThemePreview,J as themeName};

package/dist/editor/components/WebsiteScreenParts.js

@@ -1 +1 @@
-"use client";import{jsx as n,Fragment as A,jsxs as _}from"react/jsx-runtime";import{useCallback as C,useEffect as b,useRef as Q,useState as $}from"react";import{Button as ee,Tooltip as te}from"efficient-shell/ui";import{SettingsSwitch as oe}from"efficient-easel/panel";import{PagesIcon as re,StylesIcon as ne}from"efficient-easel/rail";import{PaletteIcon as ie}from"efficient-shell/icons/efficient";import{TemplateIcon as se}from"efficient-easel/icons";import{Subtree as ae,TreeRow as y}from"efficient-easel/tree";import{useEasel as ce}from"efficient-easel/easel";import{useEaselStrings as B}from"efficient-easel/strings";import{LocationsTreeContext as de}from"./LocationsTreeContext.js";import le from"./PagesPanel.js";import{usePreviewChat as pe}from"./PreviewChatContext.js";import{PREVIEW_DEVICES as me}from"./preview-devices.js";import{PreviewDeviceContext as fe}from"efficient-easel/draw/client";import{usePreviewHeader as ue}from"../../render/components/PreviewHeaderContext.js";import{usePreviewSocial as Se}from"../../render/components/PreviewSocialContext.js";import{usePreviewSurface as we}from"./PreviewSurfaceContext.js";import{TICKER_PART_LABEL as Ee,usePreviewTicker as Pe}from"../../render/components/PreviewTickerContext.js";import{usePreviewHeroPart as Te}from"../../render/components/PreviewHeroPartContext.js";import{HERO_MEDIA_PARTS as he,HERO_PART_MODE as H,heroMediaRows as be,heroPartId as N,readHeroPartId as Ie}from"../../render/lib/puck/hero-media-parts.js";import ge,{CHAT_MODE as ve,HEADER_MODE as D,SOCIAL_MODE as ke,WEBSITE_MODE as W}from"./SectionEditor.js";import L from"./SectionIcon.js";import _e from"./SectionThumbnail.js";import{useScreenDocument as R}from"efficient-easel/screen/components/ScreenDocumentContext";import Ce from"./StylesPanel.js";import{LOCATIONS_TYPE as Le,useLocationsTree as Re}from"./useLocationsTree.js";import{usePinnedChromeSeed as Oe}from"./usePinnedChromeSeed.js";import{usePreviewHref as Ae}from"./usePreviewHref.js";import{WebsitePreviewButton as ye}from"./WebsitePreviewButton.js";import{SITE_STYLES_TABS as Be,SITE_STYLES_TEXT_TAB as He,useWebsiteName as Ne}from"./WebsiteSettingsPanel.js";import{useWebsiteMainAction as De}from"./useWebsiteMainAction.js";import{VersionHistory as We}from"./VersionHistoryDrawer.js";import{useEaselSession as Ve}from"efficient-easel/screen/lib/session-context";import{useOpenPageName as Me}from"../lib/page-rows.js";import{HERO_GROUP_TYPE as xe,heroGroupNestDepth as Ye}from"../../format/lib/hero-group-placement.js";import{stripMarkup as Fe}from"../../format/lib/markup.js";import{categoryShortLabel as Ge,PINNED_SECTION_TYPE as ze}from"../lib/puck/add-palette.js";import{canAddTo as Ke}from"../lib/puck/add-target.js";import{blockIsOffered as je}from"../lib/puck/block-offer.js";import{sectionIdOfBoxZone as Ue,setBookingPreview as Ze}from"../../render/lib/puck/booking-preview.js";import{footerBlockRowName as qe}from"../../format/lib/puck/footer-block-row-name.js";import{FOOTER_TYPE as Xe,HEADER_TYPE as V}from"../lib/puck/footer-blocks.js";import{leftViewForSelection as Je,readLeftView as Qe,resolveLeftView as $e,writeLeftView as et}from"../../format/lib/puck/left-view.js";import{websiteIsLockedBlock as tt}from"../lib/puck/locked-blocks.js";import{everyPageNotice as ot,noOwnTab as rt,pinnedReach as M,websiteDuplicateBlocked as nt}from"../lib/puck/every-page.js";import{pinnedChromeInPlace as v}from"../../format/lib/pinned-chrome-lock.js";import{scrollPreviewToSection as it,scrollPreviewToTop as x}from"efficient-easel/screen/lib/puck/preview-dom";import{SiteCanvas as st}from"../lib/puck/overrides.js";import{labelAtLevel as at}from"../../format/lib/puck/section-catalog.js";import{editorWords as ct,say as c}from"../../format/lib/editor-words.js";import{SECTION_DESCRIPTIONS as dt}from"../../format/lib/puck/section-descriptions.js";import{groupAccepts as lt,isSectionGroupType as pt,sectionGroupZone as mt,SITE_FOOTER_TYPE as Y,SITE_HEADER_TYPE as ft}from"../../format/lib/puck/section-groups.js";import{resolveSaveAsTemplateAction as ut,SAVE_AS_TEMPLATE_EVENT as St}from"../../format/lib/save-as-template-action.js";import{newSectionNode as wt}from"../lib/sections/new-section-node.js";import{useHostProducts as Et}from"../lib/use-host-products.js";import{backendOf as Pt}from"../lib/website-session.js";function F({mode:e,open:t}){const{setSelectedHeroId:o,setSelectHandler:r}=Pe(),d=B().tree,l=e,p=l.kind==="ticker"?l.heroId:null,a=C(i=>{if(!i)return;t({kind:"ticker",heroId:i}),it(i)},[t]);return b(()=>{o(p)},[p,o]),b(()=>{r(a)},[r,a]),{partRows:(i,{rowClick:u})=>{const m=String(i.props.id);return i.type==="Hero"&&n(y,{icon:n(L,{type:"ticker",size:13}),name:c(Ee),onSelect:()=>a(m),selected:p===m,rowProps:{onClick:u(()=>a(m))},words:d})}}}function G({mode:e,select:t}){const{setSelectedHeroPart:o,setSelectHandler:r}=Te(),d=B().tree,{appState:l}=ce(f=>f),p=l.data.content??[],a=Q(p);a.current=p;const i=e,u=he.find(f=>H[f]===i.kind),m=u&&"nodeId"in i?N(String(i.nodeId),u):null,E=C(f=>{const s=Ie(f);if(!s)return;const P=a.current.findIndex(S=>String(S.props.id)===s.nodeId);if(P<0)return;const h={kind:H[s.part],nodeId:s.nodeId};t({index:P},h)},[t]);return b(()=>{o(m)},[m,o]),b(()=>{r(E)},[r,E]),{partRows:(f,{rowClick:s})=>{const P=String(f.props.id),h=be(f);if(h.length===0)return null;const S=g=>{const I=N(P,g.part);return n(y,{icon:n(L,{type:g.part==="media"?"heroMedia":"heroImage",size:13}),name:c(g.label),onSelect:()=>E(I),selected:m===I,rowProps:{onClick:s(()=>E(I))},words:d},I)},[w,...T]=h;return _(A,{children:[S(w),T.length>0&&n(ae,{children:T.map(S)})]})}}}function z(e,t){return{partRows:(o,r)=>_(A,{children:[e.partRows?.(o,r),t.partRows?.(o,r)]})}}function Tt(e){const{adapter:t,capabilities:o,currentSlug:r,siteId:d,docId:l,hasUnsavedEdits:p,bridgeCapabilities:a,notifyParent:i,token:u}=R(),{hasPreviewLink:m}=o,E=Pt(Ve()).preview?.draftLink,f=De(e.data),s=ut({hasTrustedConsole:!!u,canCreatePlatformTemplate:a.canCreatePlatformTemplate,capabilities:o,siteId:d,hasUnsavedEdits:p}),P=C(()=>{!d||!r||i(St,{siteId:d,slug:r})},[i,d,r]),h=Ae({pageSlug:r,siteId:d,token:u}),S=t.previewHref?.(r)??h;return{barLead:()=>s.visible&&n(te,{side:"bottom",content:s.enabled?c("Save this website as a platform template"):c(s.disabledReason),children:n("span",{className:"sf-tip-disabled",tabIndex:s.enabled?void 0:0,children:n(ee,{variant:"secondary",disabled:!s.enabled,onClick:P,rightIcon:n(se,{size:15}),children:c("Save as Template")})})}),barTrail:()=>m&&r&&n(ye,{liveHref:S,pageId:l??null,draftLink:E}),mainAction:f}}function ht(e,t){const{capabilities:o,templateId:r,siteId:d,tokenRef:l,navigate:p}=R(),{hasSiteTheme:a,explainsSiteSettings:i}=o,u=w=>t.setView(w),[m,E]=$(Be[0].id),{surface:f,setSurface:s}=we(),P=()=>{if(a){u("styles"),t.reveal(),x();return}e.show(W),e.reveal(),x()},h={id:"pages",label:c("Pages"),icon:n(re,{}),panel:({onHide:w})=>n(le,{activeSurface:f,onPreviewSurface:s,onNavigate:T=>{s(null),p(r?{kind:"template",id:r,pageSlug:T}:{kind:"page",slug:T,siteId:d??void 0})},onClose:w})},S=[];return!a&&i&&S.push({id:"appearance",label:c("Appearance"),icon:n(ie,{}),active:e.kind==="website",onSelect:P}),a&&S.push({id:"styles",label:c("Site styles"),icon:n(ne,{}),panel:({onHide:w,notify:T})=>n(Ce,{tokenRef:l,siteId:d??void 0,onClose:w,onNotify:T,tab:m,onTabChange:E})}),{railLead:[h],railTrail:S,resolveLeftView:(w,T)=>$e(w,a,T),openSettings:P,openStyles:()=>{E(He),u("styles")}}}function bt(e,t,o,r){const{kind:d,open:l}=e,{selected:p,zoneOf:a}=t;b(()=>{Ze(p?.type==="BookingBox"&&p.props.region==="confirm"?Ue(a(String(p.props.id))):null)},[p?.props.id]);const i=Re(e,t),{capabilities:{hasSiteSettings:u}}=R(),{setSelected:m,setSelectHandler:E}=ue(),{chat:f,setChat:s,setSelected:P,setSelectHandler:h}=pe(),S=d==="header";b(()=>{m(S)},[S,m]),b(()=>{E(()=>l(D))},[E,l]);const w=C(()=>l(ve),[l]),T=d==="chat";b(()=>{P(T)},[T,P]),b(()=>{h(w)},[h,w]);const{setOpenHandler:g}=Se(),I=C(()=>l(ke),[l]);b(()=>{g(I)},[g,I]);const U=z(F(e),G(e)),Z=Tt(t),q=ht(e,r),X=o.device;return{...U,...Z,...q,hasOwnRows:k=>k.type===Le,ownRows:i.renderLocationTree,sectionPressed:i.sectionPressed,wrap:k=>n(de.Provider,{value:!0,children:_(fe.Provider,{value:X,children:[k,n(We,{})]})}),addPanelRow:k=>u?_("div",{className:"sf-addside-sitewide",children:[n("span",{className:"sf-addside-sitewide-glyph","aria-hidden":"true",children:n(L,{type:"chat",size:16})}),_("button",{type:"button",className:"sf-addside-sitewide-name",onClick:()=>{k(),w()},children:[c("Live chat"),n("span",{className:"sf-addside-sitewide-desc",children:c("A chat bubble on every page")})]}),n(oe,{checked:f.enabled,onChange:J=>s({enabled:J}),ariaLabel:c("Show the chat bubble on the whole site")})]}):void 0}}let K=null,O=new WeakMap;function It(e){const t=ct();if(!e||!t)return e;K!==t&&(K=t,O=new WeakMap);let o=O.get(e);return o||(o={...e,choices:e.choices?e.choices.map(r=>({...r,label:c(r.label)})):null,spec:e.spec?{...e.spec,addLabel:c(e.spec.addLabel)}:null},O.set(e,o)),o}const gt={isLockedBlock:tt,duplicateBlocked:nt,nestDepth:(e,t,o)=>t===xe?Ye(e,o):0,newSectionNode:wt,canAddTo:(e,t)=>It(Ke(e,t)),blockIsOffered:je},vt=new Proxy(dt,{get:(e,t)=>{const o=Reflect.get(e,t);return typeof o=="string"?c(o):o}}),kt={labelAtLevel:(e,t,o)=>c(at(e,t,o)),descriptions:vt,categoryLabel:e=>{const t=Ge(e);return t===void 0?void 0:c(t)},firstSection:ze,blockRowName:qe,plainText:Fe,Icon:L,Thumbnail:_e,useProducts:Et},_t={desktop:2e3,tablet:800,mobile:390},j="desktop",Ct={options:me,initial:j,fluid:j,widths:_t},Lt={read:Qe,write:e=>et(e),forSelection:(e,t)=>Je(e,t)},Rt={first:V,last:Xe,firstGroup:ft,lastGroup:Y,isSectionGroup:pt,sectionGroupZone:mt,panelOf:e=>e===V?D:null,get sharedReach(){return v()?M:void 0},get groupTab(){return v()?rt:void 0},get groupBadge(){return v()?M({type:Y})??void 0:void 0},get changeNotice(){return v()?ot():void 0},get band(){return v()?Ot:void 0},get groupAccepts(){return v()?lt:void 0}},Ot={foldable:!0};function At(e){return{...z(F(e),G(e)),openSettings:()=>e.show(W)}}const Do={useOwnerName:Ne,useDocumentLabel:Me,useBridges:bt,useStandaloneBridges:At,useDocumentPass:Oe,blockRules:gt,blockLook:kt,devices:Ct,leftView:Lt,pinned:Rt,Canvas:st,Inspector:ge};export{Do as WEBSITE_SCREEN};
+"use client";import{jsx as i,Fragment as B,jsxs as _}from"react/jsx-runtime";import{useCallback as C,useEffect as P,useRef as oe,useState as re}from"react";import{Button as ne,Tooltip as ie}from"efficient-shell/ui";import{SettingsSwitch as se}from"efficient-easel/panel";import{PagesIcon as ae,StylesIcon as ce}from"efficient-easel/rail";import{PaletteIcon as de}from"efficient-shell/icons/efficient";import{TemplateIcon as le}from"efficient-easel/icons";import{Subtree as pe,TreeRow as y}from"efficient-easel/tree";import{useEasel as H}from"efficient-easel/easel";import{useEaselStrings as N}from"efficient-easel/strings";import{LocationsTreeContext as me}from"./LocationsTreeContext.js";import fe from"./PagesPanel.js";import{usePreviewChat as ue}from"./PreviewChatContext.js";import{PREVIEW_DEVICES as Se}from"./preview-devices.js";import{PreviewDeviceContext as he}from"efficient-easel/draw/client";import{usePreviewHeader as Ee}from"../../render/components/PreviewHeaderContext.js";import{usePreviewSocial as we}from"../../render/components/PreviewSocialContext.js";import{usePreviewSurface as Te}from"./PreviewSurfaceContext.js";import{TICKER_PART_LABEL as Pe,usePreviewTicker as be}from"../../render/components/PreviewTickerContext.js";import{usePreviewHeroPart as ge}from"../../render/components/PreviewHeroPartContext.js";import{HERO_MEDIA_PARTS as Ie,HERO_PART_MODE as D,heroMediaRows as ve,heroPartId as W,readHeroPartId as ke}from"../../render/lib/puck/hero-media-parts.js";import _e,{CHAT_MODE as Ce,HEADER_MODE as V,SOCIAL_MODE as Re,WEBSITE_MODE as M}from"./SectionEditor.js";import R from"./SectionIcon.js";import Le from"./SectionThumbnail.js";import{useScreenDocument as L}from"efficient-easel/screen/components/ScreenDocumentContext";import Oe from"./StylesPanel.js";import{LOCATIONS_TYPE as Ae,useLocationsTree as Be}from"./useLocationsTree.js";import{usePinnedChromeSeed as ye}from"./usePinnedChromeSeed.js";import{usePreviewHref as He}from"./usePreviewHref.js";import{WebsitePreviewButton as Ne}from"./WebsitePreviewButton.js";import{SITE_STYLES_TABS as De,SITE_STYLES_TEXT_TAB as We,useWebsiteName as Ve}from"./WebsiteSettingsPanel.js";import{useWebsiteMainAction as Me}from"./useWebsiteMainAction.js";import{VersionHistory as xe}from"./VersionHistoryDrawer.js";import{useEaselSession as x}from"efficient-easel/screen/lib/session-context";import{useOpenPageName as Ye}from"../lib/page-rows.js";import{HERO_GROUP_TYPE as Fe,heroGroupNestDepth as Ge}from"../../format/lib/hero-group-placement.js";import{stripMarkup as ze}from"../../format/lib/markup.js";import{categoryShortLabel as Ke,PINNED_SECTION_TYPE as je}from"../lib/puck/add-palette.js";import{canAddTo as Ue}from"../lib/puck/add-target.js";import{blockIsOffered as Ze}from"../lib/puck/block-offer.js";import{sectionIdOfBoxZone as qe,setBookingPreview as Xe}from"../../render/lib/puck/booking-preview.js";import{footerBlockRowName as Je}from"../../format/lib/puck/footer-block-row-name.js";import{FOOTER_TYPE as Qe,HEADER_TYPE as Y}from"../lib/puck/footer-blocks.js";import{leftViewForSelection as $e,readLeftView as et,resolveLeftView as tt,writeLeftView as ot}from"../../format/lib/puck/left-view.js";import{websiteIsLockedBlock as rt}from"../lib/puck/locked-blocks.js";import{everyPageNotice as nt,noOwnTab as it,pinnedReach as F,websiteDuplicateBlocked as st}from"../lib/puck/every-page.js";import{sharedSectionReach as at,WEBSITE_SHARED_SECTIONS as ct}from"../lib/shared-sections-layer.js";import{activeSharedSections as O,setSharedEditor as G}from"../../format/lib/shared-sections-active.js";import{sharedSectionsOf as dt}from"efficient-easel/screen/lib/shared-sections";import{pinnedChromeInPlace as v}from"../../format/lib/pinned-chrome-lock.js";import{scrollPreviewToSection as lt,scrollPreviewToTop as z}from"efficient-easel/screen/lib/puck/preview-dom";import{SiteCanvas as pt}from"../lib/puck/overrides.js";import{labelAtLevel as mt}from"../../format/lib/puck/section-catalog.js";import{editorWords as ft,say as p}from"../../format/lib/editor-words.js";import{SECTION_DESCRIPTIONS as ut}from"../../format/lib/puck/section-descriptions.js";import{groupAccepts as St,isSectionGroupType as ht,sectionGroupZone as Et,SITE_FOOTER_TYPE as K,SITE_HEADER_TYPE as wt}from"../../format/lib/puck/section-groups.js";import{resolveSaveAsTemplateAction as Tt,SAVE_AS_TEMPLATE_EVENT as Pt}from"../../format/lib/save-as-template-action.js";import{newSectionNode as bt}from"../lib/sections/new-section-node.js";import{useHostProducts as gt}from"../lib/use-host-products.js";import{backendOf as It}from"../lib/website-session.js";function j({mode:e,open:t}){const{setSelectedHeroId:o,setSelectHandler:r}=be(),c=N().tree,d=e,n=d.kind==="ticker"?d.heroId:null,a=C(s=>{if(!s)return;t({kind:"ticker",heroId:s}),lt(s)},[t]);return P(()=>{o(n)},[n,o]),P(()=>{r(a)},[r,a]),{partRows:(s,{rowClick:u})=>{const m=String(s.props.id);return s.type==="Hero"&&i(y,{icon:i(R,{type:"ticker",size:13}),name:p(Pe),onSelect:()=>a(m),selected:n===m,rowProps:{onClick:u(()=>a(m))},words:c})}}}function U({mode:e,select:t}){const{setSelectedHeroPart:o,setSelectHandler:r}=ge(),c=N().tree,{appState:d}=H(f=>f),n=d.data.content??[],a=oe(n);a.current=n;const s=e,u=Ie.find(f=>D[f]===s.kind),m=u&&"nodeId"in s?W(String(s.nodeId),u):null,E=C(f=>{const l=ke(f);if(!l)return;const w=a.current.findIndex(S=>String(S.props.id)===l.nodeId);if(w<0)return;const b={kind:D[l.part],nodeId:l.nodeId};t({index:w},b)},[t]);return P(()=>{o(m)},[m,o]),P(()=>{r(E)},[r,E]),{partRows:(f,{rowClick:l})=>{const w=String(f.props.id),b=ve(f);if(b.length===0)return null;const S=I=>{const g=W(w,I.part);return i(y,{icon:i(R,{type:I.part==="media"?"heroMedia":"heroImage",size:13}),name:p(I.label),onSelect:()=>E(g),selected:m===g,rowProps:{onClick:l(()=>E(g))},words:c},g)},[h,...T]=b;return _(B,{children:[S(h),T.length>0&&i(pe,{children:T.map(S)})]})}}}function Z(e,t){return{partRows:(o,r)=>_(B,{children:[e.partRows?.(o,r),t.partRows?.(o,r)]})}}function vt(e){const{adapter:t,capabilities:o,currentSlug:r,siteId:c,docId:d,hasUnsavedEdits:n,bridgeCapabilities:a,notifyParent:s,token:u}=L(),{hasPreviewLink:m}=o,E=It(x()).preview?.draftLink,f=Me(e.data),l=Tt({hasTrustedConsole:!!u,canCreatePlatformTemplate:a.canCreatePlatformTemplate,capabilities:o,siteId:c,hasUnsavedEdits:n}),w=C(()=>{!c||!r||s(Pt,{siteId:c,slug:r})},[s,c,r]),b=He({pageSlug:r,siteId:c,token:u}),S=t.previewHref?.(r)??b;return{barLead:()=>l.visible&&i(ie,{side:"bottom",content:l.enabled?p("Save this website as a platform template"):p(l.disabledReason),children:i("span",{className:"sf-tip-disabled",tabIndex:l.enabled?void 0:0,children:i(ne,{variant:"secondary",disabled:!l.enabled,onClick:w,rightIcon:i(le,{size:15}),children:p("Save as Template")})})}),barTrail:()=>m&&r&&i(Ne,{liveHref:S,pageId:d??null,draftLink:E}),mainAction:f}}function kt(e,t){const{capabilities:o,templateId:r,siteId:c,tokenRef:d,navigate:n}=L(),{hasSiteTheme:a,explainsSiteSettings:s}=o,u=h=>t.setView(h),[m,E]=re(De[0].id),{surface:f,setSurface:l}=Te(),w=()=>{if(a){u("styles"),t.reveal(),z();return}e.show(M),e.reveal(),z()},b={id:"pages",label:p("Pages"),icon:i(ae,{}),panel:({onHide:h})=>i(fe,{activeSurface:f,onPreviewSurface:l,onNavigate:T=>{l(null),n(r?{kind:"template",id:r,pageSlug:T}:{kind:"page",slug:T,siteId:c??void 0})},onClose:h})},S=[];return!a&&s&&S.push({id:"appearance",label:p("Appearance"),icon:i(de,{}),active:e.kind==="website",onSelect:w}),a&&S.push({id:"styles",label:p("Site styles"),icon:i(ce,{}),panel:({onHide:h,notify:T})=>i(Oe,{tokenRef:d,siteId:c??void 0,onClose:h,onNotify:T,tab:m,onTabChange:E})}),{railLead:[b],railTrail:S,resolveLeftView:(h,T)=>tt(h,a,T),openSettings:w,openStyles:()=>{E(We),u("styles")}}}function _t(){const{navigate:e,siteId:t,reloadFromServer:o,docId:r}=L(),c=H(n=>n.config),d=x();P(()=>(G({openPage:n=>e({kind:"page",slug:n.slug,siteId:t??void 0}),reload:()=>{o()},config:c}),()=>G(null)),[e,t,o,c]),P(()=>{const n=O();if(!n||!r)return;let a=!1;return dt(d).list().then(s=>{a||n.learn(s)}).catch(()=>{}),()=>{a=!0}},[r,d])}function Ct(e,t,o,r){const{kind:c,open:d}=e,{selected:n,zoneOf:a}=t;P(()=>{Xe(n?.type==="BookingBox"&&n.props.region==="confirm"?qe(a(String(n.props.id))):null)},[n?.props.id]);const s=Be(e,t),{capabilities:{hasSiteSettings:u}}=L();_t();const{setSelected:m,setSelectHandler:E}=Ee(),{chat:f,setChat:l,setSelected:w,setSelectHandler:b}=ue(),S=c==="header";P(()=>{m(S)},[S,m]),P(()=>{E(()=>d(V))},[E,d]);const h=C(()=>d(Ce),[d]),T=c==="chat";P(()=>{w(T)},[T,w]),P(()=>{b(h)},[b,h]);const{setOpenHandler:I}=we(),g=C(()=>d(Re),[d]);P(()=>{I(g)},[I,g]);const J=Z(j(e),U(e)),Q=vt(t),$=kt(e,r),ee=o.device;return{...J,...Q,...$,hasOwnRows:k=>k.type===Ae,ownRows:s.renderLocationTree,sectionPressed:s.sectionPressed,wrap:k=>i(me.Provider,{value:!0,children:_(he.Provider,{value:ee,children:[k,i(xe,{})]})}),addPanelRow:k=>u?_("div",{className:"sf-addside-sitewide",children:[i("span",{className:"sf-addside-sitewide-glyph","aria-hidden":"true",children:i(R,{type:"chat",size:16})}),_("button",{type:"button",className:"sf-addside-sitewide-name",onClick:()=>{k(),h()},children:[p("Live chat"),i("span",{className:"sf-addside-sitewide-desc",children:p("A chat bubble on every page")})]}),i(se,{checked:f.enabled,onChange:te=>l({enabled:te}),ariaLabel:p("Show the chat bubble on the whole site")})]}):void 0}}let q=null,A=new WeakMap;function Rt(e){const t=ft();if(!e||!t)return e;q!==t&&(q=t,A=new WeakMap);let o=A.get(e);return o||(o={...e,choices:e.choices?e.choices.map(r=>({...r,label:p(r.label)})):null,spec:e.spec?{...e.spec,addLabel:p(e.spec.addLabel)}:null},A.set(e,o)),o}const Lt={isLockedBlock:(e,t)=>rt(e)||!!(t&&O()?.heldElsewhere(t.props.id)),duplicateBlocked:st,nestDepth:(e,t,o)=>t===Fe?Ge(e,o):0,newSectionNode:bt,canAddTo:(e,t)=>Rt(Ue(e,t)),blockIsOffered:Ze},Ot=new Proxy(ut,{get:(e,t)=>{const o=Reflect.get(e,t);return typeof o=="string"?p(o):o}}),At={labelAtLevel:(e,t,o)=>p(mt(e,t,o)),descriptions:Ot,categoryLabel:e=>{const t=Ke(e);return t===void 0?void 0:p(t)},firstSection:je,blockRowName:Je,plainText:ze,Icon:R,Thumbnail:Le,useProducts:gt},Bt={desktop:2e3,tablet:800,mobile:390},X="desktop",yt={options:Se,initial:X,fluid:X,widths:Bt},Ht={read:et,write:e=>ot(e),forSelection:(e,t)=>$e(e,t)},Nt={first:Y,last:Qe,firstGroup:wt,lastGroup:K,isSectionGroup:ht,sectionGroupZone:Et,panelOf:e=>e===Y?V:null,get sharedReach(){return v()?Wt:void 0},get shared(){return O()?ct:void 0},get groupTab(){return v()?it:void 0},get groupBadge(){return v()?F({type:K})??void 0:void 0},get changeNotice(){return v()?nt():void 0},get band(){return v()?Dt:void 0},get groupAccepts(){return v()?St:void 0}},Dt={foldable:!0},Wt=e=>F(e)??at(e);function Vt(e){return{...Z(j(e),U(e)),openSettings:()=>e.show(M)}}const jo={useOwnerName:Ve,useDocumentLabel:Ye,useBridges:Ct,useStandaloneBridges:Vt,useDocumentPass:ye,blockRules:Lt,blockLook:At,devices:yt,leftView:Ht,pinned:Nt,Canvas:pt,Inspector:_e};export{jo as WEBSITE_SCREEN};

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

@@ -816,6 +816,25 @@
 
 /* @tokens canvas-end */
 
+/* ── A Gap only Box on the canvas draws what the page draws ───────────────────
+   A Box set to "Gap only" (`sf-box-gap-only`, lib/content/box-layout) takes
+   away its blocks' own top and bottom padding; the host's unlayered rules are
+   `.sf-box-gap-only > *` and `.sf-box-gap-only > .sf-section-pad > *`. On the
+   canvas two elements stand between the Box and each block's root: the
+   editor's item (`[data-puck-component]`) and the part host
+   (`[data-sf-part-host]`, components/PreviewPartAnchors, `display: contents`).
+   A child selector stops at the item, so on the canvas every block kept its
+   frame (a Heading +48px, a Text +32px) and the Box was taller than on the
+   page. These are the host's two rules again, through the two elements.
+   Unlayered, for the host's reason: it must beat the `py-4` / `py-6` utility.
+   `scripts/test-gap-only-canvas.tsx` compares the canvas with the page.
+   Outside the canvas region above, whose rules may name only `[data-puck-…]`
+   (`scripts/test-editor-css-tokens.ts`); it holds no colour, radius or face. */
+.sf-box-gap-only > [data-puck-component] > [data-sf-part-host] > *,
+.sf-box-gap-only > [data-puck-component] > [data-sf-part-host] > .sf-section-pad > * {
+  padding-block: 0;
+}
+
 /* ── Canvas "Add section" seams (overlay between preview sections) ──────────
    Absolutely positioned over .sf-preview-host (the iframe's box), one band per
    seam between top-level sections, placed at the boundary Y measured from the
@@ -2772,9 +2791,10 @@
 /* With no warning beside it the Edit still sits hard right. */
 .sf-theme-name { margin-right: auto; }
 
-/* The Edit / Done button is efficient-shell's `Button` (harness UI-24): its
-   look is the shell's, `secondary` folded and `primary` open. This class only
-   keeps it from shrinking in the foot. */
+/* The open/close control is efficient-shell's ghost `IconButton` in its
+   `Tooltip` (chevron-down folded, chevron-up open; ruling A4f); in the
+   section's Theme menu it is the shell's `Button` "Edit". Either way the look
+   is the shell's. This class only keeps it from shrinking in the foot. */
 .sf-theme-edit {
   flex: none;
 }

package/dist/editor/lib/editor-document-adapter.d.ts

@@ -15,6 +15,13 @@ export type PinnedChromeState = {
     saveFailed: boolean;
     unpublished: boolean;
     loadFailed: boolean;
+    sections?: readonly SharedSectionNote[];
+};
+export type SharedSectionNote = {
+    section: string;
+    title: string;
+    problem: "load" | "lock" | "conflict" | "save";
+    holder?: LockHolder;
 };
 export interface PinnedChromeReport {
     state(): PinnedChromeState;

package/dist/editor/lib/editor-document-adapter.js

@@ -1 +1 @@
-"use client";import{SITE_FOOTER_SLUG as g}from"../../format/lib/content/footer.js";import{offeredSetsOf as O}from"./editor-blocks.js";import{isBackendError as B}from"efficient-easel/screen/lib/backend-error";import{isEfficientBackend as T}from"efficient-easel/screen/lib/session";import{noteLoaded as J,notePublished as V,noteSaved as j,pageLiveState as I}from"./page-live-state.js";import{noteSiteLiveState as _,refreshSiteLiveState as E}from"./site-live-state.js";import{say as D}from"../../format/lib/editor-words.js";import{sendSiteWrites as G}from"../../format/lib/site-writes.js";import{spliceChrome as M,splitChrome as k}from"./pinned-chrome-doc.js";import{setActivePinnedChrome as N}from"../../format/lib/pinned-chrome-lock.js";import{backendOf as R}from"./website-session.js";function F(n){return!!(n?.publish&&n.liveState)}function U(n,o){if(!F(n))return;const{versions:s,nameVersion:r,restoreVersion:t,previewVersion:e}=n;if(!(!s||!r||!t||!e))return{list:()=>s.call(n,o),name:(a,f)=>r.call(n,a,f,o),restore:(a,f)=>t.call(n,a,f??{},o),preview:a=>e.call(n,a,o)}}function W(n,o){return async(s,r)=>{try{await G()}catch(e){throw new Error(D("A change waiting to go live could not be saved."),{cause:e})}return(await n.publish(o)).state==="live"?_({state:"live",changes:[]}):E(0),{version:r??null}}}function L(n,o,s){const r=o?{siteId:o}:void 0;return{resolve:t=>n.load({slug:t,...r}).then(e=>(e&&J(e.id,e.live),e)),saveLayout:(t,e,a,f)=>n.save(t,{layout:e},{version:a,clientId:f??""}).then(m=>(j(t,m.live),E(),m)),rereadVersion:n.version?t=>n.version(t):void 0,publish:F(s)?W(s,r):n.publish?(t,e)=>n.publish(t,e?{version:e}:void 0).then(a=>(V(t,a.live),a)):void 0,listPages:()=>n.list(r),createPage:n.create?t=>n.create({...t,...r}):void 0,deletePage:n.remove?(t,e)=>n.remove(t,e):void 0}}function Y(n,o,s,r,t=!1){let e=null;const a=new Set;let f=!1,m={docId:null,lockHolder:null,conflict:null,saveFailed:!1,unpublished:!1,loadFailed:!1};const P=new Set,p=()=>{if(!e)return!1;const i=I(e.id);return i==="changed"||i==="never"||i===void 0&&f},h=i=>{m={...m,...i,docId:e?.id??null,unpublished:p()};for(const d of P)d()},y=i=>i&&typeof i=="object"&&!Array.isArray(i)?i:{},S=i=>!!e&&a.has(i),H={state:()=>m,subscribe:i=>(P.add(i),()=>{P.delete(i)})};return{resolve:async i=>{if(N(i===g?null:H),i===g)return s.resolve(i);let d=!1;const[u,l]=await Promise.all([s.resolve(i),n.load({slug:g,...o}).catch(()=>(d=!0,null))]);if(l){J(l.id,l.live);const v=y(l.layout);e={id:l.id,layout:v,version:l.version,savedJson:""}}else e=null;if(f=!1,!u||!e)return h({conflict:null,saveFailed:!1,loadFailed:d}),u;const c=M(y(u.layout),e.layout);return e.savedJson=JSON.stringify(k(c,e.layout).chrome),a.add(u.id),h({conflict:null,saveFailed:!1,loadFailed:!1}),{...u,layout:c}},saveLayout:async(i,d,u,l)=>{if(!e||!S(i))return s.saveLayout(i,d,u,l);const c=e,v=k(d,c.layout),A=await s.saveLayout(i,v.page,u,l),b=JSON.stringify(v.chrome);if(!v.chrome||b===c.savedJson||m.lockHolder)return A;try{const w=await n.save(c.id,{layout:v.chrome},{version:c.version,clientId:l??""});j(c.id,w.live),E(),c.layout=v.chrome,c.version=w.version,c.savedJson=b,f=!0,h({conflict:null,saveFailed:!1})}catch(w){B(w,"changed-elsewhere")?h({conflict:w.conflict??{savedBy:"",savedByYou:!1,secondsAgo:0}}):B(w,"lock-taken")?h({lockHolder:w.holder??{name:"",secondsSinceSeen:0,secondsSinceHeld:0}}):h({saveFailed:!0})}return A},publish:s.publish?async(i,d)=>{const u=await s.publish(i,d),l=e;if(l&&S(i)&&!t&&n.publish&&p()&&!m.lockHolder){const c=await n.publish(l.id,l.version?{version:l.version}:void 0);V(l.id,c.live),c.version!==null&&(l.version=c.version),f=!1,h({})}return u}:void 0,lock:r?{claim:async(i,d,u)=>{const l=await r.claim(i,d,u),c=e;if(c&&S(i))try{await r.claim(c.id,d,!1),m.lockHolder&&h({lockHolder:null})}catch(v){B(v,"lock-taken")&&h({lockHolder:v.holder??{name:"",secondsSinceSeen:0,secondsSinceHeld:0}})}return l},release:async(i,d)=>{await r.release(i,d);const u=e;u&&S(i)&&!m.lockHolder&&await r.release(u.id,d).catch(()=>{})}}:void 0,pinnedChrome:H}}function te(n,o=R(),s=O(),r={}){const t=T(o),e=n?{siteId:n}:void 0,a=t?!!n:!0,f=o.site.update,m=t&&s.commerce&&s.service,P=!!r.editsPinnedInPlace&&m,p=F(o.site)?o.site:void 0,h=L(o.pages,n,p),y=P?Y(o.pages,e,h,o.lock,!!p):null;return{capabilities:{canPublish:!!p||!!o.pages.publish,hasSiteSettings:t,hasSiteTheme:!!o.theme,placeholderFrames:!1,mediaEditing:!0,pageCreationInAdminForm:!o.pages.create,canDeletePagesInline:!!o.pages.remove,hasEditLock:!!o.lock,hasEditGuard:!0,hasPinnedChrome:m,editsPinnedInPlace:P,explainsSiteSettings:!1,hasSiteRecord:a,canEditSiteRecord:a&&!!f,hasPreviewLink:t||!!o.preview,hasCatalog:t&&s.commerce,hasForms:t&&s.service,hasBlog:!!o.blog&&s.service,offersCommerce:s.commerce,offersService:s.service},...h,...x(h.resolve),lock:o.lock,...y,site:a?()=>o.site.get(e):void 0,siteLiveState:p?()=>p.liveState(e):void 0,siteVersions:U(p,e),updateSite:a&&f?S=>f(S,e):void 0,previewHref:o.preview?S=>o.preview.href(S):void 0}}function se(n,o=R(),s=O()){const r=T(o),t=o.templates,e=t?t.pages(n):{list:()=>Promise.reject(new Error(C)),load:()=>Promise.reject(new Error(C)),save:()=>Promise.reject(new Error(C))};return{capabilities:{canPublish:!1,hasSiteSettings:!1,hasSiteTheme:!1,placeholderFrames:!0,mediaEditing:!1,pageCreationInAdminForm:!e.create,canDeletePagesInline:!!e.remove,hasEditLock:!1,hasEditGuard:!1,hasPinnedChrome:r&&s.commerce&&s.service,editsPinnedInPlace:!1,explainsSiteSettings:r,hasSiteRecord:!1,canEditSiteRecord:!1,hasPreviewLink:!1,hasCatalog:r&&s.commerce,hasForms:r&&s.service,hasBlog:!!o.blog&&s.service,offersCommerce:s.commerce,offersService:s.service},...L(e,void 0),...x(L(e,void 0).resolve),publish:void 0,templateName:t?()=>t.get(n).then(a=>a.name):void 0}}function x(n){return{resolve:o=>(N(null),n(o))}}const C="This editor's backend has no website templates.";export{te as makeSitePageAdapter,se as makeTemplatePageAdapter};
+"use client";import{SITE_FOOTER_SLUG as H}from"../../format/lib/content/footer.js";import{offeredSetsOf as x}from"./editor-blocks.js";import{isBackendError as F}from"efficient-easel/screen/lib/backend-error";import{isEfficientBackend as z}from"efficient-easel/screen/lib/session";import{noteLoaded as M,notePublished as _,noteSaved as T,pageLiveState as Z}from"./page-live-state.js";import{noteSiteLiveState as ee,refreshSiteLiveState as A}from"./site-live-state.js";import{say as te}from"../../format/lib/editor-words.js";import{sendSiteWrites as ne}from"../../format/lib/site-writes.js";import{spliceChrome as oe,splitChrome as G}from"./pinned-chrome-doc.js";import{references as ie,sectionNodeOf as se,spliceShared as re,splitShared as le}from"../../format/lib/shared-section-docs.js";import{setActiveSharedSections as W}from"../../format/lib/shared-sections-active.js";import{setActivePinnedChrome as Y}from"../../format/lib/pinned-chrome-lock.js";import{backendOf as $}from"./website-session.js";function I(n){return!!(n?.publish&&n.liveState)}function ae(n,i){if(!I(n))return;const{versions:c,nameVersion:d,restoreVersion:a,previewVersion:o}=n;if(!(!c||!d||!a||!o))return{list:()=>c.call(n,i),name:(f,w)=>d.call(n,f,w,i),restore:(f,w)=>a.call(n,f,w??{},i),preview:f=>o.call(n,f,i)}}function ce(n,i){return async(c,d)=>{try{await ne()}catch(o){throw new Error(te("A change waiting to go live could not be saved."),{cause:o})}return(await n.publish(i)).state==="live"?ee({state:"live",changes:[]}):A(0),{version:d??null}}}function N(n,i,c){const d=i?{siteId:i}:void 0;return{resolve:a=>n.load({slug:a,...d}).then(o=>(o&&M(o.id,o.live),o)),saveLayout:(a,o,f,w)=>n.save(a,{layout:o},{version:f,clientId:w??""}).then(m=>(T(a,m.live),A(),m)),rereadVersion:n.version?a=>n.version(a):void 0,publish:I(c)?ce(c,d):n.publish?(a,o)=>n.publish(a,o?{version:o}:void 0).then(f=>(_(a,f.live),f)):void 0,listPages:()=>n.list(d),createPage:n.create?a=>n.create({...a,...d}):void 0,deletePage:n.remove?(a,o)=>n.remove(a,o):void 0}}function de(n,i,c,d,a=!1){let o=null;const f=new Set;let w=!1,m=new Map,y=new Map,h=new Map,g=new Map,P={docId:null,lockHolder:null,conflict:null,saveFailed:!1,unpublished:!1,loadFailed:!1,sections:[]};const B=new Set,D=()=>{if(!o)return!1;const e=Z(o.id);return e==="changed"||e==="never"||e===void 0&&w},S=e=>{P={...P,...e,docId:o?.id??null,unpublished:D(),sections:[...h.values()]};for(const t of B)t()},k=(e,t,s)=>{t?h.set(e,{section:e,title:m.get(e)?.title??"",problem:t,holder:s}):h.delete(e)},C=e=>e&&typeof e=="object"&&!Array.isArray(e)?e:{},O=e=>f.has(e),R=()=>new Map([...m].map(([e,t])=>[e,t.layout])),V=()=>`SharedSection-${typeof crypto<"u"&&crypto.randomUUID?crypto.randomUUID():Math.random().toString(36).slice(2)}`,J=(e,t,s,r)=>{const l=C(t);m.set(e,{layout:l,version:s,savedJson:JSON.stringify(l),title:r})},U={state:()=>P,subscribe:e=>(B.add(e),()=>{B.delete(e)})},K={sectionOf:e=>y.get(e)?.section??null,heldElsewhere:e=>{const t=y.get(e)?.section;return!!(t&&h.get(t)?.problem==="lock")},adopt:(e,t)=>{J(t.id,t.layout,t.layout_updated_at,t.title),y.set(e,{section:t.id,refId:V()}),g.set(t.id,t.used_on),S({})},place:e=>{if([...y.values()].some(r=>r.section===e.id))return null;const t=se(C(e.layout)),s=typeof t?.props?.id=="string"?t.props.id:null;return!t||!s||!t.type?null:(J(e.id,e.layout,e.layout_updated_at,e.title),y.set(s,{section:e.id,refId:V()}),g.set(e.id,e.used_on),t)},usedOn:e=>g.get(e)??null,learn:e=>{for(const t of e){g.set(t.id,t.used_on);const s=m.get(t.id);s&&(s.title=t.title);const r=h.get(t.id);r&&h.set(t.id,{...r,title:t.title})}S({})}},Q=async(e,t)=>{for(const[s,r]of e){const l=m.get(s),u=JSON.stringify(r);if(!(!l||u===l.savedJson||h.get(s)?.problem==="lock"))try{const v=await n.save(s,{layout:r},{version:l.version,clientId:t??""});T(s,v.live),l.layout=r,l.version=v.version,l.savedJson=u,k(s,null)}catch(v){F(v,"changed-elsewhere")?k(s,"conflict"):F(v,"lock-taken")?k(s,"lock",v.holder??void 0):k(s,"save")}}e.size&&A(),S({})};return{resolve:async e=>{if(Y(e===H?null:U),W(e===H?null:K),m=new Map,y=new Map,h=new Map,g=new Map,e===H)return c.resolve(e);let t=!1;const[s,r]=await Promise.all([c.resolve(e),n.load({slug:H,...i}).catch(()=>(t=!0,null))]);if(r){M(r.id,r.live);const p=C(r.layout);o={id:r.id,layout:p,version:r.version,savedJson:""}}else o=null;if(w=!1,!s)return S({conflict:null,saveFailed:!1,loadFailed:t}),s;const l=C(s.layout),u=ie(l),v=await Promise.all(u.map(p=>n.load({id:p.section,...i}).catch(()=>null)));u.forEach((p,X)=>{const L=v[X];L?(M(L.id,L.live),J(p.section,L.layout,L.version,"")):(m.delete(p.section),h.set(p.section,{section:p.section,title:"",problem:"load"}))});const E=re(l,R());if(y=E.held,!o)return y.size&&f.add(s.id),S({conflict:null,saveFailed:!1,loadFailed:t}),y.size?{...s,layout:E.working}:s;const b=oe(E.working,o.layout);return o.savedJson=JSON.stringify(G(b,o.layout).chrome),f.add(s.id),S({conflict:null,saveFailed:!1,loadFailed:!1}),{...s,layout:b}},saveLayout:async(e,t,s,r)=>{if(!O(e))return c.saveLayout(e,t,s,r);const l=o,u=l?G(t,l.layout):{page:t,chrome:null},v=le(u.page,y,R()),E=await c.saveLayout(e,v.page,s,r);if(await Q(v.docs,r),!l)return E;const b=JSON.stringify(u.chrome);if(!u.chrome||b===l.savedJson||P.lockHolder)return E;try{const p=await n.save(l.id,{layout:u.chrome},{version:l.version,clientId:r??""});T(l.id,p.live),A(),l.layout=u.chrome,l.version=p.version,l.savedJson=b,w=!0,S({conflict:null,saveFailed:!1})}catch(p){F(p,"changed-elsewhere")?S({conflict:p.conflict??{savedBy:"",savedByYou:!1,secondsAgo:0}}):F(p,"lock-taken")?S({lockHolder:p.holder??{name:"",secondsSinceSeen:0,secondsSinceHeld:0}}):S({saveFailed:!0})}return E},publish:c.publish?async(e,t)=>{const s=await c.publish(e,t),r=o;if(r&&O(e)&&!a&&n.publish&&D()&&!P.lockHolder){const l=await n.publish(r.id,r.version?{version:r.version}:void 0);_(r.id,l.live),l.version!==null&&(r.version=l.version),w=!1,S({})}if(O(e)&&!a&&n.publish)for(const[l,u]of m){if(h.get(l)?.problem==="lock")continue;const v=await n.publish(l,u.version?{version:u.version}:void 0);_(l,v.live),v.version!==null&&(u.version=v.version)}return s}:void 0,lock:d?{claim:async(e,t,s)=>{const r=await d.claim(e,t,s);if(!O(e))return r;const l=o;if(l)try{await d.claim(l.id,t,!1),P.lockHolder&&S({lockHolder:null})}catch(u){F(u,"lock-taken")&&S({lockHolder:u.holder??{name:"",secondsSinceSeen:0,secondsSinceHeld:0}})}for(const u of m.keys())try{await d.claim(u,t,!1),h.get(u)?.problem==="lock"&&k(u,null)}catch(v){F(v,"lock-taken")&&k(u,"lock",v.holder??void 0)}return m.size&&S({}),r},release:async(e,t)=>{if(await d.release(e,t),!O(e))return;const s=o;s&&!P.lockHolder&&await d.release(s.id,t).catch(()=>{});for(const r of m.keys())h.get(r)?.problem!=="lock"&&await d.release(r,t).catch(()=>{})}}:void 0,pinnedChrome:U}}function ke(n,i=$(),c=x(),d={}){const a=z(i),o=n?{siteId:n}:void 0,f=a?!!n:!0,w=i.site.update,m=a&&c.commerce&&c.service,y=!!d.editsPinnedInPlace&&m,h=I(i.site)?i.site:void 0,g=N(i.pages,n,h),P=y?de(i.pages,o,g,i.lock,!!h):null;return{capabilities:{canPublish:!!h||!!i.pages.publish,hasSiteSettings:a,hasSiteTheme:!!i.theme,placeholderFrames:!1,mediaEditing:!0,pageCreationInAdminForm:!i.pages.create,canDeletePagesInline:!!i.pages.remove,hasEditLock:!!i.lock,hasEditGuard:!0,hasPinnedChrome:m,editsPinnedInPlace:y,explainsSiteSettings:!1,hasSiteRecord:f,canEditSiteRecord:f&&!!w,hasPreviewLink:a||!!i.preview,hasCatalog:a&&c.commerce,hasForms:a&&c.service,hasBlog:!!i.blog&&c.service,offersCommerce:c.commerce,offersService:c.service},...g,...q(g.resolve),lock:i.lock,...P,site:f?()=>i.site.get(o):void 0,siteLiveState:h?()=>h.liveState(o):void 0,siteVersions:ae(h,o),updateSite:f&&w?B=>w(B,o):void 0,previewHref:i.preview?B=>i.preview.href(B):void 0}}function Fe(n,i=$(),c=x()){const d=z(i),a=i.templates,o=a?a.pages(n):{list:()=>Promise.reject(new Error(j)),load:()=>Promise.reject(new Error(j)),save:()=>Promise.reject(new Error(j))};return{capabilities:{canPublish:!1,hasSiteSettings:!1,hasSiteTheme:!1,placeholderFrames:!0,mediaEditing:!1,pageCreationInAdminForm:!o.create,canDeletePagesInline:!!o.remove,hasEditLock:!1,hasEditGuard:!1,hasPinnedChrome:d&&c.commerce&&c.service,editsPinnedInPlace:!1,explainsSiteSettings:d,hasSiteRecord:!1,canEditSiteRecord:!1,hasPreviewLink:!1,hasCatalog:d&&c.commerce,hasForms:d&&c.service,hasBlog:!!i.blog&&c.service,offersCommerce:c.commerce,offersService:c.service},...N(o,void 0),...q(N(o,void 0).resolve),publish:void 0,templateName:a?()=>a.get(n).then(f=>f.name):void 0}}function q(n){return{resolve:i=>(Y(null),W(null),n(i))}}const j="This editor's backend has no website templates.";export{ke as makeSitePageAdapter,Fe as makeTemplatePageAdapter};

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

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

package/dist/editor/lib/shared-sections-layer.d.ts

@@ -0,0 +1,8 @@
+import type { ScreenSharedSections } from "efficient-easel/screen/lib/screen-parts";
+export declare function sharedSectionReach(node: {
+    props?: {
+        id?: unknown;
+    };
+}): string | null;
+export declare const SHARED_SECTION_PHRASES: readonly string[];
+export declare const WEBSITE_SHARED_SECTIONS: ScreenSharedSections;

package/dist/editor/lib/shared-sections-layer.js

@@ -0,0 +1 @@
+import{copyNode as i}from"efficient-easel/data";import{say as s}from"../../format/lib/editor-words.js";import{activeSharedSections as t,sharedEditor as p}from"../../format/lib/shared-sections-active.js";function l(n){const o=typeof n?.props?.id=="string"?n.props.id:null,e=t(),c=o&&e?e.sectionOf(o):null;if(!e||!c)return null;const r=e.usedOn(c);return r?r.length===1?s("On 1 page"):s("On {count} pages",{count:r.length}):s("On other pages")}const O=["On other pages","On 1 page","On {count} pages"],f={usedOn:n=>{const o=t(),e=o?.sectionOf(n.props.id)??null;return!o||!e?null:o.usedOn(e)??[]},openPage:n=>p()?.openPage(n),adopt:(n,o)=>t()?.adopt(n.props.id,o),nodeOf:n=>t()?.place(n)??null,detach:n=>{const o=p()?.config;return o?i(n,o):n},removed:()=>p()?.reload()};export{O as SHARED_SECTION_PHRASES,f as WEBSITE_SHARED_SECTIONS,l as sharedSectionReach};

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

@@ -1,6 +1,6 @@
 import { type FontsValue } from "../../format/lib/fonts.js";
 import type { SiteThemeRowPatch } from "../../format/lib/site-theme-row.js";
-import { type OldSiteText, type StoredTextStyle } from "./site-text-styles.js";
+import { type OldSiteText, type StoredTextStyle } from "../../render/lib/text-styles/site-text-styles.js";
 import { type HeadingCompression, type ResolvedHeadingTypography, type SizesValue } from "../../format/lib/theme.js";
 export type SiteTextStylesWriter = {
     fonts: FontsValue;

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

@@ -1 +1 @@
-"use client";import{useEasel as E}from"efficient-easel/easel";import{usePreviewHeader as P}from"../../render/components/PreviewHeaderContext.js";import{normalizeFonts as R}from"../../format/lib/fonts.js";import{listChangePatch as A,resolveTextStyles as I,textStylesToOld as L}from"./site-text-styles.js";import{DEFAULT_SIZES as O,normalizeHeadingCompression as U,normalizeHeadingTypography as W}from"../../format/lib/theme.js";function B({themeFromDocument:t,persist:c}){const{appState:g,dispatch:l}=E(s=>s),{fonts:f,setFonts:h,sizes:S,setSizes:T,headingCompression:z,setHeadingCompression:m,headingTypography:C,setHeadingTypography:u,textStyles:v,setTextStyles:H}=P(),r=g.data,e=r.root?.props??{},i=t?R(e.fonts):f,p=t?O:S,n=t?U(e.headingCompression):z,a=t?W(e.headingTypography):C,y={fonts:i,sizes:p,compression:n,typography:a},w=t?e.textStyles:v,d=s=>l({type:"replaceRoot",root:{...r.root,props:{...e,...s}},recordHistory:!0});return{fonts:i,sizes:p,compression:n,typography:a,old:y,saved:w,write:(s,x)=>{const o=L(I(s.saved,s.old),s.old);t?d({textStyles:s.saved,fonts:o.fonts,headingCompression:o.compression,headingTypography:o.typography}):(H(s.saved),h(o.fonts),T(o.sizes),m(o.compression),u(o.typography)),c(A(s,y),x)},writeRoot:d}}export{B as useSiteTextStylesWriter};
+"use client";import{useEasel as E}from"efficient-easel/easel";import{usePreviewHeader as P}from"../../render/components/PreviewHeaderContext.js";import{normalizeFonts as R}from"../../format/lib/fonts.js";import{listChangePatch as A,resolveTextStyles as I,textStylesToOld as L}from"../../render/lib/text-styles/site-text-styles.js";import{DEFAULT_SIZES as O,normalizeHeadingCompression as U,normalizeHeadingTypography as W}from"../../format/lib/theme.js";function B({themeFromDocument:t,persist:c}){const{appState:g,dispatch:l}=E(s=>s),{fonts:f,setFonts:h,sizes:S,setSizes:T,headingCompression:z,setHeadingCompression:m,headingTypography:C,setHeadingTypography:u,textStyles:v,setTextStyles:H}=P(),r=g.data,e=r.root?.props??{},i=t?R(e.fonts):f,p=t?O:S,n=t?U(e.headingCompression):z,a=t?W(e.headingTypography):C,y={fonts:i,sizes:p,compression:n,typography:a},w=t?e.textStyles:v,d=s=>l({type:"replaceRoot",root:{...r.root,props:{...e,...s}},recordHistory:!0});return{fonts:i,sizes:p,compression:n,typography:a,old:y,saved:w,write:(s,x)=>{const o=L(I(s.saved,s.old),s.old);t?d({textStyles:s.saved,fonts:o.fonts,headingCompression:o.compression,headingTypography:o.typography}):(H(s.saved),h(o.fonts),T(o.sizes),m(o.compression),u(o.typography)),c(A(s,y),x)},writeRoot:d}}export{B as useSiteTextStylesWriter};