efficient-web-builder 23.1.0 → 24.0.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 ## Unreleased
 
+## 24.0.0 - 2026-10-19
+
+**Three sides: render, format and editor, and the package exports them and nothing else** (keep editor code off shopper pages, PR 1c; plan approved by JJ, `doc/adr/0005`). A published page draws from the `render` side, which cannot reach the editor. A MAJOR: every import path a host writes moves.
+
+### Changed for hosts (breaking)
+
+- **Every module ships under its side**: `dist/render/`, `dist/format/` or `dist/editor/`, at its `src/` path. A host imports `efficient-web-builder/<side>/<path>`: `efficient-web-builder/render/lib/puck/page-frame`, `efficient-web-builder/editor/lib/puck/controls`, `efficient-web-builder/format/lib/puck/section-catalog`, `efficient-web-builder/editor/components/storefront-editor.css`. The `"./*"`, `"./*.css"` and `"./*.json"` exports are gone: a deep path without a side does not resolve, and an editor module has no file under `render/`.
+- **To find a module's side**, look for it under `dist/<side>/`. `scripts/entry-sides.mjs` decides it: `format` is pure (no React, no `"use client"`, pure packages only, all its imports pure); `render` is what the builder's render API and the modules a host's drawing imports (`HOST_DRAWS`) reach; `editor` is the rest.
+- A host that resolved `@/…` into `node_modules/efficient-web-builder/dist` drops the builder from that alias and imports by package name and side (the storefront's blocks and the storefront do this with a codemod).
+- **The click-a-part walker is the inspector's** (`PassInspector.PartAnchors`). `clickableParts` draws it only in a registry built with the inspector, so a registry that only draws a page has no walker in its graph. A host that builds an editor's registry with `finishRegistry` (or `lib/puck/build-config`) gets it with no change.
+- **A section's click-a-region bridge is handed in**: `lib/puck/editing-bridges` `SectionTextParts` draws the bridge the editor provides, and its children alone with none. `lib/puck/page-root` `EditorThemedBody` provides `components/SectionTextPartBridge` (`EDITING_BRIDGES`). A host's drawing that wrapped its copy in `SectionTextPartBridge` uses `SectionTextParts` (render side) instead.
+- **The Hero's arrow picker takes its one look** (`SlideArrowsRoundSolidIcon`, efficient-shell 7.72.0), never the `efficientLooks` map. With that, the package imports no icon map, so efficient-shell 8.0.0 (which moves only the maps to `icons/sets`) needs no code change here; the peer range widens to it in a release built against 8.0.0.
+
+### Guards
+
+- `scripts/build.mjs` fails when the render side reaches an editor-only module (a block's settings rows, the controls, the editor's registries, the inspector, the editor's page body, the click bridges, the editor itself) or a package outside `RENDER_PACKAGES`, and when a built runtime import crosses a side the wrong way (render may import render and format; format only format).
+- `scripts/verify-dist.mjs` §7 reads the artifact: every file under a side, no crossing, the exports map exactly the three sides, an editor module not reachable through `render/`.
+- `scripts/test-editing-bridges.tsx`: an editor's registry draws the walker while editing and a drawing-only one never does; `SectionTextParts` draws what it is handed; every editing canvas provides the real bridge; the FAQ draws it while editing and not on a page.
+
+## 23.2.0 - 2026-10-19
+
+**The show-when helpers are the shell's** (SSOT batch 1, GG 2026-10-19). The website editor and the email designer are one editor, one rule, built once (Lewis). `efficient-shell/format` 7.75.0 holds them, and this package re-exports them under the names it had. Nothing a merchant sees moves.
+
+### Changed for hosts
+
+- `lib/puck/show-when-attach` (and `lib/puck/show-when`) re-export `withRowsShownWhen`, `withRowRules`, `RowRule`, `shownForOption`, `addShowWhenFacts` and `ShowWhenFactData` from `efficient-shell/format`, and add `truthy` (a value read as `if (value)` does). `BlockShowWhenFacts` is the shell's `ShowWhenFacts<ShowWhenFactParams>`. `ShowWhenFactParams`, what this editor hands a resolver, stays here.
+- `resolverContext` and `rowsShownForNode` build their lazy context with the shell's `lazyShowWhenContext` and `showWhenFactReaders`.
+- The efficient-shell peer and dev range rises to `^7.75.0`.
+
+### Guard
+
+- `lib/source-rules/one-show-when` R6 now covers every show-when helper of the shell's (`SHELL_HELPERS`, 11 names), not only `withShowWhen` and `showWhenOf`. A repository that writes one of them again fails. The storefront-blocks' own `truthy` (`commerce/page-rules`) goes with its bump to this release.
+- `scripts/test-show-when-rows.tsx` §10b: the five helpers are the shell's functions.
+
 ## 23.1.0 - 2026-10-19
 
 **A list item's rows read the section's settings, and a rule that hides a whole tab keeps the tab strip** (SSOT batch 1, GG 2026-10-19). Nothing a merchant sees moves: no rule uses either yet. They let the last two hand-written hides in the storefront blocks move (DetailRows' Image shape, ProductHero's dynamic-page cut).

package/README.md

@@ -40,7 +40,7 @@ and many of the words are also keys (a row is filed under its tab and given
 its glyph by its English label), so it is translated where it is SHOWN:
 
 - **The words are keyed by the English they replace.**
-  `efficient-web-builder/lib/editor-words-catalogue` exports
+  `efficient-web-builder/format/lib/editor-words-catalogue` exports
   `WEB_BUILDER_WORDS`, every phrase the editor says (a settings row's label,
   hint and choices, a group heading, a panel's and a dialog's words, a block's
   name and its Add-panel blurb, a placeholder drawn on the canvas while
@@ -92,9 +92,9 @@ Comments that name a file say `lib/puck/controls`; read them from `src/`.
 The storefront installs this repository's npm package, like any host, at one
 exact version in its `package.json` (efficient-storefront `doc/adr/0011`,
 2026-10-11). Its commerce and service blocks are written with the builder's
-control builders and passes, which they import by path: there `@/…` resolves in
-the storefront's own tree first, then in its blocks, then in
-`node_modules/efficient-web-builder/dist`.
+control builders and passes, which they import by package name and side
+(`efficient-web-builder/render/…`, `/format/…`, `/editor/…`; 24.0.0). Their
+`@/…` resolves in the storefront's own tree and in its blocks only.
 
 - **A change to the builder is made HERE and reaches the storefront as a
   release.** Merge it, cut a GitHub Release `vX.Y.Z` (which publishes to npm),
@@ -136,16 +136,32 @@ EFFICIENT's backend, for the admin portal. That assembly is now
 `efficient-storefront-blocks`.)
 
 The source is closed, so the package is compiled: `pnpm run build` writes one
-minified `.js` and one `.d.ts` to `dist/` for every file under `src/`, at the
-same relative path, with no source map and no comment. There is no bundle and
-no entry yet; a host imports the module it needs by the path it has here:
+minified `.js` and one `.d.ts` for every file under `src/`, with no source map
+and no comment. There is no bundle.
+
+**Three sides (24.0.0, [`doc/adr/0005`](doc/adr/0005-three-sides-render-format-editor.md)).**
+Every module is on one side, and ships under it at the path it has in `src/`:
+
+| Side | What it is | A host imports it as |
+|---|---|---|
+| `render` | what a published page draws from | `efficient-web-builder/render/lib/puck/page-frame` |
+| `format` | pure data and rules, no React | `efficient-web-builder/format/lib/puck/section-catalog` |
+| `editor` | the settings panel, the editor's registries and screen parts | `efficient-web-builder/editor/lib/puck/controls` |
 
 ```ts
-import { createEditorSession } from "efficient-web-builder/lib/editor-session";
-import type { WebsiteBackend } from "efficient-web-builder/lib/web-backend";
-import "efficient-web-builder/components/storefront-editor.css";
+import { PublishedPageFrame } from "efficient-web-builder/render/lib/puck/page-frame";
+import { createEditorSession } from "efficient-web-builder/render/lib/editor-session";
+import type { WebsiteBackend } from "efficient-web-builder/editor/lib/web-backend";
+import "efficient-web-builder/editor/components/storefront-editor.css";
 ```
 
+The exports map is the three sides and nothing else, so a module is only
+reachable through its own side: an editor module has no file under `render/`,
+and a page that imports through `render/` cannot reach the editor in any
+bundler. Which side a module is on is decided once, in
+`scripts/entry-sides.mjs`, and the build fails when the render side reaches
+the editor. To find a module's side, look for it under `dist/<side>/`.
+
 Inside the package `@/…` is already a relative path, so a host needs no
 mapping of its own. It installs the peer dependencies the manifest lists.
 

package/dist/editor/components/ApplyCornersToSiblings.js

@@ -0,0 +1 @@
+"use client";import{jsx as l}from"react/jsx-runtime";import{useCallback as u,useEffect as a,useRef as m,useState as f}from"react";import{useEasel as C}from"efficient-easel/easel";import{SettingsAction as d}from"efficient-easel/panel";import{say as y}from"../../format/lib/editor-words.js";import{applyCorners as A,applyCornersDoneLabel as S,applyCornersNote as b,planApplyCorners as _}from"../lib/puck/apply-card-corners.js";import{useSectionOps as x}from"../lib/puck/use-section-ops.js";const E=2200,L="apply-corners-to-siblings",P="Apply to all cards";function N({plan:e,doneCount:n,onPress:r}){return l(d,{id:L,label:y(P),note:b(e),disabled:!e.can,done:n!==null,doneLabel:S(n??0),onPress:r})}function O(){const{appState:e,config:n}=C(i=>i),r=x(),[p,s]=f(null),o=m(null);a(()=>()=>{o.current&&clearTimeout(o.current)},[]);const t=_(n,e.data.content??[],e.ui.itemSelector),c=u(()=>{A(t,r.replaceComponent),t.can&&(s(t.others),o.current&&clearTimeout(o.current),o.current=setTimeout(()=>s(null),E))},[t,r]);return l(N,{plan:t,doneCount:p,onPress:c})}export{E as APPLY_CORNERS_DONE_MS,P as APPLY_CORNERS_LABEL,N as ApplyCornersButton,O as default};

package/dist/editor/components/BlockGapField.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import{SettingsDefaultReset as r,SettingsField as c}from"efficient-easel/panel";import{AlignSeparateIcon as d}from"efficient-easel/icons";import{CONTAINER_GAP_BUILT_IN as p,SITE_BLOCK_GAP as o}from"../../format/lib/content/container-gap.js";import{say as e,editorEaselWords as m}from"../../format/lib/editor-words.js";import{Slider as f}from"../lib/puck/controls.js";const u="The space between the blocks inside a row, a grid or a box. Default means each one keeps the spacing it already has.",i="Block gap",_=p.Grid;function g({value:n,onChange:l,showHint:s=!0}){const a=n===null;return t(c,{label:e(i),labelId:"sf-block-gap",icon:t(d,{}),value:a?void 0:`${n}px`,changed:!a,action:t(r,{words:m()?.panel,label:e(i),changed:!a,detail:e("each block's own spacing"),onReset:()=>l(null)}),hint:s?e(u):void 0,children:t(f,{min:o.min,max:o.max,step:o.step,value:a?_:n,readout:!1,ariaLabel:e(i),onChange:l})})}export{g as default};

package/dist/editor/components/BlogPostSource.js

@@ -0,0 +1 @@
+"use client";import{jsx as o,Fragment as i,jsxs as B}from"react/jsx-runtime";import{useContext as P}from"react";import{SettingsField as m}from"efficient-easel/panel";import{FieldSelect as g}from"efficient-easel/fields";import{BlogPostIcon as f}from"efficient-easel/icons";import{StorefrontDocumentContext as L}from"./StorefrontDocumentContext.js";import{loadStorefrontBlogPosts as N}from"./useStorefrontBlogPosts.js";import{useSnapshotSource as F}from"./useSnapshotSource.js";import T from"./SourceStatus.js";import{say as t}from"../../format/lib/editor-words.js";function j(e){if(!e)return"";const n=new Date(e);return Number.isNaN(n.getTime())?"":n.toLocaleDateString("en-US",{year:"numeric",month:"short",day:"2-digit"})}function h(e){return{slug:e.slug,image:e.coverImage,title:e.title,dek:e.excerpt,date:j(e.publishedAt),href:e.href}}function w({value:e,onChange:n}){const r=P(L);return r&&!r.capabilities.hasBlog?e?.slug?o(C,{value:e,onChange:n}):o(i,{}):o(D,{value:e,onChange:n})}function C({value:e,onChange:n}){return o("div",{children:o(m,{label:t("Blog post source"),icon:o(f,{}),hint:o(i,{children:t("Linked to a blog post. This editor has no blog to pick another from; choose “None (manual)” to author the section yourself.")}),children:o(g,{value:e.slug,ariaLabel:t("Blog post source"),onChange:r=>r?void 0:n(null),options:[{label:t("None (manual)"),value:""},{label:e.title||e.slug,value:e.slug}]})})})}function D({value:e,onChange:n}){const{rows:r,loading:p,refreshing:a,errored:d,refresh:b}=F({load:N,resolve:(s,l)=>s.find(c=>c.slug===l.slug),snapshot:h,value:e,onChange:n}),k=s=>{if(!s){n(null);return}const l=(r??[]).find(c=>c.slug===s);l&&n(h(l))},S=e?.slug&&!(r??[]).some(s=>s.slug===e.slug),y=d?"error":a?"loading":"idle",u=t("Storefront → Blog"),x=d?t("Couldn’t reach {place}.",{place:u}):a?t("Syncing from {place}…",{place:u}):t("Linked to “{name}”",{name:e?.title||e?.slug||""});return B("div",{children:[o(m,{label:t("Blog post source"),icon:o(f,{}),hint:e?.slug?void 0:o(i,{children:t("Pick a post from {place} to auto-fill this section, or keep “None (manual)” to author it yourself below.",{place:u})}),children:o(g,{value:e?.slug??"",ariaLabel:t("Blog post source"),onChange:k,readOnly:p,options:[{label:t("None (manual)"),value:""},...S?[{label:t("{name} (unavailable)",{name:e.title||e.slug}),value:e.slug}]:[],...(r??[]).map(s=>({label:s.title,value:s.slug}))]})}),e?.slug?o(T,{status:y,statusText:x,onRefresh:b,busy:a,hint:o(i,{children:t("Auto-fills the cover image, headline, dek, date and link from this post each time you open the editor. Those fields are hidden while a post is linked; the remaining fields stay yours to set.")})}):null]})}export{w as default};

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

@@ -0,0 +1,6 @@
+import { type CardShadow } from "../../format/lib/theme.js";
+export default function CardShadowField({ value, onChange, showHint, }: {
+    value: CardShadow | null;
+    onChange: (v: CardShadow | null) => void;
+    showHint?: boolean;
+}): import("react").JSX.Element;

package/dist/editor/components/CardShadowField.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import{SettingsDefaultReset as p,SettingsField as c,SettingsSegmented as f}from"efficient-easel/panel";import{ShadowIcon as x}from"efficient-easel/icons";import{say as e,editorEaselWords as h}from"../../format/lib/editor-words.js";import{CARD_SHADOWS as u,DEFAULT_CARD_SHADOW as r}from"../../format/lib/theme.js";const a={none:"None",soft:"Soft",lifted:"Lifted"},S="Applies to cards — products, brands, journal entries and filter cells. Round things like swatches and status dots are never shadowed.",m={none:"none",soft:"0 1px 1px rgba(20, 20, 22, 0.10), 0 2px 4px -1px rgba(20, 20, 22, 0.14)",lifted:"0 1px 2px rgba(20, 20, 22, 0.10), 0 4px 7px -2px rgba(20, 20, 22, 0.30)"},b={labelsPx:90.25,widestLabelPx:34.6};function A({value:n,onChange:s,showHint:l=!0}){const d=n===null,i=n??r;return t(c,{label:e("Card shadow"),icon:t(x,{}),value:e(a[i]),changed:!d,action:t(p,{words:h()?.panel,label:e("Card shadow"),changed:!d,detail:e(a[r]),onReset:()=>s(null)}),hint:l?e(S):void 0,children:t(f,{options:u.map(o=>({id:o,label:e(a[o]),icon:t("span",{className:"sf-shadow-chip",style:{boxShadow:m[o]}})})),value:i,ariaLabel:e("Card shadow"),fit:b,onChange:s})})}export{A as default};

package/dist/editor/components/ChatSettingsPanel.js

@@ -0,0 +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};

package/dist/editor/components/ClearColoursDialog.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as i,jsxs as n}from"react/jsx-runtime";import{Button as r,Dialog as l}from"efficient-shell/ui";import{say as s,sayCount as h}from"../../format/lib/editor-words.js";function c(t){return h("This site has {n} color theme of its own. Clearing takes them away and puts back the four the shop supplies.","This site has {n} color themes of its own. Clearing takes them away and puts back the four the shop supplies.",t)}function d({count:t,onCancel:o,onConfirm:a}){return n(l,{open:!0,onClose:o,role:"alertdialog",size:"sm",title:s("Clear this site’s colors?"),footer:n(i,{children:[e(r,{variant:"secondary",onClick:o,children:s("Cancel")}),e(r,{variant:"danger",onClick:a,children:s("Clear colors")})]}),children:[e("p",{children:c(t)}),e("p",{className:"mt-2 font-medium",children:s("This cannot be undone.")})]})}export{d as ClearColoursDialog};

package/dist/editor/components/CornersField.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import{SettingsDefaultReset as l,SettingsField as d}from"efficient-easel/panel";import{SquareIcon as u}from"efficient-easel/icons";import{CORNER_RADIUS_MAX as c,CORNER_RADIUS_MIN as i}from"../../format/lib/theme.js";import{say as e,editorEaselWords as p}from"../../format/lib/editor-words.js";import{Slider as m}from"../lib/puck/controls.js";const R="Applies to panels, cards, inputs and buttons. Round things — color swatches, switches, status dots — stay round.",s="Corners";function f({value:n,onChange:r,showHint:a=!0}){const o=n===null;return t(d,{label:e(s),icon:t(u,{}),value:o?void 0:`${n}px`,changed:!o,action:t(l,{words:p()?.panel,label:e(s),changed:!o,detail:e("the built-in corners"),onReset:()=>r(null)}),hint:a?e(R):void 0,children:t(m,{min:i,max:c,step:1,value:n??i,readout:!1,ariaLabel:e(s),onChange:r})})}export{s as CORNERS_LABEL,f as default};

package/dist/editor/components/DuplicateToPageMenu.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as g,Fragment as A}from"react/jsx-runtime";import{useCallback as L,useRef as z,useState as s}from"react";import{InspectorIconButton as W}from"efficient-easel/chrome";import{PopupMenu as H,PopupMenuItem as Y,PopupMenuLabel as a}from"efficient-shell/ui";import{CopyToPageIcon as $}from"efficient-easel/icons";import{backendOf as M}from"../lib/website-session.js";import{useEditorSession as q}from"../lib/editor-session-context.js";import{say as n}from"../../format/lib/editor-words.js";import{cloneNodeWithFreshIds as G}from"../lib/puck/section-doc.js";import{FOOTER_TYPE as J}from"efficient-easel/draw";function K({node:N,currentSlug:T,siteId:i,tokenRef:h,runAuthed:D,onNotify:I}){const[c,r]=s(!1),[y,x]=s(null),o=q(),[j,u]=s(!1),[d,b]=s(null),P=z(null),[p,B]=s(null),F=L(async()=>{if(o.usesBridgedToken&&!h.current){u(!0);return}try{x(await M(o).pages.list(i?{siteId:i}:void 0))}catch{u(!0)}},[h,i,o]),O=()=>{if(c){r(!1);return}const e=P.current?.getBoundingClientRect();e&&B({top:e.bottom+6,right:Math.max(8,window.innerWidth-e.right)}),x(null),u(!1),F(),r(!0)},k=(y??[]).filter(e=>e.slug!==T),R=async e=>{if(d)return;b(e.slug);const w=G(N),S=o.documentHooks?.storedNode?.(w)??w,C=M(o).pages,v=await D(async()=>{const m=await C.load({id:e.id});if(!m)throw new Error(`Page "${e.slug}" no longer exists.`);const f=m.layout??{},l=Array.isArray(f.content)?[...f.content]:[],E=l.findIndex(_=>_?.type===J);l.splice(E===-1?l.length:E,0,S),await C.save(e.id,{layout:{root:{},zones:{},...f,content:l}},{version:m.version,clientId:""})});b(null),r(!1),I?.(v?n("Duplicated to “{name}”",{name:e.label}):n("Couldn’t duplicate the section — please retry"),v?"success":"error")};return g(A,{children:[t("span",{"data-menu-toggle":!0,style:{display:"contents"},children:t(W,{buttonRef:P,label:n("Duplicate to another page"),hasPopup:"menu",expanded:c,onClick:O,children:t($,{size:15})})}),c&&p&&t(H,{portal:!0,style:{top:p.top,right:p.right},onClose:()=>r(!1),children:g("div",{role:"menu","aria-label":n("Duplicate to page"),children:[t(a,{children:n("Duplicate to page")}),j?t(a,{children:n("Couldn’t load pages")}):y===null?t(a,{children:n("Loading…")}):k.length===0?t(a,{children:n("No other pages")}):k.map(e=>g(Y,{role:"menuitem",disabled:d!==null,onClick:()=>{R(e)},children:[t("span",{className:"min-w-0 flex-1 truncate",children:e.label}),d===e.slug?t("span",{className:"shrink-0 text-xs",children:n("Copying…")}):e.draft&&t("span",{className:"shrink-0 text-xs",children:n("draft")})]},e.id))]})})]})}export{K as default};

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

@@ -0,0 +1,12 @@
+import type { CSSProperties } from "react";
+import { type FieldNoun } from "../../format/lib/puck/field-noun.js";
+export declare function FieldGlyph({ noun, size, strokeWidth, className, style, }: {
+    noun: FieldNoun;
+    size?: number;
+    strokeWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+export declare const SHELL_BACKED: readonly FieldNoun[];
+export declare const SHELL_VERDICT: Record<string, string>;
+export declare const OWN_DRAWN: readonly FieldNoun[];

package/dist/editor/components/HeroImageField.js

@@ -0,0 +1 @@
+"use client";import{jsx as l}from"react/jsx-runtime";import{SettingsDefaultReset as h,SettingsField as g,SettingsSegmented as p}from"efficient-easel/panel";import{say as e,editorEaselWords as c}from"../../format/lib/editor-words.js";import{WIDTH_CHOICE_LABEL as d}from"../../format/lib/content/section-width.js";import{ImageIcon as m}from"efficient-easel/icons";const o="Hero image",i=[{followsWidth:!1,label:d.full},{followsWidth:!0,label:d.page}],u="Whether the big picture at the top of a page runs edge to edge, or sits inside the page width. The words follow the page width either way.";function w({value:a,onChange:n,showHint:f=!0}){const s=a===null,r=a??!1;return l(g,{label:e(o),icon:l(m,{}),value:e(i.find(t=>t.followsWidth===r).label),changed:!s,action:l(h,{words:c()?.panel,label:e(o),changed:!s,detail:e(i.find(t=>!t.followsWidth).label),onReset:()=>n(null)}),hint:f?e(u):void 0,children:l(p,{options:i.map(t=>({id:t.followsWidth,label:e(t.label)})),value:r,ariaLabel:e(o),onChange:n})})}export{o as HERO_IMAGE_LABEL,w as default};

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

@@ -0,0 +1,7 @@
+import { type HeroMediaPart } from "../../render/lib/puck/hero-media-parts.js";
+export default function HeroPartPanel({ nodeId, part, sectionName, onUpToSection, }: {
+    nodeId: string;
+    part: HeroMediaPart;
+    sectionName: string;
+    onUpToSection: () => void;
+}): import("react").JSX.Element;

package/dist/editor/components/HeroPartPanel.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{InspectorUpLevel as t}from"efficient-easel/chrome";import{usePreviewHeroPart as l}from"../../render/components/PreviewHeroPartContext.js";import{SiteFields as p}from"./SiteFields.js";import{say as o}from"../../format/lib/editor-words.js";import{HERO_MEDIA_PART_LABELS as c,heroPartId as d}from"../../render/lib/puck/hero-media-parts.js";function f({nodeId:i,part:r,sectionName:m,onUpToSection:n}){const{select:s}=l();return a("div",{children:[r!=="media"?e(t,{inline:!0,name:o(c.media),onSelect:()=>s(d(i,"media"))}):e(t,{inline:!0,name:o(m),onSelect:n}),e(p,{part:r})]})}export{f as default};

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

@@ -0,0 +1,6 @@
+import { type HoverEffect } from "../../format/lib/theme.js";
+export default function HoverEffectField({ value, onChange, showHint, }: {
+    value: HoverEffect | null;
+    onChange: (v: HoverEffect | null) => void;
+    showHint?: boolean;
+}): import("react").JSX.Element;

package/dist/editor/components/HoverEffectField.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import{SettingsDefaultReset as c,SettingsField as d,SettingsSegmented as h}from"efficient-easel/panel";import{HoverIcon as p}from"efficient-easel/icons";import{say as e,editorEaselWords as u}from"../../format/lib/editor-words.js";import{HOVER_EFFECTS as E,DEFAULT_HOVER_EFFECT as s}from"../../format/lib/theme.js";const o={none:"None",lift:"Lift",highlight:"Highlight"},g="What a card does when a shopper points at it — or taps it, on a phone. Highlight is the effect your cards already use.";function m({value:i,onChange:n,showHint:f=!0}){const r=i===null,a=i??s;return t(d,{label:e("Hover effect"),icon:t(p,{}),value:e(o[a]),changed:!r,action:t(c,{words:u()?.panel,label:e("Hover effect"),changed:!r,detail:e(o[s]),onReset:()=>n(null)}),hint:f?e(g):void 0,children:t(h,{options:E.map(l=>({id:l,label:e(o[l])})),value:a,ariaLabel:e("Hover effect"),onChange:n})})}export{m as default};

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

@@ -0,0 +1,5 @@
+import { type ContactLocationCard } from "../../format/lib/content/contact.js";
+export default function LocationsGroupedField({ value, onChange, }: {
+    value: ContactLocationCard[] | undefined;
+    onChange: (v: ContactLocationCard[]) => void;
+}): import("react").JSX.Element;

package/dist/editor/components/LocationsGroupedField.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as O,jsxs as f}from"react/jsx-runtime";import{useId as $,useState as V}from"react";import{InspectorUpLevel as I}from"efficient-easel/chrome";import{useEasel as Y}from"efficient-easel/easel";import{ListField as E}from"efficient-easel/fields";import{SettingsField as F}from"efficient-easel/panel";import{ClockIcon as G,ContrastIcon as Z,GlobeIcon as J,LinkIcon as Q,LocationIcon as X,PhoneIcon as K,SquareIcon as ee,TypeIcon as A}from"efficient-easel/icons";import ne from"./MediaUploadField.js";import{useLocationsHasTree as te}from"./LocationsTreeContext.js";import{say as n,sayCount as H}from"../../format/lib/editor-words.js";import{CoordsField as oe}from"../lib/puck/controls.js";import{useLocationsFocus as ie,setLocationsFocus as v}from"../lib/puck/locations-focus.js";import{groupKeyOf as k,groupLabelOf as re,NEW_CITY as W,writeGroupCities as le,writeGroupOrder as ae}from"../../format/lib/puck/locations-tree.js";import{useSectionOps as se}from"../lib/puck/use-section-ops.js";import{ROOT_ZONE as ce}from"efficient-easel/draw";import{CONTACT_LOCATIONS_DEFAULTS as _,parseLocationTileShape as de}from"../../format/lib/content/contact.js";const D=(a,t)=>t||a?re(a,t):n("Ungrouped");function pe(a){const t=[];return a.forEach((c,r)=>{const m=k(c);let s=t.find(i=>i.key===m);s||(s={key:m,name:String(c?.groupName??""),indices:[]},t.push(s)),s.indices.push(r)}),t}function z({children:a}){return e("div",{style:{fontSize:11,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--fg-dim, #999)",margin:"14px 0 6px"},children:a})}const R={width:"100%",height:32,textAlign:"left",display:"flex",alignItems:"center",justifyContent:"space-between",gap:8,padding:"0 12px",fontSize:12,border:"1px solid var(--border-strong, #d0d0d0)",borderRadius:6,background:"transparent",color:"inherit",cursor:"inherit"},ue={padding:0,border:"none",background:"none",font:"inherit",fontSize:12,color:"var(--sf-accent, #2563eb)",cursor:"pointer"},B={...ue,color:"#d85a30"};function b({label:a,value:t,placeholder:c,textarea:r,icon:m,onChange:s,onBlur:i,onKeyDown:h}){const x=$();return e(F,{label:a,icon:m??e(A,{}),htmlFor:x,children:r?e("textarea",{id:x,value:t,placeholder:c,onChange:g=>s(g.target.value)}):e("input",{id:x,type:"text",value:t,placeholder:c,onChange:g=>s(g.target.value),onBlur:i,onKeyDown:h})})}const me=[{label:"Auto",value:"auto"},{label:"Dark",value:"dark"},{label:"Light",value:"light"}],he=[{label:"Tall (3:4)",value:"tall"},{label:"Square",value:"square"},{label:"Wide (2:1)",value:"wide"}];function M({label:a,icon:t,options:c,value:r,onChange:m}){return e(F,{label:a,icon:t,children:e("div",{role:"group","aria-label":a,style:{display:"flex",gap:4,flex:1},children:c.map(s=>{const i=r===s.value;return e("button",{type:"button","aria-pressed":i,onClick:()=>m(s.value),style:{flex:1,padding:"6px 8px",fontSize:12,borderRadius:6,cursor:"pointer",border:`1px solid ${i?"var(--sf-accent, #2563eb)":"var(--border-strong, #d0d0d0)"}`,background:i?"var(--sf-accent, #2563eb)":"transparent",color:i?"#fff":"inherit",fontWeight:i?500:400},children:n(s.label)},s.value)})})})}function P({props:a,setSection:t,headOnly:c}){const r=i=>String(a[i]??""),m=a.mapTheme||_.mapTheme,s=_;return f(O,{children:[!c&&e(z,{children:n("Section")}),e(b,{label:n("Section number"),value:r("sectionNumber"),placeholder:s.sectionNumber,onChange:i=>t({sectionNumber:i})}),e(b,{label:n("Heading"),textarea:!0,value:r("heading"),placeholder:s.heading,onChange:i=>t({heading:i})}),e(b,{label:n("Body"),textarea:!0,value:r("tagline"),placeholder:s.tagline,onChange:i=>t({tagline:i})}),c?null:f(O,{children:[e(z,{children:n("City strip")}),e(b,{label:n("Eyebrow"),value:r("galleryKicker"),placeholder:s.galleryKicker,onChange:i=>t({galleryKicker:i})}),e(b,{label:n("Hint"),value:r("galleryHint"),placeholder:s.galleryHint,onChange:i=>t({galleryHint:i})}),e(M,{label:n("Shape"),icon:e(ee,{}),options:he,value:de(a.imageShape),onChange:i=>t({imageShape:i})}),e(z,{children:n("Map & Theme")}),e(M,{label:n("Map theme"),icon:e(Z,{}),options:me,value:m,onChange:i=>t({mapTheme:i})})]})]})}function ge({cards:a,groupKey:t,onChange:c,onBack:r,onOpenCity:m,onNavigate:s}){const i=a.map((l,u)=>k(l)===t?u:-1).filter(l=>l>=0),h=String(a[i[0]]?.groupName??""),x=new Set(a.map(k).filter(l=>l!==t)),[g,w]=V(t),C=l=>c(a.map(u=>k(u)===t?{...u,...l}:u)),L=()=>{const l=g;if(l!==t){if(x.has(l)){w(t);return}c(a.map(u=>k(u)===t?{...u,group:l}:u)),s(l)}};return f("div",{className:"sf-locations-view",children:[e(I,{inline:!0,name:n("Section"),onSelect:r}),e("div",{style:{fontSize:14,fontWeight:500,margin:"6px 0 10px"},children:D(t,h)}),e(b,{label:n("Group heading"),value:g,placeholder:n("e.g. Americas"),onChange:w,onBlur:L,onKeyDown:l=>{l.key==="Enter"&&l.currentTarget.blur()}}),x.has(g)&&g!==t&&e("p",{className:"sf-note sf-note--error",role:"alert",children:n("Another group already uses this heading — pick a different one.")}),e(b,{label:n("Group name"),value:h,placeholder:n("Shown beside the heading"),onChange:l=>C({groupName:l})}),e(E,{label:n("Cities in this group"),noun:n("city"),items:i.map(l=>a[l]),onChange:l=>c(le(a,t,l)),newItem:()=>({...W,group:t,groupName:h}),open:null,onOpen:()=>{},renderItem:()=>null,removeOnRow:!1,canDuplicate:()=>!1,renderRow:(l,u)=>f("button",{type:"button",style:R,onClick:()=>m(i[u]),children:[e("span",{children:l?.name||n("City")}),e("span",{"aria-hidden":"true",children:"›"})]})}),e("div",{style:{marginTop:12},children:e("button",{type:"button",style:B,onClick:()=>{c(a.filter(l=>k(l)!==t)),r()},children:H("Delete group ({n} city)","Delete group ({n} cities)",i.length)})})]})}function fe({value:a,onChange:t}){const c=Array.isArray(a)?a:[],r=ie(),m=te(),s=pe(c),{appState:i,selectedItem:h}=Y(o=>o),x=se(),g=h?.props??{},w=o=>{if(!h)return;const p=(i.data.content??[]).findIndex(y=>y.props.id===h.props.id);p<0||x.replaceComponent(ce,p,{type:h.type,props:{...h.props,...o}})},C=(o,d)=>t(c.map((p,y)=>y===o?{...p,...d}:p)),L=()=>{const o=new Set(s.map(y=>y.key));let d=s.length+1,p=`Group ${d}`;for(;o.has(p);)p=`Group ${++d}`;return p};if(r.level==="texts")return f("div",{className:"sf-locations-view",children:[e(I,{inline:!0,name:n("Locations"),onSelect:()=>v({level:"groups"})}),e("div",{style:{fontSize:14,fontWeight:500,margin:"6px 0 10px"},children:n("Texts")}),e(P,{props:g,setSection:w,headOnly:!0})]});if(r.level==="image"){const o=c[r.index];return o?f("div",{className:"sf-locations-view",children:[e(I,{inline:!0,name:String(o.name??"")||n("City"),onSelect:()=>v({level:"city",index:r.index})}),e("div",{style:{fontSize:14,fontWeight:500,margin:"6px 0 10px"},children:n("Image")}),e(ne,{value:o.photo||"",onChange:d=>C(r.index,{photo:d}),label:"Image",accept:"image/*"})]}):l()}if(r.level==="map"){const o=c[r.index];return o?f("div",{className:"sf-locations-view",children:[e(I,{inline:!0,name:String(o.name??"")||n("City"),onSelect:()=>v({level:"city",index:r.index})}),e("div",{style:{fontSize:14,fontWeight:500,margin:"6px 0 10px"},children:n("Map")}),e(oe,{value:o.geocode,onChange:d=>C(r.index,{geocode:d}),label:"Coordinates"}),e(b,{label:n("Directions link"),icon:e(Q,{}),value:String(o.mapsUrl??""),onChange:d=>C(r.index,{mapsUrl:d})})]}):l()}if(r.level==="city"){const o=r.index,d=c[o];if(!d)return l();const p=k(d),y=(T,N)=>C(o,{[T]:N}),S=(T,N,U,j=!1)=>e(b,{label:N,icon:U,textarea:j,value:String(d[T]??""),onChange:q=>y(T,q)});return f("div",{className:"sf-locations-view",children:[e(I,{inline:!0,name:D(p,String(d.groupName??"")),onSelect:()=>v({level:"group",key:p})}),e("div",{style:{fontSize:14,fontWeight:500,margin:"6px 0 10px"},children:d.name||n("City")}),S("name",n("Location name"),e(A,{})),S("state",n("State / Province"),e(A,{})),S("country",n("Country"),e(J,{})),S("address",n("Address"),e(X,{}),!0),S("phone",n("Phone"),e(K,{})),S("hours",n("Opening hours"),e(G,{})),S("timezone",n("Timezone chip"),e(G,{})),e("div",{style:{marginTop:12},children:e("button",{type:"button",style:B,onClick:()=>{t(c.filter((T,N)=>N!==o)),v({level:"group",key:p})},children:n("Delete city")})})]})}if(r.level==="group")return s.some(o=>o.key===r.key)?e(ge,{cards:c,groupKey:r.key,onChange:t,onBack:()=>v({level:"groups"}),onOpenCity:o=>v({level:"city",index:o}),onNavigate:o=>v({level:"group",key:o})},r.key):l();function l(){return f("div",{className:"sf-locations-view",children:[e(P,{props:g,setSection:w}),!m&&e(O,{children:u()})]})}function u(){return e(E,{label:n("Locations"),noun:n("group"),items:s,onChange:o=>{const d=o.find(p=>!s.some(y=>y.key===p.key));t(ae(c,o.map(p=>p.key),p=>[{...W,group:p,groupName:""}])),d&&v({level:"group",key:d.key})},newItem:()=>({key:L(),name:"",indices:[]}),open:null,onOpen:()=>{},renderItem:()=>null,removeOnRow:!1,canDuplicate:()=>!1,above:s.length===0?e("div",{style:{fontSize:12,color:"var(--fg-dim, #999)",padding:"4px 0"},children:n("No locations yet.")}):void 0,renderRow:o=>f("button",{type:"button",style:R,onClick:()=>v({level:"group",key:o.key}),children:[e("span",{style:{fontWeight:500},children:D(o.key,o.name)}),f("span",{style:{color:"var(--fg-dim, #999)"},children:[H("{n} city","{n} cities",o.indices.length)," ›"]})]})})}return l()}export{fe as default};

package/dist/editor/components/MediaUploadField.js

@@ -0,0 +1 @@
+"use client";import{jsx as o}from"react/jsx-runtime";import{SettingsDefaultReset as x,SettingsField as h}from"efficient-easel/panel";import{useSelectedFields as y}from"efficient-easel/easel";import{FOCAL_DEFAULT as C}from"efficient-shell/format";import{ImageIcon as v,PlayIcon as w}from"efficient-easel/icons";import{ImageBox as F}from"efficient-easel/pick";import{useEaselStrings as I}from"efficient-easel/strings";import{useContext as L}from"react";import{StorefrontDocumentContext as B}from"./StorefrontDocumentContext.js";import{editorEaselWords as D,say as a}from"../../format/lib/editor-words.js";import{PHONE_CLEAR as P,phoneKey as A}from"../../format/lib/puck/phone-override.js";import{usePreviewDevice as O}from"efficient-easel/draw/client";import{requestMediaPick as R}from"../lib/editor-media-picker.js";import{useEditorHost as T}from"../lib/editor-host.js";import{backendOf as U}from"../lib/website-session.js";import{useEditorSession as _}from"../lib/editor-session-context.js";function j(t,d){let e=null;try{e=y()}catch{e=null}const n=O()==="mobile";if(!t||!e||d&&!d(e.values??{}))return null;const r=typeof e.values?.[t]=="string"&&e.values[t]?String(e.values[t]):C,i=A(t),m=typeof e.values?.[i]=="string"&&e.values[i]?String(e.values[i]):void 0,c=e.onChange;return{phone:n,desktop:r,own:m,focus:n?m??r:r,set:p=>c(n?i:t,p),clear:()=>c(i,P)}}function H({value:t,onChange:d,label:e,accept:n,placeholder:r,focusKey:i,focusWhen:m}){const c=T(),p=_(),b=I(),u=a(e),l=n.startsWith("video"),s=j(l?void 0:i,m),f=L(B),E=g=>R(c,{accept:n,title:u,...g?{file:g}:{}}).then(S=>S?.url??null);if(f&&!f.capabilities.mediaEditing)return o(h,{label:u,icon:l?o(w,{}):o(v,{}),children:o("div",{className:"sf-image-slot-inert",children:l?a("Templates don’t store videos — this slot stays a placeholder. Each website picks its own after it’s created."):a("Templates don’t store images — this slot stays a placeholder. Each website picks its own after it’s created.")})});const k=s?.phone&&t?o(x,{words:D()?.panel,label:a("Image focus"),changed:!!s.own,detail:a("{value} on desktop",{value:s.desktop}),onReset:s.clear}):void 0;return o(h,{label:u,icon:l?o(w,{}):o(v,{}),action:k,children:o(F,{value:t,onChange:d,label:u,kind:l?"video":"image",placeholder:r===void 0?void 0:a(r),openLibrary:E,maxSizeBytes:U(p).media.maxUploadBytes,...s?{focus:s.focus,onFocusChange:s.set}:{},words:b.pick.image})})}export{H as default};

package/dist/editor/components/MultiSelectField.js

@@ -0,0 +1 @@
+"use client";import{jsx as u}from"react/jsx-runtime";import{useId as p}from"react";import{FieldSelect as f}from"efficient-easel/fields";import{SettingsField as b}from"efficient-easel/panel";import{say as l}from"../../format/lib/editor-words.js";function h(i){return i.map(({value:o,label:e,note:t})=>({value:o,label:e,...t?{meta:t}:{}}))}function x({label:i,options:o,value:e,onChange:t,emptyLabel:n,icon:c,hint:s}){const r=p(),d=`${r}-label`,a=`${r}-button`,m=Array.isArray(e)?e:[];return u(b,{label:l(i),labelId:d,icon:c,hint:s,children:u(f,{id:a,multiple:!0,value:m,options:h(o),onChange:t,placeholder:n===void 0?l("None"):l(n),ariaLabelledBy:`${d} ${a}`,inline:!0})})}export{x as default,h as multiSelectOptions};

package/dist/editor/components/PagesPanel.js

@@ -0,0 +1 @@
+"use client";import{jsx as n,Fragment as K,jsxs as C}from"react/jsx-runtime";import{Fragment as ge,useEffect as fe,useId as he,useMemo as Y,useState as u}from"react";import{useStorefrontDocument as be}from"./StorefrontDocumentContext.js";import{UiIcon as I}from"efficient-easel/draw/client";import ye from"./SidePanelHead.js";import{useWebsiteName as we}from"./WebsiteSettingsPanel.js";import{InspectorIconButton as Pe}from"efficient-easel/chrome";import{Button as J,Dialog as ke,FormField as Se,Input as Q,toast as V}from"efficient-shell/ui";import{LayersTree as Ce,TreeGroupLabel as Ie,TreeRow as X,TreeRowAction as F}from"efficient-easel/tree";import{AddIcon as Ae,PageIcon as Re}from"efficient-easel/icons";import{PagesIcon as Ne}from"efficient-easel/rail";import{useEditorHost as xe}from"../lib/editor-host.js";import{bucketEditorPageRows as ve,DYNAMIC_PAGES_GROUP_KEY as Ee,isDynamicPageRow as Le,MAIN_PAGES_GROUP as De}from"../../format/lib/editor-page-rows.js";import{useEditorSession as Fe}from"../lib/editor-session-context.js";import{holdPageRow as O,usePageRows as Oe}from"../lib/page-rows.js";import{say as t}from"../../format/lib/editor-words.js";const Z="sf-editor-pages-collapsed-groups",_e=r=>r.toLowerCase().trim().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,""),ee=(r,b)=>{const d=_e(r)||"page";if(!b.has(d))return d;let m=2;for(;b.has(`${d}-${m}`);)m+=1;return`${d}-${m}`};function ze({onNavigate:r,onClose:b,activeSurface:d,onPreviewSurface:m}){const y=Fe().chrome?.pageRows,_=xe(),{adapter:A,capabilities:p,ready:z,currentSlug:G}=be(),te=we(),{rows:c,reload:ne,setRows:B,getRows:oe}=Oe(),[R,ae]=u(""),[g,M]=u(!1),[w,P]=u(null),[T,k]=u(!1),[f,N]=u(""),U=he(),[x,se]=u(()=>{if(typeof window>"u")return new Set;try{const e=window.localStorage.getItem(Z);return new Set(e?JSON.parse(e):[])}catch{return new Set}});fe(()=>{try{window.localStorage.setItem(Z,JSON.stringify([...x]))}catch{}},[x]);const le=e=>se(a=>{const o=new Set(a);return o.has(e)?o.delete(e):o.add(e),o}),re=Y(()=>ve(c??[]),[c]),v=R.trim().toLowerCase(),W=e=>!v||e.toLowerCase().includes(v),ie=e=>v?!0:!x.has(e),$=Y(()=>new Set((c??[]).map(e=>e.slug)),[c]),de=()=>{if(p.pageCreationInAdminForm){_.send("storefront-editor:new-page");return}N(""),P(null),k(!0)},j=async()=>{const e=f.trim();if(!(!e||!z||g||!A.createPage)){M(!0),P(null);try{const a=await A.createPage({slug:ee(e,$),title:e,layout:{}});await ne(),k(!1),N(""),r(a.slug)}catch{P(t("Couldn’t add the page — please retry."))}finally{M(!1)}}},ce=e=>{const a=c??[],o=A.deletePage;if(!z||g||!o||a.length<=1)return;const l=a.findIndex(s=>s.id===e.id),i=a.filter(s=>s.id!==e.id),h=e.slug===G;O(e.id,!0),B(i),P(null),h&&i[0]&&r(i[0].slug);const S=()=>{O(e.id,!1);const s=oe()??[];if(s.some(pe=>pe.id===e.id))return;const D=[...s];D.splice(Math.max(0,Math.min(l,D.length)),0,e),B(D)};V.undoable(t("Deleted “{name}”",{name:e.label}),{actionLabel:t("Undo"),commit:async s=>{await o(e.id,s),O(e.id,!1)},undo:()=>{S(),h&&r(e.slug)},onFail:()=>{S(),V.error(t("Couldn’t delete the page — please retry."))}})},ue=e=>_.send("storefront-editor:open-page",{slug:e}),me=e=>{if(!W(e.label))return null;const a=!d&&e.slug===G,o=p.canDeletePagesInline&&(c??[]).length>1,l=Le(e),i=e.kind==="lightbox",h=[...l?[{label:t("Dynamic"),tone:"info"}]:[],...i?[{label:t("Lightbox"),tone:"success"}]:[],...e.draft?[{label:t("draft"),tone:"draft"}]:[]],S=h.length>0?h:void 0,s=p.pageCreationInAdminForm||o?C(K,{children:[p.pageCreationInAdminForm&&n(F,{kind:"plain",label:t("Edit “{name}” in {place}",{name:e.label,place:t("the admin")}),onClick:()=>ue(e.slug),children:n(I,{name:"pencil",size:13,strokeWidth:1.7,rounded:!0})}),o&&n(F,{kind:"delete",label:t("Delete “{name}”",{name:e.label}),disabled:g,onClick:()=>ce(e),children:n(I,{name:"trash",size:13,strokeWidth:1.7,rounded:!0})})]}):void 0;return n(X,{icon:n(Re,{size:14}),name:e.label,selected:a,onSelect:()=>r(e.slug),badge:S,actions:s,rowProps:{"data-page-slug":e.slug}},e.id)},E=(e,a,o)=>{const l=o.filter(Boolean);if(l.length===0)return null;const i=ie(e);return C(ge,{children:[n(Ie,{count:l.length,expanded:i,onToggle:()=>le(e),children:a}),i&&l]},e)},H=(y?.rows??[]).filter(e=>W(e.label)).map(e=>{const a=d===e.key;return n(X,{icon:e.icon,name:e.label,selected:a,onSelect:()=>m(e.key),badge:{label:t("Preview"),tone:"warning"},actions:n(F,{kind:"plain",label:t("Open the {name} in a new tab",{name:e.label}),onClick:()=>window.open(e.href,"_blank","noopener,noreferrer"),children:n(I,{name:"external-link",size:13,strokeWidth:1.7,rounded:!0})}),rowProps:{"data-shop-surface":e.key}},e.key)}),q=p.hasSiteSettings&&!!y,L=(()=>{if(c===null)return null;const e=[];let a=!1;for(const o of re){q&&!a&&o.key.startsWith("system:")&&(e.push(E("shop",y.title,H)),a=!0);const l=o.key===Ee||o.label===De?t(o.label):o.label;e.push(E(o.key,l,o.rows.map(me)))}return q&&!a&&e.push(E("shop",y.title,H)),e})();return C("div",{className:"sf-pages",children:[n(ye,{icon:n(Ne,{}),title:t("Pages"),context:te,actions:n(Pe,{label:t("New page"),onClick:de,children:n(Ae,{size:15})}),onHide:b}),n("div",{className:"sf-pages-find",children:n(Q,{type:"search",leftIcon:n(I,{name:"search",size:14,rounded:!0}),placeholder:t("Search all pages…"),value:R,onChange:e=>ae(e.target.value),"aria-label":t("Search all pages")})}),w&&!T&&n("div",{className:"sf-note sf-note--error",role:"alert",children:w}),L===null?n("div",{className:"sf-note",children:t("Loading…")}):L.some(Boolean)?n(Ce,{ariaLabel:t("Pages"),className:"sf-scroll",children:L}):n("div",{className:"sf-note",children:R.trim()?t("No pages match your search"):t("No pages yet. Add one with + above.")}),n(ke,{open:T,onClose:()=>k(!1),size:"sm",title:t("Add a page"),description:t("Give the new template page a name. It starts blank — add sections once it opens."),footer:C(K,{children:[n(J,{variant:"secondary",onClick:()=>k(!1),children:t("Cancel")}),n(J,{onClick:()=>{j()},disabled:g||!f.trim(),loading:g,children:t("Add page")})]}),children:n(Se,{label:t("Page name"),htmlFor:U,hint:f.trim()?t("URL: /{slug}",{slug:ee(f,$)}):void 0,error:w??void 0,children:n(Q,{id:U,value:f,invalid:!!w,onChange:e=>N(e.target.value),onKeyDown:e=>{e.key==="Enter"&&j()},placeholder:t("e.g. About")})})})]})}export{ze as default};

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

@@ -0,0 +1,7 @@
+import type { PartCase, PartWeight } from "../../render/lib/puck/part-styles.js";
+export declare function WeightGlyph({ weight }: {
+    weight?: PartWeight;
+}): import("react").JSX.Element;
+export declare function CaseGlyph({ letterCase }: {
+    letterCase?: PartCase;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+import type { PartInk } from "../../format/lib/puck/part-inks.js";
+export declare function PartInkControl({ value, label, colors, onChange, }: {
+    value: string | null;
+    label: string;
+    colors: readonly PartInk[];
+    onChange: (next: string | null) => void;
+}): import("react").JSX.Element;

package/dist/editor/components/PartInkControl.js

@@ -0,0 +1 @@
+"use client";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{ColorSwatch as c,Tooltip as f}from"efficient-shell/ui";import{say as s}from"../../format/lib/editor-words.js";import{AnyColourSwatch as k}from"../lib/puck/ColourControl.js";function v({value:t,label:i,colors:p,onChange:d}){const m=t===null,a=t||void 0,l=p.find(e=>e.key===a),o=l?l.value:a&&/^#[0-9a-f]{6}$/i.test(a)?a:void 0;return r("div",{className:"sf-part-ink",children:[r("div",{className:"sf-part-ink-top",children:[n("span",{className:"sf-part-ink-label",children:s(i)}),n("span",{className:"sf-part-ink-read",children:o?o.toUpperCase():m?s("Mixed"):s("Follows the style")})]}),r("div",{className:"sf-part-ink-swatches",role:"group","aria-label":s(i),children:[p.map(e=>n(f,{content:`${s(e.name)} · ${e.value.toUpperCase()}`,children:n(c,{color:e.value,"aria-label":s(e.name),size:"sm",selected:a===e.key,onClick:()=>d(a===e.key?null:e.key)})},e.key)),k({value:l?"":(o??"").toLowerCase(),label:"Any color",onChange:d})]})]})}export{v as PartInkControl};

package/dist/editor/components/PartResetDot.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as o}from"react/jsx-runtime";import{Tooltip as c}from"efficient-shell/ui";import{say as e}from"../../format/lib/editor-words.js";function f({label:t,onClear:n,what:r="override"}){const l=e(t),i=r==="override"?e("Clear override"):r==="change"?e("Clear change"):e("Clear {what}",{what:r}),s=r==="override"?e("Clear override: {label}",{label:l}):r==="change"?e("Clear change: {label}",{label:l}):e("Clear {what}: {label}",{what:r,label:l});return a(c,{content:i,children:a("button",{type:"button",className:"sf-part-mark","aria-label":s,onClick:n,children:a(d,{})})})}function d(){return o("svg",{width:"12",height:"12",viewBox:"0 0 16 16","aria-hidden":"true",children:[a("circle",{className:"sf-part-mark-dot",cx:"8",cy:"8",r:"3",fill:"currentColor"}),o("g",{className:"sf-part-mark-arrow",fill:"none",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round",children:[a("path",{d:"M13 8a5 5 0 1 1-1.6-3.7"}),a("path",{d:"M13 2.5V5h-2.6"})]})]})}export{f as PartResetDot};

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

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+import { PartResetDot } from "./PartResetDot.js";
+import { type FontRole, type FontsValue } from "../../format/lib/fonts.js";
+import { type TypeGroup } from "../../format/lib/theme.js";
+import { type PartStyle, type PartStyleBase } from "../../render/lib/puck/part-styles.js";
+import { type PartSource } from "../../format/lib/puck/source-bound-parts.js";
+export type PartFace = {
+    kind: "role";
+    role: FontRole;
+} | {
+    kind: "custom";
+} | {
+    kind: "unread";
+};
+export type PanelPart = {
+    partKey: string;
+    face: PartFace;
+    sizeGroup: TypeGroup | null;
+    base: PartStyleBase;
+    style: PartStyle;
+};
+export declare function partFace(props: Record<string, unknown>, propKey: string, reading: {
+    faceRole: FontRole;
+    base: PartStyleBase;
+} | null, fonts: FontsValue): PartFace;
+export declare function PartStyleSelect({ face, base, onPick, }: {
+    face: PartFace;
+    base: PartStyleBase | null;
+    onPick: (role: FontRole | null) => void;
+}): import("react").JSX.Element;
+export { PartResetDot };
+export declare function PartPanelBody({ sectionName, onBack, textEditor, styleRow, children, }: {
+    sectionName: string;
+    onBack: () => void;
+    textEditor?: ReactNode;
+    styleRow?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function PartSourceNote({ source, slug, menuId }: {
+    source: PartSource;
+    slug?: string;
+    menuId?: string;
+}): import("react").JSX.Element;
+export default function PartSettingsPanel({ nodeId, propKey, onBack, onEditStyle, }: {
+    nodeId: string;
+    propKey: string;
+    onBack: () => void;
+    onEditStyle?: () => void;
+}): import("react").JSX.Element;

package/dist/editor/components/PartSettingsPanel.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,Fragment as te,jsxs as h}from"react/jsx-runtime";import{useContext as Ye,useEffect as ne,useRef as qe,useState as ke}from"react";import{PartResetDot as Je}from"./PartResetDot.js";import{FieldSelect as Qe,InspectorField as Ze}from"efficient-easel/fields";import{SettingsField as et}from"efficient-easel/panel";import{InspectorUpLevel as K}from"efficient-easel/chrome";import{StylesIcon as tt,TypeIcon as nt}from"efficient-easel/icons";import{useEasel as ot}from"efficient-easel/easel";import{TextPartPanel as st}from"efficient-easel/copy";import{Tooltip as lt}from"efficient-shell/ui";import{PartTextBox as rt,partTextCells as it}from"./PartTextBox.js";import{UiIcon as Oe}from"efficient-easel/draw/client";import{usePreviewHeader as at}from"../../render/components/PreviewHeaderContext.js";import{UpdateStyleDialog as ct}from"./UpdateStyleDialog.js";import{StorefrontDocumentContext as dt}from"./StorefrontDocumentContext.js";import{hasStyleChange as ut,partStyleToTextStyleValues as ft,pushIntoStyle as pt,resolveTextStyles as mt,styleIdOfRole as Re}from"../lib/site-text-styles.js";import{useSiteTextStylesWriter as ht}from"../lib/site-text-styles-writer.js";import{useThemeRowPersist as yt}from"../lib/theme-row-persist.js";import{usePreviewDevice as gt}from"efficient-easel/draw/client";import{usePartStyle as St}from"./PreviewPartStyleContext.js";import{say as s}from"../../format/lib/editor-words.js";import{readHidable as U,textFieldOffPage as bt,textFieldPanelOnly as xt}from"../lib/puck/controls.js";import{TEXT_FIELD_MARKER as Pt}from"efficient-easel/draw";import{useSectionOps as wt}from"../lib/puck/use-section-ops.js";import{FONT_OPTIONS as Tt,FONT_ROLES as oe,FONT_ROLE_LABELS as se,fontOption as le}from"../../format/lib/fonts.js";import{isMultilineKind as vt,partPlaceholder as Nt,typeInPlaceKind as Ct}from"../../render/lib/puck/part-text.js";import{partRowField as kt}from"../lib/puck/part-row-field.js";import{decodePartKey as Ot,partPropsWithRowValue as Rt,partRowValue as It}from"../../render/lib/puck/part-rows.js";import{PART_WIDTH_MAX as Et,propsWithPartStyleValue as B,propsWithoutPartStyle as Ft,readPartStyle as Ie}from"../../render/lib/puck/part-styles.js";import{partThemeColors as _t}from"../../format/lib/puck/part-inks.js";import{styleKeyForPart as zt}from"../../format/lib/sections/section-text-kinds.js";import{commitPartText as At}from"../lib/puck/part-typing.js";import{keysOnCanvas as Vt,useCanvasTypingPart as Lt}from"../lib/puck/canvas-typing.js";import{useEditorHost as Kt}from"../lib/editor-host.js";import{SOURCE_LINES as Ut,SOURCE_ACTIONS as Bt,SOURCE_ACTION_LABEL as Dt,partSourceNoteFor as Wt,partSourceOf as Mt,sourceMenuIdOf as jt,sourceSlugOf as Ee}from"../../format/lib/puck/source-bound-parts.js";import{encodePartId as Gt,holdsAuthoredText as Ht}from"../../render/lib/puck/text-parts.js";import{regionsForSection as $t}from"../../format/lib/sections/section-text-regions.js";import{textRegionOfPartKey as Xt}from"../../format/lib/sections/text-regions.js";function re(n){return n?s(n):null}function Fe(n){return n.kind==="role"?se[n.role]:n.kind==="custom"?"Custom":null}function Yt(n){const o=n.role;return o&&oe.includes(o)?{kind:"role",role:o}:null}function qt(n,o){if(!n)return{kind:"unread"};const{faceRole:l,base:a}=n;if(o[l]===a.fontKey)return{kind:"role",role:l};const i=Object.keys(o).filter(r=>o[r]===a.fontKey);return i.length===1?{kind:"role",role:i[0]}:{kind:"custom"}}function ie(n,o,l,a){return Yt(Ie(n,o))??qt(l,a)}function Jt(n,o){if(!n.length)return null;const l=o(n[0]);return n.every(a=>o(a)===l)?l:null}const D="";function Qt({face:n,base:o,onPick:l}){const a=n.kind==="role"?n.role:D,i=[{label:s("No style"),value:D},...oe.map(r=>({label:s(se[r]),value:r}))];return t(Qe,{ariaLabel:s("Style"),value:a,options:i,inline:!0,onChange:r=>l(r===D?null:r),renderOption:r=>r.value===D?h(te,{children:[t("span",{className:"es-fsel-label sf-part-style-keep",children:r.label}),t("span",{className:"sf-part-style-aside","aria-hidden":"true",children:s("Section’s own")})]}):t("span",{className:"es-fsel-label",style:{fontFamily:`var(--font-role-${r.value})`},children:r.label}),renderValue:()=>t("span",{style:{fontFamily:o?.fontKey?`var(${le(o.fontKey)?.cssVar})`:void 0,fontWeight:o?.weight},children:re(Fe(n))}),valueText:r=>re(Fe(n))??r?.label??""})}function Zt({sectionName:n,onBack:o,textEditor:l,styleRow:a,children:i}){return h("div",{className:"sf-part-panel",children:[t(K,{inline:!0,name:s(n),onSelect:o}),l,a,i]})}function _e({source:n,slug:o,menuId:l}){const a=Kt(),i=Bt[n],r=!i.needsSlug||!!o;return t("div",{className:"sf-note sf-note--source",children:h("p",{className:"es-field-hint sf-hint-keep",children:[s(Ut[n]),r?h(te,{children:[" ",t("button",{type:"button",className:"sf-source-open",onClick:()=>{i.type==="storefront-editor:open-menus"?a.send(i.type,{menuId:l??null}):o&&a.send(i.type,{slug:o})},children:s(Dt)})]}):null]})})}const ze=4,en=120;function tn({region:n,sizePx:o,face:l,base:a,onFollowStyle:i,source:r,slug:W,onBack:P}){const E=n.follows;return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:s(n.label)})}),t("p",{children:o?s("Its size follows Site styles ▸ {follows} — {px}px right now.",{follows:s(E),px:Math.round(o)}):s("Its size follows Site styles ▸ {follows}.",{follows:s(E)})}),i?t(te,{children:t(et,{label:s("Style"),icon:t(tt,{}),hint:s("Every {part} in this section follows it. The face and the size change; the letter case is the section’s own and stays as it is.",{part:s(n.label).toLowerCase()}),children:t(Qt,{face:l,base:a,onPick:i})})}):t("p",{className:"es-field-hint sf-hint-keep",children:s("Only the size follows a site style. This section sets its own font, weight and letter case.")}),r?t(_e,{source:r,slug:W}):null,t(K,{inline:!0,name:s("Page"),onSelect:P})]})}function nn({onBack:n}){return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:s("This part is no longer here.")})}),t("p",{children:s("The section it belonged to has been changed or removed.")}),t(K,{inline:!0,name:s("Page"),onSelect:n})]})}function on({onBack:n,partId:o,why:l}){return h("div",{className:"sf-note",children:[t("p",{children:t("strong",{children:s("This part's settings did not open.")})}),t("p",{children:s("The words are still on your page and nothing has been lost. The editor could not work out which control belongs to them, which is a fault on our side. Go back and click the section to open its settings instead.")}),t("p",{className:"sf-note-detail",children:h("code",{children:[o," — ",l]})}),t(K,{inline:!0,name:s("Page"),onSelect:n})]})}function sn({nodeId:n,propKey:o,onBack:l,onEditStyle:a}){const{getItemById:i,getSelectorForId:r,config:W}=ot(e=>e),P=wt(),E=Lt(),{partStyle:F}=St(),{fonts:_,textStyles:Ae}=at(),M=Ye(dt),ae=!M?.capabilities?.hasSiteTheme,{persist:Ve}=yt({themeFromDocument:ae,tokenRef:M?.tokenRef,siteId:M?.siteId??null}),O=ht({themeFromDocument:ae,persist:Ve}),[Le,j]=ke(!1),Ke=gt()==="mobile",ce=qe(null),d=i(n),m=r(n),de=d?W.components[d.type]:void 0,{key:g,row:S}=Ot(o),ue=de?.fields?.[g],y=S?kt(ue,S):ue,w=Gt(n,o),p=d?.props??{},b=Ct(y),fe=bt(y),pe=Ht(y),Ue=d?Mt(d.type):null,me=d?Wt(d.type,g):null,G=S?It(p[g],S):p[g],he=!!S&&!(Array.isArray(p[g])&&S.index<p[g].length);ne(()=>{if(Vt(document))return;ce.current?.querySelector(".es-copy [contenteditable='true'], .es-copy textarea, .sf-copybox textarea, .sf-copybox input")?.focus()},[w]);const[H,ye]=ke(0);ne(()=>ye(0),[w]);const $=!!d&&!he&&(!m||!y);ne(()=>{if(!$||H>=ze)return;const e=setTimeout(()=>ye(c=>c+1),en);return()=>clearTimeout(e)},[$,H]);const Be=$&&H<ze;if(!d||he)return t(nn,{onBack:l});const z=$t(d.type),ge=z?Xt(z,o):null;if(z&&ge){const e=F?.partId===w?F:null,c=z[ge],f=c.writable===!0&&!!m,I=ee=>{m&&P.replaceComponent(m.zone,m.index,{...d,props:B(p,o,"role",ee)})};return t(tn,{region:c,sizePx:e?.base.sizePx??null,face:ie(p,o,e,_),base:e?.base??null,onFollowStyle:f?I:void 0,source:Ue,slug:Ee(p),onBack:l})}if(!m||!y)return Be?t("div",{className:"sf-note","aria-busy":"true"}):t(on,{onBack:l,partId:w,why:m?"no field":"no selector"});const Se=e=>{P.replaceComponent(m.zone,m.index,{...d,props:e})},X=e=>{if(U(e).hidden!==U(G).hidden||!b){const f=S?Rt(p,g,S,e):{...p,[g]:e};f&&Se(f);return}At({node:d,propKey:o,kind:b,zone:m.zone,index:m.index},U(e).text,P.replaceComponent)},De=G,T=F?.partId===w?F:null,v=T?.styleOwner,A=v?i(v.owner):null,Y=v&&A?r(v.owner):null,q=!!(v&&A&&Y),N=q?A.props??{}:p,J=q?e=>P.replaceComponent(Y.zone,Y.index,{...A,props:e}):Se,V=q?v.kind:zt(d?.type,o),C=Ie(N,V),u=[{partKey:V,face:ie(N,V,T,_),sizeGroup:T?.sizeGroup??null,base:T?.base??rn,style:C}],We=Jt(u,e=>e.sizeGroup),Me=_t(T?.inks),R=(e,c)=>{let f=N;for(const I of u)f=B(f,I.partKey,e,c);J(f)},je=e=>R("role",e),be=e=>{let c=N;for(const f of u)for(const[I,ee]of Object.entries(e))c=B(c,f.partKey,I,ee??null);J(c)},Q=b==="text"||b==="textarea",{text:xe,hidden:k}=U(G),L=y?.[Pt]?.label??o,Pe=k?s("Show {label} on the slide",{label:s(L)}):s("Hide {label} on the slide",{label:s(L)}),we=h("div",{className:"sf-field-head",children:[t(nt,{}),t("span",{className:"sf-field-label sf-field-label--inline",children:s(L)}),Q&&t(lt,{content:Pe,children:t("button",{type:"button",className:"sf-field-eye","aria-pressed":k,"aria-label":Pe,onClick:()=>X({text:xe,hidden:!k}),children:k?t(Oe,{name:"eye-off",size:14}):t(Oe,{name:"eye",size:14})})})]}),Te=!fe&&pe,Ge=!!b&&(xt(y)||fe||k||!pe),ve=ie(N,V,T,_),Z=ve.kind==="role"?ve.role:null,Ne=Object.entries(C).filter(([e,c])=>e!=="role"&&c!==void 0).length,Ce=()=>{let e=N;for(const c of u){const f=c.style.role;e=Ft(e,c.partKey),f&&(e=B(e,c.partKey,"role",f))}J(e)},x=Re(Z),He=ut(u[0].style),$e=x?mt(O.saved,O.old).find(e=>e.id===x)?.name??x:"",Xe=()=>{j(!1),x&&(O.write(pt({saved:O.saved,old:O.old,styleId:x,values:ft(u[0].style)}),!0),Ce())};return h(Zt,{sectionName:de?.label??d.type,onBack:l,textEditor:t("div",{ref:ce,className:"sf-part-text",children:Ge?t(rt,{text:xe,onTextChange:e=>X(Q?{text:e,hidden:k}:e),multiline:vt(b),markup:b!=="plainText",styled:!1,style:u[0].style,base:u[0].base,setValue:be,colors:Me,placeholder:re(Nt(y))??void 0,ariaLabel:s(L),head:we,typedOnCanvas:E===w}):b?Q?we:null:t(Ze,{field:y,name:o,value:De,onChange:X,id:`sf-part-${n}-${o}`})}),children:[me&&t(_e,{source:me,slug:Ee(p),menuId:jt(p)}),Te&&t(st,{style:{value:Z??"",options:[{value:"",label:s("No style"),description:s("Section’s own")},...oe.map(e=>({value:e,label:s(se[e]),description:le(_[e])?.label}))],onChange:e=>je(e||null),changed:Ne>0,onClearChanges:Ne>0?Ce:void 0,onEditStyles:a,onUpdateStyle:x&&He?()=>j(!0):void 0},font:{value:C.font??"",styleValue:le(u[0].base.fontKey)?.label,options:Tt.map(e=>({label:e.label,value:e.key})),onChange:e=>R("font",e||null)},italic:{value:C.italic,styleValue:ln(Ae,Z),onChange:e=>R("italic",e??null)},cells:it(u[0].style,u[0].base,be,{phone:Ke}),align:{value:C.align??"",styleValue:u[0].base.align,onChange:e=>R("align",e||null)},letterCase:{value:C.case??"",styleValue:u[0].base.case,onChange:e=>R("case",e||null)}}),Le&&x&&t(ct,{styleName:$e,onCancel:()=>j(!1),onConfirm:Xe}),Te&&We===null&&t("p",{className:"es-field-hint sf-hint-keep",children:s("Fixed size — the site’s Text setting doesn’t resize this.")})]})}function ln(n,o){const l=Re(o);return!l||!Array.isArray(n)?!1:n.find(i=>i?.id===l)?.values?.italic===!0}const rn={fontKey:"",sizePx:16,weight:400,lineRatio:1.4,letterEm:0,align:"left",case:"none",paddingPx:0,widthPx:Et};export{Zt as PartPanelBody,Je as PartResetDot,_e as PartSourceNote,Qt as PartStyleSelect,sn as default,ie as partFace};

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

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

package/dist/editor/components/PartTextBox.js

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

package/dist/editor/components/PhotographyField.js

@@ -0,0 +1 @@
+"use client";import{jsx as a}from"react/jsx-runtime";import{SettingsDefaultReset as d,SettingsField as f,SettingsSegmented as p}from"efficient-easel/panel";import{DropIcon as g}from"efficient-easel/icons";import{say as e,editorEaselWords as u}from"../../format/lib/editor-words.js";const o="Photography",c={shot:"As shot",mono:"Black and white"},l=[{grayscale:!1,label:c.shot},{grayscale:!0,label:c.mono}],m="Black and white photographs return to color on hover. Wheels and tyres keep their real finish either way.";function y({value:n,onChange:r,showHint:h=!0}){const s=n===null,i=n??!1;return a(f,{label:e(o),icon:a(g,{}),value:e(l.find(t=>t.grayscale===i).label),changed:!s,action:a(d,{words:u()?.panel,label:e(o),changed:!s,detail:e(l.find(t=>!t.grayscale).label),onReset:()=>r(null)}),hint:h?e(m):void 0,children:a(p,{options:l.map(t=>({id:t.grayscale,label:e(t.label)})),value:i,ariaLabel:e(o),onChange:r})})}export{o as SITE_PHOTOGRAPHY_LABEL,y as default};

package/dist/editor/components/PinnedChromeLoadNotice.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import{useEffect as d,useState as s}from"react";import{Banner as c}from"efficient-shell/ui";import{useOpenPinnedChromeReport as l,usePinnedChromeState as h}from"./usePinnedChromeState.js";import{say as n}from"../../format/lib/editor-words.js";const r={load:"The header and footer could not load. They are hidden for now and nothing in them is saved. Reload to try again.",lock:"{name} is editing the header and footer. Nothing you change in them here is saved.",conflict:"The header and footer were changed somewhere else. Nothing you change in them here is saved. Reload to get the latest.",save:"The header and footer did not save. They are sent again with your next change."},u=r.load,f=r.lock,m=r.conflict,N=r.save;function p(e){return e?e.loadFailed?n(u):e.lockHolder?n(f,{name:e.lockHolder.name||n("Somebody else")}):e.conflict?n(m):e.saveFailed?n(N):null:null}function C({report:e}){const o=p(h(e)),[a,i]=s(null);return d(()=>{o||i(null)},[o]),!o||a===o?null:t("aside",{className:"sf-canvas-notice",children:t(c,{tone:"warning",onDismiss:()=>i(o),children:o})})}function T(){return t(C,{report:l()})}export{T as OpenDocumentChromeLoadNotice,m as PINNED_CHROME_CONFLICT_NOTICE,u as PINNED_CHROME_LOAD_NOTICE,f as PINNED_CHROME_LOCK_NOTICE,r as PINNED_CHROME_NOTES,N as PINNED_CHROME_SAVE_NOTICE,C as PinnedChromeLoadNotice,p as pinnedChromeNoticeWords};

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import type { ChatSettings } from "../lib/web-backend.js";
+import { type ChatLauncherPosition } from "../../format/lib/content/chat-launcher.js";
+export type ChatPreview = {
+    enabled: boolean;
+    title: string;
+    subtitle: string;
+    greeting: string;
+    launcherColor: string;
+    launcherIcon: string;
+    launcherPosition: ChatLauncherPosition;
+    launcherLabel: string;
+    showOnPhones: boolean;
+};
+export declare const DEFAULT_CHAT_PREVIEW: ChatPreview;
+export declare function chatPreviewFrom(s: ChatSettings): ChatPreview;
+type Ctx = {
+    chat: ChatPreview;
+    setChat: (patch: Partial<ChatPreview>) => void;
+    selected: boolean;
+    setSelected: (b: boolean) => void;
+    select: () => void;
+    setSelectHandler: (fn: () => void) => void;
+};
+export declare function PreviewChatProvider({ children, chat, onChatChange, }: {
+    children: ReactNode;
+    chat?: ChatPreview;
+    onChatChange?: (patch: Partial<ChatPreview>) => void;
+}): import("react").JSX.Element;
+export declare const usePreviewChat: () => Ctx;
+export {};

package/dist/editor/components/PreviewChatContext.js

@@ -0,0 +1 @@
+"use client";import{jsx as i}from"react/jsx-runtime";import{createContext as P,useCallback as C,useContext as d,useState as b}from"react";import{useSelectHandler as f}from"efficient-easel/draw/client";import{DEFAULT_CHAT_LAUNCHER_POSITION as m,chatLauncherColor as x,chatLauncherIcon as L,chatLauncherPosition as p}from"../../format/lib/content/chat-launcher.js";const n={enabled:!0,title:"",subtitle:"",greeting:"",launcherColor:"",launcherIcon:"",launcherPosition:m,launcherLabel:"",showOnPhones:!0};function H(e){return{enabled:e.enabled,title:e.title,subtitle:e.subtitle,greeting:e.greeting,launcherColor:x(e.launcherColor),launcherIcon:e.launcherIcon?L(e.launcherIcon):"",launcherPosition:p(e.launcherPosition),launcherLabel:e.launcherLabel??"",showOnPhones:e.showOnPhones!==!1}}const r=P({chat:n,setChat:()=>{},selected:!1,setSelected:()=>{},select:()=>{},setSelectHandler:()=>{}});function _({children:e,chat:o=n,onChatChange:t}){const[l,c]=b(!1),a=C(h=>t?.(h),[t]),{select:s,setSelectHandler:u}=f();return i(r.Provider,{value:{chat:o,setChat:a,selected:l,setSelected:c,select:s,setSelectHandler:u},children:e})}const g=()=>d(r);export{n as DEFAULT_CHAT_PREVIEW,_ as PreviewChatProvider,H as chatPreviewFrom,g as usePreviewChat};

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import type { FooterBlock } from "../../format/lib/content/footer.js";
+type PreviewFooterCtx = {
+    footerBlock: FooterBlock | null;
+    setFooterBlock: (block: FooterBlock | null) => void;
+    headerGroup: FooterBlock | null;
+    setHeaderGroup: (group: FooterBlock | null) => void;
+    editFooter?: () => void;
+    refreshToken: number;
+    refreshFooter: () => void;
+};
+export declare function PreviewFooterProvider({ children, editFooter, }: {
+    children: ReactNode;
+    editFooter?: () => void;
+}): import("react").JSX.Element;
+export declare const usePreviewFooter: () => PreviewFooterCtx;
+export {};

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { type PartNeedle } from "../../render/lib/puck/text-parts.js";
+import { type PartStyleBase, type PartStyles } from "../../render/lib/puck/part-styles.js";
+import { type FontRole } from "../../format/lib/fonts.js";
+import { type TypeGroup } from "../../format/lib/theme.js";
+export declare function styleTagsOf(element: HTMLElement): {
+    faceRole: FontRole;
+    sizeGroup: TypeGroup | null;
+};
+export declare function measureStyleBase(element: HTMLElement): PartStyleBase;
+export default function PreviewPartAnchors({ needles, styles, type, children, }: {
+    needles: PartNeedle[];
+    styles: PartStyles;
+    type?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/editor/components/PreviewPartAnchors.js

@@ -0,0 +1 @@
+"use client";import{jsx as J}from"react/jsx-runtime";import{readInks as z}from"../../format/lib/puck/part-inks.js";import{useEffect as M,useRef as Y}from"react";import{markOverlayPortal as $}from"../../format/lib/puck/overlay-portal.js";import{usePreviewParts as j}from"efficient-easel/draw/client";import{usePartStyle as B}from"./PreviewPartStyleContext.js";import{usePreviewDevice as G}from"efficient-easel/draw/client";import{encodePartId as H}from"efficient-easel/draw";import{PUCK_COMPONENT_ATTR as q,engagePartAnchors as U,isPartClick as V,partIdForClick as Q}from"../lib/puck/part-anchors.js";import{PART_ATTR as _,PART_SELECTED_ATTR as w,PART_STYLE_KIND_ATTR as C,PART_STYLE_OWNER_ATTR as X,partStyleOwnerOf as x}from"../../render/lib/puck/text-parts.js";import{PART_STYLE_PROPERTIES as N,applyPartStyles as k,partFontKeyOf as Z,partStyleBase as tt,partStyleSource as et}from"../../render/lib/puck/part-styles.js";import{fontRoleOfClassName as rt,styleRoleOfClassName as ot}from"../../format/lib/fonts.js";import{typeScaleGroupOfClassName as D}from"../../format/lib/theme.js";import{styleKeyForPart as st}from"../../format/lib/sections/section-text-kinds.js";function nt(a){let n=null,l=null;for(let e=a;e&&(n===null||l===null);e=e.parentElement){const c=e.getAttribute("class");n??=ot(c),l??=D(c)}return{faceRole:n??"body",sizeGroup:l}}function L(a){const n=a.style,l={};for(const r of N)l[r]=n[r]??"",n[r]="";const e=getComputedStyle(a),c=getComputedStyle(a.ownerDocument.documentElement),p=tt({fontSize:e.fontSize,fontWeight:e.fontWeight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing,textAlign:e.textAlign,textTransform:e.textTransform,paddingTop:e.paddingTop,maxWidth:e.maxWidth},Z(e.fontFamily,r=>c.getPropertyValue(r)));for(const r of N)n[r]=l[r];return p}function it({needles:a,styles:n,type:l,children:e}){const c=Y(null),{selectedPartId:p,select:r}=j(),{setPartStyle:y}=B(),d=G()==="mobile",S=JSON.stringify(a),g=JSON.stringify(n);return M(()=>{const f=c.current;if(!f)return;const T=[],P=()=>f.parentElement,W=i=>{const o=P();if(!o)return null;const m=new MutationObserver(i);return m.observe(o,{attributes:!0,attributeFilter:[q]}),()=>m.disconnect()},I=i=>{const o=new MutationObserver(i);return o.observe(f,{childList:!0,subtree:!0,characterData:!0}),()=>o.disconnect()};let u=[];T.push(()=>{for(const i of u)i();u=[]});const K=JSON.parse(S),h=JSON.parse(g),F=U(f,K,P,W,(i,o,m)=>{for(const t of u)t();u=[];const A=[];for(const t of m){const s=t,v=$(s);v&&u.push(v),s.getAttribute(_)===p?(s.setAttribute(w,""),A.push(s)):s.removeAttribute(w)}const b=et(o,p,A,t=>rt(t)!==null||D(t)!==null);if(b&&p){const t=b;y({partId:p,...nt(t),base:L(t),inks:z(t),...(()=>{const s=x(t);return s?{styleOwner:s}:{}})()})}k(m.filter(t=>!x(t)).map(t=>({element:t,partId:t.getAttribute(_)??""})),h,t=>L(t),t=>st(l,t),void 0,d);const E=[...f.querySelectorAll(`[${X}="${CSS.escape(o)}"][${C}]`)];E.length&&k(E.map(t=>({element:t,partId:H(o,t.getAttribute(C)??"")})),h,void 0,t=>t,void 0,d);const O=t=>{const s=Q(t.target,o);V(s,o)&&(t.stopPropagation(),t.preventDefault()),r(s)},R=i;R.addEventListener("click",O,{capture:!0}),u.push(()=>R.removeEventListener("click",O,{capture:!0}))},I);return()=>{F();for(const i of T)i()}},[S,g,p,r,y,d]),J("div",{ref:c,style:{display:"contents"},children:e})}export{it as default,L as measureStyleBase,nt as styleTagsOf};

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

@@ -0,0 +1,25 @@
+import type { WordStyleColour } from "../../format/lib/word-styles.js";
+import { type ReactNode } from "react";
+import type { FontRole } from "../../format/lib/fonts.js";
+import type { PartStyleBase } from "../../render/lib/puck/part-styles.js";
+import type { TypeGroup } from "../../format/lib/theme.js";
+export type PartStyleReading = {
+    partId: string;
+    faceRole: FontRole;
+    sizeGroup: TypeGroup | null;
+    base: PartStyleBase;
+    inks?: Partial<Record<WordStyleColour, string>>;
+    styleOwner?: {
+        owner: string;
+        kind: string;
+    };
+};
+type PartStyleValue = {
+    partStyle: PartStyleReading | null;
+    setPartStyle: (reading: PartStyleReading | null) => void;
+};
+export declare function PreviewPartStyleProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function usePartStyle(): PartStyleValue;
+export {};

package/dist/editor/components/PreviewThemeFrame.js

@@ -0,0 +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=`
+[${m}][${m}] { cursor: text; }
+[${t}][${t}][${t}] {
+  outline: 1px solid ${d.accent};
+  outline-offset: 2px;
+}
+[${t}][${t}]:has([${t}]),
+[data-puck-overlay-portal][data-puck-overlay-portal]:has([${t}]) {
+  outline: none;
+}
+[${t}][${t}][${t}][data-es-typing],
+[data-es-typing] [${t}][${t}][${t}] {
+  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};

package/dist/editor/components/SearchSelectField.js

@@ -0,0 +1 @@
+"use client";import{jsx as p}from"react/jsx-runtime";import{useId as I}from"react";import{FieldSelect as $}from"efficient-easel/fields";import{SettingsField as F}from"efficient-easel/panel";import{say as h}from"../../format/lib/editor-words.js";function g(r){return r.map(({value:n,label:l,group:t,thumb:o,meta:e})=>({value:n,label:l,...t!==void 0?{group:t}:{},...o!==void 0?{thumb:o}:{},...e!==void 0?{meta:e}:{}}))}function j({label:r,options:n,fallback:l,value:t,onChange:o,placeholder:e,bare:i=!1,icon:b}){const a=I(),c=`${a}-label`,d=`${a}-button`,s=t??"",S=n.some(x=>x.value===s)?s:l,u=h(r),f=e===void 0?void 0:h(e),m=p($,{id:d,value:S,options:g(n),onChange:o,placeholder:f,searchPlaceholder:f,...i?{ariaLabel:u}:{ariaLabelledBy:`${c} ${d}`},searchable:!0,groupCount:!0,inline:!0});return i?m:p(F,{label:u,labelId:c,icon:b,children:m})}export{j as default,g as searchSelectOptions};