efficient-web-builder 2.1.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 3.0.0 - 2026-10-10
+
+- **efficient-easel 1.0.0 and efficient-shell ^4.165.0** (peers; were
+  ^0.106.0 and ^4.163.0; Efficient-Pty-Ltd/efficient-easel#199, harness
+  UI-24). The editor's controls are efficient-shell's: buttons, tabs,
+  segmented strips, switches, dropdowns, number boxes, sliders, menus, the
+  Layers tree, the rail and the resize grips. A host loads
+  `efficient-shell/ui.css`, compiled by its own Tailwind, before easel's
+  sheets and `components/storefront-editor.css`, which follows them.
+- **Breaking:** `WebsiteSettingsPanel` no longer exports `TABPANEL_ID`. The
+  Site styles tabs are wired by `SettingsTabs` `idPrefix`
+  (`SITE_STYLES_ID_PREFIX`, `tabButtonId` / `tabPanelId`), the panel's look
+  hangs on `TABPANEL_CLASS`, and `SITE_STYLES_TABS` items lose `htmlId` /
+  `panelId`.
+- **The website's own buttons are the shell's:** Switch to Box footer and
+  Save as Template are `Button`; the Preview link wears `buttonClasses`.
+- **storefront-editor.css** drops the rules drawn by no file
+  (`.sf-colstep-btn`, `.sf-blogsource-btn`, `.sf-actions-slot`) and its own
+  look for the copy box's mark buttons (the shell's `IconButton` with
+  `aria-pressed`).
+- **Fix:** the inspector's Duplicate section and Remove section refuse a page
+  somebody else holds, as every other edit already did.
+- **Also ships #46**, which 2.1.0 lacks: every slider is the shell's `Slider`
+  (`SliderValue` and `lib/puck/slider-typing` are gone), the colour control is
+  the shell's `ColorPicker` + `HexInput`, the last chrome `title=` are the
+  shell's `Tooltip`, and the chrome's sheet reads only shell tokens.
+- **Lost until efficient-shell adds it:** a dropdown's closed value is no
+  longer drawn in its own face (the Text style and part font rows); the shell
+  `Select` takes no `renderValue`.
+
 ## 2.1.0 - 2026-10-10
 
 - **The editor's chrome takes its UI from `efficient-shell`** (#44, harness

package/README.md

@@ -89,6 +89,13 @@ import "efficient-web-builder/components/storefront-editor.css";
 Inside the package `@/…` is already a relative path, so a host needs no
 mapping of its own. It installs the peer dependencies the manifest lists.
 
+The sheets load in one order. Since `efficient-easel` 1.0 the editor's
+controls are `efficient-shell/ui`'s, and easel's tokens resolve to the
+shell's with no fallback, so `efficient-shell/ui.css` comes first, compiled
+by the host's own Tailwind (its `@source` scans the shell's `dist/`). Then
+easel's sheets (`efficient-easel/screen.css`), then
+`components/storefront-editor.css`.
+
 ### Releasing
 
 A merge is not a release. The pull request that wants hosts to see a change

package/dist/components/PartInkControl.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import{ColourSwatchRow as c}from"efficient-easel/text-styles";function m({value:l,label:s,colors:t,onChange:i}){const a=l===null,o=l||void 0,e=t.find(n=>n.key===o),d=e?e.value:o&&/^#[0-9a-f]{6}$/i.test(o)?o:void 0;return r("div",{className:"sf-part-ink",children:r(c,{value:o,hex:d,colours:t,label:s,followsWord:a?"Mixed":"Follows the style",anyWord:"Any color",onChange:n=>i(n===o&&e?null:n)})})}export{m as PartInkControl};
+"use client";import{jsx as s,jsxs as o}from"react/jsx-runtime";import{ColorSwatch as c,Tooltip as m}from"efficient-shell/ui";import{AnyColourSwatch as f}from"../lib/puck/ColourControl.js";function x({value:r,label:t,colors:i,onChange:d}){const p=r===null,a=r||void 0,n=i.find(e=>e.key===a),l=n?n.value:a&&/^#[0-9a-f]{6}$/i.test(a)?a:void 0;return o("div",{className:"sf-part-ink",children:[o("div",{className:"sf-part-ink-top",children:[s("span",{className:"sf-part-ink-label",children:t}),s("span",{className:"sf-part-ink-read",children:l?l.toUpperCase():p?"Mixed":"Follows the style"})]}),o("div",{className:"sf-part-ink-swatches",role:"group","aria-label":t,children:[i.map(e=>s(m,{content:`${e.name} · ${e.value.toUpperCase()}`,children:s(c,{color:e.value,"aria-label":e.name,size:"sm",selected:a===e.key,onClick:()=>d(a===e.key?null:e.key)})},e.key)),f({value:n?"":(l??"").toLowerCase(),label:"Any color",onChange:d})]})]})}export{x as PartInkControl};

package/dist/components/SectionEditor.js

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

package/dist/components/StylesPanel.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import m,{useWebsiteName as c}from"./WebsiteSettingsPanel.js";import d from"./SidePanelHead.js";import{StylesIcon as f}from"efficient-easel/rail";function S({tokenRef:s,siteId:i,onClose:n,onNotify:o,tab:l,onTabChange:a}){const t=c();return r("div",{className:"sf-styles",children:[e(d,{icon:e(f,{}),title:"Site styles",context:e("span",{title:`${t} — renamed in the Console: Storefront ▸ Sites ▸ Settings.`,children:t}),onHide:n}),e("div",{className:"sf-insp-body sf-scroll",children:e(m,{tokenRef:s,siteId:i,onNotify:o,tab:l,onTabChange:a})})]})}export{S as default};
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import m,{useWebsiteName as c}from"./WebsiteSettingsPanel.js";import f from"./SidePanelHead.js";import{StylesIcon as d}from"efficient-easel/rail";import{Tooltip as p}from"efficient-shell/ui";function S({tokenRef:t,siteId:n,onClose:i,onNotify:o,tab:a,onTabChange:l}){const s=c();return r("div",{className:"sf-styles",children:[e(f,{icon:e(d,{}),title:"Site styles",context:e(p,{content:`${s} — renamed in the Console: Storefront ▸ Sites ▸ Settings.`,className:"sf-name-tip",children:e("span",{className:"sf-name-text",children:s})}),onHide:i}),e("div",{className:"sf-insp-body sf-scroll",children:e(m,{tokenRef:t,siteId:n,onNotify:o,tab:a,onTabChange:l})})]})}export{S as default};

package/dist/components/SwitchToBoxFooter.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as d}from"react";import{createNode as b,newId as w}from"efficient-easel/data";import{useEasel as x}from"efficient-easel/easel";import{useStorefrontDocument as g}from"./StorefrontDocumentContext.js";import{boxFooterFromFooter as k}from"../lib/puck/box-footer.js";import{FOOTER_TYPE as y}from"../lib/puck/footer-blocks.js";import{SITE_FOOTER_TYPE as i,withSectionGroup as N}from"../lib/puck/section-groups.js";function S(){const{appState:c,dispatch:a,config:l}=x(t=>t),{readOnly:m}=g(),[f,s]=d(!1),n=c.data.content;if(m||n.some(t=>t.type===i))return null;const u=n.find(t=>t.type===y)??null,p=(t,o)=>b(l,t,o),h=()=>{const t=k(u,p,w(i));a({type:"setData",data:o=>({...o,content:[...N(o.content,t)]}),recordHistory:!0}),s(!1)};return r("div",{className:"sf-box-footer-switch",children:[e("p",{className:"sf-box-footer-switch-text",children:"Build this footer out of Boxes and blocks, like a page: the same menus, signup, social links and logo, with the copyright as a Legal Line. Your current footer is kept."}),f?r("div",{className:"sf-box-footer-switch-row",children:[e("button",{type:"button",className:"es-btn-primary",onClick:h,children:"Switch now"}),e("button",{type:"button",className:"es-btn-ghost",onClick:()=>s(!1),children:"Cancel"})]}):e("button",{type:"button",className:"es-btn-ghost",onClick:()=>s(!0),children:"Switch to Box footer"})]})}export{S as default};
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as w}from"react";import{createNode as x,newId as k}from"efficient-easel/data";import{useEasel as g}from"efficient-easel/easel";import{Button as s}from"efficient-shell/ui";import{useStorefrontDocument as y}from"./StorefrontDocumentContext.js";import{boxFooterFromFooter as S}from"../lib/puck/box-footer.js";import{FOOTER_TYPE as E}from"../lib/puck/footer-blocks.js";import{SITE_FOOTER_TYPE as a,withSectionGroup as F}from"../lib/puck/section-groups.js";function T(){const{appState:c,dispatch:l,config:m}=g(o=>o),{readOnly:f}=y(),[p,r]=w(!1),n=c.data.content;if(f||n.some(o=>o.type===a))return null;const d=n.find(o=>o.type===E)??null,u=(o,t)=>x(m,o,t),h=()=>{const o=S(d,u,k(a));l({type:"setData",data:t=>({...t,content:[...F(t.content,o)]}),recordHistory:!0}),r(!1)};return i("div",{className:"sf-box-footer-switch",children:[e("p",{className:"sf-box-footer-switch-text",children:"Build this footer out of Boxes and blocks, like a page: the same menus, signup, social links and logo, with the copyright as a Legal Line. Your current footer is kept."}),p?i("div",{className:"sf-box-footer-switch-row",children:[e(s,{variant:"primary",size:"sm",onClick:h,children:"Switch now"}),e(s,{variant:"secondary",size:"sm",onClick:()=>r(!1),children:"Cancel"})]}):e(s,{variant:"secondary",size:"sm",onClick:()=>r(!0),children:"Switch to Box footer"})]})}export{T as default};

package/dist/components/TextStyleRow.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{ChevronIcon as f}from"efficient-easel/icons";function h({styleKey:i,label:a,icon:t,value:s,sampleStyle:r,open:n,onToggle:d,saved:o=!1,children:c}){return l("div",{"data-sf-style-row":i,className:`sf-style-row${n?" is-open":""}`,children:[l("button",{type:"button",className:"sf-style-head","aria-expanded":n,onClick:d,children:[e("span",{className:"sf-style-caret","aria-hidden":"true",children:e(f,{size:13})}),t?e("span",{className:"es-field-icon",children:t}):null,e("span",{className:"sf-style-name",children:a}),s!=null?e("span",{className:"sf-style-sample",style:r,title:typeof s=="string"?s:void 0,children:s}):null,e("span",{className:`sf-style-slot${o?" is-saved":""}`,children:e(m,{})})]}),n&&e("div",{className:"sf-style-body",children:c})]})}function m(){return e("svg",{viewBox:"0 0 24 24",width:"14",height:"14",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e("polyline",{points:"20 6 9 17 4 12"})})}export{h as default};
+"use client";import{jsx as s,jsxs as i}from"react/jsx-runtime";import{ChevronIcon as f}from"efficient-easel/icons";import{Tooltip as h}from"efficient-shell/ui";function m({styleKey:a,label:r,icon:l,value:e,sampleStyle:t,open:n,onToggle:o,saved:d=!1,children:c}){return i("div",{"data-sf-style-row":a,className:`sf-style-row${n?" is-open":""}`,children:[i("button",{type:"button",className:"sf-style-head","aria-expanded":n,onClick:o,children:[s("span",{className:"sf-style-caret","aria-hidden":"true",children:s(f,{size:13})}),l?s("span",{className:"es-field-icon",children:l}):null,s("span",{className:"sf-style-name",children:r}),e!=null?typeof e=="string"?s(h,{content:e,className:"sf-style-sample-tip",children:s("span",{className:"sf-style-sample",style:t,children:e})}):s("span",{className:"sf-style-sample",style:t,children:e}):null,s("span",{className:`sf-style-slot${d?" is-saved":""}`,children:s(p,{})})]}),n&&s("div",{className:"sf-style-body",children:c})]})}function p(){return s("svg",{viewBox:"0 0 24 24",width:"14",height:"14",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:s("polyline",{points:"20 6 9 17 4 12"})})}export{m as default};

package/dist/components/TextStylesField.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as I,Fragment as T}from"react/jsx-runtime";import{FieldSelect as M}from"efficient-easel/fields";import{SettingsField as v}from"efficient-easel/panel";import{AccentIcon as G,CaseIcon as D,StylesIcon as X,TextLinesIcon as C,TextSizeIcon as p,TextSmallIcon as B,TypeIcon as $,WeightIcon as W}from"efficient-easel/icons";import{PartResetDot as x}from"./PartSettingsPanel.js";import k from"./TextStyleRow.js";import{DEFAULT_FONTS as L,FONT_CATEGORY_LABELS as R,fontItalicIsUsable as z,fontOption as E,fontsByCategory as K,isHeadingRole as m}from"../lib/fonts.js";import{compressionMetrics as j,DEFAULT_HEADING_COMPRESSION as O,HEADING_MAX_PX_MAX as Z,HEADING_MAX_PX_MIN as U,HEADING_WEIGHT_MAX as V,HEADING_WEIGHT_MIN as Y,TEXT_SIZE_MAX as q,TEXT_SIZE_MIN as J,SIZE_STEPS as F,TEXT_SIZE_STEP as Q}from"../lib/theme.js";const w=[{role:"heading",title:"Heading 1",group:"heading",step:"headingLarge",base:17,icon:t(p,{})},{role:"heading2",title:"Heading 2",group:"heading",step:"headingMedium",base:15,icon:t(p,{})},{role:"heading3",title:"Heading 3",group:"heading",step:"headingSmall",base:13,icon:t(p,{})},{role:"accent",title:"Accent",step:"accent",base:15,icon:t(G,{})},{role:"body",title:"Body",group:"body",step:"body",base:14,icon:t(C,{})},{role:"label",title:"Labels",group:"label",step:"label",base:11,icon:t(B,{})}];function xe(n){return n==="heading"?F.filter(i=>i.startsWith("heading")):F.filter(i=>i===n)}const ee=9,f=500,te=100,le=80,ne=4,ae=600,ie=700,se=400,oe="0.18em";function ce({id:n,value:i,onChange:a}){const o=K().flatMap(([l,c])=>c.map(s=>({label:s.label,value:s.key,group:R[l]}))),r=(l,c)=>t("span",{style:{fontFamily:`var(${E(l)?.cssVar??"--font-body"})`},children:c});return t(M,{id:n,value:i,onChange:a,options:o,renderOption:l=>r(l.value,l.label),renderValue:l=>l?r(l.value,l.label):null})}function re({label:n,icon:i,readout:a,min:o,max:r,step:l,value:c,onChange:s,action:h,hint:d}){return t(v,{label:n,icon:i,value:a,action:h,hint:d,children:t("input",{type:"range",min:o,max:r,step:l,value:c,onChange:g=>s(Number(g.target.value)),className:"h-1 w-full cursor-pointer","aria-label":n})})}function y({label:n,icon:i,value:a,fallback:o,min:r,max:l,step:c,suffix:s="",hint:h,onChange:d}){const g=a===null;return t(re,{label:n,icon:i,readout:g?"Auto":`${a}${s}`,min:r,max:l,step:c,value:g?o:a,onChange:d,action:g?null:t(x,{label:n,what:"change",onClear:()=>d(null)}),hint:h})}function H({label:n,icon:i,options:a,value:o,onChange:r,hint:l,action:c}){return t(v,{label:n,icon:i,value:a.find(s=>s.value===o)?.label,hint:l,action:c,children:t("div",{className:"sf-rungs",children:a.map(s=>t("button",{type:"button","aria-pressed":s.value===o,onClick:()=>r(s.value),className:`sf-rung${s.value===o?" is-active":""}`,children:s.label},s.value))})})}const ue=[{value:"authored",label:"As designed"},{value:"sentence",label:"As typed"}],he=[{value:"normal",label:"Normal"},{value:"tight",label:"Tight"},{value:"compressed",label:"Compressed"}];function de({fontKey:n,weight:i,fallbackWeight:a,onWeight:o}){const l=(i??a)>=ae,c=z(n),s=E(n)?.label??"This face";return t(v,{label:"Style",icon:t(X,{}),value:l?"Bold":"Normal",hint:"Bold is the weight above — one value, two ways to set it.",children:I("div",{className:"sf-rungs",children:[t("button",{type:"button","aria-pressed":l,"aria-label":"Bold",title:"Bold",onClick:()=>o(l?se:ie),className:`sf-rung sf-rung--glyph${l?" is-active":""}`,style:{fontWeight:700},children:"B"}),t("button",{type:"button","aria-pressed":!1,"aria-label":"Italic",disabled:!0,title:c?"Italic is not saved yet — the theme row has no column for it (card 66162.b).":`${s} is loaded without an italic, so it cannot be set in italic. Slanting it would deform the letters rather than style them.`,className:"sf-rung sf-rung--glyph",style:{fontStyle:"italic"},children:"I"})]})})}function ge({fonts:n,compression:i,headingTypography:a,openRole:o,onOpenRole:r,onFontChange:l,sizes:c,onSizeChange:s,onCompressionChange:h,onHeadingTypographyChange:d,livePx:g,savedRole:P=null}){const b=e=>d({...a,...e}),S=e=>e==="accent"?"weightStrong":e==="heading2"?"weight2":e==="heading3"?"weight3":"weight",_=e=>e==="heading2"?"case2":e==="heading3"?"case3":"case",A=j(i);return t("div",{className:"sf-style-list",children:w.map(e=>{const N=o===e.role;return t(k,{styleKey:e.role,label:e.title,icon:e.icon,value:E(n[e.role])?.label??n[e.role],sampleStyle:fe(e,n,a,A),open:N,onToggle:()=>r(N?null:e.role),saved:P===e.role,children:N&&I(T,{children:[t(v,{label:"Font",icon:t($,{}),htmlFor:`sf-font-${e.role}`,action:n[e.role]===L[e.role]?null:t(x,{label:"Font",what:"change",onClear:()=>l(e.role,L[e.role])}),children:t(ce,{id:`sf-font-${e.role}`,value:n[e.role],onChange:u=>l(e.role,u)})}),e.step&&s&&t(y,{label:"Size",icon:t(p,{}),value:c[e.step],fallback:e.base*2,min:J,max:q,step:Q,suffix:"px",hint:c[e.step]===null?"Auto = this style states no size, and text following it keeps the size its section drew.":"The size a text takes when you set it to follow this style. Sections keep their own sizes.",onChange:u=>s(e.step,u)}),(m(e.role)||e.role==="accent")&&I(T,{children:[t(y,{label:"Weight",icon:t(W,{}),value:a[S(e.role)],fallback:m(e.role)?f:a.weight??f,min:Y,max:V,step:te,hint:e.role==="accent"?"Auto = the accent phrase takes the heading's own weight.":void 0,onChange:u=>b({[S(e.role)]:u})}),t(de,{fontKey:n[e.role],weight:a[S(e.role)],fallbackWeight:m(e.role)?f:a.weight??f,onWeight:u=>b({[S(e.role)]:u})})]}),m(e.role)&&I(T,{children:[t(H,{label:"Line & text gap",icon:t(C,{}),options:he,value:i,onChange:h,hint:A.lineHeight===void 0?"The built-in spacing.":`Line gap ${A.lineHeight} · text gap ${A.letterSpacing}em.`,action:i===O?null:t(x,{label:"Line & text gap",what:"change",onClear:()=>h(O)})}),t(H,{label:"Capitals",icon:t(D,{}),options:ue,value:a[_(e.role)],onChange:u=>b({[_(e.role)]:u}),hint:"The only setting that changes a heading's capitals.",action:a[_(e.role)]==="authored"?null:t(x,{label:"Capitals",what:"change",onClear:()=>b({[_(e.role)]:"authored"})})}),t(y,{label:"Largest size",icon:t(p,{}),value:a.maxPx,fallback:le,min:U,max:Z,step:ne,suffix:"px",hint:"Caps the biggest heading on the site. Auto = each section's own.",onChange:u=>b({maxPx:u})})]})]})},e.role)})})}function fe(n,i,a,o){const r=Math.max(ee,n.base),l={fontFamily:`var(${E(i[n.role])?.cssVar??"--font-body"})`,fontSize:`${r.toFixed(1)}px`,lineHeight:1.15};return m(n.role)?(l.fontWeight=a.weight??f,l.textTransform=a.case==="sentence"?"none":"uppercase",o.letterSpacing!==void 0&&(l.letterSpacing=`${o.letterSpacing}em`)):n.role==="accent"?(l.fontWeight=a.weightStrong??a.weight??f,o.letterSpacing!==void 0&&(l.letterSpacing=`${o.letterSpacing}em`)):n.role==="label"&&(l.textTransform="uppercase",l.letterSpacing=oe),l}export{ge as default};
+"use client";import{jsx as t,jsxs as A,Fragment as T}from"react/jsx-runtime";import{FieldSelect as G}from"efficient-easel/fields";import{SettingsField as v}from"efficient-easel/panel";import{Tooltip as C}from"efficient-shell/ui";import{AccentIcon as D,CaseIcon as X,StylesIcon as B,TextLinesIcon as L,TextSizeIcon as b,TextSmallIcon as $,TypeIcon as W,WeightIcon as k}from"efficient-easel/icons";import{PartResetDot as x}from"./PartSettingsPanel.js";import{Slider as R}from"../lib/puck/controls.js";import z from"./TextStyleRow.js";import{DEFAULT_FONTS as O,FONT_CATEGORY_LABELS as K,fontItalicIsUsable as j,fontOption as E,fontsByCategory as Z,isHeadingRole as m}from"../lib/fonts.js";import{compressionMetrics as U,DEFAULT_HEADING_COMPRESSION as F,HEADING_MAX_PX_MAX as V,HEADING_MAX_PX_MIN as Y,HEADING_WEIGHT_MAX as q,HEADING_WEIGHT_MIN as J,TEXT_SIZE_MAX as Q,TEXT_SIZE_MIN as w,SIZE_STEPS as H,TEXT_SIZE_STEP as ee}from"../lib/theme.js";const te=[{role:"heading",title:"Heading 1",group:"heading",step:"headingLarge",base:17,icon:t(b,{})},{role:"heading2",title:"Heading 2",group:"heading",step:"headingMedium",base:15,icon:t(b,{})},{role:"heading3",title:"Heading 3",group:"heading",step:"headingSmall",base:13,icon:t(b,{})},{role:"accent",title:"Accent",step:"accent",base:15,icon:t(D,{})},{role:"body",title:"Body",group:"body",step:"body",base:14,icon:t(L,{})},{role:"label",title:"Labels",group:"label",step:"label",base:11,icon:t($,{})}];function ye(n){return n==="heading"?H.filter(i=>i.startsWith("heading")):H.filter(i=>i===n)}const le=9,g=500,ne=100,ae=80,ie=4,se=600,oe=700,ce=400,re="0.18em";function ue({id:n,value:i,onChange:a}){const o=Z().flatMap(([l,c])=>c.map(s=>({label:s.label,value:s.key,group:K[l]}))),r=(l,c)=>t("span",{style:{fontFamily:`var(${E(l)?.cssVar??"--font-body"})`},children:c});return t(G,{id:n,value:i,onChange:a,options:o,renderOption:l=>r(l.value,l.label),renderValue:l=>l?r(l.value,l.label):null})}function he({label:n,icon:i,readout:a,min:o,max:r,step:l,value:c,onChange:s,action:h,hint:d}){return t(v,{label:n,icon:i,value:a,action:h,hint:d,children:t(R,{min:o,max:r,step:l,value:c,readout:!1,ariaLabel:n,onChange:s})})}function y({label:n,icon:i,value:a,fallback:o,min:r,max:l,step:c,suffix:s="",hint:h,onChange:d}){const p=a===null;return t(he,{label:n,icon:i,readout:p?"Auto":`${a}${s}`,min:r,max:l,step:c,value:p?o:a,onChange:d,action:p?null:t(x,{label:n,what:"change",onClear:()=>d(null)}),hint:h})}function P({label:n,icon:i,options:a,value:o,onChange:r,hint:l,action:c}){return t(v,{label:n,icon:i,value:a.find(s=>s.value===o)?.label,hint:l,action:c,children:t("div",{className:"sf-rungs",children:a.map(s=>t("button",{type:"button","aria-pressed":s.value===o,onClick:()=>r(s.value),className:`sf-rung${s.value===o?" is-active":""}`,children:s.label},s.value))})})}const de=[{value:"authored",label:"As designed"},{value:"sentence",label:"As typed"}],ge=[{value:"normal",label:"Normal"},{value:"tight",label:"Tight"},{value:"compressed",label:"Compressed"}];function fe({fontKey:n,weight:i,fallbackWeight:a,onWeight:o}){const l=(i??a)>=se,c=j(n),s=E(n)?.label??"This face";return t(v,{label:"Style",icon:t(B,{}),value:l?"Bold":"Normal",hint:"Bold is the weight above — one value, two ways to set it.",children:A("div",{className:"sf-rungs",children:[t(C,{content:"Bold",className:"sf-rung-tip",children:t("button",{type:"button","aria-pressed":l,"aria-label":"Bold",onClick:()=>o(l?ce:oe),className:`sf-rung sf-rung--glyph${l?" is-active":""}`,style:{fontWeight:700},children:"B"})}),t(C,{className:"sf-rung-tip",content:c?"Italic is not saved yet — the theme row has no column for it (card 66162.b).":`${s} is loaded without an italic, so it cannot be set in italic. Slanting it would deform the letters rather than style them.`,children:t("span",{className:"sf-tip-disabled",tabIndex:0,children:t("button",{type:"button","aria-pressed":!1,"aria-label":"Italic",disabled:!0,className:"sf-rung sf-rung--glyph",style:{fontStyle:"italic"},children:"I"})})})]})})}function be({fonts:n,compression:i,headingTypography:a,openRole:o,onOpenRole:r,onFontChange:l,sizes:c,onSizeChange:s,onCompressionChange:h,onHeadingTypographyChange:d,livePx:p,savedRole:M=null}){const f=e=>d({...a,...e}),S=e=>e==="accent"?"weightStrong":e==="heading2"?"weight2":e==="heading3"?"weight3":"weight",_=e=>e==="heading2"?"case2":e==="heading3"?"case3":"case",I=U(i);return t("div",{className:"sf-style-list",children:te.map(e=>{const N=o===e.role;return t(z,{styleKey:e.role,label:e.title,icon:e.icon,value:E(n[e.role])?.label??n[e.role],sampleStyle:me(e,n,a,I),open:N,onToggle:()=>r(N?null:e.role),saved:M===e.role,children:N&&A(T,{children:[t(v,{label:"Font",icon:t(W,{}),htmlFor:`sf-font-${e.role}`,action:n[e.role]===O[e.role]?null:t(x,{label:"Font",what:"change",onClear:()=>l(e.role,O[e.role])}),children:t(ue,{id:`sf-font-${e.role}`,value:n[e.role],onChange:u=>l(e.role,u)})}),e.step&&s&&t(y,{label:"Size",icon:t(b,{}),value:c[e.step],fallback:e.base*2,min:w,max:Q,step:ee,suffix:"px",hint:c[e.step]===null?"Auto = this style states no size, and text following it keeps the size its section drew.":"The size a text takes when you set it to follow this style. Sections keep their own sizes.",onChange:u=>s(e.step,u)}),(m(e.role)||e.role==="accent")&&A(T,{children:[t(y,{label:"Weight",icon:t(k,{}),value:a[S(e.role)],fallback:m(e.role)?g:a.weight??g,min:J,max:q,step:ne,hint:e.role==="accent"?"Auto = the accent phrase takes the heading's own weight.":void 0,onChange:u=>f({[S(e.role)]:u})}),t(fe,{fontKey:n[e.role],weight:a[S(e.role)],fallbackWeight:m(e.role)?g:a.weight??g,onWeight:u=>f({[S(e.role)]:u})})]}),m(e.role)&&A(T,{children:[t(P,{label:"Line & text gap",icon:t(L,{}),options:ge,value:i,onChange:h,hint:I.lineHeight===void 0?"The built-in spacing.":`Line gap ${I.lineHeight} · text gap ${I.letterSpacing}em.`,action:i===F?null:t(x,{label:"Line & text gap",what:"change",onClear:()=>h(F)})}),t(P,{label:"Capitals",icon:t(X,{}),options:de,value:a[_(e.role)],onChange:u=>f({[_(e.role)]:u}),hint:"The only setting that changes a heading's capitals.",action:a[_(e.role)]==="authored"?null:t(x,{label:"Capitals",what:"change",onClear:()=>f({[_(e.role)]:"authored"})})}),t(y,{label:"Largest size",icon:t(b,{}),value:a.maxPx,fallback:ae,min:Y,max:V,step:ie,suffix:"px",hint:"Caps the biggest heading on the site. Auto = each section's own.",onChange:u=>f({maxPx:u})})]})]})},e.role)})})}function me(n,i,a,o){const r=Math.max(le,n.base),l={fontFamily:`var(${E(i[n.role])?.cssVar??"--font-body"})`,fontSize:`${r.toFixed(1)}px`,lineHeight:1.15};return m(n.role)?(l.fontWeight=a.weight??g,l.textTransform=a.case==="sentence"?"none":"uppercase",o.letterSpacing!==void 0&&(l.letterSpacing=`${o.letterSpacing}em`)):n.role==="accent"?(l.fontWeight=a.weightStrong??a.weight??g,o.letterSpacing!==void 0&&(l.letterSpacing=`${o.letterSpacing}em`)):n.role==="label"&&(l.textTransform="uppercase",l.letterSpacing=re),l}export{be as default};

package/dist/components/WebsiteScreenParts.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as w}from"react/jsx-runtime";import{useCallback as k,useEffect as f,useState as M}from"react";import{ExternalIcon as Y}from"efficient-easel/icons";import{Tooltip as F}from"efficient-shell/ui";import{SettingsSwitch as G}from"efficient-easel/panel";import{PagesIcon as j,StylesIcon as z}from"efficient-easel/rail";import{TreeRow as K}from"efficient-easel/tree";import U from"./HeadingAudit.js";import{LocationsTreeContext as Z}from"./LocationsTreeContext.js";import q from"./PagesPanel.js";import{usePreviewChat as X}from"./PreviewChatContext.js";import{PREVIEW_DEVICES as J}from"./preview-devices.js";import{PreviewDeviceContext as Q}from"./PreviewDeviceContext.js";import{usePreviewHeader as $}from"./PreviewHeaderContext.js";import{usePreviewSocial as ee}from"./PreviewSocialContext.js";import{usePreviewSurface as te}from"./PreviewSurfaceContext.js";import{TICKER_PART_LABEL as oe,usePreviewTicker as re}from"./PreviewTickerContext.js";import ie,{CHAT_MODE as se,HEADER_MODE as O,SOCIAL_MODE as ne,WEBSITE_MODE as y}from"./SectionEditor.js";import g from"./SectionIcon.js";import ae from"./SectionThumbnail.js";import{useStorefrontDocument as I}from"./StorefrontDocumentContext.js";import ce from"./StylesPanel.js";import le from"./TemplateGlyph.js";import{useFooterFocus as de}from"./useFooterFocus.js";import{LOCATIONS_TYPE as pe,useLocationsTree as me}from"./useLocationsTree.js";import{usePinnedChromeSeed as fe}from"./usePinnedChromeSeed.js";import{usePreviewHref as ue}from"./usePreviewHref.js";import{SITE_STYLES_TABS as Se,SITE_STYLES_TEXT_TAB as Ee,useWebsiteName as Te}from"./WebsiteSettingsPanel.js";import{HERO_GROUP_TYPE as he,duplicateBlocked as we,heroGroupNestDepth as Pe}from"../lib/hero-group-placement.js";import{stripMarkup as be}from"../lib/markup.js";import{categoryShortLabel as ve,PINNED_SECTION_TYPE as ke}from"../lib/puck/add-palette.js";import{canAddTo as ge}from"../lib/puck/add-target.js";import{blockIsOffered as Ie}from"../lib/puck/block-offer.js";import{sectionIdOfBoxZone as Ce,setBookingPreview as _e}from"../lib/puck/booking-preview.js";import{footerBlockRowName as Le}from"../lib/puck/footer-block-row-name.js";import{FOOTER_TYPE as Oe,HEADER_TYPE as A}from"../lib/puck/footer-blocks.js";import{leftViewForSelection as ye,readLeftView as Ae,resolveLeftView as Be,writeLeftView as Ne}from"../lib/puck/left-view.js";import{isLockedBlock as Re}from"../lib/puck/locked-blocks.js";import{scrollPreviewToSection as He,scrollPreviewToTop as B}from"../lib/puck/preview-dom.js";import{SiteCanvas as De}from"../lib/puck/overrides.js";import{labelAtLevel as Ve}from"../lib/puck/section-catalog.js";import{SECTION_DESCRIPTIONS as xe}from"../lib/puck/section-descriptions.js";import{isSectionGroupType as We,sectionGroupZone as Me,SITE_FOOTER_TYPE as Ye,SITE_HEADER_TYPE as Fe}from"../lib/puck/section-groups.js";import{resolveSaveAsTemplateAction as Ge,SAVE_AS_TEMPLATE_EVENT as je}from"../lib/save-as-template-action.js";import{newSectionNode as ze}from"../lib/sections/new-section-node.js";import{useHostProducts as Ke}from"../lib/use-host-products.js";function N({mode:e,open:o}){const{setSelectedHeroId:r,setSelectHandler:c}=re(),l=e,s=l.kind==="ticker"?l.heroId:null,n=k(i=>{if(!i)return;o({kind:"ticker",heroId:i}),He(i)},[o]);return f(()=>{r(s)},[s,r]),f(()=>{c(n)},[c,n]),{partRows:(i,{rowClick:m})=>{const a=String(i.props.id);return i.type==="Hero"&&t(K,{icon:t(g,{type:"ticker",size:13}),name:oe,onSelect:()=>n(a),selected:s===a,rowProps:{onClick:m(()=>n(a))}})}}}function Ue(){const{adapter:e,capabilities:o,currentSlug:r,siteId:c,hasUnsavedEdits:l,bridgeCapabilities:s,notifyParent:n,token:i}=I(),{hasPreviewLink:m}=o,a=Ge({hasTrustedConsole:!!i,canCreatePlatformTemplate:s.canCreatePlatformTemplate,capabilities:o,siteId:c,hasUnsavedEdits:l}),T=k(()=>{!c||!r||n(je,{siteId:c,slug:r})},[n,c,r]),u=ue({pageSlug:r,siteId:c,token:i}),S=e.previewHref?.(r)??u;return{barLead:()=>a.visible&&w("button",{type:"button",className:"es-btn-ghost",disabled:!a.enabled,title:a.enabled?"Save this website as a platform template":a.disabledReason,onClick:T,children:["Save as Template",t(le,{})]}),barTrail:()=>m&&r&&t(F,{content:"Preview the live site (opens in a new tab)",children:w("a",{className:"es-btn-ghost",href:S,target:"_blank",rel:"noopener noreferrer","aria-label":"Preview the live site in a new tab",children:["Preview",t(Y,{size:15})]})})}}function Ze(){return w("svg",{width:"17",height:"17",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:1.7,strokeLinecap:"round",strokeLinejoin:"round",children:[t("path",{d:"M12 3a9 9 0 0 0 0 18 2.3 2.3 0 0 0 2.3-2.3c0-.55-.22-1.05-.57-1.42-.34-.37-.56-.87-.56-1.43A2.35 2.35 0 0 1 15.6 13.5H18a3 3 0 0 0 3-3c0-4.14-4-7.5-9-7.5z"}),t("circle",{cx:"7.7",cy:"11.3",r:"1.05",fill:"currentColor",stroke:"none"}),t("circle",{cx:"12",cy:"8",r:"1.05",fill:"currentColor",stroke:"none"}),t("circle",{cx:"16",cy:"11",r:"1.05",fill:"currentColor",stroke:"none"})]})}function qe(e,o){const{capabilities:r,templateId:c,siteId:l,tokenRef:s,navigate:n}=I(),{hasSiteTheme:i,explainsSiteSettings:m}=r,a=d=>o.setView(d),[T,u]=M(Se[0].id),{surface:S,setSurface:P}=te(),b=()=>{if(i){a("styles"),o.reveal(),B();return}e.show(y),e.reveal(),B()},v={id:"pages",label:"Pages",icon:t(j,{}),panel:({onHide:d})=>t(q,{activeSurface:S,onPreviewSurface:P,onNavigate:p=>{P(null),n(c?{kind:"template",id:c,pageSlug:p}:{kind:"page",slug:p,siteId:l??void 0})},onClose:d})},E=[];return!i&&m&&E.push({id:"appearance",label:"Appearance",icon:t(Ze,{}),active:e.kind==="website",onSelect:b}),i&&E.push({id:"styles",label:"Site styles",icon:t(z,{}),panel:({onHide:d,notify:p})=>t(ce,{tokenRef:s,siteId:l??void 0,onClose:d,onNotify:p,tab:T,onTabChange:u})}),{railLead:[v],railTrail:E,resolveLeftView:(d,p)=>Be(d,i,p),openSettings:b,openStyles:()=>{u(Ee),a("styles")}}}function Xe(e,o,r,c){const{kind:l,open:s}=e,{selected:n,zoneOf:i}=o,m=de(o,r);f(()=>{_e(n?.type==="BookingBox"&&n.props.region==="confirm"?Ce(i(String(n.props.id))):null)},[n?.props.id]);const a=me(e,o),{capabilities:{hasSiteSettings:T}}=I(),{setSelected:u,setSelectHandler:S}=$(),{chat:P,setChat:b,setSelected:v,setSelectHandler:E}=X(),d=l==="header";f(()=>{u(d)},[d,u]),f(()=>{S(()=>s(O))},[S,s]);const p=k(()=>s(se),[s]),C=l==="chat";f(()=>{v(C)},[C,v]),f(()=>{E(p)},[E,p]);const{setOpenHandler:_}=ee(),L=k(()=>s(ne),[s]);f(()=>{_(L)},[_,L]);const H=N(e),D=Ue(),V=qe(e,c),x=r.device;return{...m,...H,...D,...V,treeFoot:()=>t("div",{className:"sf-tree-tool",children:t(U,{})}),hasOwnRows:h=>h.type===pe,ownRows:a.renderLocationTree,sectionPressed:a.sectionPressed,wrap:h=>t(Z.Provider,{value:!0,children:t(Q.Provider,{value:x,children:h})}),addPanelRow:h=>T?w("div",{className:"sf-addside-sitewide",children:[t("span",{className:"sf-addside-sitewide-glyph","aria-hidden":"true",children:t(g,{type:"chat",size:16})}),w("button",{type:"button",className:"sf-addside-sitewide-name",onClick:()=>{h(),p()},children:["Live chat",t("span",{className:"sf-addside-sitewide-desc",children:"A chat bubble on every page"})]}),t(G,{checked:P.enabled,onChange:W=>b({enabled:W}),ariaLabel:"Show the chat bubble on the whole site"})]}):void 0}}const Je={isLockedBlock:Re,duplicateBlocked:we,nestDepth:(e,o,r)=>o===he?Pe(e,r):0,newSectionNode:ze,canAddTo:ge,blockIsOffered:Ie},Qe={labelAtLevel:Ve,descriptions:xe,categoryLabel:ve,firstSection:ke,blockRowName:Le,plainText:be,Icon:g,Thumbnail:ae,useProducts:Ke},$e={desktop:2e3,tablet:800,mobile:390},R="desktop",et={options:J,initial:R,fluid:R,widths:$e},tt={read:Ae,write:e=>Ne(e),forSelection:(e,o)=>ye(e,o)},ot={first:A,last:Oe,firstGroup:Fe,lastGroup:Ye,isSectionGroup:We,sectionGroupZone:Me,panelOf:e=>e===A?O:null};function rt(e){return{...N(e),openSettings:()=>e.show(y)}}const Xt={useOwnerName:Te,useBridges:Xe,useStandaloneBridges:rt,useDocumentPass:fe,blockRules:Je,blockLook:Qe,devices:et,leftView:tt,pinned:ot,Canvas:De,Inspector:ie};export{Xt as WEBSITE_SCREEN};
+"use client";import{jsx as e,jsxs as b}from"react/jsx-runtime";import{useCallback as k,useEffect as f,useState as Y}from"react";import{ExternalIcon as F}from"efficient-easel/icons";import{Button as G,Tooltip as O,buttonClasses as j}from"efficient-shell/ui";import{SettingsSwitch as z}from"efficient-easel/panel";import{PagesIcon as K,StylesIcon as U}from"efficient-easel/rail";import{TreeRow as Z}from"efficient-easel/tree";import q from"./HeadingAudit.js";import{LocationsTreeContext as X}from"./LocationsTreeContext.js";import J from"./PagesPanel.js";import{usePreviewChat as Q}from"./PreviewChatContext.js";import{PREVIEW_DEVICES as $}from"./preview-devices.js";import{PreviewDeviceContext as ee}from"./PreviewDeviceContext.js";import{usePreviewHeader as te}from"./PreviewHeaderContext.js";import{usePreviewSocial as oe}from"./PreviewSocialContext.js";import{usePreviewSurface as re}from"./PreviewSurfaceContext.js";import{TICKER_PART_LABEL as ie,usePreviewTicker as se}from"./PreviewTickerContext.js";import ne,{CHAT_MODE as ae,HEADER_MODE as y,SOCIAL_MODE as ce,WEBSITE_MODE as B}from"./SectionEditor.js";import g from"./SectionIcon.js";import le from"./SectionThumbnail.js";import{useStorefrontDocument as I}from"./StorefrontDocumentContext.js";import de from"./StylesPanel.js";import pe from"./TemplateGlyph.js";import{useFooterFocus as me}from"./useFooterFocus.js";import{LOCATIONS_TYPE as fe,useLocationsTree as ue}from"./useLocationsTree.js";import{usePinnedChromeSeed as Se}from"./usePinnedChromeSeed.js";import{usePreviewHref as Ee}from"./usePreviewHref.js";import{SITE_STYLES_TABS as Te,SITE_STYLES_TEXT_TAB as he,useWebsiteName as we}from"./WebsiteSettingsPanel.js";import{HERO_GROUP_TYPE as Pe,duplicateBlocked as ve,heroGroupNestDepth as be}from"../lib/hero-group-placement.js";import{stripMarkup as ke}from"../lib/markup.js";import{categoryShortLabel as ge,PINNED_SECTION_TYPE as Ie}from"../lib/puck/add-palette.js";import{canAddTo as Ce}from"../lib/puck/add-target.js";import{blockIsOffered as _e}from"../lib/puck/block-offer.js";import{sectionIdOfBoxZone as Le,setBookingPreview as Oe}from"../lib/puck/booking-preview.js";import{footerBlockRowName as ye}from"../lib/puck/footer-block-row-name.js";import{FOOTER_TYPE as Be,HEADER_TYPE as A}from"../lib/puck/footer-blocks.js";import{leftViewForSelection as Ae,readLeftView as Ne,resolveLeftView as Re,writeLeftView as He}from"../lib/puck/left-view.js";import{isLockedBlock as De}from"../lib/puck/locked-blocks.js";import{scrollPreviewToSection as xe,scrollPreviewToTop as N}from"../lib/puck/preview-dom.js";import{SiteCanvas as Ve}from"../lib/puck/overrides.js";import{labelAtLevel as We}from"../lib/puck/section-catalog.js";import{SECTION_DESCRIPTIONS as Me}from"../lib/puck/section-descriptions.js";import{isSectionGroupType as Ye,sectionGroupZone as Fe,SITE_FOOTER_TYPE as Ge,SITE_HEADER_TYPE as je}from"../lib/puck/section-groups.js";import{resolveSaveAsTemplateAction as ze,SAVE_AS_TEMPLATE_EVENT as Ke}from"../lib/save-as-template-action.js";import{newSectionNode as Ue}from"../lib/sections/new-section-node.js";import{useHostProducts as Ze}from"../lib/use-host-products.js";function R({mode:t,open:o}){const{setSelectedHeroId:r,setSelectHandler:c}=se(),l=t,n=l.kind==="ticker"?l.heroId:null,a=k(i=>{if(!i)return;o({kind:"ticker",heroId:i}),xe(i)},[o]);return f(()=>{r(n)},[n,r]),f(()=>{c(a)},[c,a]),{partRows:(i,{rowClick:m})=>{const s=String(i.props.id);return i.type==="Hero"&&e(Z,{icon:e(g,{type:"ticker",size:13}),name:ie,onSelect:()=>a(s),selected:n===s,rowProps:{onClick:m(()=>a(s))}})}}}function qe(){const{adapter:t,capabilities:o,currentSlug:r,siteId:c,hasUnsavedEdits:l,bridgeCapabilities:n,notifyParent:a,token:i}=I(),{hasPreviewLink:m}=o,s=ze({hasTrustedConsole:!!i,canCreatePlatformTemplate:n.canCreatePlatformTemplate,capabilities:o,siteId:c,hasUnsavedEdits:l}),T=k(()=>{!c||!r||a(Ke,{siteId:c,slug:r})},[a,c,r]),u=Ee({pageSlug:r,siteId:c,token:i}),S=t.previewHref?.(r)??u;return{barLead:()=>s.visible&&e(O,{side:"bottom",content:s.enabled?"Save this website as a platform template":s.disabledReason,children:e("span",{className:"sf-tip-disabled",tabIndex:s.enabled?void 0:0,children:e(G,{variant:"secondary",disabled:!s.enabled,onClick:T,rightIcon:e(pe,{}),children:"Save as Template"})})}),barTrail:()=>m&&r&&e(O,{content:"Preview the live site (opens in a new tab)",children:b("a",{className:j({variant:"secondary"}),href:S,target:"_blank",rel:"noopener noreferrer","aria-label":"Preview the live site in a new tab",children:["Preview",e(F,{size:15})]})})}}function Xe(){return b("svg",{width:"17",height:"17",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:1.7,strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M12 3a9 9 0 0 0 0 18 2.3 2.3 0 0 0 2.3-2.3c0-.55-.22-1.05-.57-1.42-.34-.37-.56-.87-.56-1.43A2.35 2.35 0 0 1 15.6 13.5H18a3 3 0 0 0 3-3c0-4.14-4-7.5-9-7.5z"}),e("circle",{cx:"7.7",cy:"11.3",r:"1.05",fill:"currentColor",stroke:"none"}),e("circle",{cx:"12",cy:"8",r:"1.05",fill:"currentColor",stroke:"none"}),e("circle",{cx:"16",cy:"11",r:"1.05",fill:"currentColor",stroke:"none"})]})}function Je(t,o){const{capabilities:r,templateId:c,siteId:l,tokenRef:n,navigate:a}=I(),{hasSiteTheme:i,explainsSiteSettings:m}=r,s=d=>o.setView(d),[T,u]=Y(Te[0].id),{surface:S,setSurface:w}=re(),P=()=>{if(i){s("styles"),o.reveal(),N();return}t.show(B),t.reveal(),N()},v={id:"pages",label:"Pages",icon:e(K,{}),panel:({onHide:d})=>e(J,{activeSurface:S,onPreviewSurface:w,onNavigate:p=>{w(null),a(c?{kind:"template",id:c,pageSlug:p}:{kind:"page",slug:p,siteId:l??void 0})},onClose:d})},E=[];return!i&&m&&E.push({id:"appearance",label:"Appearance",icon:e(Xe,{}),active:t.kind==="website",onSelect:P}),i&&E.push({id:"styles",label:"Site styles",icon:e(U,{}),panel:({onHide:d,notify:p})=>e(de,{tokenRef:n,siteId:l??void 0,onClose:d,onNotify:p,tab:T,onTabChange:u})}),{railLead:[v],railTrail:E,resolveLeftView:(d,p)=>Re(d,i,p),openSettings:P,openStyles:()=>{u(he),s("styles")}}}function Qe(t,o,r,c){const{kind:l,open:n}=t,{selected:a,zoneOf:i}=o,m=me(o,r);f(()=>{Oe(a?.type==="BookingBox"&&a.props.region==="confirm"?Le(i(String(a.props.id))):null)},[a?.props.id]);const s=ue(t,o),{capabilities:{hasSiteSettings:T}}=I(),{setSelected:u,setSelectHandler:S}=te(),{chat:w,setChat:P,setSelected:v,setSelectHandler:E}=Q(),d=l==="header";f(()=>{u(d)},[d,u]),f(()=>{S(()=>n(y))},[S,n]);const p=k(()=>n(ae),[n]),C=l==="chat";f(()=>{v(C)},[C,v]),f(()=>{E(p)},[E,p]);const{setOpenHandler:_}=oe(),L=k(()=>n(ce),[n]);f(()=>{_(L)},[_,L]);const D=R(t),x=qe(),V=Je(t,c),W=r.device;return{...m,...D,...x,...V,treeFoot:()=>e("div",{className:"sf-tree-tool",children:e(q,{})}),hasOwnRows:h=>h.type===fe,ownRows:s.renderLocationTree,sectionPressed:s.sectionPressed,wrap:h=>e(X.Provider,{value:!0,children:e(ee.Provider,{value:W,children:h})}),addPanelRow:h=>T?b("div",{className:"sf-addside-sitewide",children:[e("span",{className:"sf-addside-sitewide-glyph","aria-hidden":"true",children:e(g,{type:"chat",size:16})}),b("button",{type:"button",className:"sf-addside-sitewide-name",onClick:()=>{h(),p()},children:["Live chat",e("span",{className:"sf-addside-sitewide-desc",children:"A chat bubble on every page"})]}),e(z,{checked:w.enabled,onChange:M=>P({enabled:M}),ariaLabel:"Show the chat bubble on the whole site"})]}):void 0}}const $e={isLockedBlock:De,duplicateBlocked:ve,nestDepth:(t,o,r)=>o===Pe?be(t,r):0,newSectionNode:Ue,canAddTo:Ce,blockIsOffered:_e},et={labelAtLevel:We,descriptions:Me,categoryLabel:ge,firstSection:Ie,blockRowName:ye,plainText:ke,Icon:g,Thumbnail:le,useProducts:Ze},tt={desktop:2e3,tablet:800,mobile:390},H="desktop",ot={options:$,initial:H,fluid:H,widths:tt},rt={read:Ne,write:t=>He(t),forSelection:(t,o)=>Ae(t,o)},it={first:A,last:Be,firstGroup:je,lastGroup:Ge,isSectionGroup:Ye,sectionGroupZone:Fe,panelOf:t=>t===A?y:null};function st(t){return{...R(t),openSettings:()=>t.show(B)}}const Qt={useOwnerName:we,useBridges:Qe,useStandaloneBridges:st,useDocumentPass:Se,blockRules:$e,blockLook:et,devices:ot,leftView:rt,pinned:it,Canvas:Ve,Inspector:ne};export{Qt as WEBSITE_SCREEN};

package/dist/components/WebsiteSettingsPanel.d.ts

@@ -1,20 +1,16 @@
-import { type ReactNode, type RefObject } from "react";
+import { type RefObject } from "react";
+import { type SettingsTabItem } from "efficient-easel/panel";
 import type { SiteThemeRowPatch } from "../lib/site-theme-row.js";
 import { type CardShadow, type HoverEffect } from "../lib/theme.js";
-export declare const TABPANEL_ID = "sf-site-styles-tabpanel";
+export declare const SITE_STYLES_ID_PREFIX = "sf-site-styles";
+export declare const TABPANEL_CLASS = "sf-site-styles-tabpanel";
 export declare const SHOW_HINTS_DEFAULT = false;
 export declare function HintsToggle({ shown, onChange, }: {
     shown: boolean;
     onChange: (v: boolean) => void;
 }): import("react").JSX.Element;
 export declare const SITE_STYLES_TEXT_TAB = "text";
-export declare const SITE_STYLES_TABS: {
-    id: string;
-    label: string;
-    icon?: ReactNode;
-    htmlId: string;
-    panelId: string;
-}[];
+export declare const SITE_STYLES_TABS: SettingsTabItem[];
 export declare function siteWidthPatch(v: number | null): SiteThemeRowPatch;
 export declare function blockGapPatch(v: number | null): SiteThemeRowPatch;
 export declare function siteGutterPatch(v: number | null): SiteThemeRowPatch;

package/dist/components/WebsiteSettingsPanel.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as y,Fragment as w}from"react/jsx-runtime";import{useEasel as F}from"efficient-easel/easel";import{useEffect as L,useRef as N,useState as x}from"react";import k from"./ThemeField.js";import W from"./CornersField.js";import v from"./CardShadowField.js";import B from"./ShadowColourField.js";import O from"./BlockGapField.js";import A from"./HoverEffectField.js";import j from"./HeroImageField.js";import U from"./PhotographyField.js";import Y from"./SideSpaceField.js";import M from"./SiteWidthField.js";import X from"./TextStylesField.js";import{usePreviewHeader as f}from"./PreviewHeaderContext.js";import{SettingsTabs as $}from"efficient-easel/panel";import{ContrastIcon as q,NoteIcon as J,SettingsIcon as Z,TypeIcon as K}from"efficient-easel/icons";import{useThemeRowPersist as Q}from"../lib/theme-row-persist.js";import{themeSaveNotice as V}from"../lib/theme-save-message.js";import{NEUTRAL_SITE_NAME as D}from"../lib/content/site-name.js";import{normalizeFonts as ee}from"../lib/fonts.js";import{previewFrame as oe}from"../lib/puck/preview-dom.js";import{CORNER_STYLE_TO_PX as te,normalizeCornerRadius as ne,normalizeCornerStyle as re,normalizeShadowColor as se,headingTypographyToRow as ie,normalizeHeadingCompression as ae,normalizeHeadingTypography as ce,DEFAULT_SIZES as le}from"../lib/theme.js";const b="sf-site-styles-tabpanel",de=!1,pe="Show hints";function he({shown:e,onChange:o}){return n("div",{className:"sf-hints",children:y("button",{type:"button","aria-pressed":e,onClick:()=>o(!e),className:`sf-rung sf-hints-toggle${e?" is-active":""}`,children:[n(J,{size:13}),pe]})})}const lo="text",R=[{id:"basics",label:"Basics",icon:n(Z,{}),htmlId:"sf-site-styles-tab-basics",panelId:b},{id:"theme",label:"Theme",icon:n(q,{}),htmlId:"sf-site-styles-tab-theme",panelId:b},{id:"text",label:"Text",icon:n(K,{}),htmlId:"sf-site-styles-tab-text",panelId:b}];function ue({themeFromDocument:e,persist:o}){const{appState:s,dispatch:r}=F(u=>u),{theme:a,setTheme:t}=f(),c=s.data,h=c.root?.props??{},i=u=>{if(e){const g={...h,theme:u};r({type:"replaceRoot",root:{...c.root,props:g},recordHistory:!0})}else t(u);o({selected_preset:u.selected,theme_presets:u.themes})};return n(k,{value:e?h.theme:a,onChange:i})}function ge(e,o){const[s,r]=x(null),a=N(null),t=JSON.stringify(e),c=N(o);return c.current=o,L(()=>{if(a.current===null){a.current=t;return}if(a.current===t)return;a.current=t;const h=window.setTimeout(()=>r(c.current),700),i=window.setTimeout(()=>r(null),2200);return()=>{window.clearTimeout(h),window.clearTimeout(i)}},[t]),s}function fe({themeFromDocument:e,persist:o}){const{appState:s,dispatch:r}=F(d=>d),[a,t]=x(null),{fonts:c,setFonts:h,sizes:i,setSizes:u,headingCompression:g,setHeadingCompression:S,headingTypography:_,setHeadingTypography:l}=f(),T=s.data,m=T.root?.props??{},C=e?ee(m.fonts):c,E=e?le:i,z=e?ae(m.headingCompression):g,I=e?ce(m.headingTypography):_,H=d=>r({type:"replaceRoot",root:{...T.root,props:{...m,...d}},recordHistory:!0}),G=ge({curFonts:C,curCompression:z,curTypography:I},a);return n(X,{fonts:C,sizes:E,compression:z,headingTypography:I,openRole:a,onOpenRole:t,onFontChange:(d,P)=>{const p={...C,[d]:P};e?H({fonts:p}):h(p),o({heading_font:p.heading,body_font:p.body,accent_font:p.accent,label_font:p.label})},onSizeChange:e?void 0:(d,P)=>{const p={...E,[d]:P};u(p),o({heading_size_large_px:p.headingLarge,heading_size_medium_px:p.headingMedium,heading_size_small_px:p.headingSmall,accent_size_px:p.accent,body_size_px:p.body,label_size_px:p.label})},onCompressionChange:d=>{e?H({headingCompression:d}):S(d),o({heading_compression:d})},onHeadingTypographyChange:d=>{e?H({headingTypography:d}):l(d),o(ie(d))},livePx:Ce,savedRole:G})}const me={heading:"main h1, main h2",heading2:"main h1, main h2",heading3:"main h1, main h2",accent:"main h1 em, main h2 em",body:"main p",label:"main .mono-eyebrow"};function Ce(e){if(typeof document>"u")return null;const s=(oe()?.contentDocument??document).querySelector(me[e]);if(!s)return null;const r=parseFloat(getComputedStyle(s).fontSize);return Number.isFinite(r)?r:null}function ye({themeFromDocument:e,persist:o,showHint:s}){const{appState:r,dispatch:a}=F(l=>l),{cornerRadiusPx:t,setCornerRadiusPx:c}=f(),h=r.data,i=h.root?.props??{},u=i.cornerRadiusPx===void 0?te[re(i.cornerStyle)]:ne(i.cornerRadiusPx),g=e?u:t,S=l=>a({type:"replaceRoot",root:{...h.root,props:{...i,...l}},recordHistory:!0});return n(W,{value:g,onChange:l=>{e?S({cornerRadiusPx:l}):c(l),o({corner_radius_px:l})},showHint:s})}function Se(e){return{site_width:e}}function _e({persist:e,showHint:o}){const{siteWidth:s,setSiteWidth:r}=f();return n(M,{value:s,onChange:t=>{r(t),e(Se(t),t===null)},showHint:o})}function we(e){return{block_gap:e}}function Te(e){return{site_gutter:e}}function xe({persist:e,showHint:o}){const{siteGutter:s,setSiteGutter:r}=f();return n(Y,{value:s,onChange:t=>{r(t),e(Te(t),t===null)},showHint:o})}function be({persist:e,showHint:o}){const{blockGap:s,setBlockGap:r}=f();return n(O,{value:s,onChange:t=>{r(t),e(we(t),t===null)},showHint:o})}function Re({persist:e,showHint:o}){const{heroBackgroundFollowsWidth:s,setHeroBackgroundFollowsWidth:r}=f();return n(j,{value:s,onChange:t=>{r(t),e({hero_background_follows_width:t},!0)},showHint:o})}function He({persist:e,showHint:o=!0}){return y(w,{children:[n(_e,{persist:e,showHint:o}),n(xe,{persist:e,showHint:o}),n(be,{persist:e,showHint:o}),n(Re,{persist:e,showHint:o})]})}function Pe(e){return{card_shadow:e}}function Fe(e){return e===null?{shadow_color:null}:{shadow_color:se(e)}}function Ee(e){return{hover_effect:e}}function ze({persist:e,showHint:o=!0}){const{cardShadow:s,setCardShadow:r,shadowColor:a,setShadowColor:t,hoverEffect:c,setHoverEffect:h}=f();return y(w,{children:[n(v,{value:s,onChange:i=>{r(i),e(Pe(i),!0)},showHint:o}),n(B,{value:a,onChange:i=>{t(i),e(Fe(i),i===null)},showHint:o}),n(A,{value:c,onChange:i=>{h(i),e(Ee(i),!0)},showHint:o})]})}function Ie(e){return{photography_grayscale:e}}function Ne({persist:e,showHint:o}){const{photographyGrayscale:s,setPhotographyGrayscale:r}=f();return n(U,{value:s,onChange:t=>{r(t),e(Ie(t),!0)},showHint:o})}function Ge({persist:e,showHint:o=!0}){return n(w,{children:n(Ne,{persist:e,showHint:o})})}function Le(){const{websiteName:e}=f();return e?.trim()||D}function po(){const e=Le();return n("p",{className:"sf-panel-site",title:`${e} — renamed in the Console: Storefront ▸ Sites ▸ Settings.`,children:e})}function ke({themeFromDocument:e=!1,tokenRef:o,siteId:s,onNotify:r,tab:a,onTabChange:t}){const{persist:c}=Q({themeFromDocument:e,tokenRef:o,siteId:s,onResult:m=>{const C=V(m);C&&r?.(C.msg,C.tone)}}),[h,i]=x(R[0].id),u=a!==void 0,g=u?a:h,S=u?t??(()=>{}):i,_=R.find(m=>m.id===g)??R[0],[l,T]=x(de);return y(w,{children:[n($,{items:R,activeId:_.id,onSelect:S,ariaLabel:"Site styles"}),y("div",{id:b,role:"tabpanel","aria-labelledby":_.htmlId,children:[g==="basics"&&y(w,{children:[n(ye,{themeFromDocument:e,persist:c,showHint:l}),!e&&n(ze,{persist:c,showHint:l}),!e&&n(He,{persist:c,showHint:l}),!e&&n(Ge,{persist:c,showHint:l}),n(he,{shown:l,onChange:T})]}),g==="theme"&&n(ue,{themeFromDocument:e,persist:c}),g==="text"&&n(fe,{themeFromDocument:e,persist:c})]})]})}export{ze as CardLookFields,he as HintsToggle,He as PageGroupFields,Ge as PhotographyGroupFields,de as SHOW_HINTS_DEFAULT,R as SITE_STYLES_TABS,lo as SITE_STYLES_TEXT_TAB,b as TABPANEL_ID,po as WebsiteNameReadonly,we as blockGapPatch,Pe as cardShadowPatch,ke as default,Ee as hoverEffectPatch,Ie as photographyPatch,Fe as shadowColourPatch,Te as siteGutterPatch,Se as siteWidthPatch,Le as useWebsiteName};
+"use client";import{jsx as n,jsxs as y,Fragment as w}from"react/jsx-runtime";import{useEasel as P}from"efficient-easel/easel";import{useEffect as G,useRef as N,useState as x}from"react";import k from"./ThemeField.js";import B from"./CornersField.js";import W from"./CardShadowField.js";import v from"./ShadowColourField.js";import A from"./BlockGapField.js";import O from"./HoverEffectField.js";import j from"./HeroImageField.js";import Y from"./PhotographyField.js";import U from"./SideSpaceField.js";import X from"./SiteWidthField.js";import M from"./TextStylesField.js";import{usePreviewHeader as f}from"./PreviewHeaderContext.js";import{SettingsTabs as $}from"efficient-easel/panel";import{Tooltip as q,tabButtonId as J,tabPanelId as Z}from"efficient-shell/ui";import{ContrastIcon as K,NoteIcon as Q,SettingsIcon as V,TypeIcon as D}from"efficient-easel/icons";import{useThemeRowPersist as ee}from"../lib/theme-row-persist.js";import{themeSaveNotice as oe}from"../lib/theme-save-message.js";import{NEUTRAL_SITE_NAME as te}from"../lib/content/site-name.js";import{normalizeFonts as ne}from"../lib/fonts.js";import{previewFrame as re}from"../lib/puck/preview-dom.js";import{CORNER_STYLE_TO_PX as se,normalizeCornerRadius as ie,normalizeCornerStyle as ae,normalizeShadowColor as ce,headingTypographyToRow as le,normalizeHeadingCompression as de,normalizeHeadingTypography as pe,DEFAULT_SIZES as he}from"../lib/theme.js";const E="sf-site-styles",ue="sf-site-styles-tabpanel",ge=!1,fe="Show hints";function me({shown:e,onChange:o}){return n("div",{className:"sf-hints",children:y("button",{type:"button","aria-pressed":e,onClick:()=>o(!e),className:`sf-rung sf-hints-toggle${e?" is-active":""}`,children:[n(Q,{size:13}),fe]})})}const fo="text",b=[{id:"basics",label:"Basics",icon:n(V,{})},{id:"theme",label:"Theme",icon:n(K,{})},{id:"text",label:"Text",icon:n(D,{})}];function Se({themeFromDocument:e,persist:o}){const{appState:s,dispatch:r}=P(u=>u),{theme:a,setTheme:t}=f(),c=s.data,h=c.root?.props??{},i=u=>{if(e){const g={...h,theme:u};r({type:"replaceRoot",root:{...c.root,props:g},recordHistory:!0})}else t(u);o({selected_preset:u.selected,theme_presets:u.themes})};return n(k,{value:e?h.theme:a,onChange:i})}function Ce(e,o){const[s,r]=x(null),a=N(null),t=JSON.stringify(e),c=N(o);return c.current=o,G(()=>{if(a.current===null){a.current=t;return}if(a.current===t)return;a.current=t;const h=window.setTimeout(()=>r(c.current),700),i=window.setTimeout(()=>r(null),2200);return()=>{window.clearTimeout(h),window.clearTimeout(i)}},[t]),s}function ye({themeFromDocument:e,persist:o}){const{appState:s,dispatch:r}=P(d=>d),[a,t]=x(null),{fonts:c,setFonts:h,sizes:i,setSizes:u,headingCompression:g,setHeadingCompression:_,headingTypography:C,setHeadingTypography:l}=f(),T=s.data,m=T.root?.props??{},S=e?ne(m.fonts):c,F=e?he:i,z=e?de(m.headingCompression):g,I=e?pe(m.headingTypography):C,R=d=>r({type:"replaceRoot",root:{...T.root,props:{...m,...d}},recordHistory:!0}),L=Ce({curFonts:S,curCompression:z,curTypography:I},a);return n(M,{fonts:S,sizes:F,compression:z,headingTypography:I,openRole:a,onOpenRole:t,onFontChange:(d,H)=>{const p={...S,[d]:H};e?R({fonts:p}):h(p),o({heading_font:p.heading,body_font:p.body,accent_font:p.accent,label_font:p.label})},onSizeChange:e?void 0:(d,H)=>{const p={...F,[d]:H};u(p),o({heading_size_large_px:p.headingLarge,heading_size_medium_px:p.headingMedium,heading_size_small_px:p.headingSmall,accent_size_px:p.accent,body_size_px:p.body,label_size_px:p.label})},onCompressionChange:d=>{e?R({headingCompression:d}):_(d),o({heading_compression:d})},onHeadingTypographyChange:d=>{e?R({headingTypography:d}):l(d),o(le(d))},livePx:we,savedRole:L})}const _e={heading:"main h1, main h2",heading2:"main h1, main h2",heading3:"main h1, main h2",accent:"main h1 em, main h2 em",body:"main p",label:"main .mono-eyebrow"};function we(e){if(typeof document>"u")return null;const s=(re()?.contentDocument??document).querySelector(_e[e]);if(!s)return null;const r=parseFloat(getComputedStyle(s).fontSize);return Number.isFinite(r)?r:null}function Te({themeFromDocument:e,persist:o,showHint:s}){const{appState:r,dispatch:a}=P(l=>l),{cornerRadiusPx:t,setCornerRadiusPx:c}=f(),h=r.data,i=h.root?.props??{},u=i.cornerRadiusPx===void 0?se[ae(i.cornerStyle)]:ie(i.cornerRadiusPx),g=e?u:t,_=l=>a({type:"replaceRoot",root:{...h.root,props:{...i,...l}},recordHistory:!0});return n(B,{value:g,onChange:l=>{e?_({cornerRadiusPx:l}):c(l),o({corner_radius_px:l})},showHint:s})}function xe(e){return{site_width:e}}function be({persist:e,showHint:o}){const{siteWidth:s,setSiteWidth:r}=f();return n(X,{value:s,onChange:t=>{r(t),e(xe(t),t===null)},showHint:o})}function Re(e){return{block_gap:e}}function He(e){return{site_gutter:e}}function Pe({persist:e,showHint:o}){const{siteGutter:s,setSiteGutter:r}=f();return n(U,{value:s,onChange:t=>{r(t),e(He(t),t===null)},showHint:o})}function Ee({persist:e,showHint:o}){const{blockGap:s,setBlockGap:r}=f();return n(A,{value:s,onChange:t=>{r(t),e(Re(t),t===null)},showHint:o})}function Fe({persist:e,showHint:o}){const{heroBackgroundFollowsWidth:s,setHeroBackgroundFollowsWidth:r}=f();return n(j,{value:s,onChange:t=>{r(t),e({hero_background_follows_width:t},!0)},showHint:o})}function ze({persist:e,showHint:o=!0}){return y(w,{children:[n(be,{persist:e,showHint:o}),n(Pe,{persist:e,showHint:o}),n(Ee,{persist:e,showHint:o}),n(Fe,{persist:e,showHint:o})]})}function Ie(e){return{card_shadow:e}}function Ne(e){return e===null?{shadow_color:null}:{shadow_color:ce(e)}}function Le(e){return{hover_effect:e}}function Ge({persist:e,showHint:o=!0}){const{cardShadow:s,setCardShadow:r,shadowColor:a,setShadowColor:t,hoverEffect:c,setHoverEffect:h}=f();return y(w,{children:[n(W,{value:s,onChange:i=>{r(i),e(Ie(i),!0)},showHint:o}),n(v,{value:a,onChange:i=>{t(i),e(Ne(i),i===null)},showHint:o}),n(O,{value:c,onChange:i=>{h(i),e(Le(i),!0)},showHint:o})]})}function ke(e){return{photography_grayscale:e}}function Be({persist:e,showHint:o}){const{photographyGrayscale:s,setPhotographyGrayscale:r}=f();return n(Y,{value:s,onChange:t=>{r(t),e(ke(t),!0)},showHint:o})}function We({persist:e,showHint:o=!0}){return n(w,{children:n(Be,{persist:e,showHint:o})})}function ve(){const{websiteName:e}=f();return e?.trim()||te}function mo(){const e=ve();return n(q,{content:`${e} — renamed in the Console: Storefront ▸ Sites ▸ Settings.`,className:"sf-name-tip",children:n("span",{className:"sf-panel-site",children:e})})}function Ae({themeFromDocument:e=!1,tokenRef:o,siteId:s,onNotify:r,tab:a,onTabChange:t}){const{persist:c}=ee({themeFromDocument:e,tokenRef:o,siteId:s,onResult:m=>{const S=oe(m);S&&r?.(S.msg,S.tone)}}),[h,i]=x(b[0].id),u=a!==void 0,g=u?a:h,_=u?t??(()=>{}):i,C=b.find(m=>m.id===g)??b[0],[l,T]=x(ge);return y(w,{children:[n($,{items:b,activeId:C.id,onSelect:_,ariaLabel:"Site styles",idPrefix:E}),y("div",{id:Z(E,C.id),className:ue,role:"tabpanel","aria-labelledby":J(E,C.id),children:[g==="basics"&&y(w,{children:[n(Te,{themeFromDocument:e,persist:c,showHint:l}),!e&&n(Ge,{persist:c,showHint:l}),!e&&n(ze,{persist:c,showHint:l}),!e&&n(We,{persist:c,showHint:l}),n(me,{shown:l,onChange:T})]}),g==="theme"&&n(Se,{themeFromDocument:e,persist:c}),g==="text"&&n(ye,{themeFromDocument:e,persist:c})]})]})}export{Ge as CardLookFields,me as HintsToggle,ze as PageGroupFields,We as PhotographyGroupFields,ge as SHOW_HINTS_DEFAULT,E as SITE_STYLES_ID_PREFIX,b as SITE_STYLES_TABS,fo as SITE_STYLES_TEXT_TAB,ue as TABPANEL_CLASS,mo as WebsiteNameReadonly,Re as blockGapPatch,Ie as cardShadowPatch,Ae as default,Le as hoverEffectPatch,ke as photographyPatch,Ne as shadowColourPatch,He as siteGutterPatch,xe as siteWidthPatch,ve as useWebsiteName};