efficient-web-builder 16.0.2 → 17.0.1

package/dist/components/SectionEditor.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as f,Fragment as v}from"react/jsx-runtime";import{useState as fe}from"react";import{useEasel as ue}from"efficient-easel/easel";import{InspectorHead as he,InspectorIconButton as R}from"efficient-easel/chrome";import{DuplicateIcon as Se,TrashIcon as we}from"efficient-easel/icons";import{panelFieldsOf as be}from"../lib/puck/panel-fields.js";import{TICKER_PART_LABEL as F}from"./PreviewTickerContext.js";import ge from"./SectionIcon.js";import{PanelHideButton as x}from"./SidePanelHead.js";import{useEditorSession as ke}from"../lib/editor-session-context.js";import{say as i}from"../lib/editor-words.js";import ve,{HintsToggle as Pe,SHOW_HINTS_DEFAULT as ye}from"./WebsiteSettingsPanel.js";import Ee from"./ChatSettingsPanel.js";import Ie from"./SocialLinksPanel.js";import Ne from"./TickerSettingsPanel.js";import Le,{PartSourceNote as Oe,partStyleName as Te}from"./PartSettingsPanel.js";import He from"./DuplicateToPageMenu.js";import{useStorefrontDocument as _e}from"./StorefrontDocumentContext.js";import{usePreviewHeader as De}from"./PreviewHeaderContext.js";import{usePartStyle as Ae}from"./PreviewPartStyleContext.js";import{useSectionOps as Ce}from"../lib/puck/use-section-ops.js";import{SELECTION_MODE as Re}from"../lib/editor-screen.js";import{usePreviewParts as Fe}from"./PreviewPartsContext.js";import{entryPartsOf as xe,SectionTextEntries as Be}from"./SectionTextEntries.js";import{SectionTextSuppressProvider as ze}from"../lib/puck/section-text-suppress.js";import{HEADER_TYPE as Ke,ROOT_ZONE as B}from"../lib/puck/content-tree.js";import{websiteDuplicateBlocked as Me}from"../lib/puck/every-page.js";import{FOOTER_TYPE as P}from"../lib/puck/footer-blocks.js";import We from"./SwitchToBoxFooter.js";import{SiteFields as z}from"./SiteFields.js";import{SettingsSwitch as je}from"efficient-easel/panel";import{foldTopTier as Ue}from"../lib/puck/field-groups.js";import{FoldHeadingScope as Ye}from"../lib/puck/panel-heading-scope.js";import{partRowField as Ze}from"../lib/puck/part-row-field.js";import{decodePartKey as $e,partRowHeadLabel as qe}from"../lib/puck/part-rows.js";import{encodePartId as K,partHeadLabel as Ge,partLabel as Je,sectionTextParts as Qe}from"../lib/puck/text-parts.js";import{partSourceOf as Ve,sourceSlugOf as Xe}from"../lib/puck/source-bound-parts.js";const Ut=Re,Yt={kind:"header"},Zt={kind:"website"},$t={kind:"chat"},qt={kind:"social"},g="Part";function M(e){return i("Part of {name}",{name:i(e)})}function et(e,o,r){const c=e.describeNode(o);return{name:r,kindLabel:c?M(c.label):i(g)}}function tt(e){switch(e){case"Header":return{title:i("Header settings belong to a website."),own:i("Each website created from this template sets its own header afterwards.")};case"Appearance":return{title:i("Appearance settings belong to a website."),own:i("Each website created from this template sets its own appearance afterwards.")};case"Live chat":return{title:i("Live chat settings belong to a website."),own:i("Each website created from this template sets its own live chat afterwards.")};case"Social link":return{title:i("Social link settings belong to a website."),own:i("Each website created from this template sets its own social link afterwards.")};default:return{title:i("{what} settings belong to a website.",{what:e}),own:i("Each website created from this template sets its own {what} afterwards.",{what:e.toLowerCase()})}}}function W({what:e}){const o=tt(e);return f("div",{className:"sf-note",children:[n("p",{children:n("strong",{children:o.title})}),f("p",{children:[i("A template is a blueprint — it has no website of its own, so there is nothing here to change.")," ",o.own]})]})}const nt={header:{name:"Header",kindLabel:"Site settings",icon:"header",render:(e,o)=>{const r=o.hostPanels?.header;return r?n(r,{placeholderMode:o.capabilities.placeholderFrames,tokenRef:o.tokenRef,siteId:o.siteId,websiteName:o.websiteName,onOpenWebsiteSettings:o.onOpenWebsiteSettings,onAuthExpired:()=>o.notifyParent("storefront-editor:auth-expired")}):null}},website:{name:"Appearance",kindLabel:"Site settings",icon:"website",render:(e,o)=>n(ve,{themeFromDocument:!o.capabilities.hasSiteTheme,tokenRef:o.tokenRef,siteId:o.siteId,onNotify:o.onNotify})},chat:{name:"Live chat",kindLabel:"Site settings",icon:"chat",render:()=>n(Ee,{})},social:{name:"Social links",kindLabel:"Site settings",icon:"social",render:()=>n(Ie,{unavailable:n(W,{what:"Social link"})})},ticker:{name:F,kindLabel:g,icon:"ticker",head:(e,o)=>e.kind==="ticker"?et(o,e.heroId,i(F)):null,render:e=>n(Ne,{heroId:e.kind==="ticker"?e.heroId:""})},part:{name:g,kindLabel:g,icon:"Text",head:(e,o)=>{if(e.kind!=="part")return null;const r=o.describeNode(e.nodeId);if(!r)return null;const{key:c,row:h}=$e(e.propKey),w=h?Ze(r.fields[c],h):r.fields[c],u=qe(i(Ge(Je(w??{},c))),h),p=o.styleNameOfPart(e.nodeId,e.propKey);return{name:p!==null?i(p):u,kindLabel:M(r.label)}},render:(e,o)=>e.kind==="part"?n(Le,{nodeId:e.nodeId,propKey:e.propKey,onBack:()=>o.onSelectNode(e.nodeId),onEditStyle:o.onOpenSiteStyles}):null}},ot=new Set(["header","website","chat"]);function it(e,o){if(e==="puck")return null;const r=nt[e];return ot.has(e)&&!o.hasSiteSettings?{...r,kindLabel:"Not part of a template",render:()=>n(W,{what:r.name})}:r}function rt({mode:e,onOpenWebsiteSettings:o,onOpenSiteStyles:r,onSelectNode:c,hideNodeActions:h=!1,onNotify:w,onHidePanel:u}){const{capabilities:p,tokenRef:y,notifyParent:j,currentSlug:U,siteId:E,runAuthed:Y,readOnly:Z}=_e(),{websiteName:$,fonts:q}=De(),{partStyle:I}=Ae(),b=Ce({readOnly:Z}),{select:G}=Fe(),{selectedItem:t,getItemById:N,getSelectorForId:J,config:d,appState:Q}=ue(l=>l),V=be(d,t?{type:t.type,props:t.props}:null),L=t?Qe(V??d.components[t.type]?.fields,t.props):[],X=l=>d.components[l]?.label??l,s=t?J(t.props.id):void 0,a=it(e.kind,p),ee=ke(),O={capabilities:p,tokenRef:y,hostPanels:ee.chrome?.panels,describeNode:l=>{const m=N(l);if(!m)return null;const S=d.components[m.type];return{type:m.type,label:S?.label??m.type,fields:S?.fields??{}}},styleNameOfPart:(l,m)=>{const S=N(l);if(!S)return null;const de=K(l,m),me=I?.partId===de?I:null;return Te(S.props,m,me,q)},siteId:E,websiteName:$??null,notifyParent:j,onNotify:w,onOpenWebsiteSettings:o,onOpenSiteStyles:r,onSelectNode:c},T=a?.head?.(e,O)??null,te=T?.name??(a?i(a.name):t?i(X(t.type)):i("Page settings")),ne=T?.kindLabel??(a?i(a.kindLabel):t?s&&s.zone!==B?i("Block"):i("Section"):i("Page")),oe=a?a.icon:t?t.type:"page",H=a?null:t?d.components[t.type]?.fields??null:d.root?.fields??null,ie=H?Ue(H):2,_=e.kind==="puck"&&t?Ve(t.type):null,re=!!t&&!!s&&s.zone===B&&t.type!==P&&t.type!==Ke,k=Me(Q?.data,t),se=()=>{k||s&&b.duplicateComponent(s.zone,s.index)},ae=()=>{s&&(b.removeComponent(s.zone,s.index),b.select(null))},le=t?d.components[t.type]?.defaultProps?.previewHover:void 0,D=e.kind==="puck"&&!!t&&!!s&&le!==void 0,A=D&&t.props.previewHover===!0,ce=()=>{!t||!s||b.replaceComponent(s.zone,s.index,{...t,props:{...t.props,previewHover:!A}})},[C,pe]=fe(ye);return f("div",{className:`es-sidepanel es-sidepanel--right sf-panel sf-panel--right${C||!(!a&&!!t)?"":" sf-hints-folded"}`,children:[n(he,{icon:n(ge,{type:oe,size:15}),name:te,kind:ne,actions:!h&&e.kind==="puck"&&t&&t.type!==P?f(v,{children:[n(R,{label:i("Duplicate section"),title:k??void 0,disabled:k!==null,onClick:se,children:n(Se,{size:15})}),re&&p.hasSiteSettings&&n(He,{node:t,currentSlug:U,siteId:E??void 0,tokenRef:y,runAuthed:Y,onNotify:w}),n(R,{label:i("Remove section"),danger:!0,onClick:ae,children:n(we,{size:15})}),u?n(x,{side:"right",onHide:u,divider:!0}):null]}):u?n(x,{side:"right",onHide:u}):void 0}),D&&f("div",{className:"sf-preview-pin",children:[f("div",{className:"sf-preview-pin-text",children:[n("span",{className:"sf-preview-pin-label",children:i("Preview hover state")}),n("span",{className:"sf-preview-pin-hint",children:i("not shown live")})]}),n(je,{checked:A,onChange:ce,ariaLabel:i("Preview hover state")})]}),n(Ye,{tier:ie,children:n("div",{className:"sf-insp-body sf-scroll",children:a?a.render(e,O):t?f(v,{children:[t.type===P&&p.hasSiteSettings&&n(We,{}),n(ze,{children:n(z,{entries:n(Be,{parts:L,heading:!1,onOpen:l=>G(K(t.props.id,l))}),entryCount:xe(L).length})}),_&&n(Oe,{source:_,slug:Xe(t?.props)}),n(Pe,{shown:C,onChange:pe})]}):n(v,{children:n(z,{})})})})]})}export{$t as CHAT_MODE,Yt as HEADER_MODE,Ut as PUCK_MODE,qt as SOCIAL_MODE,Zt as WEBSITE_MODE,rt as default,it as resolvePanel};
+"use client";import{jsx as n,jsxs as m,Fragment as v}from"react/jsx-runtime";import{useState as ae}from"react";import{useEasel as le}from"efficient-easel/easel";import{headWords as ce,InspectorHead as pe,InspectorIconButton as A}from"efficient-easel/chrome";import{DuplicateIcon as de,TrashIcon as me}from"efficient-easel/icons";import{panelFieldsOf as fe}from"../lib/puck/panel-fields.js";import{TICKER_PART_LABEL as C}from"./PreviewTickerContext.js";import ue from"./SectionIcon.js";import{PanelHideButton as R}from"./SidePanelHead.js";import{useEditorSession as he}from"../lib/editor-session-context.js";import{say as o}from"../lib/editor-words.js";import we,{HintsToggle as Se,SHOW_HINTS_DEFAULT as be}from"./WebsiteSettingsPanel.js";import ge from"./ChatSettingsPanel.js";import ke from"./SocialLinksPanel.js";import ve from"./TickerSettingsPanel.js";import Pe,{PartSourceNote as Ee}from"./PartSettingsPanel.js";import ye from"./DuplicateToPageMenu.js";import{useStorefrontDocument as Ie}from"./StorefrontDocumentContext.js";import{usePreviewHeader as Le}from"./PreviewHeaderContext.js";import{useSectionOps as Oe}from"../lib/puck/use-section-ops.js";import{SELECTION_MODE as Te}from"../lib/editor-screen.js";import{usePreviewParts as Ne}from"./PreviewPartsContext.js";import{entryPartsOf as He,SectionTextEntries as _e}from"./SectionTextEntries.js";import{SectionTextSuppressProvider as De}from"../lib/puck/section-text-suppress.js";import{HEADER_TYPE as Ae,ROOT_ZONE as x}from"../lib/puck/content-tree.js";import{websiteDuplicateBlocked as Ce}from"../lib/puck/every-page.js";import{FOOTER_TYPE as P}from"../lib/puck/footer-blocks.js";import Re from"./SwitchToBoxFooter.js";import{SiteFields as F}from"./SiteFields.js";import{SettingsSwitch as xe}from"efficient-easel/panel";import{foldTopTier as Fe}from"../lib/puck/field-groups.js";import{FoldHeadingScope as Be}from"../lib/puck/panel-heading-scope.js";import{partRowField as ze}from"../lib/puck/part-row-field.js";import{decodePartKey as Ke,partRowHeadLabel as Me}from"../lib/puck/part-rows.js";import{encodePartId as We,partHeadLabel as je,partLabel as Ue,sectionTextParts as Ye}from"../lib/puck/text-parts.js";import{partSourceOf as Ze,sourceSlugOf as $e}from"../lib/puck/source-bound-parts.js";const Bt=Te,zt={kind:"header"},Kt={kind:"website"},Mt={kind:"chat"},Wt={kind:"social"},g="Part";function qe(e){return o("Part of {name}",{name:o(e)})}function Ge(e,i,r){const l=e.describeNode(i);return{name:r,kindLabel:l?qe(l.label):o(g)}}function Je(e){switch(e){case"Header":return{title:o("Header settings belong to a website."),own:o("Each website created from this template sets its own header afterwards.")};case"Appearance":return{title:o("Appearance settings belong to a website."),own:o("Each website created from this template sets its own appearance afterwards.")};case"Live chat":return{title:o("Live chat settings belong to a website."),own:o("Each website created from this template sets its own live chat afterwards.")};case"Social link":return{title:o("Social link settings belong to a website."),own:o("Each website created from this template sets its own social link afterwards.")};default:return{title:o("{what} settings belong to a website.",{what:e}),own:o("Each website created from this template sets its own {what} afterwards.",{what:e.toLowerCase()})}}}function B({what:e}){const i=Je(e);return m("div",{className:"sf-note",children:[n("p",{children:n("strong",{children:i.title})}),m("p",{children:[o("A template is a blueprint — it has no website of its own, so there is nothing here to change.")," ",i.own]})]})}const Qe={header:{name:"Header",kindLabel:"Site settings",icon:"header",render:(e,i)=>{const r=i.hostPanels?.header;return r?n(r,{placeholderMode:i.capabilities.placeholderFrames,tokenRef:i.tokenRef,siteId:i.siteId,websiteName:i.websiteName,onOpenWebsiteSettings:i.onOpenWebsiteSettings,onAuthExpired:()=>i.notifyParent("storefront-editor:auth-expired")}):null}},website:{name:"Appearance",kindLabel:"Site settings",icon:"website",render:(e,i)=>n(we,{themeFromDocument:!i.capabilities.hasSiteTheme,tokenRef:i.tokenRef,siteId:i.siteId,onNotify:i.onNotify})},chat:{name:"Live chat",kindLabel:"Site settings",icon:"chat",render:()=>n(ge,{})},social:{name:"Social links",kindLabel:"Site settings",icon:"social",render:()=>n(ke,{unavailable:n(B,{what:"Social link"})})},ticker:{name:C,kindLabel:g,icon:"ticker",head:(e,i)=>e.kind==="ticker"?Ge(i,e.heroId,o(C)):null,render:e=>n(ve,{heroId:e.kind==="ticker"?e.heroId:""})},part:{name:g,kindLabel:g,icon:"Text",head:(e,i)=>{if(e.kind!=="part")return null;const r=i.describeNode(e.nodeId);if(!r)return null;const{key:l,row:u}=Ke(e.propKey),h=u?ze(r.fields[l],u):r.fields[l],f=Me(o(je(Ue(h??{},l))),u),p=ce({name:f,tier:"part",of:o(r.label)},{partOf:({name:w})=>o("Part of {name}",{name:w})});return{name:p.name,kindLabel:p.kind}},render:(e,i)=>e.kind==="part"?n(Pe,{nodeId:e.nodeId,propKey:e.propKey,onBack:()=>i.onSelectNode(e.nodeId),onEditStyle:i.onOpenSiteStyles}):null}},Ve=new Set(["header","website","chat"]);function Xe(e,i){if(e==="puck")return null;const r=Qe[e];return Ve.has(e)&&!i.hasSiteSettings?{...r,kindLabel:"Not part of a template",render:()=>n(B,{what:r.name})}:r}function et({mode:e,onOpenWebsiteSettings:i,onOpenSiteStyles:r,onSelectNode:l,hideNodeActions:u=!1,onNotify:h,onHidePanel:f}){const{capabilities:p,tokenRef:w,notifyParent:z,currentSlug:K,siteId:E,runAuthed:M,readOnly:W}=Ie(),{websiteName:j}=Le(),S=Oe({readOnly:W}),{select:U}=Ne(),{selectedItem:t,getItemById:Y,getSelectorForId:Z,config:d,appState:$}=le(c=>c),q=fe(d,t?{type:t.type,props:t.props}:null),y=t?Ye(q??d.components[t.type]?.fields,t.props):[],G=c=>d.components[c]?.label??c,s=t?Z(t.props.id):void 0,a=Xe(e.kind,p),J=he(),I={capabilities:p,tokenRef:w,hostPanels:J.chrome?.panels,describeNode:c=>{const b=Y(c);if(!b)return null;const D=d.components[b.type];return{type:b.type,label:D?.label??b.type,fields:D?.fields??{}}},siteId:E,websiteName:j??null,notifyParent:z,onNotify:h,onOpenWebsiteSettings:i,onOpenSiteStyles:r,onSelectNode:l},L=a?.head?.(e,I)??null,Q=L?.name??(a?o(a.name):t?o(G(t.type)):o("Page settings")),V=L?.kindLabel??(a?o(a.kindLabel):t?s&&s.zone!==x?o("Block"):o("Section"):o("Page")),X=a?a.icon:t?t.type:"page",O=a?null:t?d.components[t.type]?.fields??null:d.root?.fields??null,ee=O?Fe(O):2,T=e.kind==="puck"&&t?Ze(t.type):null,te=!!t&&!!s&&s.zone===x&&t.type!==P&&t.type!==Ae,k=Ce($?.data,t),ne=()=>{k||s&&S.duplicateComponent(s.zone,s.index)},oe=()=>{s&&(S.removeComponent(s.zone,s.index),S.select(null))},ie=t?d.components[t.type]?.defaultProps?.previewHover:void 0,N=e.kind==="puck"&&!!t&&!!s&&ie!==void 0,H=N&&t.props.previewHover===!0,re=()=>{!t||!s||S.replaceComponent(s.zone,s.index,{...t,props:{...t.props,previewHover:!H}})},[_,se]=ae(be);return m("div",{className:`es-sidepanel es-sidepanel--right sf-panel sf-panel--right${_||!(!a&&!!t)?"":" sf-hints-folded"}`,children:[n(pe,{icon:n(ue,{type:X,size:15}),name:Q,kind:V,actions:!u&&e.kind==="puck"&&t&&t.type!==P?m(v,{children:[n(A,{label:o("Duplicate section"),title:k??void 0,disabled:k!==null,onClick:ne,children:n(de,{size:15})}),te&&p.hasSiteSettings&&n(ye,{node:t,currentSlug:K,siteId:E??void 0,tokenRef:w,runAuthed:M,onNotify:h}),n(A,{label:o("Remove section"),danger:!0,onClick:oe,children:n(me,{size:15})}),f?n(R,{side:"right",onHide:f,divider:!0}):null]}):f?n(R,{side:"right",onHide:f}):void 0}),N&&m("div",{className:"sf-preview-pin",children:[m("div",{className:"sf-preview-pin-text",children:[n("span",{className:"sf-preview-pin-label",children:o("Preview hover state")}),n("span",{className:"sf-preview-pin-hint",children:o("not shown live")})]}),n(xe,{checked:H,onChange:re,ariaLabel:o("Preview hover state")})]}),n(Be,{tier:ee,children:n("div",{className:"sf-insp-body es-insp-body sf-scroll",children:a?a.render(e,I):t?m(v,{children:[t.type===P&&p.hasSiteSettings&&n(Re,{}),n(De,{children:n(F,{entries:n(_e,{parts:y,heading:!1,onOpen:c=>U(We(t.props.id,c))}),entryCount:He(y).length})}),T&&n(Ee,{source:T,slug:$e(t?.props)}),n(Se,{shown:_,onChange:se})]}):n(v,{children:n(F,{})})})})]})}export{Mt as CHAT_MODE,zt as HEADER_MODE,Bt as PUCK_MODE,Wt as SOCIAL_MODE,Kt as WEBSITE_MODE,et as default,Xe as resolvePanel};

package/dist/components/storefront-editor.css

@@ -735,9 +735,15 @@
 
 /* C · the block you are pointing at: one line, solid, 1px, 2px off the words.
    Puck's own overlay-portal sheet drew it 2px dashed and this file narrowed it;
-   since that sheet left with 5.5 the whole line is declared here. */
+   since that sheet left with 5.5 the whole line is declared here.
+   ITS COLOUR IS THE ENGINE'S HOVER COLOUR (2026-10-16): the accent at 60%, as
+   `.es-canvas-outline.is-hover` draws it in efficient-easel easel.css, so a
+   pointed-at word and a pointed-at block look the same. It was Puck's azure-09
+   (#dbeafe), a tint of white: next to the engine's box it read as a second,
+   lighter box, and once E below took that box away it was all but invisible
+   on a light page. */
 [data-puck-overlay-portal]:hover {
-  outline: 1px solid var(--es-accent-tint-strong, #dbeafe);
+  outline: 1px solid color-mix(in srgb, var(--es-accent, #2563eb) 60%, transparent);
   outline-offset: 2px;
 }
 
@@ -790,6 +796,24 @@
   outline: none;
 }
 
+/* E · …and the engine's hover box stands aside for it.
+   Lewis, 2026-10-16, on the Hartes homepage hero: pointing at the "Ranger II"
+   heading drew TWO lines again, the words' own (C) and a wider box round the
+   Heading block. That box is the engine's (`.es-canvas-outline.is-hover`,
+   efficient-easel easel.css), drawn on its outline layer over the block the
+   next click would pick. It came with the engine in blueprint 5.5, after A-D
+   were written, so nothing here answered it. But a click on a marked element
+   never reaches the engine (PreviewPartAnchors and the hero / ticker / location
+   bridges stop it and open their own thing), so over one the engine's box
+   names the wrong target, and the innermost line D keeps is the true one.
+   Off a marked element the engine's box is the only line, and stays. Led by
+   `[data-puck-entry]`, the frame's root, as A is; (0,5,0) against the
+   engine's (0,2,0). `scripts/test-part-outline-hairline.tsx` §3
+   resolves both sheets. */
+[data-puck-entry]:has([data-puck-overlay-portal]:hover) .es-canvas-outline.is-hover {
+  outline: none;
+}
+
 /* @tokens canvas-end */
 
 /* ── Canvas "Add section" seams (overlay between preview sections) ──────────
@@ -846,8 +870,13 @@
      came to hang 6px OUTSIDE the panel at every width under 280 (measured: gap
      -6.0px at 260 and at 220, against 0.0 at the default 320). One name, read
      by the padding, by the narrow override, and by anything that undoes it. */
-  --sf-insp-pad-x: var(--space-16);
-  padding: 4px var(--sf-insp-pad-x) 18px;
+  /* THE SIDES ARE EASEL'S NOW (one text panel W1): the body wears
+     `es-insp-body` (efficient-easel 9.0.0 chrome.css), the one row inset both
+     editors share — 16px, 8px under a 284px panel, the numbers this sheet
+     measured and set (card 66212, 2026-10-13). The token stays, as a name for
+     that inset, because rules below read it to reach the panel's edge. */
+  --sf-insp-pad-x: var(--es-insp-pad-x, var(--space-16));
+  padding-block: 4px 18px;
 
   /* THE DROPDOWN ARROW, WRITTEN ONCE — card 66399.c.
      Read by `.sf-insp-body select` at rest AND by the hover rule beside it. The
@@ -912,13 +941,8 @@
    and 10 has nothing to spare, and type is paid vertically as well — card 66206
    has just set the row rhythm to 16px, which shrinking type would hand straight
    back. The padding was the horizontal cost, so the padding is what moved. */
-@container (width < 284px) {
-  .sf-insp-body {
-    /* The TOKEN, not `padding-inline` — so everything that reads the padding
-       narrows with it, instead of only the padding itself. */
-    --sf-insp-pad-x: var(--space-8);
-  }
-}
+/* The narrow inset (8px under a 284px panel) is easel's `.es-insp-body` rule
+   now; `--sf-insp-pad-x` follows it, so every reader narrows with it. */
 
 /* Floating-styled form controls for Puck's native fields — and ONLY those.
 

package/dist/lib/content/borders.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties } from "react";
+export declare const BORDER_MAX = 20;
+export declare const BORDER_STYLES: readonly ["solid", "dashed", "dotted"];
+export type BorderStyle = (typeof BORDER_STYLES)[number];
+export declare const BORDER_SIDES: readonly ["top", "right", "bottom", "left"];
+export type BorderSide = (typeof BORDER_SIDES)[number];
+export type BorderValue = {
+    width?: number | null;
+    top?: number | null;
+    right?: number | null;
+    bottom?: number | null;
+    left?: number | null;
+    style?: BorderStyle | string | null;
+    color?: string | null;
+};
+export declare const SECTION_BORDER_CLASS = "sf-section-border";
+export declare function hasOwnBorder(value: BorderValue | null | undefined): boolean;
+export declare function borderVars(value: BorderValue | null | undefined, { phone }?: {
+    phone?: boolean;
+}): Record<string, string> | undefined;
+export declare function sectionBorderStyle(desktop: BorderValue | null | undefined, phone: BorderValue | null | undefined): CSSProperties | undefined;

package/dist/lib/content/borders.js

@@ -0,0 +1 @@
+const h=20,i=["solid","dashed","dotted"],c=["top","right","bottom","left"],b="sf-section-border",p=/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,f=t=>typeof t=="number"&&Number.isFinite(t)?`${Math.min(20,Math.max(0,Math.round(t)))}px`:void 0;function u(t){return r(t)!==void 0}function r(t,{phone:n=!1}={}){if(!t||typeof t!="object")return;const e=n?"-phone":"",o={};for(const s of c){const d=f(t[s])??f(t.width);d!==void 0&&(o[`--sf-border-${s}-width${e}`]=d)}return typeof t.style=="string"&&i.includes(t.style)&&(o[`--sf-border-style${e}`]=t.style),typeof t.color=="string"&&p.test(t.color)&&(o[`--sf-border-color${e}`]=t.color.toLowerCase()),Object.keys(o).length?o:void 0}function x(t,n){const e=r(t),o=r(n,{phone:!0});return e||o?{...e,...o}:void 0}export{h as BORDER_MAX,c as BORDER_SIDES,i as BORDER_STYLES,b as SECTION_BORDER_CLASS,r as borderVars,u as hasOwnBorder,x as sectionBorderStyle};

package/dist/lib/editor-words-catalogue.d.ts

@@ -186,6 +186,14 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Bold is the weight above \u2014 one value, two ways to set it.": "Bold is the weight above — one value, two ways to set it.";
     readonly "Bold word": "Bold word";
     readonly "Booking Form": "Booking Form";
+    readonly Border: "Border";
+    readonly "Border bottom": "Border bottom";
+    readonly "Border color": "Border color";
+    readonly "Border left": "Border left";
+    readonly "Border right": "Border right";
+    readonly "Border style": "Border style";
+    readonly "Border top": "Border top";
+    readonly "Border width": "Border width";
     readonly Borders: "Borders";
     readonly Bottom: "Bottom";
     readonly "Bottom center": "Bottom center";
@@ -243,7 +251,6 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Cell width": "Cell width";
     readonly Center: "Center";
     readonly "Changed on every page": "Changed on every page";
-    readonly "Changes apply to all selected.": "Changes apply to all selected.";
     readonly "Changes not live yet": "Changes not live yet";
     readonly Chart: "Chart";
     readonly "Chart style": "Chart style";
@@ -260,7 +267,6 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "City strip": "City strip";
     readonly "Claims bars": "Claims bars";
     readonly "Claims panel (rows + defect bars)": "Claims panel (rows + defect bars)";
-    readonly Clear: "Clear";
     readonly "Clear change": "Clear change";
     readonly "Clear change: {label}": "Clear change: {label}";
     readonly "Clear colors": "Clear colors";
@@ -328,6 +334,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Dark band": "Dark band";
     readonly Darken: "Darken";
     readonly "Darken style": "Darken style";
+    readonly Dashed: "Dashed";
     readonly "Data points": "Data points";
     readonly Date: "Date";
     readonly "Deck / standfirst": "Deck / standfirst";
@@ -368,6 +375,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Donut (split of a whole)": "Donut (split of a whole)";
     readonly "Dot \u25CF": "Dot ●";
     readonly Dots: "Dots";
+    readonly Dotted: "Dotted";
     readonly Down: "Down";
     readonly "Drop in your own sanitized HTML.": "Drop in your own sanitized HTML.";
     readonly "Duplicate section": "Duplicate section";
@@ -378,6 +386,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Dynamic Pages": "Dynamic Pages";
     readonly "EU Tyre Label": "EU Tyre Label";
     readonly "Each block": "Each block";
+    readonly "Each side": "Each side";
     readonly "Each website created from this template sets its own appearance afterwards.": "Each website created from this template sets its own appearance afterwards.";
     readonly "Each website created from this template sets its own header afterwards.": "Each website created from this template sets its own header afterwards.";
     readonly "Each website created from this template sets its own live chat afterwards.": "Each website created from this template sets its own live chat afterwards.";
@@ -449,11 +458,9 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Follow the page": "Follow the page";
     readonly "Follow the slideshow": "Follow the slideshow";
     readonly "Follows Desktop": "Follows Desktop";
-    readonly "Follows no style \u2014 change": "Follows no style — change";
     readonly "Follows the section's Corners until you set a number here.": "Follows the section's Corners until you set a number here.";
     readonly "Follows the site": "Follows the site";
     readonly "Follows the style": "Follows the style";
-    readonly "Follows {name} \u2014 change": "Follows {name} — change";
     readonly Font: "Font";
     readonly "Footer Box": "Footer Box";
     readonly "Footer \u00B7 on every page": "Footer · on every page";
@@ -608,6 +615,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Leave a blank line between paragraphs to start a new one.": "Leave a blank line between paragraphs to start a new one.";
     readonly "Leave a field blank to use the built-in wording.": "Leave a field blank to use the built-in wording.";
     readonly Left: "Left";
+    readonly "Left and right": "Left and right";
     readonly "Left of the copy": "Left of the copy";
     readonly "Legal & documents": "Legal & documents";
     readonly "Legal Line": "Legal Line";
@@ -673,7 +681,6 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Milestone title.": "Milestone title.";
     readonly Milestones: "Milestones";
     readonly Mixed: "Mixed";
-    readonly "Mixed styles": "Mixed styles";
     readonly "Mockup Card": "Mockup Card";
     readonly "Mockup card": "Mockup card";
     readonly "Mockup position": "Mockup position";
@@ -822,7 +829,6 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Reel label": "Reel label";
     readonly "Refresh now": "Refresh now";
     readonly "Region \u00B7 country": "Region · country";
-    readonly Regular: "Regular";
     readonly "Related Products": "Related Products";
     readonly "Remove section": "Remove section";
     readonly "Repeating full-width rows \u2014 eyebrow, title and copy beside a numbered close-up image, alternating sides each row.": "Repeating full-width rows — eyebrow, title and copy beside a numbered close-up image, alternating sides each row.";
@@ -885,7 +891,6 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Select a word, then press the highlighter.": "Select a word, then press the highlighter.";
     readonly "Selector guide (pills + results)": "Selector guide (pills + results)";
     readonly "Selector pills": "Selector pills";
-    readonly Semibold: "Semibold";
     readonly Separator: "Separator";
     readonly "Series title": "Series title";
     readonly Serif: "Serif";
@@ -914,7 +919,6 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Signup Form": "Signup Form";
     readonly Simple: "Simple";
     readonly "Site settings": "Site settings";
-    readonly "Site style": "Site style";
     readonly "Site styles": "Site styles";
     readonly "Six across": "Six across";
     readonly "Six stagger": "Six stagger";
@@ -1058,7 +1062,6 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "This section runs edge to edge, so its corners sit off the page. Set Width to Content width to use them.": "This section runs edge to edge, so its corners sit off the page. Set Width to Content width to use them.";
     readonly "This site has {n} color theme of its own. Clearing takes them away and puts back the four the shop supplies.": "This site has {n} color theme of its own. Clearing takes them away and puts back the four the shop supplies.";
     readonly "This site has {n} color themes of its own. Clearing takes them away and puts back the four the shop supplies.": "This site has {n} color themes of its own. Clearing takes them away and puts back the four the shop supplies.";
-    readonly "This text follows the site style.": "This text follows the site style.";
     readonly "This ticker\u2019s hero is no longer on the page.": "This ticker’s hero is no longer on the page.";
     readonly "Three across": "Three across";
     readonly "Three ladder": "Three ladder";
@@ -1074,6 +1077,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly Title: "Title";
     readonly Tone: "Tone";
     readonly Top: "Top";
+    readonly "Top and bottom": "Top and bottom";
     readonly "Top border": "Top border";
     readonly "Top center": "Top center";
     readonly "Top left": "Top left";
@@ -1173,6 +1177,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly manifesto: "manifesto";
     readonly "not set": "not set";
     readonly "not shown live": "not shown live";
+    readonly part: "part";
     readonly px: "px";
     readonly "the Text style in Site styles": "the Text style in Site styles";
     readonly "the admin": "the admin";
@@ -1185,7 +1190,6 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "videos only": "videos only";
     readonly "{face} is loaded without an italic, so it cannot be set in italic. Slanting it would deform the letters rather than style them.": "{face} is loaded without an italic, so it cannot be set in italic. Slanting it would deform the letters rather than style them.";
     readonly "{grade} on the button": "{grade} on the button";
-    readonly "{kind} \u00B7 every row": "{kind} · every row";
     readonly "{label} hex code": "{label} hex code";
     readonly "{label} {n}": "{label} {n}";
     readonly "{label} \u2014 row {n}": "{label} — row {n}";
@@ -1193,11 +1197,9 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "{name} (unavailable)": "{name} (unavailable)";
     readonly "{name} is on this section": "{name} is on this section";
     readonly "{name} \u2014 renamed in the Console: {place}.": "{name} — renamed in the Console: {place}.";
-    readonly "{n} changed": "{n} changed";
     readonly "{n} cities": "{n} cities";
     readonly "{n} city": "{n} city";
     readonly "{n} of {total} layouts": "{n} of {total} layouts";
-    readonly "{n} selected": "{n} selected";
     readonly "{value} from {from}": "{value} from {from}";
     readonly "{value} on desktop": "{value} on desktop";
     readonly "{what} settings belong to a website.": "{what} settings belong to a website.";