efficient-storefront-blocks 0.57.0 → 0.58.0

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

@@ -0,0 +1,6 @@
+interface Props {
+    value?: string;
+    onChange: (value: string) => void;
+}
+export default function FinishPicker({ value, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/editor/components/FinishPicker.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,jsxs as m}from"react/jsx-runtime";import{useEasel as p}from"efficient-easel/easel";import{SettingsField as f}from"efficient-easel/panel";import{FieldSelect as u}from"efficient-easel/fields";import{FinishIcon as g}from"efficient-easel/icons";import{isRenderableFinish as b}from"../../render/lib/wheels/renderable-finishes.js";import{useProductCatalog as F}from"../../render/components/useProductCatalog.js";import{say as n}from"efficient-web-builder/format/lib/editor-words";function v({value:t,onChange:l}){const a=F(),{selectedItem:c}=p(e=>e),r=c?.props?.code??"",o=a===null,i=(a??[]).find(e=>e.slug===r)?.finishes??[],h=i.filter(b).map(e=>e.name),d=h.includes(t??"")?t:"";return m("div",{children:[s(f,{label:n("Finish"),icon:s(g,{}),hint:n("Pinning one overrides the section’s Cover image."),children:s(u,{value:d,ariaLabel:n("Finish"),onChange:l,readOnly:o||i.length===0,options:[{label:o?n("Loading…"):i.length===0?n("No finishes on this product"):n("Default (the product's default finish)"),value:""},...i.map(e=>({label:e.src?e.name:n("{name} — no image",{name:e.name}),value:e.name,disabled:!e.src}))]})}),!o&&i.length===0&&r&&s("p",{className:"es-field-hint sf-hint-keep",children:n("This product has no finishes yet, so its card falls back to the product image — or an empty placeholder when it has none. Add finishes to the product record, then give each one an image.")}),!o&&i.length>0&&h.length===0&&s("p",{className:"es-field-hint sf-hint-keep",children:n("None of this product’s finishes has an image, so none can be shown on the card. Add an image to a finish on the product record to pick it here.")})]})}export{v as default};

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

@@ -0,0 +1,6 @@
+import { type FooterColumns } from "efficient-web-builder/format/lib/content/footer";
+export interface FooterColumnsFieldProps {
+    value?: number | FooterColumns;
+    onChange: (value: FooterColumns) => void;
+}
+export default function FooterColumnsField({ value, onChange }: FooterColumnsFieldProps): import("react").JSX.Element;

package/dist/editor/components/FooterColumnsField.js

@@ -0,0 +1 @@
+"use client";import{jsx as r}from"react/jsx-runtime";import t from"./PerViewStepperField.js";import{say as l}from"efficient-web-builder/format/lib/editor-words";import{FOOTER_COLUMN_STEPS as m,normalizeFooterColumns as n}from"efficient-web-builder/format/lib/content/footer";function i({value:e,onChange:o}){return r(t,{label:"Columns per line",unit:l("columns"),steps:m,value:n(e),onChange:o})}export{i as default};

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

@@ -0,0 +1,6 @@
+import { type LogoFill } from "efficient-web-builder/format/lib/content/footer";
+export interface FooterLogoFillFieldProps {
+    value?: LogoFill;
+    onChange: (value: LogoFill) => void;
+}
+export default function FooterLogoFillField({ value, onChange }: FooterLogoFillFieldProps): import("react").JSX.Element;

package/dist/editor/components/FooterLogoFillField.js

@@ -0,0 +1 @@
+"use client";import{jsx as o,Fragment as c}from"react/jsx-runtime";import{SettingsField as a,SettingsSwitch as f}from"efficient-easel/panel";import{BlockColumnIcon as h}from"efficient-easel/icons";import{usePreviewDevice as p}from"efficient-easel/screen/components/PreviewDeviceContext";import{LOGO_FILL_DEFAULT as L}from"efficient-web-builder/format/lib/content/footer";import{VIEW_TIER_LABEL as r}from"efficient-easel/screen/lib/content/view-tiers";import{say as i}from"efficient-web-builder/format/lib/editor-words";import{sayWith as g}from"../lib/say-with.js";function v({value:n,onChange:s}){const e=p(),t={...L,...n},l=t[e];return o(a,{label:i("Logo fills its column"),icon:o(h,{}),action:o(f,{checked:l,onChange:m=>s({...t,[e]:m}),ariaLabel:i("Logo fills its column on {view}",{view:i(r[e])})}),hint:o(c,{children:g(i("Sets the {view} view — switch views in the top bar to set each one."),{view:o("strong",{children:i(r[e])})})})})}export{v as default};

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

@@ -0,0 +1,6 @@
+import { type LogoFill } from "efficient-web-builder/format/lib/content/footer";
+export interface FooterLogoRowFillFieldProps {
+    value?: LogoFill;
+    onChange: (value: LogoFill) => void;
+}
+export default function FooterLogoRowFillField({ value, onChange }: FooterLogoRowFillFieldProps): import("react").JSX.Element;

package/dist/editor/components/FooterLogoRowFillField.js

@@ -0,0 +1 @@
+"use client";import{jsx as o,Fragment as c}from"react/jsx-runtime";import{SettingsField as a,SettingsSwitch as f}from"efficient-easel/panel";import{FullWidthIcon as h}from"efficient-easel/icons";import{usePreviewDevice as w}from"efficient-easel/screen/components/PreviewDeviceContext";import{LOGO_ROW_FILL_DEFAULT as p}from"efficient-web-builder/format/lib/content/footer";import{VIEW_TIER_LABEL as r}from"efficient-easel/screen/lib/content/view-tiers";import{say as i}from"efficient-web-builder/format/lib/editor-words";import{sayWith as L}from"../lib/say-with.js";function g({value:n,onChange:s}){const e=w(),t={...p,...n},l=t[e];return o(a,{label:i("Logo fills its row"),icon:o(h,{}),action:o(f,{checked:l,onChange:m=>s({...t,[e]:m}),ariaLabel:i("Logo fills its row on {view}",{view:i(r[e])})}),hint:o(c,{children:L(i("Sets the {view} view — switch views in the top bar to set each one."),{view:o("strong",{children:i(r[e])})})})})}export{g as default};

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

@@ -0,0 +1,33 @@
+import type { AdminStorefrontForm } from "../../render/lib/api/index.js";
+export declare const CREATE_SENTINEL = "__create-a-new-form__";
+export interface FormPickerOption {
+    value: string;
+    label: string;
+}
+export interface FormPickerState {
+    value?: string;
+    forms: AdminStorefrontForm[] | null;
+    loadFailed: boolean;
+    emptyLabel?: string;
+}
+export declare function formPickerOptions({ value, forms, loadFailed, emptyLabel, }: FormPickerState): FormPickerOption[];
+export declare function resolveFormPick(picked: string): {
+    action: "create";
+} | {
+    action: "store";
+    slug: string;
+};
+export declare function followRenamedForm({ value, pickedId, forms, }: {
+    value?: string;
+    pickedId: string | null;
+    forms: AdminStorefrontForm[];
+}): string | null;
+export declare function formDestinationLines(form: AdminStorefrontForm): string[];
+interface Props {
+    value?: string;
+    onChange: (value: string) => void;
+    label?: string;
+    emptyLabel?: string;
+}
+export default function FormPicker({ value, onChange, label, emptyLabel }: Props): import("react").JSX.Element;
+export {};

package/dist/editor/components/FormPicker.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as l}from"react/jsx-runtime";import{useContext as D,useEffect as R,useRef as N,useState as w}from"react";import{Button as v}from"efficient-shell/ui";import q from"efficient-web-builder/editor/components/SearchSelectField";import{ScreenDocumentContext as A}from"efficient-easel/screen/components/ScreenDocumentContext";import{loadStorefrontForms as H}from"./useStorefrontForms.js";import{onStorefrontFormsChanged as I}from"efficient-web-builder/format/lib/editor-events";import{openFormBuilder as J,requestFormEdit as G}from"efficient-web-builder/format/lib/editor-form-window";import{useEaselHost as O}from"efficient-easel/screen/lib/host";import{say as s,sayCount as W}from"efficient-web-builder/format/lib/editor-words";const P="__create-a-new-form__";function K({value:e,forms:o,loadFailed:i,emptyLabel:m}){const d=o??[],b=e?d.some(r=>r.slug===e):!0,f=o===null&&!i,g={value:"",label:f?s("Loading…"):i?s("Forms couldn’t be loaded"):m===void 0?s("No form yet"):s(m)},_=e&&!b?[{value:e,label:f||i?e:s("{slug} — no form with this name",{slug:e})}]:[],u=d.map(r=>({value:r.slug,label:r.is_active?r.title:s("{title} (switched off)",{title:r.title})})),k=f?[]:[{value:P,label:s("Create a new form")}];return[g,..._,...u,...k]}function M(e){return e===P?{action:"create"}:{action:"store",slug:e}}function Q({value:e,pickedId:o,forms:i}){if(!e||!o||i.some(d=>d.slug===e))return null;const m=i.find(d=>d.id===o);return m&&m.slug&&m.slug!==e?m.slug:null}function U(e){const o=[s("Goes to {place}",{place:s("Storefront → Forms")})],i=(e.notify_email??"").trim();return i&&o.push(s("Emails a copy to {email}",{email:i})),e.mailing_list_name&&o.push(e.subscribe_mode==="checkbox"?s("Joins the “{audience}” audience, but only when the consent box is ticked",{audience:e.mailing_list_name}):s("Joins the “{audience}” audience",{audience:e.mailing_list_name})),e.kind==="account_signup"&&o.push(e.signup_customer_type==="importer"?s("Creates a wholesale account"):s("Creates a retail account")),o}function V({value:e,onChange:o,label:i="Form",emptyLabel:m}){const d=O(),b=D(A),f=b?b.capabilities.hasForms:!0,[g,_]=w(null),[u,k]=w(!1),[r,E]=w(!1),[j,F]=w(!1),h=N(!0),x=N(e);x.current=e;const C=N(o);C.current=o;const S=N(null),y=(n=!1)=>H(n).then(c=>{if(h.current){_(c),k(!1);const p=Q({value:x.current,pickedId:S.current,forms:c});p&&C.current(p)}return c},()=>(h.current&&k(!0),[]));R(()=>(h.current=!0,f&&y(),()=>{h.current=!1}),[f]),R(()=>f?I(()=>{y(!0)}):void 0,[f]);const a=e?(g??[]).find(n=>n.slug===e)??null:null;a?S.current=a.id:e||(S.current=null);const z=!!e&&!a&&g!==null&&!u,L=K({value:e,forms:g,loadFailed:u,emptyLabel:m}),T=async()=>{E(!0),F(!1);try{const n=await G(d,{mode:"create"}),c=await y(!0);if(!h.current)return;if(n.status==="timeout"){F(!0);return}if(n.status!=="saved")return;const{form:p}=n;p.slug!==x.current&&C.current(p.slug),c.some(B=>B.id===p.id)||y(!0)}finally{h.current&&E(!1)}},$=n=>{const c=M(n);c.action==="create"?T():(F(!1),o(c.slug))};return f?l("div",{className:"sf-formpicker",children:[t(q,{label:i,options:L,fallback:"",value:e??"",onChange:$,placeholder:s("Search forms…")}),j&&t("p",{className:"sf-formsummary-warn",children:s("That didn’t come back — pick the form from the list, or try again.")}),a?l("div",{className:"sf-blogsource sf-formsummary",children:[l("div",{children:[t("div",{className:"sf-formsummary-caption",children:W("{n} field","{n} fields",a.fields.length)}),a.fields.length?t("ol",{className:"sf-formsummary-fields",children:a.fields.map((n,c)=>t("li",{children:n.label},n.key||`${n.label}-${c}`))}):t("p",{className:"es-field-hint sf-hint-keep",children:s("This form has no fields yet, so there is nothing for a visitor to fill in.")})]}),l("div",{children:[t("div",{className:"sf-formsummary-caption",children:s("Where the answers go")}),t("ul",{className:"sf-formsummary-fields",children:U(a).map(n=>t("li",{children:n},n))})]}),!a.is_active&&t("p",{className:"sf-formsummary-warn",children:s("This form is switched off, so it won’t appear on the published page. Turn it back on in {place}.",{place:s("Storefront → Forms")})}),l("div",{className:"sf-formsummary-actions",children:[t(v,{variant:"secondary",size:"sm",onClick:()=>J(d,a.id),children:s("Edit form ✎")}),t(v,{variant:"secondary",size:"sm",disabled:r,onClick:()=>{T()},children:s("New form +")})]}),t("p",{className:"es-field-hint sf-hint-keep",children:s("The questions, the button text and the thank-you message all come from {place}. Edit them there — this section updates to match.",{place:s("Storefront → Forms")})})]}):l("div",{className:"sf-blogsource sf-formsummary",children:[u?l("p",{className:"es-field-hint sf-hint-keep",children:[s("This website’s forms couldn’t be loaded, so there is nothing to choose from yet."),e?` ${s("This section still points at “{slug}”, and that is unchanged.",{slug:e})}`:""]}):z&&t("p",{className:"sf-formsummary-warn",children:s("This section points at “{slug}”, and this website has no form with that name. Pick one from the list above, or leave it — nothing has been changed.",{slug:e??""})}),l("div",{className:"sf-formsummary-actions",children:[u&&t(v,{variant:"secondary",size:"sm",disabled:r,onClick:()=>{y(!0)},children:s("Try again")}),t(v,{variant:"secondary",size:"sm",disabled:r,onClick:()=>{T()},children:s("New form +")})]}),!u&&t("p",{className:"es-field-hint sf-hint-keep",children:s("Pick a form to show here, or build a new one. Forms are made once in {place} and can be shown on any number of pages.",{place:s("Storefront → Forms")})})]})]}):t("div",{className:"sf-formpicker",children:t("div",{className:"sf-blogsource sf-formsummary",children:l("div",{children:[t("div",{className:"sf-formsummary-caption",children:s(i)}),l("p",{className:"es-field-hint sf-hint-keep",children:[s("Forms aren’t available in this editor, so there is nothing to choose here."),e?` ${s("This section still points at “{slug}”, and that is unchanged.",{slug:e})}`:""]})]})})})}export{P as CREATE_SENTINEL,V as default,Q as followRenamedForm,U as formDestinationLines,K as formPickerOptions,M as resolveFormPick};

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

@@ -0,0 +1,7 @@
+import type { GalleryProductValue } from "../../render/lib/content/source-values.js";
+interface Props {
+    value?: GalleryProductValue;
+    onChange: (value: GalleryProductValue) => void;
+}
+export default function GalleryProductBinding({ value, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/editor/components/GalleryProductBinding.js

@@ -0,0 +1 @@
+"use client";import{jsx as r,jsxs as u,Fragment as w}from"react/jsx-runtime";import{useEffect as F,useMemo as N,useState as S}from"react";import{IconButton as z,Tooltip as O}from"efficient-shell/ui";import{SettingsField as P}from"efficient-easel/panel";import{FieldSelect as y}from"efficient-easel/fields";import{BlockProductIcon as H,MediaIcon as W}from"efficient-easel/icons";import{loadProductCatalog as M}from"../../render/components/useProductCatalog.js";import{loadWheelMediaGroups as T}from"./useWheelMediaGroups.js";import C from"efficient-easel/screen/components/UiIcon";import{say as n}from"efficient-web-builder/format/lib/editor-words";function v({label:o,hidden:s,onToggle:i}){return u("div",{className:"sf-field-head",children:[r("span",{className:"sf-field-label sf-field-label--inline",children:o}),i&&r(O,{content:s?n("Show on the card"):n("Hide on the card"),children:r(z,{size:"sm","aria-pressed":!!s,"aria-label":s?n("Show on the card"):n("Hide on the card"),onClick:i,children:s?r(C,{name:"eye-off",size:14}):r(C,{name:"eye",size:14})})})]})}const j=[["photos","Photos"],["lifestyle","Lifestyle"],["accessories","Accessories"],["others","Others"],["videos","Videos"]];function $(o){switch(o){case"photos":return n("Photos");case"lifestyle":return n("Lifestyle");case"accessories":return n("Accessories");case"others":return n("Others");case"videos":return n("Videos");default:return String(o)}}function G(o){if(!o)return[];const s=[];for(const[i,a]of j)(o[i]??[]).forEach((l,h)=>{const d=(l.items??[]).filter(t=>t.kind==="image").map(t=>t.url);d.length!==0&&s.push({key:`${String(i)}:${h}`,label:l.name?`${$(i)} · ${l.name}`:$(i),name:l.name||a,images:d})});return s}function E(o){return o?o.categories&&o.categories.length?o.categories:o.process?[o.process]:[]:[]}function k(o,s,i){const a=s?.find(c=>c.slug===o.code)??null;if(!a)return{name:void 0,href:void 0,cover:void 0,photos:[],eyebrow:void 0};const l=o.group?i.find(c=>c.name===o.group):void 0,h=o.finish?a.finishes.find(c=>c.name===o.finish&&c.src):void 0;let d,t=[];return l&&l.images.length?(d=l.images[0],t=l.images.slice(1)):(d=h?.src||a.coverImage||void 0,t=[]),{name:a.name,href:`/wheels/${a.slug}`,cover:d,photos:t,eyebrow:o.group||void 0}}function B({value:o,onChange:s}){const i=N(()=>o??{},[o]),[a,l]=S(null),[h,d]=S([]),[t,c]=S(!1);F(()=>{let e=!1;return M().then(f=>{e||l(f)}),()=>{e=!0}},[]),F(()=>{let e=!1;if(!i.code){d([]);return}return c(!0),T(i.code).then(f=>{e||(d(G(f)),c(!1))}),()=>{e=!0}},[i.code]);const m=N(()=>a?.find(e=>e.slug===i.code)??null,[a,i.code]),x=N(()=>E(m),[m]),L=a===null;function g(e,f=h){const b={...i,...e};s({...b,...k(b,a,f)})}function I(e){if(!e){s({});return}const f=a?.find(b=>b.slug===e)??null;g({code:e,category:E(f)[0]??"",finish:"",group:""},[])}function p(e){s({...i,[e]:!i[e]})}return u("div",{children:[r(P,{label:n("Product"),icon:r(H,{}),children:r(y,{value:i.code??"",ariaLabel:n("Product"),readOnly:L,onChange:I,options:[{label:L?n("Loading…"):n("Select a product…"),value:""},...(a??[]).map(e=>({label:e.name,value:e.slug}))]})}),i.code&&u(w,{children:[u("div",{className:`sf-field${i.hideName?" is-hidden":""}`,children:[r(v,{label:n("Title / product"),hidden:i.hideName,onToggle:()=>p("hideName")}),u("div",{style:{display:"flex",alignItems:"center",gap:6,minHeight:30,padding:"0 8px",borderRadius:6,border:"1px solid var(--sf-field-border, rgba(128,128,128,0.3))",opacity:.75,fontSize:13},children:[m?.name??i.name??"—",r("span",{style:{opacity:.6},children:n("(auto)")})]})]}),u("div",{className:`sf-field${i.hideProcess?" is-hidden":""}`,children:[r(v,{label:n("Category"),hidden:i.hideProcess,onToggle:()=>p("hideProcess")}),r(y,{value:i.category??"",ariaLabel:n("Category"),readOnly:x.length===0,onChange:e=>g({category:e}),options:x.length===0?[{label:n("No categories on this product"),value:""}]:x.map(e=>({label:e,value:e}))})]}),r(P,{label:n("Media group"),icon:r(W,{}),hint:n("Its name fills the Eyebrow below, and its photos become the card cover and lightbox. No group → the product’s cover image."),children:r(y,{value:i.group??"",ariaLabel:n("Media group"),readOnly:t,onChange:e=>g({group:e}),options:[{label:t?n("Loading…"):h.length===0?n("Cover image only (no media groups)"):n("Cover image only"),value:""},...h.map(e=>({label:e.label,value:e.name}))]})}),u("div",{className:`sf-field${i.hideEyebrow?" is-hidden":""}`,children:[r(v,{label:u(w,{children:[n("Eyebrow")," ",r("span",{style:{fontWeight:400,opacity:.6},children:n("(from media group)")})]}),hidden:i.hideEyebrow,onToggle:()=>p("hideEyebrow")}),r("div",{style:{display:"flex",alignItems:"center",gap:6,minHeight:30,padding:"0 8px",borderRadius:6,border:"1px solid var(--sf-field-border, rgba(128,128,128,0.3))",opacity:.75,fontSize:13},children:i.group||"—"})]}),u("div",{className:`sf-field${i.hideFinish?" is-hidden":""}`,children:[r(v,{label:n("Finish"),hidden:i.hideFinish,onToggle:()=>p("hideFinish")}),r(y,{value:i.finish??"",ariaLabel:n("Finish"),onChange:e=>g({finish:e}),options:[{label:n("Default (the product’s default finish)"),value:""},...(m?.finishes??[]).map(e=>({label:e.src?e.name:n("{name} — no render",{name:e.name}),value:e.name,disabled:!e.src}))]})]})]})]})}export{B as default};

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

@@ -0,0 +1,7 @@
+import type { GalleryShowcaseSourceValue } from "../../render/lib/content/source-values.js";
+interface Props {
+    value?: GalleryShowcaseSourceValue | null;
+    onChange: (value: GalleryShowcaseSourceValue | null) => void;
+}
+export default function GalleryShowcaseSource({ value, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/editor/components/GalleryShowcaseSource.js

@@ -0,0 +1 @@
+"use client";import{jsx as d,jsxs as U}from"react/jsx-runtime";import{SettingsField as N}from"efficient-easel/panel";import{FieldSelect as H}from"efficient-easel/fields";import{BlockProductIcon as V,CategoryIcon as X}from"efficient-easel/icons";import{useEffect as G,useMemo as Y,useRef as w,useState as P}from"react";import{storefrontAdmin as Z}from"../../render/lib/api/index.js";import{useEaselHost as v}from"efficient-easel/screen/lib/host";import{getEditorToken as ee}from"efficient-web-builder/render/lib/editor-auth";import{getEditorSiteId as te}from"efficient-web-builder/render/lib/editor-site";import{loadProductCatalog as I}from"../../render/components/useProductCatalog.js";import{loadStorefrontCategories as re}from"./useStorefrontCategories.js";import{useCategoryFilter as se}from"./useCategoryFilter.js";import{snapshotChanged as oe}from"efficient-web-builder/editor/components/useSnapshotSource";import ne from"efficient-web-builder/editor/components/SourceStatus";import{say as n,sayCount as T}from"efficient-web-builder/format/lib/editor-words";const a="__all__";function ae(e,r){return r===a?e:e.filter(o=>o.process===r)}function h(e,r){return e.map(o=>({image:o.items[0]?.url,photos:o.items.map(s=>({src:s.url})),href:`/wheels/${r.slug}`,process:r.process,eyebrow:o.name,name:r.name,meta:o.finish})).filter(o=>!!o.image)}function W(e){const r=ee();return r?Z.getWheelDetail(r,e,{siteId:te()}):Promise.reject(new Error("editor not authenticated"))}async function le(e){const r=await W(e),o={slug:r.slug,name:r.name,process:r.process},s=r.mediaGroups??{photos:[],lifestyle:[],videos:[],accessories:[],others:[]};return{...o,vehicleCards:h(s.lifestyle??[],o),wheelCards:h(s.photos??[],o),othersCards:h(s.others??[],o)}}async function ie(e,r){const o=await Promise.all(e.map(l=>W(l.slug).catch(()=>null))),s=[],p=[],g=[];for(const l of o){if(!l)continue;const c={slug:l.slug,name:l.name,process:l.process},m=l.mediaGroups??{photos:[],lifestyle:[],videos:[],accessories:[],others:[]};s.push(...h(m.lifestyle??[],c)),p.push(...h(m.photos??[],c)),g.push(...h(m.others??[],c))}return{slug:a,name:r===a?"All products":r,process:"",vehicleCards:s,wheelCards:p,othersCards:g,category:r}}function ce({value:e,onChange:r}){const o=v(),[s,p]=P(null),[g,l]=P(null),[c,m]=P(!1),[R,A]=P(!1),u=w(!0),y=w(e);y.current=e;const B=w(r);B.current=r;const F=(t,f=!1)=>{m(!0),f||A(!1),t().then(x=>{u.current&&(oe(x,y.current)&&B.current(x),A(!1))}).catch(()=>{u.current&&!f&&A(!0)}).finally(()=>{u.current&&m(!1)})},S=(t,f=!1)=>F(()=>le(t),f),C=(t,f=!1)=>F(()=>ie(ae(s??[],t),t),f);G(()=>(u.current=!0,I().then(t=>{u.current&&p(t)}),re().then(t=>{u.current&&l(t)}),()=>{u.current=!1}),[]);const b=w(!1);G(()=>{if(b.current)return;const t=y.current;if(!t?.slug){b.current=!0;return}if(t.slug===a){if(s===null)return;b.current=!0,C(t.category??a,!0)}else b.current=!0,S(t.slug,!0)},[s]);const i=e?.slug===a,k=Y(()=>s&&e?.slug&&!i?s.find(t=>t.slug===e.slug)??null:null,[s,e?.slug,i]),{category:O,setCategory:E,categoryNames:D,filtered:M}=se(s,g);G(()=>{i?e?.category&&E(e.category):k?.process&&E(k.process)},[k,i,e?.category]);const L=s===null,_=!!e?.slug&&!i&&s!==null&&!k,$=t=>{if(!t){r(null);return}if(t===a){C(O);return}S(t)},q=t=>{E(t),y.current?.slug===a&&C(t)},z=()=>{e?.slug&&(I(!0).then(t=>{u.current&&p(t)}),i?C(e.category??a):S(e.slug))},J=()=>{e?.slug&&o.send("storefront-editor:open-product",{slug:e.slug,name:e.name})},j=(e?.vehicleCards.length??0)+(e?.wheelCards.length??0)+(e?.othersCards?.length??0),K=R?"error":c?"loading":"idle",Q=R?n("Couldn’t reach the product catalog."):c?n("Syncing media from the catalog…"):_?n("Linked to “{name}” — no longer in the catalog.",{name:e?.name??""}):i?T("Linked to “{name}” · {n} card from all products’ media groups.","Linked to “{name}” · {n} cards from all products’ media groups.",j,{name:e?.name??""}):T("Linked to “{name}” · {n} card from its media groups.","Linked to “{name}” · {n} cards from its media groups.",j,{name:e?.name??""});return U("div",{children:[d(N,{label:n("Category"),icon:d(X,{}),children:d(H,{value:O,ariaLabel:n("Category"),onChange:q,readOnly:L,options:[{label:n("All products"),value:a},...D.map(t=>({label:t,value:t}))]})}),d(N,{label:n("Product"),icon:d(V,{}),children:d(H,{value:e?.slug??"",ariaLabel:n("Product"),onChange:$,readOnly:L||c,options:[{label:L?n("Loading…"):n("None (write the cards yourself)"),value:""},{label:n("All products"),value:a},..._?[{label:n("{name} (unavailable)",{name:e.name}),value:e.slug}]:[],...M.map(t=>({label:t.name,value:t.slug}))]})}),e?.slug?d(ne,{status:K,statusText:Q,onRefresh:z,busy:c,edit:i?void 0:{label:n("Edit product ✎"),onClick:J},hint:i?n("Pools every product’s grouped media: each one’s Relative / lifestyle photos feed Gallery A, its Product photos Gallery B and its Others the Others gallery. Every media group becomes a card, attributed to its own product (title, link and tag). Narrow the set with the Category filter above. Headings, intro copy and stats stay yours."):n("Gallery A comes from the product’s Relative / lifestyle photos, Gallery B from its Product photos and the Others gallery from its Others — edit those in the product’s Media tab and refresh. Each media group is a card: its name is the eyebrow, its finish the meta line; the card’s title is the product name and its tag the category. Headings, intro copy and stats stay yours.")}):d("p",{className:"es-field-hint sf-hint-keep",style:{marginTop:7},children:n("Pick a product — or All products — to build the galleries from media groups, or keep “None” to author the cards yourself.")})]})}export{ce as default};

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

@@ -0,0 +1,3 @@
+export default function HeaderSection({ editing }: {
+    editing?: boolean;
+}): import("react").JSX.Element | null;

package/dist/editor/components/HeaderSection.js

@@ -0,0 +1 @@
+"use client";import{jsx as r}from"react/jsx-runtime";import{useEasel as n}from"efficient-easel/easel";import{PreviewHeader as a}from"./PreviewHeader.js";import{SITE_HEADER_TYPE as i}from"efficient-web-builder/format/lib/puck/section-groups";function u({editing:e=!1}){return e?r(s,{}):null}function s(){return n(t=>(t.appState.data.content??[]).some(o=>o?.type===i))?null:r(a,{})}export{u as default};

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

@@ -0,0 +1,132 @@
+import { type AdminHeaderSettings } from "../../render/lib/api/index.js";
+import type { ShowWhenRule } from "efficient-shell/ui";
+export declare const OFF_PLACEHOLDER: ShowWhenRule;
+export declare const HEADER_TABS_ID_PREFIX = "sf-header";
+export declare const HEADER_TABS: {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    showWhen?: ShowWhenRule;
+}[];
+interface Props {
+    tokenRef: React.RefObject<string | null>;
+    siteId?: string | null;
+    onClose?: () => void;
+    onAuthExpired?: () => void;
+    inline?: boolean;
+    placeholderMode?: boolean;
+    websiteName?: string;
+    onOpenWebsiteSettings?: () => void;
+}
+export default function HeaderSettingsPanel({ tokenRef, siteId, onClose, onAuthExpired, inline, placeholderMode, websiteName, onOpenWebsiteSettings, }: Props): import("react").JSX.Element;
+export declare function Field({ label, children, stacked, }: {
+    label: string;
+    children: React.ReactNode;
+    stacked?: boolean;
+}): import("react").JSX.Element;
+export declare const HEADER_SEGMENTED: {
+    readonly logoPosition: {
+        readonly label: "Position";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Center";
+            readonly value: "center";
+        }];
+        readonly choose: (stored: AdminHeaderSettings["logo_position"]) => "left" | "center";
+    };
+    readonly menuAlign: {
+        readonly label: "Alignment";
+        readonly options: readonly [{
+            readonly label: "Right";
+            readonly value: "left";
+        }, {
+            readonly label: "Centered";
+            readonly value: "center";
+        }, {
+            readonly label: "Beside logo";
+            readonly value: "beside";
+        }];
+        readonly choose: (stored: AdminHeaderSettings["menu_position"]) => "left" | "center" | "beside";
+    };
+    readonly menuRow: {
+        readonly label: "Row";
+        readonly options: readonly [{
+            readonly label: "Own row";
+            readonly value: "top";
+        }, {
+            readonly label: "Same row";
+            readonly value: "inline";
+        }];
+        readonly choose: (stored: AdminHeaderSettings["menu_row"]) => "top" | "inline";
+    };
+    readonly searchPosition: {
+        readonly label: "Position";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Right";
+            readonly value: "right";
+        }];
+        readonly choose: (stored: AdminHeaderSettings["search_position"]) => "left" | "right";
+    };
+    readonly width: {
+        readonly label: "Width";
+        readonly options: readonly [{
+            readonly label: string;
+            readonly value: "page";
+        }, {
+            readonly label: string;
+            readonly value: "full";
+        }];
+        readonly choose: (stored: AdminHeaderSettings["width"]) => "page" | "full";
+    };
+    readonly navTextCase: {
+        readonly label: "Letters";
+        readonly options: readonly [{
+            readonly label: "Uppercase";
+            readonly value: "uppercase";
+        }, {
+            readonly label: "Capitalised";
+            readonly value: "capitalised";
+        }];
+        readonly choose: (stored: AdminHeaderSettings["nav_text_case"]) => "uppercase" | "capitalised";
+    };
+    readonly utilStyle: {
+        readonly label: "Show as";
+        readonly options: readonly [{
+            readonly label: "Icon";
+            readonly value: "icon";
+        }, {
+            readonly label: "Text";
+            readonly value: "text";
+        }];
+        readonly choose: (stored: AdminHeaderSettings["util_style"]) => "text" | "icon";
+    };
+    readonly topTextColor: {
+        readonly label: "Text color at the top";
+        readonly options: readonly [{
+            readonly label: "Auto";
+            readonly value: "auto";
+        }, {
+            readonly label: "Light";
+            readonly value: "light";
+        }, {
+            readonly label: "Dark";
+            readonly value: "dark";
+        }];
+        readonly choose: (stored: AdminHeaderSettings["top_text_color"]) => "light" | "dark" | "auto";
+    };
+};
+export declare function HeaderTabStrip({ tabs, activeId, onSelect, }: {
+    tabs: readonly {
+        id: string;
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    activeId: string;
+    onSelect: (id: string) => void;
+}): import("react").JSX.Element;
+export {};

package/dist/editor/components/HeaderSettingsPanel.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r,Fragment as G}from"react/jsx-runtime";import{useCallback as L,useEffect as X,useRef as le,useState as E}from"react";import{ApiError as Te,storefrontAdmin as A}from"../../render/lib/api/index.js";import{requestMediaPick as Ee}from"efficient-easel/screen/lib/media-picker";import{refreshSiteLiveState as Ae}from"efficient-web-builder/editor/lib/site-live-state";import{useEaselHost as fe}from"efficient-easel/screen/lib/host";import{onHeaderMenusChanged as Pe}from"efficient-web-builder/format/lib/editor-events";import{loadAllSitesMenus as Oe,refreshAllSitesMenus as Me}from"../../render/lib/menu-source.js";import{headerMenuMissingWarning as Re}from"../../render/lib/content/menu-placeholder.js";import{say as l,sayCount as De}from"efficient-web-builder/format/lib/editor-words";import{sayWith as ne}from"../lib/say-with.js";import{NEUTRAL_SITE_NAME as ze}from"../../render/lib/content/site.js";import{WIDTH_CHOICE_LABEL as ge}from"efficient-web-builder/format/lib/content/section-width";import{usePreviewHeader as Be}from"efficient-web-builder/render/components/PreviewHeaderContext";import{HEADER_LOGO_PX as be,HEADER_LOGO_PX_MIN as Ge,HEADER_LOGO_PX_MAX as Ie}from"efficient-web-builder/render/components/Logo";import{HEADER_HEIGHT_PX as $,HEADER_MENU_GAP_PX as V}from"efficient-web-builder/render/lib/puck/header-clearance";import Fe from"efficient-web-builder/editor/components/SectionThemePicker";import{HEADER_THEME_FOLLOW as xe}from"../../render/lib/content/header-theme.js";import{resolveHeaderInkMode as We}from"efficient-web-builder/render/lib/puck/header-ink";import{absolutizeApiUrl as Ue}from"efficient-web-builder/render/lib/media";import{loadHeaderSettings as je,primeHeaderSettings as Xe,clearHeaderSettingsCache as Ve,toPreviewHeaderSettings as Ke}from"../lib/header-settings-source.js";import{Banner as qe,Button as ae,Drawer as Ye,InputNumber as $e,LoadingSpinner as Ze,MediaUploadField as Je,ShowWhen as K,Slider as Qe,Tabs as et,tabButtonId as tt,tabPanelId as lt}from"efficient-shell/ui";import{CountryShowAsTiles as nt}from"./CountryShowAsTiles.js";import{truthy as at,visibleFields as ot}from"efficient-web-builder/render/lib/puck/show-when";const it={field:"country_selector_enabled",is:!0},oe={not:{context:"placeholderMode",is:!0}},st={field:"menu_position",is:"beside"},rt={all:[{field:"logo_position",is:"center"},{not:{field:"menu_position",is:"center"}}]},ct={all:[oe,at("country_selector_enabled")]};import{SettingsDefaultReset as ie,SettingsSwitch as q}from"efficient-easel/panel";import{FieldSelect as se}from"efficient-easel/fields";import{useEaselStrings as dt}from"efficient-easel/strings";import{ListIcon as ut,LogoIcon as ht,SettingsIcon as mt,StylesIcon as pt}from"efficient-easel/icons";import{GroupLabel as ft,Segmented as P}from"efficient-web-builder/editor/lib/puck/controls";import{HintsToggle as re,SHOW_HINTS_DEFAULT as gt}from"efficient-web-builder/editor/components/WebsiteSettingsPanel";const ce="sf-header",_e="sf-header-size-label",ve="sf-header-gap-label",we="sf-header-height-label",Se=[{id:"logo",label:"Logo",icon:e(ht,{})},{id:"menu",label:"Menu",icon:e(ut,{}),showWhen:oe},{id:"tools",label:"Tools",icon:e(mt,{})},{id:"look",label:"Look",icon:e(pt,{})}];function bt({tokenRef:a,siteId:o,onClose:b,onAuthExpired:_,inline:O,placeholderMode:y,websiteName:v,onOpenWebsiteSettings:C}){const m=fe(),M=dt(),[n,x]=E(null),[R,w]=E(null),[D,Y]=E(!1),[d,k]=E(Se[0].id),[u,T]=E(gt),F=n,Z={placeholderMode:y},J=Object.values(ot(Object.fromEntries(Se.map(t=>[t.id,t])),F,Z)),z=J.find(t=>t.id===d)??J[0],[ye,Ce]=E(0),{setSettings:ue}=Be(),W=le(null),U=le(null),j=le(null);X(()=>{let t=!1,s=null,h=null;const c=3,H=(I,B=0)=>{t||w(null),je(I,o,B>0).then(He=>!t&&x(He)).catch(()=>{t||(B+1<c?h=setTimeout(()=>H(I,B+1),600*(B+1)):w(l("Could not load header settings.")))})},pe=a.current;if(pe)H(pe);else{let I=0;s=setInterval(()=>{const B=a.current;if(B){s&&clearInterval(s),s=null,t||w(null),H(B);return}I+=250,I===5e3&&!t&&w(l("Waiting for editor authorization…")),I>=3e4&&(s&&clearInterval(s),s=null,t||w(l("Not authorized yet — reopen once the editor has loaded.")))},250)}return()=>{t=!0,s&&clearInterval(s),h&&clearTimeout(h)}},[a,ye,o]),X(()=>{n&&ue(Ke(n))},[n,ue]),X(()=>()=>{W.current&&clearTimeout(W.current),U.current&&clearTimeout(U.current),j.current&&clearTimeout(j.current)},[]);const g=L(async(t,s)=>{const h=a.current;if(!h||!n)return;const c=n;s&&x({...n,...s}),Y(!0),w(null);try{const H=await t(h);x(H),Xe(H,o),Ae()}catch(H){x(c),H instanceof Te&&H.status===401?(Ve(o),_?.(),w(l("Authorization expired — try again in a moment."))):w(l("Could not save. Please retry."))}finally{Y(!1)}},[n,a,_,o]),p=L(t=>g(s=>A.updateHeaderSettings(t,s,o??void 0),t),[g,o]),he=L(t=>{g(s=>A.setHeaderLogoFromAsset(t,s,o??void 0))},[g,o]),Le=L(()=>{Ee(m,{accept:"image/svg+xml",title:l("Logo (SVG)")}).then(t=>{t&&he(t.id)})},[he]),Q=L((t,s=!0)=>{x(c=>c&&{...c,logo_size_px:t}),W.current&&clearTimeout(W.current);const h=()=>{g(c=>A.updateHeaderSettings({logo_size_px:t},c,o??void 0))};s?h():W.current=setTimeout(h,400)},[g,o]),ee=L((t,s=!0)=>{x(c=>c&&{...c,height_px:t}),U.current&&clearTimeout(U.current);const h=()=>{g(c=>A.updateHeaderSettings({height_px:t},c,o??void 0))};s?h():U.current=setTimeout(h,400)},[g,o]),te=L((t,s=!0)=>{x(c=>c&&{...c,menu_gap_px:t}),j.current&&clearTimeout(j.current);const h=()=>{g(c=>A.updateHeaderSettings({menu_gap_px:t},c,o??void 0))};s?h():j.current=setTimeout(h,400)},[g,o]),Ne=L(()=>{g(async t=>{const s=await A.clearHeaderLogo(t,o??void 0);return s.reverse_logo?A.updateHeaderSettings({reverse_logo:!1},t,o??void 0):s})},[g,o]),ke=L(t=>{x(s=>s&&{...s,menu:t?.id??null,menu_handle:t?.handle??null,menu_name:t?.name??null,menu_items:t?t.items.map(h=>({label:h.label,url:h.url,dropdown_menu:h.dropdown_menu??null,dropdown_items:h.dropdown_items??[]})):[]}),g(s=>A.updateHeaderSettings({menu:t?.id??null},s,o??void 0))},[g,o]),me=r(G,{children:[R&&e(qe,{tone:"danger",className:"mx-4 mt-3",action:n?void 0:e(ae,{variant:"secondary",size:"sm",onClick:()=>Ce(t=>t+1),children:l("Retry")}),children:R}),n?r(G,{children:[e(Tt,{tabs:J,activeId:z.id,onSelect:k}),r("div",{id:lt(ce,z.id),role:"tabpanel","aria-labelledby":tt(ce,z.id),className:"flex flex-col p-4 [&>*+*]:mt-3",children:[z.id==="logo"&&r(G,{children:[e(S,{label:"Image"}),e(K,{rule:oe,values:F,context:Z,children:e(xt,{settings:n,websiteName:v,onPick:Le,onClear:Ne,showHint:u})}),e(f,{label:"Reverse the Logo",children:e(q,{checked:n.reverse_logo,onChange:t=>p({reverse_logo:t}),ariaLabel:l("Reverse the Logo")})}),e(N,{shown:u,children:l("Keeps the logo readable on any header — flips just its black & white parts to contrast the bar behind it (in both light and dark themes). Any other colors are kept as-is.")}),e(S,{label:"Placement"}),e(vt,{label:i.logoPosition.label,value:i.logoPosition.options.find(t=>t.value===i.logoPosition.choose(n.logo_position))?.label,children:e(P,{value:i.logoPosition.choose(n.logo_position),options:i.logoPosition.options,onChange:t=>p({logo_position:t}),ariaLabel:i.logoPosition.label})}),r("div",{className:"flex flex-col gap-2",children:[r("div",{className:"flex items-center justify-between",children:[e("span",{id:_e,className:"text-xs text-[var(--ink-muted)]",children:l("Size")}),r("span",{className:"flex items-center gap-1",children:[r("span",{className:"sf-header-value text-[12px] tabular-nums text-[var(--ink-faint)]","data-changed":n.logo_size_px!=null||void 0,children:[n.logo_size_px??be[n.logo_size],"px"]}),e(ie,{label:l("Size"),words:M.panel,changed:n.logo_size_px!=null,onReset:()=>Q(null)})]})]}),e(de,{labelledBy:_e,min:Ge,max:Ie,step:2,value:n.logo_size_px??be[n.logo_size],onPreview:t=>Q(t,!1),onCommit:t=>Q(t,!0)}),e(N,{shown:u,children:l("Sets the logo’s height; the width follows the logo’s own proportions.")})]}),e(re,{shown:u,onChange:T})]}),z.id==="menu"&&r(G,{children:[e(S,{label:"Links"}),e(_t,{token:a.current,menuId:n.menu,menuName:n.menu_name,itemCount:n.menu_items?.length??0,onPick:ke}),e(f,{label:i.menuAlign.label,children:e(P,{value:i.menuAlign.choose(n.menu_position),options:i.menuAlign.options.filter(t=>t.value!=="beside"||n.logo_position!=="center"),onChange:t=>p({menu_position:t}),ariaLabel:i.menuAlign.label})}),e(K,{rule:st,values:F,children:r("div",{className:"flex flex-col gap-2",children:[r("div",{className:"flex items-center justify-between",children:[e("span",{id:ve,className:"text-xs text-[var(--ink-muted)]",children:l("Space from the logo")}),r("span",{className:"flex items-center gap-1",children:[r("span",{className:"sf-header-value text-[12px] tabular-nums text-[var(--ink-faint)]","data-changed":n.menu_gap_px!=null||void 0,children:[n.menu_gap_px??V.default,"px"]}),e(ie,{label:l("Space from the logo"),words:M.panel,changed:n.menu_gap_px!=null,onReset:()=>te(null)})]})]}),e(de,{labelledBy:ve,min:V.min,max:V.max,step:V.step,value:n.menu_gap_px??V.default,onPreview:t=>te(t,!1),onCommit:t=>te(t,!0)}),e(N,{shown:u,children:l("How much room the menu leaves the logo. Only the logo moves away; the space between the menu words stays as it is.")})]})}),e(f,{label:i.menuRow.label,children:e(P,{value:i.menuRow.choose(n.menu_row),options:i.menuRow.options,onChange:t=>p({menu_row:t}),ariaLabel:i.menuRow.label})}),e(K,{rule:rt,values:F,children:e(f,{label:"Left items",children:e("div",{className:"w-16",children:e(se,{value:n.menu_split??3,ariaLabel:l("Left items"),onChange:t=>p({menu_split:t}),options:[1,2,3,4].map(t=>({label:String(t),value:t}))})})})}),e(f,{label:i.navTextCase.label,children:e(P,{value:i.navTextCase.choose(n.nav_text_case),options:i.navTextCase.options,onChange:t=>p({nav_text_case:t}),ariaLabel:i.navTextCase.label})}),e(N,{shown:u,children:ne(l("{uppercase} draws SEARCH and BAG; {capitalised} draws Search and Bag. It covers the menu links and the Tools words together, and it leaves a name like FusionForge exactly as you typed it."),{uppercase:e("strong",{children:l("Uppercase")}),capitalised:e("strong",{children:l("Capitalised")})})})]}),z.id==="tools"&&r(G,{children:[e(S,{label:"Style"}),e(f,{label:i.utilStyle.label,children:e(P,{value:i.utilStyle.choose(n.util_style),options:i.utilStyle.options,onChange:t=>p({util_style:t}),ariaLabel:i.utilStyle.label})}),e(N,{shown:u,children:ne(l("{text} draws the words — Search, Account, Bag — instead of the little pictures. It changes how they look, not whether they are shown: that stays with the switches below."),{text:e("strong",{children:l("Text")})})}),e(S,{label:"Search"}),e(f,{label:"Search",children:e(q,{checked:n.search_enabled,onChange:t=>p({search_enabled:t}),ariaLabel:l("Search")})}),e(f,{label:i.searchPosition.label,children:e(P,{value:i.searchPosition.choose(n.search_position),options:i.searchPosition.options,onChange:t=>p({search_position:t}),ariaLabel:i.searchPosition.label})}),e(S,{label:"Country selector"}),e(f,{label:"Show selector",children:e(q,{checked:n.country_selector_enabled,onChange:t=>p({country_selector_enabled:t}),ariaLabel:l("Show selector")})}),e(K,{rule:it,values:{country_selector_enabled:n.country_selector_enabled},children:e(f,{label:"Show as",stacked:!0,children:e(nt,{value:n.country_selector_show_as,onChange:t=>p({country_selector_show_as:t})})})}),e(K,{rule:ct,values:F,context:Z,children:e(N,{shown:u,children:ne(l("Which countries this website serves — and each region's own URL — is set in the admin console under {place}. Whether the picker is SHOWN stays here: that is header chrome, but the served-country list has tax consequences and belongs with commerce configuration."),{place:e("strong",{children:l("Storefront › Settings › Regions & currencies")})})})}),e(S,{label:"Account and cart"}),e(f,{label:"Account",children:e(q,{checked:n.account_enabled??!0,onChange:t=>p({account_enabled:t}),ariaLabel:l("Account")})}),e(f,{label:"Cart",children:e(q,{checked:n.cart_enabled??!0,onChange:t=>p({cart_enabled:t}),ariaLabel:l("Cart")})}),e(re,{shown:u,onChange:T})]}),z.id==="look"&&r(G,{children:[e(S,{label:"Dimensions"}),e(f,{label:i.width.label,children:e(P,{value:i.width.choose(n.width),options:i.width.options,onChange:t=>p({width:t}),ariaLabel:i.width.label})}),r("div",{className:"flex flex-col gap-2",children:[r("div",{className:"flex items-center justify-between",children:[e("span",{id:we,className:"text-xs text-[var(--ink-muted)]",children:l("Height")}),r("span",{className:"flex items-center gap-1",children:[r("span",{className:"sf-header-value text-[12px] tabular-nums text-[var(--ink-faint)]","data-changed":n.height_px!=null||void 0,children:[n.height_px??$.default,"px"]}),e(ie,{label:l("Height"),words:M.panel,changed:n.height_px!=null,onReset:()=>ee(null)})]})]}),e(de,{labelledBy:we,min:$.min,max:$.max,step:2,value:n.height_px??$.default,onPreview:t=>ee(t,!1),onCommit:t=>ee(t,!0)}),e(N,{shown:u,children:l("Sets how tall the header bar is; the content below it shifts down to match.")})]}),e(f,{label:"Border thickness",children:e("div",{className:"w-24",children:e($e,{value:n.border_thickness,min:0,max:20,precision:0,size:"sm",suffix:"px","aria-label":l("Border thickness"),onChange:t=>p({border_thickness:Math.max(0,t??0)})})})}),e(S,{label:"Color"}),e(f,{label:"Theme",children:e(Fe,{value:n.theme??xe,onChange:t=>p({theme:t===xe?null:t}),followLabel:l("Follow the site theme")})}),e(N,{shown:u,children:l("The color the bar paints once it is solid — after any scroll, and on every product page from the first paint. Follow the site theme keeps it on whatever palette the site is on.")}),e(f,{label:i.topTextColor.label,children:e(P,{value:i.topTextColor.choose(n.top_text_color),options:i.topTextColor.options,onChange:t=>p({top_text_color:t}),ariaLabel:i.topTextColor.label})}),e(N,{shown:u,children:l("Auto reads what the first section on each page says it is — dark, light or accent — and picks the text that can be read on it. Set Light or Dark to decide it yourself when Auto reads a page wrong.")}),e(S,{label:"Behavior"}),e(f,{label:"Sticky header",children:e("div",{className:"w-32",children:e(se,{value:n.sticky,ariaLabel:l("Sticky header"),onChange:t=>p({sticky:t}),options:[{label:l("None"),value:"none"},{label:l("Always"),value:"always"},{label:l("On scroll up"),value:"on_scroll_up"}]})})}),C&&r(G,{children:[e(S,{label:"Display mode"}),e("p",{className:"text-[12px] text-[var(--ink-faint)]",children:l("Set the default Light / Dark / Auto mode and show or hide the light↔dark switch in Appearance.")}),e(ae,{variant:"link",size:"sm",className:"self-start",onClick:C,children:l("Set up display mode →")})]}),e(re,{shown:u,onChange:T})]})]})]}):R?null:e(Ze,{size:"sm",padding:"p-4",label:l("Loading…")})]});return O?r("div",{className:"flex flex-col",children:[D&&e("div",{className:"px-4 pt-2 text-[11px] text-[var(--ink-faintest)]",children:l("Saving…")}),me]}):r(Ye,{open:!0,onClose:b??(()=>{}),side:"right",size:"sm",title:l("Header"),children:[D&&e("div",{className:"pb-2 text-[11px] text-[var(--ink-faintest)]",children:l("Saving…")}),me]})}function xt({settings:a,websiteName:o,onPick:b,onClear:_,showHint:O}){const y=!!a.logo_url,v=!y&&!!a.default_logo_url,C=Ue(a.effective_logo_url),m=o&&o.trim()?o.trim():ze;return r("div",{className:"flex flex-col gap-2",children:[e(Je,{value:C||"",onChange:M=>{M||_()},onPick:b,accept:"image/svg+xml,.svg",acceptHint:"SVG",fit:"contain",height:80,placeholder:l("No logo — “{name}” wordmark shown",{name:m}),replaceLabel:y?l("Replace SVG logo"):l("Upload SVG logo"),allowRemove:y,removeLabel:l("Use company default")}),e(N,{shown:O,children:y?l("Custom SVG logo uploaded for this store."):v?l("Using your company logo from the database."):l("No company logo on file — upload an SVG or the wordmark is used.")})]})}function _t({token:a,menuId:o,menuName:b,itemCount:_,onPick:O}){const y=fe(),[v,C]=E(null),[m,M]=E(!1),n=L(d=>{C(d),M(!0)},[]);X(()=>{let d=!1;return Oe(a).then(k=>!d&&n(k)).catch(()=>!d&&C([])),()=>{d=!0}},[a,n]),X(()=>{let d=!1;const k=Pe(()=>{Me(a).then(u=>!d&&n(u)).catch(()=>{})});return()=>{d=!0,k()}},[a,n]);const x=v===null,R=!x&&(v?.length??0)===0,w=!x&&(v??[]).some(d=>d.id===o),D=w?o:"",Y=m&&!!o&&!w;return r("div",{className:"flex flex-col gap-2",children:[e(f,{label:"Menu",children:e("div",{className:"w-[170px] max-w-full",children:e(se,{value:D,ariaLabel:l("Menu"),readOnly:x||R,onChange:d=>{const k=d?(v??[]).find(u=>u.id===d):null;O(k?{...k,items:k.items.map(u=>({...u,dropdown_items:(v??[]).find(T=>T.id===u.dropdown_menu)?.items.map(T=>({label:T.label,url:T.url}))??[]}))}:null)},options:[{label:x?l("Loading…"):R?l("No menus"):l("Default links"),value:""},...(v??[]).map(d=>({label:`${d.name} (${d.item_count??d.items.length})`,value:d.id}))]})})}),Y?e("p",{className:"text-[12px] text-[var(--sf-warning,#b45309)]",children:Re()}):e("p",{className:"text-[12px] text-[var(--ink-faint)]",children:D?De("Header shows “{name}” — {n} link.","Header shows “{name}” — {n} links.",_,{name:b??l("the linked menu")}):R?l("No menus yet. Create one in {place}, then pick it here.",{place:l("Storefront → Menus")}):l("Pick a menu to drive the header links, or keep the built-in default links.")}),e(ae,{variant:"link",size:"sm",className:"self-start",onClick:()=>y.send("storefront-editor:open-menus",{menuId:D||null}),children:D?l("Edit menu →"):l("Manage menus →")})]})}function N({shown:a,children:o}){return a?e("p",{className:"text-[11px] text-[var(--sf-muted)]",children:o}):null}function de({labelledBy:a,value:o,min:b,max:_,step:O,onPreview:y,onCommit:v}){const C=m=>{m instanceof HTMLInputElement&&m.type==="range"&&v(Number(m.value))};return e("div",{onPointerUp:m=>C(m.target),onKeyUp:m=>{/^(Arrow|Home|End|Page)/.test(m.key)&&C(m.target)},children:e(Qe,{value:o,min:b,max:_,step:O,showInput:!1,size:"sm","aria-labelledby":a,valueText:m=>l("{n} pixels",{n:m}),onChange:m=>{m!=null&&y(m)}})})}function vt({label:a,value:o,children:b}){return r("div",{className:"flex flex-col gap-2",children:[r("div",{className:"flex items-center justify-between",children:[e("span",{className:"text-xs text-[var(--ink-muted)]",children:l(a)}),o&&e("span",{className:"text-[12px] text-[var(--ink-faint)]",children:l(o)})]}),b]})}function S({label:a}){return e(ft,{label:a})}function f({label:a,children:o,stacked:b=!1}){return b?r("div",{className:"flex flex-col gap-y-2",children:[e("span",{className:"text-xs text-[var(--sf-text-secondary)]",children:l(a)}),o]}):r("div",{className:"flex flex-wrap items-center justify-between gap-x-3 gap-y-2",children:[e("span",{className:"text-xs text-[var(--sf-text-secondary)]",children:l(a)}),e("div",{className:"flex-shrink-0",children:o})]})}const wt=[{label:"Left",value:"left"},{label:"Center",value:"center"}],St=[{label:"Left",value:"left"},{label:"Right",value:"right"}],yt=[{label:"Right",value:"left"},{label:"Centered",value:"center"},{label:"Beside logo",value:"beside"}],Ct=[{label:"Own row",value:"top"},{label:"Same row",value:"inline"}],Lt=[{label:ge.page,value:"page"},{label:ge.full,value:"full"}],Nt=[{label:"Icon",value:"icon"},{label:"Text",value:"text"}],kt=[{label:"Uppercase",value:"uppercase"},{label:"Capitalised",value:"capitalised"}],Ht=[{label:"Auto",value:"auto"},{label:"Light",value:"light"},{label:"Dark",value:"dark"}],i={logoPosition:{label:"Position",options:wt,choose:a=>a==="right"?"center":a},menuAlign:{label:"Alignment",options:yt,choose:a=>a==="center"?"center":a==="beside"?"beside":"left"},menuRow:{label:"Row",options:Ct,choose:a=>a==="inline"?"inline":"top"},searchPosition:{label:"Position",options:St,choose:a=>a},width:{label:"Width",options:Lt,choose:a=>a},navTextCase:{label:"Letters",options:kt,choose:a=>a==="capitalised"?"capitalised":"uppercase"},utilStyle:{label:"Show as",options:Nt,choose:a=>a==="text"?"text":"icon"},topTextColor:{label:"Text color at the top",options:Ht,choose:a=>We(a)}};function Tt({tabs:a,activeId:o,onSelect:b}){return e("div",{className:"es-insp-tabs",children:e(et,{variant:"underline",block:!0,labelsFit:!0,"aria-label":l("Header settings"),idPrefix:ce,value:o,onChange:b,items:a.map(_=>({id:_.id,icon:_.icon,label:l(_.label)}))})})}export{f as Field,i as HEADER_SEGMENTED,Se as HEADER_TABS,ce as HEADER_TABS_ID_PREFIX,Tt as HeaderTabStrip,oe as OFF_PLACEHOLDER,bt as default};

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

@@ -0,0 +1,5 @@
+import { type MenuLinkRange } from "../../render/lib/content/menu-row.js";
+export default function MenuLinkRangeField({ value, onChange, }: {
+    value?: unknown;
+    onChange: (value: MenuLinkRange | null) => void;
+}): import("react").JSX.Element;

package/dist/editor/components/MenuLinkRangeField.js

@@ -0,0 +1 @@
+"use client";import{jsx as o,jsxs as c}from"react/jsx-runtime";import{Inline as u,InputNumber as l}from"efficient-shell/ui";import{SettingsField as h}from"efficient-easel/panel";import{ListIcon as d}from"efficient-easel/icons";import{say as n}from"efficient-web-builder/format/lib/editor-words";import{resolveMenuLinkRange as m}from"../../render/lib/content/menu-row.js";function g({value:a,onChange:p}){const i=m(a),r=i?.from??1,s=i?.to??null,t=(e,f)=>p(m({from:e??1,to:f??void 0}));return o(h,{label:n("Show links"),icon:o(d,{}),changed:i!==null,hint:n("The links this menu shows on a computer. Empty To means to the end."),children:c(u,{gap:2,wrap:!1,children:[o(l,{size:"sm",prefix:n("From"),min:1,precision:0,value:r,"aria-label":n("Show links from"),onChange:e=>t(e,s)}),o(l,{size:"sm",prefix:n("To"),min:1,precision:0,placeholder:n("End"),value:s,"aria-label":n("Show links to"),onChange:e=>t(r,e)})]})})}export{g as default};

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

@@ -0,0 +1,7 @@
+import type { FooterMenuValue } from "../../render/components/FooterMenu.js";
+interface Props {
+    value?: FooterMenuValue | null;
+    onChange: (value: FooterMenuValue | null) => void;
+}
+export default function MenuPicker({ value, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/editor/components/MenuPicker.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,jsxs as x}from"react/jsx-runtime";import{Button as C}from"efficient-shell/ui";import{SettingsField as P}from"efficient-easel/panel";import{FieldSelect as R}from"efficient-easel/fields";import{MenuIcon as U}from"efficient-easel/icons";import{useCallback as B,useEffect as M,useState as c}from"react";import{say as i,sayCount as E}from"efficient-web-builder/format/lib/editor-words";import{getEditorToken as u}from"efficient-web-builder/render/lib/editor-auth";import{onHeaderMenusChanged as F}from"efficient-web-builder/format/lib/editor-events";import{findLinkedMenu as f,loadMenus as L,refreshMenus as I}from"../../render/lib/menu-source.js";import{menuPickerMissingWarning as T,menuPickerUnlinkedWarning as W}from"../../render/lib/content/menu-placeholder.js";function $({value:l,onChange:p}){const[t,h]=c(null),[w,y]=c(!1),a=B(e=>{h(e),y(!0)},[]);M(()=>{let e=!1;return L(u()).then(n=>{e||a(n)}).catch(()=>{e||h([])}),()=>{e=!0}},[a]),M(()=>{let e=!1;const n=F(()=>{I(u()).then(r=>{e||a(r)}).catch(()=>{})});return()=>{e=!0,n()}},[a]);const d=t===null,o=!!(l?.id||l?.handle),m=w&&o&&!f(t??[],l),N=!o&&(l?.items?.length??0)>0,S=m?"":f(t??[],l)?.id??"",g=e=>p({id:e.id,handle:e.handle,name:e.name,items:e.items.map(n=>({label:n.label,url:n.url,...n.dropdown_items?.length?{dropdown_items:n.dropdown_items.map(r=>({label:r.label,url:r.url}))}:{}}))}),_=e=>{if(!e){p(null);return}const n=(t??[]).find(r=>r.id===e);n&&g(n)},[k,b]=c(!1),j=()=>{o&&(b(!0),L(u(),!0).then(e=>{a(e);const n=f(e,l);n&&g(n)}).catch(()=>{}).finally(()=>b(!1)))};return x("div",{children:[s(P,{label:i("Menu"),icon:s(U,{}),hint:!d&&t&&t.length===0?i("Create menus in {place}, then pick one here.",{place:i("Storefront → Menus")}):void 0,children:s(R,{value:S,ariaLabel:i("Menu"),onChange:_,readOnly:d||(t?.length??0)===0,options:[{label:d?i("Loading menus…"):t&&t.length===0?i("No menus found"):i("Select a menu…"),value:""},...(t??[]).map(e=>({label:`${e.name} (${e.item_count??e.items.length})`,value:e.id}))]})}),N?s("p",{className:"mt-2 text-[12px] text-[var(--sf-warning,#b45309)]",children:W()}):null,m?s("p",{className:"mt-2 text-[12px] text-[var(--sf-warning,#b45309)]",children:T(l?.name??i("The linked menu"))}):null,o&&!m?x("div",{className:"mt-2 flex items-center justify-between gap-2",children:[s("p",{className:"text-[12px] text-fg-dim",children:E("Linked to “{name}” — {n} link. Re-pull after editing the menu:","Linked to “{name}” — {n} links. Re-pull after editing the menu:",l?.items?.length??0,{name:l?.name??""})}),s(C,{variant:"link",size:"sm",className:"shrink-0",onClick:j,disabled:k,children:k?i("Updating…"):i("Update links")})]}):null]})}export{$ as default};

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { type ViewTier } from "efficient-easel/screen/lib/content/view-tiers";
+export declare function stepPerView<T>(value: Record<ViewTier, T>, tier: ViewTier, steps: readonly T[], delta: number): Record<ViewTier, T>;
+export interface PerViewStepperFieldProps<T> {
+    label: string;
+    unit: string;
+    steps: readonly T[];
+    value: Record<ViewTier, T>;
+    onChange: (next: Record<ViewTier, T>) => void;
+    format?: (value: T) => string;
+    note?: ReactNode;
+}
+export default function PerViewStepperField<T>({ label, unit, steps, value, onChange, format, note, }: PerViewStepperFieldProps<T>): import("react").JSX.Element;

package/dist/editor/components/PerViewStepperField.js

@@ -0,0 +1 @@
+"use client";import{jsx as n,jsxs as d,Fragment as v}from"react/jsx-runtime";import{IconButton as u}from"efficient-shell/ui";import{SettingsField as x}from"efficient-easel/panel";import{ColumnsIcon as g}from"efficient-easel/icons";import{usePreviewDevice as b}from"efficient-easel/screen/components/PreviewDeviceContext";import{VIEW_TIER_LABEL as f}from"efficient-easel/screen/lib/content/view-tiers";import{say as i}from"efficient-web-builder/format/lib/editor-words";import{sayWith as F}from"../lib/say-with.js";function _(r,t,e,a){const s=e.indexOf(r[t]),l=s>=0?s:0,c=e[Math.min(Math.max(l+a,0),e.length-1)];return{...r,[t]:c}}function j({label:r,unit:t,steps:e,value:a,onChange:s,format:l=String,note:c}){const o=b(),h=e.indexOf(a[o]),m=h>=0?h:0,p=w=>s(_(a,o,e,w));return n(x,{label:i(r),icon:n(g,{}),action:d("div",{className:"sf-colstep",children:[n(u,{variant:"secondary",size:"sm","aria-label":i("Fewer {unit} on {view}",{unit:t,view:i(f[o])}),disabled:m<=0,onClick:()=>p(-1),children:"−"}),n("span",{className:"sf-colstep-value","aria-live":"polite",children:l(e[m])}),n(u,{variant:"secondary",size:"sm","aria-label":i("More {unit} on {view}",{unit:t,view:i(f[o])}),disabled:m>=e.length-1,onClick:()=>p(1),children:"+"})]}),hint:d(v,{children:[F(i("Sets the {view} view — switch views in the top bar to set each one."),{view:n("strong",{children:i(f[o])})}),c?d(v,{children:[" ",c]}):null]})})}export{j as default,_ as stepPerView};

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

@@ -0,0 +1,2 @@
+export declare const PREVIEW_HEADER_PICK_CSS: string;
+export declare function PreviewHeader(): import("react").JSX.Element;

package/dist/editor/components/PreviewHeader.js

@@ -0,0 +1,11 @@
+"use client";import{jsx as t,jsxs as h}from"react/jsx-runtime";import f from"../../render/components/Header.js";import{tk as o}from"efficient-web-builder/format/components/floating-editor/tokens";import{NEUTRAL_SITE_NAME as u}from"efficient-web-builder/format/lib/content/site-name";import{usePreviewHeader as w}from"efficient-web-builder/render/components/PreviewHeaderContext";import{say as x}from"efficient-web-builder/format/lib/editor-words";const v=`
+.sf-preview-header-pick header { cursor: pointer; }
+.sf-preview-header-pick header:hover {
+  outline: 2px solid color-mix(in srgb, ${o.accent} 45%, transparent);
+  outline-offset: -2px;
+}
+.sf-preview-header-pick[data-selected] header {
+  outline: 2px solid ${o.accent};
+  outline-offset: -2px;
+}
+`;function C(){const{settings:i,selected:s,select:a,websiteName:d,templateChrome:e,templateName:n,chromePlaceholder:c,themeSwitchShown:m}=w(),p=e?n?.trim()||x("Template"):d?.trim()||u,r=e||c;return h("div",{className:"sf-preview-header-pick sf-theme-surfaces","data-selected":s||void 0,onClick:l=>{l.stopPropagation(),a()},children:[t("style",{children:v}),t(f,{previewSettings:i??void 0,editorPreview:!0,showThemeToggle:m,wordmark:p,hideLogo:r,hideMenu:r})]})}export{v as PREVIEW_HEADER_PICK_CSS,C as PreviewHeader};

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

@@ -0,0 +1,4 @@
+export default function PreviewHeaderPrimer({ token, siteId, }: {
+    token: string;
+    siteId?: string | null;
+}): null;

package/dist/editor/components/PreviewHeaderPrimer.js

@@ -0,0 +1 @@
+"use client";import{usePreviewHeader as n}from"efficient-web-builder/render/components/PreviewHeaderContext";import{loadHeaderSettings as t,toPreviewHeaderSettings as s}from"../lib/header-settings-source.js";import{onHeaderMenusChanged as u}from"efficient-web-builder/format/lib/editor-events";import{usePrimeAndRefresh as a}from"../lib/use-prime-and-refresh.js";function d({token:e,siteId:r}){const{primeSettings:o,setSettings:m}=n();return a({token:e,deps:[r],prime:{load:()=>t(e,r),publish:i=>o(s(i))},refresh:{subscribe:u,load:()=>t(e,r,!0),publish:i=>m(s(i))}}),null}export{d as default};

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

@@ -0,0 +1,3 @@
+export default function PreviewMenusPrimer({ token }: {
+    token: string;
+}): null;

package/dist/editor/components/PreviewMenusPrimer.js

@@ -0,0 +1 @@
+"use client";import{usePreviewMenus as n}from"../../render/components/PreviewMenusContext.js";import{loadMenus as m,menuIdentity as i,refreshMenus as o}from"../../render/lib/menu-source.js";import{onHeaderMenusChanged as t}from"efficient-web-builder/format/lib/editor-events";import{usePrimeAndRefresh as f}from"../lib/use-prime-and-refresh.js";function l({token:e}){const{primeLive:s,setLive:u}=n();return f({token:e,prime:{load:()=>m(e),publish:r=>s(i(r))},refresh:{subscribe:t,load:()=>o(e),publish:r=>u(i(r))}}),null}export{l as default};

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

@@ -0,0 +1,20 @@
+import { type SearchSelectOption } from "efficient-web-builder/editor/components/SearchSelectField";
+import type { ProductSummary } from "../../render/lib/api/index.js";
+export declare const ANY_VALUE = "__all__";
+export declare const NO_PRODUCT = "";
+export type PreviewLevelKey = "brand" | "kind" | "product";
+export interface PreviewLevel {
+    key: PreviewLevelKey;
+    label: string;
+    options: SearchSelectOption[];
+}
+export declare function previewableRows(rows: ProductSummary[] | null): ProductSummary[];
+export declare function previewPickerLevels({ rows, brand, kind, slug, loading, currency, }: {
+    rows: ProductSummary[] | null;
+    brand: string;
+    kind: string;
+    slug: string;
+    loading?: boolean;
+    currency?: string;
+}): PreviewLevel[];
+export default function PreviewProductPicker(): import("react").JSX.Element;

package/dist/editor/components/PreviewProductPicker.js

@@ -0,0 +1 @@
+"use client";import{jsx as k,Fragment as x}from"react/jsx-runtime";import{useEffect as v,useMemo as w,useState as _}from"react";import{SettingsField as A}from"efficient-easel/panel";import{FieldSelect as B}from"efficient-easel/fields";import{iconOf as C,noGlyph as I}from"efficient-web-builder/editor/lib/puck/controls";import{formatPrice as K}from"../../render/lib/commerce.js";import{resolveWheelPrice as N}from"../../render/lib/wheels/price-display.js";import{loadUnifiedProductCatalog as O}from"../../render/components/useProductCatalog.js";import{useCurrency as R}from"../../render/components/CurrencyContext.js";import F from"efficient-web-builder/editor/components/SearchSelectField";import{PREVIEWABLE_KINDS as G}from"../../render/components/pdp-dynamic/useSampleProduct.js";import{PLP_ALL_TYPES_LABEL as D,PLP_KINDS as V,PLP_KIND_LABELS as S}from"../../render/lib/catalog/plp-item.js";import{currentPreviewPickKey as W,useCurrentPreviewPick as T,writePreviewPick as U}from"../../render/lib/puck/preview-pick.js";import{say as r}from"efficient-web-builder/format/lib/editor-words";const p="__all__",L="";function Y(o){return(o??[]).filter(n=>G.includes(n.kind))}const j=I("one row per level from one list — the gutter would repeat one mark down the column and say nothing; the group heading carries it once GG, 2026-09-23"),g=o=>typeof o.brand=="string"?o.brand.trim():"";function E(o,n){if(o.kind!=="alloy-wheel"||!n)return;const l=o,i=N(l.prices?.[n],l.msrpPrices?.[n]);return i.priced?K(i.unit,n):void 0}function H({rows:o,brand:n,kind:l,slug:i,loading:d=!1,currency:m=""}){const f=o??[],s=[...new Set(f.map(g).filter(Boolean))].sort((t,y)=>t.localeCompare(y)),u=n===p?f:f.filter(t=>g(t)===n),c=V.filter(t=>u.some(y=>y.kind===t)),b=l===p?u:u.filter(t=>t.kind===l),h=new Set(b.map(t=>t.kind)).size>1,e=b.map(t=>({value:t.slug,label:t.name,...h?{group:r(S[t.kind])}:{},thumb:t.coverImage??null,...E(t,m)?{meta:E(t,m)}:{}})),a=i&&!b.some(t=>t.slug===i)?[{value:i,label:d?i:r("{slug} (not in this list)",{slug:i})}]:[],P=[];return s.length>1&&P.push({key:"brand",label:r("Brand"),options:[{value:p,label:r("All brands")},...s.map(t=>({value:t,label:t}))]}),c.length>1&&P.push({key:"kind",label:r("Product type"),options:[{value:p,label:r(D)},...c.map(t=>({value:t,label:r(S[t])}))]}),P.push({key:"product",label:r("Product"),options:[{value:L,label:d?r("Loading…"):r("Generic placeholder")},...a,...e]}),P}function M(){const[o,n]=_(null),[l,i]=_(p),[d,m]=_(p),f=W(),s=T()??L;v(()=>{let e=!1;return O().then(a=>{e||n(a)}).catch(()=>{e||n([])}),()=>{e=!0}},[]);const{currency:u}=R(),c=w(()=>Y(o),[o]);v(()=>{const e=c.find(a=>a.slug===s);e&&g(e)&&i(g(e))},[s,c]);const b=w(()=>H({rows:c,brand:l,kind:d,slug:s,loading:o===null,currency:u}),[c,l,d,s,o,u]),h={brand:e=>{i(e),m(p)},kind:m,product:e=>U(f,e)};return k(x,{children:b.map(e=>k(A,{label:e.label,icon:C(j),hint:e.key==="product"?r(z):void 0,children:e.key==="product"?k(F,{bare:!0,label:e.label,options:e.options,fallback:L,value:s,onChange:h.product,placeholder:r("Search your catalog…")}):k(B,{value:e.key==="brand"?l:d,ariaLabel:e.label,onChange:a=>h[e.key](a),options:e.options.map(a=>({label:a.label,value:a.value}))})},e.key))})}const z="Only for looking at while you design. Shoppers always see the product they opened.";export{p as ANY_VALUE,L as NO_PRODUCT,M as default,H as previewPickerLevels,Y as previewableRows};

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

@@ -0,0 +1,19 @@
+import type { ProductHeroSourceValue } from "../../render/lib/content/source-values.js";
+import { type ProductSummary } from "../../render/lib/api/index.js";
+import { type SearchSelectOption } from "efficient-web-builder/editor/components/SearchSelectField";
+export declare function heroSnapshot(row: ProductSummary): ProductHeroSourceValue;
+export declare function heroResolve(rows: ProductSummary[], value: ProductHeroSourceValue): ProductSummary | undefined;
+export declare function heroCategoryLabel(rows: ProductSummary[] | null): string;
+export declare function heroPickerOptions({ rows, category, value, loading, currency, }: {
+    rows: ProductSummary[] | null;
+    category: string;
+    value: ProductHeroSourceValue | null | undefined;
+    loading: boolean;
+    currency: string;
+}): SearchSelectOption[];
+interface Props {
+    value?: ProductHeroSourceValue | null;
+    onChange: (value: ProductHeroSourceValue | null) => void;
+}
+export default function ProductHeroSource({ value, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/editor/components/ProductHeroSource.js

@@ -0,0 +1 @@
+"use client";import{jsx as c,jsxs as $}from"react/jsx-runtime";import{SettingsField as z}from"efficient-easel/panel";import{FieldSelect as O}from"efficient-easel/fields";import{CategoryIcon as _}from"efficient-easel/icons";import{useEffect as w,useMemo as C,useState as K}from"react";import{useEaselHost as N}from"efficient-easel/screen/lib/host";import{formatPrice as W}from"../../render/lib/commerce.js";import{resolveWheelPrice as G}from"../../render/lib/wheels/price-display.js";import{isRenderableFinish as M}from"../../render/lib/wheels/renderable-finishes.js";import{loadUnifiedProductCatalog as U}from"../../render/components/useProductCatalog.js";import{loadStorefrontCategories as V}from"./useStorefrontCategories.js";import{ALL_CATEGORY as Y,filterByCategory as q,useCategoryFilter as D}from"./useCategoryFilter.js";import{useSnapshotSource as J}from"efficient-web-builder/editor/components/useSnapshotSource";import{useCurrency as Q}from"../../render/components/CurrencyContext.js";import X from"efficient-web-builder/editor/components/SearchSelectField";import Z from"efficient-web-builder/editor/components/SourceStatus";import{say as n,sayCount as v}from"efficient-web-builder/format/lib/editor-words";const S=e=>e.kind==="tyre"?"tyre":"alloy-wheel",m=e=>`${e.kind}:${e.slug}`;function P(e){return e.kind==="tyre"?{kind:"tyre",slug:e.slug,name:e.name,description:e.description??"",eyebrow:e.brand??"",image:e.coverImage??null,finishes:[],prices:e.prices,href:`/tyres/${e.slug}`}:{kind:"wheel",slug:e.slug,name:e.name,description:e.description??"",eyebrow:e.process,image:e.coverImage??null,finishes:e.finishes.filter(M).map(r=>({name:r.name,color:r.color,src:r.src})),prices:e.prices,href:`/wheels/${e.slug}`}}function x(e,r){const s=S(r);return e.find(t=>t.kind===s&&t.slug===r.slug)}function L(e){return R(e)?n("Category — wheels only"):n("Category")}const R=e=>!!(e?.some(r=>r.kind==="tyre")&&e.some(r=>r.kind==="alloy-wheel")),ee=e=>v("{n} size","{n} sizes",e);function te({rows:e,category:r,value:s,loading:t,currency:l}){const a=e??[],d=a.filter(o=>o.kind==="alloy-wheel"),p=a.filter(o=>o.kind==="tyre"),h=d.length>0&&p.length>0,k={value:"",label:t?n("Loading…"):n("Pick a product…")},g=s&&!(e!==null&&x(e,s))?[{value:m({kind:S(s),slug:s.slug}),label:t?s.name:n("{name} (unavailable)",{name:s.name})}]:[],u=q(d,r).map(o=>{const f=G(o.prices[l],o.msrpPrices?.[l]);return{value:m({kind:"alloy-wheel",slug:o.slug}),label:o.name,...h?{group:n("Wheels")}:{},thumb:o.coverImage??null,...f.priced?{meta:W(f.unit,l)}:{}}}),b=p.map(o=>({value:m(o),label:o.name,...h?{group:n("Tyres")}:{},thumb:o.coverImage??null,meta:ee(o.variantCount)}));return[k,...g,...u,...b]}function oe({value:e,onChange:r}){const s=N(),{rows:t,loading:l,refreshing:a,errored:d,refresh:p}=J({load:U,resolve:x,snapshot:P,value:e,onChange:r}),[h,k]=K(null);w(()=>{let i=!1;return V().then(y=>{i||k(y)}),()=>{i=!0}},[]);const{currency:g}=Q(),u=C(()=>t&&e?x(t,e)??null:null,[t,e]),b=C(()=>(t??[]).filter(i=>i.kind==="alloy-wheel"),[t]),{category:o,setCategory:f,categoryNames:T}=D(b,h,u?.kind==="alloy-wheel"?u:null),A=!!e?.slug&&t!==null&&!u,E=C(()=>te({rows:t,category:o,value:e,loading:l,currency:g}),[t,o,e,l,g]),F=i=>{if(!i){r(null);return}const y=(t??[]).find(H=>m(H)===i);y&&r(P(y))},I=()=>{e?.slug&&s.send("storefront-editor:open-product",{slug:e.slug,name:e.name})},j=d?"error":a?"loading":"idle",B=d?n("Couldn’t reach the product catalog."):a?n("Syncing from the catalog…"):A?n("Linked to “{name}” — no longer in the catalog.",{name:e?.name??""}):n("Linked to “{name}” · title, description, category, price & image follow the product.",{name:e?.name??""});return $("div",{children:[c(X,{label:"Product",options:E,fallback:"",value:e?m({kind:S(e),slug:e.slug}):"",onChange:F,placeholder:"Search products…"}),c(z,{label:L(t),icon:c(_,{}),children:c(O,{value:o,ariaLabel:L(t),onChange:f,readOnly:l,options:[{label:R(t)?n("All wheel categories"):n("All products"),value:Y},...T.map(i=>({label:i,value:i}))]})}),e?.slug?c(Z,{status:j,statusText:B,onRefresh:p,busy:a,edit:{label:n("Edit product ✎"),onClick:I},hint:n("The whole hero comes from the product record — title, price, pictures, options and Add to Cart. Edit the product in the Products database and this hero updates to match.")}):c("p",{className:"es-field-hint sf-hint-keep",style:{marginTop:7},children:n("This hero always shows a real product. Pick one to fill the title, price, pictures, options and Add to Cart from the catalog.")})]})}export{oe as default,L as heroCategoryLabel,te as heroPickerOptions,x as heroResolve,P as heroSnapshot};

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

@@ -0,0 +1,6 @@
+interface Props {
+    value?: string;
+    onChange: (value: string) => void;
+}
+export default function ProductPicker({ value, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/editor/components/ProductPicker.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{SettingsField as u}from"efficient-easel/panel";import{FieldSelect as m}from"efficient-easel/fields";import{BlockProductIcon as L,CategoryIcon as N}from"efficient-easel/icons";import{useEffect as S,useMemo as v,useState as f}from"react";import{loadProductCatalog as x}from"../../render/components/useProductCatalog.js";import{loadStorefrontCategories as j}from"./useStorefrontCategories.js";import{ALL_CATEGORY as T,useCategoryFilter as A}from"./useCategoryFilter.js";import{useGridSourceLock as F}from"./useGridSourceLock.js";import{say as o}from"efficient-web-builder/format/lib/editor-words";import{sayWith as O}from"../lib/say-with.js";function W({value:r,onChange:g}){const[l,h]=f(null),[p,y]=f(null);S(()=>{let e=!1;return x().then(i=>{e||h(i)}),j().then(i=>{e||y(i)}),()=>{e=!0}},[]);const b=v(()=>l&&r?l.find(e=>e.slug===r)??null:null,[l,r]),{category:C,setCategory:k,categoryNames:P,filtered:n}=A(l,p,b),a=l===null,c=F(),s=c!==null;return d("div",{children:[s&&t("p",{className:"es-field-hint sf-hint-keep",style:{marginBottom:8},children:O(o("Disabled because this grid’s {source} is set to “{name}”. The grid fills itself from that source automatically. To pick wheels here, set {source} back to “None”.",{name:c??""}),{source:t("strong",{children:o("Products source")})})}),d("div",{className:s?"sf-locked":void 0,children:[t(u,{label:o("Category"),icon:t(N,{}),children:t(m,{value:C,ariaLabel:o("Category"),onChange:k,readOnly:a||s,options:[{label:o("All products"),value:T},...P.map(e=>({label:e,value:e}))]})}),t(u,{label:o("Product"),icon:t(L,{}),children:t(m,{value:r??"",ariaLabel:o("Product"),onChange:g,readOnly:a||s,options:[{label:a?o("Loading…"):n.length===0?o("No products in this category"):o("Select a product…"),value:""},...n.map(e=>({label:e.name,value:e.slug}))]})})]})]})}export{W as default};

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

@@ -0,0 +1 @@
+export default function SocialLinksDoor(): import("react").JSX.Element;

package/dist/editor/components/SocialLinksDoor.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as o,jsxs as n}from"react/jsx-runtime";import{Button as t}from"efficient-shell/ui";import{usePreviewSocial as r}from"efficient-web-builder/render/components/PreviewSocialContext";import{say as i}from"efficient-web-builder/format/lib/editor-words";import{GroupLabel as l}from"efficient-web-builder/editor/lib/puck/controls";function a(){const{openPanel:s}=r();return n(o,{children:[e(l,{label:"Social links"}),e("p",{className:"es-field-hint sf-hint-keep",children:i("The links are typed once for the whole website, in Site settings.")}),e(t,{variant:"link",size:"sm",onClick:s,children:i("Edit social links →")})]})}export{a as default};

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

@@ -0,0 +1,7 @@
+import type { SpecTableSourceValue } from "../../render/lib/wheels/spec-sheet.js";
+interface Props {
+    value?: SpecTableSourceValue | null;
+    onChange: (value: SpecTableSourceValue | null) => void;
+}
+export default function SpecTableSource({ value, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/editor/components/SpecTableSource.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,jsxs as F}from"react/jsx-runtime";import{SettingsField as p}from"efficient-easel/panel";import{FieldSelect as f}from"efficient-easel/fields";import{BlockProductIcon as N,CategoryIcon as A}from"efficient-easel/icons";import{useEffect as B,useMemo as O,useState as _}from"react";import{resolveMedia as H}from"efficient-web-builder/render/lib/media";import{useEaselHost as I}from"efficient-easel/screen/lib/host";import{loadProductCatalog as M}from"../../render/components/useProductCatalog.js";import{loadStorefrontCategories as R}from"./useStorefrontCategories.js";import{ALL_CATEGORY as Y,useCategoryFilter as z}from"./useCategoryFilter.js";import{useSnapshotSource as G}from"efficient-web-builder/editor/components/useSnapshotSource";import W from"efficient-web-builder/editor/components/SourceStatus";import{say as o}from"efficient-web-builder/format/lib/editor-words";function g(e){return{slug:e.slug,name:e.name,process:e.process,spokes:e.spokes,mesh:e.mesh,spec:e.spec,finishes:e.finishes.map(r=>({name:r.name,image:H(r.angles?.[0]??r.src)??null}))}}function q({value:e,onChange:r}){const h=I(),{rows:n,loading:l,refreshing:i,errored:u,refresh:b}=G({load:M,resolve:(t,a)=>t.find(c=>c.slug===a.slug),snapshot:g,value:e,onChange:r}),[y,S]=_(null);B(()=>{let t=!1;return R().then(a=>{t||S(a)}),()=>{t=!0}},[]);const m=O(()=>n&&e?.slug?n.find(t=>t.slug===e.slug)??null:null,[n,e?.slug]),{category:k,setCategory:C,categoryNames:L,filtered:x}=z(n,y,m),d=!!e?.slug&&n!==null&&!m,P=t=>{if(!t){r(null);return}const a=(n??[]).find(c=>c.slug===t);a&&r(g(a))},E=()=>{e?.slug&&h.send("storefront-editor:open-product",{slug:e.slug,name:e.name})},T=!!e?.spec,j=u?"error":i?"loading":"idle",w=u?o("Couldn’t reach the product catalog."):i?o("Syncing from the catalog…"):d?o("Linked to “{name}” — no longer in the catalog.",{name:e?.name??""}):T?o("Linked to “{name}” · every spec row follows the product.",{name:e?.name??""}):o("Linked to “{name}” — this product has no spec data yet.",{name:e?.name??""});return F("div",{children:[s(p,{label:o("Category"),icon:s(A,{}),children:s(f,{value:k,ariaLabel:o("Category"),onChange:C,readOnly:l,options:[{label:o("All products"),value:Y},...L.map(t=>({label:t,value:t}))]})}),s(p,{label:o("Product"),icon:s(N,{}),children:s(f,{value:e?.slug??"",ariaLabel:o("Product"),onChange:P,readOnly:l,options:[{label:l?o("Loading…"):o("None (write the rows yourself)"),value:""},...d?[{label:o("{name} (unavailable)",{name:e.name}),value:e.slug}]:[],...x.map(t=>({label:t.name,value:t.slug}))]})}),e?.slug?s(W,{status:j,statusText:w,onRefresh:b,busy:i,edit:{label:o("Edit product ✎"),onClick:E},hint:o("Every spec row (lug count, bolt pattern, offset, center bore, load rating, bump profile…) comes from the product record — edit its part numbers in the Products database and this table updates to match. You still choose which finish to picture and an optional size.")}):s("p",{className:"es-field-hint sf-hint-keep",style:{marginTop:7},children:o("Pick a product to fill the spec table from the catalog, or keep “None” to write the rows yourself.")})]})}export{q as default};

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import type { EaselSurface as EditorSurface } from "efficient-easel/screen/lib/host-chrome";
+export default function StorefrontEditorFurniture({ surface, children }: {
+    surface: EditorSurface;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/editor/components/StorefrontEditorFurniture.js

@@ -0,0 +1 @@
+"use client";import{jsx as i,jsxs as o}from"react/jsx-runtime";import c from"./EditorCurrencyProvider.js";import a from"./PreviewHeaderPrimer.js";import{PreviewMenusProvider as m}from"../../render/components/PreviewMenusContext.js";import u from"./PreviewMenusPrimer.js";import{useScreenDocument as f}from"efficient-easel/screen/components/ScreenDocumentContext";function S({surface:d,children:n}){const{token:e,siteId:s,capabilities:r}=f();if(d==="section")return o(m,{children:[e?i(u,{token:e}):null,n]});const t=e??"";return o(c,{token:t,siteId:s,enabled:r.hasSiteSettings,children:[r.hasSiteSettings&&i(a,{token:t,siteId:s}),o(m,{children:[r.hasSiteSettings&&i(u,{token:t}),n]})]})}export{S as default};

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

@@ -0,0 +1,2 @@
+import type { HostPanelProps } from "efficient-easel/screen/lib/host-chrome";
+export default function StorefrontHeaderPanel({ placeholderMode, tokenRef, siteId, websiteName, onOpenWebsiteSettings, onAuthExpired, }: HostPanelProps): import("react").JSX.Element;

package/dist/editor/components/StorefrontHeaderPanel.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as a,jsxs as l}from"react/jsx-runtime";import{ShowWhen as d}from"efficient-shell/ui";import m,{OFF_PLACEHOLDER as p}from"./HeaderSettingsPanel.js";import u from"./SwitchToBoxHeader.js";function f({placeholderMode:t,tokenRef:n,siteId:r,websiteName:i,onOpenWebsiteSettings:o,onAuthExpired:s}){return l(a,{children:[e(d,{rule:p,values:null,context:{placeholderMode:t},children:e("div",{className:"px-4 pt-3 pb-1",children:e(u,{})})}),e(m,{inline:!0,placeholderMode:t,tokenRef:n,siteId:r,websiteName:i??void 0,onOpenWebsiteSettings:o,onAuthExpired:s})]})}export{f as default};

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

@@ -0,0 +1,5 @@
+import type { EaselChrome as EditorChrome } from "efficient-easel/screen/lib/host-chrome";
+import { type LinkFieldUsage } from "../../render/lib/links/link-rules.js";
+export declare const STOREFRONT_PRODUCTS: NonNullable<EditorChrome["products"]>;
+export declare function loadFieldUsage(siteId?: string): Promise<LinkFieldUsage[]>;
+export declare const STOREFRONT_LINK_FILTERS: NonNullable<EditorChrome["linkFilters"]>;

package/dist/editor/components/StorefrontLinkRows.js

@@ -0,0 +1 @@
+"use client";import{loadProductCatalog as s,loadUnifiedProductCatalog as i}from"../../render/components/useProductCatalog.js";import{storefrontAdmin as l}from"../../render/lib/api/index.js";import{getEditorToken as c}from"efficient-web-builder/render/lib/editor-auth";import{fieldUsageFromAdminRows as m,storefrontLinkFilters as u,wheelPath as f}from"../../render/lib/links/link-rules.js";const R={list:async()=>(await s()).map(e=>({slug:e.slug,name:e.name,href:f(e.slug)}))},a=new Map;function d(e){const t=e??"",o=c(),r=a.get(t);if(r&&!(r.token===null&&o!==null))return r.promise;const n=o&&e?l.listFieldUsage(o,e).then(m).catch(()=>[]):Promise.resolve([]);return a.set(t,{promise:n,token:o}),n}const T={load:async e=>{const[t,o]=await Promise.all([i().catch(()=>[]),d(e??void 0)]);return u({catalogue:t,fieldUsage:o,offersCommerce:!0})}};export{T as STOREFRONT_LINK_FILTERS,R as STOREFRONT_PRODUCTS,d as loadFieldUsage};

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

@@ -0,0 +1,2 @@
+import type { EaselChrome as EditorChrome } from "efficient-easel/screen/lib/host-chrome";
+export declare const STOREFRONT_PAGE_ROWS: NonNullable<EditorChrome["pageRows"]>;