efficient-web-builder 17.1.0 → 18.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/CHANGELOG.md +81 -17
  2. package/dist/components/Banner.js +1 -1
  3. package/dist/components/FAQ.js +1 -1
  4. package/dist/components/Flex.js +1 -1
  5. package/dist/components/HeroPoster.js +1 -1
  6. package/dist/components/HeroSection.js +1 -1
  7. package/dist/components/HeroSingle.js +1 -1
  8. package/dist/components/HeroSlide.js +1 -1
  9. package/dist/components/ImageBlock.js +1 -1
  10. package/dist/components/Logos.js +1 -1
  11. package/dist/components/PartSettingsPanel.js +1 -1
  12. package/dist/components/PaymentBadges.js +1 -1
  13. package/dist/components/Placeholder.js +1 -1
  14. package/dist/components/RMark.js +1 -1
  15. package/dist/components/SectionHeader.js +1 -1
  16. package/dist/components/SiteAccentField.d.ts +28 -0
  17. package/dist/components/SiteAccentField.js +1 -0
  18. package/dist/components/SiteTextStylesField.d.ts +17 -0
  19. package/dist/components/SiteTextStylesField.js +1 -0
  20. package/dist/components/SlotChildRows.js +1 -1
  21. package/dist/components/StorefrontEditor.js +1 -1
  22. package/dist/components/UpdateStyleDialog.d.ts +5 -0
  23. package/dist/components/UpdateStyleDialog.js +1 -0
  24. package/dist/components/WebsiteSettingsPanel.js +1 -1
  25. package/dist/components/storefront-editor.css +13 -3
  26. package/dist/lib/content/section-sticky.d.ts +34 -0
  27. package/dist/lib/content/section-sticky.js +1 -0
  28. package/dist/lib/editor-words-catalogue.d.ts +6 -28
  29. package/dist/lib/editor-words-catalogue.js +5 -5
  30. package/dist/lib/fit-words.js +6 -1
  31. package/dist/lib/puck/blocks/general/CategoryBar/fields.js +1 -1
  32. package/dist/lib/puck/blocks/general/IntroBleed/fields.js +1 -1
  33. package/dist/lib/puck/controls.d.ts +1 -0
  34. package/dist/lib/puck/controls.js +1 -1
  35. package/dist/lib/puck/field-groups.js +1 -1
  36. package/dist/lib/puck/overrides.js +1 -1
  37. package/dist/lib/puck/page-root.js +2 -1
  38. package/dist/lib/puck/part-inks.d.ts +2 -0
  39. package/dist/lib/puck/part-inks.js +1 -1
  40. package/dist/lib/puck/passes/corners.d.ts +1 -0
  41. package/dist/lib/puck/passes/corners.js +1 -1
  42. package/dist/lib/puck/passes/index.js +1 -1
  43. package/dist/lib/puck/passes/inspector.js +1 -1
  44. package/dist/lib/puck/passes/section-sticky.d.ts +3 -0
  45. package/dist/lib/puck/passes/section-sticky.js +1 -0
  46. package/dist/lib/puck/passes/types.d.ts +1 -0
  47. package/dist/lib/site-text-styles-writer.d.ts +21 -0
  48. package/dist/lib/site-text-styles-writer.js +1 -0
  49. package/dist/lib/site-text-styles.d.ts +43 -3
  50. package/dist/lib/site-text-styles.js +2 -2
  51. package/dist/lib/site-theme-row.d.ts +4 -0
  52. package/dist/lib/sized-image.d.ts +11 -0
  53. package/dist/lib/sized-image.js +1 -0
  54. package/dist/lib/source-rules/label-vocabulary.d.ts +3 -1
  55. package/dist/lib/source-rules/label-vocabulary.js +5 -4
  56. package/dist/lib/theme.d.ts +3 -0
  57. package/dist/lib/theme.js +1 -1
  58. package/package.json +5 -5
  59. package/dist/components/TextStylesField.d.ts +0 -17
  60. package/dist/components/TextStylesField.js +0 -1
package/CHANGELOG.md CHANGED
@@ -1,37 +1,101 @@
1
1
  # Changelog
2
2
 
3
- ## 17.1.0 - 2026-10-16
3
+ ## 18.1.0 - 2026-10-17
4
4
 
5
- **A section can show or hide each part of its repeated items, with the phone's own answers; a text part takes its own phone font size; and a repeated item's look can be kept once by its parent** (card: gallery tiles on phone, for Lewis's Hartes US homepage; design approved by Lewis 2026-10-16: https://claude.ai/artifact/XydQQ2bzLGCpoZdNfB9Z5K). A minor: nothing changes for a page that sets none of it.
5
+ The first 18 release on npm: 18.0.0 was never published, so this version carries its changes too (the section below). Hosts move from 17.x straight to 18.1.0.
6
6
 
7
- ### Changed for merchants
7
+ ### Added
8
8
 
9
- - **Display row** (new): one row of the shell's Display chips — a press shows or hides that part on every item (Lewis's option C, 2026-10-08). In the Phone view the same row edits the phone: a press stores that one part for the phone, the others keep following Desktop, and the row's ↺ hands every part back to Desktop. Phone answers apply below 720px, the Phone view's own edge.
10
- - **Font size on a phone** (new): in the Phone view, a text part's Font size cell writes the phone's own size. Empty, it shows grey what the phone draws now; a clear hands it back to Desktop. Clear changes removes it with the rest.
11
- - **One look for every item** (new): where a section says so, a style set on one item's text (e.g. a gallery tile's Title) is stored once on the section and reaches every item. The words stay the item's own: clicked and typed on the item as before.
9
+ - **Stick to top, on every section and every card** (card [ADD] Every Section Can Stick To The Top; design approved by Lewis via GG 2026-10-16: https://claude.ai/artifact/SBVRLY6L5NQn5gvN1GRqzH). A switch in the Design tab's Position group: on, the section stays at the top of the screen while the page scrolls, and the next section slides over it. While it is on, a 0–200px row sets how far below the header it stops. The phone view holds its own answer as one unit (switch + distance), with the Height group's one ↺ mark. It sticks in the editor canvas too: easel 11.2.0's canvas wrapper takes on the block's own pin (efficient-easel#267), so the panel carries no note about the canvas. Injected by two passes (`sectionSticky`, every top-level section except CategoryBar, DocTabs and IntroBleed, which pin themselves; `cardSticky`, the `CARD_BLOCK_KEYS` cards, so a Collections card can stick on a phone and the next card slides over it). Both run after every other wrapping pass: a sticky box moves only inside its parent. `lib/content/section-sticky.ts` holds the stored shape (`stickTop`, `stickTopDistance`, `stickTopPhone`, `stickTopDistancePhone`) and `sectionStickAttrs`. **Off is the default and nothing is seeded, so an untouched page renders the same bytes.** The class `.sf-section-stick` and its `--sf-stick-distance(-phone)` properties are painted by the host's stylesheet (efficient-storefront-blocks `globals.css`).
10
+ - **One word for the pin:** Intro bleed's `Scroll-over` and Category bar's `Stick under header` switches now say `Stick to top`. Keys and behaviour unchanged.
11
+ - Guard: `scripts/test-section-sticky.tsx` (10).
12
12
 
13
- ### Changed for hosts
13
+ ### Added (also 17.1.0, on maint-17: #118)
14
14
 
15
- - `controls`: `displayFields(parts, key = "display")` returns the row's two keys (`display` on Desktop, `displayPhone` on Phone). Nothing is seeded; absent means every part shown.
16
- - `lib/content/part-display`: the stored shape and the render rule — `partShownOnDesktop`, `partShownOnPhone`, `partDisplayClass` (Tailwind `max-[720px]:hidden` / `min-[720px]:hidden` / `hidden`).
17
- - `part-styles`: `PartStyle.sizePhone`; `partPhoneDeclarations`, `partStyleForScreen`, `PART_PHONE_MAX_CSS` (`(max-width: 719.98px)`); the published sheet writes a phone rule after the desktop one; `applyPartStyles` takes a `phone` flag (the canvas sets it in the Phone view).
18
- - `text-parts`: `PART_STYLE_OWNER_ATTR` and `PART_STYLE_KIND_ATTR` mark a run whose look another node keeps; `partStyleOwnerOf(element)`. The canvas paints such runs from the owner's store, the part panel writes the owner's `_partStyles[kind]`, and live a renderer stamps them with `PartStyledKind shared` inside the owner's `SharedPartKinds` (`PublishedPartStylesContext`).
15
+ - **Display row**: `controls.displayFields(parts)` — the shell's Display chips show or hide each part of a section's repeated items; the Phone view stores the phone's own answers (`display` / `displayPhone`, below 720px). `lib/content/part-display` holds the stored shape and `partDisplayClass`. Design approved by Lewis 2026-10-16: https://claude.ai/artifact/XydQQ2bzLGCpoZdNfB9Z5K
16
+ - **Phone font size**: `PartStyle.sizePhone`, the Phone view's Font size cell, a `(max-width: 719.98px)` rule in the published sheet, and the canvas paints it in the Phone view (`applyPartStyles(..., phone)`).
17
+ - **One look for every item**: `PART_STYLE_OWNER_ATTR` / `PART_STYLE_KIND_ATTR` mark a run whose style its parent keeps once (`partStyleOwnerOf`); the panel writes the owner's `_partStyles[kind]`; live, `PartStyledKind shared` inside the owner's `SharedPartKinds`.
18
+ - Guards: `test-part-display.tsx` (24), `test-part-phone-size.tsx` (18), `test-part-style-owner.tsx` (9).
19
19
 
20
- ### Guards
20
+ **Uploads are drawn from resized copies, not the raw file** (card [FIX] Oversized Images On Every Site, PR C2; plan `_desk/plans/2026-10-16-image-copies-every-site-plan.md`). Measured live 2026-10-16: the storefronts sent phones 70 originals over 500 KB, 266 MB in all, none with a srcset, all through the plain-`<img>` branches here (inovit.com.au's gallery: a 22 MB, 4732 px photo in a 350 px box). Every one now takes `src` + `srcSet` (320 … 2560 px WebP) + `sizes` from `lib/sized-image`, which asks `efficient-shell/image-copies`: `Placeholder` and `HeroPoster` (a copy that will not load falls back to the original once, before the slot gives up), `ImageBlock`, `Banner` (content width), `Logos`, `SectionHeader`'s logo and `PaymentBadges` (small `sizes`, copies to 960 / 640 px), and the Box background (`Flex`, the 1920 px copy). **Until the copies host is live the shell's contract has no host and every URL comes back unchanged: the rendered bytes are identical** (guard §2). `Logo` (the site header's own logo, sized from the file's natural width) is not changed here.
21
+
22
+ ### Changed for hosts (breaking)
21
23
 
22
- - New `scripts/test-part-display.tsx` (24 checks), `scripts/test-part-phone-size.tsx` (18), `scripts/test-part-style-owner.tsx` (9).
24
+ - **The efficient-easel peer and dev range is `^11.2.0`** (was `^11.1.0`): 11.2.0's canvas pins a sticky block (Stick to top, Intro bleed, the Category bar) while it is edited. Guard: `test-two-ways-to-add` §1.
25
+ - **The efficient-shell peer and dev range is `^7.48.0`** (was `^7.47.0`): `efficient-shell/image-copies` first ships in 7.48.0 (efficient-shell#508).
26
+ - New `lib/sized-image`: `sizedImage(src, { fallbackWidth, maxWidth })`, `sizedBackground(src)`, `CONTENT_SIZES`.
27
+ - Guard: `scripts/test-image-copies-sized.tsx` (each component with a host, without one, and with a file that is not copied). `test-shell-peer-range`: `^7.48.0`.
23
28
 
24
- ## 17.0.2 - 2026-10-16
29
+ **The Q&A (FAQ) section sits in the site's column, like the sections around it** (Lewis 2026-10-16, hartesmetal.com/contact). The section put the side gutter on its full-width `<section>` and capped nothing, so on a screen wider than the site its questions ran to the screen edges: at 1920 the FAQ spanned 60..1860 while the sections around it sat at 300..1620 (at 1440 nothing showed). Now the `<section>` keeps the background and the top/bottom spacing, and one inner box caps at `--sf-site-width`, centres and carries the side gutter (phone gutter too), as Footprint and ContactRouting do. Both frames (head inline, head in its own Box). Measured on the live page with the new classes: 300..1620 at 1920, 620..1940 at 2560, 1440 unchanged. The rendered bytes of every Q&A change on purpose, so a host's section byte baseline moves with this version. Guard: `scripts/test-faq-caps-at-site-column.tsx`.
25
30
 
26
- **Every kept key of the four-side Padding row names the row that edits it** (GG 2026-10-16; it blocked the storefront's move to 17.0.x). A patch.
31
+ **A heading is fitted again when the site's web font arrives, and the gold ® is never under 11px** (Hartes phone audit R04, R11-R13, 2026-10-16).
27
32
 
28
33
  ### Fixed
29
34
 
30
- - `sidesPaddingFields` draws its row on the top key and keeps the other three (`sectionPaddingRight`, `sectionPaddingBottom`, `sectionPaddingLeft`, or the caller's own keys) as fields with no control of their own. They now carry `reachedBy` = the row's top key, as ButtonBlock's kept keys do, so the storefront's `test-panel-no-empty-rows` no longer counts them as unreachable ("183 unreachable"). Their phone twins already passed (phone-only fields). Nothing a merchant sees changes.
35
+ - **N10 label rule: a slot child's own label may start `Title` or `Heading`** (`lib/source-rules/label-vocabulary`). A block named in a literal slot `allow: [...]` (`GalleryItem` in `GalleryB.items`, `FooterMenu` in a FooterGroup) was read as a section, so the tile's `Title` failed N10.2 and the storefront parked it (#1693). A tile really has a Title (`GalleryItem`) and a box really has a Heading (`BookingBox`, `SubmitBox`, the footer columns), and the source cannot tell them apart, so N10.2 forces neither word on a slot child; N10.1, N10.3 and N10.4 still apply. Fixture: GalleryItem `Title` and BookingBox `Heading` both pass. The verdict line now counts labels in slot children and names them. A host can remove its `GalleryItem` "Title" park once it is on this release.
36
+
37
+ - **`lib/fit-words` watched no heading at all.** `fitAndRemember` writes a heading into `seen`, and `watch` then observed it only `if (!seen.has(el))`, which was always false by then, so the ResizeObserver never observed anything. A heading fitted while the page still drew the fallback face was never fitted again when the web font arrived (the `fonts.ready` backstop had already resolved at the first line of `<body>`). On hartesmetal.com.au home at 390x844 "Fusion==Forge.==" was fitted at 54.5px in the fallback face and drew its "." alone on a second line once Playfair Display loaded. `watch` now keeps its own set. Measured on the live page with this fix: 54.2px (390) and 51.6px (375), the word on one line.
38
+ - Guard: `scripts/test-fit-words-watches-headings.tsx`.
39
+ - **`RMark`:** the mark was the browser's `sup` size, 75% of its words: 9px after a 12px label, 9.75px after the 13px footer link, 10.5px in the 14px menu. It is now `min(1em, max(0.75em, 11px))`: 75% where that is readable (headings are unchanged), never under 11px, never bigger than its words.
40
+ - Guard: `scripts/test-rmark-readable.tsx`.
41
+
42
+ ## 18.0.0 - 2026-10-16
43
+
44
+ **The website on easel 11's two ways to add** (card [BUILD] The Two Ways To Add, plan item W1; owner ruling A1, amended 2026-10-14; the Add picker Lewis approved on 2026-10-16). A section or a block goes in one of two ways, and no other: **drag** a tile out of Add to its place, or **press** a tile after a canvas ➕ opened Add at that place. The screen does it (efficient-easel 11.0.0); this release takes it.
45
+
46
+ **Site styles › Text writes the site's text styles list** (card [MERGE] Settings Tabs Into Design And Animation; W1b-1 of `_desk/plans/2026-10-16-website-update-style-plan.md`; GG 2026-10-16: `text_styles` is the ONE writer of site typography).
47
+
48
+ **Update style in a text part's Style list** (W1b-2 of the same plan; design v3, approved by Lewis via GG 2026-10-16). It writes through the Site styles writer above.
49
+
50
+ ### Changed for hosts (breaking)
51
+
52
+ - **The efficient-easel peer range is `^11.1.0`** (was `^10.1.0`; 11.1.0 puts link and colour on the canvas typing bar): the rail has no "+", the Layers head has it, Add is one list, and the tree and the menus have no add rows. easel 11 drops `ScreenParts.add` and `ScreenBand.addAtEnd`, which the website never handed in.
53
+ - `lib/site-text-styles`: `applyListChange`, `listChangePatch`, `toPanelStyles`, `fromPanelStyles`, `siteTextFromRow` (the editor's one reader of the row's text) and `accentItalicCss`; a stored style may carry `auto`, which `resolveTextStyles` / `textStylesToOld` / `themeWithTextStyles` honour. `SiteThemeRow` gains `heading_2_font` / `heading_3_font` / `accent_italic` (optional) and `text_styles[].auto`. `lib/theme`: heading typography gains `italicStrong` (read from `accent_italic`).
54
+ - New `components/SiteTextStylesField` and `components/SiteAccentField` (easel's `TextStylesGroup` + `TextStyleItem`; `accentTextStyle` / `accentChanges` turn the accent's columns into one `TextStyle` and back); `components/TextStylesField` is retired, and so is the panel's saved-tick hook (`useSavedRole`), which only the old rows drew.
55
+ - New `lib/site-text-styles-writer` (`useSiteTextStylesWriter`): the ONE writer of the list, used by Site styles › Text and by Update style; it keeps a template's list in its root props as before.
56
+ - `lib/site-text-styles`: `styleIdOfRole` (the one role → style table; the part panel's italic read uses it too), `partStyleToTextStyleValues`, `hasStyleChange`, `pushIntoStyle`; a stored letter case may be `capitalize` (painted as `capitalize`). New `components/UpdateStyleDialog` (the shell's `Dialog`).
57
+
58
+ ### Changed for merchants
59
+
60
+ - **No "+" in the rail**: Add opens from the Layers head's "+", or from a canvas ➕ at its place. With nothing to aim at, a tile is dragged where it goes.
61
+ - **Add lists every section and every block, each once**, whatever is selected. The website's blocks (Heading, Text, Image, Button and the rest) are there with nothing selected.
62
+ - **A container's settings draw no "Add block" menu** (`SlotChildRows`): a block goes in by Add. A section of one kind of child (a Hero's slides) keeps its single-type Add row.
63
+ - **Link and word colour are on the canvas typing bar, so a text part with marks keeps no panel text box** (easel 11.1.0, #261). The bar shows Link (and ⌘K) and the colour button, with this section's theme colours under the same names the kept box used (`partThemeColors`, one list for the box and the bar). 17.0.x kept the box only for these two. It is still kept for a panel-only field, words off the page, hidden words and a part with no style.
64
+ - **The Text tab is efficient-easel's text-styles list** (`TextStylesList`, the list the email's Email styles draws): Heading 1-3 and Body 1-5 by default, up to seven of each, with the website's ten settings (Font, Color, Size, Weight, B · I, Line spacing, Letter spacing, Paragraph spacing, Letter case, Largest size on headings). Size, Line spacing, Letter spacing and Letter case offer Auto.
65
+ - **A change saves `text_styles`, with only what the merchant set** (GG 2026-10-07). Every value a merchant did not set is still read from the old columns, so no page moves until its merchant changes something.
66
+ - **The old typography columns are no longer written by the editor**: `heading_font`, `heading_2_font`, `heading_3_font`, `body_font`, `label_font`, `heading_size_large_px`, `heading_size_medium_px`, `heading_size_small_px`, `body_size_px`, `label_size_px`, `heading_weight`, `heading_2_weight`, `heading_3_weight`, `heading_case`, `heading_2_case`, `heading_3_case`, `heading_max_px`. They stay as read-time fallbacks (no data change, no converter).
67
+ - **Still written**: the Accent's own columns (`accent_font`, `accent_size_px`, `heading_weight_strong` — the accent is not a text style; it is drawn under the list with the list's own easel parts — `TextStylesGroup` "Accent" and `TextStyleItem`, GG ruling 2026-10-16 "one grammar" — offering Font, Size, Weight and B · I), and `heading_compression` (the site-wide "Line & text gap" rung, moved to Normal when an Auto on a heading's line or letter spacing clears it).
68
+ - **Fixed: Heading 2 and 3 fonts are saved.** The old panel sent four fonts and the editor read `heading_font` only, so a Heading 2 or 3 face was lost on reload. It is saved in the list now (`heading-2` / `heading-3` `font`), and a site with only the old columns shows its `heading_2_font` / `heading_3_font` again.
69
+ - **Fixed: the accent's size is read back.** `accent_size_px` was saved and never read when the editor opened.
70
+ - **Auto sticks** (GG 2026-10-16). Auto over a value an old column gives (a size, weight, case, line or letter spacing, largest size) is saved as the style's `auto` marker (efficient-backend#3290: a list of the setting names set to Auto), and that setting never falls back to its old column again — in the panel, the editor's tokens and the page. Setting the value again takes it out of `auto`.
71
+ - **The Accent's I saves** (GG 2026-10-16): it writes `accent_italic` (pressed = italic, again = upright, the reset dot = each section's own), the editor reads it back, and the canvas paints it (`accentItalicCss`: one rule on the accent phrase). A face loaded without an italic keeps the button off, saying why. The "not saved yet" state is gone.
72
+ - **Update style** (new, after Clear changes · Edit styles): while a text follows Heading 1, 2 or 3, Body or Labels (never Accent, never "No style") and has a change of its own that a style can hold (never for alignment, padding or width alone: no button that pushes nothing, GG 2026-10-16), pressing it asks first ("Update Heading 1?"), then writes the text's own look INTO that site style — font, size, weight, line spacing, letter spacing, paragraph spacing, letter case (Capitalized included), italic and color, and only those — so every text on the site that follows the style moves. The text's own changes are cleared and it keeps following the style.
73
+ - It saves through the same writer as Site styles › Text (`text_styles`), so the editor's tokens move at once; the live page shows it when the storefront paints `text_styles` (the same gap as above).
74
+
75
+ ### Known gaps
76
+
77
+ - **The live storefront page does not read `text_styles` yet**: its `app/layout.tsx` draws the old columns only. Until the storefront paint lands (storefront PR #1656, `feat/site-text-styles-paint`), a Site styles edit saved into the list shows in the editor only.
78
+ - **Needs efficient-backend#3290** (the `auto` marker, merged): a backend deploy older than it refuses a save that carries `auto` (400).
79
+ - The live page does not paint the Accent italic yet either (storefront, with the `text_styles` paint).
31
80
 
32
81
  ### Guards
33
82
 
34
- - `scripts/test-padding-phone-twins-and-hero-group.tsx` §4: each kept key is reached by the top key, with the default keys and with a caller's own. Failed before the fix.
83
+ - `scripts/test-two-ways-to-add.ts` (new): the easel `^11.1.0` range, no Add block menu in a container's rows (the single-type row kept), and no rail item called "add". Red before the change.
84
+ - `scripts/test-part-link-colour-on-canvas.tsx` (was `test-part-link-colour-kept.tsx`): Link offered and the theme colours handed to the canvas bar, one colour list for the box and the bar, and no kept box for marks (the other reasons kept). Red before the change.
85
+ - `test-editor-rail-in-topbar` (the screen's rail items are Layers and Media), `test-menu-pinned-and-band` (the Footer offers its look and nothing else), and the menu-host stand-ins in `test-locked-blocks`, `test-select-layer` and `test-menu-delete-clears-the-panel` (no `openAddSection`, `openAddInside` or `canAddTo`) follow easel 11; `test-publish-main-action` checks the `^11` range.
86
+ - New `scripts/test-site-text-styles-writer.tsx` (66 checks: one writer, no retired column in any patch, Heading 2/3 fonts saved and read back, the old Heading 2/3 fonts as fallbacks, `accent_size_px` read back, the seed's re-derivation, the units, the wiring, easel's list, Auto sticks, the Accent italic, one grammar); red before each change.
87
+ - `test-site-styles-visual` §3/§4b/§4c and `test-site-styles-row-glyphs` read the new Text tab (the list and the Accent row); §4c declares the retired and the added saves. `test-part-slider-fills-row` no longer counts the Text tab (its sliders are easel's).
88
+ - New `scripts/test-part-update-style.tsx` (32 checks: what is pushed, only a change that pushes offers the button, only those keys, which style, the wiring — five roles and only with a pushable change, one writer, the shell Dialog, clear after push); it failed before this change.
89
+
90
+ ### Fixed (also 17.1.1, from maint-17)
91
+
92
+ - **HeroSingle, HeroSection and HeroSlide draw no phone layout of their own any more.** 16.0.2 (#99) and 17.0.1 (#107, #108) made a hero grow to fit its words on a phone with `max-[720px]:` utilities: the root a column with its height as a minimum, the track and slides `h-auto`, the word layer `relative flex-auto w-full`. The fix was right and the line was wrong: the hero's one phone line is 800px (the picker, the arrows, the dots and the phone stack all switch there), so between 720 and 800 the old overflow stayed, and the storefront's `test-hero-phone-stack` and `test-hero-800-line` failed. That layout now lives in storefront-blocks `app/globals.css`, in the hero's 800px block. Here the classes are back to the height classes they were before 16.0.2: a set height is `h-[var(--sf-hero-h-m)] min-[720px]:h-[var(--sf-hero-h-d)]` (720 picks which height applies, nothing else; the stylesheet reads the same two values as the phone minimum), and no set height is `h-screen min-h-[680px]`.
93
+ - **Take it together with the storefront-blocks release that carries the 800px rules.** On its own, this version puts the phone overflow back.
94
+ - Guard: `scripts/test-hero-phone-layout-is-the-sheets.tsx` (no `max-[…]:` class on the root, the track, a slide or a word layer). It replaces `test-hero-grows-on-phone.tsx` and `test-slide-hero-grows-on-phone.tsx`.
95
+
96
+ ### Fixed (also 17.0.2, from maint-17)
97
+
98
+ - **Every kept key of the four-side Padding row names the row that edits it.** `sidesPaddingFields` keeps `sectionPaddingRight` / `Bottom` / `Left` (or the caller's own keys) with no control of their own; they now carry `reachedBy` = the row's top key, so the storefront's `test-panel-no-empty-rows` stops counting them as unreachable. Guard: `test-padding-phone-twins-and-hero-group` §4.
35
99
 
36
100
  ## 17.0.1 - 2026-10-16
37
101
 
@@ -1 +1 @@
1
- import{jsx as e,jsxs as r}from"react/jsx-runtime";import h from"./BlockFrame.js";import f from"./Btn.js";import{media as g}from"../lib/media.js";import v from"./SectionEyebrow.js";import{renderGold as t,renderHeadline as u,splitParagraphs as N}from"./goldPhrases.js";import{ON_MEDIA_INK_STYLE as b}from"../lib/content/ink.js";function y({eyebrow:i,title:s,body:n,ctaText:l,ctaHref:m,imageSrc:a,contained:d,overlay:o=60}){const p=Math.min(Math.max(o,0),100)/100;return e(h,{contained:d,className:"py-6",children:r("div",{className:"sf-card relative overflow-hidden border border-line bg-surface px-10 py-16 max-[800px]:px-6 max-[800px]:py-10",children:[a&&r("div",{className:"absolute inset-0","aria-hidden":!0,children:[e("img",{src:g(a),alt:"",className:"h-full w-full object-cover"}),e("div",{className:"absolute inset-0",style:{background:`rgba(0,0,0,${p})`}})]}),r("div",{className:"relative z-[1] flex max-w-[680px] flex-col gap-5",style:a?b:void 0,children:[i&&e(v,{text:i}),s&&e("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium leading-[1.05] tracking-[-0.03em] max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:u(s,!1)}),n&&N(n).map((c,x)=>e("p",{className:"text-[length:var(--size-body,16px)] leading-[1.6] opacity-85",children:t(c)},x)),l&&e("div",{className:"mt-2 self-start",children:e(f,{href:m||"#",variant:"primary",children:t(l)})})]})]})})}export{y as default};
1
+ import{jsx as e,jsxs as s}from"react/jsx-runtime";import f from"./BlockFrame.js";import h from"./Btn.js";import{media as g}from"../lib/media.js";import{CONTENT_SIZES as u,sizedImage as v}from"../lib/sized-image.js";import N from"./SectionEyebrow.js";import{renderGold as m,renderHeadline as b,splitParagraphs as y}from"./goldPhrases.js";import{ON_MEDIA_INK_STYLE as z}from"../lib/content/ink.js";function _({eyebrow:r,title:a,body:n,ctaText:t,ctaHref:l,imageSrc:i,contained:d,overlay:o=60}){const c=Math.min(Math.max(o,0),100)/100;return e(f,{contained:d,className:"py-6",children:s("div",{className:"sf-card relative overflow-hidden border border-line bg-surface px-10 py-16 max-[800px]:px-6 max-[800px]:py-10",children:[i&&s("div",{className:"absolute inset-0","aria-hidden":!0,children:[e(j,{src:g(i)}),e("div",{className:"absolute inset-0",style:{background:`rgba(0,0,0,${c})`}})]}),s("div",{className:"relative z-[1] flex max-w-[680px] flex-col gap-5",style:i?z:void 0,children:[r&&e(N,{text:r}),a&&e("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium leading-[1.05] tracking-[-0.03em] max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:b(a,!1)}),n&&y(n).map((p,x)=>e("p",{className:"text-[length:var(--size-body,16px)] leading-[1.6] opacity-85",children:m(p)},x)),t&&e("div",{className:"mt-2 self-start",children:e(h,{href:l||"#",variant:"primary",children:m(t)})})]})]})})}function j({src:r}){const a=v(r);return e("img",{src:a.src,...a.srcSet?{srcSet:a.srcSet,sizes:u}:{},alt:"",className:"h-full w-full object-cover"})}export{_ as default};
@@ -1 +1 @@
1
- import{Fragment as v,jsx as e,jsxs as c}from"react/jsx-runtime";import{stripMarkup as A}from"../lib/markup.js";import{renderGold as i,renderHeadline as E}from"./goldPhrases.js";import F from"./SectionHeader.js";import S from"./SectionTextPartBridge.js";import{TEXT_REGION_ATTR as R,regionStyle as T,textRegionPartKey as z}from"../lib/sections/text-regions.js";import{FAQ_REGIONS as I}from"../lib/sections/faq-text-regions.js";import{SIZE_STEP_OF_ROLE as O}from"../lib/fonts.js";import{say as o}from"../lib/editor-words.js";function y(t){return A(t).trim()}function x(t,r){return t?{[R]:r}:{}}function d(t,r){const a=t?.[z(r)]?.role;return T(a,I[r],O)}function j({editing:t,nodeId:r,children:a}){return!t||!r?e(v,{children:a}):e(S,{nodeId:r,sectionType:"FAQ",children:a})}const Q="relative z-[2] bg-bg px-[var(--sf-site-gutter,40px)] py-[120px] max-[800px]:px-[min(20px,var(--sf-site-gutter,40px))] max-[800px]:py-[70px]",k="relative z-[2] bg-bg px-[var(--sf-site-gutter,40px)] pt-0 pb-[120px] max-[800px]:px-[min(20px,var(--sf-site-gutter,40px))] max-[800px]:pt-0 max-[800px]:pb-[70px]";function L({num:t,title:r,link:a,items:_,defaultOpen:b=!0,editing:s=!1,omitHead:u=!1,nodeId:w,partStyles:p}){const l=(_??[]).filter(n=>(n.question??"").trim()!==""),N=s&&l.length===0;if(l.length===0&&!s)return null;const f=N?[{question:o("Add your first question"),answer:o("Write the answer here.")},{question:o("Add another question"),answer:o("Write the answer here.")}]:l,g=f.filter(n=>(n.answer??"").trim()!=="").map(n=>({"@type":"Question",name:y(n.question??""),acceptedAnswer:{"@type":"Answer",text:y(n.answer??"")}})),h=!s&&g.length>0?JSON.stringify({"@context":"https://schema.org","@type":"FAQPage",mainEntity:g}).replace(/</g,"\\u003c"):null,q=r?E(r,!0):void 0;return c("section",{className:u?k:Q,children:[e("style",{children:".faq-acc__ico{transition:transform .2s ease}details[open]>summary .faq-acc__ico{transform:rotate(45deg)}"}),h&&e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:h}}),u?null:e(F,{num:t!==void 0?i(t):void 0,title:q,link:a?{text:i(a.text),href:a.href}:void 0,accent:!0}),e(j,{editing:s,nodeId:w,children:e("div",{children:f.map((n,m)=>c("details",{open:m===0&&b,className:"border-b border-line",children:[c("summary",{className:"flex cursor-pointer list-none items-center gap-6 py-7 [&::-webkit-details-marker]:hidden max-[800px]:gap-4 max-[800px]:py-5",children:[e("span",{className:"font-mono text-[length:var(--size-label,14px)] tracking-[0.2em] text-accent",...x(s,"number"),style:d(p,"number"),children:String(m+1).padStart(2,"0")}),e("span",{className:"flex-1 font-display text-[length:var(--size-body,18px)] font-medium uppercase tracking-[0.02em] text-fg max-[800px]:text-[length:var(--size-body,15px)]",...x(s,"question"),style:d(p,"question"),children:i(n.question??"")}),e("span",{"aria-hidden":!0,className:"faq-acc__ico shrink-0 text-[length:var(--size-body,22px)] leading-none text-fg-dim",children:"+"})]}),n.answer&&e("div",{className:"pb-8 pl-11 pr-8 max-[800px]:pl-0 max-[800px]:pr-0",children:e("p",{className:"max-w-[760px] text-[length:var(--size-body,15px)] leading-[1.7] text-fg-dim",...x(s,"answer"),style:d(p,"answer"),children:i(n.answer)})})]},m))})})]})}export{L as default};
1
+ import{Fragment as v,jsx as e,jsxs as i}from"react/jsx-runtime";import{stripMarkup as E}from"../lib/markup.js";import{renderGold as o,renderHeadline as A}from"./goldPhrases.js";import F from"./SectionHeader.js";import S from"./SectionTextPartBridge.js";import{TEXT_REGION_ATTR as T,regionStyle as I,textRegionPartKey as O}from"../lib/sections/text-regions.js";import{FAQ_REGIONS as R}from"../lib/sections/faq-text-regions.js";import{SIZE_STEP_OF_ROLE as z}from"../lib/fonts.js";import{say as p}from"../lib/editor-words.js";function y(t){return E(t).trim()}function d(t,r){return t?{[T]:r}:{}}function x(t,r){const a=t?.[O(r)]?.role;return I(a,R[r],z)}function j({editing:t,nodeId:r,children:a}){return!t||!r?e(v,{children:a}):e(S,{nodeId:r,sectionType:"FAQ",children:a})}const L="relative z-[2] bg-bg py-[120px] max-[800px]:py-[70px]",M="relative z-[2] bg-bg pt-0 pb-[120px] max-[800px]:pt-0 max-[800px]:pb-[70px]",Q="mx-auto max-w-[var(--sf-site-width,1600px)] px-[var(--sf-site-gutter,40px)] max-[800px]:px-[min(20px,var(--sf-site-gutter,40px))]";function k({num:t,title:r,link:a,items:_,defaultOpen:b=!0,editing:s=!1,omitHead:u=!1,nodeId:w,partStyles:l}){const c=(_??[]).filter(n=>(n.question??"").trim()!==""),N=s&&c.length===0;if(c.length===0&&!s)return null;const f=N?[{question:p("Add your first question"),answer:p("Write the answer here.")},{question:p("Add another question"),answer:p("Write the answer here.")}]:c,h=f.filter(n=>(n.answer??"").trim()!=="").map(n=>({"@type":"Question",name:y(n.question??""),acceptedAnswer:{"@type":"Answer",text:y(n.answer??"")}})),g=!s&&h.length>0?JSON.stringify({"@context":"https://schema.org","@type":"FAQPage",mainEntity:h}).replace(/</g,"\\u003c"):null,q=r?A(r,!0):void 0;return i("section",{className:u?M:L,children:[e("style",{children:".faq-acc__ico{transition:transform .2s ease}details[open]>summary .faq-acc__ico{transform:rotate(45deg)}"}),g&&e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:g}}),i("div",{className:Q,children:[u?null:e(F,{num:t!==void 0?o(t):void 0,title:q,link:a?{text:o(a.text),href:a.href}:void 0,accent:!0}),e(j,{editing:s,nodeId:w,children:e("div",{children:f.map((n,m)=>i("details",{open:m===0&&b,className:"border-b border-line",children:[i("summary",{className:"flex cursor-pointer list-none items-center gap-6 py-7 [&::-webkit-details-marker]:hidden max-[800px]:gap-4 max-[800px]:py-5",children:[e("span",{className:"font-mono text-[length:var(--size-label,14px)] tracking-[0.2em] text-accent",...d(s,"number"),style:x(l,"number"),children:String(m+1).padStart(2,"0")}),e("span",{className:"flex-1 font-display text-[length:var(--size-body,18px)] font-medium uppercase tracking-[0.02em] text-fg max-[800px]:text-[length:var(--size-body,15px)]",...d(s,"question"),style:x(l,"question"),children:o(n.question??"")}),e("span",{"aria-hidden":!0,className:"faq-acc__ico shrink-0 text-[length:var(--size-body,22px)] leading-none text-fg-dim",children:"+"})]}),n.answer&&e("div",{className:"pb-8 pl-11 pr-8 max-[800px]:pl-0 max-[800px]:pr-0",children:e("p",{className:"max-w-[760px] text-[length:var(--size-body,15px)] leading-[1.7] text-fg-dim",...d(s,"answer"),style:x(l,"answer"),children:o(n.answer)})})]},m))})})]})]})}export{k as default};
@@ -1 +1 @@
1
- import{jsx as s,jsxs as T,Fragment as X}from"react/jsx-runtime";import K from"./BoxTabs.js";import U from"./SiteGutterFrame.js";import{BoxSurfaceProvider as Y}from"./BoxSurfaceContext.js";import{useInSiteHeader as q}from"./PhoneMenuTools.js";import{FRAME_BASE as J,FRAME_GUTTER as Q}from"./BlockFrame.js";import{containerGapProps as V}from"../lib/content/container-gap.js";import{boxLayoutClasses as Z,boxBlockSpacingClass as ee,boxPhoneRowClasses as se,boxShareClasses as oe,boxWrapClass as re}from"../lib/content/box-layout.js";import{BOX_CARD_PAD as e,BOX_OWNS_SIDES_CLASS as te,boxDarkenStyle as ae,boxPlacementClasses as ne,CARD_SHADOW_CLASS as le,isBackgroundBox as ie}from"../lib/content/box-background.js";import{sectionPadAttrs as me}from"../lib/content/section-padding.js";import{ON_MEDIA_INK_STYLE as ce}from"../lib/content/ink.js";function fe({direction:r,label:k,gap:E,justify:g,align:v,wrap:P,share:w,phoneRow:B,blockSpacing:D,bgImage:i,darken:F,darkenStyle:j,placement:O,padTop:m,padBottom:c,padTopPhone:f,padBottomPhone:u,padLeft:d,padRight:b,padLeftPhone:p,padRightPhone:y,contained:H=!0,fillHeight:I=!1,content:L}){const t=ie(i),x=q(),S=[oe(w),ee(D)].filter(Boolean).join(" "),R=S?` ${S}`:"",$=["flex",r==="row"?`flex-row ${se(B)}`:"flex-col",re(P),t?ne(O??"center",r):Z(g,v)].join(" ")+R,o=I||t?" h-full":"",C=t||x?"":" py-6",z=`${J}${C} ${Q}${o}`,G=x?o.trim():`w-full${C}${o}`,a=V("Flex",E,r==="row"?"inline":"block"),_=s(L,{className:`${$}${a.className}${o}`,style:a.style,minEmptyHeight:120}),h=r==="tabs"?s(K,{className:`${$}${a.className}${o}`,style:a.style,children:_}):_,M=k?.trim()||void 0,A=W=>s(U,{contained:H,framedClass:z,fillClass:G,tabLabel:M,children:W});if(!t)return A(h);const n=ae(F,j),l=me(typeof m=="number"?m:e.desktop,typeof c=="number"?c:e.desktop,typeof f=="number"?f:e.phone,typeof u=="number"?u:e.phone,typeof d=="number"?d:e.side,typeof b=="number"?b:e.side,typeof p=="number"?p:e.sidePhone,typeof y=="number"?y:e.sidePhone),N=s("div",{className:`relative z-[1] ${te} ${l?.className??""}`.trimEnd(),style:n?{...l?.style,...ce}:l?.style,children:h});return A(s(X,{children:T("div",{className:`relative isolate overflow-hidden ${le}${o}`,style:{backgroundImage:`url(${i})`,backgroundSize:"cover",backgroundPosition:"center"},children:[n&&s("div",{className:"absolute inset-0 z-0",style:n,"aria-hidden":!0}),n?s(Y,{children:N}):N]})}))}export{fe as default};
1
+ import{jsx as s,jsxs as T,Fragment as X}from"react/jsx-runtime";import K from"./BoxTabs.js";import U from"./SiteGutterFrame.js";import{BoxSurfaceProvider as Y}from"./BoxSurfaceContext.js";import{useInSiteHeader as q}from"./PhoneMenuTools.js";import{FRAME_BASE as J,FRAME_GUTTER as Q}from"./BlockFrame.js";import{containerGapProps as V}from"../lib/content/container-gap.js";import{boxLayoutClasses as Z,boxBlockSpacingClass as ee,boxPhoneRowClasses as se,boxShareClasses as oe,boxWrapClass as re}from"../lib/content/box-layout.js";import{BOX_CARD_PAD as e,BOX_OWNS_SIDES_CLASS as te,boxDarkenStyle as ae,boxPlacementClasses as ne,CARD_SHADOW_CLASS as le,isBackgroundBox as ie}from"../lib/content/box-background.js";import{sectionPadAttrs as me}from"../lib/content/section-padding.js";import{ON_MEDIA_INK_STYLE as ce}from"../lib/content/ink.js";import{sizedBackground as fe}from"../lib/sized-image.js";function de({direction:r,label:k,gap:g,justify:E,align:v,wrap:B,share:P,phoneRow:w,blockSpacing:D,bgImage:i,darken:F,darkenStyle:j,placement:O,padTop:m,padBottom:c,padTopPhone:f,padBottomPhone:d,padLeft:u,padRight:b,padLeftPhone:p,padRightPhone:y,contained:z=!0,fillHeight:H=!1,content:I}){const t=ie(i),x=q(),S=[oe(P),ee(D)].filter(Boolean).join(" "),L=S?` ${S}`:"",$=["flex",r==="row"?`flex-row ${se(w)}`:"flex-col",re(B),t?ne(O??"center",r):Z(E,v)].join(" ")+L,o=H||t?" h-full":"",C=t||x?"":" py-6",R=`${J}${C} ${Q}${o}`,G=x?o.trim():`w-full${C}${o}`,a=V("Flex",g,r==="row"?"inline":"block"),_=s(I,{className:`${$}${a.className}${o}`,style:a.style,minEmptyHeight:120}),h=r==="tabs"?s(K,{className:`${$}${a.className}${o}`,style:a.style,children:_}):_,M=k?.trim()||void 0,A=W=>s(U,{contained:z,framedClass:R,fillClass:G,tabLabel:M,children:W});if(!t)return A(h);const n=ae(F,j),l=me(typeof m=="number"?m:e.desktop,typeof c=="number"?c:e.desktop,typeof f=="number"?f:e.phone,typeof d=="number"?d:e.phone,typeof u=="number"?u:e.side,typeof b=="number"?b:e.side,typeof p=="number"?p:e.sidePhone,typeof y=="number"?y:e.sidePhone),N=s("div",{className:`relative z-[1] ${te} ${l?.className??""}`.trimEnd(),style:n?{...l?.style,...ce}:l?.style,children:h});return A(s(X,{children:T("div",{className:`relative isolate overflow-hidden ${le}${o}`,style:{backgroundImage:fe(i??""),backgroundSize:"cover",backgroundPosition:"center"},children:[n&&s("div",{className:"absolute inset-0 z-0",style:n,"aria-hidden":!0}),n?s(Y,{children:N}):N]})}))}export{de as default};
@@ -1 +1 @@
1
- "use client";import{jsx as a,jsxs as F}from"react/jsx-runtime";import{useEffect as u,useRef as k,useState as l}from"react";import{SiteImage as z}from"../lib/site-runtime.js";import I from"./HeroHeldFrame.js";import{hasAv1Variant as L,isExternalMediaUrl as N}from"../lib/media.js";const R=.5;function g({videoSrc:n,posterSrc:c,showVideo:m=!0,playbackRate:f=R,objectPosition:o="50% 50%",quiet:p=!1}){const r=c||"",e=n||"",[d,i]=l(!1),[x,v]=l(!1),[h,y]=l(!1),[w,E]=l(!1),b=k(null);u(()=>{i(!1),v(!1),y(!1)},[n,c]),u(()=>{if(typeof window>"u")return;const t=()=>{const s=window;s.requestIdleCallback?s.requestIdleCallback(()=>E(!0),{timeout:2e3}):setTimeout(()=>E(!0),800)};if(document.readyState==="complete"){t();return}return window.addEventListener("load",t,{once:!0}),()=>window.removeEventListener("load",t)},[]),u(()=>{const t=b.current;if(!t)return;const s=()=>{t.playbackRate=f};return s(),t.addEventListener("loadedmetadata",s),()=>t.removeEventListener("loadedmetadata",s)},[n,f]);const j=N(r);return F("div",{className:"absolute inset-0 z-[1]",children:[a("div",{className:"absolute inset-0",style:{background:"var(--site-surface)"}}),r&&(j?a("img",{src:r,alt:"",className:"absolute inset-0 z-[2] h-full w-full object-cover",style:{display:d?"none":"block",objectPosition:o},onError:()=>i(!0)},r):a(z,{src:r,alt:"",fill:!0,priority:!0,sizes:"100vw",className:"z-[2] object-cover",style:{display:d?"none":"block",objectPosition:o},onError:()=>i(!0)},r)),m&&!p&&e&&w&&!x&&F("video",{ref:b,autoPlay:!0,loop:!0,muted:!0,playsInline:!0,preload:"metadata",className:"absolute inset-0 z-[3] h-full w-full object-cover",style:{objectPosition:o},onError:()=>v(!0),children:[L(e)&&a("source",{src:e.replace(/\.mp4$/,".av1.mp4"),type:'video/mp4; codecs="av01.0.08M.10"'}),a("source",{src:e,type:"video/mp4"})]},e),m&&p&&e&&w&&!h&&(!r||d)&&a(I,{src:e,objectPosition:o,onError:()=>y(!0)},e)]})}export{g as default};
1
+ "use client";import{jsx as a,jsxs as h}from"react/jsx-runtime";import{useEffect as u,useRef as k,useState as o}from"react";import{SiteImage as C}from"../lib/site-runtime.js";import L from"./HeroHeldFrame.js";import{hasAv1Variant as N,isExternalMediaUrl as P}from"../lib/media.js";import{sizedImage as R}from"../lib/sized-image.js";const A=.5;function H({videoSrc:d,posterSrc:m,showVideo:f=!0,playbackRate:p=A,objectPosition:l="50% 50%",quiet:v=!1}){const e=m||"",t=d||"",[i,c]=o(!1),[I,y]=o(!1),[g,w]=o(!1),[j,E]=o(!1),[F,b]=o(!1),z=k(null);u(()=>{c(!1),y(!1),w(!1),E(!1)},[d,m]),u(()=>{if(typeof window>"u")return;const s=()=>{const r=window;r.requestIdleCallback?r.requestIdleCallback(()=>b(!0),{timeout:2e3}):setTimeout(()=>b(!0),800)};if(document.readyState==="complete"){s();return}return window.addEventListener("load",s,{once:!0}),()=>window.removeEventListener("load",s)},[]),u(()=>{const s=z.current;if(!s)return;const r=()=>{s.playbackRate=p};return r(),s.addEventListener("loadedmetadata",r),()=>s.removeEventListener("loadedmetadata",r)},[d,p]);const x=P(e),n=e&&x&&!I?R(e):{src:e};return h("div",{className:"absolute inset-0 z-[1]",children:[a("div",{className:"absolute inset-0",style:{background:"var(--site-surface)"}}),e&&(x?a("img",{src:n.src,...n.srcSet?{srcSet:n.srcSet,sizes:"100vw"}:{},alt:"",className:"absolute inset-0 z-[2] h-full w-full object-cover",style:{display:i?"none":"block",objectPosition:l},onError:()=>n.srcSet?y(!0):c(!0)},e):a(C,{src:e,alt:"",fill:!0,priority:!0,sizes:"100vw",className:"z-[2] object-cover",style:{display:i?"none":"block",objectPosition:l},onError:()=>c(!0)},e)),f&&!v&&t&&F&&!g&&h("video",{ref:z,autoPlay:!0,loop:!0,muted:!0,playsInline:!0,preload:"metadata",className:"absolute inset-0 z-[3] h-full w-full object-cover",style:{objectPosition:l},onError:()=>w(!0),children:[N(t)&&a("source",{src:t.replace(/\.mp4$/,".av1.mp4"),type:'video/mp4; codecs="av01.0.08M.10"'}),a("source",{src:t,type:"video/mp4"})]},t),f&&v&&t&&F&&!j&&(!e||i)&&a(L,{src:t,objectPosition:l,onError:()=>E(!0)},t)]})}export{H as default};
@@ -8,4 +8,4 @@
8
8
  outline: 2px solid ${Z.accent};
9
9
  outline-offset: -2px;
10
10
  }
11
- `,Ye="Play video",Fe="Hold video",Ke="flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-overlay-chrome/25 bg-overlay-scrim/80 px-[11px] font-mono text-[11px] leading-none tracking-[0.05em] text-overlay-fg",Ue=()=>te("item"),Je=["","","","","",""],re=new Map;function Qe(O,w){const h=O?.ownerDocument?.defaultView;if(h)return h.addEventListener(I,w),()=>h.removeEventListener(I,w)}function We({slides:O,alignment:w,textureOpacity:h,showTexture:oe,textureColor:ne,phoneUpDown:ce,phoneSideways:se,autoplay:M,autoplayInterval:T,showTicker:ae,tickerItems:ie,heightDesktop:P,heightMobile:D,showPicker:le,pickerShape:ue,pickerPlacement: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};
11
+ `,Ye="Play video",Fe="Hold video",Ke="flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-overlay-chrome/25 bg-overlay-scrim/80 px-[11px] font-mono text-[11px] leading-none tracking-[0.05em] text-overlay-fg",Ue=()=>te("item"),Je=["","","","","",""],re=new Map;function Qe(O,w){const h=O?.ownerDocument?.defaultView;if(h)return h.addEventListener(I,w),()=>h.removeEventListener(I,w)}function We({slides:O,alignment:w,textureOpacity:h,showTexture:oe,textureColor:ne,phoneUpDown:ce,phoneSideways:se,autoplay:M,autoplayInterval:T,showTicker:ae,tickerItems:ie,heightDesktop:P,heightMobile:D,showPicker:le,pickerShape:ue,pickerPlacement: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};
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as S}from"react/jsx-runtime";import{useRef as E}from"react";import j from"./HeroPoster.js";import{resolveMedia as o}from"../lib/media.js";import{hasSectionHeight as z,resolveSectionHeight as c}from"../lib/content/section-height.js";import{DEFAULT_OVERLAY_COLOR as L,DEFAULT_OVERLAY_POSITION as O,overlayGradient as A}from"../lib/sections/hero-overlay.js";import{ON_MEDIA_INK_STYLE as H}from"../lib/content/ink.js";function M({overlay:f=100,overlayColor:h=L,overlayPosition:p=O,mediaType:x="image",mediaSrc:t,poster:a,objectPosition:d,tintColor:v="#000000",tintOpacity:i=0,heightDesktop:n,heightMobile:m,boxes:l,editing:u=!1}){const s=z(n,m),g=s?"min-h-[var(--sf-hero-h-m)] max-[720px]:flex max-[720px]:flex-col min-[720px]:min-h-0 min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",w=s?"max-[720px]:relative max-[720px]:flex-auto max-[720px]:w-full":"",_=s?{"--sf-hero-h-d":c(n),"--sf-hero-h-m":c(m)}:void 0,r=x==="video",b=r?o(t):void 0,y=r?o(a):o(t)??o(a),N=E(null);return S("section",{ref:N,className:`relative mx-[var(--sf-hero-bleed-m,calc(50%_-_50vw))] w-[var(--sf-hero-bleed-w,100vw)] ${g} max-w-[var(--sf-hero-cap,none)] overflow-hidden`,style:_,children:[e("div",{className:"absolute inset-0 z-[1]",children:e(j,{videoSrc:b,posterSrc:y,showVideo:r,objectPosition:d})}),i>0&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:v,opacity:Math.min(Math.max(i,0),100)/100}}),e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:A(h,p),opacity:Math.min(Math.max(f,0),100)/100}}),l&&e("div",{className:["sf-hero-group-layer absolute inset-0 z-[3] mx-auto",w,"max-w-[min(var(--sf-page-cap,var(--sf-site-width,1600px)),var(--sf-site-width,1600px))]","px-[var(--sf-site-gutter,40px)] pt-[140px] pb-14",u?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:H,children:e(l,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}export{M as default};
1
+ "use client";import{jsx as e,jsxs as N}from"react/jsx-runtime";import{useRef as S}from"react";import E from"./HeroPoster.js";import{resolveMedia as s}from"../lib/media.js";import{hasSectionHeight as j,resolveSectionHeight as c}from"../lib/content/section-height.js";import{DEFAULT_OVERLAY_COLOR as z,DEFAULT_OVERLAY_POSITION as L,overlayGradient as O}from"../lib/sections/hero-overlay.js";import{ON_MEDIA_INK_STYLE as A}from"../lib/content/ink.js";function H({overlay:h=100,overlayColor:f=z,overlayPosition:d=L,mediaType:p="image",mediaSrc:r,poster:t,objectPosition:v,tintColor:u="#000000",tintOpacity:i=0,heightDesktop:a,heightMobile:n,boxes:m,editing:x=!1}){const l=j(a,n),g=l?"h-[var(--sf-hero-h-m)] min-[720px]:h-[var(--sf-hero-h-d)]":"h-screen min-h-[680px]",_=l?{"--sf-hero-h-d":c(a),"--sf-hero-h-m":c(n)}:void 0,o=p==="video",b=o?s(r):void 0,w=o?s(t):s(r)??s(t),y=S(null);return N("section",{ref:y,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(E,{videoSrc:b,posterSrc:w,showVideo:o,objectPosition:v})}),i>0&&e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:u,opacity:Math.min(Math.max(i,0),100)/100}}),e("div",{className:"pointer-events-none absolute inset-0 z-[2]",style:{background:O(f,d),opacity:Math.min(Math.max(h,0),100)/100}}),m&&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",x?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:A,children:e(m,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}export{H as default};
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as N}from"react/jsx-runtime";import{createContext as k,useContext as D}from"react";import H from"./HeroPoster.js";import{resolveMedia as t}from"../lib/media.js";import{heroPhoneStackStyle as O}from"../lib/hero-phone-stack.js";import{heroTextureGradient as T,heroTextureShown as z}from"../lib/hero-texture.js";import{ON_MEDIA_INK_STYLE as C}from"../lib/content/ink.js";const I=k({}),c="relative h-full w-full overflow-hidden max-[720px]:h-auto max-[720px]:flex max-[720px]:flex-col";function M({name:r,process:o,mediaType:u="video",mediaSrc:s,videoSpeed:i,poster:l,objectPosition:f,tintColor:h="#000000",tintOpacity:n=0,groups:p,editing:y=!1,themeClassName:d,themeStyle:v}){const{alignment:R="left",textureOpacity:m,textureOn:S,textureColor:g,quietVideo:b,phoneUpDown:w,phoneSideways:_}=D(I),a=u==="video",x=a?t(s):void 0,E=a?t(l):t(s)??t(l),j=typeof i=="number"?i/100:1;return N("section",{className:d?`${c} ${d}`:c,style:v,"data-slide-name":r??"","data-slide-process":o??"","data-slide-media":x?"video":"still",children:[e(H,{videoSrc:x,posterSrc:E,showVideo:a,playbackRate:j,objectPosition:f,quiet:b}),n>0&&e("div",{className:"absolute inset-0 z-[2]",style:{background:h,opacity:Math.min(Math.max(n,0),100)/100}}),z(S)&&e("div",{className:"absolute inset-0 z-[2]",style:{background:T(g),...m!==void 0?{opacity:m/100}:null}}),e("div",{className:["sf-hero-group-layer absolute inset-0 z-[3] mx-auto max-w-[min(var(--sf-page-cap,var(--sf-site-width,1600px)),var(--sf-site-width,1600px))] px-[var(--sf-site-gutter,40px)] pt-[140px] pb-14","max-[720px]:relative max-[720px]:flex-auto max-[720px]:w-full",y?"sf-hero-group-layer-edit":""].filter(Boolean).join(" "),style:{...C,...O(w,_)},children:p&&e(p,{className:"sf-hero-group-zone",minEmptyHeight:160})})]})}const K=Array.from({length:3},(r,o)=>({name:`Slide ${o+1}`,process:"Category",mediaType:"image",mediaVideo:"",poster:""}));export{K as HERO_SLIDE_SEEDS,I as HeroSlideStyleContext,M as default};
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};
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import{SiteLink as v}from"../lib/site-runtime.js";import N from"./BlockFrame.js";import{useSitePhotography as S}from"./SitePhotographyContext.js";import{media as x}from"../lib/media.js";import{imageCornerStyle as w}from"../lib/content/image-corners.js";import{imageFitClass as j,imageIsCropped as I,parseImageFit as C}from"../lib/content/image-fit.js";import{resolveImageTreatment as F}from"../lib/content/image-treatment.js";import{imageWidthStyle as $}from"../lib/content/image-width.js";const P={auto:"","21/9":"aspect-[21/9]","16/9":"aspect-[16/9]","4/3":"aspect-[4/3]","1/1":"aspect-square"};function B({src:r,alt:f,aspect:l,contained:d,grayscale:p,href:h,width:u,fit:g,focal:a,corners:y,cornerSides:b}){const o=F(p,S()),i=$(u),m=C(g,"cover"),c=w(y,b),n={...o.style??{},...a&&I(l,m)?{objectPosition:a}:{}},s=r?e("img",{src:x(r),alt:f,className:`h-full w-full ${l==="auto"?"":j(m)}${o.className?` ${o.className}`:""}`,...Object.keys(n).length?{style:n}:{}}):e("div",{className:"flex aspect-[16/9] items-center justify-center border border-dashed border-line font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.2em] text-fg-dim",children:"Image — set a path"}),t=(h??"").trim(),k=t&&r?t.startsWith("/")?e(v,{href:t,className:"block h-full w-full",children:s}):e("a",{href:t,className:"block h-full w-full",children:s}):s;return e(N,{contained:d,className:"py-6",children:e("figure",{...i?{style:i}:{},children:e("div",{className:`relative w-full overflow-hidden bg-surface ${P[l]}`,...c?{style:c}:{},children:k})})})}export{B as default};
1
+ import{jsx as e}from"react/jsx-runtime";import{SiteLink as k}from"../lib/site-runtime.js";import v from"./BlockFrame.js";import{useSitePhotography as x}from"./SitePhotographyContext.js";import{media as I}from"../lib/media.js";import{CONTENT_SIZES as w,sizedImage as j}from"../lib/sized-image.js";import{imageCornerStyle as C}from"../lib/content/image-corners.js";import{imageFitClass as z,imageIsCropped as F,parseImageFit as T}from"../lib/content/image-fit.js";import{resolveImageTreatment as $}from"../lib/content/image-treatment.js";import{imageWidthStyle as E}from"../lib/content/image-width.js";const P={auto:"","21/9":"aspect-[21/9]","16/9":"aspect-[16/9]","4/3":"aspect-[4/3]","1/1":"aspect-square"};function B({src:t,alt:d,aspect:o,contained:p,grayscale:h,href:u,width:g,fit:y,focal:i,corners:S,cornerSides:N}){const l=$(h,x()),m=E(g),c=T(y,"cover"),n=C(S,N),f={...l.style??{},...i&&F(o,c)?{objectPosition:i}:{}},r=t?j(I(t)):null,a=t&&r?e("img",{src:r.src,...r.srcSet?{srcSet:r.srcSet,sizes:w}:{},alt:d,className:`h-full w-full ${o==="auto"?"":z(c)}${l.className?` ${l.className}`:""}`,...Object.keys(f).length?{style:f}:{}}):e("div",{className:"flex aspect-[16/9] items-center justify-center border border-dashed border-line font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.2em] text-fg-dim",children:"Image — set a path"}),s=(u??"").trim(),b=s&&t?s.startsWith("/")?e(k,{href:s,className:"block h-full w-full",children:a}):e("a",{href:s,className:"block h-full w-full",children:a}):a;return e(v,{contained:p,className:"py-6",children:e("figure",{...m?{style:m}:{},children:e("div",{className:`relative w-full overflow-hidden bg-surface ${P[o]}`,...n?{style:n}:{},children:b})})})}export{B as default};
@@ -1 +1 @@
1
- import{jsx as e,jsxs as p}from"react/jsx-runtime";import x from"./BlockFrame.js";import{renderChrome as f,renderHeadline as u}from"./goldPhrases.js";import{media as d}from"../lib/media.js";function y({items:s,contained:o,heading:a,columns:r,grayscale:c,logoHeight:n,bandPadding:t}){const i=r!=null?{flex:`0 0 calc((100% - ${(r-1)*3.5}rem) / ${r})`}:void 0;return p(x,{contained:o,className:t==null?"py-10":"",style:t==null?void 0:{paddingTop:`${t}px`,paddingBottom:`${t}px`},children:[a!=null&&a!==""?e("h2",{className:"mb-8 text-center font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.2em] text-fg-dim",children:u(a,!1)}):null,e("div",{className:"flex flex-wrap items-center justify-center gap-x-14 gap-y-8",children:(s??[]).map((l,m)=>e("div",{className:"text-center",style:i,children:l.src?e("img",{src:d(l.src),alt:l.alt,className:["mx-auto w-auto opacity-60 transition-opacity hover:opacity-100",n==null?"h-7":"",c===!1?"":"grayscale"].filter(Boolean).join(" "),style:n==null?void 0:{height:`${n}px`}}):e("span",{className:"font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.2em] text-fg-dim",children:f(l.alt||"Logo")})},m))})]})}export{y as default};
1
+ import{jsx as t,jsxs as p}from"react/jsx-runtime";import f from"./BlockFrame.js";import{renderChrome as x,renderHeadline as u}from"./goldPhrases.js";import{media as d}from"../lib/media.js";import{sizedImage as h}from"../lib/sized-image.js";function y({items:r,contained:e,heading:s,columns:n,grayscale:c,logoHeight:o,bandPadding:l}){const i=n!=null?{flex:`0 0 calc((100% - ${(n-1)*3.5}rem) / ${n})`}:void 0;return p(f,{contained:e,className:l==null?"py-10":"",style:l==null?void 0:{paddingTop:`${l}px`,paddingBottom:`${l}px`},children:[s!=null&&s!==""?t("h2",{className:"mb-8 text-center font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.2em] text-fg-dim",children:u(s,!1)}):null,t("div",{className:"flex flex-wrap items-center justify-center gap-x-14 gap-y-8",children:(r??[]).map((a,m)=>t("div",{className:"text-center",style:i,children:a.src?t("img",{...g(d(a.src)),alt:a.alt,className:["mx-auto w-auto opacity-60 transition-opacity hover:opacity-100",o==null?"h-7":"",c===!1?"":"grayscale"].filter(Boolean).join(" "),style:o==null?void 0:{height:`${o}px`}}):t("span",{className:"font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.2em] text-fg-dim",children:x(a.alt||"Logo")})},m))})]})}function g(r){const e=h(r,{fallbackWidth:640,maxWidth:960});return e.srcSet?{src:e.src,srcSet:e.srcSet,sizes:"240px"}:{src:r}}export{y as default};
@@ -1 +1 @@
1
- "use client";import{jsx as n,Fragment as J,jsxs as h}from"react/jsx-runtime";import{useEffect as Q,useRef as Le,useState as Ve}from"react";import{PartResetDot as Ke}from"./PartResetDot.js";import{FieldSelect as Be,InspectorField as je}from"efficient-easel/fields";import{SettingsField as Ge}from"efficient-easel/panel";import{InspectorUpLevel as L}from"efficient-easel/chrome";import{StylesIcon as Me,TypeIcon as Ue}from"efficient-easel/icons";import{useEasel as We}from"efficient-easel/easel";import{TextPartPanel as De}from"efficient-easel/copy";import{Tooltip as He}from"efficient-shell/ui";import{PartTextBox as $e,partTextCells as Ye}from"./PartTextBox.js";import Pe from"./UiIcon.js";import{usePreviewHeader as Xe}from"./PreviewHeaderContext.js";import{usePreviewDevice as qe}from"./PreviewDeviceContext.js";import{usePartStyle as Je}from"./PreviewPartStyleContext.js";import{say as l}from"../lib/editor-words.js";import{readHidable as V,textFieldOffPage as Qe,textFieldPanelOnly as Ze}from"../lib/puck/controls.js";import{TEXT_FIELD_MARKER as et}from"../lib/puck/field-markers.js";import{useSectionOps as tt}from"../lib/puck/use-section-ops.js";import{FONT_OPTIONS as nt,FONT_ROLES as Z,FONT_ROLE_LABELS as ee,fontOption as te}from"../lib/fonts.js";import{isMultilineKind as ot,partPlaceholder as lt,typeInPlaceKind as st}from"../lib/puck/part-text.js";import{partRowField as rt}from"../lib/puck/part-row-field.js";import{decodePartKey as it,partPropsWithRowValue as at,partRowValue as ct}from"../lib/puck/part-rows.js";import{PART_WIDTH_MAX as dt,propsWithPartStyleValue as K,propsWithoutPartStyle as ut,readPartStyle as we}from"../lib/puck/part-styles.js";import{partInks as ft}from"../lib/puck/part-inks.js";import{styleKeyForPart as pt}from"../lib/sections/section-text-kinds.js";import{commitPartText as mt}from"../lib/puck/part-typing.js";import{keysOnCanvas as ht,useCanvasTypingPart as yt}from"../lib/puck/canvas-typing.js";import{useEditorHost as gt}from"../lib/editor-host.js";import{SOURCE_LINES as bt,SOURCE_ACTIONS as xt,SOURCE_ACTION_LABEL as St,partSourceOf as Pt,sourceSlugOf as ve}from"../lib/puck/source-bound-parts.js";import{encodePartId as wt,holdsAuthoredText as vt}from"../lib/puck/text-parts.js";import{regionsForSection as Tt}from"../lib/sections/section-text-regions.js";import{textRegionOfPartKey as kt}from"../lib/sections/text-regions.js";function ne(t){return t?l(t):null}function Te(t){return t.kind==="role"?ee[t.role]:t.kind==="custom"?"Custom":null}function Nt(t){const o=t.role;return o&&Z.includes(o)?{kind:"role",role:o}:null}function Ot(t,o){if(!t)return{kind:"unread"};const{faceRole:s,base:r}=t;if(o[s]===r.fontKey)return{kind:"role",role:s};const c=Object.keys(o).filter(i=>o[i]===r.fontKey);return c.length===1?{kind:"role",role:c[0]}:{kind:"custom"}}function oe(t,o,s,r){return Nt(we(t,o))??Ot(s,r)}function Ct(t,o){if(!t.length)return null;const s=o(t[0]);return t.every(r=>o(r)===s)?s:null}const B="";function Et({face:t,base:o,onPick:s}){const r=t.kind==="role"?t.role:B,c=[{label:l("No style"),value:B},...Z.map(i=>({label:l(ee[i]),value:i}))];return n(Be,{ariaLabel:l("Style"),value:r,options:c,inline:!0,onChange:i=>s(i===B?null:i),renderOption:i=>i.value===B?h(J,{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(${te(o.fontKey)?.cssVar})`:void 0,fontWeight:o?.weight},children:ne(Te(t))}),valueText:i=>ne(Te(t))??i?.label??""})}function Rt({sectionName:t,onBack:o,textEditor:s,styleRow:r,children:c}){return h("div",{className:"sf-part-panel",children:[n(L,{inline:!0,name:l(t),onSelect:o}),s,r,c]})}function ke({source:t,slug:o}){const s=gt(),r=xt[t],c=!r.needsSlug||!!o;return n("div",{className:"sf-note sf-note--source",children:h("p",{className:"es-field-hint sf-hint-keep",children:[l(bt[t]),c?h(J,{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(St)})]}):null]})})}const Ne=4,_t=120;function Ft({region:t,sizePx:o,face:s,base:r,onFollowStyle:c,source:i,slug:j,onBack:S}){const E=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(E),px:Math.round(o)}):l("Its size follows Site styles ▸ {follows}.",{follows:l(E)})}),c?n(J,{children:n(Ge,{label:l("Style"),icon:n(Me,{}),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(Et,{face:s,base:r,onPick:c})})}):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(ke,{source:i,slug:j}):null,n(L,{inline:!0,name:l("Page"),onSelect:S})]})}function It({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(L,{inline:!0,name:l("Page"),onSelect:t})]})}function zt({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(L,{inline:!0,name:l("Page"),onSelect:t})]})}function At({nodeId:t,propKey:o,onBack:s,onEditStyle:r}){const{getItemById:c,getSelectorForId:i,config:j}=We(e=>e),S=tt(),E=yt(),{partStyle:R}=Je(),{fonts:_,textStyles:Oe}=Xe(),Ce=qe()==="mobile",le=Le(null),d=c(t),f=i(t),se=d?j.components[d.type]:void 0,{key:x,row:b}=it(o),re=se?.fields?.[x],y=b?rt(re,b):re,P=wt(t,o),p=d?.props??{},g=st(y),ie=Qe(y),ae=vt(y),G=d?Pt(d.type):null,M=b?ct(p[x],b):p[x],ce=!!b&&!(Array.isArray(p[x])&&b.index<p[x].length);Q(()=>{if(ht(document))return;le.current?.querySelector(".es-copy [contenteditable='true'], .es-copy textarea, .sf-copybox textarea, .sf-copybox input")?.focus()},[P]);const[U,de]=Ve(0);Q(()=>de(0),[P]);const W=!!d&&!ce&&(!f||!y);Q(()=>{if(!W||U>=Ne)return;const e=setTimeout(()=>de(a=>a+1),_t);return()=>clearTimeout(e)},[W,U]);const Ee=W&&U<Ne;if(!d||ce)return n(It,{onBack:s});const F=Tt(d.type),ue=F?kt(F,o):null;if(F&&ue){const e=R?.partId===P?R:null,a=F[ue],u=a.writable===!0&&!!f,C=q=>{f&&S.replaceComponent(f.zone,f.index,{...d,props:K(p,o,"role",q)})};return n(Ft,{region:a,sizePx:e?.base.sizePx??null,face:oe(p,o,e,_),base:e?.base??null,onFollowStyle:u?C:void 0,source:G,slug:ve(p),onBack:s})}if(!f||!y)return Ee?n("div",{className:"sf-note","aria-busy":"true"}):n(zt,{onBack:s,partId:P,why:f?"no field":"no selector"});const fe=e=>{S.replaceComponent(f.zone,f.index,{...d,props:e})},D=e=>{if(V(e).hidden!==V(M).hidden||!g){const u=b?at(p,x,b,e):{...p,[x]:e};u&&fe(u);return}mt({node:d,propKey:o,kind:g,zone:f.zone,index:f.index},V(e).text,S.replaceComponent)},Re=M,w=R?.partId===P?R:null,v=w?.styleOwner,I=v?c(v.owner):null,H=v&&I?i(v.owner):null,$=!!(v&&I&&H),T=$?I.props??{}:p,Y=$?e=>S.replaceComponent(H.zone,H.index,{...I,props:e}):fe,z=$?v.kind:pt(d?.type,o),k=we(T,z),m=[{partKey:z,face:oe(T,z,w,_),sizeGroup:w?.sizeGroup??null,base:w?.base??Kt,style:k}],_e=Ct(m,e=>e.sizeGroup),Fe=ft(w?.inks),O=(e,a)=>{let u=T;for(const C of m)u=K(u,C.partKey,e,a);Y(u)},Ie=e=>O("role",e),pe=e=>{let a=T;for(const u of m)for(const[C,q]of Object.entries(e))a=K(a,u.partKey,C,q??null);Y(a)},X=g==="text"||g==="textarea",{text:me,hidden:N}=V(M),A=y?.[et]?.label??o,he=N?l("Show {label} on the slide",{label:l(A)}):l("Hide {label} on the slide",{label:l(A)}),ye=h("div",{className:"sf-field-head",children:[n(Ue,{}),n("span",{className:"sf-field-label sf-field-label--inline",children:l(A)}),X&&n(He,{content:he,children:n("button",{type:"button",className:"sf-field-eye","aria-pressed":N,"aria-label":he,onClick:()=>D({text:me,hidden:!N}),children:N?n(Pe,{name:"eye-off",size:14}):n(Pe,{name:"eye",size:14})})})]}),ge=!ie&&ae,ze=!!g&&(Ze(y)||ie||N||!ae||g!=="plainText"),be=oe(T,z,w,_),xe=be.kind==="role"?be.role:null,Se=Object.entries(k).filter(([e,a])=>e!=="role"&&a!==void 0).length,Ae=()=>{let e=T;for(const a of m){const u=a.style.role;e=ut(e,a.partKey),u&&(e=K(e,a.partKey,"role",u))}Y(e)};return h(Rt,{sectionName:se?.label??d.type,onBack:s,textEditor:n("div",{ref:le,className:"sf-part-text",children:ze?n($e,{text:me,onTextChange:e=>D(X?{text:e,hidden:N}:e),multiline:ot(g),markup:g!=="plainText",styled:!1,style:m[0].style,base:m[0].base,setValue:pe,colors:Fe.map(e=>({name:e.key,label:l(e.name),value:e.value})),placeholder:ne(lt(y))??void 0,ariaLabel:l(A),head:ye,typedOnCanvas:E===P}):g?X?ye:null:n(je,{field:y,name:o,value:Re,onChange:D,id:`sf-part-${t}-${o}`})}),children:[G&&n(ke,{source:G,slug:ve(p)}),ge&&n(De,{style:{value:xe??"",options:[{value:"",label:l("No style"),description:l("Section’s own")},...Z.map(e=>({value:e,label:l(ee[e]),description:te(_[e])?.label}))],onChange:e=>Ie(e||null),changed:Se>0,onClearChanges:Se>0?Ae:void 0,onEditStyles:r},font:{value:k.font??"",styleValue:te(m[0].base.fontKey)?.label,options:nt.map(e=>({label:e.label,value:e.key})),onChange:e=>O("font",e||null)},italic:{value:k.italic,styleValue:Vt(Oe,xe),onChange:e=>O("italic",e??null)},cells:Ye(m[0].style,m[0].base,pe,{phone:Ce}),align:{value:k.align??"",styleValue:m[0].base.align,onChange:e=>O("align",e||null)},letterCase:{value:k.case??"",styleValue:m[0].base.case,onChange:e=>O("case",e||null)}}),ge&&_e===null&&n("p",{className:"es-field-hint sf-hint-keep",children:l("Fixed size — the site’s Text setting doesn’t resize this.")})]})}const Lt={heading:"heading-1",heading2:"heading-2",heading3:"heading-3",body:"body-1",label:"body-5"};function Vt(t,o){const s=o?Lt[o]:void 0;return!s||!Array.isArray(t)?!1:t.find(c=>c?.id===s)?.values?.italic===!0}const Kt={fontKey:"",sizePx:16,weight:400,lineRatio:1.4,letterEm:0,align:"left",case:"none",paddingPx:0,widthPx:dt};export{Rt as PartPanelBody,Ke as PartResetDot,ke as PartSourceNote,Et as PartStyleSelect,At as default,oe as partFace};
1
+ "use client";import{jsx as t,Fragment as ne,jsxs as h}from"react/jsx-runtime";import{useContext as Xe,useEffect as oe,useRef as Ye,useState as ke}from"react";import{PartResetDot as qe}from"./PartResetDot.js";import{FieldSelect as Je,InspectorField as Qe}from"efficient-easel/fields";import{SettingsField as Ze}from"efficient-easel/panel";import{InspectorUpLevel as K}from"efficient-easel/chrome";import{StylesIcon as et,TypeIcon as tt}from"efficient-easel/icons";import{useEasel as nt}from"efficient-easel/easel";import{TextPartPanel as ot}from"efficient-easel/copy";import{Tooltip as st}from"efficient-shell/ui";import{PartTextBox as lt,partTextCells as rt}from"./PartTextBox.js";import Re from"./UiIcon.js";import{usePreviewHeader as it}from"./PreviewHeaderContext.js";import{UpdateStyleDialog as at}from"./UpdateStyleDialog.js";import{StorefrontDocumentContext as ct}from"./StorefrontDocumentContext.js";import{hasStyleChange as dt,partStyleToTextStyleValues as ut,pushIntoStyle as ft,resolveTextStyles as pt,styleIdOfRole as Oe}from"../lib/site-text-styles.js";import{useSiteTextStylesWriter as mt}from"../lib/site-text-styles-writer.js";import{useThemeRowPersist as ht}from"../lib/theme-row-persist.js";import{usePreviewDevice as yt}from"./PreviewDeviceContext.js";import{usePartStyle as gt}from"./PreviewPartStyleContext.js";import{say as s}from"../lib/editor-words.js";import{readHidable as U,textFieldOffPage as bt,textFieldPanelOnly as St}from"../lib/puck/controls.js";import{TEXT_FIELD_MARKER as xt}from"../lib/puck/field-markers.js";import{useSectionOps as Pt}from"../lib/puck/use-section-ops.js";import{FONT_OPTIONS as wt,FONT_ROLES as se,FONT_ROLE_LABELS as le,fontOption as re}from"../lib/fonts.js";import{isMultilineKind as Tt,partPlaceholder as vt,typeInPlaceKind as Ct}from"../lib/puck/part-text.js";import{partRowField as Nt}from"../lib/puck/part-row-field.js";import{decodePartKey as kt,partPropsWithRowValue as Rt,partRowValue as Ot}from"../lib/puck/part-rows.js";import{PART_WIDTH_MAX as Et,propsWithPartStyleValue as B,propsWithoutPartStyle as It,readPartStyle as Ee}from"../lib/puck/part-styles.js";import{partThemeColors as Ft}from"../lib/puck/part-inks.js";import{styleKeyForPart as _t}from"../lib/sections/section-text-kinds.js";import{commitPartText as zt}from"../lib/puck/part-typing.js";import{keysOnCanvas as At,useCanvasTypingPart as Vt}from"../lib/puck/canvas-typing.js";import{useEditorHost as Lt}from"../lib/editor-host.js";import{SOURCE_LINES as Kt,SOURCE_ACTIONS as Ut,SOURCE_ACTION_LABEL as Bt,partSourceOf as Dt,sourceSlugOf as Ie}from"../lib/puck/source-bound-parts.js";import{encodePartId as Wt,holdsAuthoredText as jt}from"../lib/puck/text-parts.js";import{regionsForSection as Gt}from"../lib/sections/section-text-regions.js";import{textRegionOfPartKey as Mt}from"../lib/sections/text-regions.js";function ie(n){return n?s(n):null}function Fe(n){return n.kind==="role"?le[n.role]:n.kind==="custom"?"Custom":null}function Ht(n){const o=n.role;return o&&se.includes(o)?{kind:"role",role:o}:null}function $t(n,o){if(!n)return{kind:"unread"};const{faceRole:l,base:r}=n;if(o[l]===r.fontKey)return{kind:"role",role:l};const c=Object.keys(o).filter(i=>o[i]===r.fontKey);return c.length===1?{kind:"role",role:c[0]}:{kind:"custom"}}function ae(n,o,l,r){return Ht(Ee(n,o))??$t(l,r)}function Xt(n,o){if(!n.length)return null;const l=o(n[0]);return n.every(r=>o(r)===l)?l:null}const D="";function Yt({face:n,base:o,onPick:l}){const r=n.kind==="role"?n.role:D,c=[{label:s("No style"),value:D},...se.map(i=>({label:s(le[i]),value:i}))];return t(Je,{ariaLabel:s("Style"),value:r,options:c,inline:!0,onChange:i=>l(i===D?null:i),renderOption:i=>i.value===D?h(ne,{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:s("Section’s own")})]}):t("span",{className:"es-fsel-label",style:{fontFamily:`var(--font-role-${i.value})`},children:i.label}),renderValue:()=>t("span",{style:{fontFamily:o?.fontKey?`var(${re(o.fontKey)?.cssVar})`:void 0,fontWeight:o?.weight},children:ie(Fe(n))}),valueText:i=>ie(Fe(n))??i?.label??""})}function qt({sectionName:n,onBack:o,textEditor:l,styleRow:r,children:c}){return h("div",{className:"sf-part-panel",children:[t(K,{inline:!0,name:s(n),onSelect:o}),l,r,c]})}function _e({source:n,slug:o}){const l=Lt(),r=Ut[n],c=!r.needsSlug||!!o;return t("div",{className:"sf-note sf-note--source",children:h("p",{className:"es-field-hint sf-hint-keep",children:[s(Kt[n]),c?h(ne,{children:[" ",t("button",{type:"button",className:"sf-source-open",onClick:()=>{r.type==="storefront-editor:open-menus"?l.send(r.type):o&&l.send(r.type,{slug:o})},children:s(Bt)})]}):null]})})}const ze=4,Jt=120;function Qt({region:n,sizePx:o,face:l,base:r,onFollowStyle:c,source:i,slug:W,onBack:P}){const I=n.follows;return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:s(n.label)})}),t("p",{children:o?s("Its size follows Site styles ▸ {follows} — {px}px right now.",{follows:s(I),px:Math.round(o)}):s("Its size follows Site styles ▸ {follows}.",{follows:s(I)})}),c?t(ne,{children:t(Ze,{label:s("Style"),icon:t(et,{}),hint:s("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:s(n.label).toLowerCase()}),children:t(Yt,{face:l,base:r,onPick:c})})}):t("p",{className:"es-field-hint sf-hint-keep",children:s("Only the size follows a site style. This section sets its own font, weight and letter case.")}),i?t(_e,{source:i,slug:W}):null,t(K,{inline:!0,name:s("Page"),onSelect:P})]})}function Zt({onBack:n}){return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:s("This part is no longer here.")})}),t("p",{children:s("The section it belonged to has been changed or removed.")}),t(K,{inline:!0,name:s("Page"),onSelect:n})]})}function en({onBack:n,partId:o,why:l}){return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:s("This part's settings did not open.")})}),t("p",{children:s("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:h("code",{children:[o," — ",l]})}),t(K,{inline:!0,name:s("Page"),onSelect:n})]})}function tn({nodeId:n,propKey:o,onBack:l,onEditStyle:r}){const{getItemById:c,getSelectorForId:i,config:W}=nt(e=>e),P=Pt(),I=Vt(),{partStyle:F}=gt(),{fonts:_,textStyles:Ae}=it(),j=Xe(ct),ce=!j?.capabilities?.hasSiteTheme,{persist:Ve}=ht({themeFromDocument:ce,tokenRef:j?.tokenRef,siteId:j?.siteId??null}),R=mt({themeFromDocument:ce,persist:Ve}),[Le,G]=ke(!1),Ke=yt()==="mobile",de=Ye(null),d=c(n),p=i(n),ue=d?W.components[d.type]:void 0,{key:S,row:g}=kt(o),fe=ue?.fields?.[S],y=g?Nt(fe,g):fe,w=Wt(n,o),m=d?.props??{},b=Ct(y),pe=bt(y),me=jt(y),M=d?Dt(d.type):null,H=g?Ot(m[S],g):m[S],he=!!g&&!(Array.isArray(m[S])&&g.index<m[S].length);oe(()=>{if(At(document))return;de.current?.querySelector(".es-copy [contenteditable='true'], .es-copy textarea, .sf-copybox textarea, .sf-copybox input")?.focus()},[w]);const[$,ye]=ke(0);oe(()=>ye(0),[w]);const X=!!d&&!he&&(!p||!y);oe(()=>{if(!X||$>=ze)return;const e=setTimeout(()=>ye(a=>a+1),Jt);return()=>clearTimeout(e)},[X,$]);const Ue=X&&$<ze;if(!d||he)return t(Zt,{onBack:l});const z=Gt(d.type),ge=z?Mt(z,o):null;if(z&&ge){const e=F?.partId===w?F:null,a=z[ge],f=a.writable===!0&&!!p,E=te=>{p&&P.replaceComponent(p.zone,p.index,{...d,props:B(m,o,"role",te)})};return t(Qt,{region:a,sizePx:e?.base.sizePx??null,face:ae(m,o,e,_),base:e?.base??null,onFollowStyle:f?E:void 0,source:M,slug:Ie(m),onBack:l})}if(!p||!y)return Ue?t("div",{className:"sf-note","aria-busy":"true"}):t(en,{onBack:l,partId:w,why:p?"no field":"no selector"});const be=e=>{P.replaceComponent(p.zone,p.index,{...d,props:e})},Y=e=>{if(U(e).hidden!==U(H).hidden||!b){const f=g?Rt(m,S,g,e):{...m,[S]:e};f&&be(f);return}zt({node:d,propKey:o,kind:b,zone:p.zone,index:p.index},U(e).text,P.replaceComponent)},Be=H,T=F?.partId===w?F:null,v=T?.styleOwner,A=v?c(v.owner):null,q=v&&A?i(v.owner):null,J=!!(v&&A&&q),C=J?A.props??{}:m,Q=J?e=>P.replaceComponent(q.zone,q.index,{...A,props:e}):be,V=J?v.kind:_t(d?.type,o),N=Ee(C,V),u=[{partKey:V,face:ae(C,V,T,_),sizeGroup:T?.sizeGroup??null,base:T?.base??on,style:N}],De=Xt(u,e=>e.sizeGroup),We=Ft(T?.inks),O=(e,a)=>{let f=C;for(const E of u)f=B(f,E.partKey,e,a);Q(f)},je=e=>O("role",e),Se=e=>{let a=C;for(const f of u)for(const[E,te]of Object.entries(e))a=B(a,f.partKey,E,te??null);Q(a)},Z=b==="text"||b==="textarea",{text:xe,hidden:k}=U(H),L=y?.[xt]?.label??o,Pe=k?s("Show {label} on the slide",{label:s(L)}):s("Hide {label} on the slide",{label:s(L)}),we=h("div",{className:"sf-field-head",children:[t(tt,{}),t("span",{className:"sf-field-label sf-field-label--inline",children:s(L)}),Z&&t(st,{content:Pe,children:t("button",{type:"button",className:"sf-field-eye","aria-pressed":k,"aria-label":Pe,onClick:()=>Y({text:xe,hidden:!k}),children:k?t(Re,{name:"eye-off",size:14}):t(Re,{name:"eye",size:14})})})]}),Te=!pe&&me,Ge=!!b&&(St(y)||pe||k||!me),ve=ae(C,V,T,_),ee=ve.kind==="role"?ve.role:null,Ce=Object.entries(N).filter(([e,a])=>e!=="role"&&a!==void 0).length,Ne=()=>{let e=C;for(const a of u){const f=a.style.role;e=It(e,a.partKey),f&&(e=B(e,a.partKey,"role",f))}Q(e)},x=Oe(ee),Me=dt(u[0].style),He=x?pt(R.saved,R.old).find(e=>e.id===x)?.name??x:"",$e=()=>{G(!1),x&&(R.write(ft({saved:R.saved,old:R.old,styleId:x,values:ut(u[0].style)}),!0),Ne())};return h(qt,{sectionName:ue?.label??d.type,onBack:l,textEditor:t("div",{ref:de,className:"sf-part-text",children:Ge?t(lt,{text:xe,onTextChange:e=>Y(Z?{text:e,hidden:k}:e),multiline:Tt(b),markup:b!=="plainText",styled:!1,style:u[0].style,base:u[0].base,setValue:Se,colors:We,placeholder:ie(vt(y))??void 0,ariaLabel:s(L),head:we,typedOnCanvas:I===w}):b?Z?we:null:t(Qe,{field:y,name:o,value:Be,onChange:Y,id:`sf-part-${n}-${o}`})}),children:[M&&t(_e,{source:M,slug:Ie(m)}),Te&&t(ot,{style:{value:ee??"",options:[{value:"",label:s("No style"),description:s("Section’s own")},...se.map(e=>({value:e,label:s(le[e]),description:re(_[e])?.label}))],onChange:e=>je(e||null),changed:Ce>0,onClearChanges:Ce>0?Ne:void 0,onEditStyles:r,onUpdateStyle:x&&Me?()=>G(!0):void 0},font:{value:N.font??"",styleValue:re(u[0].base.fontKey)?.label,options:wt.map(e=>({label:e.label,value:e.key})),onChange:e=>O("font",e||null)},italic:{value:N.italic,styleValue:nn(Ae,ee),onChange:e=>O("italic",e??null)},cells:rt(u[0].style,u[0].base,Se,{phone:Ke}),align:{value:N.align??"",styleValue:u[0].base.align,onChange:e=>O("align",e||null)},letterCase:{value:N.case??"",styleValue:u[0].base.case,onChange:e=>O("case",e||null)}}),Le&&x&&t(at,{styleName:He,onCancel:()=>G(!1),onConfirm:$e}),Te&&De===null&&t("p",{className:"es-field-hint sf-hint-keep",children:s("Fixed size — the site’s Text setting doesn’t resize this.")})]})}function nn(n,o){const l=Oe(o);return!l||!Array.isArray(n)?!1:n.find(c=>c?.id===l)?.values?.italic===!0}const on={fontKey:"",sizePx:16,weight:400,lineRatio:1.4,letterEm:0,align:"left",case:"none",paddingPx:0,widthPx:Et};export{qt as PartPanelBody,qe as PartResetDot,_e as PartSourceNote,Yt as PartStyleSelect,tn as default,ae as partFace};
@@ -1 +1 @@
1
- import{jsx as r,jsxs as n}from"react/jsx-runtime";import m from"./BlockFrame.js";import{media as p}from"../lib/media.js";import{stripMarkup as o}from"../lib/markup.js";import{renderGold as t}from"./goldPhrases.js";function x({heading:l,badges:c,assurances:s,contained:i}){return r(m,{contained:i,className:"py-6",children:n("div",{className:"flex flex-col items-center gap-5 border-y border-line py-8 text-center",children:[l&&r("span",{className:"font-mono text-[13px] uppercase tracking-[0.3em] opacity-70",children:t(l)}),c.length>0&&r("ul",{className:"flex flex-wrap items-center justify-center gap-3",children:c.map((e,a)=>r("li",{className:"sf-card flex h-10 items-center border border-line bg-surface px-4",children:e.src?r("img",{src:p(e.src),alt:o(e.label||""),className:"max-h-5 w-auto opacity-90"}):e.label&&r("span",{className:"font-mono text-[12px] uppercase tracking-[0.18em]",children:t(e.label)})},a))}),s.length>0&&r("ul",{className:"flex flex-wrap items-center justify-center gap-x-6 gap-y-1",children:s.map((e,a)=>e.text&&n("li",{className:"flex items-center gap-2 text-[13px] opacity-60",children:[r("span",{className:"h-1 w-1 rounded-full bg-accent","aria-hidden":!0}),t(e.text)]},a))})]})})}export{x as default};
1
+ import{jsx as r,jsxs as i}from"react/jsx-runtime";import n from"./BlockFrame.js";import{media as o}from"../lib/media.js";import{sizedImage as p}from"../lib/sized-image.js";import{stripMarkup as d}from"../lib/markup.js";import{renderGold as c}from"./goldPhrases.js";function x({heading:a,badges:t,assurances:l,contained:m}){return r(n,{contained:m,className:"py-6",children:i("div",{className:"flex flex-col items-center gap-5 border-y border-line py-8 text-center",children:[a&&r("span",{className:"font-mono text-[13px] uppercase tracking-[0.3em] opacity-70",children:c(a)}),t.length>0&&r("ul",{className:"flex flex-wrap items-center justify-center gap-3",children:t.map((e,s)=>r("li",{className:"sf-card flex h-10 items-center border border-line bg-surface px-4",children:e.src?r("img",{...f(o(e.src)),alt:d(e.label||""),className:"max-h-5 w-auto opacity-90"}):e.label&&r("span",{className:"font-mono text-[12px] uppercase tracking-[0.18em]",children:c(e.label)})},s))}),l.length>0&&r("ul",{className:"flex flex-wrap items-center justify-center gap-x-6 gap-y-1",children:l.map((e,s)=>e.text&&i("li",{className:"flex items-center gap-2 text-[13px] opacity-60",children:[r("span",{className:"h-1 w-1 rounded-full bg-accent","aria-hidden":!0}),c(e.text)]},s))})]})})}function f(a){const t=p(a,{fallbackWidth:320,maxWidth:640});return t.srcSet?{src:t.src,srcSet:t.srcSet,sizes:"120px"}:{src:a}}export{x as default};
@@ -1 +1 @@
1
- "use client";import{jsx as i,jsxs as N}from"react/jsx-runtime";import{useEffect as h,useState as v}from"react";import{SiteImage as x}from"../lib/site-runtime.js";import{isExternalMediaUrl as w}from"../lib/media.js";function E({fallback:o,className:f,src:u,alt:c="",objectPosition:l,objectFit:n="cover",sizes:d="100vw",priority:m=!1,deferFetch:t=!1,showBackground:y=!0,treatment:s}){const[a,r]=v(!1),e=u||"";h(()=>{r(!1)},[e]);const g=w(e),p=!e||a;return N("div",{className:`relative h-full w-full overflow-hidden ${f??""}`,children:[i("div",{className:"absolute inset-0 flex items-center justify-center",style:y?{background:"var(--site-surface)"}:void 0,children:p?o:null}),e&&(g?i("img",{src:e,alt:c,decoding:"async",...t?{loading:"lazy"}:{},className:`absolute inset-0 h-full w-full${s?.className?` ${s.className}`:""}`,style:{display:a?"none":"block",objectFit:n,...l?{objectPosition:l}:{},...s?.style??{}},onError:()=>r(!0)}):i(x,{src:e,alt:c,fill:!0,sizes:d,priority:m,...s?.className?{className:s.className}:{},style:{display:a?"none":"block",objectFit:n,...l?{objectPosition:l}:{},...s?.style??{}},onError:()=>r(!0)}))]})}export{E as default};
1
+ "use client";import{jsx as i,jsxs as x}from"react/jsx-runtime";import{useEffect as w,useState as u}from"react";import{SiteImage as I}from"../lib/site-runtime.js";import{isExternalMediaUrl as E}from"../lib/media.js";import{sizedImage as k}from"../lib/sized-image.js";function z({fallback:m,className:y,src:g,alt:o="",objectPosition:l,objectFit:f="cover",sizes:n="100vw",priority:p=!1,deferFetch:N=!1,showBackground:S=!0,treatment:e}){const[r,c]=u(!1),[h,t]=u(!1),s=g||"";w(()=>{c(!1),t(!1)},[s]);const d=E(s),a=d&&!h?k(s):{src:s},v=!s||r;return x("div",{className:`relative h-full w-full overflow-hidden ${y??""}`,children:[i("div",{className:"absolute inset-0 flex items-center justify-center",style:S?{background:"var(--site-surface)"}:void 0,children:v?m:null}),s&&(d?i("img",{src:a.src,alt:o,...a.srcSet?{srcSet:a.srcSet,sizes:n}:{},decoding:"async",...N?{loading:"lazy"}:{},className:`absolute inset-0 h-full w-full${e?.className?` ${e.className}`:""}`,style:{display:r?"none":"block",objectFit:f,...l?{objectPosition:l}:{},...e?.style??{}},onError:()=>a.srcSet?t(!0):c(!0)}):i(I,{src:s,alt:o,fill:!0,sizes:n,priority:p,...e?.className?{className:e.className}:{},style:{display:r?"none":"block",objectFit:f,...l?{objectPosition:l}:{},...e?.style??{}},onError:()=>c(!0)}))]})}export{z as default};
@@ -1 +1 @@
1
- import{jsx as t,Fragment as o}from"react/jsx-runtime";function c({className:r=""}){return t("sup",{className:`text-accent tracking-normal ${r}`,children:"®"})}function i(r){if(!r.includes("®"))return r;const e=r.split("®"),n=[];return e.forEach((s,a)=>{s&&n.push(s),a<e.length-1&&n.push(t(c,{},`r${a}`))}),t(o,{children:n})}var f=c;export{c as RMark,f as default,i as withRMark};
1
+ import{jsx as n,Fragment as i}from"react/jsx-runtime";function c({className:r=""}){return n("sup",{className:`text-accent tracking-normal text-[length:min(1em,max(0.75em,11px))] ${r}`,children:"®"})}function u(r){if(!r.includes("®"))return r;const e=r.split("®"),t=[];return e.forEach((a,s)=>{a&&t.push(a),s<e.length-1&&t.push(n(c,{},`r${s}`))}),n(i,{children:t})}var m=c;export{c as RMark,m as default,u as withRMark};
@@ -1 +1 @@
1
- import{jsx as a,Fragment as k,jsxs as n}from"react/jsx-runtime";import{SiteLink as O}from"../lib/site-runtime.js";import{media as U}from"../lib/media.js";import{DEFAULT_SECTION_NUMBER_STYLE as L,OUTLINED_NUMBER_CLASS as B,OUTLINED_NUMBER_CSS as R,OUTLINED_NUMBER_LAYOUT as j,parseSectionNumberStyle as D}from"../lib/sections/section-number-style.js";import{DEFAULT_SECTION_EYEBROW_LOOK as I}from"../lib/sections/section-eyebrow-look.js";import{renderGold as C,renderHeadline as F}from"./goldPhrases.js";import m from"./SectionEyebrow.js";const g=(e,t=!1)=>typeof e=="string"?F(e,t):e,d=(e,t=!1)=>typeof e=="string"?C(e,t):e;function A({num:e,title:t,link:c,logo:o,description:s,accent:f,accentNum:_,numStyle:u=L,look:r="standard",titleAccent:v,accentTracking:E="-0.02em",spaceBelow:y,rowGap:z,descriptionSize:$,className:l="",eyebrowLook:h=I}){const x=y??(r==="editorial"?"mb-[60px]":"");if(r==="editorial"){const i=!!t||!!v;return n("header",{className:`${x} grid grid-cols-[auto_1fr_auto] items-end gap-10 border-b border-line pb-8 max-[1100px]:grid-cols-1 max-[1100px]:gap-3.5 ${l}`.trim(),children:[e&&(typeof e=="string"?a(m,{text:e,className:"pb-2"}):a("span",{className:"pb-2",children:e})),i&&n("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,clamp(40px,5.5vw,80px)),var(--sf-heading-max,9999px))] font-medium uppercase leading-none tracking-[-0.03em]",children:[t,v&&n(k,{children:[" ",a("em",{className:"font-serif font-normal italic text-accent",style:{letterSpacing:E},children:v})]})]}),s&&a("p",{className:"max-w-[360px] pb-1 text-right font-display text-[length:var(--size-body,14px)] leading-[1.5] text-fg-dim max-[1100px]:max-w-full max-[1100px]:text-left",children:s})]})}if(r==="simple"){const i=`${x} ${l}`.trim();return n("div",{className:i||void 0,children:[e&&(typeof e=="string"?a(m,{text:e,look:h,className:"mb-4 block"}):a("span",{className:"mb-4 block",children:e})),t&&a("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium uppercase leading-none tracking-[-0.02em] text-fg max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:g(t)})]})}if(r==="statement"){const i=`${x} ${l}`.trim();return n("div",{className:i||void 0,children:[e&&(typeof e=="string"?a(m,{text:e,look:h,className:"mb-4 block"}):a("span",{className:"mb-4 block",children:e})),t&&a("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,clamp(40px,5vw,72px)),var(--sf-heading-max,9999px))] font-medium uppercase leading-none tracking-[-0.03em] text-fg",children:g(t,!0)})]})}if(r==="natural"){const i=`flex max-w-[680px] flex-col ${z??"gap-5"} ${x} ${l}`.replace(/\s+/g," ").trim();return n("div",{className:i,children:[e&&(typeof e=="string"?a(m,{text:e,look:h}):a("span",{children:e})),t&&a("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium leading-[1.05] tracking-[-0.03em] max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:g(t)}),s&&a("p",{className:`${$??"text-[length:var(--size-body,16px)]"} leading-[1.6] opacity-85`,children:s})]})}if(r==="essay"){const i=`${x} ${l}`.trim();return n("div",{className:i||void 0,children:[e&&(typeof e=="string"?a(m,{text:e,look:h,className:"mb-4 block"}):a("span",{className:"mb-4 block",children:e})),t&&a("h2",{className:"font-heading2 text-[length:var(--sf-heading-max,var(--size-headingMedium,38px))] [font-weight:var(--sf-heading-weight,500)] [text-transform:var(--sf-heading-case,uppercase)] [&_em]:[font-weight:var(--sf-heading-weight-strong,inherit)] leading-none tracking-[-0.02em] text-fg max-[800px]:text-[length:var(--size-headingSmall,28px)]",children:g(t)})]})}const M=!!s||!!c,S=!!t,N=D(u)==="outlined",b="font-mono text-[length:var(--size-label,14px)] uppercase tracking-[0.3em]";let p=null;if(e)if(N)p=a("span",{className:`${j} text-fg-dim ${B}`,children:d(e)});else if(_&&!f&&typeof e=="string"){const i=e.indexOf("/"),T=i===-1?e:e.slice(0,i),w=i===-1?"":e.slice(i);p=n("span",{className:b,children:[a("span",{className:"text-accent",children:d(T)}),w&&a("span",{className:"text-fg-dim",children:d(w)})]})}else p=a("span",{className:`${b} ${f?"text-accent":"text-fg-dim"}`,children:d(e)});return n("div",{className:"mb-16 grid grid-cols-[auto_1fr_auto] items-end gap-10 border-b border-line pb-6 max-[800px]:mb-9 max-[800px]:grid-cols-1 max-[800px]:gap-3 max-[800px]:pb-5",children:[N&&e&&a("style",{children:R}),n("div",{className:"flex flex-col items-start gap-3",children:[o?.src&&a("img",{src:U(o.src),alt:o.alt,className:"h-8 w-auto object-contain"}),p]}),S&&a("h2",{className:f?"font-heading2 text-[length:min(var(--size-headingMedium,clamp(36px,5vw,64px)),var(--sf-heading-max,9999px))] [font-weight:var(--sf-heading-weight,500)] [text-transform:var(--sf-heading-case,uppercase)] [&_em]:[font-weight:var(--sf-heading-weight-strong,inherit)] leading-[0.95] tracking-[-0.025em]":"font-heading2 text-[length:min(var(--size-headingMedium,56px),var(--sf-heading-max,9999px))] [font-weight:var(--sf-heading-weight,500)] [&_em]:[font-weight:var(--sf-heading-weight-strong,inherit)] leading-none tracking-[-0.03em] whitespace-pre-line max-[800px]:text-[length:min(var(--size-headingMedium,36px),var(--sf-heading-max,9999px))] max-[800px]:leading-[1]",children:g(t)}),M&&n("div",{className:"flex flex-col items-end gap-3 max-[800px]:items-start",children:[s&&a("p",{className:"max-w-[340px] font-display text-[length:var(--size-body,14px)] leading-[1.5] text-fg-dim text-right max-[800px]:max-w-full max-[800px]:text-left",children:d(s)}),c&&n(O,{href:c.href,className:"inline-flex items-center gap-2 whitespace-nowrap font-mono text-[length:var(--size-label,14px)] uppercase tracking-[0.2em] text-fg-dim transition-colors hover:text-fg",children:[d(c.text),a("span",{"aria-hidden":!0,children:"→"})]})]})]})}export{A as default};
1
+ import{jsx as a,Fragment as T,jsxs as n}from"react/jsx-runtime";import{SiteLink as O}from"../lib/site-runtime.js";import{media as U}from"../lib/media.js";import{sizedImage as L}from"../lib/sized-image.js";import{DEFAULT_SECTION_NUMBER_STYLE as I,OUTLINED_NUMBER_CLASS as B,OUTLINED_NUMBER_CSS as R,OUTLINED_NUMBER_LAYOUT as j,parseSectionNumberStyle as D}from"../lib/sections/section-number-style.js";import{DEFAULT_SECTION_EYEBROW_LOOK as C}from"../lib/sections/section-eyebrow-look.js";import{renderGold as F,renderHeadline as A}from"./goldPhrases.js";import x from"./SectionEyebrow.js";const c=(e,t=!1)=>typeof e=="string"?A(e,t):e,d=(e,t=!1)=>typeof e=="string"?F(e,t):e;function H({num:e,title:t,link:g,logo:o,description:s,accent:f,accentNum:_,numStyle:u=I,look:r="standard",titleAccent:v,accentTracking:z="-0.02em",spaceBelow:E,rowGap:S,descriptionSize:y,className:l="",eyebrowLook:h=C}){const m=E??(r==="editorial"?"mb-[60px]":"");if(r==="editorial"){const i=!!t||!!v;return n("header",{className:`${m} grid grid-cols-[auto_1fr_auto] items-end gap-10 border-b border-line pb-8 max-[1100px]:grid-cols-1 max-[1100px]:gap-3.5 ${l}`.trim(),children:[e&&(typeof e=="string"?a(x,{text:e,className:"pb-2"}):a("span",{className:"pb-2",children:e})),i&&n("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,clamp(40px,5.5vw,80px)),var(--sf-heading-max,9999px))] font-medium uppercase leading-none tracking-[-0.03em]",children:[t,v&&n(T,{children:[" ",a("em",{className:"font-serif font-normal italic text-accent",style:{letterSpacing:z},children:v})]})]}),s&&a("p",{className:"max-w-[360px] pb-1 text-right font-display text-[length:var(--size-body,14px)] leading-[1.5] text-fg-dim max-[1100px]:max-w-full max-[1100px]:text-left",children:s})]})}if(r==="simple"){const i=`${m} ${l}`.trim();return n("div",{className:i||void 0,children:[e&&(typeof e=="string"?a(x,{text:e,look:h,className:"mb-4 block"}):a("span",{className:"mb-4 block",children:e})),t&&a("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium uppercase leading-none tracking-[-0.02em] text-fg max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:c(t)})]})}if(r==="statement"){const i=`${m} ${l}`.trim();return n("div",{className:i||void 0,children:[e&&(typeof e=="string"?a(x,{text:e,look:h,className:"mb-4 block"}):a("span",{className:"mb-4 block",children:e})),t&&a("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,clamp(40px,5vw,72px)),var(--sf-heading-max,9999px))] font-medium uppercase leading-none tracking-[-0.03em] text-fg",children:c(t,!0)})]})}if(r==="natural"){const i=`flex max-w-[680px] flex-col ${S??"gap-5"} ${m} ${l}`.replace(/\s+/g," ").trim();return n("div",{className:i,children:[e&&(typeof e=="string"?a(x,{text:e,look:h}):a("span",{children:e})),t&&a("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium leading-[1.05] tracking-[-0.03em] max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:c(t)}),s&&a("p",{className:`${y??"text-[length:var(--size-body,16px)]"} leading-[1.6] opacity-85`,children:s})]})}if(r==="essay"){const i=`${m} ${l}`.trim();return n("div",{className:i||void 0,children:[e&&(typeof e=="string"?a(x,{text:e,look:h,className:"mb-4 block"}):a("span",{className:"mb-4 block",children:e})),t&&a("h2",{className:"font-heading2 text-[length:var(--sf-heading-max,var(--size-headingMedium,38px))] [font-weight:var(--sf-heading-weight,500)] [text-transform:var(--sf-heading-case,uppercase)] [&_em]:[font-weight:var(--sf-heading-weight-strong,inherit)] leading-none tracking-[-0.02em] text-fg max-[800px]:text-[length:var(--size-headingSmall,28px)]",children:c(t)})]})}const $=!!s||!!g,M=!!t,N=D(u)==="outlined",b="font-mono text-[length:var(--size-label,14px)] uppercase tracking-[0.3em]";let p=null;if(e)if(N)p=a("span",{className:`${j} text-fg-dim ${B}`,children:d(e)});else if(_&&!f&&typeof e=="string"){const i=e.indexOf("/"),k=i===-1?e:e.slice(0,i),w=i===-1?"":e.slice(i);p=n("span",{className:b,children:[a("span",{className:"text-accent",children:d(k)}),w&&a("span",{className:"text-fg-dim",children:d(w)})]})}else p=a("span",{className:`${b} ${f?"text-accent":"text-fg-dim"}`,children:d(e)});return n("div",{className:"mb-16 grid grid-cols-[auto_1fr_auto] items-end gap-10 border-b border-line pb-6 max-[800px]:mb-9 max-[800px]:grid-cols-1 max-[800px]:gap-3 max-[800px]:pb-5",children:[N&&e&&a("style",{children:R}),n("div",{className:"flex flex-col items-start gap-3",children:[o?.src&&a("img",{...W(U(o.src)),alt:o.alt,className:"h-8 w-auto object-contain"}),p]}),M&&a("h2",{className:f?"font-heading2 text-[length:min(var(--size-headingMedium,clamp(36px,5vw,64px)),var(--sf-heading-max,9999px))] [font-weight:var(--sf-heading-weight,500)] [text-transform:var(--sf-heading-case,uppercase)] [&_em]:[font-weight:var(--sf-heading-weight-strong,inherit)] leading-[0.95] tracking-[-0.025em]":"font-heading2 text-[length:min(var(--size-headingMedium,56px),var(--sf-heading-max,9999px))] [font-weight:var(--sf-heading-weight,500)] [&_em]:[font-weight:var(--sf-heading-weight-strong,inherit)] leading-none tracking-[-0.03em] whitespace-pre-line max-[800px]:text-[length:min(var(--size-headingMedium,36px),var(--sf-heading-max,9999px))] max-[800px]:leading-[1]",children:c(t)}),$&&n("div",{className:"flex flex-col items-end gap-3 max-[800px]:items-start",children:[s&&a("p",{className:"max-w-[340px] font-display text-[length:var(--size-body,14px)] leading-[1.5] text-fg-dim text-right max-[800px]:max-w-full max-[800px]:text-left",children:d(s)}),g&&n(O,{href:g.href,className:"inline-flex items-center gap-2 whitespace-nowrap font-mono text-[length:var(--size-label,14px)] uppercase tracking-[0.2em] text-fg-dim transition-colors hover:text-fg",children:[d(g.text),a("span",{"aria-hidden":!0,children:"→"})]})]})]})}function W(e){const t=L(e,{fallbackWidth:640,maxWidth:960});return t.srcSet?{src:t.src,srcSet:t.srcSet,sizes:"240px"}:{src:e}}export{H as default};
@@ -0,0 +1,28 @@
1
+ import { type TextStyle } from "efficient-easel/text-styles";
2
+ export type AccentChange = {
3
+ key: "font";
4
+ value: string;
5
+ } | {
6
+ key: "size";
7
+ value: number | null;
8
+ } | {
9
+ key: "weight";
10
+ value: number | null;
11
+ } | {
12
+ key: "italic";
13
+ value: boolean | null;
14
+ };
15
+ export interface SiteAccentFieldProps {
16
+ font: string;
17
+ size: number | null;
18
+ weight: number | null;
19
+ italic: boolean | null;
20
+ headingWeight: number | null;
21
+ open: boolean;
22
+ onOpenChange: (open: boolean) => void;
23
+ onChange: (change: AccentChange) => void;
24
+ withoutSize?: boolean;
25
+ }
26
+ export declare function accentTextStyle({ font, size, weight, italic, }: Pick<SiteAccentFieldProps, "font" | "size" | "weight" | "italic">): TextStyle;
27
+ export declare function accentChanges(cur: TextStyle, next: TextStyle): AccentChange[];
28
+ export default function SiteAccentField(props: SiteAccentFieldProps): import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as a}from"react/jsx-runtime";import{TextStyleItem as h,TextStylesGroup as r}from"efficient-easel/text-styles";import{SITE_FONTS as g}from"./SiteTextStylesField.js";import{say as c}from"../lib/editor-words.js";const u=["font","size","weight","emphasis"],p=500;function m({font:i,size:o,weight:t,italic:n}){const e={font:i};return o!==null&&(e.size=o),t!==null&&(e.weight=t),n!==null&&(e.italic=n),{id:"accent",kind:"heading",name:c("Accent"),values:e}}function y(i,o){const t=[],n=i.values,e=o.values;return e.font!==n.font&&e.font!==void 0&&t.push({key:"font",value:e.font}),e.size!==n.size&&t.push({key:"size",value:e.size??null}),e.weight!==n.weight&&t.push({key:"weight",value:e.weight??null}),e.italic!==n.italic&&t.push({key:"italic",value:e.italic??null}),t}function d(i){const{headingWeight:o,open:t,onOpenChange:n,onChange:e,withoutSize:f=!1}=i,s=m(i);return a(r,{label:c("Accent"),children:a(h,{style:s,fonts:g,settings:f?u.filter(l=>l!=="size"):u,auto:["size"],fallback:()=>({weight:o??p}),open:t,onOpenChange:n,onChange:l=>y(s,l).forEach(e)})})}export{y as accentChanges,m as accentTextStyle,d as default};
@@ -0,0 +1,17 @@
1
+ import { type TextStyleColour, type TextStyleFont } from "efficient-easel/text-styles";
2
+ import { type OldSiteText, type StoredTextStyle } from "../lib/site-text-styles.js";
3
+ export declare const SITE_FONTS: TextStyleFont[];
4
+ export default function SiteTextStylesField({ saved, old, colours, sizeOf, onChange, openId, onOpenChange, readOnly, withoutSize, }: {
5
+ saved: unknown;
6
+ old: OldSiteText;
7
+ colours: readonly TextStyleColour[];
8
+ sizeOf: (style: StoredTextStyle) => number;
9
+ onChange: (next: {
10
+ saved: StoredTextStyle[];
11
+ old: OldSiteText;
12
+ }) => void;
13
+ openId?: string | null;
14
+ onOpenChange?: (id: string | null) => void;
15
+ readOnly?: boolean;
16
+ withoutSize?: boolean;
17
+ }): import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as h}from"react/jsx-runtime";import{useState as y}from"react";import{TextStylesList as O}from"efficient-easel/text-styles";import{FONT_OPTIONS as x}from"../lib/fonts.js";import{applyListChange as I,resolveTextStyles as _,toPanelStyles as C}from"../lib/site-text-styles.js";const c=["font","color","size","weight","emphasis","lineSpacing","letterSpacing","paragraphSpacing","letterCase","largestSize"],E=["size","lineSpacing","letterSpacing","letterCase"],L=500,N=x.map(e=>({value:e.key,label:e.label,family:`var(${e.cssVar})`,italic:e.italicLoaded}));function b({saved:e,old:a,colours:p,sizeOf:s,onChange:f,openId:l,onOpenChange:S,readOnly:g=!1,withoutSize:d=!1}){const[u,m]=y(null),o=_(e,a),r=C(o,s);return h(O,{styles:r,onChange:t=>f(I({saved:e,old:a,cur:r,next:t,sizeOf:s})),fonts:N,colours:p,settings:d?c.filter(t=>t!=="size"):c,auto:E,openId:l===void 0?u:l,onOpenChange:S??m,readOnly:g,fallback:t=>{const n=o.find(T=>T.id===(t.kind==="heading"?"heading-1":"body-1")),i={};return n?.values.font&&t.id!==n.id&&(i.font=n.values.font),t.kind==="heading"&&(i.weight=L),i}})}export{N as SITE_FONTS,b as default};
@@ -1 +1 @@
1
- "use client";import{jsx as r,Fragment as R,jsxs as k}from"react/jsx-runtime";import{useEasel as x}from"efficient-easel/easel";import{LayersIcon as C}from"efficient-easel/icons";import{SettingsDrill as b,SettingsField as F}from"efficient-easel/panel";import _ from"./AddBlockRow.js";import j from"./AddChildRow.js";import{useSlotChildActions as D}from"./SlotChildActionsContext.js";import{HERO_GROUP_TYPE as I,heroGroupNestDepth as O}from"../lib/hero-group-placement.js";import{canAddTo as p}from"../lib/puck/add-target.js";import{say as $}from"../lib/editor-words.js";function E({parent:o,parentType:t,label:s,rowName:n,onSelectChild:e,onAddChild:l,nestDepth:a=0}){const f=p(t,a);if(!f)return null;const{slot:c,choices:h,spec:d}=f,u=String(o.props.id),g=`${u}:${c}`,i=Array.isArray(o.props[c])?o.props[c]:[],A=d?.addBlocked?.(i)??null,S=d?.notice?.(i)??null,N=k(R,{children:[S?r("p",{className:"sf-note",children:S}):null,i.map((m,w)=>r(b,{name:n(m),onOpen:()=>e(g,w,String(m.props.id),t)},String(m.props.id??`${g}-${w}`))),h?r(_,{choices:h,onPick:m=>l(u,c,m,i.length,t)}):d.fixed?null:r(j,{label:d.addLabel,blocked:A,onAdd:()=>l(u,c,d.childType,i.length,t)})]});return r("div",{className:"sf-slot-rows",children:s?r(F,{label:$(s),icon:r(C,{}),value:String(i.length),children:N}):N})}function P(o,t){return p(o)?.spec?.notice?.(t)??null}function M({parentType:o}){const{selectedItem:t}=x(l=>l);if(!t||t.type!==o)return null;const s=p(o)?.slot,n=s&&Array.isArray(t.props[s])?t.props[s]:[],e=P(o,n);return e?r("p",{className:"sf-note",children:e}):null}function v(o,t){return p(t)?.source==="footer"?o.blockRowName:o.childRowName}function y({parentType:o,label:t}){const{appState:s,selectedItem:n}=x(a=>a),e=D();if(!e||!n||n.type!==o)return null;const l=o===I?O(s?.data,String(n.props.id)):0;return r(E,{parent:n,parentType:o,label:t,rowName:v(e,o),onSelectChild:e.selectChild,onAddChild:e.addChild,nestDepth:l})}export{E as SlotChildRows,M as SlotNoticeField,y as default,v as rowNamerFor,P as slotNoticeOf};
1
+ "use client";import{jsx as s,Fragment as C,jsxs as R}from"react/jsx-runtime";import{useEasel as x}from"efficient-easel/easel";import{LayersIcon as b}from"efficient-easel/icons";import{SettingsDrill as F,SettingsField as k}from"efficient-easel/panel";import _ from"./AddChildRow.js";import{useSlotChildActions as j}from"./SlotChildActionsContext.js";import{HERO_GROUP_TYPE as D,heroGroupNestDepth as I}from"../lib/hero-group-placement.js";import{canAddTo as p}from"../lib/puck/add-target.js";import{say as O}from"../lib/editor-words.js";function $({parent:o,parentType:t,label:r,rowName:n,onSelectChild:e,onAddChild:l,nestDepth:a=0}){const u=p(t,a);if(!u)return null;const{slot:d,choices:A,spec:i}=u,f=String(o.props.id),h=`${f}:${d}`,c=Array.isArray(o.props[d])?o.props[d]:[],w=i?.addBlocked?.(c)??null,S=i?.notice?.(c)??null,g=R(C,{children:[S?s("p",{className:"sf-note",children:S}):null,c.map((m,N)=>s(F,{name:n(m),onOpen:()=>e(h,N,String(m.props.id),t)},String(m.props.id??`${h}-${N}`))),A||i.fixed?null:s(_,{label:i.addLabel,blocked:w,onAdd:()=>l(f,d,i.childType,c.length,t)})]});return s("div",{className:"sf-slot-rows",children:r?s(k,{label:O(r),icon:s(b,{}),value:String(c.length),children:g}):g})}function y(o,t){return p(o)?.spec?.notice?.(t)??null}function J({parentType:o}){const{selectedItem:t}=x(l=>l);if(!t||t.type!==o)return null;const r=p(o)?.slot,n=r&&Array.isArray(t.props[r])?t.props[r]:[],e=y(o,n);return e?s("p",{className:"sf-note",children:e}):null}function E(o,t){return p(t)?.source==="footer"?o.blockRowName:o.childRowName}function v({parentType:o,label:t}){const{appState:r,selectedItem:n}=x(a=>a),e=j();if(!e||!n||n.type!==o)return null;const l=o===D?I(r?.data,String(n.props.id)):0;return s($,{parent:n,parentType:o,label:t,rowName:E(e,o),onSelectChild:e.selectChild,onAddChild:e.addChild,nestDepth:l})}export{$ as SlotChildRows,J as SlotNoticeField,v as default,E as rowNamerFor,y as slotNoticeOf};