efficient-web-builder 16.0.2 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## 17.0.0 - 2026-10-16
+
+Two builds in one release (GG cuts one 17.0.0, as easel cut one 10.0.0). A major: the efficient-easel peer range narrows to `^10.1.0` (10.0.0 for the text panel and the Border and Padding parts, 10.1.0 for `onChangeMany`, which the four-side Padding row writes with) and the efficient-shell range to `^7.47.0` (7.44.0 for the Border row and the No list glyph, 7.47.0 for the Style list that shows every style whole, scrolls with no cut row, opens small in a small field and is solid: shell#507, Lewis's review 2026-10-16).
+
+**A text part draws the one text panel** (card [MERGE] Settings Tabs Into Design And Animation; text panel v3, Lewis final 2026-10-15; wave 3 · W1 of `_desk/plans/2026-10-15-text-panel-build.md`; Italic, Lewis 2026-10-16 via GG). The part panel draws easel 10's `TextPartPanel`, the same panel the email designer draws.
+
+### Changed for merchants
+
+- **A text part's words are typed where they are, on the page; the panel draws no text box for them.** Its rows are, in this order: Style (with "*" when the text has its own changes, and Clear changes · Edit styles in the list), Font with an **Italic** button at its end, the number cells (Font size · Line spacing · Letter spacing · Paragraph spacing · Padding · Width), Alignment, and Capitalization.
+- **A text box stays only for words the canvas cannot take**: an image's alt text, a logo's alt text, a slide's name and its reel label, a Box name, a tab name, a category bar's active tab, a countdown's At zero line and a chart's value suffix (each field says so with the new `withPanelOnly` marker), words that never reach the page, and words hidden with the eye. The eye stays where it was.
+- **Italic** (new): the whole text leans; pressing it again follows the style; over an italic site style it shows pressed and turns the text upright. Stored as `_partStyles[part].italic`, painted as `font-style`.
+- **Capitalized** (new): a fourth letter case, beside As typed, Uppercase and Lowercase.
+- **The head names the part**: line 1 is the part's own name, line 2 "Part of ‹section›" (easel's `headWords`). It no longer shows the style's name (gate 4 of the text panel plan; it replaces the 2026-09-07 ruling, with Lewis's "v3 is final").
+- **Link and word colour are not cut**: a part whose words carry marks keeps its panel text box (toolbar only, no cells), because easel's canvas typing bar has no Link and no colour window yet. It goes when easel adds both to the canvas bar (`scripts/test-part-link-colour-kept.tsx`, red before the fix).
+- **A whole text list keeps its style rows** (GG 2026-10-16): a ticker's items, a masthead's issues, an integrations list, a mockup's cards and its terminal lines are one part with no type-in-place kind. They draw the one text panel's rows under the list's own control, as they had the style card in 16.0.2 (`scripts/test-text-lists-keep-style-rows.tsx`, red before the fix).
+- **No Color row and no style card of its own** (v3: a colour is put on selected words from the canvas toolbar). A colour a part already stores still draws, and Clear changes takes it away. "No style" is still the first answer in the Style list; Clear changes keeps the style the part follows.
+
+### Changed for hosts
+
+- The settings body wears easel's row inset (`es-insp-body`: 16px, 8px under a 284px panel), and `.sf-insp-body` no longer sets its own side padding; `--sf-insp-pad-x` follows `--es-insp-pad-x`.
+- `controls`: `withPanelOnly(field)` and `textFieldPanelOnly(field)`. `PartTextBox` exports `partTextCells` (the one list of a part's cells).
+- `label-vocabulary`: six more N10.1 Never words — typeface, font family, leading, character spacing, kerning, text transform (the storefront's `doc/naming.md` Never column takes them in the pin PR, as `test-label-vocabulary` there compares the two).
+
+### Guards
+
+- New `scripts/test-one-text-panel.tsx` (31 checks: italic stored and painted, Capitalized, the ten marked fields, the panel drawing `TextPartPanel` and no card or Color row, the head, the inset); all failed on 16.0.2.
+- Retired `scripts/test-part-field-icons.tsx` (the rows it checked are easel's `TextPartPanel` now, tested there). `test-part-colour` §7, `test-part-follows-style` §6, `test-part-final-text-box` §5, `test-panel-padding-narrows`, `test-panel-strip-width-stable`, `test-editor-type-steps`, `test-one-dropdown`, `test-one-editor-list` read the new panel.
+
+**A section and a Box take a Border** (card [DESIGN] The Hartes Name Block; Box Border approved by Lewis 2026-10-15, GG's order 2026-10-16: the section and Box tier first).
+
+### Added for merchants
+
+- **A Border row in every section's Shape group, after Corners** (a Box is a section, so this is the Box's Border too): the shell's `BorderInput` through easel 10's `SettingsBorder`, glyph `border-all`, with the shared `Each side` toggle in its head. One width box, or four (left · top / right · bottom); Solid / Dashed / Dotted; a colour. 0–20px (answer 4). The phone's own value is a second row shown in phone view only (`sectionBorderPhone`); an empty part shows the desktop value in grey there, and the site's Borders colour on desktop.
+- An empty Border is stored as nothing, and a section without a border of its own draws byte for byte as before.
+- **Heading and Text take their own left and right padding** (card [ADD] INOVIT And Hartes Metal US Websites; Lewis 2026-10-16, option A: the Hartes US footer tagline needs 20px more on the right). Their two Padding sliders become ONE `Padding` row: the shell's `SidesInput` through easel `SettingsSides`, glyph `padding-all`, with the `Each side` toggle in its head. Two boxes (left and right · top and bottom), or four. 0–200px, step 4; an empty side adds nothing. The phone's own value is the same row in phone view, its empty sides showing the desktop value in grey. The stored keys do not change (`sectionPaddingTop` / `Bottom` keep their data; `sectionPaddingLeft` / `Right` and the phone twins are new), and a Heading or Text with no padding draws byte for byte as before.
+
+- **Every section and every Box take left and right padding, in one four-side Padding row** (four-side Padding v2, Lewis 2026-10-15; GG 2026-10-16, step W-P1). The shared row (`sidesPaddingFields`, the shell's `SidesInput` through easel) replaces the section's two Top/Bottom sliders: two boxes (left and right · top and bottom), or four with `Each side` on, desktop and phone. New stored keys `sectionPaddingLeft` / `sectionPaddingRight` and their phone twins; an empty side draws nothing, so every stored page draws as before. A section draws its left/right on its outer padding wrapper; a Box on a picture still draws all four sides inside the card (its resting figures show grey in the row). The Box's hidden `py-6` is unchanged here (W-P2).
+
+- **The Box inside a Hero (HeroGroup) shows the same four-side Padding row** (one grammar, GG 2026-10-16) instead of its Top/Bottom sliders, and draws left/right (and their phone values) on its own root, never a wrapper (the slide's grid placement, card 66290). Nothing set draws what it drew before.
+- **Every phone twin of the Padding row is a phone-only field**: the Left/Right/Bottom phone twins the row keeps were not marked, so copy / paste style counted them as settings of their own ("Pasted N settings").
+
+### Added for hosts
+
+- `lib/content/borders.ts`, THE one border resolver: a stored value becomes `--sf-border-{top,right,bottom,left}-width`, `--sf-border-style`, `--sf-border-color` (each again with `-phone`). Only what is set is published, so an unset side or colour follows the tier above. The `sectionBorder` pass puts them on a `display: contents` carrier, `.sf-section-border`, right after the corners carrier. **The host's stylesheet draws the line** from them on `.sf-section-border > *`, as it draws `--sf-section-radius` (the storefront's next pin carries that rule).
+- `sidesPaddingFields(opts)` in `lib/puck/controls`: THE one four-side Padding row builder (keys, phone twin, empty-side value, grid), for every padding place; it writes every side it changes in one write, easel's `onChangeMany` (efficient-easel 10.1.0), never one `onChange` per side. The Heading/Text wrapper (`blockPadding`) draws left and right through `sectionPadAttrs`; a section's outer wrapper still does not.
+
+### Guards
+
+- New `scripts/test-section-border.tsx` (8): the resolver (nothing set, width vs side, the Hartes value, clamps, a bad style or colour dropped, the phone suffix), the pass (byte-identical without a border, the carrier with one, phone only), its place after `sectionCorners`, the Shape group's keys, and `source-rules/one-border-resolver` (a second file writing `--sf-border-` fails). Failed before the modules existed.
+- `test-shell-peer-range` and `test-publish-main-action` read the new ranges.
+- New `scripts/test-block-side-padding.tsx`: the draw (left/right and their phone values on Heading and Text, no wrapper when nothing is set, no left/right on a section's outer wrapper), the panel (eight keys on the Design tab, one edit = one patch, the row writes through `onChangeMany` only, the shell's sides group and toggle drawn) and the builder over other keys. Failed before the change. `test-band-row-names` reads the four-side row: it says `Padding`, its boxes name the sides.
+
+- New `scripts/test-section-side-padding.tsx` (27): a section and a plain Box draw left/right (desktop and phone), nothing set is not wrapped, a card Box draws none outside, every section's panel declares the eight keys and shows the shared row, and a Box's Border wraps its padding wrapper (the Hartes 20px sits inside the red line). Failed before the change.
+- `test-block-side-padding` §4 and `test-box-card-padding-in-design` §2 read the new rule (a section draws left/right; only the card Box keeps them inside).
+
+- New `scripts/test-padding-phone-twins-and-hero-group.tsx` (20): every phone twin is tier mobile, HeroGroup declares the eight keys and shows the shared row, and draws left/right on its root (desktop and phone; nothing set, no padding). Failed before the change (10 of 20).
+
 ## 16.0.2 - 2026-10-16
 
 **On a phone, a hero with a set height grows to fit its words** (card [ADD] INOVIT And Hartes Metal US Websites, GG 2026-10-15). hartesmetal.com/dealers: the heading "Become a Hartes Metal dealer" is five lines on a phone, and the hero's set phone height (60vh) was a fixed height, so the bottom-aligned words overflowed upward and the heading ran under the logo (181px above the top of the page at 390x844, 267px at 375x667).

package/dist/components/HeroGroup.d.ts

@@ -14,7 +14,11 @@ export interface HeroGroupProps {
     sectionPaddingBottom?: unknown;
     sectionPaddingTopPhone?: unknown;
     sectionPaddingBottomPhone?: unknown;
+    sectionPaddingLeft?: unknown;
+    sectionPaddingRight?: unknown;
+    sectionPaddingLeftPhone?: unknown;
+    sectionPaddingRightPhone?: unknown;
     content?: SlotComponent;
     dragRef?: ((element: Element | null) => void) | null;
 }
-export default function HeroGroup({ placement, nudgeX, nudgeY, width, gap, direction, justify, align, wrap, sectionPaddingTop, sectionPaddingBottom, sectionPaddingTopPhone, sectionPaddingBottomPhone, content: Content, dragRef, }: HeroGroupProps): import("react").JSX.Element;
+export default function HeroGroup({ placement, nudgeX, nudgeY, width, gap, direction, justify, align, wrap, sectionPaddingTop, sectionPaddingBottom, sectionPaddingTopPhone, sectionPaddingBottomPhone, sectionPaddingLeft, sectionPaddingRight, sectionPaddingLeftPhone, sectionPaddingRightPhone, content: Content, dragRef, }: HeroGroupProps): import("react").JSX.Element;

package/dist/components/HeroGroup.js

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

package/dist/components/PartSettingsPanel.d.ts

@@ -4,15 +4,6 @@ import { type FontRole, type FontsValue } from "../lib/fonts.js";
 import { type TypeGroup } from "../lib/theme.js";
 import { type PartStyle, type PartStyleBase } from "../lib/puck/part-styles.js";
 import { type PartSource } from "../lib/puck/source-bound-parts.js";
-export declare const PART_FIELDS: readonly [{
-    readonly key: "font";
-    readonly label: "Font";
-    readonly group: "Style";
-}, {
-    readonly key: "color";
-    readonly label: "Color";
-    readonly group: "Style";
-}];
 export type PartFace = {
     kind: "role";
     role: FontRole;
@@ -32,22 +23,11 @@ export declare function partFace(props: Record<string, unknown>, propKey: string
     faceRole: FontRole;
     base: PartStyleBase;
 } | null, fonts: FontsValue): PartFace;
-export declare function partStyleName(props: Record<string, unknown>, propKey: string, reading: {
-    faceRole: FontRole;
-    base: PartStyleBase;
-} | null, fonts: FontsValue): string | null;
 export declare function PartStyleSelect({ face, base, onPick, }: {
     face: PartFace;
     base: PartStyleBase | null;
     onPick: (role: FontRole | null) => void;
 }): import("react").JSX.Element;
-export declare function PartStyleCard({ parts, onEditStyle, onClearAll, onFollowStyle, kindLabel, }: {
-    parts: readonly PanelPart[];
-    onEditStyle?: () => void;
-    onClearAll: () => void;
-    onFollowStyle?: (role: FontRole | null) => void;
-    kindLabel?: string;
-}): import("react").JSX.Element;
 export { PartResetDot };
 export declare function PartPanelBody({ sectionName, onBack, textEditor, styleRow, children, }: {
     sectionName: string;

package/dist/components/PartSettingsPanel.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as u,Fragment as _}from"react/jsx-runtime";import{useEffect as W,useId as $e,useRef as Z,useState as ee}from"react";import{PartResetDot as ye}from"./PartResetDot.js";import{FieldSelect as ge,InspectorField as De}from"efficient-easel/fields";import{SettingsField as be,SettingsGroup as Ve}from"efficient-easel/panel";import{InspectorUpLevel as G}from"efficient-easel/chrome";import{StylesIcon as Be,TextColorIcon as Me,TypeIcon as Se}from"efficient-easel/icons";import{useEasel as We}from"efficient-easel/easel";import{Tooltip as Ge}from"efficient-shell/ui";import{PartInkControl as je}from"./PartInkControl.js";import{PartTextBox as Ue}from"./PartTextBox.js";import xe from"./UiIcon.js";import{usePreviewHeader as He}from"./PreviewHeaderContext.js";import{usePartStyle as Ke}from"./PreviewPartStyleContext.js";import{say as o}from"../lib/editor-words.js";import{readHidable as j,textFieldOffPage as Xe}from"../lib/puck/controls.js";import{TEXT_FIELD_MARKER as Ye}from"../lib/puck/field-markers.js";import{useSectionOps as qe}from"../lib/puck/use-section-ops.js";import{FONT_OPTIONS as Je,FONT_ROLES as te,FONT_ROLE_LABELS as ne,fontOption as L}from"../lib/fonts.js";import{isMultilineKind as Qe,partPlaceholder as Ze,typeInPlaceKind as et}from"../lib/puck/part-text.js";import{partRowField as tt}from"../lib/puck/part-row-field.js";import{decodePartKey as nt,partPropsWithRowValue as ot,partRowValue as st}from"../lib/puck/part-rows.js";import{PART_WIDTH_MAX as lt,propsWithPartStyleValue as oe,propsWithoutPartStyle as rt,readPartStyle as ve}from"../lib/puck/part-styles.js";import{partInks as at}from"../lib/puck/part-inks.js";import{styleKeyForPart as it,TEXT_KIND_LABELS as ct}from"../lib/sections/section-text-kinds.js";import{commitPartText as dt}from"../lib/puck/part-typing.js";import{keysOnCanvas as ut,useCanvasTypingPart as ft}from"../lib/puck/canvas-typing.js";import{useEditorHost as pt}from"../lib/editor-host.js";import{SOURCE_LINES as mt,SOURCE_ACTIONS as ht,SOURCE_ACTION_LABEL as yt,partSourceOf as gt,sourceSlugOf as Ne}from"../lib/puck/source-bound-parts.js";import{encodePartId as bt,holdsAuthoredText as St}from"../lib/puck/text-parts.js";import{regionsForSection as xt}from"../lib/sections/section-text-regions.js";import{textRegionOfPartKey as vt}from"../lib/sections/text-regions.js";const Nt={400:"Regular",500:"Medium",600:"Semibold",700:"Bold"},ke=[{key:"font",label:"Font",group:"Style"},{key:"color",label:"Color",group:"Style"}],kt=[...new Set(ke.map(e=>e.group))],Pt={font:t(Se,{}),color:t(Me,{})};function A(e){return e?o(e):null}function R(e){return e.kind==="role"?ne[e.role]:e.kind==="custom"?"Custom":null}const wt=e=>e.kind==="role"?`role:${e.role}`:e.kind;function Tt(e){const n=e.role;return n&&te.includes(n)?{kind:"role",role:n}:null}function Et(e,n){if(!e)return{kind:"unread"};const{faceRole:l,base:r}=e;if(n[l]===r.fontKey)return{kind:"role",role:l};const c=Object.keys(n).filter(i=>n[i]===r.fontKey);return c.length===1?{kind:"role",role:c[0]}:{kind:"custom"}}function se(e,n,l,r){return Tt(ve(e,n))??Et(l,r)}function Sn(e,n,l,r){return R(se(e,n,l,r))}function le(e,n){if(!e.length)return null;const l=n(e[0]);return e.every(r=>n(r)===l)?l:null}function Ct(e){return Object.values(e).filter(n=>n!==void 0).length}function Rt(e,n){const l=e.style[n];return n==="color"?l??"":l!==void 0?String(l):e.base.fontKey}function Ft({face:e,base:n,onPick:l}){const[r,c]=ee(!1),i=Z(null),y=Z(null),g=$e();W(()=>{if(!r)return;const a=E=>{i.current&&!i.current.contains(E.target)&&c(!1)};return document.addEventListener("mousedown",a),()=>document.removeEventListener("mousedown",a)},[r]);const f=e.kind==="role"?e.role:null,x=a=>{l(a),c(!1),y.current?.focus()};return u("div",{className:"sf-part-style-pick",ref:i,children:[u("button",{ref:y,type:"button",className:"sf-part-style-trigger","aria-expanded":r,"aria-controls":g,"aria-label":R(e)?o("Follows {name} — change",{name:A(R(e))}):o("Follows no style — change"),onClick:()=>c(a=>!a),onKeyDown:a=>{a.key==="Escape"&&r&&(a.preventDefault(),c(!1))},children:[t("span",{className:"sf-part-style-name",style:{fontFamily:n?.fontKey?`var(${L(n.fontKey)?.cssVar})`:void 0,fontWeight:n?.weight},children:A(R(e))}),t("span",{className:"sf-part-style-sign","aria-hidden":"true"})]}),r&&u("div",{className:"sf-multi-menu sf-part-style-menu",id:g,role:"listbox",onKeyDown:a=>{a.key==="Escape"&&(a.preventDefault(),c(!1),y.current?.focus())},children:[u("button",{type:"button",role:"option","aria-selected":f===null,className:`sf-part-style-option${f===null?" is-on":""}`,onClick:()=>x(null),children:[t("span",{className:"sf-part-style-option-name",children:o("No style")}),t("span",{className:"sf-note",children:o("Section’s own")})]}),te.map(a=>t("button",{type:"button",role:"option","aria-selected":f===a,className:`sf-part-style-option${f===a?" is-on":""}`,onClick:()=>x(a),children:t("span",{className:"sf-part-style-option-name",style:{fontFamily:`var(--font-role-${a})`},children:o(ne[a])})},a))]})]})}const U="";function Ot({face:e,base:n,onPick:l}){const r=e.kind==="role"?e.role:U,c=[{label:o("No style"),value:U},...te.map(i=>({label:o(ne[i]),value:i}))];return t(ge,{ariaLabel:o("Style"),value:r,options:c,inline:!0,onChange:i=>l(i===U?null:i),renderOption:i=>i.value===U?u(_,{children:[t("span",{className:"es-fsel-label sf-part-style-keep",children:i.label}),t("span",{className:"sf-part-style-aside","aria-hidden":"true",children:o("Section’s own")})]}):t("span",{className:"es-fsel-label",style:{fontFamily:`var(--font-role-${i.value})`},children:i.label}),renderValue:()=>t("span",{style:{fontFamily:n?.fontKey?`var(${L(n.fontKey)?.cssVar})`:void 0,fontWeight:n?.weight},children:A(R(e))}),valueText:i=>A(R(e))??i?.label??""})}function It({parts:e,onEditStyle:n,onClearAll:l,onFollowStyle:r,kindLabel:c}){const y=le(e,E=>wt(E.face))?e[0].face:null,g=y?R(y):null,f=y&&y.kind!=="unread"?e[0].base:null,x=e.reduce((E,H)=>E+Ct(H.style),0),a=f?L(f.fontKey)?.label:void 0;return u("div",{className:`sf-part-style${x?" has-overrides":""}`,children:[t("div",{className:"sf-part-style-caption",children:o("Style")}),e.length>1&&t("div",{className:"sf-part-style-count",children:o("{n} selected",{n:e.length})}),e.length===1&&c&&t("div",{className:"sf-part-style-count",children:o("{kind} · every row",{kind:o(c)})}),g&&f?u(_,{children:[r&&y?t(Ft,{face:y,base:f,onPick:r}):t("div",{className:"sf-part-style-name",style:{fontFamily:a?`var(${L(f.fontKey)?.cssVar})`:void 0,fontWeight:f.weight},children:o(g)}),t("div",{className:"sf-part-style-meta",children:[a,`${Math.round(f.sizePx)} px`,o(Nt[f.weight])].filter(Boolean).join(" · ")})]}):t("div",{className:"sf-part-style-name",children:o("Mixed styles")}),u("div",{className:"sf-part-style-top",children:[g?x?u(_,{children:[t("span",{className:"sf-part-chip",children:o("{n} changed",{n:x})}),t("button",{type:"button",className:"sf-part-link",onClick:l,children:o("Clear")})]}):t("span",{className:"sf-part-style-state",children:o("This text follows the site style.")}):t("span",{className:"sf-part-style-state",children:o("Changes apply to all selected.")}),t("span",{className:"sf-part-style-gap"}),g&&n&&t("button",{type:"button",className:"sf-part-link",onClick:n,children:o("Edit")})]})]})}function _t({sectionName:e,onBack:n,textEditor:l,styleRow:r,children:c}){return u("div",{className:"sf-part-panel",children:[t(G,{inline:!0,name:o(e),onSelect:n}),l,r,c]})}function Pe({source:e,slug:n}){const l=pt(),r=ht[e],c=!r.needsSlug||!!n;return t("div",{className:"sf-note sf-note--source",children:u("p",{className:"es-field-hint sf-hint-keep",children:[o(mt[e]),c?u(_,{children:[" ",t("button",{type:"button",className:"sf-source-open",onClick:()=>{r.type==="storefront-editor:open-menus"?l.send(r.type):n&&l.send(r.type,{slug:n})},children:o(yt)})]}):null]})})}const we=4,Lt=120;function At({region:e,sizePx:n,face:l,base:r,onFollowStyle:c,source:i,slug:y,onBack:g}){const f=e.follows;return u("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:o(e.label)})}),t("p",{children:n?o("Its size follows Site styles ▸ {follows} — {px}px right now.",{follows:o(f),px:Math.round(n)}):o("Its size follows Site styles ▸ {follows}.",{follows:o(f)})}),c?t(_,{children:t(be,{label:o("Style"),icon:t(Be,{}),hint:o("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:o(e.label).toLowerCase()}),children:t(Ot,{face:l,base:r,onPick:c})})}):t("p",{className:"es-field-hint sf-hint-keep",children:o("Only the size follows a site style. This section sets its own font, weight and letter case.")}),i?t(Pe,{source:i,slug:y}):null,t(G,{inline:!0,name:o("Page"),onSelect:g})]})}function zt({onBack:e}){return u("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:o("This part is no longer here.")})}),t("p",{children:o("The section it belonged to has been changed or removed.")}),t(G,{inline:!0,name:o("Page"),onSelect:e})]})}function $t({onBack:e,partId:n,why:l}){return u("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:o("This part's settings did not open.")})}),t("p",{children:o("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:u("code",{children:[n," — ",l]})}),t(G,{inline:!0,name:o("Page"),onSelect:e})]})}function Dt({nodeId:e,propKey:n,onBack:l,onEditStyle:r}){const{getItemById:c,getSelectorForId:i,config:y}=We(s=>s),g=qe(),f=ft(),{partStyle:x}=Ke(),{fonts:a}=He(),[E,H]=ee({}),re=Z(null),b=c(e),v=i(e),ae=b?y.components[b.type]:void 0,{key:C,row:P}=nt(n),ie=ae?.fields?.[C],w=P?tt(ie,P):ie,F=bt(e,n),m=b?.props??{},T=et(w),Te=Xe(w),Ee=St(w),K=b?gt(b.type):null,X=P?st(m[C],P):m[C],ce=!!P&&!(Array.isArray(m[C])&&P.index<m[C].length);W(()=>{if(ut(document))return;re.current?.querySelector(".es-copy [contenteditable='true'], .es-copy textarea, .sf-copybox textarea, .sf-copybox input")?.focus()},[F]);const[Y,de]=ee(0);W(()=>de(0),[F]);const q=!!b&&!ce&&(!v||!w);W(()=>{if(!q||Y>=we)return;const s=setTimeout(()=>de(d=>d+1),Lt);return()=>clearTimeout(s)},[q,Y]);const Ce=q&&Y<we;if(!b||ce)return t(zt,{onBack:l});const z=xt(b.type),ue=z?vt(z,n):null;if(z&&ue){const s=x?.partId===F?x:null,d=z[ue],h=d.writable===!0&&!!v,S=p=>{v&&g.replaceComponent(v.zone,v.index,{...b,props:oe(m,n,"role",p)})};return t(At,{region:d,sizePx:s?.base.sizePx??null,face:se(m,n,s,a),base:s?.base??null,onFollowStyle:h?S:void 0,source:K,slug:Ne(m),onBack:l})}if(!v||!w)return Ce?t("div",{className:"sf-note","aria-busy":"true"}):t($t,{onBack:l,partId:F,why:v?"no field":"no selector"});const $=s=>{g.replaceComponent(v.zone,v.index,{...b,props:s})},J=s=>{if(j(s).hidden!==j(X).hidden||!T){const h=P?ot(m,C,P,s):{...m,[C]:s};h&&$(h);return}dt({node:b,propKey:n,kind:T,zone:v.zone,index:v.index},j(s).text,g.replaceComponent)},Re=X,D=it(b?.type,n),Fe=ve(m,D),V=x?.partId===F?x:null,N=[{partKey:D,face:se(m,D,V,a),sizeGroup:V?.sizeGroup??null,base:V?.base??Vt,style:Fe}],Oe=le(N,s=>s.sizeGroup),fe=at(V?.inks),B=(s,d)=>{let h=m;for(const S of N)h=oe(h,S.partKey,s,d);$(h)},Ie=s=>B("role",s),_e=()=>{let s=m;for(const d of N)s=rt(s,d.partKey);$(s)},Le=s=>{let d=m;for(const h of N)for(const[S,p]of Object.entries(s))d=oe(d,h.partKey,S,p??null);$(d)},Ae=(s,d)=>{const h=N.some(k=>k.style[s]!==void 0),S=le(N,k=>Rt(k,s)),p=S===null,O=`sf-part-${e}-${n}-${s}`;return s==="color"?t(je,{value:p?null:String(S),label:d,colors:fe,onChange:k=>B("color",k)},s):t(be,{label:o(d),icon:Pt[s],className:"sf-part-field",changed:h,htmlFor:O,action:h?t(ye,{label:d,onClear:()=>B(s,null)}):void 0,children:s==="font"?t(ge,{id:O,ariaLabel:o(d),value:!p&&L(String(S))?String(S):void 0,placeholder:p?o("Mixed"):o("Site style"),options:Je.map(k=>({label:k.label,value:k.key})),onChange:k=>B("font",k||null)}):null},s)},pe=T==="text"||T==="textarea",{text:me,hidden:I}=j(X),M=w?.[Ye]?.label??n,he=I?o("Show {label} on the slide",{label:o(M)}):o("Hide {label} on the slide",{label:o(M)}),ze=u("div",{className:"sf-field-head",children:[t(Se,{}),t("span",{className:"sf-field-label sf-field-label--inline",children:o(M)}),pe&&t(Ge,{content:he,children:t("button",{type:"button",className:"sf-field-eye","aria-pressed":I,"aria-label":he,onClick:()=>J({text:me,hidden:!I}),children:I?t(xe,{name:"eye-off",size:14}):t(xe,{name:"eye",size:14})})})]}),Q=!Te&&Ee;return u(_t,{sectionName:ae?.label??b.type,onBack:l,textEditor:u("div",{ref:re,className:"sf-part-text",children:[T?t(Ue,{text:me,onTextChange:s=>J(pe?{text:s,hidden:I}:s),multiline:Qe(T),markup:T!=="plainText",styled:Q,style:N[0].style,base:N[0].base,setValue:Le,colors:fe.map(s=>({name:s.key,label:o(s.name),value:s.value})),placeholder:A(Ze(w))??void 0,ariaLabel:o(M),head:ze,typedOnCanvas:f===F}):t(De,{field:w,name:n,value:Re,onChange:J,id:`sf-part-${e}-${n}`}),Q&&T&&Oe===null&&t("p",{className:"es-field-hint sf-hint-keep",children:o("Fixed size — the site’s Text setting doesn’t resize this.")})]}),children:[K&&t(Pe,{source:K,slug:Ne(m)}),Q&&kt.map(s=>{const d=ke.filter(p=>p.group===s),h=d.filter(p=>N.some(O=>O.style[p.key]!==void 0)).length,S=`sf-part-g-${e}-${n}-${s.replace(/\W+/g,"-")}`;return u(Ve,{id:S,title:o(s),open:E[s]!==!0,onToggle:p=>H(O=>({...O,[s]:!p})),count:h,children:[t(It,{parts:N,onEditStyle:r,onClearAll:_e,onFollowStyle:Ie,kindLabel:ct[D]}),d.map(p=>Ae(p.key,p.label))]},s)})]})}const Vt={fontKey:"",sizePx:16,weight:400,lineRatio:1.4,letterEm:0,align:"left",case:"none",paddingPx:0,widthPx:lt};export{ke as PART_FIELDS,_t as PartPanelBody,ye as PartResetDot,Pe as PartSourceNote,It as PartStyleCard,Ot as PartStyleSelect,Dt as default,se as partFace,Sn as partStyleName};
+"use client";import{jsx as n,Fragment as D,jsxs as h}from"react/jsx-runtime";import{useEffect as $,useRef as Re,useState as Ce}from"react";import{PartResetDot as _e}from"./PartResetDot.js";import{FieldSelect as Fe,InspectorField as Ie}from"efficient-easel/fields";import{SettingsField as ze}from"efficient-easel/panel";import{InspectorUpLevel as z}from"efficient-easel/chrome";import{StylesIcon as Ae,TypeIcon as Le}from"efficient-easel/icons";import{useEasel as Ve}from"efficient-easel/easel";import{TextPartPanel as Be}from"efficient-easel/copy";import{Tooltip as Ke}from"efficient-shell/ui";import{PartTextBox as je,partTextCells as Ge}from"./PartTextBox.js";import he from"./UiIcon.js";import{usePreviewHeader as Me}from"./PreviewHeaderContext.js";import{usePartStyle as Ue}from"./PreviewPartStyleContext.js";import{say as l}from"../lib/editor-words.js";import{readHidable as A,textFieldOffPage as We,textFieldPanelOnly as He}from"../lib/puck/controls.js";import{TEXT_FIELD_MARKER as De}from"../lib/puck/field-markers.js";import{useSectionOps as $e}from"../lib/puck/use-section-ops.js";import{FONT_OPTIONS as Ye,FONT_ROLES as Y,FONT_ROLE_LABELS as X,fontOption as q}from"../lib/fonts.js";import{isMultilineKind as Xe,partPlaceholder as qe,typeInPlaceKind as Je}from"../lib/puck/part-text.js";import{partRowField as Qe}from"../lib/puck/part-row-field.js";import{decodePartKey as Ze,partPropsWithRowValue as et,partRowValue as tt}from"../lib/puck/part-rows.js";import{PART_WIDTH_MAX as nt,propsWithPartStyleValue as L,propsWithoutPartStyle as ot,readPartStyle as ye}from"../lib/puck/part-styles.js";import{partInks as lt}from"../lib/puck/part-inks.js";import{styleKeyForPart as st}from"../lib/sections/section-text-kinds.js";import{commitPartText as rt}from"../lib/puck/part-typing.js";import{keysOnCanvas as it,useCanvasTypingPart as at}from"../lib/puck/canvas-typing.js";import{useEditorHost as ct}from"../lib/editor-host.js";import{SOURCE_LINES as dt,SOURCE_ACTIONS as ut,SOURCE_ACTION_LABEL as ft,partSourceOf as pt,sourceSlugOf as ge}from"../lib/puck/source-bound-parts.js";import{encodePartId as mt,holdsAuthoredText as ht}from"../lib/puck/text-parts.js";import{regionsForSection as yt}from"../lib/sections/section-text-regions.js";import{textRegionOfPartKey as gt}from"../lib/sections/text-regions.js";function J(t){return t?l(t):null}function be(t){return t.kind==="role"?X[t.role]:t.kind==="custom"?"Custom":null}function bt(t){const o=t.role;return o&&Y.includes(o)?{kind:"role",role:o}:null}function xt(t,o){if(!t)return{kind:"unread"};const{faceRole:s,base:r}=t;if(o[s]===r.fontKey)return{kind:"role",role:s};const d=Object.keys(o).filter(i=>o[i]===r.fontKey);return d.length===1?{kind:"role",role:d[0]}:{kind:"custom"}}function Q(t,o,s,r){return bt(ye(t,o))??xt(s,r)}function St(t,o){if(!t.length)return null;const s=o(t[0]);return t.every(r=>o(r)===s)?s:null}const V="";function Pt({face:t,base:o,onPick:s}){const r=t.kind==="role"?t.role:V,d=[{label:l("No style"),value:V},...Y.map(i=>({label:l(X[i]),value:i}))];return n(Fe,{ariaLabel:l("Style"),value:r,options:d,inline:!0,onChange:i=>s(i===V?null:i),renderOption:i=>i.value===V?h(D,{children:[n("span",{className:"es-fsel-label sf-part-style-keep",children:i.label}),n("span",{className:"sf-part-style-aside","aria-hidden":"true",children:l("Section’s own")})]}):n("span",{className:"es-fsel-label",style:{fontFamily:`var(--font-role-${i.value})`},children:i.label}),renderValue:()=>n("span",{style:{fontFamily:o?.fontKey?`var(${q(o.fontKey)?.cssVar})`:void 0,fontWeight:o?.weight},children:J(be(t))}),valueText:i=>J(be(t))??i?.label??""})}function vt({sectionName:t,onBack:o,textEditor:s,styleRow:r,children:d}){return h("div",{className:"sf-part-panel",children:[n(z,{inline:!0,name:l(t),onSelect:o}),s,r,d]})}function xe({source:t,slug:o}){const s=ct(),r=ut[t],d=!r.needsSlug||!!o;return n("div",{className:"sf-note sf-note--source",children:h("p",{className:"es-field-hint sf-hint-keep",children:[l(dt[t]),d?h(D,{children:[" ",n("button",{type:"button",className:"sf-source-open",onClick:()=>{r.type==="storefront-editor:open-menus"?s.send(r.type):o&&s.send(r.type,{slug:o})},children:l(ft)})]}):null]})})}const Se=4,Tt=120;function wt({region:t,sizePx:o,face:s,base:r,onFollowStyle:d,source:i,slug:B,onBack:T}){const O=t.follows;return h("div",{className:"sf-note",children:[n("p",{children:n("strong",{children:l(t.label)})}),n("p",{children:o?l("Its size follows Site styles ▸ {follows} — {px}px right now.",{follows:l(O),px:Math.round(o)}):l("Its size follows Site styles ▸ {follows}.",{follows:l(O)})}),d?n(D,{children:n(ze,{label:l("Style"),icon:n(Ae,{}),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(t.label).toLowerCase()}),children:n(Pt,{face:s,base:r,onPick:d})})}):n("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.")}),i?n(xe,{source:i,slug:B}):null,n(z,{inline:!0,name:l("Page"),onSelect:T})]})}function kt({onBack:t}){return h("div",{className:"sf-note",children:[n("p",{children:n("strong",{children:l("This part is no longer here.")})}),n("p",{children:l("The section it belonged to has been changed or removed.")}),n(z,{inline:!0,name:l("Page"),onSelect:t})]})}function Nt({onBack:t,partId:o,why:s}){return h("div",{className:"sf-note",children:[n("p",{children:n("strong",{children:l("This part's settings did not open.")})}),n("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.")}),n("p",{className:"sf-note-detail",children:h("code",{children:[o," — ",s]})}),n(z,{inline:!0,name:l("Page"),onSelect:t})]})}function Ot({nodeId:t,propKey:o,onBack:s,onEditStyle:r}){const{getItemById:d,getSelectorForId:i,config:B}=Ve(e=>e),T=$e(),O=at(),{partStyle:E}=Ue(),{fonts:R,textStyles:Pe}=Me(),Z=Re(null),u=d(t),p=i(t),ee=u?B.components[u.type]:void 0,{key:x,row:b}=Ze(o),te=ee?.fields?.[x],y=b?Qe(te,b):te,S=mt(t,o),c=u?.props??{},g=Je(y),ne=We(y),oe=ht(y),K=u?pt(u.type):null,j=b?tt(c[x],b):c[x],le=!!b&&!(Array.isArray(c[x])&&b.index<c[x].length);$(()=>{if(it(document))return;Z.current?.querySelector(".es-copy [contenteditable='true'], .es-copy textarea, .sf-copybox textarea, .sf-copybox input")?.focus()},[S]);const[G,se]=Ce(0);$(()=>se(0),[S]);const M=!!u&&!le&&(!p||!y);$(()=>{if(!M||G>=Se)return;const e=setTimeout(()=>se(a=>a+1),Tt);return()=>clearTimeout(e)},[M,G]);const ve=M&&G<Se;if(!u||le)return n(kt,{onBack:s});const C=yt(u.type),re=C?gt(C,o):null;if(C&&re){const e=E?.partId===S?E:null,a=C[re],f=a.writable===!0&&!!p,N=H=>{p&&T.replaceComponent(p.zone,p.index,{...u,props:L(c,o,"role",H)})};return n(wt,{region:a,sizePx:e?.base.sizePx??null,face:Q(c,o,e,R),base:e?.base??null,onFollowStyle:f?N:void 0,source:K,slug:ge(c),onBack:s})}if(!p||!y)return ve?n("div",{className:"sf-note","aria-busy":"true"}):n(Nt,{onBack:s,partId:S,why:p?"no field":"no selector"});const _=e=>{T.replaceComponent(p.zone,p.index,{...u,props:e})},U=e=>{if(A(e).hidden!==A(j).hidden||!g){const f=b?et(c,x,b,e):{...c,[x]:e};f&&_(f);return}rt({node:u,propKey:o,kind:g,zone:p.zone,index:p.index},A(e).text,T.replaceComponent)},Te=j,F=st(u?.type,o),P=ye(c,F),w=E?.partId===S?E:null,m=[{partKey:F,face:Q(c,F,w,R),sizeGroup:w?.sizeGroup??null,base:w?.base??Ct,style:P}],we=St(m,e=>e.sizeGroup),ke=lt(w?.inks),k=(e,a)=>{let f=c;for(const N of m)f=L(f,N.partKey,e,a);_(f)},Ne=e=>k("role",e),ie=e=>{let a=c;for(const f of m)for(const[N,H]of Object.entries(e))a=L(a,f.partKey,N,H??null);_(a)},W=g==="text"||g==="textarea",{text:ae,hidden:v}=A(j),I=y?.[De]?.label??o,ce=v?l("Show {label} on the slide",{label:l(I)}):l("Hide {label} on the slide",{label:l(I)}),de=h("div",{className:"sf-field-head",children:[n(Le,{}),n("span",{className:"sf-field-label sf-field-label--inline",children:l(I)}),W&&n(Ke,{content:ce,children:n("button",{type:"button",className:"sf-field-eye","aria-pressed":v,"aria-label":ce,onClick:()=>U({text:ae,hidden:!v}),children:v?n(he,{name:"eye-off",size:14}):n(he,{name:"eye",size:14})})})]}),ue=!ne&&oe,Oe=!!g&&(He(y)||ne||v||!oe||g!=="plainText"),fe=Q(c,F,w,R),pe=fe.kind==="role"?fe.role:null,me=Object.entries(P).filter(([e,a])=>e!=="role"&&a!==void 0).length,Ee=()=>{let e=c;for(const a of m){const f=a.style.role;e=ot(e,a.partKey),f&&(e=L(e,a.partKey,"role",f))}_(e)};return h(vt,{sectionName:ee?.label??u.type,onBack:s,textEditor:n("div",{ref:Z,className:"sf-part-text",children:Oe?n(je,{text:ae,onTextChange:e=>U(W?{text:e,hidden:v}:e),multiline:Xe(g),markup:g!=="plainText",styled:!1,style:m[0].style,base:m[0].base,setValue:ie,colors:ke.map(e=>({name:e.key,label:l(e.name),value:e.value})),placeholder:J(qe(y))??void 0,ariaLabel:l(I),head:de,typedOnCanvas:O===S}):g?W?de:null:n(Ie,{field:y,name:o,value:Te,onChange:U,id:`sf-part-${t}-${o}`})}),children:[K&&n(xe,{source:K,slug:ge(c)}),ue&&n(Be,{style:{value:pe??"",options:[{value:"",label:l("No style"),description:l("Section’s own")},...Y.map(e=>({value:e,label:l(X[e]),description:q(R[e])?.label}))],onChange:e=>Ne(e||null),changed:me>0,onClearChanges:me>0?Ee:void 0,onEditStyles:r},font:{value:P.font??"",styleValue:q(m[0].base.fontKey)?.label,options:Ye.map(e=>({label:e.label,value:e.key})),onChange:e=>k("font",e||null)},italic:{value:P.italic,styleValue:Rt(Pe,pe),onChange:e=>k("italic",e??null)},cells:Ge(m[0].style,m[0].base,ie),align:{value:P.align??"",styleValue:m[0].base.align,onChange:e=>k("align",e||null)},letterCase:{value:P.case??"",styleValue:m[0].base.case,onChange:e=>k("case",e||null)}}),ue&&we===null&&n("p",{className:"es-field-hint sf-hint-keep",children:l("Fixed size — the site’s Text setting doesn’t resize this.")})]})}const Et={heading:"heading-1",heading2:"heading-2",heading3:"heading-3",body:"body-1",label:"body-5"};function Rt(t,o){const s=o?Et[o]:void 0;return!s||!Array.isArray(t)?!1:t.find(d=>d?.id===s)?.values?.italic===!0}const Ct={fontKey:"",sizePx:16,weight:400,lineRatio:1.4,letterEm:0,align:"left",case:"none",paddingPx:0,widthPx:nt};export{vt as PartPanelBody,_e as PartResetDot,xe as PartSourceNote,Pt as PartStyleSelect,Ot as default,Q as partFace};

package/dist/components/PartTextBox.d.ts

@@ -1,9 +1,10 @@
 import type { ReactNode } from "react";
-import { type CopyThemeColor } from "efficient-easel/copy";
+import { type CopyCell, type CopyThemeColor } from "efficient-easel/copy";
 import { type PartStyle, type PartStyleBase } from "../lib/puck/part-styles.js";
 export type PartStylePatch = {
     [K in keyof PartStyle]?: PartStyle[K] | null;
 };
+export declare function partTextCells(style: PartStyle, base: PartStyleBase, setValue: (patch: PartStylePatch) => void): CopyCell[];
 export declare function PartTextBox({ text, onTextChange, multiline, markup, styled, style, base, setValue, colors, placeholder, ariaLabel, head, typedOnCanvas, }: {
     text: string;
     onTextChange: (next: string) => void;

package/dist/components/PartTextBox.js

@@ -1 +1 @@
-"use client";import{jsx as o,jsxs as T}from"react/jsx-runtime";import{COPY_CELLS as l,CopyBox as A}from"efficient-easel/copy";import{PaddingYIcon as C,WidthIcon as I}from"efficient-easel/icons";import{say as u}from"../lib/editor-words.js";import{SHOP_MARKUP as R}from"../lib/markup.js";import{partTextTools as D}from"../lib/puck/canvas-typing.js";import{PART_PADDING_MAX as v,PART_PADDING_MIN as H,PART_PADDING_STEP as w,PART_WIDTH_MAX as z,PART_WIDTH_MIN as N,PART_WIDTH_STEP as M,partSpacingOf as j}from"../lib/puck/part-styles.js";const E=["left","center","right","justify"];function Y({text:c,onTextChange:d,multiline:r,markup:p=!0,styled:t=!0,style:e,base:a,setValue:i,colors:h,placeholder:s,ariaLabel:P,head:f,typedOnCanvas:m=!1}){const g=j(e),x=e.size??a.sizePx,_=[{...l.fontSize,value:e.size,styleValue:Math.round(a.sizePx),onChange:n=>i({size:n??null})},{...l.lineHeight,value:g.lineHeight,styleValue:a.lineRatio,onChange:n=>i(n===void 0?{lineHeight:null,line:null}:{lineHeight:n})},{...l.letterSpacing,scale:x,value:g.letterSpacingEm,styleValue:a.letterEm,onChange:n=>i(n===void 0?{letterSpacing:null,letter:null}:{letterSpacing:n})},{...l.paragraphSpacing,value:e.paragraphSpacing,styleValue:0,onChange:n=>i({paragraphSpacing:n??null})},{key:"padding",name:u("Padding"),icon:o(C,{}),unit:"px",step:w,shiftStep:10,min:H,max:v,value:e.padding,styleValue:a.paddingPx,onChange:n=>i({padding:n??null})},{key:"width",name:u("Width"),icon:o(I,{}),unit:"px",step:M,shiftStep:100,min:N,max:z,value:e.width,styleValue:a.widthPx,onChange:n=>i({width:n??null})}],S=D(p,r);return T("div",{className:"sf-part-textbox",children:[f,o(A,{value:c,onChange:d,multiline:r,placeholder:s,ariaLabel:P,rules:R,tools:S,barShows:m?"focus":"always",colors:p?h:[],align:t?{value:e.align??a.align,allow:E,onChange:n=>i({align:n})}:void 0,letterCase:t?{value:e.case??"",onChange:n=>i({case:n||null})}:void 0,cells:t?_:void 0})]})}export{Y as PartTextBox};
+"use client";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{COPY_CELLS as r,CopyBox as T}from"efficient-easel/copy";import{PaddingYIcon as S,WidthIcon as A}from"efficient-easel/icons";import{say as u}from"../lib/editor-words.js";import{SHOP_MARKUP as C}from"../lib/markup.js";import{partTextTools as I}from"../lib/puck/canvas-typing.js";import{PART_PADDING_MAX as R,PART_PADDING_MIN as D,PART_PADDING_STEP as v,PART_WIDTH_MAX as z,PART_WIDTH_MIN as H,PART_WIDTH_STEP as w,partSpacingOf as N}from"../lib/puck/part-styles.js";const M=["left","center","right","justify"];function j(i,a,e){const l=N(i),t=i.size??a.sizePx;return[{...r.fontSize,value:i.size,styleValue:Math.round(a.sizePx),onChange:n=>e({size:n??null})},{...r.lineHeight,value:l.lineHeight,styleValue:a.lineRatio,onChange:n=>e(n===void 0?{lineHeight:null,line:null}:{lineHeight:n})},{...r.letterSpacing,scale:t,value:l.letterSpacingEm,styleValue:a.letterEm,onChange:n=>e(n===void 0?{letterSpacing:null,letter:null}:{letterSpacing:n})},{...r.paragraphSpacing,value:i.paragraphSpacing,styleValue:0,onChange:n=>e({paragraphSpacing:n??null})},{key:"padding",name:u("Padding"),icon:g(S,{}),unit:"px",step:v,shiftStep:10,min:D,max:R,value:i.padding,styleValue:a.paddingPx,onChange:n=>e({padding:n??null})},{key:"width",name:u("Width"),icon:g(A,{}),unit:"px",step:w,shiftStep:100,min:H,max:z,value:i.width,styleValue:a.widthPx,onChange:n=>e({width:n??null})}]}function X({text:i,onTextChange:a,multiline:e,markup:l=!0,styled:t=!0,style:n,base:c,setValue:p,colors:d,placeholder:s,ariaLabel:h,head:f,typedOnCanvas:P=!1}){const m=j(n,c,p),x=I(l,e);return _("div",{className:"sf-part-textbox",children:[f,g(T,{value:i,onChange:a,multiline:e,placeholder:s,ariaLabel:h,rules:C,tools:x,barShows:P?"focus":"always",colors:l?d:[],align:t?{value:n.align??c.align,allow:M,onChange:o=>p({align:o})}:void 0,letterCase:t?{value:n.case==="capitalize"?"":n.case??"",onChange:o=>p({case:o||null})}:void 0,cells:t?m:void 0})]})}export{X as PartTextBox,j as partTextCells};

package/dist/components/SectionEditor.d.ts

@@ -31,7 +31,6 @@ type PanelContext = {
         label: string;
         fields: Record<string, unknown>;
     } | null;
-    styleNameOfPart: (nodeId: string, propKey: string) => string | null;
     siteId: string | null;
     websiteName: string | null;
     notifyParent: SendToHost;

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

@@ -846,8 +846,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 +917,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.";