efficient-web-builder 0.10.0 → 2.0.0

package/README.md

@@ -1,277 +1,124 @@
 # 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 screen rule
+(`scripts/test-screen-in-easel.mjs`, `doc/adr/0004`), 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 @@
+export { default } from "efficient-easel/screen/components/AddBlockRow";

package/dist/components/AddBlockRow.js

@@ -0,0 +1 @@
+"use client";import{default as f}from"efficient-easel/screen/components/AddBlockRow";export{f as default};

package/dist/components/AddChildRow.d.ts

@@ -0,0 +1 @@
+export { default } from "efficient-easel/screen/components/AddChildRow";

package/dist/components/AddChildRow.js

@@ -0,0 +1 @@
+"use client";import{default as f}from"efficient-easel/screen/components/AddChildRow";export{f as default};

package/dist/components/AddSidePanel.d.ts

@@ -0,0 +1,2 @@
+export { blockKey, default, sectionKey, templateKey } from "efficient-easel/screen/components/AddSidePanel";
+export type { AddKey, AddSidePanelProps } from "efficient-easel/screen/components/AddSidePanel";

package/dist/components/AddSidePanel.js

@@ -0,0 +1 @@
+"use client";import{blockKey as l,default as o,sectionKey as c,templateKey as y}from"efficient-easel/screen/components/AddSidePanel";export{l as blockKey,o as default,c as sectionKey,y 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 a}from"react/jsx-runtime";import{SettingsDefaultReset as s,SettingsField as r}from"efficient-easel/panel";import{AlignSeparateIcon as c}from"efficient-easel/icons";import{CONTAINER_GAP_BUILT_IN as d,SITE_BLOCK_GAP as t}from"../lib/content/container-gap.js";import{Slider as p}from"../lib/puck/controls.js";const m="The space between the blocks inside a row, a grid or a box. Default means each one keeps the spacing it already has.",o="Block gap",f=d.Grid;function u({value:n,onChange:i,showHint:l=!0}){const e=n===null;return a(r,{label:o,labelId:"sf-block-gap",icon:a(c,{}),value:e?void 0:`${n}px`,changed:!e,action:a(s,{label:o,changed:!e,detail:"each block's own spacing",onReset:()=>i(null)}),hint:l?m:void 0,children:a(p,{min:t.min,max:t.max,step:t.step,value:e?f:n,readout:!1,ariaLabel:o,onChange:i})})}export{u 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 t,Fragment as l,jsxs as B}from"react/jsx-runtime";import{useContext as y}from"react";import{SettingsField as c}from"efficient-easel/panel";import{FieldSelect as d}from"efficient-easel/fields";import{BlogPostIcon as g}from"efficient-easel/icons";import{StorefrontDocumentContext as x}from"./StorefrontDocumentContext.js";import{loadStorefrontBlogPosts as L}from"./useStorefrontBlogPosts.js";import{useSnapshotSource as N}from"./useSnapshotSource.js";import P from"./SourceStatus.js";function C(o){if(!o)return"";const e=new Date(o);return Number.isNaN(e.getTime())?"":e.toLocaleDateString("en-US",{year:"numeric",month:"short",day:"2-digit"})}function f(o){return{slug:o.slug,image:o.coverImage,title:o.title,dek:o.excerpt,date:C(o.publishedAt),href:o.href}}function D({value:o,onChange:e}){const r=y(x);return r&&!r.capabilities.hasBlog?o?.slug?t(F,{value:o,onChange:e}):t(l,{}):t(T,{value:o,onChange:e})}function F({value:o,onChange:e}){return t("div",{children:t(c,{label:"Blog post source",icon:t(g,{}),hint:t(l,{children:"Linked to a blog post. This editor has no blog to pick another from; choose \u201CNone (manual)\u201D to author the section yourself."}),children:t(d,{value:o.slug,ariaLabel:"Blog post source",onChange:r=>r?void 0:e(null),options:[{label:"None (manual)",value:""},{label:o.title||o.slug,value:o.slug}]})})})}function T({value:o,onChange:e}){const{rows:r,loading:h,refreshing:i,errored:u,refresh:m}=N({load:L,resolve:(n,s)=>n.find(a=>a.slug===s.slug),snapshot:f,value:o,onChange:e}),p=n=>{if(!n){e(null);return}const s=(r??[]).find(a=>a.slug===n);s&&e(f(s))},b=o?.slug&&!(r??[]).some(n=>n.slug===o.slug),S=u?"error":i?"loading":"idle",k=u?"Couldn\u2019t reach Storefront \u2192 Blog.":i?"Syncing from Storefront \u2192 Blog\u2026":`Linked to \u201C${o?.title||o?.slug||""}\u201D`;return B("div",{children:[t(c,{label:"Blog post source",icon:t(g,{}),hint:o?.slug?void 0:t(l,{children:"Pick a post from Storefront \u2192 Blog to auto-fill this section, or keep \u201CNone (manual)\u201D to author it yourself below."}),children:t(d,{value:o?.slug??"",ariaLabel:"Blog post source",onChange:p,readOnly:h,options:[{label:"None (manual)",value:""},...b?[{label:`${o.title||o.slug} (unavailable)`,value:o.slug}]:[],...(r??[]).map(n=>({label:n.title,value:n.slug}))]})}),o?.slug?t(P,{status:S,statusText:k,onRefresh:m,busy:i,hint:t(l,{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."})}):null]})}export{D 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;

package/dist/components/Breadcrumb.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as s,Fragment as c}from"react/jsx-runtime";import{Fragment as f}from"react";import{SiteLink as x}from"../lib/site-runtime.js";import{renderChrome as m,renderGold as d}from"./goldPhrases.js";function h({items:p,meta:n,editing:o=!1}){const l=(p??[]).filter(e=>e?.label?.trim()),t=l.length>0?l:o?[{label:"Breadcrumb"}]:[];return t.length===0&&!n?null:s("nav",{className:"flex items-center gap-4 border-b border-line px-[var(--sf-site-gutter,40px)] py-6 font-mono text-[length:var(--size-label,13px)] uppercase tracking-[0.2em] text-fg-dim max-[720px]:px-[min(20px,var(--sf-site-gutter,40px))] max-[720px]:py-4",children:[t.map((e,a)=>{const i=a===t.length-1;return s(f,{children:[a>0&&r("span",{className:"opacity-40",children:"/"}),e.href&&!i?r(x,{href:e.href,className:"hover:text-fg",children:m(e.label)}):r("span",{className:i?"text-fg":void 0,children:m(e.label)})]},a)}),n&&s(c,{children:[r("span",{className:"opacity-40",children:"\xB7"}),r("span",{children:d(n)})]})]})}export{h as default};

package/dist/components/Btn.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from "react";
+type Variant = "primary" | "ghost";
+interface CommonProps {
+    variant?: Variant;
+    arrow?: ReactNode | null;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+interface LinkProps extends CommonProps {
+    href: string;
+    newTab?: boolean;
+    type?: never;
+    onClick?: never;
+}
+interface ButtonProps extends CommonProps, Omit<ComponentPropsWithoutRef<"button">, keyof CommonProps> {
+    href?: undefined;
+    newTab?: undefined;
+}
+type Props = LinkProps | ButtonProps;
+export default function Btn(props: Props): import("react").JSX.Element;
+export {};

package/dist/components/Btn.js

@@ -0,0 +1 @@
+import{jsx as r,Fragment as h,jsxs as u}from"react/jsx-runtime";import{SiteLink as f}from"../lib/site-runtime.js";const g="sf-button group inline-flex items-center justify-center gap-2.5 border px-[22px] py-4 font-mono text-[length:var(--size-label,14px)] uppercase tracking-[0.2em] transition-colors",o={primary:"border-btn bg-btn text-btn-ink hover:border-btn-2 hover:bg-btn-2",ghost:"border-current bg-transparent hover:bg-white/10"};function x(i){const{variant:l="primary",arrow:e,className:c,style:t,children:p,href:n,newTab:b,...m}=i,s=`${g} ${o[l]??o.primary} ${c??""}`,a=u(h,{children:[p,e!==null&&r("span",{"aria-hidden":!0,className:"transition-transform group-hover:translate-x-[3px]",children:e??"\u2192"})]});return n?r(f,{href:n,className:s,style:t,...b?{target:"_blank",rel:"noopener noreferrer"}:{},children:a}):r("button",{type:"button",className:s,style:t,...m,children:a})}export{x as default};

package/dist/components/ButtonBlock.d.ts

@@ -0,0 +1,13 @@
+type Variant = "primary" | "ghost";
+type Align = "left" | "center" | "right";
+export declare const BUTTON_BLOCK_CLASS = "sf-button-block";
+interface ButtonBlockProps {
+    label: string;
+    href: string;
+    variant: Variant;
+    align: Align;
+    contained: boolean;
+    arrow?: boolean;
+}
+export default function ButtonBlock({ label, href, variant, align, contained, arrow }: ButtonBlockProps): import("react").JSX.Element;
+export {};

package/dist/components/ButtonBlock.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{buttonArrowShown as f}from"../lib/content/button-arrow.js";import l from"./BlockFrame.js";import a from"./Btn.js";import{renderGold as m}from"./goldPhrases.js";const u="sf-button-block",d={left:"justify-start",center:"justify-center",right:"justify-end"};function p({label:t,href:o,variant:n,align:e,contained:i,arrow:s}){const c=f(s)?{}:{arrow:null};return r(l,{contained:i,className:`${u} py-4`,children:r("div",{className:`flex ${d[e]}`,children:r(a,{href:o||"#",variant:n,...c,children:m(t)})})})}export{u as BUTTON_BLOCK_CLASS,p as default};