efficient-web-builder 0.10.0 → 1.0.0

package/README.md

@@ -1,277 +1,123 @@
 # efficient-web-builder
 
-The EFFICIENT **website builder** — the website editor (the page, template and
-section editors) and every section the storefront renders — for an app that
-edits a website **inside its own page**. The admin portal's Storefront editor
-windows mount it.
-
-Published as `efficient-web` up to 0.3.0; 0.7.0 is the first release under
-this name (`CHANGELOG.md` says how to migrate).
-
-It is not a second copy of anything: `build.mjs` compiles the shop's own
-`components/` and `lib/` from this repository, starting at `src/index.tsx`.
-The shop itself never installs it; its pages import the same source directly.
-
-## Use
-
-```tsx
-import "efficient-web-builder/editor.css";
-import { WebsiteEditor, createEditorHost } from "efficient-web-builder";
-
-const { host, deliver } = createEditorHost({
-  onMessage: (m) => { /* toasts, open the media picker, the form builder … */ },
-  address: { search: () => "", show: () => {}, load: retargetWindow, reload: remount },
-});
-// Grant a token when the editor says it is ready, and again on auth-expired:
-//   deliver({ type: "storefront-editor:auth", token, siteId, can })
-
-<WebsiteEditor host={host} target={{ kind: "page", slug: "homepage", siteId }} site={{ slug, origin }} />;
-```
-
-- **Messages** are the `storefront-editor:*` protocol the editor once spoke
-  over postMessage from the shop's `/edit` routes, as function calls — no
-  origin, no iframe.
-  `EditorToHostMessage` / `HostToEditorMessage` type every one.
-- **`site`** — the website's `slug` (public catalog reads name it with
-  `?site=`, because the embedder's own host names no website) and its public
-  `origin` (the routes only the storefront serves, and the Preview link).
-  Re-mount the editor with a `key` to move to another website.
-- **One editor mounted at a time.** Parts of the editor keep the open website
-  and page in module state; route every target into one window.
-- **Styles.** `efficient-web-builder/editor.css` is the chrome, scoped under
-  `.sf-editor`; the engine's sheets are imported from the embedder's own
-  `efficient-easel`. The canvas is styled from inside its own frame (the
-  storefront's compiled `app/globals.css`), so neither page's styles reach the
-  other.
-- **Peers:** `react`/`react-dom` 19, `efficient-easel`, `efficient-shell`.
-
-## A backend of your own (0.4.0)
-
-The editor reaches its server only through a `WebsiteBackend`
-(`doc/adr/0002`). Leave `backend` out and it is EFFICIENT's — `/api/storefront/*`,
-authorised by the token you deliver with `storefront-editor:auth`, exactly as
-above. A product with its own backend passes its own:
-
-```tsx
-import { WebsiteEditor, WebsiteBackendError, type WebsiteBackend } from "efficient-web-builder";
-
-const backend: WebsiteBackend = {
-  pages: {
-    list: () => api.pages(),                                   // EditorPageRow[]
-    load: (ref) => api.page(ref),                              // { id, layout, version } | null
-    save: async (id, doc, expect) => {
-      const res = await api.savePage(id, doc.layout, expect.version);
-      if (res.conflict) {
-        throw new WebsiteBackendError("changed-elsewhere", undefined, {
-          conflict: { savedBy: res.by, savedByYou: res.mine, secondsAgo: res.ago },
-        });
-      }
-      return { version: res.version };
-    },
-  },
-  site: { get: () => api.site() },                             // { name }
-  media: { resolve: (ref) => (ref.startsWith("file:") ? cdn(ref) : null) },
-};
-
-<WebsiteEditor host={host} target={{ kind: "page", slug: "home" }} site={null} backend={backend} />;
-```
-
-- **Required:** `pages` (`list`, `load`, `save`), `site.get`, `media.resolve`.
-  **Optional**, each switching its own control on: `pages.version`,
-  `pages.publish` (the main button reads Publish, not Save), `pages.create` /
-  `pages.remove` (inline in the page list), `lock` (the "somebody else is
-  editing" notices and take-over), `site.update` (the Maps key), `preview`
-  (the Preview link), `sectionTemplates`, `templates`. A missing group is never
-  a dead button: the editor does not draw what it cannot do.
-- **Failures are kinds.** Reject with `WebsiteBackendError`: `unauthorized`,
-  `changed-elsewhere` (+ `conflict`), `lock-taken` (+ `holder`), `not-found`,
-  `invalid`, `unavailable`. The editor never reads a status code or a body.
-- **No token.** How a call is authorised is the backend's business. The editor
-  waits for no `auth` message and needs none; it announces `ready` once, and
-  when a save, a publish or a lock claim is refused `unauthorized` it tells the
-  host `auth-expired` and lets the autosave try again.
-- **No request of its own.** Under your backend the package's own HTTP client is
-  closed and the canvas loads no font sheet from Google.
-- **`PageBundle`** is `{ layout, translations?, seo? }`. 0.4.0 reads and writes
-  `layout` only; store the bundle anyway — `translations` and `seo` are where
-  per-language content will live, and an absent member means "leave it".
-- **Not behind the interface yet** (they work under EFFICIENT's backend, and are
-  absent under yours): site styles, the pinned header and footer, menus,
-  forms, the catalog, "duplicate to page". Block
-  settings that list such data (product link targets, product sources) list
-  nothing, and a Form section's picker is inert: it offers no list, no "New
-  form" and sends no `open-form`.
-- **`backend.pages.linkTargets`** (optional): your pages with their layouts, for
-  the link picker. Without it the picker lists `pages.list` and no anchors.
-- **`backend.media.maxUploadBytes`** (optional): the largest file a media field
-  takes before it reaches your panel or picker; leave it out to refuse none.
-- **`backend.theme`** (optional): `get` / `update` the website's appearance —
-  the `SiteThemeRow` behind Site styles (colour themes, fonts and sizes,
-  corners, cards, widths). `update` is handed only the keys that changed and
-  answers the whole row. Without it the editor shows no Site styles and the
-  website is drawn in the built-in look.
-- **`backend.social`** (optional): `get` / `update` the website's social links,
-  one address per platform name. Reject a bad address with
-  `new WebsiteBackendError("invalid", message, { fields: { instagram: "…" } })`
-  and the reason is shown beside that platform's box.
-- **`backend.chat`** (optional): `get` / `update` the live-chat bubble's
-  settings. (The Live chat panel itself is still drawn only where the site's
-  settings are — EFFICIENT's backend — until those settings cross too.)
-- **`backend.blog`** (optional): `posts(scope?)` answers your published posts.
-  With it a section's "Blog post source" and the link picker's "Blog post"
-  list your blog; without it neither offers a list.
-- `backend` is read once, when the editor mounts — re-mount (a `key`) to change it.
-
-## Which blocks the editor offers (0.7.0)
-
-Every block is in one of three **sets**:
-
-| Set | What it is |
-|---|---|
-| `general` | Draws from its own props and what the host hands it (media, the site's logo, its Maps key). Any host may offer it. |
-| `commerce` | The shop: products, the catalogue, the cart, the checkout, the pinned Header. |
-| `service` | Needs one of the EFFICIENT backend's site services: forms, bookings, reviews, the newsletter, the blog, menus, the pinned Footer. |
-
-Which block is in which set is `GENERAL_BLOCKS`, `COMMERCE_BLOCKS` and
-`SERVICE_BLOCKS` in `efficient-web-builder/contract`.
-
-Leave `blocks` out and the editor offers all of them, exactly as before 0.7.0.
-Pass it to choose:
-
-```tsx
-import { WebsiteEditor, type WebsiteEditorBlocks } from "efficient-web-builder";
-import type { ComponentConfig } from "efficient-easel/blocks";
-
-const Roster: ComponentConfig = {
-  label: "Roster",
-  fields: { heading: { type: "text", label: "Heading" } },
-  defaultProps: { heading: "On tonight" },
-  // `puck.metadata` is whatever you hand the editor as `blocks.metadata`.
-  render: ({ heading, puck }) => <RosterSection heading={heading} people={puck.metadata.roster} />,
-};
-
-const blocks: WebsiteEditorBlocks = {
-  sets: ["general"],                       // default: all three
-  deny: ["CustomHTML"],                    // never these
-  // allow: [...],                         // or: only these (after `sets`)
-  host: { "acme-roster": Roster },         // your own blocks, by type
-  categories: [{ key: "acme", title: "Venue", components: ["acme-roster"], before: "openers" }],
-  metadata: { roster },                    // live: change it and the canvas redraws
-};
-
-<WebsiteEditor host={host} target={target} site={null} backend={backend} blocks={blocks} />;
-```
-
-- **Offered, not registered.** A block you leave out is in no group of the Add
-  panel, no slot's "Add block" menu and no drop target, and no section is
-  seeded with it. It is still registered: a page that already holds one draws
-  it, and it can be selected and deleted.
-- **A section is offered only with what it is built from.** Adding a Hero
-  writes Hero Slides, and "Brand Text" lays down Boxes, a Heading and a Text —
-  so a Hero is not offered where `HeroSlide` is not, and Brand Text is not
-  where the Box is not. `allow: ["Hero"]` therefore offers nothing; `allow:
-  ["Hero", "HeroSlide"]` offers the Hero. To see what a section writes, add it
-  and run `blockTypesIn` on the saved layout. A section that is only *wrapped*
-  in a Box when it is added (most sections with a heading) is added whole
-  instead where the Box or the Section Header is not offered.
-- **With a set left out, what needs it is not drawn.** Without `service`: no
-  "Blog post" link target, no "Blog post source" on Feature Banner, Article
-  Text and Post Card, an inert Form picker. Without `commerce`: no "Product"
-  link target, no catalog seed. The pinned Header and Footer need both.
-- **Your own blocks.** Written as the engine's `ComponentConfig`, with its
-  field types (`text`, `textarea`, `number`, `select`, `radio`, `array`,
-  `object`, `custom`, `slot`). A type the editor already registers is refused —
-  the editor throws when it mounts — so give yours a prefix. A block is added
-  from the Add panel, in the group `categories` names; one named in no group is
-  registered and offered nowhere, and none is offered inside a Box. A
-  `categories` entry whose `key` is an existing group (`content`, `structure`,
-  …) adds to the end of that group.
-- **Your blocks get none of the editor's own section rows.** The Padding,
-  Width, Height, Anchor, Theme, Corners and Animation rows, the four settings
-  tabs and click-to-edit text are added to the editor's own blocks by ~25
-  passes that run once, when the package loads, over lists fixed in its source.
-  A block that arrives when the editor mounts is not on those lists, so it is
-  drawn exactly as its `render` draws it and edited with exactly the fields it
-  declares. The one exception is the Layers tree's eye, which hides your block
-  as it hides any other (it stores `_hidden: true` on the node's props). Giving
-  host blocks the rest needs an `applyBlockPasses(type, block)` the package
-  does not have yet: each pass rewritten from a loop over a fixed list into a
-  function of one block, run in the same order.
-- **`metadata` is live; the rest is read once.** `sets`, `allow`, `deny`,
-  `host` and `categories` are read when the editor mounts, with `backend` —
-  re-mount (a `key`) to change them. `metadata` is followed: hand the editor a
-  new object and every block in the canvas redraws in place. It is never
-  written to the page or to the undo history. Keep the object the same between
-  renders while the data is the same (a `useMemo`, a state value): a new object
-  each render redraws the canvas each render.
-
-### Checking a saved page on your server
-
-**Hiding a block in the editor is not a security boundary.** `blocks` decides
-what the editor offers; a page is a JSON document, and whoever can call your
-save endpoint can send one holding any block type. Check it where you store it:
+The EFFICIENT website builder: the website editor, the general sections, and
+the renderer that draws a published page from them. It has no host in it. The
+EFFICIENT storefront, the admin portal and Foyerboard each mount it and hand it
+what is theirs.
+
+This repository was the folder `packages/web-builder` of
+[`efficient-storefront`](https://github.com/Efficient-Pty-Ltd/efficient-storefront)
+until 2026-10-07, and carries that folder's history: each file's log goes back
+to the day it was written there
+([`doc/adr/0001`](doc/adr/0001-extracted-from-the-storefront.md)).
+
+## The one rule
+
+**Nothing in `src/` imports anything outside `src/`** except the packages
+`package.json` declares as peer dependencies. Not a commerce block, not a page,
+not a host's API client — by value or by type.
+
+What a host adds, it hands over on the editor's session
+(`src/lib/editor-session.ts`), read once for the life of the mount:
+
+| The host's | Declared in | What it is |
+|---|---|---|
+| block registry | `src/lib/puck/registry.ts`, `general-registry.tsx` | Which blocks exist, in what order. The builder's own registry is the general blocks; a host registers its own among them. |
+| backend | `src/lib/web-backend.ts` | Everything the editor asks a server for: pages, the edit lock, the site record, media, and the optional groups (blog, chat, social, theme, …). |
+| chrome | `src/lib/editor-chrome.tsx` | The host's furniture round the editor, as components: a wrapper, panels, Pages-panel rows, its products and its row under a Link field. |
+| document hooks | `src/lib/editor-document-hooks.ts` | What the host does to a document as it opens and as an edit is stored. |
+| failure reader | `src/lib/web-backend.ts` (`provideHostFailures`) | How to read the host client's own errors. |
+
+The storefront's are assembled in its `lib/storefront-editor.ts`.
+
+Two checks hold the rule, both in CI and both without an allow-list:
+
+- `pnpm run typecheck` — `@/…` points at `src/` and nowhere else, so an import
+  of a host does not resolve.
+- `pnpm run test:boundary` — the packages the sources import are exactly the
+  manifest's peer dependencies, and the manifest declares no module type.
+
+## Layout
+
+`src/` keeps the paths these files had in the storefront — `src/lib/…`,
+`src/components/…` — and imports are written `@/lib/…`, `@/components/…`.
+Comments that name a file say `lib/puck/controls`; read them from `src/`.
+
+## How the storefront uses it
+
+The storefront compiles these sources: its commerce and service blocks are
+written with the builder's control builders and passes, so it needs the source,
+not a bundle. It keeps a **vendored copy** of this repository's `src/` at
+`packages/web-builder/src`, pinned to a commit here, and resolves `@/…` in its
+own tree first and in the copy second.
+
+- A change to the builder is made HERE. The storefront then moves its pin
+  (`node scripts/sync-web-builder.mjs <ref>` there), in a pull request that
+  runs the storefront's whole suite over the new copy.
+- The copy is never edited in place: the storefront's check fails when that
+  folder is not byte-for-byte the `src/` tree of the pinned commit.
+
+So this repository's CI proves the builder stands alone, and the storefront's
+proves it still does what it did. Most of the builder's behavioural guards live
+in the storefront for now, because they run the editor assembled with a host.
+
+The copy is on its way out ([`doc/adr/0002`](doc/adr/0002-published-from-here-compiled.md)).
+Some 280 of the storefront's guards read these sources by path, and the package
+below carries no source. Once the guards that are the builder's alone live
+here, the storefront installs the package like any host and deletes
+`packages/web-builder`.
+
+## Published as `efficient-web-builder`
+
+From 1.0.0 the npm package `efficient-web-builder` is this repository and
+nothing else, published from here. (Up to 0.10.0 that name was built in the
+storefront: these sources assembled WITH the storefront's blocks and
+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:
 
 ```ts
-import { GENERAL_BLOCKS, blockTypesIn } from "efficient-web-builder/contract";
-
-const ALLOWED = new Set([...GENERAL_BLOCKS, "acme-roster"]);
-
-function assertAllowed(layout: unknown) {
-  const refused = blockTypesIn(layout).filter((type) => !ALLOWED.has(type));
-  if (refused.length) throw new Error(`This page holds blocks this site does not allow: ${refused.join(", ")}`);
-}
+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";
 ```
 
-`efficient-web-builder/contract` is one small file that imports nothing — no React, no
-engine, no editor — so a server can load it. It exports `BLOCK_SETS`,
-`GENERAL_BLOCKS`, `COMMERCE_BLOCKS`, `SERVICE_BLOCKS`, `blockSetOf(type)` and
-`blockTypesIn(layout)`.
+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.
 
-`blockTypesIn` reads a layout by shape: any `{ type, props }` in the page's
-`content`, in a `zones` entry, or in an array under a node's props is a block,
-to any depth. It errs wide — something that merely looks like a block is
-counted — so a check built on it can refuse a page it might have accepted, and
-never the reverse. If `ALLOWED` is narrower than what your editor offers, list
-the blocks your sections are built from as well (see above), or the editor will
-build pages your server refuses.
+### Releasing
 
-### Drawing a link the way the editor does
+A merge is not a release. The pull request that wants hosts to see a change
+raises `version` in `package.json` and adds a section to `CHANGELOG.md`. After
+it merges, publish a GitHub Release tagged `vX.Y.Z` on the merge commit:
 
-`efficient-web-builder/links` is the editor's link rules, for a host that draws the
-shared link picker (efficient-easel `LinkPicker`) somewhere else — the admin's
-menu items. It is built from the same file the editor's own Link field reads,
-so a link written in one place reads back the same in the other.
-
-```ts
-import {
-  LINK_KINDS, inferLinkKind, isSafeLink, listingFilterFields,
-  listingTarget, productListingPaths, readListingFilter, withListingFilter,
-} from "efficient-web-builder/links";
-
-const listing = productListingPaths(pages, { fallback: sellsProducts });
-inferLinkKind("/shop?type=tyre", pagePaths, listing);          // "page"
-withListingFilter("/wheels", { param: "collection", value: "Precision Forged" });
-//   "/wheels?collection=Precision%20Forged"
-isSafeLink("javascript:alert(1)");                             // false
+```bash
+gh release create vX.Y.Z --target <full merge sha> --title vX.Y.Z --notes-file <notes>
 ```
 
-`listingFilterFields(catalogue, { listing, fieldUsage })` lists the filters a
-link onto the product listing may offer — the listing's own rail for the kinds
-the section shows, after the site's Product Types answers and the one-value
-rule — each with the values the site's catalogue has. Light like `/contract`:
-one file, no import of any kind.
-
-## Release
+`.github/workflows/release.yml` runs the whole gate again and publishes through
+npm trusted publishing. There is no token anywhere; npm accepts the publish
+only from that workflow file in this repository. The registry can answer with
+the previous version for a couple of minutes after a green run.
 
-The version here is bumped **by hand** in the pull request that wants the admin
-to see a change (and a `CHANGELOG.md` section added). After it merges:
+## Working here
 
+```bash
+pnpm install
+pnpm run verify
 ```
-gh release create web-vX.Y.Z --target <merge sha> --notes-file <the CHANGELOG section>
-```
 
-`.github/workflows/release-web.yml` builds and publishes it (npm trusted
-publishing). Then bump the admin portal's pin.
+`verify` is the typecheck, the boundary check, the build and
+`scripts/verify-dist.mjs`, which reads `dist/` as a host would: every file
+there, every import resolving, every `"use client"` kept, no source in it.
+
+Node 26 (`.node-version`), pnpm 11. Do not add `"type": "module"` to
+`package.json`: the storefront loads these files beside its own, and a module
+type here makes its test runner load every one of them twice.
 
-Closed source: © Efficient Pty Ltd, all rights reserved (`LICENSE`); the
-published files are minified and ship no source maps.
+Shared conventions — commits, branches, CI, naming — are the organisation's
+harness (`efficient-harness`), as in every platform repository.

package/dist/components/AddBlockRow.d.ts

@@ -0,0 +1,7 @@
+import { type BlockChoice } from "../lib/puck/footer-blocks.js";
+export default function AddBlockRow({ choices, onPick, open, onToggle, }: {
+    choices: BlockChoice[];
+    onPick: (type: string) => void;
+    open?: boolean;
+    onToggle?: () => void;
+}): import("react").JSX.Element;

package/dist/components/AddBlockRow.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,jsxs as n,Fragment as p}from"react/jsx-runtime";import{Fragment as d,useState as u}from"react";import f from"./SectionIcon.js";import{blockRuns as g}from"../lib/puck/footer-blocks.js";function h({choices:o,onPick:m,open:c,onToggle:r}){const[i,a]=u(!1),t=c??i;return n(p,{children:[n("button",{type:"button",className:"sf-add-card","aria-expanded":t,onClick:r??(()=>a(e=>!e)),children:[s("span",{className:"sf-plus sf-plus--sm",children:"+"}),"Add block"]}),t&&s("div",{className:"sf-blockmenu",role:"menu",children:g(o).map(e=>n(d,{children:[e.group&&n("div",{className:"sf-menugroup-head",role:"presentation",children:[s("span",{className:"sf-menugroup-title",children:e.group}),s("span",{className:"sf-menugroup-count",children:e.items.length})]}),e.items.map(l=>n("button",{type:"button",className:"sf-blockmenu-item",role:"menuitem",onClick:()=>{a(!1),m(l.type)},children:[s("span",{className:"sf-chip",children:s(f,{type:l.type,size:13})}),s("span",{className:"sf-row-name",children:l.label})]},l.type))]},e.group??"all"))})]})}export{h as default};

package/dist/components/AddChildRow.d.ts

@@ -0,0 +1,6 @@
+export default function AddChildRow({ label, blocked, onAdd, small, }: {
+    label: string;
+    blocked: string | null;
+    onAdd: () => void;
+    small?: boolean;
+}): import("react").JSX.Element;

package/dist/components/AddChildRow.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";function d({label:l,blocked:s,onAdd:e,small:n=!1}){return a("button",{type:"button",className:"sf-add-card",disabled:s!==null,title:s??void 0,onClick:e,children:[t("span",{className:n?"sf-plus sf-plus--sm":"sf-plus",children:"+"}),l]})}export{d as default};

package/dist/components/AddSidePanel.d.ts

@@ -0,0 +1,39 @@
+import { type DragSession } from "efficient-easel/drag";
+import type { SectionTemplate } from "../lib/section-template-types.js";
+import { type BlockChoice } from "../lib/puck/footer-blocks.js";
+export type AddKey = {
+    kind: "section";
+    type: string;
+} | {
+    kind: "template";
+    template: SectionTemplate;
+} | {
+    kind: "block";
+    type: string;
+};
+export declare const sectionKey: (type: string) => string;
+export declare const blockKey: (type: string) => string;
+export declare const templateKey: (id: string) => string;
+export type AddSidePanelProps<I> = {
+    blocks: {
+        parentName: string;
+        choices: BlockChoice[];
+    } | null;
+    blocksOnly: boolean;
+    at?: {
+        label: string;
+        onClear: () => void;
+    };
+    onAdd: (key: AddKey) => void;
+    itemFor: (key: AddKey) => I;
+    session: DragSession<I>;
+    siteWide?: {
+        chatEnabled: boolean;
+        onToggleChat: (on: boolean) => void;
+        onOpenChat: () => void;
+    };
+    onClose: () => void;
+    onHide?: () => void;
+    readOnly?: boolean;
+};
+export default function AddSidePanel<I>({ blocks, blocksOnly, at, onAdd, itemFor, session, siteWide, onClose, onHide, readOnly, }: AddSidePanelProps<I>): import("react").JSX.Element;

package/dist/components/AddSidePanel.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,jsxs as m,Fragment as T}from"react/jsx-runtime";import{useEffect as L,useMemo as g,useState as P}from"react";import{useEasel as j}from"efficient-easel/easel";import{AddPanel as D}from"efficient-easel/drag";import y from"./SectionIcon.js";import _,{PanelModeExit as z}from"./SidePanelHead.js";import{AddIcon as F}from"efficient-easel/icons";import S from"./SectionThumbnail.js";import{sectionTemplates as K}from"../lib/editor-section-templates.js";import{useEditorSession as O}from"../lib/editor-session-context.js";import{buildPaletteSections as B,categoryLabel as H,paletteWithoutPinned as M,pinnedSection as R}from"../lib/puck/add-palette.js";import{blockOfferOf as Y}from"../lib/puck/block-offer.js";import{blockTypesIn as q}from"../lib/puck/block-types-in.js";import{SettingsSwitch as G}from"efficient-easel/panel";import{blockRuns as J}from"../lib/puck/footer-blocks.js";import{SECTION_DESCRIPTIONS as Q}from"../lib/puck/section-descriptions.js";import{labelAtLevel as U}from"../lib/puck/section-catalog.js";const V=o=>`section:${o}`,X=o=>`block:${o}`,Z=o=>`template:${o}`;function W({blocks:o,blocksOnly:l,at:k,onAdd:x,itemFor:w,session:$,siteWide:d,onClose:A,onHide:v,readOnly:C}){const a=j(e=>e.config),h=O(),[p,E]=P([]);L(()=>{let e=!1;const n=Y(h);return K.list().then(c=>{if(e)return;const t=a.components;E(c.filter(i=>i.node?.type&&t[i.node.type]&&(!n||q(i.node).every(n.offers))))}).catch(()=>{}),()=>{e=!0}},[a,h]);const f=g(()=>B(a,Q),[a]),I=e=>U(e,"section",a.components[e]?.label??e),u=e=>({type:V(e.type),label:e.name,cover:s(S,{type:e.type}),title:e.desc?`${e.name} \u2014 ${e.desc}`:`Add ${e.name}`,keywords:[e.alias??"",e.desc,e.type,e.catLabel].filter(Boolean)}),N=g(()=>{const e=[];if(o&&o.choices.length>0&&J(o.choices).forEach((t,i)=>{e.push({title:i===0?`Inside ${o.parentName}${t.group?` \xB7 ${t.group}`:""}`:t.group??"",tiles:t.items.map(r=>({type:X(r.type),label:r.label,icon:s(y,{type:r.type,size:18}),title:`Add ${r.label}`}))})}),l)return e;const n=R(f);n&&e.push({title:"Start blank",tiles:[u(n)]}),p.length>0&&e.push({title:"Your templates",tiles:p.map(t=>({type:Z(t.id),label:t.name,cover:s(S,{type:t.node.type}),keywords:[I(t.node.type),t.node.type]}))});const c=M(f);for(const t of Object.keys(a.categories??{})){const i=c.filter(r=>r.cat===t);i.length!==0&&e.push({title:H(a,t),tiles:i.map(u)})}return e},[o,l,p,f,a]),b=e=>{const n=e.indexOf(":"),c=e.slice(0,n),t=e.slice(n+1);if(c==="section")return{kind:"section",type:t};if(c==="block")return{kind:"block",type:t};if(c==="template"){const i=p.find(r=>r.id===t);return i?{kind:"template",template:i}:null}return null};return m(T,{children:[s(_,{icon:s(F,{size:15}),title:"Add",context:l?"Blocks for this place":"Sections and blocks",actions:s(z,{label:"Done",description:"Close Add and go back",onClick:A}),onHide:v}),m("div",{className:"sf-addside sf-scroll",children:[s(D,{groups:N,session:$,itemFor:e=>w(b(e)??{kind:"section",type:e}),onInsert:e=>{const n=b(e);n&&x(n)},at:k,hint:l?"Drag into the page, or click to add.":"Drag onto the page, or click to add.",searchLabel:l?"Search blocks":"Search sections",readOnly:C}),d&&!l?m("div",{className:"sf-addside-sitewide",children:[s("span",{className:"sf-addside-sitewide-glyph","aria-hidden":"true",children:s(y,{type:"chat",size:16})}),m("button",{type:"button",className:"sf-addside-sitewide-name",onClick:d.onOpenChat,children:["Live chat",s("span",{className:"sf-addside-sitewide-desc",children:"A chat bubble on every page"})]}),s(G,{checked:d.chatEnabled,onChange:d.onToggleChat,ariaLabel:"Show the chat bubble on the whole site"})]}):null]})]})}export{X as blockKey,W as default,V as sectionKey,Z as templateKey};

package/dist/components/AnimatedStat.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    target: string;
+    label: string;
+}
+export default function AnimatedStat({ target, label }: Props): import("react").JSX.Element;
+export {};

package/dist/components/AnimatedStat.js

@@ -0,0 +1 @@
+"use client";import{jsx as n,jsxs as l}from"react/jsx-runtime";import{useCountUp as o}from"./useCountUp.js";function d({target:t,label:a}){const e=t.match(/^(\d+)(.*)$/),s=e?parseInt(e[1],10):0,i=e?e[2]:"",{ref:m,value:r}=o(s),c=e?r+i:t;return l("div",{ref:m,className:"min-w-0",children:[n("div",{className:"font-heading2 text-[length:var(--size-headingMedium,40px)] font-medium leading-none tracking-[-0.02em] tabular-nums","aria-label":t,children:c}),n("div",{className:"mt-1 font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.2em] text-fg-dim",children:a})]})}export{d as default};

package/dist/components/ApplyCornersToSiblings.d.ts

@@ -0,0 +1,9 @@
+import { type ApplyCornersPlan } from "../lib/puck/apply-card-corners.js";
+export declare const APPLY_CORNERS_DONE_MS = 2200;
+export declare const APPLY_CORNERS_LABEL = "Apply to all cards";
+export declare function ApplyCornersButton({ plan, doneCount, onPress, }: {
+    plan: ApplyCornersPlan;
+    doneCount: number | null;
+    onPress: () => void;
+}): import("react").JSX.Element;
+export default function ApplyCornersToSiblings(): import("react").JSX.Element;

package/dist/components/ApplyCornersToSiblings.js

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

package/dist/components/Banner.d.ts

@@ -0,0 +1,12 @@
+interface BannerProps {
+    eyebrow?: string;
+    title?: string;
+    body?: string;
+    ctaText?: string;
+    ctaHref?: string;
+    imageSrc: string;
+    overlay?: number;
+    contained: boolean;
+}
+export default function Banner({ eyebrow, title, body, ctaText, ctaHref, imageSrc, contained, overlay }: BannerProps): import("react").JSX.Element;
+export {};

package/dist/components/Banner.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import h from"./BlockFrame.js";import f from"./Btn.js";import{media as v}from"../lib/media.js";import g from"./SectionEyebrow.js";import{renderGold as t,renderHeadline as u,splitParagraphs as N}from"./goldPhrases.js";function b({eyebrow:i,title:s,body:l,ctaText:n,ctaHref:d,imageSrc:a,contained:m,overlay:o=60}){const c=Math.min(Math.max(o,0),100)/100;return e(h,{contained:m,className:"py-6",children:r("div",{className:"sf-card relative overflow-hidden border border-line bg-surface px-10 py-16 max-[800px]:px-6 max-[800px]:py-10",children:[a&&r("div",{className:"absolute inset-0","aria-hidden":!0,children:[e("img",{src:v(a),alt:"",className:"h-full w-full object-cover"}),e("div",{className:"absolute inset-0",style:{background:`rgba(0,0,0,${c})`}})]}),r("div",{className:"relative z-[1] flex max-w-[680px] flex-col gap-5",style:a?{color:"var(--overlay-fg)"}:void 0,children:[i&&e(g,{text:i}),s&&e("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium leading-[1.05] tracking-[-0.03em] max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:u(s,!1)}),l&&N(l).map((p,x)=>e("p",{className:"text-[length:var(--size-body,16px)] leading-[1.6] opacity-85",children:t(p)},x)),n&&e("div",{className:"mt-2 self-start",children:e(f,{href:d||"#",variant:"primary",children:t(n)})})]})]})})}export{b as default};

package/dist/components/BlockFrame.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties, ReactNode } from "react";
+interface BlockFrameProps {
+    contained: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+export declare const FRAME_BASE = "mx-auto w-full max-w-[var(--sf-site-width,1600px)] px-[var(--sf-site-gutter,40px)]";
+export declare const FRAME_GUTTER = "max-[960px]:px-[min(24px,var(--sf-site-gutter,40px))]";
+export declare const FRAME = "mx-auto w-full max-w-[var(--sf-site-width,1600px)] px-[var(--sf-site-gutter,40px)] max-[960px]:px-[min(24px,var(--sf-site-gutter,40px))]";
+export declare const PRE_FRAME_BASE = "mx-auto w-full max-w-[1280px] px-[60px]";
+export declare const PRE_FRAME_GUTTER = "max-[960px]:px-6";
+export declare const PRE_FRAME = "mx-auto w-full max-w-[1280px] px-[60px] max-[960px]:px-6";
+export default function BlockFrame({ contained, className, style, children }: BlockFrameProps): import("react").JSX.Element;
+export {};

package/dist/components/BlockFrame.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import p from"./SiteGutterFrame.js";const s="mx-auto w-full max-w-[var(--sf-site-width,1600px)] px-[var(--sf-site-gutter,40px)]",a="max-[960px]:px-[min(24px,var(--sf-site-gutter,40px))]",l=`${s} ${a}`,m="mx-auto w-full max-w-[1280px] px-[60px]",n="max-[960px]:px-6",u=`${m} ${n}`;function E({contained:x,className:t="",style:r,children:o}){return e(p,{contained:x,framedClass:`${l} ${t}`,fillClass:`w-full ${t}`,style:r,children:o})}export{l as FRAME,s as FRAME_BASE,a as FRAME_GUTTER,u as PRE_FRAME,m as PRE_FRAME_BASE,n as PRE_FRAME_GUTTER,E as default};

package/dist/components/BlockGapField.d.ts

@@ -0,0 +1,5 @@
+export default function BlockGapField({ value, onChange, showHint, }: {
+    value: number | null;
+    onChange: (v: number | null) => void;
+    showHint?: boolean;
+}): import("react").JSX.Element;

package/dist/components/BlockGapField.js

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

package/dist/components/BlogPostSource.d.ts

@@ -0,0 +1,14 @@
+export interface BlogPostSourceValue {
+    slug: string;
+    image: string;
+    title: string;
+    dek: string;
+    date: string;
+    href: string;
+}
+interface Props {
+    value?: BlogPostSourceValue | null;
+    onChange: (value: BlogPostSourceValue | null) => void;
+}
+export default function BlogPostSource({ value, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/components/BlogPostSource.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as u,jsxs as c}from"react/jsx-runtime";import{useContext as B}from"react";import{SettingsField as g}from"efficient-easel/panel";import{FieldSelect as d}from"efficient-easel/fields";import{BlogPostIcon as f}from"efficient-easel/icons";import{StorefrontDocumentContext as x}from"./StorefrontDocumentContext.js";import{loadStorefrontBlogPosts as N}from"./useStorefrontBlogPosts.js";import{useSnapshotSource as L}from"./useSnapshotSource.js";import P from"./SourceStatus.js";function T(o){if(!o)return"";const t=new Date(o);return Number.isNaN(t.getTime())?"":t.toLocaleDateString("en-US",{year:"numeric",month:"short",day:"2-digit"})}function m(o){return{slug:o.slug,image:o.coverImage,title:o.title,dek:o.excerpt,date:T(o.publishedAt),href:o.href}}function C({value:o,onChange:t}){const r=B(x);return r&&!r.capabilities.hasBlog?o?.slug?e(D,{value:o,onChange:t}):e(u,{}):e(F,{value:o,onChange:t})}function D({value:o,onChange:t}){return c("div",{children:[e(g,{label:"Blog post source",icon:e(f,{}),children:e(d,{value:o.slug,ariaLabel:"Blog post source",onChange:r=>r?void 0:t(null),options:[{label:"None (manual)",value:""},{label:o.title||o.slug,value:o.slug}]})}),e("p",{className:"sf-blogsource-hint",style:{marginTop:7},children:"Linked to a blog post. This editor has no blog to pick another from; choose \u201CNone (manual)\u201D to author the section yourself."})]})}function F({value:o,onChange:t}){const{rows:r,loading:h,refreshing:l,errored:a,refresh:p}=L({load:N,resolve:(s,n)=>s.find(i=>i.slug===n.slug),snapshot:m,value:o,onChange:t}),b=s=>{if(!s){t(null);return}const n=(r??[]).find(i=>i.slug===s);n&&t(m(n))},S=o?.slug&&!(r??[]).some(s=>s.slug===o.slug),k=a?"error":l?"loading":"idle",y=a?"Couldn\u2019t reach Storefront \u2192 Blog.":l?"Syncing from Storefront \u2192 Blog\u2026":`Linked to \u201C${o?.title||o?.slug||""}\u201D`;return c("div",{children:[e(g,{label:"Blog post source",icon:e(f,{}),children:e(d,{value:o?.slug??"",ariaLabel:"Blog post source",onChange:b,readOnly:h,options:[{label:"None (manual)",value:""},...S?[{label:`${o.title||o.slug} (unavailable)`,value:o.slug}]:[],...(r??[]).map(s=>({label:s.title,value:s.slug}))]})}),o?.slug?e(P,{status:k,statusText:y,onRefresh:p,busy:l,hint:e(u,{children:"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."})}):e("p",{className:"sf-blogsource-hint",style:{marginTop:7},children:"Pick a post from Storefront \u2192 Blog to auto-fill this section, or keep \u201CNone (manual)\u201D to author it yourself below."})]})}export{C as default};

package/dist/components/BoxSurfaceContext.d.ts

@@ -0,0 +1,7 @@
+export interface BoxSurface {
+    dark: boolean;
+}
+export declare const BoxSurfaceContext: import("react").Context<BoxSurface | null>;
+export declare function BoxSurfaceProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/components/BoxSurfaceContext.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import{createContext as o}from"react";const t=o(null),n={dark:!0};function x({children:r}){return e(t.Provider,{value:n,children:r})}export{t as BoxSurfaceContext,x as BoxSurfaceProvider};

package/dist/components/BoxTabs.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export default function BoxTabs({ children, className, style, }: {
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react").JSX.Element;

package/dist/components/BoxTabs.js

@@ -0,0 +1 @@
+"use client";import{jsx as o,Fragment as g,jsxs as v}from"react/jsx-runtime";import{useEffect as c,useRef as A,useState as i}from"react";import j from"./Reel.js";function y({children:l,className:u,style:d}){const a=A(null),[r,b]=i([]),[f,m]=i(0);c(()=>{const t=a.current;if(!t)return;const s=()=>{const h=Array.from(t.querySelectorAll(":scope > *"));b(h.map((p,x)=>p.dataset.tabLabel?.trim()||`Tab ${x+1}`))};s();const e=new MutationObserver(s);return e.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tab-label"]}),()=>e.disconnect()},[]);const n=r.length?Math.min(f,r.length-1):0;return c(()=>{const t=a.current;t&&Array.from(t.children).forEach((s,e)=>{s.hidden=r.length>1&&e!==n})},[r,n]),v(g,{children:[r.length>1&&o(j,{slides:r.map(t=>({name:t,process:""})),active:n,shape:"tabs",tone:"surface",label:"Tabs",ref:t=>{t&&(t.onclick=s=>{const e=s.target?.closest?.("[data-idx]")?.getAttribute("data-idx");e!=null&&m(Number(e))})}}),o("div",{ref:a,"data-box-tabs":!0,className:u,style:d,children:l})]})}export{y as default};

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,10 @@
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbProps {
+    items?: BreadcrumbItem[];
+    meta?: string;
+    editing?: boolean;
+}
+export default function Breadcrumb({ items, meta, editing }: BreadcrumbProps): import("react").JSX.Element | null;