efficient-web-builder 10.0.0 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,139 @@
 # Changelog
 
+## 11.0.0 - 2026-10-14
+
+- **Breaking: the settings panel has two tabs, Design and Animation** (owner,
+  final 2026-10-10). It had four: Content, Style, Layout and Animation. A
+  section, a Box (`Flex`) and a block all get the same two. The tab strip is
+  efficient-easel's `Inspector` (icon-only, equal width); this package only
+  sorts the fields into it.
+- **Inside Design the groups have one order**: the Content part first (the
+  text box, then the rows that were the Content tab), then Size, Design,
+  Layout, Position and Anchor, each under its `DESIGN_GROUP_KEY`. A group with
+  no rows is not emitted.
+- **Folding groups, one level** (Lewis 2026-10-13: "Or should these fold like
+  this? It is getting messy." — one kind of group heading per panel). Every
+  group in a tabbed panel is the same grey band that folds (efficient-easel's
+  `SettingsGroup`, − / + on its right, open by default), drawn by the
+  Inspector from FOLD MARKERS: the text box is a band titled "Text"
+  (`leadFold`); each heading of the Content part is a band titled with its
+  label; `_dSize` … `_dAnchor` are bands titled Size, Design, Layout,
+  Position, Anchor; each heading of the Animation tab is a band. A heading
+  INSIDE Size … Anchor (Width, Height, Padding, Shape, Color, Motion …) draws
+  nothing: one level only. Every heading keeps its key and its fold payload as
+  a marker (`foldMarker`, `quietMarker`, `foldTitleOf` in `lib/puck/controls`),
+  so no key is lost. The text box no longer draws its own "TEXT" caption
+  (`SectionTextEntries`' new `heading`, false in the panel).
+- **A band of one labelled row draws no band** (editor-panel-design §2b.1, a
+  group of one needs no heading): `SiteFields` measures what each band draws
+  and, when exactly one row shows and that row has its own label, the band goes
+  and the row stands alone at its place (its marker becomes `fold: false`,
+  so the row does not join the band above). A band whose one row has no label
+  keeps its band (it is the row's only name). The text box gets a band only
+  over two or more rows. The rule is `lib/puck/panel-bands` (new).
+- **A block list is named as a row, not a sub-heading.** `SlotChildRows`
+  (Blocks, Slides, Groups …) drew its name as an uppercase `GroupLabel` with
+  the count ("BLOCKS · 0"), a second kind of heading in the Design tab. It is
+  now the list's row label (`SettingsField`, the Layers glyph) with the count on
+  the right.
+- **Row names for one-level bands** (Lewis picked option A, 2026-10-14).
+  With no sub-head inside a band, a row says its own full name: the height
+  strip (`Auto | Fixed | Screen`) shows the label "Height" with its glyph, on
+  the shared row (desktop and phone); every padding row says "Padding top",
+  "Padding bottom" (a card's "Padding left", "Padding right"), never a bare
+  side; Split's overlay pair is "Overlay button" / "Overlay button link", so
+  it no longer reads "Button" / "Button link" twice. Labels only: no key
+  moves. `scripts/test-band-row-names.tsx` (new) renders every row of every
+  tabbed panel and holds all three.
+- **More row names for one-level bands: one label per row in a panel**
+  (GG, 2026-10-14). `scripts/test-band-row-names.tsx` §4 fails when two rows
+  of one tabbed panel show the same label (a desktop row and its phone twin
+  count as one; a pair that must repeat is listed in `MAY_REPEAT` with its
+  reason, and none is). It found two panels. Split: the text column's
+  background picture says "Background image", not "Image" (the image column
+  keeps "Image"). Hero: "Show texture", "Show slide picker", "Show arrows",
+  "Slide picker shape", "Arrows shape", "Slide picker placement", "Arrows
+  placement" (they were "Show" three times, "Shape" and "Placement" twice;
+  the sub-heads that told them apart draw nothing in option A). `Arrows`
+  stays plural, the feature's one word (card 66250). Labels only: no key
+  moves.
+- **Two more names** (GG, 2026-10-14): Hero's texture colour row says "Texture color", and LongRead's article heading says "Article title", so its text box no longer lists "Heading" twice (N10.1: the section's own heading is `Heading`, an item's is `Title`). Labels only; keys unchanged.
+- **A closed band stays closed** across selections for the editor's life:
+  closing Size on one section keeps Size closed on the next one (`SiteFields`,
+  keyed by the band's field key).
+  The Content part starts with a `_dContent` marker that draws nothing, so
+  Copy style (efficient-easel 4.0.0) can tell content from a look.
+- **Where each group went** (GG, 2026-10-13): Content keeps every Content
+  label and takes the pictures that were in Style (`Media`, `Image`, `Images`,
+  `Image column`, `Gallery`, `Logo`). Size: `Width`, `Height`, `Cell width`.
+  Design: the rest of Style. Layout: the rest of Layout, Padding included.
+  Position: `Nudge`. Anchor: `Anchor`. The Text and Heading blocks' Padding
+  goes in Size, beside Width (`BLOCK_KEY_GROUP`).
+- **No setting is cut.** `scripts/test-no-setting-lost.tsx` checks every field
+  key of 6.0.0 against a record made on 6.0.0
+  (`scripts/fixtures/settings-before-two-tabs.json`): 871 keys over 54
+  components, all still there (still 871 on 10.0.0: main's work since added
+  and removed none), Animation unchanged, every key of the old
+  Content tab in the Content part, before every other group, every old Style
+  key in the Design group or the Content part, and every old Layout key in
+  Size, Layout, Position or Anchor.
+- **Countdown has tabs now** (GG, 2026-10-13). It was added after every
+  placeable section was grouped, and nobody added it to `GROUPED_SECTIONS`, so
+  its 16 settings sat in one list with no tabs. Now its own 4 rows (Heading, At
+  zero, Ends, Unit labels) open the Content part of Design, the 11 shared rows
+  sit in Size, Design, Layout and Anchor, and its motion row is in Animation.
+- **Breaking: `lib/puck/field-groups` API.** `LABEL_BUCKET` is `LABEL_GROUP`
+  and `KEY_BUCKET` is `KEY_GROUP`; their values are a Design group or
+  `"Animation"` (`Place`), not a tab. New: `BLOCK_KEY_GROUP`, `placeOf`,
+  `bucketOfPlace`, `headerKeysOf`, `headerKeysOfPlace`, `PLACE_WORDS`,
+  `INJECTED_RETIRED`, `DESIGN_GROUPS` and `DESIGN_GROUP_KEY` (also from
+  `lib/puck/field-buckets`). `bucketOf` still answers the tab.
+  `seatContentBucket` is `seatDesignBucket`. `BUCKET_KEY` has `Design` and
+  `Animation` only; a section that declares `_sContent`, `_sStyle`, `_sLayout`
+  or `_sMedia` now throws. A section opens a Design group itself with its key
+  (`_dDesign: section("Design")`, as Prose, ProcessSteps, Footprint, Timeline
+  and TimelineTrack now do).
+- **`RETIRED` keeps every heading it retired.** A row now retires a level-2
+  heading whose label repeats the word of the PLACE it sits in (`PLACE_WORDS`:
+  "Content" in the Content part, "Style" or "Design" in the Design group,
+  "Layout" in Layout, …), with the same exact checks. The `Anchor` heading
+  every section gets is retired by key (`INJECTED_RETIRED`), because the
+  Anchor group heading above it says the same word.
+- **The keep-lists follow the groups.** `LAYOUT_FIELD_KEYS`,
+  `SECTION_THEME_FIELD_KEYS`, `SECTION_SHAPE_FIELD_KEYS`,
+  `SECTION_ANIM_FIELD_KEYS` and `BOUND_CARD_MEDIA_FIELD_KEYS` carry the new tab
+  and group heading keys, read off the builders' own headings.
+- **The text entries open the Design tab.** `SiteFields` hands them to the
+  Inspector as `lead` (drawn before the rows), and `entriesHiddenForTab` shows
+  them on Design only. `BUCKET_ICONS`: Design is the shell's `adjust`,
+  Animation the shell's `animation`.
+- **Breaking: efficient-easel ^6.2.0** (peer and dev; was `^4.0.0`):
+  `SETTINGS_BUCKETS` Design/Animation, `DESIGN_GROUPS`, `DESIGN_GROUP_KEY`,
+  the panel words' `designGroups`, the Inspector's `lead`, `leadFold`,
+  `closedFolds` and `onFold`, and the fold markers are easel 5.0.0's; 6.0.0
+  draws the text box's toolbar from the shell (`TextToolbar`), which this
+  package does not touch. **Breaking: efficient-shell ^7.22.1** (peer; dev
+  `^7.23.1`; was `^7.21.0`): easel 6's own floor, and the first shell with
+  the `slide-picker-*` / `slide-arrows-*` glyphs and the seven-character
+  `HexInput` the Hero's rows use. `scripts/test-part-final-text-box.tsx` now
+  finds the text box's toolbar as the shell's `.rosh-tb` (easel 6 draws
+  `TextToolbar`; `.es-tb` is gone).
+- New guard `scripts/test-panel-one-level-bands.tsx`: in every tabbed panel
+  (declared and resolved) every heading is a marker, so none is drawn; the
+  five groups and every Content and Animation heading are bands, nothing inside
+  Size … Anchor is; the bands come in order and every look row sits in its own
+  group's band; every branch of §2b.1; and `SiteFields` mounted: the band
+  order, the text box's band, a one-labelled-row band dropped, a one-unlabelled
+  -row band kept, no other heading kind, and a closed band kept closed on the
+  next node.
+- Host follow-ups when taking this release: efficient-storefront-blocks (about
+  15 guards that name the old tabs, `DetailRows`' `_sStyle: section("Style")`,
+  two uses of `BUCKET_KEY.Content`) and efficient-storefront (the pin, and about
+  10 guards), each in its own pull request.
+- `editor-words-catalogue` carries the new row and tab words (Design,
+  Animation, Arrows placement, Arrows shape, Article title …; `Show` is no
+  longer said alone), so a host can translate them.
+
 ## 10.0.0 - 2026-10-14
 
 - **The `Which corners` cells and the nine-square grid are efficient-shell

package/dist/components/SectionEditor.js

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

package/dist/components/SectionTextEntries.d.ts

@@ -1,5 +1,7 @@
 import type { SectionTextPart } from "../lib/puck/text-parts.js";
-export declare function SectionTextEntries({ parts, onOpen, }: {
+export declare function entryPartsOf(parts: SectionTextPart[]): SectionTextPart[];
+export declare function SectionTextEntries({ parts, onOpen, heading, }: {
     parts: SectionTextPart[];
     onOpen: (key: string) => void;
+    heading?: boolean;
 }): import("react").JSX.Element | null;

package/dist/components/SectionTextEntries.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{SettingsDrill as f}from"efficient-easel/panel";import a from"./UiIcon.js";import{say as i}from"../lib/editor-words.js";const l="Not shown on the page";function m({part:e,onOpen:o}){return n(f,{name:i(e.label),preview:e.offPage?i(l):e.preview||i("Empty"),offPage:e.offPage,status:e.hidden?n("span",{className:"sf-entry-eye",role:"img","aria-label":i("Hidden on the page"),children:n(a,{name:"eye-off",size:14})}):void 0,onOpen:()=>o(e.key)})}function u({parts:e,onOpen:o}){const t=e.filter(s=>!s.identifier);return t.length?r("div",{className:"sf-entries",children:[n("h3",{className:"sf-entries-head",children:i("Text")}),t.map(s=>n(m,{part:s,onOpen:o},s.key))]}):null}export{u as SectionTextEntries};
+"use client";import{jsx as t,jsxs as f}from"react/jsx-runtime";import{SettingsDrill as a}from"efficient-easel/panel";import l from"./UiIcon.js";import{say as i}from"../lib/editor-words.js";const m="Not shown on the page";function c({part:e,onOpen:n}){return t(a,{name:i(e.label),preview:e.offPage?i(m):e.preview||i("Empty"),offPage:e.offPage,status:e.hidden?t("span",{className:"sf-entry-eye",role:"img","aria-label":i("Hidden on the page"),children:t(l,{name:"eye-off",size:14})}):void 0,onOpen:()=>n(e.key)})}function u(e){return e.filter(n=>!n.identifier)}function g({parts:e,onOpen:n,heading:o=!0}){const r=u(e);return r.length?f("div",{className:"sf-entries",children:[o?t("h3",{className:"sf-entries-head",children:i("Text")}):null,r.map(s=>t(c,{part:s,onOpen:n},s.key))]}):null}export{g as SectionTextEntries,u as entryPartsOf};

package/dist/components/SiteFields.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import { type SettingsBucket } from "efficient-easel/fields";
 export declare const TAB_ICONS: Record<SettingsBucket, ReactNode>;
-export declare function SiteFields({ entries }: {
+export declare function SiteFields({ entries, entryCount }: {
     entries?: ReactNode;
+    entryCount?: number;
 }): import("react").JSX.Element;

package/dist/components/SiteFields.js

@@ -1 +1 @@
-"use client";import{jsx as l}from"react/jsx-runtime";import{useState as b}from"react";import{useSelectedFields as S}from"efficient-easel/easel";import{Inspector as C,planFields as T}from"efficient-easel/fields";import{BUCKET_ICONS as g,entriesHiddenForTab as h}from"../lib/puck/controls.js";import{BUCKETS as x}from"../lib/puck/field-groups.js";import{say as y}from"../lib/editor-words.js";const i=new Map,O=Object.fromEntries(x.map(t=>{const e=g[t];return[t,l(e,{},t)]}));function w({entries:t}){const{id:e,fields:a,values:m,readOnly:d,onChange:p}=S(),[s,f]=b(()=>i.get(e)),o=i.get(e),n=T(a).buckets,r=o&&n.includes(o)?o:s&&n.includes(s)?s:n[0],u=r===void 0||h(n,r)!==!0;return l(C,{fields:a,values:m,onChange:p,readOnly:d,tab:r,onTab:c=>{i.set(e,c),f(c)},tabIcons:O,idPrefix:e,ariaLabel:y("Section settings"),children:u?t:null})}export{w as SiteFields,O as TAB_ICONS};
+"use client";import{jsx as S}from"react/jsx-runtime";import{useLayoutEffect as O,useMemo as B,useRef as k,useState as T}from"react";import{useSelectedFields as D}from"efficient-easel/easel";import{Inspector as K,planFields as x}from"efficient-easel/fields";import{BUCKET_ICONS as j,entriesHiddenForTab as v}from"../lib/puck/controls.js";import{BUCKETS as L}from"../lib/puck/field-groups.js";import{say as q}from"../lib/editor-words.js";import{bandIsDropped as R,droppedBands as U,sameKeys as X,TEXT_BAND_KEY as F,TEXT_BAND_TITLE as G,withoutBands as H}from"../lib/puck/panel-bands.js";const E=new Map,f=new Set;function P(n,r){const s=new Map;for(const l of n.querySelectorAll(".es-insp-row[data-field]"))s.set(l.getAttribute("data-field")??"",l);const o=[];for(const[l,m]of r)o.push({key:l,rows:m.map(p=>{const d=s.get(p),c=!!d&&[...d.children].some(w=>!w.hidden),i=d?.querySelector(".es-field-label, .es-list-label")?.textContent?.trim();return{shown:c,labelled:c&&!!i}})});return o}const Y=Object.fromEntries(L.map(n=>{const r=j[n];return[n,S(r,{},n)]}));function te({entries:n,entryCount:r=0}){const{id:s,fields:o,values:l,readOnly:m,onChange:p}=D(),[d,c]=T(()=>new Set(f)),[i,w]=T(()=>new Set),g=k(null),C=B(()=>{const e=new Map;for(const t of x(o).rows){if(!t.fold)continue;const a=e.get(t.fold.key)??[];a.push(t.name),e.set(t.fold.key,a)}return e},[o]);O(()=>{const e=g.current?.parentElement;if(!e)return;const t=new Set(U(P(e,C)));w(a=>X(a,t)?a:t)});const _=B(()=>H(o,i),[o,i]),A={key:F,rows:Array.from({length:r},()=>({shown:!0,labelled:!0}))},I=r>0&&!R(A)?{key:F,title:G}:void 0,[b,M]=T(()=>E.get(s)),h=E.get(s),u=x(o).buckets,y=h&&u.includes(h)?h:b&&u.includes(b)?b:u[0],N=y===void 0||v(u,y)!==!0;return S(K,{fields:_,values:l,onChange:p,readOnly:m,tab:y,onTab:e=>{E.set(s,e),M(e)},tabIcons:Y,idPrefix:s,ariaLabel:q("Section settings"),lead:N?n:null,leadFold:I,closedFolds:d,onFold:(e,t)=>{t?f.delete(e):f.add(e),c(new Set(f))},children:S("span",{ref:g,hidden:!0})})}export{te as SiteFields,Y as TAB_ICONS};

package/dist/components/SlotChildRows.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as b}from"react/jsx-runtime";import{useEasel as x}from"efficient-easel/easel";import{SettingsDrill as A}from"efficient-easel/panel";import C from"./AddBlockRow.js";import N from"./AddChildRow.js";import{useSlotChildActions as k}from"./SlotChildActionsContext.js";import{HERO_GROUP_TYPE as $,heroGroupNestDepth as j}from"../lib/hero-group-placement.js";import{canAddTo as w}from"../lib/puck/add-target.js";import{GroupLabel as D}from"../lib/puck/controls.js";import{say as _}from"../lib/editor-words.js";function E({parent:o,parentType:t,label:d,rowName:r,onSelectChild:e,onAddChild:m,nestDepth:p=0}){const u=w(t,p);if(!u)return null;const{slot:n,choices:f,spec:i}=u,a=String(o.props.id),h=`${a}:${n}`,l=Array.isArray(o.props[n])?o.props[n]:[],R=i?.addBlocked?.(l)??null,S=i?.notice?.(l)??null;return b("div",{className:"sf-slot-rows",children:[d?s(D,{label:`${_(d)} · ${l.length}`}):null,S?s("p",{className:"sf-note",children:S}):null,l.map((c,g)=>s(A,{name:r(c),onOpen:()=>e(h,g,String(c.props.id),t)},String(c.props.id??`${h}-${g}`))),f?s(C,{choices:f,onPick:c=>m(a,n,c,l.length,t)}):i.fixed?null:s(N,{label:i.addLabel,blocked:R,onAdd:()=>m(a,n,i.childType,l.length,t)})]})}function G(o,t){return w(t)?.source==="footer"?o.blockRowName:o.childRowName}function O({parentType:o,label:t}){const{appState:d,selectedItem:r}=x(p=>p),e=k();if(!e||!r||r.type!==o)return null;const m=o===$?j(d?.data,String(r.props.id)):0;return s(E,{parent:r,parentType:o,label:t,rowName:G(e,o),onSelectChild:e.selectChild,onAddChild:e.addChild,nestDepth:m})}export{E as SlotChildRows,O as default,G as rowNamerFor};
+"use client";import{jsx as e,Fragment as A,jsxs as C}from"react/jsx-runtime";import{useEasel as N}from"efficient-easel/easel";import{LayersIcon as b}from"efficient-easel/icons";import{SettingsDrill as k,SettingsField as F}from"efficient-easel/panel";import _ from"./AddBlockRow.js";import j from"./AddChildRow.js";import{useSlotChildActions as D}from"./SlotChildActionsContext.js";import{HERO_GROUP_TYPE as $,heroGroupNestDepth as E}from"../lib/hero-group-placement.js";import{canAddTo as R}from"../lib/puck/add-target.js";import{say as I}from"../lib/editor-words.js";function O({parent:o,parentType:t,label:d,rowName:r,onSelectChild:s,onAddChild:m,nestDepth:a=0}){const h=R(t,a);if(!h)return null;const{slot:n,choices:u,spec:i}=h,p=String(o.props.id),f=`${p}:${n}`,l=Array.isArray(o.props[n])?o.props[n]:[],x=i?.addBlocked?.(l)??null,g=i?.notice?.(l)??null,S=C(A,{children:[g?e("p",{className:"sf-note",children:g}):null,l.map((c,w)=>e(k,{name:r(c),onOpen:()=>s(f,w,String(c.props.id),t)},String(c.props.id??`${f}-${w}`))),u?e(_,{choices:u,onPick:c=>m(p,n,c,l.length,t)}):i.fixed?null:e(j,{label:i.addLabel,blocked:x,onAdd:()=>m(p,n,i.childType,l.length,t)})]});return e("div",{className:"sf-slot-rows",children:d?e(F,{label:I(d),icon:e(b,{}),value:String(l.length),children:S}):S})}function P(o,t){return R(t)?.source==="footer"?o.blockRowName:o.childRowName}function v({parentType:o,label:t}){const{appState:d,selectedItem:r}=N(a=>a),s=D();if(!s||!r||r.type!==o)return null;const m=o===$?E(d?.data,String(r.props.id)):0;return e(O,{parent:r,parentType:o,label:t,rowName:P(s,o),onSelectChild:s.selectChild,onAddChild:s.addChild,nestDepth:m})}export{O as SlotChildRows,v as default,P as rowNamerFor};

package/dist/components/storefront-editor.css

@@ -2238,11 +2238,12 @@
 .es-field-head > .sf-colour {
   margin-left: auto;
 }
-/* Seven monospaced characters and the box's padding — no wider, so a two-word
-   label keeps its line beside the swatch. */
+/* The hex box's width is the SHELL's: `HexInput` is never narrower than its
+   seven characters and its padding. This sheet held it at 4.75rem, which cut
+   "#0A0A0A" to "#0A0A0" in the Hero's Texture color row (Lewis, 2026-10-14). */
 .sf-colour-hexwrap {
   flex: none;
-  width: 4.75rem;
+  display: flex;
 }
 .sf-colour-caption {
   font-size: var(--text-xs);

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

@@ -114,6 +114,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "An empty section. Add whatever you want inside.": "An empty section. Add whatever you want inside.";
     readonly Anchor: "Anchor";
     readonly "Anchor name": "Anchor name";
+    readonly Animation: "Animation";
     readonly "Another group already uses this heading \u2014 pick a different one.": "Another group already uses this heading — pick a different one.";
     readonly Answer: "Answer";
     readonly "Any color": "Any color";
@@ -128,10 +129,13 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Approved customer reviews in a star-rated card grid, pulled live.": "Approved customer reviews in a star-rated card grid, pulled live.";
     readonly Arrow: "Arrow";
     readonly Arrows: "Arrows";
+    readonly "Arrows placement": "Arrows placement";
+    readonly "Arrows shape": "Arrows shape";
     readonly Article: "Article";
     readonly "Article *headline* goes here.": "Article *headline* goes here.";
     readonly "Article Text": "Article Text";
     readonly "Article headline": "Article headline";
+    readonly "Article title": "Article title";
     readonly "As designed": "As designed";
     readonly "As shot": "As shot";
     readonly "As typed": "As typed";
@@ -342,6 +346,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Describe this section in a sentence or two.": "Describe this section in a sentence or two.";
     readonly "Describe this step in a sentence or two.": "Describe this step in a sentence or two.";
     readonly "Describe what happened, in a sentence or two.": "Describe what happened, in a sentence or two.";
+    readonly Design: "Design";
     readonly Detail: "Detail";
     readonly "Detail line": "Detail line";
     readonly Direction: "Direction";
@@ -721,6 +726,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly Overlay: "Overlay";
     readonly "Overlay - CartDrawer": "Overlay - CartDrawer";
     readonly "Overlay button": "Overlay button";
+    readonly "Overlay button link": "Overlay button link";
     readonly "Overlay color": "Overlay color";
     readonly "Overlay position": "Overlay position";
     readonly Padding: "Padding";
@@ -756,6 +762,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Plays well with\n*your favourite apps.*": "Plays well with\n*your favourite apps.*";
     readonly "Pop up - SubscribePopup": "Pop up - SubscribePopup";
     readonly "Portal card (stock + button + orders)": "Portal card (stock + button + orders)";
+    readonly Position: "Position";
     readonly Positions: "Positions";
     readonly "Post Card": "Post Card";
     readonly Prefix: "Prefix";
@@ -873,10 +880,12 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Short description of this figure.": "Short description of this figure.";
     readonly "Short detail line": "Short detail line";
     readonly "Short supporting line": "Short supporting line";
-    readonly Show: "Show";
+    readonly "Show arrows": "Show arrows";
     readonly "Show cover image": "Show cover image";
     readonly "Show hints": "Show hints";
     readonly "Show on a card": "Show on a card";
+    readonly "Show slide picker": "Show slide picker";
+    readonly "Show texture": "Show texture";
     readonly "Show the chat bubble": "Show the chat bubble";
     readonly "Show the chat bubble on the whole site": "Show the chat bubble on the whole site";
     readonly "Show ticker": "Show ticker";
@@ -897,6 +906,8 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Slash /": "Slash /";
     readonly "Slide name": "Slide name";
     readonly "Slide picker": "Slide picker";
+    readonly "Slide picker placement": "Slide picker placement";
+    readonly "Slide picker shape": "Slide picker shape";
     readonly Small: "Small";
     readonly "Social Logos": "Social Logos";
     readonly "Social link settings belong to a website.": "Social link settings belong to a website.";
@@ -991,6 +1002,7 @@ export declare const WEB_BUILDER_WORDS: {
     readonly "Text style": "Text style";
     readonly Texts: "Texts";
     readonly Texture: "Texture";
+    readonly "Texture color": "Texture color";
     readonly "Texture opacity": "Texture opacity";
     readonly "Thanks \u2014 we'll email you to confirm.": "Thanks — we'll email you to confirm.";
     readonly "The built-in spacing.": "The built-in spacing.";