efficient-web-builder 38.1.0 → 39.0.0

package/CHANGELOG.md

@@ -1,6 +1,88 @@
 # Changelog
 
-## Unreleased
+## 39.0.0 - 2026-10-24
+
+**MAJOR for hosts:** `components/floating-editor/tokens` (`tk`) is deleted; the canvas accent is `CANVAS_ACCENT` (`format/lib/canvas-accent`) (#269). A settings panel has one kind of group heading, the folding band; "Surfaces" and "Ticker" leave the label catalogue (#272). Peer and dev `efficient-easel` are `^20.0.0` (a peer range narrowed; easel 20 carries the host messages for page edits, #301).
+
+### Added (a host sees the selection and edits the open page)
+
+- **The website editor answers a host about the open page** (JARVIS in the Storefront editor, Victor Mau 2026-10-24). On every change of selection the editor sends `storefront-editor:selection`, named as a person thinks of it: a block in a slot by the block that holds it ("Hero slider · slide 1"), else by its own label. It answers `request-document` with the document as the store holds it now (unsaved edits included) and its block types as plain JSON (labels and fields; a custom field is named, its component stays here). `apply-page-edits` lands as one recorded step, so the editor's undo takes it back; all of the changes or none, checked again against the page as it is, and answered with `page-edits-result`. `undo-page-edits` takes that step back while the page is still as it left it. `set-right-panel` shows or hides the inspector, so a host can dock its own panel there. The rules are pure, in `lib/host-document-bridge`; `components/useHostDocumentBridge` wires them to the store, from the website's document pass. Nothing changes until a host sends these messages.
+- **Peer and dev `efficient-easel` are `^20.0.0`** (were `^19.2.0`): 20.0.0 is the first easel with these host messages, and its own peer `efficient-shell` is `^9.1.0`, the range this package already asks for. Three guards follow easel 19.3 and 20: the menu guard reads greyed Move rows and the two-ways guard pins `^20.0.0` (both as in #292), the publish guard reads the easel major as a number (a `1[7-9]` pattern read `^20` as older than `^17`), and the preview-click stub answers `querySelectorAll`, which easel's main-copy lookup asks.
+- Guards: `scripts/test-host-document-bridge.ts`; `scripts/test-menu-pinned-and-band.ts`, `scripts/test-two-ways-to-add.ts`, `scripts/test-publish-main-action.tsx`, `scripts/dom-stubs.ts` follow easel 20.
+
+### Fixed (Block widths reach the first block)
+
+- **`Big left` and `Bigger left` reach the first block when it has a part style.** A block with a part style drew its `<style>` element in front of its own root, so the `<style>` was the Box row's first child and `[&>*:first-child]` selected it: the row split equally. `PublishedPartStyles` now draws the sheet as a hoisted `<style precedence="sf-part-styles">`, so React puts it in the document head and it is never a child of a Box, a Grid, a hero box or a photo wall. Same rules, same look; a page with a part style now carries its sheets in the head (`data-precedence="sf-part-styles"`, no more `data-sf-part-styles` attribute). A page with no part style is byte-identical. **Hosts:** a test that finds the sheet by `data-sf-part-styles` (storefront-blocks `scripts/test-logos-label-alignment.tsx`) reads `data-precedence="sf-part-styles"` at the bump.
+- Guards: `scripts/test-box-share-reaches-the-block.tsx` (red first) draws a whole published page and checks that `:first-child` / `:last-child` of a `Big left` / `Bigger right` row is the styled block, and that no part-style `<style>` stands inside any element. `scripts/test-box-shapes-bytes.tsx` holds 12 stored Box shapes with no part style to the bytes main drew before (`scripts/fixtures/box-shapes-bytes.json`). `scripts/test-render-config.tsx` finds the sheet by its precedence.
+
+### Changed (panel controls 32; GG asked for a minor, the release decides the number)
+
+- **The Slider row's typed box is 32** (harness FT-6). `lib/puck/controls` `Slider` hands the shell's `Slider` `boxSize="md"` and keeps its thin `size="sm"` track.
+- **Peer and dev `efficient-shell` are `^9.1.0`** (were `^8.39.0`): `boxSize` is first published in efficient-shell 9.1.0 (#620), the first 9 on npm. On an older shell the prop is ignored and the box stays 24, so the range moves with the code (GG 2026-10-23). `scripts/test-shell-peer-range.ts` holds the new floor. efficient-easel 19.3.0 still peers on `^8.39.0`; its next release moves to `^9.1.0` too.
+- **The colour row is 32, on its own line** (Lewis 2026-10-23, option 2). The label line holds the label and the row's ↺; the swatch and the hex box sit on the line under it, both the shell's medium rung (32). On the label line at 32 the row ran 71px past a 220 panel. `lib/puck/ColourControl` `ColourRow` is the ONE colour row, and every colour row draws it: the Button block's Fill and Text color, Shadow color, the page Background, every theme colour row, the theme's Button and Button text color, Main color in Site styles, and the chat launcher's Button color. `ColourControl` loses `after` (the ↺ is the row's `onReset`). The picker opens from the swatch's start edge now that the swatch starts its line.
+- The palette swatch rows (`PartInkControl`, `AnyColourSwatch`) and the theme cards' foot buttons stay 24: a swatch row is a picture, as `CornersInput` is, and the foot buttons are card actions (GG 2026-10-23). `scripts/test-panel-controls-medium.ts` names both with that reason.
+
+### Guards
+
+- `scripts/test-one-colour-control.tsx` (red first): §5 the hex box is the shell's medium rung; §8 the swatch and the hex render under the label line and the ↺ on it; new §11 no file puts the colour control in a row's `action` slot, and every colour row outside `ColourControl.tsx` is `ColourRow`. `scripts/test-shape-choices-are-pictures.tsx` §4 reads the swatch and the box at medium. `scripts/test-card-style-settings.tsx` §6b reads the ↺ on the label line. `scripts/test-site-style-reset-clears.tsx` opens the Shadow color row one level more (`InheritedColourRow` is `ColourRow`). `scripts/test-panel-controls-medium.ts` drops the colour row's swatch and hex box from its kept-small list.
+- The tree-wide rule `lib/source-rules/panel-controls-medium` gains M2 (red first: `lib/puck/controls.tsx` drew the shell's Slider without it): the shell's `Slider`, under any local name it is imported as from `efficient-shell/ui`, passes `boxSize="md"`. A track-only `Slider` (`showInput={false}`, no typed box) and a component of a host's own called `Slider` are not read. The storefront blocks run the same rule over their own files.
+
+### Added
+
+- **`PART_ROW_ATTR` and `encodePartRow`** (`lib/puck/text-parts`, render side): a section may declare the element that wraps one row of a list (`data-sf-part-row="channels[2]"`) while editing. A row's words are then matched only inside its own wrapper (`lib/puck/part-anchors`), so a string that repeats across rows, or a list the section draws twice, still opens the right row. A list with no declaration is matched as before. Found on hartesmetal.com /contact (2026-10-23): ContactRouting draws each channel in a rail and in a phone list, and no channel's Sub line could be typed in place.
+
+### Fixed
+
+- **A list row's text boxes draw in its row panel.** The section screen hid every scalar copy box, and Puck names a row column by its path (`channels[0].label`), so a row lost its Label, Value, Link and Sub line boxes with no entry row anywhere. `SectionTextSuppress` now hides only a top-level prop's box, which is the only kind `sectionTextParts` lists. A ContactRouting channel added with "+ Add item" can be typed again.
+- **An empty column of a stored row is clickable.** `partRowTexts` reads an empty column as its declared placeholder, the word the section draws for it while editing, as an empty top-level prop already did. A column with no placeholder stays with the whole list, as before.
+- **A block filled from a product is named by the product in Layers** (`lib/puck/source-row-name`, the website's `ScreenBlockLook.rowName`). A Gallery Item with "Fill from a product" on and a wheel picked showed its hidden typed Title (inovit.com Home: "Frixion6", "FusionForge®"). Unbound blocks keep the screen's name. Side effect, by the screen's rule for a layer that names its rows: Add's "Adding before …" now says the row's name too.
+
+### Guards
+
+- `scripts/test-list-rows-can-be-typed.tsx` (red first: §1, §2, §3 and §5 fail on 38.2.0; §4 pins the old answer without a declaration).
+
+### Changed
+
+- **The copied editor palette is gone: `components/floating-editor/tokens.ts` (`tk`) is deleted** (Lewis 2026-10-12, token decisions: delete the copied colour values). It was a TypeScript copy of the chrome's light palette, 14 colours, 2 shadows and a layout, of which only `tk.accent` was still read. The canvas pick outlines (Hero ticker, Hero slides, Locations tiles, the open text part) now say `CANVAS_ACCENT` (`format/lib/canvas-accent`), which is `var(--es-accent, #2563eb)`: easel's accent, which is the shell's `--accent-600`, with easel's own canvas fallback. Same colours: checked in a browser with and without `--es-accent` in the frame. The Locations hover ring fades the ring (`opacity: 0.45`) instead of an 8-digit hex, because a `var()` takes no hex suffix. **Hosts:** efficient-storefront-blocks imports `tk` in `EditorPreviewChat` and `PreviewHeader`; it moves to `CANVAS_ACCENT` in its own PR. No re-export is left, so the release that ships this is a MAJOR.
+- **A settings panel has one kind of group heading: the grey folding band** (Lewis 2026-10-14, option A on the Split panel shots: "no small uppercase sub-headings; rows that lose their heading get their own full names"). The tabbed section panels had this since 2026-10-13; now the rest do too:
+  - `group()` and `section()` are fold markers from the start, so a panel without tabs draws a band (easel `SettingsGroup`), never the small uppercase tier (`SettingsGroupSub`) or the filled pill (`SettingsGroupHead`). A tabbed panel's pass re-places them as before. `SectionHeading` is deleted (nothing outside `controls.tsx` used it).
+  - New `PanelBand` (`editor/lib/puck/controls`): the same band for a panel drawn by hand. It starts open and remembers being closed, by title, for the editor's life.
+  - Chat settings: "Look" and "Wording" are bands.
+  - Ticker: the "Ticker" sub-heading over the panel's two rows is gone (the panel is the Ticker's).
+  - Theme sheet (Site styles and a section's Theme sheet): the `Surfaces` sub-heading is gone; the module line between the ink rows and the surface rows stays (`.sf-theme-module-break`, the same 30px full-bleed rule).
+  - Site styles › Basics: the "Width" sub-heading is gone, and the two rows are named in full, "Background width" and "Content width" (`BACKGROUND_LABEL`, `CONTENT_LABEL`; the same rows in a section's Size band, where the Width group already drew nothing, read the same).
+  - A Box on a picture (and an old Box) no longer draws a second "Padding" heading inside its Size band: its `resolveFields` swapped in a fresh padding set whose heading skipped the tab pass; the swap now keeps the heading the pass placed (`Flex/fields.tsx` `swapPadding`).
+  - **`GroupLabel` is deprecated.** Nothing here draws it. efficient-storefront-blocks' Header panel, BlogSource and SocialLinksDoor still do; they move to `PanelBand` in their own PR, and then `GroupLabel` is deleted (and efficient-easel's `SettingsGroupSub` after it).
+  - Words: "Background width" added; "Surfaces" and "Ticker" leave the catalogue. **MAJOR** for a host that types its words against the catalogue (`EditorWordsFor`): two keys are gone.
+- **Width › Content is efficient-easel's row** (Lewis 2026-10-23, "Email Section panel split": one row for both editors). `components/SectionWidthRows` `ContentWidthRow` hands this editor's words and its px `Slider` to easel's `SettingsContentWidth` (19.2.0, as `number`) and draws nothing of its own: the website's own `flex w-full min-w-0 flex-col gap-2` column is easel's `.es-width-stack`. The email designer draws the same part. The Site styles and section panels look and write as before (panel lab, Hero section at 288: no pixel moves). `efficient-easel` peer and dev range `^19.2.0`. New guard `test-content-width-row-from-easel` (its four checks fail on main). The guards that read the row's element tree open the easel part's level (`test-site-width-control`, `test-site-style-reset-clears`), `test-two-ways-to-add` §1 pins `^19.2.0`, and `test-part-slider-fills-row` counts 3 hosts: `SectionWidthRows` draws no `SettingsField` now, and its site row is still rendered for the direct-child check.
+
+### Deprecated
+
+- **`WebsiteBackend.site.update`** (`WebsiteSite.update`, the Maps key's save) and the `SiteRecordPatch` / `SiteRecord.mapsApiKey` / `mapsMapId` re-exported from efficient-easel are `@deprecated`. Every website map is efficient-shell's since 34 and needs no Google key, so nothing writes or reads them (Victor Mau, 2026-10-23: remove them). They are removed in the next major, with no release cut for this note.
+
+### Guards
+
+- New `scripts/test-canvas-accent-one-source.ts` (red first: tokens.ts existed and the four users imported it): no `floating-editor/tokens.ts`, `CANVAS_ACCENT` is easel's accent with easel's fallback, the four users draw with it and append no hex alpha to it.
+- New `scripts/test-one-group-heading-kind.ts` (red first: 15 problems on main): `group()`/`section()` are fold markers; no `src/` file draws `SettingsGroupSub` or `SettingsGroupHead` or calls `<GroupLabel>` (the deprecated definition aside); Chat's bands; no Ticker sub-heading; the Width rows' full names.
+- `test-site-styles-theme-tab` §2a: one module line and no sub-heading in the theme sheet. `test-section-theme-preview`: the row order has no `Surfaces`. `test-site-width-control` §1, §5: "Content width", no Width sub-heading. `test-panel-no-divider-lines`, `test-panel-spacing-tokens`: the allowed module rule's selector names `.sf-theme-module-break`.
+
+## 38.2.0 - 2026-10-23
+
+A MINOR: settings-panel controls are 32 tall, and the new tree-wide `panel-controls-medium` rule that a host runs over its own files (#274). Width › Background is efficient-easel's row (#268).
+
+### Changed
+
+- **Width › Background is efficient-easel's row** (Lewis 2026-10-23, "Email Section panel split": one row for both editors). `components/SectionWidthRows` `BackgroundWidthRow` hands this editor's words to easel's `SettingsBackgroundWidth` (19.1.0) and draws nothing of its own; `WIDTH_CHOICES` is easel's `BACKGROUND_WIDTHS`. The email designer draws the same part. The Site styles and section panels look and write as before. `efficient-easel` peer and dev range `^19.1.0`. The guards that read the row's element tree open the easel part's level (`test-site-style-reset-clears`, `test-site-styles-visual` §4), and `test-two-ways-to-add` §1 pins `^19.1.0`.
+- **Settings-panel controls are 32 tall** (harness FT-6; Lewis 2026-10-12: small 24, medium 32, large 40; a settings panel's controls are 32). The source-status block's "Refresh now" and Edit buttons draw medium. The Button panel's Icon position strip fills the rest of its row in equal shares (Lewis 2026-10-23) and keeps its small chips in a 32 track.
+
+### Not changed, on purpose
+
+- The colour row's swatch and hex box stay small: at medium the row ran 71px past a 220 panel's edge (`test-shape-choices-are-pictures` §4). The part panel's palette swatches stay small too: a palette is a picture of the theme, like the corner picker (Lewis 2026-10-23: "the corner picker is a picture, not a row of controls"). Both are asked of the owner, and both are named in the guard below.
+
+### Guards
+
+- New tree-wide rule `lib/source-rules/panel-controls-medium` and `scripts/test-panel-controls-medium.ts` (red first: five small controls): a shell control drawn at `size="sm"` in editor chrome fails, except a text link, a segmented strip (its 32 track) and a file or control named with its reason. The storefront blocks run the same rule over their own files.
+- `scripts/test-source-status-is-shared.tsx` reads the refresh button at medium.
 
 ## 38.1.0 - 2026-10-23
 

package/dist/editor/components/ChatSettingsPanel.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as g,Fragment as w}from"react/jsx-runtime";import{useEffect as P,useId as C,useState as E}from"react";import{usePreviewChat as T,DEFAULT_CHAT_PREVIEW as S}from"./PreviewChatContext.js";import{usePreviewHeader as _}from"../../render/components/PreviewHeaderContext.js";import{IconPicker as R}from"efficient-shell/ui";import{SettingsDefaultReset as y,SettingsField as h,SettingsSegmented as A,SettingsSwitch as I}from"efficient-easel/panel";import*as O from"efficient-easel/icons";import{ButtonIcon as B,ButtonIconIcon as H,EyeIcon as N,PhoneIcon as v,PlacementIcon as x,TypeIcon as D}from"efficient-easel/icons";import{ColourControl as U}from"../lib/puck/ColourControl.js";import{GroupLabel as L}from"../lib/puck/controls.js";import{say as a,editorEaselWords as F}from"../../format/lib/editor-words.js";import{normalizeTheme as k,themeButtonColour as G}from"../../format/lib/theme.js";import{CHAT_LAUNCHER_ICONS as j,DEFAULT_CHAT_LAUNCHER_ICON as d,DEFAULT_CHAT_LAUNCHER_POSITION as p,chatLauncherIcon as W}from"../../format/lib/content/chat-launcher.js";const z="Chat with us",K="We usually reply within a few minutes",V="Hi! Ask us anything — about a wheel, an order, or fitment. Leave your details and we’ll reply.";function b({label:e,value:o,placeholder:l,onCommit:i,multiline:r=!1,hint:t}){const[c,m]=E(o);P(()=>m(o),[o]);const f=()=>{c!==o&&i(c)};return n(h,{label:e,icon:n(D,{}),changed:o!=="",action:n(u,{label:e,changed:o!=="",onReset:()=>i("")}),hint:t,children:r?n("textarea",{value:c,placeholder:l,rows:3,onChange:s=>m(s.target.value),onBlur:f,"aria-label":e}):n("input",{type:"text",value:c,placeholder:l,onChange:s=>m(s.target.value),onBlur:f,onKeyDown:s=>{s.key==="Enter"&&s.currentTarget.blur()},"aria-label":e,autoComplete:"off"})})}function u({label:e,changed:o,onReset:l}){return n(y,{words:F()?.panel,label:e,changed:o,onReset:l})}function $({label:e,icon:o,checked:l,fallback:i,onChange:r,hint:t}){const c=C();return n(h,{label:e,labelId:c,icon:o,changed:l!==i,action:g("span",{className:"inline-flex items-center gap-2",children:[n(I,{checked:l,onChange:r,ariaLabelledBy:c}),n(u,{label:e,changed:l!==i,onReset:()=>r(i)})]}),hint:t})}function q(e){const o=e.replace(/(^|-)([a-z])/g,(i,r,t)=>t.toUpperCase()),l=O[`${o}Icon`];return l?n(l,{size:16}):null}const J=j.map(e=>({value:e,icon:q(e)}));function M(){const{theme:e}=_(),o=k(e).themes[0];return G(o)??o?.accent??""}function Q(){const{chat:e,setChat:o}=T(),l=C(),i=M(),r=e.launcherIcon?W(e.launcherIcon):d;return g(w,{children:[n(h,{label:a("Show the chat bubble"),labelId:l,icon:n(N,{}),changed:!e.enabled,action:g("span",{className:"inline-flex items-center gap-2",children:[n(I,{checked:e.enabled,onChange:t=>o({enabled:t}),ariaLabelledBy:l}),n(u,{label:a("Show the chat bubble"),changed:!e.enabled,onReset:()=>o({enabled:!0})})]}),hint:e.enabled?a("The floating chat bubble shows in the corner of every page."):a("The chat bubble is hidden across the whole site.")}),n(L,{label:"Look"}),n(h,{label:a("Button color"),icon:n(B,{}),changed:e.launcherColor!=="",action:n(U,{label:a("Button color"),value:e.launcherColor,inherited:i,caption:e.launcherColor?void 0:a("Site button color"),onChange:t=>o({launcherColor:t}),after:n(u,{label:a("Button color"),changed:e.launcherColor!=="",onReset:()=>o({launcherColor:""})})})}),n(h,{label:a("Icon"),icon:n(H,{}),changed:r!==d,action:n(u,{label:a("Icon"),changed:r!==d,onReset:()=>o({launcherIcon:""})}),children:n(R,{label:a("Icon"),value:r,options:J,onChange:t=>o({launcherIcon:t===d?"":t})})}),n(h,{label:a("Position"),icon:n(x,{}),changed:e.launcherPosition!==p,action:n(u,{label:a("Position"),changed:e.launcherPosition!==p,onReset:()=>o({launcherPosition:p})}),children:n(A,{options:[{label:a("Right"),id:"right"},{label:a("Left"),id:"left"}],value:e.launcherPosition,ariaLabel:a("Position"),onChange:t=>o({launcherPosition:t})})}),n(b,{label:a("Label"),value:e.launcherLabel,placeholder:a("Icon only"),onCommit:t=>o({launcherLabel:t}),hint:a("Shows when a visitor points at the button")}),n($,{label:a("Show on phones"),icon:n(v,{}),checked:e.showOnPhones,fallback:S.showOnPhones,onChange:t=>o({showOnPhones:t})}),n(L,{label:"Wording"}),n(b,{label:a("Title"),value:e.title,placeholder:z,onCommit:t=>o({title:t})}),n(b,{label:a("Subtitle"),value:e.subtitle,placeholder:K,onCommit:t=>o({subtitle:t})}),n(b,{label:a("Greeting message"),value:e.greeting,placeholder:V,onCommit:t=>o({greeting:t}),multiline:!0}),n("p",{className:"es-field-hint sf-hint-keep",children:a("Leave a field blank to use the built-in wording.")})]})}export{Q as default};
+"use client";import{jsx as n,jsxs as h,Fragment as L}from"react/jsx-runtime";import{useEffect as P,useId as C,useState as E}from"react";import{usePreviewChat as T,DEFAULT_CHAT_PREVIEW as R}from"./PreviewChatContext.js";import{usePreviewHeader as S}from"../../render/components/PreviewHeaderContext.js";import{IconPicker as _}from"efficient-shell/ui";import{SettingsDefaultReset as y,SettingsField as u,SettingsSegmented as A,SettingsSwitch as I}from"efficient-easel/panel";import*as O from"efficient-easel/icons";import{ButtonIcon as B,ButtonIconIcon as H,EyeIcon as N,PhoneIcon as v,PlacementIcon as x,TypeIcon as D}from"efficient-easel/icons";import{ColourRow as U}from"../lib/puck/ColourControl.js";import{PanelBand as w}from"../lib/puck/controls.js";import{say as a,editorEaselWords as F}from"../../format/lib/editor-words.js";import{normalizeTheme as k,themeButtonColour as j}from"../../format/lib/theme.js";import{CHAT_LAUNCHER_ICONS as G,DEFAULT_CHAT_LAUNCHER_ICON as m,DEFAULT_CHAT_LAUNCHER_POSITION as p,chatLauncherIcon as W}from"../../format/lib/content/chat-launcher.js";const z="Chat with us",K="We usually reply within a few minutes",V="Hi! Ask us anything — about a wheel, an order, or fitment. Leave your details and we’ll reply.";function b({label:e,value:t,placeholder:l,onCommit:i,multiline:r=!1,hint:o}){const[c,g]=E(t);P(()=>g(t),[t]);const f=()=>{c!==t&&i(c)};return n(u,{label:e,icon:n(D,{}),changed:t!=="",action:n(d,{label:e,changed:t!=="",onReset:()=>i("")}),hint:o,children:r?n("textarea",{value:c,placeholder:l,rows:3,onChange:s=>g(s.target.value),onBlur:f,"aria-label":e}):n("input",{type:"text",value:c,placeholder:l,onChange:s=>g(s.target.value),onBlur:f,onKeyDown:s=>{s.key==="Enter"&&s.currentTarget.blur()},"aria-label":e,autoComplete:"off"})})}function d({label:e,changed:t,onReset:l}){return n(y,{words:F()?.panel,label:e,changed:t,onReset:l})}function $({label:e,icon:t,checked:l,fallback:i,onChange:r,hint:o}){const c=C();return n(u,{label:e,labelId:c,icon:t,changed:l!==i,action:h("span",{className:"inline-flex items-center gap-2",children:[n(I,{checked:l,onChange:r,ariaLabelledBy:c}),n(d,{label:e,changed:l!==i,onReset:()=>r(i)})]}),hint:o})}function q(e){const t=e.replace(/(^|-)([a-z])/g,(i,r,o)=>o.toUpperCase()),l=O[`${t}Icon`];return l?n(l,{size:16}):null}const J=G.map(e=>({value:e,icon:q(e)}));function M(){const{theme:e}=S(),t=k(e).themes[0];return j(t)??t?.accent??""}function Q(){const{chat:e,setChat:t}=T(),l=C(),i=M(),r=e.launcherIcon?W(e.launcherIcon):m;return h(L,{children:[n(u,{label:a("Show the chat bubble"),labelId:l,icon:n(N,{}),changed:!e.enabled,action:h("span",{className:"inline-flex items-center gap-2",children:[n(I,{checked:e.enabled,onChange:o=>t({enabled:o}),ariaLabelledBy:l}),n(d,{label:a("Show the chat bubble"),changed:!e.enabled,onReset:()=>t({enabled:!0})})]}),hint:e.enabled?a("The floating chat bubble shows in the corner of every page."):a("The chat bubble is hidden across the whole site.")}),h(w,{title:a("Look"),children:[n(U,{label:a("Button color"),icon:n(B,{}),changed:e.launcherColor!=="",value:e.launcherColor,inherited:i,caption:e.launcherColor?void 0:a("Site button color"),onChange:o=>t({launcherColor:o}),onReset:()=>t({launcherColor:""})}),n(u,{label:a("Icon"),icon:n(H,{}),changed:r!==m,action:n(d,{label:a("Icon"),changed:r!==m,onReset:()=>t({launcherIcon:""})}),children:n(_,{label:a("Icon"),value:r,options:J,onChange:o=>t({launcherIcon:o===m?"":o})})}),n(u,{label:a("Position"),icon:n(x,{}),changed:e.launcherPosition!==p,action:n(d,{label:a("Position"),changed:e.launcherPosition!==p,onReset:()=>t({launcherPosition:p})}),children:n(A,{options:[{label:a("Right"),id:"right"},{label:a("Left"),id:"left"}],value:e.launcherPosition,ariaLabel:a("Position"),onChange:o=>t({launcherPosition:o})})}),n(b,{label:a("Label"),value:e.launcherLabel,placeholder:a("Icon only"),onCommit:o=>t({launcherLabel:o}),hint:a("Shows when a visitor points at the button")}),n($,{label:a("Show on phones"),icon:n(v,{}),checked:e.showOnPhones,fallback:R.showOnPhones,onChange:o=>t({showOnPhones:o})})]}),h(w,{title:a("Wording"),children:[n(b,{label:a("Title"),value:e.title,placeholder:z,onCommit:o=>t({title:o})}),n(b,{label:a("Subtitle"),value:e.subtitle,placeholder:K,onCommit:o=>t({subtitle:o})}),n(b,{label:a("Greeting message"),value:e.greeting,placeholder:V,onCommit:o=>t({greeting:o}),multiline:!0}),n("p",{className:"es-field-hint sf-hint-keep",children:a("Leave a field blank to use the built-in wording.")})]})]})}export{Q as default};

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-export declare const PART_PICK_CSS: string;
+export declare const PART_PICK_CSS = "\n[data-sf-part][data-sf-part] { cursor: text; }\n[data-sf-part-selected][data-sf-part-selected][data-sf-part-selected] {\n  outline: 1px solid var(--es-accent, #2563eb);\n  outline-offset: 2px;\n}\n[data-sf-part-selected][data-sf-part-selected]:has([data-sf-part-selected]),\n[data-puck-overlay-portal][data-puck-overlay-portal]:has([data-sf-part-selected]) {\n  outline: none;\n}\n[data-sf-part-selected][data-sf-part-selected][data-sf-part-selected][data-es-typing],\n[data-es-typing] [data-sf-part-selected][data-sf-part-selected][data-sf-part-selected] {\n  outline: none;\n}\n";
 export default function PreviewThemeFrame({ children, document: previewDocument, }: {
     children: ReactNode;
     document?: Document;

package/dist/editor/components/PreviewThemeFrame.js

@@ -1,15 +1,15 @@
-"use client";import{jsx as n,Fragment as h,jsxs as l}from"react/jsx-runtime";import{useEffect as a,useLayoutEffect as u}from"react";import{usePreviewHeader as $}from"../../render/components/PreviewHeaderContext.js";import{tk as d}from"../../format/components/floating-editor/tokens.js";import{PART_ATTR as m,PART_SELECTED_ATTR as t}from"../../render/lib/puck/text-parts.js";import{syncPreviewSurfaces as c,syncPreviewTheme as T}from"../../format/lib/theme-dom.js";import{normalizeTheme as p}from"../../format/lib/theme.js";import{CanvasOwnStyles as x}from"../lib/editor-canvas-styles.js";import{runFitWordsIn as y}from"../../format/lib/fit-words.js";const P=`
+"use client";import{jsx as n,Fragment as h,jsxs as l}from"react/jsx-runtime";import{useEffect as a,useLayoutEffect as u}from"react";import{usePreviewHeader as $}from"../../render/components/PreviewHeaderContext.js";import{CANVAS_ACCENT as d}from"../../format/lib/canvas-accent.js";import{PART_ATTR as m,PART_SELECTED_ATTR as r}from"../../render/lib/puck/text-parts.js";import{syncPreviewSurfaces as T,syncPreviewTheme as p}from"../../format/lib/theme-dom.js";import{normalizeTheme as c}from"../../format/lib/theme.js";import{CanvasOwnStyles as x}from"../lib/editor-canvas-styles.js";import{runFitWordsIn as y}from"../../format/lib/fit-words.js";const S=`
 [${m}][${m}] { cursor: text; }
-[${t}][${t}][${t}] {
-  outline: 1px solid ${d.accent};
+[${r}][${r}][${r}] {
+  outline: 1px solid ${d};
   outline-offset: 2px;
 }
-[${t}][${t}]:has([${t}]),
-[data-puck-overlay-portal][data-puck-overlay-portal]:has([${t}]) {
+[${r}][${r}]:has([${r}]),
+[data-puck-overlay-portal][data-puck-overlay-portal]:has([${r}]) {
   outline: none;
 }
-[${t}][${t}][${t}][data-es-typing],
-[data-es-typing] [${t}][${t}][${t}] {
+[${r}][${r}][${r}][data-es-typing],
+[data-es-typing] [${r}][${r}][${r}] {
   outline: none;
 }
-`;function S({children:i,document:r}){const{theme:f,themeMode:e,themeSwitchShown:o}=$(),s=p(f);return a(()=>{if(r)return T(r,{mode:e,switchShown:o})},[r,e,o]),a(()=>{if(r)return c(r,s)},[r,s]),u(()=>{if(r)return y(r)},[r]),l(h,{children:[n(x,{}),n("style",{children:P}),i]})}export{P as PART_PICK_CSS,S as default};
+`;function _({children:i,document:t}){const{theme:f,themeMode:e,themeSwitchShown:o}=$(),s=c(f);return a(()=>{if(t)return p(t,{mode:e,switchShown:o})},[t,e,o]),a(()=>{if(t)return T(t,s)},[t,s]),u(()=>{if(t)return y(t)},[t]),l(h,{children:[n(x,{}),n("style",{children:S}),i]})}export{S as PART_PICK_CSS,_ as default};

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

@@ -1,7 +1,7 @@
 import { type WidthAnswer } from "../../format/lib/content/section-width.js";
 export declare const WIDTH_GROUP_LABEL = "Width";
-export declare const BACKGROUND_LABEL = "Background";
-export declare const CONTENT_LABEL = "Content";
+export declare const BACKGROUND_LABEL = "Background width";
+export declare const CONTENT_LABEL = "Content width";
 export declare const WIDTH_CHOICES: readonly WidthAnswer[];
 export declare const SECTION_CONTENT_MIN = 400;
 export declare const CONTENT_INSIDE_BACKGROUND_HINT = "Content cannot be wider than the background.";

package/dist/editor/components/SectionWidthRows.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as O}from"react/jsx-runtime";import{SettingsDefaultReset as x,SettingsField as I,SettingsSegmented as _}from"efficient-easel/panel";import{BackgroundIcon as w,WidthIcon as H}from"efficient-easel/icons";import{PAGE_WIDTH as N}from"../../format/lib/content/page-width.js";import{WIDTH_CHOICE_LABEL as L}from"../../format/lib/content/section-width.js";import{say as a,editorEaselWords as b}from"../../format/lib/editor-words.js";import{Slider as B}from"../lib/puck/controls.js";const U="Width",D="Background",S="Content",C=["full","content"],E=t=>a(L[t==="content"?"page":"full"]),W=400,K="Content cannot be wider than the background.",P="The width of every section's background, until the section sets its own.",M="The width of every section's content, until the section sets its own.",F="On phones, content always fills the screen.";function q({value:t,changed:l,detail:s,onChange:i,onReset:r,disabled:p=!1,hint:n,labelId:f}){const o=a(D);return e(I,{label:o,labelId:f,icon:e(w,{}),changed:l,hint:n?a(n):void 0,action:e(x,{words:b()?.panel,label:o,changed:l,detail:s,onReset:r}),children:e(_,{options:C.map(c=>({id:c,label:E(c)})),value:t,onChange:i,ariaLabel:o,disabled:p})})}function z({mode:t,px:l,max:s=N.max,min:i=W,changed:r,detail:p,onMode:n,onPx:f,onReset:o,fullClosed:c=!1,disabled:h=!1,hint:m,labelId:g}){const d=a(S),T=t!=="full"?e(B,{min:i,max:s,step:N.step,value:Math.min(Math.max(l,i),s),onChange:f,suffix:"px",ariaLabel:d,disabled:h}):null;return e(I,{label:d,labelId:g,icon:e(H,{}),changed:r,hint:m?a(m):void 0,action:e(x,{words:b()?.panel,label:d,changed:r,detail:p,onReset:o}),children:t===void 0||!n?T:O("div",{className:"flex w-full min-w-0 flex-col gap-2",children:[e(_,{options:C.map(u=>({id:u,label:E(u),disabled:u==="full"&&c})),value:t,onChange:n,ariaLabel:d,disabled:h}),T]})})}export{D as BACKGROUND_LABEL,q as BackgroundWidthRow,K as CONTENT_INSIDE_BACKGROUND_HINT,S as CONTENT_LABEL,z as ContentWidthRow,W as SECTION_CONTENT_MIN,P as SITE_BACKGROUND_HINT,M as SITE_CONTENT_HINT,C as WIDTH_CHOICES,U as WIDTH_GROUP_LABEL,F as WIDTH_PHONE_HINT};
+"use client";import{jsx as c}from"react/jsx-runtime";import{BACKGROUND_WIDTHS as m,SettingsBackgroundWidth as x,SettingsContentWidth as E}from"efficient-easel/panel";import{PAGE_WIDTH as p}from"../../format/lib/content/page-width.js";import{WIDTH_CHOICE_LABEL as O}from"../../format/lib/content/section-width.js";import{say as n,editorEaselWords as T}from"../../format/lib/editor-words.js";import{Slider as W}from"../lib/puck/controls.js";const S="Width",b="Background width",H="Content width",G=m,r=t=>n(O[t==="content"?"page":"full"]),g=400,k="Content cannot be wider than the background.",U="The width of every section's background, until the section sets its own.",v="The width of every section's content, until the section sets its own.",y="On phones, content always fills the screen.";function K({value:t,changed:l,detail:o,onChange:s,onReset:i,disabled:a=!1,hint:e,labelId:d}){return c(x,{value:t,changed:l,detail:o,onChange:s,onReset:i,disabled:a,hint:e?n(e):void 0,labelId:d,words:{label:n(b),full:r("full"),content:r("content")},resetWords:T()?.panel})}function M({mode:t,px:l,max:o=p.max,min:s=g,changed:i,detail:a,onMode:e,onPx:d,onReset:_,fullClosed:C=!1,disabled:u=!1,hint:f,labelId:I}){const h=n(H),N=t!=="full"?c(W,{min:s,max:o,step:p.step,value:Math.min(Math.max(l,s),o),onChange:d,suffix:"px",ariaLabel:h,disabled:u}):null;return c(E,{mode:e?t:void 0,onMode:e,number:N,changed:i,detail:a,onReset:_,fullClosed:C,disabled:u,hint:f?n(f):void 0,labelId:I,words:{label:h,full:r("full"),content:r("content")},resetWords:T()?.panel})}export{b as BACKGROUND_LABEL,K as BackgroundWidthRow,k as CONTENT_INSIDE_BACKGROUND_HINT,H as CONTENT_LABEL,M as ContentWidthRow,g as SECTION_CONTENT_MIN,U as SITE_BACKGROUND_HINT,v as SITE_CONTENT_HINT,G as WIDTH_CHOICES,S as WIDTH_GROUP_LABEL,y as WIDTH_PHONE_HINT};

package/dist/editor/components/SourceStatus.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as t}from"react/jsx-runtime";import{Button as a}from"efficient-shell/ui";import{say as u}from"../../format/lib/editor-words.js";function f({status:l,statusText:o,onRefresh:n,busy:r=!1,edit:e,hint:c,spaced:i=!0}){return t("div",{className:"sf-blogsource",style:i?{marginTop:9}:void 0,children:[s("p",{className:"sf-blogsource-status","data-state":l,children:o}),s(a,{variant:"secondary",size:"sm",className:"sf-blogsource-action",onClick:n,disabled:r,children:u("Refresh now")}),e?s(a,{variant:"secondary",size:"sm",className:"sf-blogsource-action",onClick:e.onClick,children:e.label}):null,s("p",{className:"es-field-hint sf-hint-keep",children:c})]})}export{f as default};
+"use client";import{jsx as s,jsxs as i}from"react/jsx-runtime";import{Button as a}from"efficient-shell/ui";import{say as u}from"../../format/lib/editor-words.js";function f({status:l,statusText:o,onRefresh:n,busy:r=!1,edit:e,hint:c,spaced:t=!0}){return i("div",{className:"sf-blogsource",style:t?{marginTop:9}:void 0,children:[s("p",{className:"sf-blogsource-status","data-state":l,children:o}),s(a,{variant:"secondary",className:"sf-blogsource-action",onClick:n,disabled:r,children:u("Refresh now")}),e?s(a,{variant:"secondary",className:"sf-blogsource-action",onClick:e.onClick,children:e.label}):null,s("p",{className:"es-field-hint sf-hint-keep",children:c})]})}export{f as default};

package/dist/editor/components/ThemeCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as d,Fragment as _}from"react/jsx-runtime";import{SettingsField as b,SettingsGroupSub as z}from"efficient-easel/panel";import{Button as p,IconButton as L,Tooltip as O}from"efficient-shell/ui";import A from"./ThemeColourField.js";import{say as o}from"../../format/lib/editor-words.js";import{ColourControl as k}from"../lib/puck/ColourControl.js";import{ButtonIcon as j,ChevronDownIcon as w,ChevronUpIcon as D,GroundIcon as P,LayoutIcon as G,SquareIcon as H,TextSmallIcon as M,TypeIcon as x}from"efficient-easel/icons";import{DEFAULT_THEMES as I,GRADE_LABEL as v,contrastRatio as T,gradeContrast as E,normalizeThemeColors as g,resolvedButtonInk as R,themeButtonColour as S,themeButtonInk as U}from"../../format/lib/theme.js";const J=t=>o("Theme {n}",{n:t+1});function $({colors:t}){const n=g(t),r=S(t)??n.accent;return d("span",{className:"sf-theme-page",style:{background:n.background,color:n.text},"aria-hidden":!0,children:[e("span",{className:"sf-theme-eyebrow",style:{color:n.muted},children:o("label")}),d("span",{className:"sf-theme-headline",children:[o("Heading")," ",e("span",{style:{color:n.accent},children:o("accent")})]}),e("span",{className:"sf-theme-body",children:o("body text")}),d("span",{className:"sf-theme-row",children:[e("span",{className:"sf-theme-btn",style:{background:r,color:R(t,n.accent)},children:o("button")}),e("span",{className:"sf-theme-mini",style:{background:n.surface,borderColor:n.line},children:o("card")})]})]})}const N={"Text color":e(x,{}),"Label color":e(M,{}),Background:e(P,{}),"Panels & cards":e(G,{}),Borders:e(H,{}),"Button color":e(j,{}),"Button text color":e(x,{})};function W({label:t,colorKey:n,value:r,onChange:c,idPrefix:a="sf-theme-ink"}){const s=`${a}-${n}`;return e(b,{label:o(t),icon:N[t],htmlFor:s,action:e(k,{id:s,label:o(t),value:r,onChange:l=>c(n,l)})})}function q({value:t,accent:n,onChange:r,idPrefix:c="sf-theme-ink"}){const a=`${c}-button`,s=/^#[0-9a-fA-F]{6}$/.test(t??""),l=s?t:n;return e(b,{label:o("Button color"),icon:N["Button color"],htmlFor:a,action:e(k,{id:a,label:o("Button color"),value:l,caption:s?l:o("Main"),onChange:r})})}function K({colors:t,accent:n,onChange:r,idPrefix:c="sf-theme-ink"}){const a=`${c}-button-ink`,s=U(t),l=R(t,n),i=S(t)??n,u=E(T(l,i)??0);return e(b,{label:o("Button text color"),icon:N["Button text color"],hint:s&&u!=="good"?o("{grade} on the button",{grade:o(v[u])}):void 0,htmlFor:a,action:e(k,{id:a,label:o("Button text color"),value:l,caption:s?l:o("Auto"),onChange:r})})}const Q=[{colour:!0},{label:"Text color",key:"text"},{label:"Label color",key:"muted"},{button:!0},{buttonInk:!0},{group:"Surfaces"},{label:"Background",key:"background"},{label:"Panels & cards",key:"surface"},{label:"Borders",key:"line"}];function V({colors:t,onChange:n,idPrefix:r}){const c=g(t);return e(_,{children:Q.map(a=>"colour"in a?e(A,{value:t,onChange:n},"colour"):"group"in a?e(z,{title:o(a.group)},a.group):"button"in a?e(q,{value:t.button,accent:c.accent,onChange:s=>n({...t,button:s}),idPrefix:r},"button"):"buttonInk"in a?e(K,{colors:t,accent:c.accent,onChange:s=>n({...t,buttonInk:s}),idPrefix:r},"buttonInk"):e(W,{label:a.label,colorKey:a.key,value:c[a.key],onChange:(s,l)=>n({...t,[s]:l}),idPrefix:r},a.key))})}function se({index:t,colors:n,selected:r,role:c="radio",open:a,editable:s=!0,onPick:l,onEdit:i,onChangeColors:u}){const h=g(n),m=J(t),f=t<I.length&&!n.brandInk?I[t]:null,y=E(T(h.text,h.background)??0),C=f?JSON.stringify(n)!==JSON.stringify(f):!1,B=a!==void 0;return d("div",{className:`sf-theme-card${r?" is-selected":""}`,children:[e("button",{type:"button",role:c,"aria-checked":c==="radio"?r:void 0,"aria-selected":c==="option"?r:void 0,"aria-label":m,className:"sf-theme-pick",onClick:l,children:e($,{colors:n})}),d("div",{className:"sf-theme-foot",children:[e("span",{className:"sf-theme-name",children:m}),y!=="good"&&e("span",{className:"sf-theme-warn",children:o(v[y])}),s&&i&&B&&e("span",{className:"sf-theme-edit",children:e(O,{content:a?o("Collapse"):o("Edit colors"),children:e(L,{size:"sm","aria-expanded":a,"aria-controls":`sf-theme-colours-${t}`,"aria-label":a?o("Collapse {name}",{name:m}):o("Edit colors for {name}",{name:m}),onClick:i,children:a?e(D,{size:14}):e(w,{size:14})})})}),s&&i&&!B&&e(p,{variant:"secondary",size:"sm",className:"sf-theme-edit","aria-label":o("Edit {name}",{name:m}),onClick:i,children:o("Edit")})]}),a&&d("div",{id:`sf-theme-colours-${t}`,className:"sf-theme-colours",children:[e(V,{colors:n,onChange:F=>u?.(F)}),f&&e(p,{variant:"link",size:"sm",className:"sf-theme-reset",disabled:!C,onClick:()=>u?.({...f}),children:C?o("Reset {name} to the preset",{name:m}):o("Not changed")})]})]})}function re({colors:t,name:n,nameId:r,open:c,menuId:a,labelId:s,buttonRef:l,onClick:i,onKeyDown:u,onEdit:h}){return d("div",{className:"sf-secttheme-btn",children:[e("button",{ref:l,type:"button",className:"sf-theme-pick","aria-expanded":c,"aria-controls":a,"aria-labelledby":`${s} ${r}`,onClick:i,onKeyDown:u,children:t?e($,{colors:t}):e("span",{className:"sf-secttheme-nopreview","aria-hidden":"true"})}),d("div",{className:"sf-theme-foot",children:[e("span",{id:r,className:"sf-theme-name",children:n}),h&&e(p,{variant:"secondary",size:"sm",className:"sf-theme-edit","aria-label":o("Edit {name}",{name:n}),onClick:h,children:o("Edit")}),e("button",{type:"button",className:"sf-secttheme-caret","aria-hidden":"true",tabIndex:-1,onClick:i,children:e("span",{className:"sf-multi-caret",children:"▾"})})]})]})}export{se as ThemeCard,re as ThemeCardTrigger,W as ThemeColourRow,V as ThemeColourRows,$ as ThemePreview,J as themeName};
+"use client";import{jsx as e,jsxs as d,Fragment as w}from"react/jsx-runtime";import{Button as b,IconButton as z,Tooltip as L}from"efficient-shell/ui";import O from"./ThemeColourField.js";import{say as a}from"../../format/lib/editor-words.js";import{ColourRow as k}from"../lib/puck/ColourControl.js";import{ButtonIcon as S,ChevronDownIcon as A,ChevronUpIcon as F,GroundIcon as j,LayoutIcon as D,SquareIcon as P,TextSmallIcon as H,TypeIcon as B}from"efficient-easel/icons";import{DEFAULT_THEMES as x,GRADE_LABEL as v,contrastRatio as I,gradeContrast as T,normalizeThemeColors as p,resolvedButtonInk as R,themeButtonColour as E,themeButtonInk as M}from"../../format/lib/theme.js";const U=t=>a("Theme {n}",{n:t+1});function $({colors:t}){const n=p(t),s=E(t)??n.accent;return d("span",{className:"sf-theme-page",style:{background:n.background,color:n.text},"aria-hidden":!0,children:[e("span",{className:"sf-theme-eyebrow",style:{color:n.muted},children:a("label")}),d("span",{className:"sf-theme-headline",children:[a("Heading")," ",e("span",{style:{color:n.accent},children:a("accent")})]}),e("span",{className:"sf-theme-body",children:a("body text")}),d("span",{className:"sf-theme-row",children:[e("span",{className:"sf-theme-btn",style:{background:s,color:R(t,n.accent)},children:a("button")}),e("span",{className:"sf-theme-mini",style:{background:n.surface,borderColor:n.line},children:a("card")})]})]})}const g={"Text color":e(B,{}),"Label color":e(H,{}),Background:e(j,{}),"Panels & cards":e(D,{}),Borders:e(P,{}),"Button color":e(S,{}),"Button text color":e(B,{})};function G({label:t,colorKey:n,value:s,onChange:c,idPrefix:o="sf-theme-ink"}){const r=`${o}-${n}`;return e(k,{label:a(t),icon:g[t],id:r,value:s,onChange:l=>c(n,l)})}function J({value:t,accent:n,onChange:s,idPrefix:c="sf-theme-ink"}){const o=`${c}-button`,r=/^#[0-9a-fA-F]{6}$/.test(t??""),l=r?t:n;return e(k,{label:a("Button color"),icon:g["Button color"],id:o,value:l,caption:r?l:a("Main"),onChange:s})}function W({colors:t,accent:n,onChange:s,idPrefix:c="sf-theme-ink"}){const o=`${c}-button-ink`,r=M(t),l=R(t,n),i=E(t)??n,m=T(I(l,i)??0);return e(k,{label:a("Button text color"),icon:g["Button text color"],hint:r&&m!=="good"?a("{grade} on the button",{grade:a(v[m])}):void 0,id:o,value:l,caption:r?l:a("Auto"),onChange:s})}const q=[{colour:!0},{label:"Text color",key:"text"},{label:"Label color",key:"muted"},{button:!0},{buttonInk:!0},{moduleBreak:!0},{label:"Background",key:"background"},{label:"Panels & cards",key:"surface"},{label:"Borders",key:"line"}];function K({colors:t,onChange:n,idPrefix:s}){const c=p(t);return e(w,{children:q.map(o=>"colour"in o?e(O,{value:t,onChange:n},"colour"):"moduleBreak"in o?e("div",{className:"sf-theme-module-break","aria-hidden":"true"},"module-break"):"button"in o?e(J,{value:t.button,accent:c.accent,onChange:r=>n({...t,button:r}),idPrefix:s},"button"):"buttonInk"in o?e(W,{colors:t,accent:c.accent,onChange:r=>n({...t,buttonInk:r}),idPrefix:s},"buttonInk"):e(G,{label:o.label,colorKey:o.key,value:c[o.key],onChange:(r,l)=>n({...t,[r]:l}),idPrefix:s},o.key))})}function ne({index:t,colors:n,selected:s,role:c="radio",open:o,editable:r=!0,onPick:l,onEdit:i,onChangeColors:m}){const h=p(n),u=U(t),f=t<x.length&&!n.brandInk?x[t]:null,N=T(I(h.text,h.background)??0),y=f?JSON.stringify(n)!==JSON.stringify(f):!1,C=o!==void 0;return d("div",{className:`sf-theme-card${s?" is-selected":""}`,children:[e("button",{type:"button",role:c,"aria-checked":c==="radio"?s:void 0,"aria-selected":c==="option"?s:void 0,"aria-label":u,className:"sf-theme-pick",onClick:l,children:e($,{colors:n})}),d("div",{className:"sf-theme-foot",children:[e("span",{className:"sf-theme-name",children:u}),N!=="good"&&e("span",{className:"sf-theme-warn",children:a(v[N])}),r&&i&&C&&e("span",{className:"sf-theme-edit",children:e(L,{content:o?a("Collapse"):a("Edit colors"),children:e(z,{size:"sm","aria-expanded":o,"aria-controls":`sf-theme-colours-${t}`,"aria-label":o?a("Collapse {name}",{name:u}):a("Edit colors for {name}",{name:u}),onClick:i,children:o?e(F,{size:14}):e(A,{size:14})})})}),r&&i&&!C&&e(b,{variant:"secondary",size:"sm",className:"sf-theme-edit","aria-label":a("Edit {name}",{name:u}),onClick:i,children:a("Edit")})]}),o&&d("div",{id:`sf-theme-colours-${t}`,className:"sf-theme-colours",children:[e(K,{colors:n,onChange:_=>m?.(_)}),f&&e(b,{variant:"link",size:"sm",className:"sf-theme-reset",disabled:!y,onClick:()=>m?.({...f}),children:y?a("Reset {name} to the preset",{name:u}):a("Not changed")})]})]})}function ae({colors:t,name:n,nameId:s,open:c,menuId:o,labelId:r,buttonRef:l,onClick:i,onKeyDown:m,onEdit:h}){return d("div",{className:"sf-secttheme-btn",children:[e("button",{ref:l,type:"button",className:"sf-theme-pick","aria-expanded":c,"aria-controls":o,"aria-labelledby":`${r} ${s}`,onClick:i,onKeyDown:m,children:t?e($,{colors:t}):e("span",{className:"sf-secttheme-nopreview","aria-hidden":"true"})}),d("div",{className:"sf-theme-foot",children:[e("span",{id:s,className:"sf-theme-name",children:n}),h&&e(b,{variant:"secondary",size:"sm",className:"sf-theme-edit","aria-label":a("Edit {name}",{name:n}),onClick:h,children:a("Edit")}),e("button",{type:"button",className:"sf-secttheme-caret","aria-hidden":"true",tabIndex:-1,onClick:i,children:e("span",{className:"sf-multi-caret",children:"▾"})})]})]})}export{ne as ThemeCard,ae as ThemeCardTrigger,G as ThemeColourRow,K as ThemeColourRows,$ as ThemePreview,U as themeName};

package/dist/editor/components/ThemeColourField.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as u}from"react/jsx-runtime";import{SettingsField as m}from"efficient-easel/panel";import{AccentIcon as h}from"efficient-easel/icons";import{Tooltip as p}from"efficient-shell/ui";import{GRADE_LABEL as g,contrastRatio as c,darkerAccents as y,gradeContrast as f,normalizeThemeColors as b}from"../../format/lib/theme.js";import{ColourControl as k}from"../lib/puck/ColourControl.js";import{say as a}from"../../format/lib/editor-words.js";function l(r){return b(r).background}function A(r){const e=c(r.accent,l(r));return e===null?null:{ratio:e,grade:f(e)}}function C(r){const e=l(r),o=c(r.accent,e);return o===null?[]:y(r.accent).filter(s=>{const i=c(s,e);return i!==null&&i>o&&f(i)==="good"})}const T={good:"Easy to read","large-only":g["large-only"],hard:g.hard};function E({value:r,onChange:e}){const o=A(r),s=o?.grade,i=o&&o.grade!=="good"?C(r):[];return n(m,{label:a("Main color"),icon:n(h,{}),hint:o?a(T[o.grade]):void 0,action:n(k,{value:r.accent,onChange:t=>e({...r,accent:t}),label:a("Main color")}),children:i.length>0?n("div",{className:"w-full min-w-0",children:u("div",{className:"sf-readability",children:[n("p",{className:"sf-readability-advice",children:N(s,!0)}),n("div",{className:"sf-readability-suggestions",children:i.map(t=>{const d=c(t,l(r));return n(p,{content:a("Use {colour}",{colour:t.toUpperCase()}),children:u("button",{type:"button",className:"sf-readability-suggestion",onClick:()=>e({...r,accent:t}),children:[n("span",{className:"sf-readability-chip",style:{background:t},"aria-hidden":!0}),d?`${d.toFixed(1)}:1`:t.toUpperCase()]})},t)})})]})}):null})}function N(r,e){return r?r==="good"?a("This color reads clearly on your pages."):e?a("This color is hard to read on this theme's page. The buttons below are the same hue, darkened."):a("This color is hard to read on your page background. Pick one further from it — lighter if your pages are dark, deeper if they are light."):a("Pick a color to see how it reads.")}export{E as default};
+"use client";import{jsx as n,jsxs as u}from"react/jsx-runtime";import{AccentIcon as m}from"efficient-easel/icons";import{Tooltip as h}from"efficient-shell/ui";import{GRADE_LABEL as g,contrastRatio as c,darkerAccents as p,gradeContrast as f,normalizeThemeColors as y}from"../../format/lib/theme.js";import{ColourRow as b}from"../lib/puck/ColourControl.js";import{say as a}from"../../format/lib/editor-words.js";function d(r){return y(r).background}function k(r){const e=c(r.accent,d(r));return e===null?null:{ratio:e,grade:f(e)}}function A(r){const e=d(r),o=c(r.accent,e);return o===null?[]:p(r.accent).filter(s=>{const i=c(s,e);return i!==null&&i>o&&f(i)==="good"})}const C={good:"Easy to read","large-only":g["large-only"],hard:g.hard};function T({value:r,onChange:e}){const o=k(r),s=o?.grade,i=o&&o.grade!=="good"?A(r):[];return n(b,{label:a("Main color"),icon:n(m,{}),hint:o?a(C[o.grade]):void 0,value:r.accent,onChange:t=>e({...r,accent:t}),children:i.length>0?n("div",{className:"w-full min-w-0",children:u("div",{className:"sf-readability",children:[n("p",{className:"sf-readability-advice",children:E(s,!0)}),n("div",{className:"sf-readability-suggestions",children:i.map(t=>{const l=c(t,d(r));return n(h,{content:a("Use {colour}",{colour:t.toUpperCase()}),children:u("button",{type:"button",className:"sf-readability-suggestion",onClick:()=>e({...r,accent:t}),children:[n("span",{className:"sf-readability-chip",style:{background:t},"aria-hidden":!0}),l?`${l.toFixed(1)}:1`:t.toUpperCase()]})},t)})})]})}):null})}function E(r,e){return r?r==="good"?a("This color reads clearly on your pages."):e?a("This color is hard to read on this theme's page. The buttons below are the same hue, darkened."):a("This color is hard to read on your page background. Pick one further from it — lighter if your pages are dark, deeper if they are light."):a("Pick a color to see how it reads.")}export{T as default};

package/dist/editor/components/TickerSettingsPanel.js

@@ -1 +1 @@
-"use client";import{jsx as o,jsxs as f}from"react/jsx-runtime";import{useId as T,useMemo as I}from"react";import{useEasel as k}from"efficient-easel/easel";import{SettingsField as x,SettingsSwitch as b}from"efficient-easel/panel";import{EyeIcon as E}from"efficient-easel/icons";import{DEFAULT_TICKER_ITEMS as S}from"../../format/lib/hero-ticker.js";import{GroupLabel as g,TextListField as w,TICKER_ITEMS_ROW as a}from"../lib/puck/controls.js";import{say as c}from"../../format/lib/editor-words.js";const _="root:default-zone";function y({heroId:p}){const{appState:l,dispatch:m}=k(e=>e),s=l.data.content??[],r=s.findIndex(e=>e.props.id===p),t=r>=0?s[r]:null,d=t?t.props.showTicker??!0:!0,h=I(()=>{const e=t?.props.tickerItems;return Array.isArray(e)?e:S.map(u=>({text:u}))},[t]),n=T();if(!t)return o("p",{className:"sf-note",children:c("This ticker’s hero is no longer on the page.")});const i=e=>m({type:"replace",destinationZone:_,destinationIndex:r,data:{...t,props:{...t.props,...e}}});return f("div",{children:[o(g,{label:"Ticker"}),o(x,{label:c("Show ticker"),labelId:n,icon:o(E,{}),action:o(b,{checked:d,onChange:e=>i({showTicker:e}),ariaLabelledBy:n})}),o(w,{label:a.label,icon:a.icon,items:h,placeholder:"item",onChange:e=>i({tickerItems:e}),markup:!0})]})}export{y as default};
+"use client";import{jsx as o,jsxs as f}from"react/jsx-runtime";import{useId as I,useMemo as T}from"react";import{useEasel as k}from"efficient-easel/easel";import{SettingsField as x,SettingsSwitch as E}from"efficient-easel/panel";import{EyeIcon as S}from"efficient-easel/icons";import{DEFAULT_TICKER_ITEMS as g}from"../../format/lib/hero-ticker.js";import{TextListField as w,TICKER_ITEMS_ROW as a}from"../lib/puck/controls.js";import{say as c}from"../../format/lib/editor-words.js";const _="root:default-zone";function b({heroId:p}){const{appState:l,dispatch:m}=k(e=>e),s=l.data.content??[],r=s.findIndex(e=>e.props.id===p),t=r>=0?s[r]:null,d=t?t.props.showTicker??!0:!0,h=T(()=>{const e=t?.props.tickerItems;return Array.isArray(e)?e:g.map(u=>({text:u}))},[t]),n=I();if(!t)return o("p",{className:"sf-note",children:c("This ticker’s hero is no longer on the page.")});const i=e=>m({type:"replace",destinationZone:_,destinationIndex:r,data:{...t,props:{...t.props,...e}}});return f("div",{children:[o(x,{label:c("Show ticker"),labelId:n,icon:o(S,{}),action:o(E,{checked:d,onChange:e=>i({showTicker:e}),ariaLabelledBy:n})}),o(w,{label:a.label,icon:a.icon,items:h,placeholder:"item",onChange:e=>i({tickerItems:e}),markup:!0})]})}export{b as default};

package/dist/editor/components/WebsiteScreenParts.js

@@ -1 +1 @@
-"use client";import{jsx as i,Fragment as B,jsxs as _}from"react/jsx-runtime";import{useCallback as R,useEffect as T,useRef as oe,useState as re}from"react";import{Button as ne,Tooltip as ie}from"efficient-shell/ui";import{SettingsSwitch as se}from"efficient-easel/panel";import{PagesIcon as ae,StylesIcon as ce}from"efficient-easel/rail";import{PaletteIcon as de}from"efficient-shell/icons/efficient";import{TemplateIcon as le}from"efficient-easel/icons";import{Subtree as pe,TreeRow as y}from"efficient-easel/tree";import{useEasel as D}from"efficient-easel/easel";import{useEaselStrings as H}from"efficient-easel/strings";import{LocationsTreeContext as me}from"./LocationsTreeContext.js";import fe from"./PagesPanel.js";import{usePreviewChat as ue}from"./PreviewChatContext.js";import{PREVIEW_DEVICES as Se}from"./preview-devices.js";import{PreviewDeviceContext as Ee}from"efficient-easel/draw/client";import{usePreviewHeader as he}from"../../render/components/PreviewHeaderContext.js";import{usePreviewSocial as we}from"../../render/components/PreviewSocialContext.js";import{usePreviewSurface as Te}from"./PreviewSurfaceContext.js";import{TICKER_PART_LABEL as Pe,usePreviewTicker as be}from"../../render/components/PreviewTickerContext.js";import{usePreviewHeroPart as ge}from"../../render/components/PreviewHeroPartContext.js";import{HERO_MEDIA_PARTS as Ie,HERO_PART_MODE as N,heroMediaRows as ve,heroPartId as W,readHeroPartId as ke}from"../../render/lib/puck/hero-media-parts.js";import _e,{CHAT_MODE as Re,HEADER_MODE as M,SOCIAL_MODE as Ce,WEBSITE_MODE as V}from"./SectionEditor.js";import C from"./SectionIcon.js";import Oe from"./SectionThumbnail.js";import{useScreenDocument as O}from"efficient-easel/screen/components/ScreenDocumentContext";import Le from"./StylesPanel.js";import{LOCATIONS_TYPE as Ae,useLocationsTree as Be}from"./useLocationsTree.js";import{usePinnedChromeSeed as ye}from"./usePinnedChromeSeed.js";import{usePreviewHref as De}from"./usePreviewHref.js";import{WebsitePreviewButton as He}from"./WebsitePreviewButton.js";import{SITE_STYLES_TABS as Ne,SITE_STYLES_TEXT_TAB as We,useWebsiteName as Me}from"./WebsiteSettingsPanel.js";import{useWebsiteMainAction as Ve}from"./useWebsiteMainAction.js";import{VersionHistory as xe}from"./VersionHistoryDrawer.js";import{useEaselSession as x}from"efficient-easel/screen/lib/session-context";import{useOpenPageName as Ye}from"../lib/page-rows.js";import{HERO_GROUP_TYPE as Fe,heroGroupNestDepth as Ge}from"../../format/lib/hero-group-placement.js";import{stripMarkup as ze}from"../../format/lib/markup.js";import{categoryShortLabel as Ke,PINNED_SECTION_TYPE as je}from"../lib/puck/add-palette.js";import{canAddTo as Ue}from"../lib/puck/add-target.js";import{blockIsOffered as Ze}from"../lib/puck/block-offer.js";import{sectionIdOfBoxZone as qe,setBookingPreview as Xe}from"../../render/lib/puck/booking-preview.js";import{footerBlockRowName as Je}from"../../format/lib/puck/footer-block-row-name.js";import{FOOTER_TYPE as Qe,HEADER_TYPE as Y}from"../lib/puck/footer-blocks.js";import{leftViewForSelection as $e,readLeftView as et,resolveLeftView as tt,writeLeftView as ot}from"../../format/lib/puck/left-view.js";import{websiteIsLockedBlock as rt}from"../lib/puck/locked-blocks.js";import{everyPageNotice as nt,noOwnTab as it,pinnedReach as F,websiteDuplicateBlocked as st}from"../lib/puck/every-page.js";import{sharedSectionReach as at,WEBSITE_SHARED_SECTIONS as ct}from"../lib/shared-sections-layer.js";import{activeSharedSections as L,setSharedEditor as G}from"../../format/lib/shared-sections-active.js";import{sharedSectionsOf as dt}from"efficient-easel/screen/lib/shared-sections";import{pinnedChromeInPlace as v}from"../../format/lib/pinned-chrome-lock.js";import{scrollPreviewToSection as lt,scrollPreviewToTop as z}from"efficient-easel/screen/lib/puck/preview-dom";import{SiteCanvas as pt}from"../lib/puck/overrides.js";import{labelAtLevel as mt}from"../../format/lib/puck/section-catalog.js";import{WEBSITE_MEDIA_DROP as ft}from"../../format/lib/puck/media-drop.js";import{editorWords as ut,say as p}from"../../format/lib/editor-words.js";import{SECTION_DESCRIPTIONS as St}from"../../format/lib/puck/section-descriptions.js";import{groupAccepts as Et,isSectionGroupType as ht,sectionGroupZone as wt,SITE_FOOTER_TYPE as K,SITE_HEADER_TYPE as Tt}from"../../format/lib/puck/section-groups.js";import{resolveSaveAsTemplateAction as Pt,SAVE_AS_TEMPLATE_EVENT as bt}from"../../format/lib/save-as-template-action.js";import{newSectionNode as gt}from"../lib/sections/new-section-node.js";import{useHostProducts as It}from"../lib/use-host-products.js";import{backendOf as vt}from"../lib/website-session.js";function j({mode:e,open:t}){const{setSelectedHeroId:o,setSelectHandler:r}=be(),c=H().tree,d=e,n=d.kind==="ticker"?d.heroId:null,a=R(s=>{if(!s)return;t({kind:"ticker",heroId:s}),lt(s)},[t]);return T(()=>{o(n)},[n,o]),T(()=>{r(a)},[r,a]),{partRows:(s,{rowClick:u})=>{const m=String(s.props.id);return s.type==="Hero"&&i(y,{icon:i(C,{type:"ticker",size:13}),name:p(Pe),onSelect:()=>a(m),selected:n===m,rowProps:{onClick:u(()=>a(m))},words:c})}}}function U({mode:e,select:t}){const{setSelectedHeroPart:o,setSelectHandler:r}=ge(),c=H().tree,{appState:d}=D(f=>f),n=d.data.content??[],a=oe(n);a.current=n;const s=e,u=Ie.find(f=>N[f]===s.kind),m=u&&"nodeId"in s?W(String(s.nodeId),u):null,h=R(f=>{const l=ke(f);if(!l)return;const w=a.current.findIndex(S=>String(S.props.id)===l.nodeId);if(w<0)return;const P={kind:N[l.part],nodeId:l.nodeId};t({index:w},P)},[t]);return T(()=>{o(m)},[m,o]),T(()=>{r(h)},[r,h]),{partRows:(f,{rowClick:l})=>{const w=String(f.props.id),P=ve(f);if(P.length===0)return null;const S=I=>{const g=W(w,I.part);return i(y,{icon:i(C,{type:I.part==="media"?"heroMedia":"heroImage",size:13}),name:p(I.label),onSelect:()=>h(g),selected:m===g,rowProps:{onClick:l(()=>h(g))},words:c},g)},[E,...b]=P;return _(B,{children:[S(E),b.length>0&&i(pe,{children:b.map(S)})]})}}}function Z(e,t){return{partRows:(o,r)=>_(B,{children:[e.partRows?.(o,r),t.partRows?.(o,r)]})}}function kt(e){const{adapter:t,capabilities:o,currentSlug:r,siteId:c,docId:d,hasUnsavedEdits:n,bridgeCapabilities:a,notifyParent:s,token:u}=O(),{hasPreviewLink:m}=o,h=vt(x()).preview?.draftLink,f=Ve(e.data),l=Pt({hasTrustedConsole:!!u,canCreatePlatformTemplate:a.canCreatePlatformTemplate,capabilities:o,siteId:c,hasUnsavedEdits:n}),w=R(()=>{!c||!r||s(bt,{siteId:c,slug:r})},[s,c,r]),P=De({pageSlug:r,siteId:c,token:u}),S=t.previewHref?.(r)??P;return{barLead:()=>l.visible&&i(ie,{side:"bottom",content:l.enabled?p("Save this website as a platform template"):p(l.disabledReason),children:i("span",{className:"sf-tip-disabled",tabIndex:l.enabled?void 0:0,children:i(ne,{variant:"secondary",disabled:!l.enabled,onClick:w,rightIcon:i(le,{size:15}),children:p("Save as Template")})})}),barTrail:()=>m&&r&&i(He,{liveHref:S,pageId:d??null,draftLink:h}),mainAction:f}}function _t(e,t){const{capabilities:o,templateId:r,siteId:c,tokenRef:d,navigate:n}=O(),{hasSiteTheme:a,explainsSiteSettings:s}=o,u=E=>t.setView(E),[m,h]=re(Ne[0].id),{surface:f,setSurface:l}=Te(),w=()=>{if(a){u("styles"),t.reveal(),z();return}e.show(V),e.reveal(),z()},P={id:"pages",label:p("Pages"),icon:i(ae,{}),panel:({onHide:E})=>i(fe,{activeSurface:f,onPreviewSurface:l,onNavigate:b=>{l(null),n(r?{kind:"template",id:r,pageSlug:b}:{kind:"page",slug:b,siteId:c??void 0})},onClose:E})},S=[];return!a&&s&&S.push({id:"appearance",label:p("Appearance"),icon:i(de,{}),active:e.kind==="website",onSelect:w}),a&&S.push({id:"styles",label:p("Styles"),icon:i(ce,{}),panel:({onHide:E,notify:b})=>i(Le,{tokenRef:d,siteId:c??void 0,onClose:E,onNotify:b,tab:m,onTabChange:h})}),{railLead:[P],railTrail:S,resolveLeftView:E=>tt(E,a),openSettings:w,openStyles:()=>{h(We),u("styles")}}}function Rt(){const{navigate:e,siteId:t,reloadFromServer:o,docId:r}=O(),c=D(n=>n.config),d=x();T(()=>(G({openPage:n=>e({kind:"page",slug:n.slug,siteId:t??void 0}),reload:()=>{o()},config:c}),()=>G(null)),[e,t,o,c]),T(()=>{const n=L();if(!n||!r)return;let a=!1;return dt(d).list().then(s=>{a||n.learn(s)}).catch(()=>{}),()=>{a=!0}},[r,d])}function Ct(e,t,o,r){const{kind:c,open:d}=e,{selected:n,zoneOf:a}=t;T(()=>{Xe(n?.type==="BookingBox"&&n.props.region==="confirm"?qe(a(String(n.props.id))):null)},[n?.props.id]);const s=Be(e,t),{capabilities:{hasSiteSettings:u}}=O();Rt();const{setSelected:m,setSelectHandler:h}=he(),{chat:f,setChat:l,setSelected:w,setSelectHandler:P}=ue(),S=c==="header";T(()=>{m(S)},[S,m]),T(()=>{h(()=>d(M))},[h,d]);const E=R(()=>d(Re),[d]),b=c==="chat";T(()=>{w(b)},[b,w]),T(()=>{P(E)},[P,E]);const{setOpenHandler:I}=we(),g=R(()=>d(Ce),[d]);T(()=>{I(g)},[I,g]);const J=Z(j(e),U(e)),Q=kt(t),$=_t(e,r),ee=o.device;return{...J,...Q,...$,hasOwnRows:k=>k.type===Ae,ownRows:s.renderLocationTree,sectionPressed:s.sectionPressed,wrap:k=>i(me.Provider,{value:!0,children:_(Ee.Provider,{value:ee,children:[k,i(xe,{})]})}),addPanelRow:k=>u?_("div",{className:"sf-addside-sitewide",children:[i("span",{className:"sf-addside-sitewide-glyph","aria-hidden":"true",children:i(C,{type:"chat",size:16})}),_("button",{type:"button",className:"sf-addside-sitewide-name",onClick:()=>{k(),E()},children:[p("Live chat"),i("span",{className:"sf-addside-sitewide-desc",children:p("A chat bubble on every page")})]}),i(se,{checked:f.enabled,onChange:te=>l({enabled:te}),ariaLabel:p("Show the chat bubble on the whole site")})]}):void 0}}let q=null,A=new WeakMap;function Ot(e){const t=ut();if(!e||!t)return e;q!==t&&(q=t,A=new WeakMap);let o=A.get(e);return o||(o={...e,choices:e.choices?e.choices.map(r=>({...r,label:p(r.label)})):null,spec:e.spec?{...e.spec,addLabel:p(e.spec.addLabel)}:null},A.set(e,o)),o}const Lt={isLockedBlock:(e,t)=>rt(e)||!!(t&&L()?.heldElsewhere(t.props.id)),duplicateBlocked:st,nestDepth:(e,t,o)=>t===Fe?Ge(e,o):0,newSectionNode:gt,canAddTo:(e,t)=>Ot(Ue(e,t)),blockIsOffered:Ze},At=new Proxy(St,{get:(e,t)=>{const o=Reflect.get(e,t);return typeof o=="string"?p(o):o}}),Bt={labelAtLevel:(e,t,o)=>p(mt(e,t,o)),descriptions:At,categoryLabel:e=>{const t=Ke(e);return t===void 0?void 0:p(t)},firstSection:je,blockRowName:Je,plainText:ze,Icon:C,Thumbnail:Oe,useProducts:It},yt={desktop:2e3,tablet:800,mobile:390},X="desktop",Dt={options:Se,initial:X,fluid:X,widths:yt},Ht={read:et,write:e=>ot(e),forSelection:(e,t)=>$e(e,t)},Nt={first:Y,last:Qe,firstGroup:Tt,lastGroup:K,isSectionGroup:ht,sectionGroupZone:wt,panelOf:e=>e===Y?M:null,get sharedReach(){return v()?Mt:void 0},get shared(){return L()?ct:void 0},get groupTab(){return v()?it:void 0},get groupBadge(){return v()?F({type:K})??void 0:void 0},get changeNotice(){return v()?nt():void 0},get band(){return v()?Wt:void 0},get groupAccepts(){return v()?Et:void 0}},Wt={foldable:!0},Mt=e=>F(e)??at(e);function Vt(e){return{...Z(j(e),U(e)),openSettings:()=>e.show(V)}}const Zo={useOwnerName:Me,useDocumentLabel:Ye,useBridges:Ct,useStandaloneBridges:Vt,useDocumentPass:ye,blockRules:Lt,blockLook:Bt,devices:Dt,leftView:Ht,pinned:Nt,Canvas:pt,canvasDrag:{media:ft},Inspector:_e};export{Zo as WEBSITE_SCREEN};
+"use client";import{jsx as i,Fragment as B,jsxs as _}from"react/jsx-runtime";import{useCallback as R,useEffect as P,useRef as oe,useState as re}from"react";import{Button as ne,Tooltip as ie}from"efficient-shell/ui";import{SettingsSwitch as se}from"efficient-easel/panel";import{PagesIcon as ae,StylesIcon as ce}from"efficient-easel/rail";import{PaletteIcon as de}from"efficient-shell/icons/efficient";import{TemplateIcon as le}from"efficient-easel/icons";import{Subtree as pe,TreeRow as D}from"efficient-easel/tree";import{useEasel as N}from"efficient-easel/easel";import{useEaselStrings as y}from"efficient-easel/strings";import{LocationsTreeContext as me}from"./LocationsTreeContext.js";import fe from"./PagesPanel.js";import{usePreviewChat as ue}from"./PreviewChatContext.js";import{PREVIEW_DEVICES as Se}from"./preview-devices.js";import{PreviewDeviceContext as Ee}from"efficient-easel/draw/client";import{usePreviewHeader as he}from"../../render/components/PreviewHeaderContext.js";import{usePreviewSocial as we}from"../../render/components/PreviewSocialContext.js";import{usePreviewSurface as Pe}from"./PreviewSurfaceContext.js";import{TICKER_PART_LABEL as Te,usePreviewTicker as be}from"../../render/components/PreviewTickerContext.js";import{usePreviewHeroPart as ge}from"../../render/components/PreviewHeroPartContext.js";import{HERO_MEDIA_PARTS as Ie,HERO_PART_MODE as H,heroMediaRows as ve,heroPartId as W,readHeroPartId as ke}from"../../render/lib/puck/hero-media-parts.js";import _e,{CHAT_MODE as Re,HEADER_MODE as M,SOCIAL_MODE as Ce,WEBSITE_MODE as V}from"./SectionEditor.js";import C from"./SectionIcon.js";import Oe from"./SectionThumbnail.js";import{useScreenDocument as O}from"efficient-easel/screen/components/ScreenDocumentContext";import Le from"./StylesPanel.js";import{LOCATIONS_TYPE as Ae,useLocationsTree as Be}from"./useLocationsTree.js";import{usePinnedChromeSeed as De}from"./usePinnedChromeSeed.js";import{useHostDocumentBridge as Ne}from"./useHostDocumentBridge.js";import{usePreviewHref as ye}from"./usePreviewHref.js";import{WebsitePreviewButton as He}from"./WebsitePreviewButton.js";import{SITE_STYLES_TABS as We,SITE_STYLES_TEXT_TAB as Me,useWebsiteName as Ve}from"./WebsiteSettingsPanel.js";import{useWebsiteMainAction as xe}from"./useWebsiteMainAction.js";import{VersionHistory as Ye}from"./VersionHistoryDrawer.js";import{useEaselSession as x}from"efficient-easel/screen/lib/session-context";import{useOpenPageName as Fe}from"../lib/page-rows.js";import{HERO_GROUP_TYPE as Ge,heroGroupNestDepth as ze}from"../../format/lib/hero-group-placement.js";import{stripMarkup as Ke}from"../../format/lib/markup.js";import{categoryShortLabel as je,PINNED_SECTION_TYPE as Ue}from"../lib/puck/add-palette.js";import{canAddTo as Ze}from"../lib/puck/add-target.js";import{blockIsOffered as qe}from"../lib/puck/block-offer.js";import{sectionIdOfBoxZone as Xe,setBookingPreview as Je}from"../../render/lib/puck/booking-preview.js";import{footerBlockRowName as Qe}from"../../format/lib/puck/footer-block-row-name.js";import{sourceRowName as $e}from"../../format/lib/puck/source-row-name.js";import{FOOTER_TYPE as et,HEADER_TYPE as Y}from"../lib/puck/footer-blocks.js";import{leftViewForSelection as tt,readLeftView as ot,resolveLeftView as rt,writeLeftView as nt}from"../../format/lib/puck/left-view.js";import{websiteIsLockedBlock as it}from"../lib/puck/locked-blocks.js";import{everyPageNotice as st,noOwnTab as at,pinnedReach as F,websiteDuplicateBlocked as ct}from"../lib/puck/every-page.js";import{sharedSectionReach as dt,WEBSITE_SHARED_SECTIONS as lt}from"../lib/shared-sections-layer.js";import{activeSharedSections as L,setSharedEditor as G}from"../../format/lib/shared-sections-active.js";import{sharedSectionsOf as pt}from"efficient-easel/screen/lib/shared-sections";import{pinnedChromeInPlace as v}from"../../format/lib/pinned-chrome-lock.js";import{scrollPreviewToSection as mt,scrollPreviewToTop as z}from"efficient-easel/screen/lib/puck/preview-dom";import{SiteCanvas as ft}from"../lib/puck/overrides.js";import{labelAtLevel as ut}from"../../format/lib/puck/section-catalog.js";import{WEBSITE_MEDIA_DROP as St}from"../../format/lib/puck/media-drop.js";import{editorWords as Et,say as p}from"../../format/lib/editor-words.js";import{SECTION_DESCRIPTIONS as ht}from"../../format/lib/puck/section-descriptions.js";import{groupAccepts as wt,isSectionGroupType as Pt,sectionGroupZone as Tt,SITE_FOOTER_TYPE as K,SITE_HEADER_TYPE as bt}from"../../format/lib/puck/section-groups.js";import{resolveSaveAsTemplateAction as gt,SAVE_AS_TEMPLATE_EVENT as It}from"../../format/lib/save-as-template-action.js";import{newSectionNode as vt}from"../lib/sections/new-section-node.js";import{useHostProducts as kt}from"../lib/use-host-products.js";import{backendOf as _t}from"../lib/website-session.js";function j({mode:e,open:t}){const{setSelectedHeroId:o,setSelectHandler:r}=be(),c=y().tree,d=e,n=d.kind==="ticker"?d.heroId:null,a=R(s=>{if(!s)return;t({kind:"ticker",heroId:s}),mt(s)},[t]);return P(()=>{o(n)},[n,o]),P(()=>{r(a)},[r,a]),{partRows:(s,{rowClick:u})=>{const m=String(s.props.id);return s.type==="Hero"&&i(D,{icon:i(C,{type:"ticker",size:13}),name:p(Te),onSelect:()=>a(m),selected:n===m,rowProps:{onClick:u(()=>a(m))},words:c})}}}function U({mode:e,select:t}){const{setSelectedHeroPart:o,setSelectHandler:r}=ge(),c=y().tree,{appState:d}=N(f=>f),n=d.data.content??[],a=oe(n);a.current=n;const s=e,u=Ie.find(f=>H[f]===s.kind),m=u&&"nodeId"in s?W(String(s.nodeId),u):null,h=R(f=>{const l=ke(f);if(!l)return;const w=a.current.findIndex(S=>String(S.props.id)===l.nodeId);if(w<0)return;const T={kind:H[l.part],nodeId:l.nodeId};t({index:w},T)},[t]);return P(()=>{o(m)},[m,o]),P(()=>{r(h)},[r,h]),{partRows:(f,{rowClick:l})=>{const w=String(f.props.id),T=ve(f);if(T.length===0)return null;const S=I=>{const g=W(w,I.part);return i(D,{icon:i(C,{type:I.part==="media"?"heroMedia":"heroImage",size:13}),name:p(I.label),onSelect:()=>h(g),selected:m===g,rowProps:{onClick:l(()=>h(g))},words:c},g)},[E,...b]=T;return _(B,{children:[S(E),b.length>0&&i(pe,{children:b.map(S)})]})}}}function Z(e,t){return{partRows:(o,r)=>_(B,{children:[e.partRows?.(o,r),t.partRows?.(o,r)]})}}function Rt(e){const{adapter:t,capabilities:o,currentSlug:r,siteId:c,docId:d,hasUnsavedEdits:n,bridgeCapabilities:a,notifyParent:s,token:u}=O(),{hasPreviewLink:m}=o,h=_t(x()).preview?.draftLink,f=xe(e.data),l=gt({hasTrustedConsole:!!u,canCreatePlatformTemplate:a.canCreatePlatformTemplate,capabilities:o,siteId:c,hasUnsavedEdits:n}),w=R(()=>{!c||!r||s(It,{siteId:c,slug:r})},[s,c,r]),T=ye({pageSlug:r,siteId:c,token:u}),S=t.previewHref?.(r)??T;return{barLead:()=>l.visible&&i(ie,{side:"bottom",content:l.enabled?p("Save this website as a platform template"):p(l.disabledReason),children:i("span",{className:"sf-tip-disabled",tabIndex:l.enabled?void 0:0,children:i(ne,{variant:"secondary",disabled:!l.enabled,onClick:w,rightIcon:i(le,{size:15}),children:p("Save as Template")})})}),barTrail:()=>m&&r&&i(He,{liveHref:S,pageId:d??null,draftLink:h}),mainAction:f}}function Ct(e,t){const{capabilities:o,templateId:r,siteId:c,tokenRef:d,navigate:n}=O(),{hasSiteTheme:a,explainsSiteSettings:s}=o,u=E=>t.setView(E),[m,h]=re(We[0].id),{surface:f,setSurface:l}=Pe(),w=()=>{if(a){u("styles"),t.reveal(),z();return}e.show(V),e.reveal(),z()},T={id:"pages",label:p("Pages"),icon:i(ae,{}),panel:({onHide:E})=>i(fe,{activeSurface:f,onPreviewSurface:l,onNavigate:b=>{l(null),n(r?{kind:"template",id:r,pageSlug:b}:{kind:"page",slug:b,siteId:c??void 0})},onClose:E})},S=[];return!a&&s&&S.push({id:"appearance",label:p("Appearance"),icon:i(de,{}),active:e.kind==="website",onSelect:w}),a&&S.push({id:"styles",label:p("Styles"),icon:i(ce,{}),panel:({onHide:E,notify:b})=>i(Le,{tokenRef:d,siteId:c??void 0,onClose:E,onNotify:b,tab:m,onTabChange:h})}),{railLead:[T],railTrail:S,resolveLeftView:E=>rt(E,a),openSettings:w,openStyles:()=>{h(Me),u("styles")}}}function Ot(){const{navigate:e,siteId:t,reloadFromServer:o,docId:r}=O(),c=N(n=>n.config),d=x();P(()=>(G({openPage:n=>e({kind:"page",slug:n.slug,siteId:t??void 0}),reload:()=>{o()},config:c}),()=>G(null)),[e,t,o,c]),P(()=>{const n=L();if(!n||!r)return;let a=!1;return pt(d).list().then(s=>{a||n.learn(s)}).catch(()=>{}),()=>{a=!0}},[r,d])}function Lt(e,t,o,r){const{kind:c,open:d}=e,{selected:n,zoneOf:a}=t;P(()=>{Je(n?.type==="BookingBox"&&n.props.region==="confirm"?Xe(a(String(n.props.id))):null)},[n?.props.id]);const s=Be(e,t),{capabilities:{hasSiteSettings:u}}=O();Ot();const{setSelected:m,setSelectHandler:h}=he(),{chat:f,setChat:l,setSelected:w,setSelectHandler:T}=ue(),S=c==="header";P(()=>{m(S)},[S,m]),P(()=>{h(()=>d(M))},[h,d]);const E=R(()=>d(Re),[d]),b=c==="chat";P(()=>{w(b)},[b,w]),P(()=>{T(E)},[T,E]);const{setOpenHandler:I}=we(),g=R(()=>d(Ce),[d]);P(()=>{I(g)},[I,g]);const J=Z(j(e),U(e)),Q=Rt(t),$=Ct(e,r),ee=o.device;return{...J,...Q,...$,hasOwnRows:k=>k.type===Ae,ownRows:s.renderLocationTree,sectionPressed:s.sectionPressed,wrap:k=>i(me.Provider,{value:!0,children:_(Ee.Provider,{value:ee,children:[k,i(Ye,{})]})}),addPanelRow:k=>u?_("div",{className:"sf-addside-sitewide",children:[i("span",{className:"sf-addside-sitewide-glyph","aria-hidden":"true",children:i(C,{type:"chat",size:16})}),_("button",{type:"button",className:"sf-addside-sitewide-name",onClick:()=>{k(),E()},children:[p("Live chat"),i("span",{className:"sf-addside-sitewide-desc",children:p("A chat bubble on every page")})]}),i(se,{checked:f.enabled,onChange:te=>l({enabled:te}),ariaLabel:p("Show the chat bubble on the whole site")})]}):void 0}}let q=null,A=new WeakMap;function At(e){const t=Et();if(!e||!t)return e;q!==t&&(q=t,A=new WeakMap);let o=A.get(e);return o||(o={...e,choices:e.choices?e.choices.map(r=>({...r,label:p(r.label)})):null,spec:e.spec?{...e.spec,addLabel:p(e.spec.addLabel)}:null},A.set(e,o)),o}const Bt={isLockedBlock:(e,t)=>it(e)||!!(t&&L()?.heldElsewhere(t.props.id)),duplicateBlocked:ct,nestDepth:(e,t,o)=>t===Ge?ze(e,o):0,newSectionNode:vt,canAddTo:(e,t)=>At(Ze(e,t)),blockIsOffered:qe},Dt=new Proxy(ht,{get:(e,t)=>{const o=Reflect.get(e,t);return typeof o=="string"?p(o):o}}),Nt={labelAtLevel:(e,t,o)=>p(ut(e,t,o)),descriptions:Dt,categoryLabel:e=>{const t=je(e);return t===void 0?void 0:p(t)},firstSection:Ue,blockRowName:Qe,rowName:$e,plainText:Ke,Icon:C,Thumbnail:Oe,useProducts:kt},yt={desktop:2e3,tablet:800,mobile:390},X="desktop",Ht={options:Se,initial:X,fluid:X,widths:yt},Wt={read:ot,write:e=>nt(e),forSelection:(e,t)=>tt(e,t)},Mt={first:Y,last:et,firstGroup:bt,lastGroup:K,isSectionGroup:Pt,sectionGroupZone:Tt,panelOf:e=>e===Y?M:null,get sharedReach(){return v()?xt:void 0},get shared(){return L()?lt:void 0},get groupTab(){return v()?at:void 0},get groupBadge(){return v()?F({type:K})??void 0:void 0},get changeNotice(){return v()?st():void 0},get band(){return v()?Vt:void 0},get groupAccepts(){return v()?wt:void 0}},Vt={foldable:!0},xt=e=>F(e)??dt(e);function Yt(e){return{...Z(j(e),U(e)),openSettings:()=>e.show(V)}}function Ft(e,t){De(e,t),Ne()}const $o={useOwnerName:Ve,useDocumentLabel:Fe,useBridges:Lt,useStandaloneBridges:Yt,useDocumentPass:Ft,blockRules:Bt,blockLook:Nt,devices:Ht,leftView:Wt,pinned:Mt,Canvas:ft,canvasDrag:{media:St},Inspector:_e};export{$o as WEBSITE_SCREEN};

package/dist/editor/components/WebsiteSettingsPanel.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as _,Fragment as w}from"react/jsx-runtime";import{useEasel as N}from"efficient-easel/easel";import{useState as R}from"react";import k from"./ThemeField.js";import L from"./CornersField.js";import O from"./CardShadowField.js";import G from"./ShadowColourField.js";import v from"./BlockGapField.js";import z from"./HoverEffectField.js";import Y from"./PhotographyField.js";import j from"./ShareButtonField.js";import U from"./SideSpaceField.js";import{BackgroundWidthRow as X,ContentWidthRow as $,SITE_BACKGROUND_HINT as K,SITE_CONTENT_HINT as M,WIDTH_GROUP_LABEL as q}from"./SectionWidthRows.js";import J from"./SiteAccentField.js";import Q from"./SiteTextStylesField.js";import{usePreviewHeader as S}from"../../render/components/PreviewHeaderContext.js";import{Tabs as V,Tooltip as Z,tabButtonId as D,tabPanelId as ee}from"efficient-shell/ui";import{ContrastIcon as te,NoteIcon as ne,SettingsIcon as oe,TypeIcon as ie}from"efficient-easel/icons";import{useThemeRowPersist as re}from"../lib/theme-row-persist.js";import{themeSaveNotice as se}from"../../format/lib/theme-save-message.js";import{say as g}from"../../format/lib/editor-words.js";import{NEUTRAL_SITE_NAME as ae}from"../../format/lib/content/site-name.js";import{PAGE_WIDTH as b}from"../../format/lib/content/page-width.js";import{SettingsGroupSub as ce}from"efficient-easel/panel";import{previewFrame as le}from"efficient-easel/screen/lib/puck/preview-dom";import{useSiteTextStylesWriter as de}from"../lib/site-text-styles-writer.js";import{CORNER_STYLE_TO_PX as ue,normalizeCornerRadius as he,normalizeCornerStyle as pe,normalizeShadowColor as fe,selectedThemeColors as ge}from"../../format/lib/theme.js";const E="sf-site-styles",me="sf-site-styles-tabpanel",Se=!1,Ce="Show hints";function _e({shown:e,onChange:t}){return n("div",{className:"sf-hints",children:_("button",{type:"button","aria-pressed":e,onClick:()=>t(!e),className:`sf-rung sf-hints-toggle${e?" is-active":""}`,children:[n(ne,{size:13}),g(Ce)]})})}const xt="text",P=[{id:"basics",label:"Basics",icon:n(oe,{})},{id:"theme",label:"Theme",icon:n(te,{})},{id:"text",label:"Text",icon:n(ie,{})}];function xe({themeFromDocument:e,persist:t}){const{appState:o,dispatch:s}=N(h=>h),{theme:d,setTheme:a}=S(),c=o.data,p=c.root?.props??{},r=h=>{if(e){const f={...p,theme:h};s({type:"replaceRoot",root:{...c.root,props:f},recordHistory:!0})}else a(h);t({selected_preset:h.selected,theme_presets:h.themes})};return n(k,{value:e?p.theme:d,onChange:r})}function we({themeFromDocument:e,persist:t}){const[o,s]=R(null),{theme:d,setFonts:a,setSizes:c,setHeadingTypography:p}=S(),r=de({themeFromDocument:e,persist:t}),{old:h,saved:f,writeRoot:m}=r,l=r.fonts,u=r.sizes,x=r.typography,y=i=>i.values.size??Re(Te[i.id]??"body")??be[i.kind],T=i=>r.write(i),F=ye(d),I=i=>{const C={...l,accent:i};e?m({fonts:C}):a(C),t({accent_font:i})},B=i=>{c({...u,accent:i}),t({accent_size_px:i})},A=i=>{const C={...x,weightStrong:i};e?m({headingTypography:C}):p(C),t({heading_weight_strong:i})},W=i=>{const C={...x,italicStrong:i};e?m({headingTypography:C}):p(C),t({accent_italic:i})};return _(w,{children:[n(Q,{saved:f,old:h,colours:F,sizeOf:y,onChange:T,openId:o===H?null:o,onOpenChange:s,withoutSize:e}),n(J,{font:l.accent,size:u.accent,weight:x.weightStrong,italic:x.italicStrong,headingWeight:x.weight,open:o===H,onOpenChange:i=>s(i?H:null),onChange:i=>{i.key==="font"?I(i.value):i.key==="size"?B(i.value):i.key==="weight"?A(i.value):W(i.value)},withoutSize:e})]})}const H="accent";function ye(e){const t=ge(e);return[{key:"accent",name:g("Accent"),value:t.accent},{key:"text",name:g("Text"),value:t.text},{key:"labels",name:g("Labels"),value:t.muted??t.text}]}const Te={"heading-1":"heading","heading-2":"heading2","heading-3":"heading3","body-1":"body","body-5":"label"},be={heading:32,body:14},Pe={heading:"main h1, main h2",heading2:"main h1, main h2",heading3:"main h1, main h2",accent:"main h1 em, main h2 em",body:"main p",label:"main .mono-eyebrow"};function Re(e){if(typeof document>"u")return null;const o=(le()?.contentDocument??document).querySelector(Pe[e]);if(!o)return null;const s=parseFloat(getComputedStyle(o).fontSize);return Number.isFinite(s)?s:null}function Ee({themeFromDocument:e,persist:t,showHint:o}){const{appState:s,dispatch:d}=N(u=>u),{cornerRadiusPx:a,setCornerRadiusPx:c}=S(),p=s.data,r=p.root?.props??{},h=r.cornerRadiusPx===void 0?ue[pe(r.cornerStyle)]:he(r.cornerRadiusPx),f=e?h:a,m=u=>d({type:"replaceRoot",root:{...p.root,props:{...r,...u}},recordHistory:!0});return n(L,{value:f,onChange:u=>{e?m({cornerRadiusPx:u}):c(u),t({corner_radius_px:u})},showHint:o})}function He(e){return{site_width:e}}function Ne({persist:e,showHint:t}){const{siteWidth:o,setSiteWidth:s,sectionBackgroundWidth:d,setSectionBackgroundWidth:a,sectionContentWidth:c,setSectionContentWidth:p}=S(),r=typeof o=="number"?o:b.default,h=l=>{s(l),e(He(l),l===null)},f=l=>{a(l),e({section_background_width:l},!0)},m=l=>{p(l),e({section_content_width:l},!0)};return _(w,{children:[n(ce,{title:g(q),level:4}),n(X,{value:d??"full",changed:d!==null,detail:g("Full width"),onChange:f,onReset:()=>f(null),hint:t?K:void 0}),n($,{mode:c??"content",px:r,min:b.min,max:b.max,changed:typeof o=="number"||c!==null,detail:`${g("Content width")} ${b.default}px`,onMode:m,onPx:l=>h(l),onReset:()=>{m(null),h(null)},hint:t?M:void 0})]})}function Fe(e){return{block_gap:e}}function Ie(e){return{site_gutter:e}}function Be({persist:e,showHint:t}){const{siteGutter:o,setSiteGutter:s}=S();return n(U,{value:o,onChange:a=>{s(a),e(Ie(a),a===null)},showHint:t})}function Ae({persist:e,showHint:t}){const{blockGap:o,setBlockGap:s}=S();return n(v,{value:o,onChange:a=>{s(a),e(Fe(a),a===null)},showHint:t})}function We({persist:e,showHint:t=!0}){return _(w,{children:[n(Ne,{persist:e,showHint:t}),n(Be,{persist:e,showHint:t}),n(Ae,{persist:e,showHint:t})]})}function ke(e){return{card_shadow:e}}function Le(e){return e===null?{shadow_color:null}:{shadow_color:fe(e)}}function Oe(e){return{hover_effect:e}}function Ge({persist:e,showHint:t=!0}){const{cardShadow:o,setCardShadow:s,shadowColor:d,setShadowColor:a,hoverEffect:c,setHoverEffect:p}=S();return _(w,{children:[n(O,{value:o,onChange:r=>{s(r),e(ke(r),!0)},showHint:t}),n(G,{value:d,onChange:r=>{a(r),e(Le(r),r===null)},showHint:t}),n(z,{value:c,onChange:r=>{p(r),e(Oe(r),!0)},showHint:t})]})}function ve(e){return{photography_grayscale:e}}function ze({persist:e,showHint:t}){const{photographyGrayscale:o,setPhotographyGrayscale:s}=S();return n(Y,{value:o,onChange:a=>{s(a),e(ve(a),!0)},showHint:t})}function Ye({persist:e,showHint:t=!0}){return n(w,{children:n(ze,{persist:e,showHint:t})})}function je(e){return{share_button_on_posts:e}}function Ue({persist:e,showHint:t=!0}){const{shareButtonOnPosts:o,setShareButtonOnPosts:s}=S();return n(j,{value:o,onChange:a=>{s(a),e(je(a),!0)},showHint:t})}function Xe(){const{websiteName:e}=S();return e?.trim()||ae}function wt(){const e=Xe();return n(Z,{content:g("{name} — renamed in the Console: {place}.",{name:e,place:g("Storefront ▸ Sites ▸ Settings")}),className:"sf-name-tip",children:n("span",{className:"sf-panel-site",children:e})})}function $e({themeFromDocument:e=!1,tokenRef:t,siteId:o,onNotify:s,tab:d,onTabChange:a}){const{persist:c}=re({themeFromDocument:e,tokenRef:t,siteId:o,onResult:y=>{const T=se(y);T&&s?.(T.msg,T.tone)}}),[p,r]=R(P[0].id),h=d!==void 0,f=h?d:p,m=h?a??(()=>{}):r,l=P.find(y=>y.id===f)??P[0],[u,x]=R(Se);return _(w,{children:[n(Ke,{activeId:l.id,onSelect:m}),_("div",{id:ee(E,l.id),className:me,role:"tabpanel","aria-labelledby":D(E,l.id),children:[f==="basics"&&_(w,{children:[n(Ee,{themeFromDocument:e,persist:c,showHint:u}),!e&&n(Ge,{persist:c,showHint:u}),!e&&n(We,{persist:c,showHint:u}),!e&&n(Ye,{persist:c,showHint:u}),!e&&n(Ue,{persist:c,showHint:u}),n(_e,{shown:u,onChange:x})]}),f==="theme"&&n(xe,{themeFromDocument:e,persist:c}),f==="text"&&n(we,{themeFromDocument:e,persist:c})]})]})}function Ke({activeId:e,onSelect:t}){return n("div",{className:"es-insp-tabs",children:n(V,{variant:"underline",block:!0,labelsFit:!0,"aria-label":g("Styles"),idPrefix:E,value:e,onChange:t,items:P.map(o=>{const s=g(o.label);return{id:o.id,icon:o.icon,label:s}})})})}export{Ge as CardLookFields,_e as HintsToggle,We as PageGroupFields,Ye as PhotographyGroupFields,Se as SHOW_HINTS_DEFAULT,E as SITE_STYLES_ID_PREFIX,P as SITE_STYLES_TABS,xt as SITE_STYLES_TEXT_TAB,Ue as ShareButtonRootField,Ke as SiteStylesTabStrip,me as TABPANEL_CLASS,wt as WebsiteNameReadonly,Fe as blockGapPatch,ke as cardShadowPatch,$e as default,Oe as hoverEffectPatch,ve as photographyPatch,Le as shadowColourPatch,je as shareButtonPatch,Ie as siteGutterPatch,He as siteWidthPatch,Xe as useWebsiteName};
+"use client";import{jsx as n,jsxs as _,Fragment as w}from"react/jsx-runtime";import{useEasel as N}from"efficient-easel/easel";import{useState as R}from"react";import W from"./ThemeField.js";import O from"./CornersField.js";import L from"./CardShadowField.js";import z from"./ShadowColourField.js";import v from"./BlockGapField.js";import G from"./HoverEffectField.js";import Y from"./PhotographyField.js";import j from"./ShareButtonField.js";import X from"./SideSpaceField.js";import{BackgroundWidthRow as U,ContentWidthRow as $,SITE_BACKGROUND_HINT as K,SITE_CONTENT_HINT as M}from"./SectionWidthRows.js";import q from"./SiteAccentField.js";import J from"./SiteTextStylesField.js";import{usePreviewHeader as m}from"../../render/components/PreviewHeaderContext.js";import{Tabs as Q,Tooltip as V,tabButtonId as Z,tabPanelId as D}from"efficient-shell/ui";import{ContrastIcon as ee,NoteIcon as te,SettingsIcon as ne,TypeIcon as oe}from"efficient-easel/icons";import{useThemeRowPersist as ie}from"../lib/theme-row-persist.js";import{themeSaveNotice as re}from"../../format/lib/theme-save-message.js";import{say as S}from"../../format/lib/editor-words.js";import{NEUTRAL_SITE_NAME as se}from"../../format/lib/content/site-name.js";import{PAGE_WIDTH as b}from"../../format/lib/content/page-width.js";import{previewFrame as ae}from"efficient-easel/screen/lib/puck/preview-dom";import{useSiteTextStylesWriter as ce}from"../lib/site-text-styles-writer.js";import{CORNER_STYLE_TO_PX as le,normalizeCornerRadius as de,normalizeCornerStyle as he,normalizeShadowColor as ue,selectedThemeColors as pe}from"../../format/lib/theme.js";const E="sf-site-styles",fe="sf-site-styles-tabpanel",ge=!1,me="Show hints";function Se({shown:e,onChange:t}){return n("div",{className:"sf-hints",children:_("button",{type:"button","aria-pressed":e,onClick:()=>t(!e),className:`sf-rung sf-hints-toggle${e?" is-active":""}`,children:[n(te,{size:13}),S(me)]})})}const St="text",P=[{id:"basics",label:"Basics",icon:n(ne,{})},{id:"theme",label:"Theme",icon:n(ee,{})},{id:"text",label:"Text",icon:n(oe,{})}];function Ce({themeFromDocument:e,persist:t}){const{appState:o,dispatch:s}=N(u=>u),{theme:d,setTheme:a}=m(),c=o.data,p=c.root?.props??{},r=u=>{if(e){const f={...p,theme:u};s({type:"replaceRoot",root:{...c.root,props:f},recordHistory:!0})}else a(u);t({selected_preset:u.selected,theme_presets:u.themes})};return n(W,{value:e?p.theme:d,onChange:r})}function _e({themeFromDocument:e,persist:t}){const[o,s]=R(null),{theme:d,setFonts:a,setSizes:c,setHeadingTypography:p}=m(),r=ce({themeFromDocument:e,persist:t}),{old:u,saved:f,writeRoot:g}=r,l=r.fonts,h=r.sizes,x=r.typography,y=i=>i.values.size??be(we[i.id]??"body")??ye[i.kind],T=i=>r.write(i),F=xe(d),I=i=>{const C={...l,accent:i};e?g({fonts:C}):a(C),t({accent_font:i})},B=i=>{c({...h,accent:i}),t({accent_size_px:i})},k=i=>{const C={...x,weightStrong:i};e?g({headingTypography:C}):p(C),t({heading_weight_strong:i})},A=i=>{const C={...x,italicStrong:i};e?g({headingTypography:C}):p(C),t({accent_italic:i})};return _(w,{children:[n(J,{saved:f,old:u,colours:F,sizeOf:y,onChange:T,openId:o===H?null:o,onOpenChange:s,withoutSize:e}),n(q,{font:l.accent,size:h.accent,weight:x.weightStrong,italic:x.italicStrong,headingWeight:x.weight,open:o===H,onOpenChange:i=>s(i?H:null),onChange:i=>{i.key==="font"?I(i.value):i.key==="size"?B(i.value):i.key==="weight"?k(i.value):A(i.value)},withoutSize:e})]})}const H="accent";function xe(e){const t=pe(e);return[{key:"accent",name:S("Accent"),value:t.accent},{key:"text",name:S("Text"),value:t.text},{key:"labels",name:S("Labels"),value:t.muted??t.text}]}const we={"heading-1":"heading","heading-2":"heading2","heading-3":"heading3","body-1":"body","body-5":"label"},ye={heading:32,body:14},Te={heading:"main h1, main h2",heading2:"main h1, main h2",heading3:"main h1, main h2",accent:"main h1 em, main h2 em",body:"main p",label:"main .mono-eyebrow"};function be(e){if(typeof document>"u")return null;const o=(ae()?.contentDocument??document).querySelector(Te[e]);if(!o)return null;const s=parseFloat(getComputedStyle(o).fontSize);return Number.isFinite(s)?s:null}function Pe({themeFromDocument:e,persist:t,showHint:o}){const{appState:s,dispatch:d}=N(h=>h),{cornerRadiusPx:a,setCornerRadiusPx:c}=m(),p=s.data,r=p.root?.props??{},u=r.cornerRadiusPx===void 0?le[he(r.cornerStyle)]:de(r.cornerRadiusPx),f=e?u:a,g=h=>d({type:"replaceRoot",root:{...p.root,props:{...r,...h}},recordHistory:!0});return n(O,{value:f,onChange:h=>{e?g({cornerRadiusPx:h}):c(h),t({corner_radius_px:h})},showHint:o})}function Re(e){return{site_width:e}}function Ee({persist:e,showHint:t}){const{siteWidth:o,setSiteWidth:s,sectionBackgroundWidth:d,setSectionBackgroundWidth:a,sectionContentWidth:c,setSectionContentWidth:p}=m(),r=typeof o=="number"?o:b.default,u=l=>{s(l),e(Re(l),l===null)},f=l=>{a(l),e({section_background_width:l},!0)},g=l=>{p(l),e({section_content_width:l},!0)};return _(w,{children:[n(U,{value:d??"full",changed:d!==null,detail:S("Full width"),onChange:f,onReset:()=>f(null),hint:t?K:void 0}),n($,{mode:c??"content",px:r,min:b.min,max:b.max,changed:typeof o=="number"||c!==null,detail:`${S("Content width")} ${b.default}px`,onMode:g,onPx:l=>u(l),onReset:()=>{g(null),u(null)},hint:t?M:void 0})]})}function He(e){return{block_gap:e}}function Ne(e){return{site_gutter:e}}function Fe({persist:e,showHint:t}){const{siteGutter:o,setSiteGutter:s}=m();return n(X,{value:o,onChange:a=>{s(a),e(Ne(a),a===null)},showHint:t})}function Ie({persist:e,showHint:t}){const{blockGap:o,setBlockGap:s}=m();return n(v,{value:o,onChange:a=>{s(a),e(He(a),a===null)},showHint:t})}function Be({persist:e,showHint:t=!0}){return _(w,{children:[n(Ee,{persist:e,showHint:t}),n(Fe,{persist:e,showHint:t}),n(Ie,{persist:e,showHint:t})]})}function ke(e){return{card_shadow:e}}function Ae(e){return e===null?{shadow_color:null}:{shadow_color:ue(e)}}function We(e){return{hover_effect:e}}function Oe({persist:e,showHint:t=!0}){const{cardShadow:o,setCardShadow:s,shadowColor:d,setShadowColor:a,hoverEffect:c,setHoverEffect:p}=m();return _(w,{children:[n(L,{value:o,onChange:r=>{s(r),e(ke(r),!0)},showHint:t}),n(z,{value:d,onChange:r=>{a(r),e(Ae(r),r===null)},showHint:t}),n(G,{value:c,onChange:r=>{p(r),e(We(r),!0)},showHint:t})]})}function Le(e){return{photography_grayscale:e}}function ze({persist:e,showHint:t}){const{photographyGrayscale:o,setPhotographyGrayscale:s}=m();return n(Y,{value:o,onChange:a=>{s(a),e(Le(a),!0)},showHint:t})}function ve({persist:e,showHint:t=!0}){return n(w,{children:n(ze,{persist:e,showHint:t})})}function Ge(e){return{share_button_on_posts:e}}function Ye({persist:e,showHint:t=!0}){const{shareButtonOnPosts:o,setShareButtonOnPosts:s}=m();return n(j,{value:o,onChange:a=>{s(a),e(Ge(a),!0)},showHint:t})}function je(){const{websiteName:e}=m();return e?.trim()||se}function Ct(){const e=je();return n(V,{content:S("{name} — renamed in the Console: {place}.",{name:e,place:S("Storefront ▸ Sites ▸ Settings")}),className:"sf-name-tip",children:n("span",{className:"sf-panel-site",children:e})})}function Xe({themeFromDocument:e=!1,tokenRef:t,siteId:o,onNotify:s,tab:d,onTabChange:a}){const{persist:c}=ie({themeFromDocument:e,tokenRef:t,siteId:o,onResult:y=>{const T=re(y);T&&s?.(T.msg,T.tone)}}),[p,r]=R(P[0].id),u=d!==void 0,f=u?d:p,g=u?a??(()=>{}):r,l=P.find(y=>y.id===f)??P[0],[h,x]=R(ge);return _(w,{children:[n(Ue,{activeId:l.id,onSelect:g}),_("div",{id:D(E,l.id),className:fe,role:"tabpanel","aria-labelledby":Z(E,l.id),children:[f==="basics"&&_(w,{children:[n(Pe,{themeFromDocument:e,persist:c,showHint:h}),!e&&n(Oe,{persist:c,showHint:h}),!e&&n(Be,{persist:c,showHint:h}),!e&&n(ve,{persist:c,showHint:h}),!e&&n(Ye,{persist:c,showHint:h}),n(Se,{shown:h,onChange:x})]}),f==="theme"&&n(Ce,{themeFromDocument:e,persist:c}),f==="text"&&n(_e,{themeFromDocument:e,persist:c})]})]})}function Ue({activeId:e,onSelect:t}){return n("div",{className:"es-insp-tabs",children:n(Q,{variant:"underline",block:!0,labelsFit:!0,"aria-label":S("Styles"),idPrefix:E,value:e,onChange:t,items:P.map(o=>{const s=S(o.label);return{id:o.id,icon:o.icon,label:s}})})})}export{Oe as CardLookFields,Se as HintsToggle,Be as PageGroupFields,ve as PhotographyGroupFields,ge as SHOW_HINTS_DEFAULT,E as SITE_STYLES_ID_PREFIX,P as SITE_STYLES_TABS,St as SITE_STYLES_TEXT_TAB,Ye as ShareButtonRootField,Ue as SiteStylesTabStrip,fe as TABPANEL_CLASS,Ct as WebsiteNameReadonly,He as blockGapPatch,ke as cardShadowPatch,Xe as default,We as hoverEffectPatch,Le as photographyPatch,Ae as shadowColourPatch,Ge as shareButtonPatch,Ne as siteGutterPatch,Re as siteWidthPatch,je as useWebsiteName};

package/dist/editor/components/storefront-editor.css

@@ -1779,9 +1779,11 @@
    `.sf-subgroup` heading while the shell shipped `SettingsGroupSub`, so this
    rule, which keys on `.es-group-sub`, could never see it.
 
-   The heading is the shell's now, and these two selectors are what carry the
-   rule into a sheet that does not draw Puck field wrappers: it renders its rows
-   as bare `SettingsField`s inside its own container. Same 30px, same full
+   Since 2026-10-14 the sheet has NO heading there (Lewis: one kind of group
+   heading per panel, the folding band): it draws an empty
+   `.sf-theme-module-break` where `SURFACES` stood, and these two selectors
+   carry the rule to it. The sheet does not draw Puck field wrappers: it renders
+   its rows as bare `SettingsField`s inside its own container. Same 30px, same full
    bleed, same token-read cancel — one block, because a second copy of his
    number is the thing that goes stale.
 
@@ -1790,8 +1792,8 @@
    then reported half of one rule as an unlisted line — a comment changing what
    a guard sees. */
 .sf-insp-body .es-insp-row:has(.es-group-sub),
-.sf-theme-colours .es-group-sub,
-.sf-secttheme-rows .es-group-sub {
+.sf-theme-colours .sf-theme-module-break,
+.sf-secttheme-rows .sf-theme-module-break {
   border-top: 1px solid var(--sf-line);
   margin-top: var(--space-32);
   padding-top: var(--space-32);
@@ -1805,6 +1807,14 @@
   padding-left: var(--es-insp-pad-x);
   padding-right: var(--es-insp-pad-end);
 }
+/* The theme sheet's break has no heading under it (2026-10-14), so the air
+   under the line is the next row's own gap, not this rule's 32px on top of it:
+   without this the line sat twice as far from the rows under it as from the
+   rows above it. */
+.sf-theme-colours .sf-theme-module-break,
+.sf-secttheme-rows .sf-theme-module-break {
+  padding-top: 0;
+}
 /* The heading's own top margin is the wrapper's job now. */
 .sf-insp-body .es-insp-row:has(.es-group-sub) .es-group-sub {
   margin-top: 0;
@@ -2165,19 +2175,15 @@
    `<input type="color">`, whose window was the operating system's. See
    lib/puck/ColourControl.tsx.
 
-   THE ROW HOLDS THE PICKER IN ITS LABEL LINE — `SettingsField`'s `action`
-   slot — and the swatch and hex sit at the end of that line (`margin-left:
-   auto`, which the shell gives `.es-field-value` and nothing else). The window
-   is a popover now, so the line no longer wraps to make room for it. */
+   THE SWATCH AND THE HEX HAVE THEIR OWN LINE under the label, both 32, and
+   the row's ↺ sits on the label line (`ColourRow`; Lewis 2026-10-23, option
+   2): on the label line at 32 the row ran 71px past a 220 panel. */
 .sf-colour {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--space-8);
   min-width: 0;
 }
-.es-field-head > .sf-colour {
-  margin-left: auto;
-}
 /* The hex box's width is the SHELL's: `HexInput` is never narrower than its
    seven characters and its padding. This sheet held it at 4.75rem, which cut
    "#0A0A0A" to "#0A0A0" in the Hero's Texture color row (Lewis, 2026-10-14). */

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

@@ -0,0 +1 @@
+export declare function useHostDocumentBridge(): void;

package/dist/editor/components/useHostDocumentBridge.js

@@ -0,0 +1 @@
+"use client";import{useEffect as k,useMemo as E,useRef as I}from"react";import{useEasel as O}from"efficient-easel/easel";import{useEaselHost as B}from"efficient-easel/screen/lib/host";import{applyPageEdits as D,describeBlocks as H,describeSelection as J}from"../../format/lib/host-document-bridge.js";const p=e=>typeof e.requestId=="string"&&e.requestId?e.requestId:null;function C(){const e=B(),{appState:n,selectedItem:m,dispatch:l,history:f,config:q}=O(s=>s),i=q,g=I({appState:n,dispatch:l,history:f,blockConfig:i});g.current={appState:n,dispatch:l,history:f,blockConfig:i};const c=I(new Map),h=m?.props?.id,a=E(()=>J(i,n.data,h),[i,n.data,h]),S=a?JSON.stringify(a):"";k(()=>{e.connected&&e.send("storefront-editor:selection",{selection:a})},[e,S]),k(()=>e.subscribe(s=>{const{appState:d,dispatch:y,history:u,blockConfig:b}=g.current;switch(s.type){case"storefront-editor:request-document":{const t=p(s);if(!t)return;e.send("storefront-editor:document",{requestId:t,document:d.data,blocks:H(b)});return}case"storefront-editor:apply-page-edits":{const t=p(s);if(!t)return;const r=Array.isArray(s.ops)?s.ops:[],o=r.length?D(b,d.data,r,w=>`${w}-${crypto.randomUUID()}`):{ok:!1,reason:"no changes"};o.ok&&(y({type:"setData",data:o.document,recordHistory:!0}),c.current.set(t,JSON.stringify(o.document.content??[]))),e.send("storefront-editor:page-edits-result",{requestId:t,applied:o.ok,reason:o.ok?null:o.reason});return}case"storefront-editor:undo-page-edits":{const t=p(s);if(!t)return;const r=c.current.get(t),o=r!==void 0&&r===JSON.stringify(d.data.content??[]);o&&u.hasPast&&(u.back(),c.current.delete(t)),e.send("storefront-editor:page-edits-result",{requestId:t,applied:o&&u.hasPast,reason:o?null:"the page has changed since"});return}case"storefront-editor:set-right-panel":typeof s.shown=="boolean"&&y({type:"setUi",ui:{rightSideBarVisible:s.shown}});return;default:return}}),[e])}export{C as useHostDocumentBridge};

package/dist/editor/lib/puck/ColourControl.d.ts

@@ -1,12 +1,11 @@
 import type { ReactElement, ReactNode } from "react";
-export declare function ColourControl({ value, onChange, label, id, caption, inherited, after, ariaLabel, }: {
+export declare function ColourControl({ value, onChange, label, id, caption, inherited, ariaLabel, }: {
     value: string;
     onChange: (next: string) => void;
     label: string;
     id?: string;
     caption?: string;
     inherited?: string;
-    after?: ReactNode;
     ariaLabel?: string;
 }): import("react").JSX.Element;
 export declare function AnyColourSwatch({ value, onChange, label, }: {
@@ -14,6 +13,14 @@ export declare function AnyColourSwatch({ value, onChange, label, }: {
     onChange: (next: string) => void;
     label: string;
 }): import("react").JSX.Element;
+export declare function ColourRow({ label, icon, changed, hint, onReset, resetTo, children, ...control }: Parameters<typeof ColourControl>[0] & {
+    icon?: ReactNode;
+    changed?: boolean;
+    hint?: ReactNode;
+    onReset?: () => void;
+    resetTo?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
 export declare function InheritedColourRow({ label, icon, value, inherited, resetTo, onChange, onReset, hint, }: {
     label: string;
     icon?: ReactElement;

package/dist/editor/lib/puck/ColourControl.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as g}from"react/jsx-runtime";import{ColorPicker as p,HexInput as x}from"efficient-shell/ui";import{SettingsDefaultReset as C,SettingsField as w}from"efficient-easel/panel";import{typedHex as u}from"efficient-easel/pick";import{usePreviewHeader as b}from"../../../render/components/PreviewHeaderContext.js";import{editorEaselWords as N,say as d}from"../../../format/lib/editor-words.js";import{themeSwatches as S}from"./theme-swatches.js";function j({value:e,onChange:o,label:n,id:r,caption:i,inherited:l,after:a,ariaLabel:c}){return t(k,{value:e,onChange:o,label:d(c??n),id:r,caption:i,inherited:l,after:a})}function P(){const{theme:e}=b();return S(e).map(o=>({value:o.value,label:o.name}))}function k({value:e,onChange:o,label:n,id:r,caption:i,inherited:l,after:a}){const c=P(),s=e?null:u(l??""),f=i!==void 0&&(!e||u(i)!==u(e))?i:null,m=h=>{h!==e&&o(h)};return g("div",{className:"sf-colour",children:[t(p,{id:r,value:e,onChange:m,label:n,presets:c,fallback:s??void 0,size:"sm",align:"end"}),f!==null?t("span",{className:"sf-colour-caption",children:f}):t("span",{className:"sf-colour-hexwrap",children:t(x,{value:e||s||"",onChange:m,label:d("{label} hex code",{label:n}),placeholder:e||s?void 0:d("Not set"),className:s?"sf-colour-hex is-inherited":"sf-colour-hex",size:"sm"})}),a]})}function B({value:e,onChange:o,label:n}){return t(p,{value:e,onChange:r=>{r&&r!==e&&o(r)},label:d(n),size:"sm",align:"end"})}function D({label:e,icon:o,value:n,inherited:r,resetTo:i,onChange:l,onReset:a,hint:c}){const s=!!n;return t(w,{label:e,icon:o,changed:s,action:j({value:n,inherited:s?void 0:r,onChange:l,label:e,after:t(C,{words:N()?.panel,label:e,changed:s,detail:i,onReset:a})}),hint:c})}export{B as AnyColourSwatch,j as ColourControl,D as InheritedColourRow};
+"use client";import{jsx as s,jsxs as m}from"react/jsx-runtime";import{ColorPicker as p,HexInput as C}from"efficient-shell/ui";import{SettingsDefaultReset as g,SettingsField as x}from"efficient-easel/panel";import{typedHex as u}from"efficient-easel/pick";import{usePreviewHeader as w}from"../../../render/components/PreviewHeaderContext.js";import{editorEaselWords as b,say as c}from"../../../format/lib/editor-words.js";import{themeSwatches as N}from"./theme-swatches.js";function S({value:e,onChange:o,label:n,id:r,caption:t,inherited:l,ariaLabel:a}){return s(P,{value:e,onChange:o,label:c(a??n),id:r,caption:t,inherited:l})}function j(){const{theme:e}=w();return N(e).map(o=>({value:o.value,label:o.name}))}function P({value:e,onChange:o,label:n,id:r,caption:t,inherited:l}){const a=j(),i=e?null:u(l??""),d=t!==void 0&&(!e||u(t)!==u(e))?t:null,f=h=>{h!==e&&o(h)};return m("div",{className:"sf-colour",children:[s(p,{id:r,value:e,onChange:f,label:n,presets:a,fallback:i??void 0,size:"md",align:"start"}),d!==null?s("span",{className:"sf-colour-caption",children:d}):s("span",{className:"sf-colour-hexwrap",children:s(C,{value:e||i||"",onChange:f,label:c("{label} hex code",{label:n}),placeholder:e||i?void 0:c("Not set"),className:i?"sf-colour-hex is-inherited":"sf-colour-hex",size:"md"})})]})}function T({value:e,onChange:o,label:n}){return s(p,{value:e,onChange:r=>{r&&r!==e&&o(r)},label:c(n),size:"sm",align:"end"})}function R({label:e,icon:o,changed:n,hint:r,onReset:t,resetTo:l,children:a,...i}){return m(x,{label:e,icon:o,htmlFor:i.id,changed:n,hint:r,action:t?s(g,{words:b()?.panel,label:e,changed:!!n,detail:l,onReset:t}):void 0,children:[S({...i,label:e}),a]})}function _({label:e,icon:o,value:n,inherited:r,resetTo:t,onChange:l,onReset:a,hint:i}){const d=!!n;return s(R,{label:e,icon:o,value:n,inherited:d?void 0:r,onChange:l,changed:d,onReset:a,resetTo:t,hint:i})}export{T as AnyColourSwatch,S as ColourControl,R as ColourRow,_ as InheritedColourRow};

package/dist/editor/lib/puck/blocks/general/ButtonBlock/fields.js

@@ -1 +1 @@
-import{jsx as e,jsxs as I}from"react/jsx-runtime";import{ButtonIcon as d,ButtonIconIcon as h,GroundIcon as g,IconAfterTextIcon as x,IconBeforeTextIcon as y,StylesIcon as b,TextColorIcon as C,WidthIcon as S}from"efficient-easel/icons";import*as T from"efficient-easel/icons";import{SettingsField as _}from"efficient-easel/panel";import{useSelectedFields as s}from"efficient-easel/easel";import{IconPicker as B,Segmented as F}from"efficient-shell/ui";import{StorefrontTextLinkField as O}from"../../../../../components/StorefrontLinkField.js";import{BUTTON_ICONS as v,buttonIconChoice as N,buttonIconSide as k}from"../../../../../../format/lib/content/button-icon.js";import{say as l}from"../../../../../../format/lib/editor-words.js";import{FOLLOWS_SITE_BUTTON as L,FOLLOWS_SITE_BUTTON_INK as z,colorInput as m,group as w,inOwnBox as j,linkField as P,plainText as U,section as u,segmented as f}from"../../../controls.js";import{NoControlMark as W,noControlField as A}from"efficient-easel/screen/lib/puck/panel-no-control-mark";import{alignField as E}from"../../shared-fields.js";const a=o=>({...A({type:"custom",render:()=>e(W,{})},"always"),reachedBy:o});function G(o){const n=(o==="none"?"no-symbol":o).replace(/(^|-)([a-z])/g,(r,c,p)=>p.toUpperCase()),t=T[`${n}Icon`];return t?e(t,{size:16}):null}const K=v.map(o=>({value:o,icon:G(o)}));function M({value:o,onChange:i}){const n=s(),t=n.values.href,r=typeof o=="string"?o:o&&typeof o=="object"&&"text"in o?String(o.text??""):"";return e(O,{label:"Button",icon:e(d,{size:18}),text:r,onTextChange:i,link:typeof t=="string"?t:"",onLinkChange:c=>n.onChange("href",c)})}function R({value:o,onChange:i}){const n=s(),t=N(o,n.values.arrow),r=k(n.values.iconPosition);return e(_,{label:l("Icon"),icon:e(h,{size:18}),children:I("div",{className:"flex items-center gap-2",children:[e(B,{label:l("Icon"),value:t,emptyValue:"none",options:K,onChange:i}),t!=="none"&&e(F,{label:l("Icon position"),value:r,onChange:c=>n.onChange("iconPosition",c),options:[{value:"before",icon:e(y,{size:16}),label:e("span",{className:"sr-only",children:l("Icon before text")}),title:l("Icon before text")},{value:"after",icon:e(x,{size:16}),label:e("span",{className:"sr-only",children:l("Icon after text")}),title:l("Icon after text")}]})]})})}const eo={fields:{label:j(U("Button"),o=>e(M,{value:o.value,onChange:o.onChange})),href:{...P("Button link"),...a("label")},_dSize:u("Size"),widthFit:f("Width",e(S,{}),[{label:"Fit content",value:"fit"},{label:"Fill",value:"fill"}],"fit"),_gStyle:w("Style"),variant:f("Style",e(b,{}),[{label:"Filled",value:"primary"},{label:"Outline",value:"ghost"}],"primary"),icon:{type:"custom",render:o=>e(R,{value:o.value,onChange:o.onChange})},iconPosition:a("icon"),arrow:a("icon"),buttonColor:m("Fill color",L,e(g,{})),buttonTextColor:m("Text color",z,e(C,{})),_dLayout:u("Layout"),align:E()}};export{eo as ButtonBlockFields};
+import{jsx as e,jsxs as I}from"react/jsx-runtime";import{ButtonIcon as d,ButtonIconIcon as h,GroundIcon as g,IconAfterTextIcon as x,IconBeforeTextIcon as b,StylesIcon as y,TextColorIcon as C,WidthIcon as S}from"efficient-easel/icons";import*as T from"efficient-easel/icons";import{SettingsField as _}from"efficient-easel/panel";import{useSelectedFields as a}from"efficient-easel/easel";import{IconPicker as B,Segmented as F}from"efficient-shell/ui";import{StorefrontTextLinkField as O}from"../../../../../components/StorefrontLinkField.js";import{BUTTON_ICONS as k,buttonIconChoice as v,buttonIconSide as N}from"../../../../../../format/lib/content/button-icon.js";import{say as l}from"../../../../../../format/lib/editor-words.js";import{FOLLOWS_SITE_BUTTON as z,FOLLOWS_SITE_BUTTON_INK as L,colorInput as m,group as w,inOwnBox as j,linkField as P,plainText as U,section as u,segmented as f}from"../../../controls.js";import{NoControlMark as W,noControlField as A}from"efficient-easel/screen/lib/puck/panel-no-control-mark";import{alignField as E}from"../../shared-fields.js";const s=o=>({...A({type:"custom",render:()=>e(W,{})},"always"),reachedBy:o});function G(o){const n=(o==="none"?"no-symbol":o).replace(/(^|-)([a-z])/g,(r,c,p)=>p.toUpperCase()),t=T[`${n}Icon`];return t?e(t,{size:16}):null}const K=k.map(o=>({value:o,icon:G(o)}));function M({value:o,onChange:i}){const n=a(),t=n.values.href,r=typeof o=="string"?o:o&&typeof o=="object"&&"text"in o?String(o.text??""):"";return e(O,{label:"Button",icon:e(d,{size:18}),text:r,onTextChange:i,link:typeof t=="string"?t:"",onLinkChange:c=>n.onChange("href",c)})}function R({value:o,onChange:i}){const n=a(),t=v(o,n.values.arrow),r=N(n.values.iconPosition);return e(_,{label:l("Icon"),icon:e(h,{size:18}),children:I("div",{className:"flex items-center gap-2",children:[e(B,{label:l("Icon"),value:t,emptyValue:"none",options:K,onChange:i}),t!=="none"&&e(F,{size:"sm",block:!0,label:l("Icon position"),value:r,onChange:c=>n.onChange("iconPosition",c),options:[{value:"before",icon:e(b,{size:16}),label:e("span",{className:"sr-only",children:l("Icon before text")}),title:l("Icon before text")},{value:"after",icon:e(x,{size:16}),label:e("span",{className:"sr-only",children:l("Icon after text")}),title:l("Icon after text")}]})]})})}const eo={fields:{label:j(U("Button"),o=>e(M,{value:o.value,onChange:o.onChange})),href:{...P("Button link"),...s("label")},_dSize:u("Size"),widthFit:f("Width",e(S,{}),[{label:"Fit content",value:"fit"},{label:"Fill",value:"fill"}],"fit"),_gStyle:w("Style"),variant:f("Style",e(y,{}),[{label:"Filled",value:"primary"},{label:"Outline",value:"ghost"}],"primary"),icon:{type:"custom",render:o=>e(R,{value:o.value,onChange:o.onChange})},iconPosition:s("icon"),arrow:s("icon"),buttonColor:m("Fill color",z,e(g,{})),buttonTextColor:m("Text color",L,e(C,{})),_dLayout:u("Layout"),align:E()}};export{eo as ButtonBlockFields};

package/dist/editor/lib/puck/blocks/general/Flex/fields.js

@@ -1 +1 @@
-import{jsx as s}from"react/jsx-runtime";import{BOX_CARD_PAD as l,BOX_DARKEN as t,BOX_DARKEN_STYLES as p,isBackgroundBox as b}from"../../../../../../format/lib/content/box-background.js";import{containerDirectionPoints as u}from"../../../../../../format/lib/content/container-direction.js";import{deviceField as c}from"efficient-easel/screen/lib/puck/device-fields";import{OpacityIcon as k,StylesIcon as x}from"efficient-easel/icons";import{boxAlignField as F,boxBlockSpacingField as y,boxJustifyField as S,boxPhoneRowField as _,boxShareField as B,boxWrapField as O,gapField as h,group as r,placementField as D,plainText as I,select as R,sidesPaddingFields as d,slider as w,upload as m,withPanelOnly as A}from"../../../controls.js";import{withRowRules as P}from"../../../../../../render/lib/puck/show-when.js";import{FlexSlots as j}from"../../../../../../format/lib/puck/blocks/general/Flex/meta.js";const C={field:"bgImage",set:!0},H={fields:P({_gContent:r("Content"),content:j.content,_gLayout:r("Layout"),direction:{type:"radio",options:u("Flex")},label:A(I("Tab name")),gap:h("Flex"),justify:S(),align:F(),wrap:O(),share:B(),phoneRow:_(),blockSpacing:y(),_gBackground:r("Background image"),bgImage:c("desktop",m("Image","image/*")),bgImagePhone:c("mobile",m("Image","image/*")),darken:w("Darken",s(k,{}),t.min,t.max,t.step,t.fallback,t.unit),darkenStyle:R("Darken style",s(x,{}),p,p[0].value),placement:D("Content position",{stacking:!1})},[[["darken","darkenStyle","placement"],C]]),resolveFields:(i,{fields:e})=>{const o=i.props;if(b(o.bgImage)){const a=d({fallback:{top:l.desktop,bottom:l.desktop,left:l.side,right:l.side}});return g(e,a)}return i.props.padV2!==!0?g(e,d({fallback:{top:24,bottom:24}})):e}};function g(i,e){const o={};let n=!1;for(const[a,f]of Object.entries(i)){if(a in e){n||Object.assign(o,e),n=!0;continue}o[a]=f}return n||Object.assign(o,e),o}export{H as FlexFields};
+import{jsx as c}from"react/jsx-runtime";import{BOX_CARD_PAD as s,BOX_DARKEN as a,BOX_DARKEN_STYLES as m,isBackgroundBox as u}from"../../../../../../format/lib/content/box-background.js";import{containerDirectionPoints as k}from"../../../../../../format/lib/content/container-direction.js";import{deviceField as d}from"efficient-easel/screen/lib/puck/device-fields";import{OpacityIcon as x,StylesIcon as F}from"efficient-easel/icons";import{boxAlignField as y,boxBlockSpacingField as O,boxJustifyField as S,boxPhoneRowField as _,boxShareField as B,boxWrapField as h,foldMetaOf as j,gapField as w,group as p,placementField as D,plainText as I,select as R,sidesPaddingFields as g,slider as A,upload as b,withPanelOnly as P}from"../../../controls.js";import{withRowRules as C}from"../../../../../../render/lib/puck/show-when.js";import{FlexSlots as E}from"../../../../../../format/lib/puck/blocks/general/Flex/meta.js";const v={field:"bgImage",set:!0},M={fields:C({_gContent:p("Content"),content:E.content,_gLayout:p("Layout"),direction:{type:"radio",options:k("Flex")},label:P(I("Tab name")),gap:w("Flex"),justify:S(),align:y(),wrap:h(),share:B(),phoneRow:_(),blockSpacing:O(),_gBackground:p("Background image"),bgImage:d("desktop",b("Image","image/*")),bgImagePhone:d("mobile",b("Image","image/*")),darken:A("Darken",c(x,{}),a.min,a.max,a.step,a.fallback,a.unit),darkenStyle:R("Darken style",c(F,{}),m,m[0].value),placement:D("Content position",{stacking:!1})},[[["darken","darkenStyle","placement"],v]]),resolveFields:(e,{fields:o})=>{const r=e.props;if(u(r.bgImage)){const i=g({fallback:{top:s.desktop,bottom:s.desktop,left:s.side,right:s.side}});return f(o,i)}return e.props.padV2!==!0?f(o,g({fallback:{top:24,bottom:24}})):o}};function f(e,o){const r=Object.fromEntries(Object.entries(o).map(([t,l])=>[t,t in e&&j(l)?e[t]:l])),n={};let i=!1;for(const[t,l]of Object.entries(e)){if(t in o){i||Object.assign(n,r),i=!0;continue}n[t]=l}return i||Object.assign(n,r),n}export{M as FlexFields};