efficient-web-builder 16.0.2 → 17.0.1

package/CHANGELOG.md

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

package/dist/components/ContactLocations.js

@@ -1,4 +1,4 @@
-"use client";import{jsx as t,jsxs as i,Fragment as G}from"react/jsx-runtime";import{sectionRunsFullWidth as Q}from"../lib/content/section-width.js";import{SiteImage as ee}from"../lib/site-runtime.js";import{markOverlayPortal as te}from"../lib/puck/overlay-portal.js";import{useEffect as j,useRef as U,useState as T}from"react";import{stripMarkup as ae}from"../lib/markup.js";import ne from"./EditorialSectionHead.js";import oe from"./SectionEyebrow.js";import{scrollBehavior as K}from"./useReducedMotion.js";import{renderGold as q,renderHeadline as re}from"./goldPhrases.js";import{CONTACT_LOCATIONS_CARDS_PLACEHOLDER as ie,CONTACT_LOCATIONS_DEFAULTS as z,parseLocationTileShape as se,splitLegacyRegion as ce}from"../lib/content/contact.js";import{galleryCardRatioClass as le}from"../lib/content/gallery-card-layout.js";import{MAP_PALETTE as de,mapBackgroundFor as P,mapMarkerColorFor as W,mapPaletteFor as pe,mapStylesFor as V,watchMapTheme as me}from"../lib/map-styles.js";import{hasMapCoords as ue,loadGoogleMaps as ge}from"../lib/maps-loader.js";import{resolveMapId as fe,resolveMapsKey as he,useSiteMapId as be,useSiteMapsKey as xe}from"../lib/maps-config.js";import{bucketByGroup as ve,groupColsClass as X}from"../lib/locations-grid.js";import{encodeLocationPartId as Y,usePreviewLocationPart as ye}from"./PreviewLocationPartContext.js";import{LocationGroupHeader as ke}from"./LocationGroupHeader.js";import{tk as J}from"./floating-editor/tokens.js";const we=`
+"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=`
   .studio-map .gmap-canvas img[src*="google"] {
     filter: grayscale(1) brightness(0.55) contrast(0.9);
     opacity: 0.7;
@@ -30,7 +30,7 @@
   .contact-loc[data-active="true"] > div:first-child { background-color: var(--accent); }
   .contact-loc[data-active="true"] > div:first-child,
   .contact-loc[data-active="true"] > div:first-child * { color: var(--bg) !important; }
-`,Ne=`
+`,Me=`
 .loc-part-pick { cursor: pointer; position: relative; }
 /* ⚠️ AN OVERLAY, NOT AN outline, AND THAT IS THE WHOLE FIX.
    An inset outline is painted in the element's own box decoration and a
@@ -61,13 +61,13 @@
      painted nothing — the exact failure this whole change is fixing, reproduced
      one layer down. The [data-selected] rule below, which names a plain colour,
      painted blue in the same breath. 73 is 45% of 255. */
-  box-shadow: inset 0 0 0 2px ${J.accent}73;
+  box-shadow: inset 0 0 0 2px ${ee.accent}73;
 }
 .loc-part-pick[data-selected]::after {
-  box-shadow: inset 0 0 0 2px ${J.accent};
+  box-shadow: inset 0 0 0 2px ${ee.accent};
 }
 @media (prefers-reduced-motion: reduce) {
   .loc-part-pick::after { transition: none; }
 }
-`;function Z({value:p}){if(typeof p=="string"){const a=p.split(`
-`);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};
+`;function te({value:p}){if(typeof p=="string"){const a=p.split(`
+`);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};

package/dist/components/Footprint.js

@@ -1,4 +1,4 @@
-"use client";import{jsx as r,Fragment as nt,jsxs as w}from"react/jsx-runtime";import{useEffect as S,useRef as f,useState as P}from"react";import{MAP_PALETTE as Q,mapBackgroundFor as F,mapMarkerColorFor as U,mapPaletteFor as H,mapStylesFor as X,watchMapTheme as rt}from"../lib/map-styles.js";import{hasMapCoords as J,loadGoogleMaps as ot}from"../lib/maps-loader.js";import{resolveMapId as at,resolveMapsKey as st,useSiteMapId as lt,useSiteMapsKey as it}from"../lib/maps-config.js";import{bucketByGroup as ct,groupColsClass as pt}from"../lib/locations-grid.js";import ut from"./EditorialSectionHead.js";import{LocationGroupHeader as dt}from"./LocationGroupHeader.js";import{renderGold as mt,renderHeadline as ft}from"./goldPhrases.js";import gt from"./PartStyledText.js";import{say as xt}from"../lib/editor-words.js";const bt=11,yt=6,q=60;function G(t){return t.replace(/[&<>"']/g,o=>o==="&"?"&amp;":o==="<"?"&lt;":o===">"?"&gt;":o==='"'?"&quot;":"&#39;")}function V(t,o,u){return{path:o.SymbolPath.CIRCLE,scale:t.hq?bt:yt,fillColor:U(u),fillOpacity:1,strokeColor:U(u),strokeOpacity:t.hq?.3:.25,strokeWeight:t.hq?14:9}}function Y(t,o,u,e,l,M){l.forEach(a=>a.setMap(null)),l.clear();const g=new o.LatLngBounds;return e.forEach((a,x)=>{if(!J(a.lat,a.lng))return;g.extend({lat:a.lat,lng:a.lng});const m=new o.Marker({map:t,position:{lat:a.lat,lng:a.lng},icon:V(a,o,u),title:a.city,zIndex:a.hq?100:10,cursor:"pointer"});m.addListener("click",()=>M(x)),l.set(x,m)}),g}function vt(t){return`
+"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==="&"?"&amp;":a==="<"?"&lt;":a===">"?"&gt;":a==='"'?"&quot;":"&#39;")}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`
     .footprint-map .gm-style { font-family: var(--font-role-label), var(--font-mono-fallback) !important; }
     .footprint-map .gm-style .gm-style-iw-c {
       background: ${t.bg} !important;
@@ -16,12 +16,12 @@
     .footprint-map .gm-style button[aria-label="Close"] > span {
       background-color: ${t.closeX} !important;
     }
-  `}function T({pal:t}){const o=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 w(nt,{children:[r("div",{className:"pointer-events-none absolute inset-0",style:{backgroundImage:`radial-gradient(60% 70% at 50% 50%, color-mix(in oklab, ${o} 8%, ${u}) 0%, ${u} 60%, ${e} 100%)`}}),r("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 ht({sectionNumber:t="",heading:o="",tagline:u="",offices:e=[],apiKey:l="",mapId:M="",mapTheme:g="auto",padTop:a,padBottom:x,editing:m,omitHead:$=!1}){const L=typeof a=="number"?a:120,z=typeof x=="number"?x:120,[b,h]=P(null),v=e.length===0&&!t&&!o&&!u;if(S(()=>{h(n=>n!==null&&n>=e.length?null:n)},[e]),v&&!m)return null;const N=ct(e,n=>String(n.group??""),()=>"");return r("section",{className:"relative z-[2] bg-bg",children:w("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:L,paddingBottom:z},children:[!$&&(t||o||u)&&r(ut,{num:t,title:o?ft(o):void 0,desc:u||void 0,spaceBelow:"mb-12"}),r(kt,{offices:e,apiKey:l,mapId:M,mapTheme:g,activeIndex:b,onSelect:h}),e.length>0&&r("div",{className:"mt-12 flex flex-col gap-8",children:N.map((n,C)=>w("div",{children:[n.key&&r(dt,{groupKey:n.key,count:n.items.length}),r("div",{className:["grid gap-[2px] bg-bg",pt(n.items.length),n.items.length>2?"max-[1100px]:grid-cols-2 max-[700px]:grid-cols-1":n.items.length===2?"max-[700px]:grid-cols-1":""].join(" "),children:n.items.map(({item:i,index:k})=>{const A=b===k;return w("button",{type:"button",onClick:()=>h(k),"aria-pressed":A,className:["flex flex-col gap-1.5 bg-bg px-6 py-5 text-left transition-colors outline outline-1 -outline-offset-1",A?"outline-accent":"outline-transparent hover:outline-line"].join(" "),children:[w("span",{className:"flex items-center gap-2.5 font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.28em]",children:[i.hq&&r("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&&r("span",{className:"text-accent",children:i.role})]}),i.city&&r("span",{className:"font-display text-[length:var(--size-body,18px)] font-medium leading-[1.2] tracking-[-0.01em] text-fg",children:r(gt,{value:i.city,children:i.city})}),i.country&&r("span",{className:"font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.2em] text-fg-dim",children:i.country}),i.address&&r("span",{className:"font-mono text-[length:var(--size-label,11px)] uppercase tracking-[0.2em] text-fg-dim",children:mt(i.address)})]},k)})})]},n.key?`g:${n.key}`:`ungrouped:${C}`))}),e.length===0&&m&&r("p",{className:"mt-8 font-mono text-[length:var(--size-label,12px)] uppercase tracking-[0.24em] text-fg-dim",children:xt("Add an office in the inspector")})]})})}function kt({offices:t,apiKey:o,mapId:u,mapTheme:e,activeIndex:l,onSelect:M}){const g=st(o,it()),a=at(u,lt()),x=!!g&&t.some(c=>J(c.lat,c.lng)),m=e!=="auto",$=H(e),L=f(null),z=f(null),b=f(null),h=f(null),v=f(new Map),N=f(null),n=f(null),C=f(null),i=f(M);i.current=M;const k=f(t);k.current=t;const A=f(l);A.current=l;const[_,D]=P(!1),[j,K]=P(Q.dark),[tt,W]=P(Q.dark.background);return S(()=>{K(H(e)),W(F(e))},[e]),S(()=>{if(!x)return;const c=L.current;if(!c)return;let d=!1,p=null;const I=async()=>{try{const s=await ot(g);if(d||!z.current)return;const y=new s.Map(z.current,{center:{lat:25,lng:0},zoom:2,minZoom:1,maxZoom:5,disableDefaultUI:!0,gestureHandling:"cooperative",keyboardShortcuts:!1,clickableIcons:!1,backgroundColor:F(e),...a?{mapId:a}:{styles:X(e)}});b.current=y,h.current=s;const R=Y(y,s,e,k.current,v.current,B=>i.current(B));n.current=R,R.isEmpty()||y.fitBounds(R,q);const O=new s.InfoWindow({disableAutoPan:!0});O.addListener("closeclick",()=>i.current(null)),N.current=O,y.addListener("click",()=>i.current(null)),y.addListener("tilesloaded",()=>{d||D(!0)}),e==="auto"&&!a&&(p=rt(()=>{d||!b.current||(b.current.setOptions({styles:X(e),backgroundColor:F(e)}),v.current.forEach((B,et)=>{const Z=k.current[et];Z&&B.setIcon(V(Z,s,e))}),K(H(e)),W(F(e)))}))}catch(s){console.error("[FootprintMap] Maps SDK failed:",s)}},E=new IntersectionObserver(s=>{for(const y of s)if(y.isIntersecting){E.disconnect(),I();break}},{rootMargin:"200px"});return E.observe(c),()=>{d=!0,E.disconnect(),p?.(),N.current?.close(),N.current=null,b.current=null,h.current=null,v.current.forEach(s=>s.setMap(null)),v.current.clear(),n.current=null,D(!1)}},[x,g,a,e]),S(()=>{const c=b.current,d=h.current;if(!c||!d)return;const p=Y(c,d,e,t,v.current,I=>i.current(I));n.current=p,A.current===null&&!p.isEmpty()&&c.fitBounds(p,q)},[t,e]),S(()=>{const c=b.current,d=N.current;if(!c||!d)return;if(l===null){d.close(),C.current!==null&&n.current&&!n.current.isEmpty()&&c.fitBounds(n.current,q),C.current=null;return}const p=t[l],I=v.current.get(l);if(!p||!I){d.close(),C.current=l;return}c.panTo({lat:p.lat,lng:p.lng});const E=c.getZoom();E!=null&&E<4&&c.setZoom(4);const s=j.info,y=p.hq?`<span style="background:${s.accent};color:${s.bg};padding:1px 6px;font-size:10px;letter-spacing:0.18em;">HQ</span>`:"",R=p.role?`<span style="color:${s.accent};">${G(p.role)}</span>`:"";d.setContent(`
-      <div style="padding:10px 14px 12px;min-width:180px;color:${s.fg};">
+  `}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(`
+      <div style="padding:10px 14px 12px;min-width:180px;color:${b.fg};">
         <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;">
-          ${y}${R}
+          ${d}${h}
         </div>
-        <div style="font-family:var(--font-display),Georgia,serif;font-size:20px;font-weight:500;line-height:1.2;margin-top:6px;color:${s.fg};">${G(p.city)}</div>
-        <div style="font-family:var(--font-role-label),var(--font-mono-fallback);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:${s.fgDim};margin-top:4px;">${G(p.country)}</div>
+        <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>
+        <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>
       </div>
-    `),d.open({map:c,anchor:I}),C.current=l},[l,_,j,t]),x?w("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:tt},children:[r("style",{dangerouslySetInnerHTML:{__html:vt(j.info)}}),r(T,{pal:m?$:void 0}),r("div",{ref:z,className:"gmap-canvas absolute inset-0 transition-opacity duration-500",style:{opacity:_?1:0}}),r("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",_?"opacity-0":"opacity-100"].join(" "),children:"Loading map…"})]}):w("div",{className:["relative aspect-[16/9] w-full overflow-hidden border border-line max-[720px]:aspect-[4/5]",m?"":"bg-bg"].join(" "),style:m?{backgroundColor:$.background}:void 0,children:[r(T,{pal:m?$:void 0}),r("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]",m?"":"text-fg-dim"].join(" "),style:m?{color:$.info.fgDim}:void 0,children:g?"Add office coordinates to plot the map":"Add a Google Maps API key to show the map"})]})}export{ht as default};
+    `),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};

package/dist/components/HeroGroup.d.ts

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

package/dist/components/HeroGroup.js

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

package/dist/components/HeroSection.js

@@ -8,4 +8,4 @@
   outline: 2px solid ${Z.accent};
   outline-offset: -2px;
 }
-`,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:de,showArrows:me,arrowsShape:pe,arrowsPlacement:fe,editing:n}){const $=Ie(P,D),he=$?"h-[var(--sf-hero-h-m)] min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",ve=$?{"--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,xe]=b([]),[ke,B]=b(0),v=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),v.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),v.current=r)},[]),f(()=>{const e=S();if(!e)return;const t=()=>{xe(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,d=Math.min(Math.max(ke,0),Math.max(0,c-1)),A=$e({shown:le,count:c}),J=Ve({shown:me,count:c}),Q=Ge({editing:n,shown:d,slides:E}),Ee=je({editing:n,playing:g,controlShown:Q}),_=Xe({count:c,editing:n}),m=i(null),x=i(null),ge=p(e=>{if(m.current=null,x.current=null,!_||e.touches.length!==1)return;const t=e.touches[0];m.current={x:t.clientX,y:t.clientY},x.current={x:t.clientX,y:t.clientY}},[_]),Se=p(e=>{if(!m.current)return;if(e.touches.length!==1){m.current=null;return}const t=e.touches[0];x.current={x:t.clientX,y:t.clientY}},[]),_e=p(()=>{const e=m.current,t=x.current;if(m.current=null,x.current=null,!_||!e||!t)return;const r=qe(t.x-e.x,t.y-e.y,v.current,c);r!==v.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((d+1)%c),t);return()=>window.clearTimeout(r)},[n,M,T,Y,L,c,d,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,v.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:ve,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",style:{transform:`translateX(-${d*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:d,shape:De(ue),placement:de}),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===d?"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};
+`,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};

package/dist/components/HeroSingle.js

@@ -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:h=100,overlayColor:f=L,overlayPosition:p=O,mediaType:d="image",mediaSrc:t,poster:i,objectPosition:x,tintColor:v="#000000",tintOpacity:a=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":"",_=s?{"--sf-hero-h-d":c(n),"--sf-hero-h-m":c(m)}:void 0,r=d==="video",b=r?o(t):void 0,y=r?o(i):o(t)??o(i),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:x})}),a>0&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:v,opacity:Math.min(Math.max(a,0),100)/100}}),e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:A(f,p),opacity:Math.min(Math.max(h,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};
+"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};

package/dist/components/HeroSlide.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as j}from"react/jsx-runtime";import{createContext as N,useContext as k}from"react";import H from"./HeroPoster.js";import{resolveMedia as o}from"../lib/media.js";import{heroPhoneStackStyle as z}from"../lib/hero-phone-stack.js";import{heroTextureGradient as C,heroTextureShown as D}from"../lib/hero-texture.js";import{ON_MEDIA_INK_STYLE as M}from"../lib/content/ink.js";const T=N({});function V({name:i,process:t,mediaType:u="video",mediaSrc:s,videoSpeed:a,poster:l,objectPosition:f,tintColor:x="#000000",tintOpacity:n=0,groups:d,editing:h=!1,themeClassName:p,themeStyle:y}){const{alignment:I="left",textureOpacity:c,textureOn:v,textureColor:S,quietVideo:g,phoneUpDown:w,phoneSideways:b}=k(T),r=u==="video",m=r?o(s):void 0,_=r?o(l):o(s)??o(l),E=typeof a=="number"?a/100:1;return j("section",{className:p?`relative h-full w-full overflow-hidden ${p}`:"relative h-full w-full overflow-hidden",style:y,"data-slide-name":i??"","data-slide-process":t??"","data-slide-media":m?"video":"still",children:[e(H,{videoSrc:m,posterSrc:_,showVideo:r,playbackRate:E,objectPosition:f,quiet:g}),n>0&&e("div",{className:"absolute inset-0 z-[2]",style:{background:x,opacity:Math.min(Math.max(n,0),100)/100}}),D(v)&&e("div",{className:"absolute inset-0 z-[2]",style:{background:C(S),...c!==void 0?{opacity:c/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",h?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:{...M,...z(w,b)},children:d&&e(d,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}const B=Array.from({length:3},(i,t)=>({name:`Slide ${t+1}`,process:"Category",mediaType:"image",mediaVideo:"",poster:""}));export{B as HERO_SLIDE_SEEDS,T as HeroSlideStyleContext,V as default};
+"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};

package/dist/components/PartSettingsPanel.d.ts

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

package/dist/components/PartSettingsPanel.js

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

package/dist/components/PartTextBox.d.ts

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

package/dist/components/PartTextBox.js

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

package/dist/components/SectionEditor.d.ts

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