efficient-web-builder 17.0.0 → 17.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/components/ContactLocations.js +6 -6
- package/dist/components/Footprint.js +7 -7
- package/dist/components/HeroSection.js +1 -1
- package/dist/components/HeroSingle.js +1 -1
- package/dist/components/HeroSlide.js +1 -1
- package/dist/components/storefront-editor.css +26 -2
- package/dist/lib/maps-loader.d.ts +5 -0
- package/dist/lib/maps-loader.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 17.0.1 - 2026-10-16
|
|
4
|
+
|
|
5
|
+
**On a phone, the hero's words are as wide as the hero, so a long word is fitted instead of cut** (card [FIX] Hero Grows On Phone, GG 2026-10-16). A patch.
|
|
6
|
+
|
|
7
|
+
**On a phone, the slideshow hero grows to fit its tallest slide's words** (card [FIX] Hero Grows On Phone, GG 2026-10-16).
|
|
8
|
+
|
|
9
|
+
**Pointing at words draws one line** (card [FIX] One Hover Outline; Lewis 2026-10-16 on the Hartes homepage hero, via GG).
|
|
10
|
+
|
|
11
|
+
**A map Google will not draw falls back instead of showing "Loading map…" for ever** (card [FIX] Hartes Footprint Map Stuck Loading, GG 2026-10-16).
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- **HeroSingle with a set height, below 720px:** since 16.0.2 the word layer is a flex item in the hero's column, and it keeps `mx-auto`, which in a flex column switches off stretching. So the layer took its content's width: on hartesmetal.com/dealers "Become" at 106px (361px) made it 449px wide inside a 375px hero. The heading's box was as wide as the word, so `lib/fit-words` saw it fit and never shrank it, and the word was cut at the hero's edge. The layer now takes `w-full` on a phone. Measured on the live page with this rule: the layer is 375px, and fit-words draws the heading at 84.2px (375x667) and 88.6px (390x844), every word whole. 720px and up, and a hero with no set height, are unchanged.
|
|
16
|
+
- Guard: `scripts/test-hero-grows-on-phone.tsx` §5.
|
|
17
|
+
- **The slideshow (HeroSection + HeroSlide), below 720px, with or without a set height:** the slides were the hero's fixed height and their words are bottom-aligned, so words taller than the hero rose off the top of the page and under the site's header. hartesmetal.com.au home, an unset slideshow (680px at 375x667): "Tough metal, where it is needed." began 100px above the top of the page, and two of its three slides did the same; at 390x844 it began at 42px, under the 116px header. Now on a phone the slideshow's height is a minimum (the set phone height, or the built-in `max(100vh, 680px)`, the pixels `h-screen min-h-[680px]` drew), the track and the slides size to their words, and every slide is as tall as the tallest one (the track is a flex row and its slides stretch). Each slide's word layer is in the flow, fills the slide and is the slide's width. Measured on the live page with these rules: hero 680px → 932px, the three headings start at 152, 286 and 179px, the page does not scroll sideways. 720px and up keeps its classes byte for byte.
|
|
18
|
+
- In the editor's phone view a slide shorter than the tallest one draws its picture only as tall as its own words (the editor puts a wrapper between the track and the slide). The live page is not affected.
|
|
19
|
+
- Guard: `scripts/test-slide-hero-grows-on-phone.tsx`.
|
|
20
|
+
- **Hovering a part's words draws ONE line, on the words.** Pointing at a heading, a text or a button label drew two: the words' own line and a wider box round the block, which the engine added in blueprint 5.5 after the 2026-09-02 "innermost line only" rule was written. Off the words (a block's padding, a Box's space) the block's box is still the one line.
|
|
21
|
+
- **The words' line is the engine's hover colour** (the accent at 60%), so a pointed-at word and a pointed-at block look the same. It was a pale tint (`#dbeafe`) that read as a second, lighter box and was almost invisible on a light page.
|
|
22
|
+
- Guard: `scripts/test-part-outline-hairline.tsx` §3 resolves the engine's sheet together with the canvas region of `storefront-editor.css` over the engine's outline layer: one line on the words, one on the block off them, and one hover colour. Its matcher now reads a class off the fake element. All 3 new checks failed on main.
|
|
23
|
+
- **Footprint and ContactLocations:** the map waited for its first tiles with no way to fail, so a failed script load, a key Google refuses (`gm_authFailure`), or tiles that never arrive left "Loading map…" up for good. The new `watchMapLoad` (`lib/maps-loader`) is the one rule both use. A refused key, or no tiles within 15s while the page is visible, counts as failed; a background tab waits. When the map fails, or has no key or no coordinates, the live Footprint drops the map frame and keeps the office list, and the live Contact map keeps its name and Get Directions card. "Add a Google Maps API key" now shows in the editor only. Changing the key or the style tries the map again. Measured 2026-10-16: the live Hartes US and AU maps load (1440 and 390), and with the SDK made to fail, the old code stayed on "Loading map…".
|
|
24
|
+
- Guard: `scripts/test-map-load-failure.ts`.
|
|
25
|
+
|
|
3
26
|
## 17.0.0 - 2026-10-16
|
|
4
27
|
|
|
5
28
|
Two builds in one release (GG cuts one 17.0.0, as easel cut one 10.0.0). A major: the efficient-easel peer range narrows to `^10.1.0` (10.0.0 for the text panel and the Border and Padding parts, 10.1.0 for `onChangeMany`, which the four-side Padding row writes with) and the efficient-shell range to `^7.47.0` (7.44.0 for the Border row and the No list glyph, 7.47.0 for the Style list that shows every style whole, scrolls with no cut row, opens small in a small field and is solid: shell#507, Lewis's review 2026-10-16).
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as i,Fragment as
|
|
1
|
+
"use client";import{jsx as t,jsxs as i,Fragment as W}from"react/jsx-runtime";import{sectionRunsFullWidth as oe}from"../lib/content/section-width.js";import{SiteImage as re}from"../lib/site-runtime.js";import{markOverlayPortal as ie}from"../lib/puck/overlay-portal.js";import{useEffect as P,useRef as K,useState as T}from"react";import{stripMarkup as se}from"../lib/markup.js";import ce from"./EditorialSectionHead.js";import le from"./SectionEyebrow.js";import{scrollBehavior as V}from"./useReducedMotion.js";import{renderGold as X,renderHeadline as de}from"./goldPhrases.js";import{CONTACT_LOCATIONS_CARDS_PLACEHOLDER as pe,CONTACT_LOCATIONS_DEFAULTS as R,parseLocationTileShape as ue,splitLegacyRegion as me}from"../lib/content/contact.js";import{galleryCardRatioClass as ge}from"../lib/content/gallery-card-layout.js";import{MAP_PALETTE as fe,mapBackgroundFor as B,mapMarkerColorFor as Y,mapPaletteFor as he,mapStylesFor as J,watchMapTheme as be}from"../lib/map-styles.js";import{hasMapCoords as xe,loadGoogleMaps as ve,watchMapLoad as ye}from"../lib/maps-loader.js";import{resolveMapId as ke,resolveMapsKey as we,useSiteMapId as Ne,useSiteMapsKey as Se}from"../lib/maps-config.js";import{bucketByGroup as Ce,groupColsClass as Z}from"../lib/locations-grid.js";import{encodeLocationPartId as Q,usePreviewLocationPart as Ae}from"./PreviewLocationPartContext.js";import{LocationGroupHeader as Ie}from"./LocationGroupHeader.js";import{tk as ee}from"./floating-editor/tokens.js";const Le=`
|
|
2
2
|
.studio-map .gmap-canvas img[src*="google"] {
|
|
3
3
|
filter: grayscale(1) brightness(0.55) contrast(0.9);
|
|
4
4
|
opacity: 0.7;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
.contact-loc[data-active="true"] > div:first-child { background-color: var(--accent); }
|
|
31
31
|
.contact-loc[data-active="true"] > div:first-child,
|
|
32
32
|
.contact-loc[data-active="true"] > div:first-child * { color: var(--bg) !important; }
|
|
33
|
-
`,
|
|
33
|
+
`,Me=`
|
|
34
34
|
.loc-part-pick { cursor: pointer; position: relative; }
|
|
35
35
|
/* ⚠️ AN OVERLAY, NOT AN outline, AND THAT IS THE WHOLE FIX.
|
|
36
36
|
An inset outline is painted in the element's own box decoration and a
|
|
@@ -61,13 +61,13 @@
|
|
|
61
61
|
painted nothing — the exact failure this whole change is fixing, reproduced
|
|
62
62
|
one layer down. The [data-selected] rule below, which names a plain colour,
|
|
63
63
|
painted blue in the same breath. 73 is 45% of 255. */
|
|
64
|
-
box-shadow: inset 0 0 0 2px ${
|
|
64
|
+
box-shadow: inset 0 0 0 2px ${ee.accent}73;
|
|
65
65
|
}
|
|
66
66
|
.loc-part-pick[data-selected]::after {
|
|
67
|
-
box-shadow: inset 0 0 0 2px ${
|
|
67
|
+
box-shadow: inset 0 0 0 2px ${ee.accent};
|
|
68
68
|
}
|
|
69
69
|
@media (prefers-reduced-motion: reduce) {
|
|
70
70
|
.loc-part-pick::after { transition: none; }
|
|
71
71
|
}
|
|
72
|
-
`;function
|
|
73
|
-
`);return t(G,{children:a.map((b,l)=>i("span",{children:[b,l<a.length-1?t("br",{}):null]},l))})}return t(G,{children:p})}function Se(){return t("div",{className:"absolute inset-0 flex items-center justify-center",style:{background:"repeating-linear-gradient(45deg, rgba(201,164,97,.05) 0 1px, transparent 1px 14px), linear-gradient(135deg, var(--site-surface-2), var(--site-surface))"},children:i("svg",{width:"34",height:"34",viewBox:"0 0 24 24",fill:"none",stroke:"var(--fg-dim)",strokeWidth:1.4,"aria-hidden":"true",style:{opacity:.4},children:[t("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1.5"}),t("circle",{cx:"8.5",cy:"9.5",r:"1.6"}),t("path",{d:"M21 16l-5-5-4 4-2-2-7 7"})]})})}function Ae({sectionNumber:p=z.sectionNumber,heading:a=z.heading,tagline:b=z.tagline,galleryKicker:l=z.galleryKicker,galleryHint:f=z.galleryHint,locations:k=ie,apiKey:C="",mapId:I="",mapTheme:n="auto",imageShape:x,editing:m,nodeId:s,...v}){const[R,L]=T(!1);j(()=>{const e=()=>L(document.documentElement.getAttribute("data-theme")==="light");e();const r=new MutationObserver(e);return r.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]}),()=>r.disconnect()},[]);const[$,M]=T(null),N=e=>`loc-${e}`,B=e=>{M(e),typeof document<"u"&&document.getElementById(e)?.scrollIntoView({behavior:K(),block:"start"}),!m&&typeof window<"u"&&window.history?.replaceState&&window.history.replaceState(null,"",`#${e}`)};j(()=>{if(typeof window>"u")return;const e=window.location.hash.replace(/^#/,"");!e||!document.getElementById(e)||(M(e),requestAnimationFrame(()=>{document.getElementById(e)?.scrollIntoView({behavior:K(),block:"start"})}))},[]);const D=le(se(x)),{select:d,selectedLocationPartId:u}=ye(),F=(e,r)=>s?Y(s,e,r):"",O=(e,r)=>!!(m&&s&&u===F(e,r)),A=(e,r)=>m&&s?`${e}:${r}`:void 0,E=U(null);j(()=>{if(!m||!s)return;const e=E.current;if(!e)return;const g=Array.from(e.querySelectorAll("[data-loc-pick]")).map(o=>{const h=te(o),w=y=>{const c=o.getAttribute("data-loc-pick")??"",[_,H]=c.split(":");H!=="image"&&H!=="map"||(y.stopPropagation(),y.preventDefault(),d(Y(s,Number(_),H)))};return o.addEventListener("click",w,{capture:!0}),()=>{h?.(),o.removeEventListener("click",w,{capture:!0})}});return()=>g.forEach(o=>o())},[m,s,d,k.length]);const S=ve(k,e=>String(e.group??""),e=>String(e.groupName??""));return i("section",{id:"studios",ref:E,className:Q(v)?"scroll-mt-24 border-b border-line px-[var(--sf-site-gutter,40px)] py-[100px] max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[1100px]:py-[60px]":"mx-auto max-w-[var(--sf-site-width,1600px)] scroll-mt-24 border-b border-line px-[var(--sf-site-gutter,40px)] py-[100px] max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[1100px]:py-[60px]",style:R?void 0:{background:"var(--section-bg)"},children:[t("style",{dangerouslySetInnerHTML:{__html:we}}),m&&s&&t("style",{dangerouslySetInnerHTML:{__html:Ne}}),(p||a||b)&&t(ne,{num:p,title:a?re(a,!0):void 0,desc:b?q(b):void 0,spaceBelow:"mb-10"}),k.length>0&&i("div",{className:"mb-12",children:[(l||f)&&i("div",{className:"mb-5 flex items-baseline justify-between gap-6 border-b border-line pb-4",children:[l&&t(oe,{text:l,size:12}),f&&t("span",{className:"font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.22em] text-fg-dim",children:q(f)})]}),t("div",{className:"flex flex-col gap-6",children:S.map((e,r)=>{const g=e.items.length===1;return i("div",{children:[e.key&&t("div",{className:"mb-2.5 font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.3em] text-accent",children:e.key}),t("div",{className:["grid gap-[2px] border border-line bg-line",X(e.items.length),e.items.length>1?"max-[700px]:grid-cols-2":""].join(" "),children:e.items.map(({item:o,index:h})=>{const w=String(o?.name??""),y=String(o?.photo??""),c=N(h);return i("a",{href:`#${c}`,"aria-label":`Jump to ${w||"location"} map`,onClick:_=>{_.preventDefault(),B(c)},"data-loc-pick":A(h,"image"),className:["group relative block",D,"overflow-hidden bg-bg outline-none focus-visible:ring-2 focus-visible:ring-accent",g?"max-h-[440px]":"",...A(h,"image")?["loc-part-pick"]:[]].join(" "),"data-selected":O(h,"image")?"":void 0,children:[y?t(ee,{src:y,alt:ae(w||"Location"),fill:!0,sizes:g?"100vw":"(max-width: 700px) 50vw, 33vw",className:"object-cover grayscale transition-[filter] duration-500 group-hover:grayscale-0"}):t(Se,{}),t("div",{className:"pointer-events-none absolute inset-0",style:{background:"linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.85) 100%)"}}),t("figcaption",{className:"absolute inset-x-0 bottom-0 z-[1] flex items-center justify-start gap-2 px-3 py-3 font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.22em] text-overlay-fg/85",children:t("span",{children:w})})]},h)})})]},e.key?`g:${e.key}`:`ungrouped:${r}`)})})]}),S.map((e,r)=>i("div",{className:r===0?"":"mt-10",children:[e.key&&t(ke,{groupKey:e.key,name:e.name,count:e.items.length}),t("div",{className:["grid gap-[2px] border border-line bg-line",X(e.items.length),e.items.length>1?"max-[1100px]:grid-cols-1":""].join(" "),children:e.items.map(({item:g,index:o})=>t(Ce,{id:N(o),card:g,active:$===N(o),apiKey:C,mapId:I,mapTheme:n,mapPick:A(o,"map"),mapSelected:O(o,"map")},o))})]},e.key?`g:${e.key}`:`ungrouped:${r}`)),k.length>0&&i("p",{className:"mt-8 text-right font-mono text-[10px] uppercase tracking-[0.25em] text-fg-dim/50",children:["Location coordinates ©"," ",t("a",{href:"https://www.openstreetmap.org/copyright",target:"_blank",rel:"noopener noreferrer",className:"hover:text-accent",children:"OpenStreetMap contributors"})]})]})}function Ce({id:p,card:a,active:b,apiKey:l,mapId:f,mapTheme:k,mapPick:C,mapSelected:I}){const n=a.phone?`tel:${String(a.phone).replace(/[^+\d]/g,"")}`:void 0,x=ce(a.region),m=String(a.state??"").trim()||x.state,s=String(a.country??"").trim()||x.country,v=[m,s].filter(Boolean).join(" · ");return i("article",{id:p,"data-active":b?"true":void 0,className:"contact-loc grid min-h-[840px] scroll-mt-[120px] grid-rows-[auto_1fr] bg-bg max-[1100px]:min-h-0",children:[i("div",{className:"flex min-h-[280px] flex-col gap-3 border-b border-line px-7 py-7",children:[i("div",{className:"flex items-start justify-between gap-3.5",children:[i("div",{children:[a.name&&t("div",{className:"font-heading3 text-[length:var(--size-headingSmall,30px)] font-medium uppercase leading-none tracking-[-0.02em]",children:a.name}),v&&t("div",{className:"mt-1.5 font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.24em] text-accent",children:v})]}),a.timezone&&t("span",{className:"whitespace-nowrap border border-line px-2.5 py-1.5 font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.22em] text-fg-dim",children:a.timezone})]}),a.address!=null&&a.address!==""&&t("div",{className:"mt-1.5 font-display text-[length:var(--size-body,14px)] leading-[1.5] text-fg-dim",children:t(Z,{value:a.address})}),a.phone&&t("div",{children:t("a",{href:n,className:"font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.18em] text-fg hover:text-accent",children:a.phone})}),a.hours!=null&&a.hours!==""&&t("div",{className:"font-mono text-[length:var(--size-label,12px)] uppercase leading-[1.7] tracking-[0.18em] text-fg-dim",children:t(Z,{value:a.hours})})]}),t(Le,{name:String(a.name??""),state:m,country:s,lat:Number(a.lat),lng:Number(a.lng),mapsUrl:String(a.mapsUrl??""),apiKey:l,mapId:f,mapTheme:k,pick:C,selected:I})]})}const Ie=13;function Le({name:p,state:a,country:b,lat:l,lng:f,mapsUrl:k,apiKey:C,mapId:I,mapTheme:n="auto",pick:x,selected:m}){const s=he(C,xe()),v=fe(I,be()),R=ue(l,f),L=!!s&&R,$=a,M=U(null),N=U(null),[B,D]=T(!1),d=n!=="auto",u=pe(n),[F,O]=T(n==="auto"?de.dark.background:P(n));j(()=>{O(P(n))},[n]),j(()=>{if(!L)return;const S=M.current;if(!S)return;let e=null,r=null,g=!1,o=null;const h=c=>({path:c.SymbolPath.CIRCLE,scale:7,fillColor:W(n),fillOpacity:1,strokeColor:W(n),strokeOpacity:.25,strokeWeight:10}),w=async()=>{try{const c=await ge(s);if(g||!N.current)return;e=new c.Map(N.current,{center:{lat:l,lng:f},zoom:Ie,disableDefaultUI:!0,gestureHandling:"cooperative",keyboardShortcuts:!1,clickableIcons:!1,backgroundColor:P(n),...v?{mapId:v}:{styles:V(n)}}),r=new c.Marker({map:e,position:{lat:l,lng:f},icon:h(c)}),e.addListener("tilesloaded",()=>{g||D(!0)}),n==="auto"&&!v&&(o=me(()=>{g||!e||(e.setOptions({styles:V(n),backgroundColor:P(n)}),r?.setIcon(h(c)),O(P(n)))}))}catch(c){console.error("[StudioMap] Maps SDK failed:",c)}},y=new IntersectionObserver(c=>{for(const _ of c)if(_.isIntersecting){y.disconnect(),w();break}},{rootMargin:"200px"});return y.observe(S),()=>{g=!0,y.disconnect(),o?.()}},[L,s,l,f,v,n]);const A=k||(p?`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent([p,a,b].filter(Boolean).join(" "))}`:""),E=i("div",{className:["absolute left-5 top-5 z-10 flex max-w-[64%] flex-col gap-1.5 border p-3.5",d?"":"border-line bg-bg shadow-[0_8px_24px_rgba(0,0,0,.4)]"].join(" "),style:d?{backgroundColor:u.info.bg,borderColor:`color-mix(in oklab, ${u.info.fgDim} 35%, transparent)`,boxShadow:u.info.shadow}:void 0,children:[i("span",{className:"font-display text-[length:var(--size-body,14px)] font-medium tracking-[-0.01em]",style:d?{color:u.info.fg}:void 0,children:[p||"Location",$?`, ${$}`:""]}),A&&t("a",{href:A,target:"_blank",rel:"noopener noreferrer",className:["font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.24em] transition-colors",d?"":"text-accent hover:text-fg"].join(" "),style:d?{color:u.info.accent}:void 0,children:"Get Directions ↗"})]});if(!L){const S=d?`linear-gradient(135deg, ${u.background}, ${u.info.bg})`:"linear-gradient(135deg, var(--site-surface-2), var(--site-surface))";return i("div",{"data-loc-pick":x,className:["relative overflow-hidden max-[1100px]:aspect-square",d?"":"bg-bg",...x?["loc-part-pick"]:[]].join(" "),"data-selected":m?"":void 0,style:{...d?{backgroundColor:u.background}:null,backgroundImage:`repeating-linear-gradient(45deg, rgba(201,164,97,.04) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(201,164,97,.04) 0 1px, transparent 1px 14px), ${S}`},children:[E,t("div",{className:["absolute inset-0 flex items-center justify-center px-6 text-center font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.3em]",d?"":"text-fg-dim/40"].join(" "),style:d?{color:u.info.fgDim,opacity:.4}:void 0,children:s?"Add latitude & longitude":"Add a Google Maps API key"})]})}return i("div",{ref:M,"data-loc-pick":x,className:["studio-map relative overflow-hidden max-[1100px]:aspect-square",...x?["loc-part-pick"]:[]].join(" "),"data-selected":m?"":void 0,style:{backgroundColor:F},children:[t("div",{ref:N,className:"gmap-canvas absolute inset-0"}),t("div",{className:["pointer-events-none absolute inset-0 flex items-center justify-center font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.3em] text-fg-dim transition-opacity duration-500",B?"opacity-0":"opacity-100"].join(" "),children:"Loading map…"}),E]})}export{Ae as default};
|
|
72
|
+
`;function te({value:p}){if(typeof p=="string"){const a=p.split(`
|
|
73
|
+
`);return t(W,{children:a.map((y,s)=>i("span",{children:[y,s<a.length-1?t("br",{}):null]},s))})}return t(W,{children:p})}function Oe(){return t("div",{className:"absolute inset-0 flex items-center justify-center",style:{background:"repeating-linear-gradient(45deg, rgba(201,164,97,.05) 0 1px, transparent 1px 14px), linear-gradient(135deg, var(--site-surface-2), var(--site-surface))"},children:i("svg",{width:"34",height:"34",viewBox:"0 0 24 24",fill:"none",stroke:"var(--fg-dim)",strokeWidth:1.4,"aria-hidden":"true",style:{opacity:.4},children:[t("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1.5"}),t("circle",{cx:"8.5",cy:"9.5",r:"1.6"}),t("path",{d:"M21 16l-5-5-4 4-2-2-7 7"})]})})}function Ee({sectionNumber:p=R.sectionNumber,heading:a=R.heading,tagline:y=R.tagline,galleryKicker:s=R.galleryKicker,galleryHint:f=R.galleryHint,locations:w=pe,apiKey:O="",mapId:E="",mapTheme:n="auto",imageShape:N,editing:c,nodeId:l,...b}){const[x,F]=T(!1);P(()=>{const e=()=>F(document.documentElement.getAttribute("data-theme")==="light");e();const r=new MutationObserver(e);return r.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]}),()=>r.disconnect()},[]);const[_,$]=T(null),A=e=>`loc-${e}`,j=e=>{$(e),typeof document<"u"&&document.getElementById(e)?.scrollIntoView({behavior:V(),block:"start"}),!c&&typeof window<"u"&&window.history?.replaceState&&window.history.replaceState(null,"",`#${e}`)};P(()=>{if(typeof window>"u")return;const e=window.location.hash.replace(/^#/,"");!e||!document.getElementById(e)||($(e),requestAnimationFrame(()=>{document.getElementById(e)?.scrollIntoView({behavior:V(),block:"start"})}))},[]);const H=ge(ue(N)),{select:D,selectedLocationPartId:I}=Ae(),U=(e,r)=>l?Q(l,e,r):"",z=(e,r)=>!!(c&&l&&I===U(e,r)),L=(e,r)=>c&&l?`${e}:${r}`:void 0,d=K(null);P(()=>{if(!c||!l)return;const e=d.current;if(!e)return;const k=Array.from(e.querySelectorAll("[data-loc-pick]")).map(o=>{const m=ie(o),g=S=>{const h=o.getAttribute("data-loc-pick")??"",[M,C]=h.split(":");C!=="image"&&C!=="map"||(S.stopPropagation(),S.preventDefault(),D(Q(l,Number(M),C)))};return o.addEventListener("click",g,{capture:!0}),()=>{m?.(),o.removeEventListener("click",g,{capture:!0})}});return()=>k.forEach(o=>o())},[c,l,D,w.length]);const u=Ce(w,e=>String(e.group??""),e=>String(e.groupName??""));return i("section",{id:"studios",ref:d,className:oe(b)?"scroll-mt-24 border-b border-line px-[var(--sf-site-gutter,40px)] py-[100px] max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[1100px]:py-[60px]":"mx-auto max-w-[var(--sf-site-width,1600px)] scroll-mt-24 border-b border-line px-[var(--sf-site-gutter,40px)] py-[100px] max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[1100px]:py-[60px]",style:x?void 0:{background:"var(--section-bg)"},children:[t("style",{dangerouslySetInnerHTML:{__html:Le}}),c&&l&&t("style",{dangerouslySetInnerHTML:{__html:Me}}),(p||a||y)&&t(ce,{num:p,title:a?de(a,!0):void 0,desc:y?X(y):void 0,spaceBelow:"mb-10"}),w.length>0&&i("div",{className:"mb-12",children:[(s||f)&&i("div",{className:"mb-5 flex items-baseline justify-between gap-6 border-b border-line pb-4",children:[s&&t(le,{text:s,size:12}),f&&t("span",{className:"font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.22em] text-fg-dim",children:X(f)})]}),t("div",{className:"flex flex-col gap-6",children:u.map((e,r)=>{const k=e.items.length===1;return i("div",{children:[e.key&&t("div",{className:"mb-2.5 font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.3em] text-accent",children:e.key}),t("div",{className:["grid gap-[2px] border border-line bg-line",Z(e.items.length),e.items.length>1?"max-[700px]:grid-cols-2":""].join(" "),children:e.items.map(({item:o,index:m})=>{const g=String(o?.name??""),S=String(o?.photo??""),h=A(m);return i("a",{href:`#${h}`,"aria-label":`Jump to ${g||"location"} map`,onClick:M=>{M.preventDefault(),j(h)},"data-loc-pick":L(m,"image"),className:["group relative block",H,"overflow-hidden bg-bg outline-none focus-visible:ring-2 focus-visible:ring-accent",k?"max-h-[440px]":"",...L(m,"image")?["loc-part-pick"]:[]].join(" "),"data-selected":z(m,"image")?"":void 0,children:[S?t(re,{src:S,alt:se(g||"Location"),fill:!0,sizes:k?"100vw":"(max-width: 700px) 50vw, 33vw",className:"object-cover grayscale transition-[filter] duration-500 group-hover:grayscale-0"}):t(Oe,{}),t("div",{className:"pointer-events-none absolute inset-0",style:{background:"linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.85) 100%)"}}),t("figcaption",{className:"absolute inset-x-0 bottom-0 z-[1] flex items-center justify-start gap-2 px-3 py-3 font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.22em] text-overlay-fg/85",children:t("span",{children:g})})]},m)})})]},e.key?`g:${e.key}`:`ungrouped:${r}`)})})]}),u.map((e,r)=>i("div",{className:r===0?"":"mt-10",children:[e.key&&t(Ie,{groupKey:e.key,name:e.name,count:e.items.length}),t("div",{className:["grid gap-[2px] border border-line bg-line",Z(e.items.length),e.items.length>1?"max-[1100px]:grid-cols-1":""].join(" "),children:e.items.map(({item:k,index:o})=>t(_e,{id:A(o),card:k,active:_===A(o),apiKey:O,mapId:E,mapTheme:n,mapPick:L(o,"map"),mapSelected:z(o,"map"),editing:c},o))})]},e.key?`g:${e.key}`:`ungrouped:${r}`)),w.length>0&&i("p",{className:"mt-8 text-right font-mono text-[10px] uppercase tracking-[0.25em] text-fg-dim/50",children:["Location coordinates ©"," ",t("a",{href:"https://www.openstreetmap.org/copyright",target:"_blank",rel:"noopener noreferrer",className:"hover:text-accent",children:"OpenStreetMap contributors"})]})]})}function _e({id:p,card:a,active:y,apiKey:s,mapId:f,mapTheme:w,mapPick:O,mapSelected:E,editing:n}){const N=a.phone?`tel:${String(a.phone).replace(/[^+\d]/g,"")}`:void 0,c=me(a.region),l=String(a.state??"").trim()||c.state,b=String(a.country??"").trim()||c.country,x=[l,b].filter(Boolean).join(" · ");return i("article",{id:p,"data-active":y?"true":void 0,className:"contact-loc grid min-h-[840px] scroll-mt-[120px] grid-rows-[auto_1fr] bg-bg max-[1100px]:min-h-0",children:[i("div",{className:"flex min-h-[280px] flex-col gap-3 border-b border-line px-7 py-7",children:[i("div",{className:"flex items-start justify-between gap-3.5",children:[i("div",{children:[a.name&&t("div",{className:"font-heading3 text-[length:var(--size-headingSmall,30px)] font-medium uppercase leading-none tracking-[-0.02em]",children:a.name}),x&&t("div",{className:"mt-1.5 font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.24em] text-accent",children:x})]}),a.timezone&&t("span",{className:"whitespace-nowrap border border-line px-2.5 py-1.5 font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.22em] text-fg-dim",children:a.timezone})]}),a.address!=null&&a.address!==""&&t("div",{className:"mt-1.5 font-display text-[length:var(--size-body,14px)] leading-[1.5] text-fg-dim",children:t(te,{value:a.address})}),a.phone&&t("div",{children:t("a",{href:N,className:"font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.18em] text-fg hover:text-accent",children:a.phone})}),a.hours!=null&&a.hours!==""&&t("div",{className:"font-mono text-[length:var(--size-label,12px)] uppercase leading-[1.7] tracking-[0.18em] text-fg-dim",children:t(te,{value:a.hours})})]}),t(je,{name:String(a.name??""),state:l,country:b,lat:Number(a.lat),lng:Number(a.lng),mapsUrl:String(a.mapsUrl??""),apiKey:s,mapId:f,mapTheme:w,pick:O,selected:E,editing:n})]})}const $e=13;function je({name:p,state:a,country:y,lat:s,lng:f,mapsUrl:w,apiKey:O,mapId:E,mapTheme:n="auto",pick:N,selected:c,editing:l}){const b=we(O,Se()),x=ke(E,Ne()),F=xe(s,f),_=!!b&&F,$=a,A=K(null),j=K(null),[H,D]=T(!1),I=`${b}|${s}|${f}|${x}|${n}`,[U,z]=T(null),L=U===I,d=n!=="auto",u=he(n),[e,r]=T(n==="auto"?fe.dark.background:B(n));P(()=>{r(B(n))},[n]),P(()=>{if(!_)return;const m=A.current;if(!m)return;let g=null,S=null,h=!1,M=null,C=null;const q=v=>({path:v.SymbolPath.CIRCLE,scale:7,fillColor:Y(n),fillOpacity:1,strokeColor:Y(n),strokeOpacity:.25,strokeWeight:10}),ae=async()=>{C=ye(()=>{h||z(I)});try{const v=await ve(b);if(h||!j.current)return;g=new v.Map(j.current,{center:{lat:s,lng:f},zoom:$e,disableDefaultUI:!0,gestureHandling:"cooperative",keyboardShortcuts:!1,clickableIcons:!1,backgroundColor:B(n),...x?{mapId:x}:{styles:J(n)}}),S=new v.Marker({map:g,position:{lat:s,lng:f},icon:q(v)}),g.addListener("tilesloaded",()=>{C?.ready(),h||D(!0)}),n==="auto"&&!x&&(M=be(()=>{h||!g||(g.setOptions({styles:J(n),backgroundColor:B(n)}),S?.setIcon(q(v)),r(B(n)))}))}catch(v){console.error("[StudioMap] Maps SDK failed:",v),C?.stop(),h||z(I)}},G=new IntersectionObserver(v=>{for(const ne of v)if(ne.isIntersecting){G.disconnect(),ae();break}},{rootMargin:"200px"});return G.observe(m),()=>{h=!0,G.disconnect(),C?.stop(),M?.()}},[_,b,s,f,x,n,I]);const k=w||(p?`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent([p,a,y].filter(Boolean).join(" "))}`:""),o=i("div",{className:["absolute left-5 top-5 z-10 flex max-w-[64%] flex-col gap-1.5 border p-3.5",d?"":"border-line bg-bg shadow-[0_8px_24px_rgba(0,0,0,.4)]"].join(" "),style:d?{backgroundColor:u.info.bg,borderColor:`color-mix(in oklab, ${u.info.fgDim} 35%, transparent)`,boxShadow:u.info.shadow}:void 0,children:[i("span",{className:"font-display text-[length:var(--size-body,14px)] font-medium tracking-[-0.01em]",style:d?{color:u.info.fg}:void 0,children:[p||"Location",$?`, ${$}`:""]}),k&&t("a",{href:k,target:"_blank",rel:"noopener noreferrer",className:["font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.24em] transition-colors",d?"":"text-accent hover:text-fg"].join(" "),style:d?{color:u.info.accent}:void 0,children:"Get Directions ↗"})]});if(!_||L){const m=d?`linear-gradient(135deg, ${u.background}, ${u.info.bg})`:"linear-gradient(135deg, var(--site-surface-2), var(--site-surface))";return i("div",{"data-loc-pick":N,className:["relative overflow-hidden max-[1100px]:aspect-square",d?"":"bg-bg",...N?["loc-part-pick"]:[]].join(" "),"data-selected":c?"":void 0,style:{...d?{backgroundColor:u.background}:null,backgroundImage:`repeating-linear-gradient(45deg, rgba(201,164,97,.04) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(201,164,97,.04) 0 1px, transparent 1px 14px), ${m}`},children:[o,l&&t("div",{className:["absolute inset-0 flex items-center justify-center px-6 text-center font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.3em]",d?"":"text-fg-dim/40"].join(" "),style:d?{color:u.info.fgDim,opacity:.4}:void 0,children:b?L?"The map could not load. Check the key":"Add latitude & longitude":"Add a Google Maps API key"})]})}return i("div",{ref:A,"data-loc-pick":N,className:["studio-map relative overflow-hidden max-[1100px]:aspect-square",...N?["loc-part-pick"]:[]].join(" "),"data-selected":c?"":void 0,style:{backgroundColor:e},children:[t("div",{ref:j,className:"gmap-canvas absolute inset-0"}),t("div",{className:["pointer-events-none absolute inset-0 flex items-center justify-center font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.3em] text-fg-dim transition-opacity duration-500",H?"opacity-0":"opacity-100"].join(" "),children:"Loading map…"}),o]})}export{Ee as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as n,Fragment as it,jsxs as $}from"react/jsx-runtime";import{useEffect as A,useRef as m,useState as R}from"react";import{MAP_PALETTE as Y,mapBackgroundFor as _,mapMarkerColorFor as T,mapPaletteFor as q,mapStylesFor as tt,watchMapTheme as ct}from"../lib/map-styles.js";import{hasMapCoords as et,loadGoogleMaps as pt,watchMapLoad as ut}from"../lib/maps-loader.js";import{resolveMapId as dt,resolveMapsKey as ft,useSiteMapId as mt,useSiteMapsKey as gt}from"../lib/maps-config.js";import{bucketByGroup as xt,groupColsClass as bt}from"../lib/locations-grid.js";import yt from"./EditorialSectionHead.js";import{LocationGroupHeader as vt}from"./LocationGroupHeader.js";import{renderGold as ht,renderHeadline as kt}from"./goldPhrases.js";import wt from"./PartStyledText.js";import{say as Mt}from"../lib/editor-words.js";const $t=11,Ct=6,D=60;function K(t){return t.replace(/[&<>"']/g,a=>a==="&"?"&":a==="<"?"<":a===">"?">":a==='"'?""":"'")}function nt(t,a,u){return{path:a.SymbolPath.CIRCLE,scale:t.hq?$t:Ct,fillColor:T(u),fillOpacity:1,strokeColor:T(u),strokeOpacity:t.hq?.3:.25,strokeWeight:t.hq?14:9}}function rt(t,a,u,e,l,C){l.forEach(r=>r.setMap(null)),l.clear();const N=new a.LatLngBounds;return e.forEach((r,f)=>{if(!et(r.lat,r.lng))return;N.extend({lat:r.lat,lng:r.lng});const g=new a.Marker({map:t,position:{lat:r.lat,lng:r.lng},icon:nt(r,a,u),title:r.city,zIndex:r.hq?100:10,cursor:"pointer"});g.addListener("click",()=>C(f)),l.set(f,g)}),N}function Nt(t){return`
|
|
2
2
|
.footprint-map .gm-style { font-family: var(--font-role-label), var(--font-mono-fallback) !important; }
|
|
3
3
|
.footprint-map .gm-style .gm-style-iw-c {
|
|
4
4
|
background: ${t.bg} !important;
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
.footprint-map .gm-style button[aria-label="Close"] > span {
|
|
17
17
|
background-color: ${t.closeX} !important;
|
|
18
18
|
}
|
|
19
|
-
`}function
|
|
20
|
-
<div style="padding:10px 14px 12px;min-width:180px;color:${
|
|
19
|
+
`}function ot({pal:t}){const a=t?t.marker:"var(--accent)",u=t?t.info.bg:"var(--site-surface)",e=t?t.background:"var(--bg)",l=t?`color-mix(in oklab, ${t.info.fgDim} 12%, transparent)`:"color-mix(in oklab, var(--fg) 3%, transparent)";return $(it,{children:[n("div",{className:"pointer-events-none absolute inset-0",style:{backgroundImage:`radial-gradient(60% 70% at 50% 50%, color-mix(in oklab, ${a} 8%, ${u}) 0%, ${u} 60%, ${e} 100%)`}}),n("div",{className:"pointer-events-none absolute inset-0",style:{backgroundImage:`repeating-linear-gradient(0deg, transparent 0 22px, ${l} 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, ${l} 22px 23px)`}})]})}function It({sectionNumber:t="",heading:a="",tagline:u="",offices:e=[],apiKey:l="",mapId:C="",mapTheme:N="auto",padTop:r,padBottom:f,editing:g,omitHead:k=!1}){const I=typeof r=="number"?r:120,L=typeof f=="number"?f:120,[E,x]=R(null),z=e.length===0&&!t&&!a&&!u;if(A(()=>{x(o=>o!==null&&o>=e.length?null:o)},[e]),z&&!g)return null;const w=xt(e,o=>String(o.group??""),()=>"");return n("section",{className:"relative z-[2] bg-bg",children:$("div",{className:"mx-auto max-w-[var(--sf-site-width,1600px)] border-b border-line px-[var(--sf-site-gutter,40px)] max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[800px]:px-[min(20px,var(--sf-site-gutter,40px))]",style:{paddingTop:I,paddingBottom:L},children:[!k&&(t||a||u)&&n(yt,{num:t,title:a?kt(a):void 0,desc:u||void 0,spaceBelow:"mb-12"}),n(Et,{offices:e,apiKey:l,mapId:C,mapTheme:N,activeIndex:E,onSelect:x,editing:g}),e.length>0&&n("div",{className:"mt-12 flex flex-col gap-8",children:w.map((o,M)=>$("div",{children:[o.key&&n(vt,{groupKey:o.key,count:o.items.length}),n("div",{className:["grid gap-[2px] bg-bg",bt(o.items.length),o.items.length>2?"max-[1100px]:grid-cols-2 max-[700px]:grid-cols-1":o.items.length===2?"max-[700px]:grid-cols-1":""].join(" "),children:o.items.map(({item:i,index:y})=>{const S=E===y;return $("button",{type:"button",onClick:()=>x(y),"aria-pressed":S,className:["flex flex-col gap-1.5 bg-bg px-6 py-5 text-left transition-colors outline outline-1 -outline-offset-1",S?"outline-accent":"outline-transparent hover:outline-line"].join(" "),children:[$("span",{className:"flex items-center gap-2.5 font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.28em]",children:[i.hq&&n("span",{className:"border border-accent bg-accent px-1.5 py-0.5 text-[length:var(--size-body,10px)] text-bg",children:"HQ"}),i.role&&n("span",{className:"text-accent",children:i.role})]}),i.city&&n("span",{className:"font-display text-[length:var(--size-body,18px)] font-medium leading-[1.2] tracking-[-0.01em] text-fg",children:n(wt,{value:i.city,children:i.city})}),i.country&&n("span",{className:"font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.2em] text-fg-dim",children:i.country}),i.address&&n("span",{className:"font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.2em] text-fg-dim",children:ht(i.address)})]},y)})})]},o.key?`g:${o.key}`:`ungrouped:${M}`))}),e.length===0&&g&&n("p",{className:"mt-8 font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.24em] text-fg-dim",children:Mt("Add an office in the inspector")})]})})}function Et({offices:t,apiKey:a,mapId:u,mapTheme:e,activeIndex:l,onSelect:C,editing:N}){const r=ft(a,gt()),f=dt(u,mt()),g=!!r&&t.some(s=>et(s.lat,s.lng)),k=e!=="auto",I=q(e),L=m(null),E=m(null),x=m(null),z=m(null),w=m(new Map),o=m(null),M=m(null),i=m(null),y=m(C);y.current=C;const S=m(t);S.current=t;const W=m(l);W.current=l;const[j,O]=R(!1),F=`${r}|${f}|${e}`,[at,Z]=R(null),Q=at===F,[B,U]=R(Y.dark),[lt,X]=R(Y.dark.background);return A(()=>{U(q(e)),X(_(e))},[e]),A(()=>{if(!g)return;const s=L.current;if(!s)return;let c=!1,p=null,v=null;const P=async()=>{v=ut(()=>{c||Z(F)});try{const d=await pt(r);if(c||!E.current)return;const h=new d.Map(E.current,{center:{lat:25,lng:0},zoom:2,minZoom:1,maxZoom:5,disableDefaultUI:!0,gestureHandling:"cooperative",keyboardShortcuts:!1,clickableIcons:!1,backgroundColor:_(e),...f?{mapId:f}:{styles:tt(e)}});x.current=h,z.current=d;const G=rt(h,d,e,S.current,w.current,H=>y.current(H));M.current=G,G.isEmpty()||h.fitBounds(G,D);const J=new d.InfoWindow({disableAutoPan:!0});J.addListener("closeclick",()=>y.current(null)),o.current=J,h.addListener("click",()=>y.current(null)),h.addListener("tilesloaded",()=>{v?.ready(),c||O(!0)}),e==="auto"&&!f&&(p=ct(()=>{c||!x.current||(x.current.setOptions({styles:tt(e),backgroundColor:_(e)}),w.current.forEach((H,st)=>{const V=S.current[st];V&&H.setIcon(nt(V,d,e))}),U(q(e)),X(_(e)))}))}catch(d){console.error("[FootprintMap] Maps SDK failed:",d),v?.stop(),c||Z(F)}},b=new IntersectionObserver(d=>{for(const h of d)if(h.isIntersecting){b.disconnect(),P();break}},{rootMargin:"200px"});return b.observe(s),()=>{c=!0,b.disconnect(),v?.stop(),p?.(),o.current?.close(),o.current=null,x.current=null,z.current=null,w.current.forEach(d=>d.setMap(null)),w.current.clear(),M.current=null,O(!1)}},[g,r,f,e,F]),A(()=>{const s=x.current,c=z.current;if(!s||!c)return;const p=rt(s,c,e,t,w.current,v=>y.current(v));M.current=p,W.current===null&&!p.isEmpty()&&s.fitBounds(p,D)},[t,e]),A(()=>{const s=x.current,c=o.current;if(!s||!c)return;if(l===null){c.close(),i.current!==null&&M.current&&!M.current.isEmpty()&&s.fitBounds(M.current,D),i.current=null;return}const p=t[l],v=w.current.get(l);if(!p||!v){c.close(),i.current=l;return}s.panTo({lat:p.lat,lng:p.lng});const P=s.getZoom();P!=null&&P<4&&s.setZoom(4);const b=B.info,d=p.hq?`<span style="background:${b.accent};color:${b.bg};padding:1px 6px;font-size:10px;letter-spacing:0.18em;">HQ</span>`:"",h=p.role?`<span style="color:${b.accent};">${K(p.role)}</span>`:"";c.setContent(`
|
|
20
|
+
<div style="padding:10px 14px 12px;min-width:180px;color:${b.fg};">
|
|
21
21
|
<div style="display:flex;align-items:center;gap:8px;font-family:var(--font-role-label),var(--font-mono-fallback);font-size:11px;letter-spacing:0.28em;text-transform:uppercase;">
|
|
22
|
-
${
|
|
22
|
+
${d}${h}
|
|
23
23
|
</div>
|
|
24
|
-
<div style="font-family:var(--font-display),Georgia,serif;font-size:20px;font-weight:500;line-height:1.2;margin-top:6px;color:${
|
|
25
|
-
<div style="font-family:var(--font-role-label),var(--font-mono-fallback);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:${
|
|
24
|
+
<div style="font-family:var(--font-display),Georgia,serif;font-size:20px;font-weight:500;line-height:1.2;margin-top:6px;color:${b.fg};">${K(p.city)}</div>
|
|
25
|
+
<div style="font-family:var(--font-role-label),var(--font-mono-fallback);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:${b.fgDim};margin-top:4px;">${K(p.country)}</div>
|
|
26
26
|
</div>
|
|
27
|
-
`),
|
|
27
|
+
`),c.open({map:s,anchor:v}),i.current=l},[l,j,B,t]),!g||Q?N?$("div",{className:["relative aspect-[16/9] w-full overflow-hidden border border-line max-[720px]:aspect-[4/5]",k?"":"bg-bg"].join(" "),style:k?{backgroundColor:I.background}:void 0,children:[n(ot,{pal:k?I:void 0}),n("div",{className:["absolute inset-0 flex items-center justify-center px-6 text-center font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.24em]",k?"":"text-fg-dim"].join(" "),style:k?{color:I.info.fgDim}:void 0,children:r?Q?"The map could not load. Check the Google Maps key":"Add office coordinates to plot the map":"Add a Google Maps API key to show the map"})]}):null:$("div",{ref:L,className:"sf-card footprint-map relative aspect-[16/9] w-full overflow-hidden border border-line max-[720px]:aspect-[4/5]",style:{backgroundColor:lt},children:[n("style",{dangerouslySetInnerHTML:{__html:Nt(B.info)}}),n(ot,{pal:k?I:void 0}),n("div",{ref:E,className:"gmap-canvas absolute inset-0 transition-opacity duration-500",style:{opacity:j?1:0}}),n("div",{className:["pointer-events-none absolute inset-0 flex items-center justify-center font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.24em] text-fg-dim transition-opacity duration-500",j?"opacity-0":"opacity-100"].join(" "),children:"Loading map…"})]})}export{It as default};
|
|
@@ -8,4 +8,4 @@
|
|
|
8
8
|
outline: 2px solid ${Z.accent};
|
|
9
9
|
outline-offset: -2px;
|
|
10
10
|
}
|
|
11
|
-
`,Ye="Play video",Fe="Hold video",Ke="flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-overlay-chrome/25 bg-overlay-scrim/80 px-[11px] font-mono text-[11px] leading-none tracking-[0.05em] text-overlay-fg",Ue=()=>te("item"),Je=["","","","","",""],re=new Map;function Qe(O,w){const h=O?.ownerDocument?.defaultView;if(h)return h.addEventListener(I,w),()=>h.removeEventListener(I,w)}function We({slides:O,alignment:w,textureOpacity:h,showTexture:oe,textureColor:ne,phoneUpDown:ce,phoneSideways:se,autoplay:M,autoplayInterval:T,showTicker:ae,tickerItems:ie,heightDesktop:P,heightMobile:D,showPicker:le,pickerShape:ue,pickerPlacement:
|
|
11
|
+
`,Ye="Play video",Fe="Hold video",Ke="flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-overlay-chrome/25 bg-overlay-scrim/80 px-[11px] font-mono text-[11px] leading-none tracking-[0.05em] text-overlay-fg",Ue=()=>te("item"),Je=["","","","","",""],re=new Map;function Qe(O,w){const h=O?.ownerDocument?.defaultView;if(h)return h.addEventListener(I,w),()=>h.removeEventListener(I,w)}function We({slides:O,alignment:w,textureOpacity:h,showTexture:oe,textureColor:ne,phoneUpDown:ce,phoneSideways:se,autoplay:M,autoplayInterval:T,showTicker:ae,tickerItems:ie,heightDesktop:P,heightMobile:D,showPicker:le,pickerShape:ue,pickerPlacement:me,showArrows:de,arrowsShape:pe,arrowsPlacement:fe,editing:n}){const $=Ie(P,D),he=$?"min-h-[var(--sf-hero-h-m)] max-[720px]:flex max-[720px]:flex-col min-[720px]:min-h-0 min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px] max-[720px]:h-auto max-[720px]:min-h-[max(100vh,680px)] max-[720px]:flex max-[720px]:flex-col",xe=$?{"--sf-hero-h-d":ee(P),"--sf-hero-h-m":ee(D)}:void 0,H=(ie??Je.map(e=>({text:e}))).map(e=>e?.text?.trim()?e.text:n?Ue():"").filter(Boolean),V=ae!==!1,u=i(null),z=i(null),X=i(null),q=i(null),G=i(null),j=Oe(),y=i(j),[E,ve]=b([]),[ke,B]=b(0),x=i(0),[Y,F]=b(!1),[g,be]=b(!1),[K,we]=b(null),L=Ne(),{selectedHeroId:ye,select:U}=Ce(),S=p(()=>u.current?.querySelector(".hero-track")??null,[]),l=p((e,t=!1)=>{B(e),x.current=e,re.set(y.current,e);const r=u.current?.querySelector(".hero-track");if(r)if(t){const o=r.style.transition;r.style.transition="none",r.style.transform=`translateX(-${Math.max(0,e)*100}%)`,r.offsetHeight,r.style.transition=o}else r.style.transform=`translateX(-${Math.max(0,e)*100}%)`},[]);f(()=>{const e=u.current,t=e?.getAttribute("data-puck-component")||e?.closest("[data-puck-component]")?.getAttribute("data-puck-component")||j;y.current=t,we(t);const r=re.get(t);typeof r=="number"&&(B(r),x.current=r)},[]),f(()=>{const e=S();if(!e)return;const t=()=>{ve(o=>Pe(o,e.querySelectorAll("[data-slide-name]")))};t();const r=new MutationObserver(t);return r.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-slide-name","data-slide-process","data-slide-media"]}),()=>{r.disconnect()}},[S]),f(()=>{if(!n)return;const e=t=>{const r=t.detail;if(!r||typeof r.index!="number")return;const o=u.current,a=o?.getAttribute("data-puck-component")||o?.closest("[data-puck-component]")?.getAttribute("data-puck-component")||y.current;r.id&&r.id!==a||l(r.index,!0)};return Qe(u.current,e)},[n,l]);const c=E.length,m=Math.min(Math.max(ke,0),Math.max(0,c-1)),A=$e({shown:le,count:c}),J=Ve({shown:de,count:c}),Q=Ge({editing:n,shown:m,slides:E}),Ee=je({editing:n,playing:g,controlShown:Q}),_=Xe({count:c,editing:n}),d=i(null),v=i(null),ge=p(e=>{if(d.current=null,v.current=null,!_||e.touches.length!==1)return;const t=e.touches[0];d.current={x:t.clientX,y:t.clientY},v.current={x:t.clientX,y:t.clientY}},[_]),Se=p(e=>{if(!d.current)return;if(e.touches.length!==1){d.current=null;return}const t=e.touches[0];v.current={x:t.clientX,y:t.clientY}},[]),_e=p(()=>{const e=d.current,t=v.current;if(d.current=null,v.current=null,!_||!e||!t)return;const r=qe(t.x-e.x,t.y-e.y,x.current,c);r!==x.current&&l(r)},[_,c,l]);f(()=>{if(n||!M||Y||L||c<=1)return;const t=Math.max(1,typeof T=="number"?T:6)*1e3,r=window.setTimeout(()=>l((m+1)%c),t);return()=>window.clearTimeout(r)},[n,M,T,Y,L,c,m,l]),f(()=>{const e=[z.current,X.current,q.current].filter(Boolean),t=e.map(o=>N(o)),r=o=>{const a=o.target,k=a.closest("[data-hero-nav]"),W=k??a.closest("[data-idx]");if(!W)return;o.stopPropagation(),o.preventDefault();const C=k?ze(k.dataset.heroNav,x.current,c):Number(W.dataset.idx);Number.isNaN(C)||(l(C,n),S()?.querySelectorAll("[data-slide-name]")[C]?.click())};return e.forEach(o=>o.addEventListener("click",r,{capture:!0})),()=>{t.forEach(o=>o?.()),e.forEach(o=>o.removeEventListener("click",r,{capture:!0}))}},[c,l,S,n]),f(()=>{if(!n)return;const e=G.current;if(!e)return;const t=N(e),r=o=>{o.stopPropagation(),o.preventDefault();const a=u.current,k=a?.getAttribute("data-puck-component")||a?.closest("[data-puck-component]")?.getAttribute("data-puck-component")||y.current;U(k)};return e.addEventListener("click",r,{capture:!0}),()=>{t?.(),e.removeEventListener("click",r,{capture:!0})}},[n,U,V,H.length]);const Re=p(e=>{if(!e)return;const t=N(e),r=o=>{o.stopPropagation(),o.preventDefault(),be(a=>!a)};return e.addEventListener("click",r,{capture:!0}),()=>{t?.(),e.removeEventListener("click",r,{capture:!0})}},[]);return s(He.Provider,{value:{alignment:w,textureOpacity:h,textureOn:oe,textureColor:ne,quietVideo:Ee,phoneUpDown:ce,phoneSideways:se},children:R("div",{ref:u,className:`relative mx-[var(--sf-hero-bleed-m,calc(50%_-_50vw))] w-[var(--sf-hero-bleed-w,100vw)] ${he} max-w-[var(--sf-hero-cap,none)] overflow-hidden`,style:xe,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),onTouchStart:ge,onTouchMove:Se,onTouchEnd:_e,children:[s(O,{className:"hero-track flex h-full [&>*]:h-full [&>*]:min-w-full [&>*]:shrink-0 [&>*]:basis-full max-[720px]:h-auto max-[720px]:flex-auto [&>*]:max-[720px]:h-auto",style:{transform:`translateX(-${m*100}%)`,transition:L?"none":"transform 600ms cubic-bezier(.22,.61,.36,1)"},minEmptyHeight:400}),Q&&s("div",{ref:Re,"data-hero-video-control":g?"playing":"held",className:"sf-hero-video-control absolute left-6 z-[7]",style:{top:`calc(${Me} + 16px)`},children:R("button",{type:"button",className:Ke,children:[s("span",{"aria-hidden":"true",children:g?"❚❚":"▶"}),te(g?Fe:Ye)]})}),(A||J)&&R("div",{className:"pointer-events-none absolute inset-y-0 left-[var(--sf-hero-chrome-x,var(--sf-site-gutter,40px))] right-[var(--sf-hero-chrome-x,var(--sf-site-gutter,40px))] z-[6] mx-auto max-w-[var(--sf-hero-chrome-cap,calc(min(var(--sf-page-cap,var(--sf-site-width,1600px)),var(--sf-site-width,1600px))_-_var(--sf-site-gutter,40px)*2))]",children:[A&&s(Ae,{ref:z,slides:E,active:m,shape:De(ue),placement:me}),J&&s(Le,{ref:q,shape:pe,placement:fe})]}),A&&s("div",{ref:X,className:"sf-hero-phone-dots absolute bottom-[80px] left-1/2 z-[6] hidden -translate-x-1/2 items-center gap-2",children:E.map((e,t)=>s("button",{type:"button","data-idx":t,"aria-label":`Go to slide ${t+1}`,className:`h-2 rounded-full transition-all motion-reduce:transition-none ${t===m?"w-5 bg-accent":"w-2 bg-white/45 hover:bg-white/70"}`},t))}),V&&H.length>0&&R("div",{ref:G,className:`sf-hero-ticker absolute inset-x-0 bottom-0 z-[5] border-t border-overlay-chrome/10 py-3.5${n?" hero-ticker-pick":""}`,"data-selected":n&&K!=null&&ye===K?"":void 0,style:{background:"rgba(10,10,10,.55)"},children:[n&&s("style",{children:Be}),s(Te,{items:H,backdrop:"dark-media"})]})]})})}export{Je as DEFAULT_TICKER_ITEMS,I as HERO_SLIDER_GOTO_EVENT,Fe as HERO_VIDEO_HOLD_LABEL,Ye as HERO_VIDEO_PLAY_LABEL,We as default,Qe as subscribeSliderGoto};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as S}from"react/jsx-runtime";import{useRef as E}from"react";import j from"./HeroPoster.js";import{resolveMedia as o}from"../lib/media.js";import{hasSectionHeight as z,resolveSectionHeight as c}from"../lib/content/section-height.js";import{DEFAULT_OVERLAY_COLOR as L,DEFAULT_OVERLAY_POSITION as O,overlayGradient as A}from"../lib/sections/hero-overlay.js";import{ON_MEDIA_INK_STYLE as H}from"../lib/content/ink.js";function M({overlay:
|
|
1
|
+
"use client";import{jsx as e,jsxs as S}from"react/jsx-runtime";import{useRef as E}from"react";import j from"./HeroPoster.js";import{resolveMedia as o}from"../lib/media.js";import{hasSectionHeight as z,resolveSectionHeight as c}from"../lib/content/section-height.js";import{DEFAULT_OVERLAY_COLOR as L,DEFAULT_OVERLAY_POSITION as O,overlayGradient as A}from"../lib/sections/hero-overlay.js";import{ON_MEDIA_INK_STYLE as H}from"../lib/content/ink.js";function M({overlay:f=100,overlayColor:h=L,overlayPosition:p=O,mediaType:x="image",mediaSrc:t,poster:a,objectPosition:d,tintColor:v="#000000",tintOpacity:i=0,heightDesktop:n,heightMobile:m,boxes:l,editing:u=!1}){const s=z(n,m),g=s?"min-h-[var(--sf-hero-h-m)] max-[720px]:flex max-[720px]:flex-col min-[720px]:min-h-0 min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",w=s?"max-[720px]:relative max-[720px]:flex-auto max-[720px]:w-full":"",_=s?{"--sf-hero-h-d":c(n),"--sf-hero-h-m":c(m)}:void 0,r=x==="video",b=r?o(t):void 0,y=r?o(a):o(t)??o(a),N=E(null);return S("section",{ref:N,className:`relative mx-[var(--sf-hero-bleed-m,calc(50%_-_50vw))] w-[var(--sf-hero-bleed-w,100vw)] ${g} max-w-[var(--sf-hero-cap,none)] overflow-hidden`,style:_,children:[e("div",{className:"absolute inset-0 z-[1]",children:e(j,{videoSrc:b,posterSrc:y,showVideo:r,objectPosition:d})}),i>0&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:v,opacity:Math.min(Math.max(i,0),100)/100}}),e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:A(h,p),opacity:Math.min(Math.max(f,0),100)/100}}),l&&e("div",{className:["sf-hero-group-layer absolute inset-0 z-[3] mx-auto",w,"max-w-[min(var(--sf-page-cap,var(--sf-site-width,1600px)),var(--sf-site-width,1600px))]","px-[var(--sf-site-gutter,40px)] pt-[140px] pb-14",u?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:H,children:e(l,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}export{M as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as N}from"react/jsx-runtime";import{createContext as k,useContext as D}from"react";import H from"./HeroPoster.js";import{resolveMedia as t}from"../lib/media.js";import{heroPhoneStackStyle as O}from"../lib/hero-phone-stack.js";import{heroTextureGradient as T,heroTextureShown as z}from"../lib/hero-texture.js";import{ON_MEDIA_INK_STYLE as C}from"../lib/content/ink.js";const I=k({}),c="relative h-full w-full overflow-hidden max-[720px]:h-auto max-[720px]:flex max-[720px]:flex-col";function M({name:r,process:o,mediaType:u="video",mediaSrc:s,videoSpeed:i,poster:l,objectPosition:f,tintColor:h="#000000",tintOpacity:n=0,groups:p,editing:y=!1,themeClassName:d,themeStyle:v}){const{alignment:R="left",textureOpacity:m,textureOn:S,textureColor:g,quietVideo:b,phoneUpDown:w,phoneSideways:_}=D(I),a=u==="video",x=a?t(s):void 0,E=a?t(l):t(s)??t(l),j=typeof i=="number"?i/100:1;return N("section",{className:d?`${c} ${d}`:c,style:v,"data-slide-name":r??"","data-slide-process":o??"","data-slide-media":x?"video":"still",children:[e(H,{videoSrc:x,posterSrc:E,showVideo:a,playbackRate:j,objectPosition:f,quiet:b}),n>0&&e("div",{className:"absolute inset-0 z-[2]",style:{background:h,opacity:Math.min(Math.max(n,0),100)/100}}),z(S)&&e("div",{className:"absolute inset-0 z-[2]",style:{background:T(g),...m!==void 0?{opacity:m/100}:null}}),e("div",{className:["sf-hero-group-layer absolute inset-0 z-[3] mx-auto max-w-[min(var(--sf-page-cap,var(--sf-site-width,1600px)),var(--sf-site-width,1600px))] px-[var(--sf-site-gutter,40px)] pt-[140px] pb-14","max-[720px]:relative max-[720px]:flex-auto max-[720px]:w-full",y?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:{...C,...O(w,_)},children:p&&e(p,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}const K=Array.from({length:3},(r,o)=>({name:`Slide ${o+1}`,process:"Category",mediaType:"image",mediaVideo:"",poster:""}));export{K as HERO_SLIDE_SEEDS,I as HeroSlideStyleContext,M as default};
|
|
@@ -735,9 +735,15 @@
|
|
|
735
735
|
|
|
736
736
|
/* C · the block you are pointing at: one line, solid, 1px, 2px off the words.
|
|
737
737
|
Puck's own overlay-portal sheet drew it 2px dashed and this file narrowed it;
|
|
738
|
-
since that sheet left with 5.5 the whole line is declared here.
|
|
738
|
+
since that sheet left with 5.5 the whole line is declared here.
|
|
739
|
+
ITS COLOUR IS THE ENGINE'S HOVER COLOUR (2026-10-16): the accent at 60%, as
|
|
740
|
+
`.es-canvas-outline.is-hover` draws it in efficient-easel easel.css, so a
|
|
741
|
+
pointed-at word and a pointed-at block look the same. It was Puck's azure-09
|
|
742
|
+
(#dbeafe), a tint of white: next to the engine's box it read as a second,
|
|
743
|
+
lighter box, and once E below took that box away it was all but invisible
|
|
744
|
+
on a light page. */
|
|
739
745
|
[data-puck-overlay-portal]:hover {
|
|
740
|
-
outline: 1px solid var(--es-accent
|
|
746
|
+
outline: 1px solid color-mix(in srgb, var(--es-accent, #2563eb) 60%, transparent);
|
|
741
747
|
outline-offset: 2px;
|
|
742
748
|
}
|
|
743
749
|
|
|
@@ -790,6 +796,24 @@
|
|
|
790
796
|
outline: none;
|
|
791
797
|
}
|
|
792
798
|
|
|
799
|
+
/* E · …and the engine's hover box stands aside for it.
|
|
800
|
+
Lewis, 2026-10-16, on the Hartes homepage hero: pointing at the "Ranger II"
|
|
801
|
+
heading drew TWO lines again, the words' own (C) and a wider box round the
|
|
802
|
+
Heading block. That box is the engine's (`.es-canvas-outline.is-hover`,
|
|
803
|
+
efficient-easel easel.css), drawn on its outline layer over the block the
|
|
804
|
+
next click would pick. It came with the engine in blueprint 5.5, after A-D
|
|
805
|
+
were written, so nothing here answered it. But a click on a marked element
|
|
806
|
+
never reaches the engine (PreviewPartAnchors and the hero / ticker / location
|
|
807
|
+
bridges stop it and open their own thing), so over one the engine's box
|
|
808
|
+
names the wrong target, and the innermost line D keeps is the true one.
|
|
809
|
+
Off a marked element the engine's box is the only line, and stays. Led by
|
|
810
|
+
`[data-puck-entry]`, the frame's root, as A is; (0,5,0) against the
|
|
811
|
+
engine's (0,2,0). `scripts/test-part-outline-hairline.tsx` §3
|
|
812
|
+
resolves both sheets. */
|
|
813
|
+
[data-puck-entry]:has([data-puck-overlay-portal]:hover) .es-canvas-outline.is-hover {
|
|
814
|
+
outline: none;
|
|
815
|
+
}
|
|
816
|
+
|
|
793
817
|
/* @tokens canvas-end */
|
|
794
818
|
|
|
795
819
|
/* ── Canvas "Add section" seams (overlay between preview sections) ──────────
|
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
export declare const GOOGLE_MAPS_API_KEY: string;
|
|
2
2
|
export declare function loadGoogleMaps(apiKey?: string): Promise<typeof google.maps>;
|
|
3
3
|
export declare function hasMapCoords(lat: number, lng: number): boolean;
|
|
4
|
+
export declare const MAP_LOAD_TIMEOUT_MS = 15000;
|
|
5
|
+
export declare function watchMapLoad(onFail: () => void): {
|
|
6
|
+
ready: () => void;
|
|
7
|
+
stop: () => void;
|
|
8
|
+
};
|
package/dist/lib/maps-loader.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const
|
|
1
|
+
const u=process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY??"",l="https://maps.googleapis.com/maps/api/js",d="__storefrontMapsReady__";let i=null;function w(e){if(typeof window>"u")return Promise.reject(new Error("ssr"));if(window.google?.maps)return Promise.resolve(window.google.maps);if(i)return i;const o=e&&e.trim()||u;return o?(i=new Promise((n,s)=>{const t=d;window[t]=()=>n(window.google.maps);const r=document.createElement("script");r.src=`${l}?key=${encodeURIComponent(o)}&libraries=marker&callback=${t}&v=weekly&loading=async`,r.async=!0,r.defer=!0,r.onerror=()=>s(new Error("Failed to load Google Maps JS SDK")),document.head.appendChild(r)}),i):Promise.reject(new Error("No Google Maps API key configured"))}function f(e,o){return Number.isFinite(e)&&Number.isFinite(o)&&!(e===0&&o===0)}const p=15e3,c=new Set,m=()=>c.forEach(e=>e());function _(e){const o=window;return o.gm_authFailure=m,c.add(e),()=>{c.delete(e)}}function A(e){let o=!1,n;const s=()=>{o||(o=!0,a(),e())},t=()=>{n=setTimeout(()=>{document.visibilityState==="visible"?s():t()},p)},r=_(s),a=()=>{clearTimeout(n),r()};return t(),{ready:()=>{o||(o=!0,a())},stop:a}}export{u as GOOGLE_MAPS_API_KEY,p as MAP_LOAD_TIMEOUT_MS,f as hasMapCoords,w as loadGoogleMaps,A as watchMapLoad};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "efficient-web-builder",
|
|
3
|
-
"version": "17.0.
|
|
3
|
+
"version": "17.0.1",
|
|
4
4
|
"description": "The EFFICIENT website builder: the website editor, the general sections and the renderer that draws them, compiled. Hostable by any EFFICIENT product; nothing here imports a host.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"author": "Efficient Pty Ltd",
|