efficient-web-builder 40.1.0 → 41.0.0

package/CHANGELOG.md

@@ -1,5 +1,114 @@
 # Changelog
 
+## 41.0.0 - 2026-10-27
+
+**MAJOR for hosts: the peers narrow.** `efficient-easel` is now `^21.1.0` (was `^20.2.0`) and `efficient-shell` is now `^10.0.0` (was `^9.1.0`): a host moves easel and shell with this release (easel 21 itself needs shell 10), and the builder reads easel 21.1's names. Beyond that the name "Puck" is being retired (Victor Mau, 2026-10-26; phase 2 of 4, expand): the new names ship BESIDE the old ones, and every deprecated `lib/puck/…` path and name keeps working in 41. 42.0.0 removes them (phase 4); nothing saved changes.
+
+### Added
+
+- **`lib/document/…` is the folder** the builder's modules are in (`src/lib/puck` moved to `src/lib/document`). A host imports `efficient-web-builder/<side>/lib/document/<x>`.
+- **Easel's new names are what the builder reads and draws with** (the `efficient-easel` peer and devDependency are `^21.1.0`): a block's `render` reads `props.editor`; the canvas attributes are `data-easel-block`, `data-easel-entry`, `data-easel-dnd` (and the part anchors and every selector in `storefront-editor.css` use them); imports from easel are `screen/lib/document/*`; the inspector's mode is `{ kind: "selection" }`.
+- **New exported names:** `BLOCK_ATTR` (`lib/document/part-anchors`), `SELECTION_MODE` (`components/SectionEditor`), `buildBlockCategories` (`lib/document/section-catalog`), `LEGACY_OVERLAY_PORTAL_ATTR`, and the source rules `documentSurfaces` / `DocumentMount` / `DocumentSurfacesOptions` (`lib/source-rules/document-surfaces`) and `editorDragOff` / `EditorDragOffOptions` (`lib/source-rules/editor-drag-off`).
+- **`markOverlayPortal` sets `data-easel-overlay-portal`** as well as `data-puck-overlay-portal`; the builder's own selectors (`storefront-editor.css`, `PreviewThemeFrame`) read the new one.
+
+### Deprecated (removed in 42.0.0)
+
+- **Every published path under `lib/puck/…`**, on all three sides: the build writes a forwarder at each (`export * from "../document/<x>.js"`, with the default export where the module has one), and a copy of each JSON file. `scripts/verify-dist.mjs` §8 holds them; `scripts/verify-published-entries.mjs` holds that nothing 40.1.1 published is gone. The media manifest is in the source at BOTH `src/lib/puck/media-manifest.json` and `src/lib/document/media-manifest.json`, byte for byte (efficient-backend's `vendor_media_manifest.py` fetches the old path by release tag), and is published at both.
+- **`PUCK_MODE`** (`components/SectionEditor`; the same object as `SELECTION_MODE`) and the inspector mode kind `"puck"` (still accepted; read with `isSelectionMode`).
+- **`PUCK_COMPONENT_ATTR`** (`lib/document/part-anchors`, still `"data-puck-component"`; use `BLOCK_ATTR`) and the `data-puck-overlay-portal` mark (still set beside the new one).
+- **`buildPuckCategories`**, **`puckDocumentSurfaces`** / **`PuckDocumentMount`** / **`PuckDocumentSurfacesOptions`** and **`editorPuckDragOff`** / **`EditorPuckDragOffOptions`** (same functions, old names, in `lib/source-rules/puck-document-surfaces` and `lib/source-rules/editor-puck-drag-off`).
+- **The block prop `puck`** is still handed by easel beside `editor`; a block here reads `editor`. Hosts' own blocks should move to `editor` before easel 22.
+
+### Guards
+
+- `scripts/test-document-names.ts` (red first): the source folder, no import through `lib/puck` or easel's `screen/lib/puck`, no block reading `puck`, `data-puck-*` named in two legacy places only, the new exported names, the two manifests identical. `scripts/test-document-surfaces.ts` and `scripts/test-editor-drag-off.ts` are the renamed `test-puck-document-surfaces` and `test-editor-puck-drag-off`, running the new rules.
+- `scripts/verify-dist.mjs` §8: an old `lib/puck` path for every file under `lib/document`, each a forwarder (a copy for data), defaults forwarded, the manifest at both paths.
+
+### Added (one engine turns an old section into a Box)
+
+- **`lib/sections/section-to-box`** (pure, render side): ONE row per old section type declares where each old prop goes — to the Box, to a real block (Text, ButtonBlock, ImageBlock, a Box per list item), to the "core" (the old node kept as one block in the Box, drawn with no head of its own), or to `drop` with its reason. `convertSection` reads the row and nothing else; a prop the row does not name comes back in `dropped`. `headParts(type)` reads the head from `SPLITTABLE_SECTIONS`. `registerSectionToBox` and `registerBoxNativeSections` let a host add its own. Plan: `_desk/plans/2026-10-23-section-parts-plan.md` §3.1 (Lewis 2026-10-14 and 2026-10-23).
+- **The same node on the page and in the editor.** The published page converts at render (`lib/puck/page-render`, `convertSectionsInPage`), and the editor converts as a page opens (`components/useSectionToBoxPass`, called from the website's document pass). Both build each node from the row alone, with ids derived from the old node's id, and add no block defaults (the renderer adds none), so the node the editor stores is the node the page drew.
+- **Every row starts OFF.** A row is registered with `on: false`, so nothing converts and no page changes. A row is switched on in its own pull request after its read-only dry run and Lewis's typed OK (plan §7); rollback is the same line set back.
+
+- **The dry run** (`lib/sections/section-dry-run`, pure): `dryRunSections(pages, { types, draw })` converts on paper every top-level node of the asked types, with its row ON or OFF, and reports per node where every old key went, what was dropped and why, and — when a drawer is handed in — the markup before and after. A type with no row is reported, never guessed at. It opens no database and changes nothing it is handed. `dryRunMarkdown` writes the table a person reads. The builder's CLI, `scripts/dry-run-section-to-box.tsx --in layouts.json --out dir [--types A,B]`, draws the builder's own sections with its render config and writes `report.md`, `report.json` and one `before` / `after` HTML file per node for the pixel step (plan §7).
+
+- **Batch 1 rows, OFF** (plan §6 batch 1, group 3 GO by Lewis 2026-10-23): Editorial Text (`Prose`), CTA Heading (`TitleWithButtons`), Section Header (`SectionHeader`), Lead Text (`ParagraphsA`) and `Banner` each have a row in ONE file, `lib/puck/blocks/general/section-to-box-rows.ts`, registered by `registerGeneralSectionRows()`, which the two builders of the general set call (`generalRenderMetas`, `assembleGeneralBlocks`), so every registry built from it knows them — a call, not work at import (`lib/source-rules/import-time-work`). `generalBlocks` is now `assembleGeneralBlocks()` (the same blocks). Each row draws the old look with the Box's and the Text block's own settings, in the Box-in-Box trees of the design page `~/GitHub/mockups/box-text-gaps-redo-2026-10-26/` (redo card `_desk/plans/2026-10-26-batch1-rows-redo-card.md`, GG 2026-10-26): NO heading, button label or small text pins a size, a phone size or a case — Section Header and Banner headings follow Heading 2, CTA Heading Heading 1, Editorial Text Heading 3, and every small text (eyebrow, number, stat, attribution) Body 5, the nearest Body style by size. Line heights, letter spacing, weight, tone and measure stay measured; Banner's heading keeps `case: "none"` (it drew as typed). Buttons store the keys of web-builder #315 (`buttonFillOpacity`, `buttonBorder`, `buttonPadding<Side>`, `iconPosition: "end"`) and the no-picture card Box the `shadow` of #289; neither is merged, so those keys draw nothing yet. Every old key is carried or dropped with a reason, and a look the blocks cannot draw is named in the row as a look gap. Nothing switches on: that is its own pull request after the dry run and Lewis's OK.
+- **The engine gains what the rows need**: a `group` part (one Box of parts read off the same node: a heading cluster, a card, a button stack; an empty group draws no Box unless `keepEmpty`), a `flat` list (each item's parts straight into the Box), a text or button part's `style` (the row's pinned part style, under the merchant's own and over the role's), a button's `variant` (fixed or read off the item), a Box entry `[old, box, value]` that works the Box's value out of the old node, `boxProps` as a function of the old node, a part's `when` (drawn only when the old node says so), a group's `props` worked out from the old node and the conversion's site facts, and a row's `site(node, ctx)`: the SITE writes the node needs (`heading-case-upper`, `add-theme-preset`), which the engine COLLECTS into `siteWrites` and the page-render and editor paths never execute.
+- **The dry run decides the site writes** from each site's facts (`--sites`, a read-only read of each site's theme row; `siteFactsFromRead`): a heading case write only for a site with its own theme row, no saved `text_styles` and no chosen heading case; nothing for a soft-deleted site or one without its own theme row; nothing decided for a site with no facts. The report lists the facts and one line per write per site; `site-writes.json` (`siteWritesFile`) holds only the writes to send, each added preset with its index, and is the only input of the backend's one-off command.
+
+### Guards
+
+- `scripts/test-section-to-box-batch1.tsx` (red first: 37 of 42 failed before the engine parts and the rows; the 10-26 redo: 23 of 65 failed on the old rows, and 20 mutations, one per rule, each turn it red): §0 the engine parts · §1 each row is registered and OFF, and answers every key of a fully filled stored node and of the type's defaultProps · §2 drawn with the builder's render config, the Box shows every word the old node showed, in order, under the same heading tags; a hidden node stays hidden · §3 each Text part's style equals the value measured off the old component · §4 no heading, button label or small text pins a size or a case · §5 the Box trees are the design page's · §6 site writes are declared per node and never executed by `convertSectionsInPage` / `sectionToBoxEdits` · §7 the dry run's per-site rule and `site-writes.json`.
+- `scripts/test-section-dry-run.tsx` (red first: the module did not exist): §1 every node of the asked types, row OFF; a type with no row is reported · §2 frozen pages come back untouched · §3 carried / dropped / before / after per node · §4 totals per type and the markdown.
+- `scripts/test-section-to-box.tsx` (red first: §4 failed until both callers existed; mutation: dropping the "not in the row" answer turns §1 red): §1 every old key carried or named; §2 the switch; §3 the head map; §4 both callers; §5 every one of this package's sections is Box-native, converted, or in `scripts/fixtures/section-to-box.baseline.json` (40 types), and the baseline holds no type that left it.
+
+### Added (content sections in a Box, plan 2026-10-23 B3)
+
+- **One declared list of the content sections that may sit in a Box** (`lib/puck/nestable-content-sections`, format side). It replaces the private `NESTABLE_CONTENT_SECTIONS` in `lib/puck/passes/registry-context`, which now reads it. It holds `Form` and `Stats`, as before; each other section joins in its own conversion batch. A host adds its own with `registerNestableContentSections([...])` before its config is built, as it adds slot specs with `registerSlotSectionSpecs`. The Box's Add menu (`CONTAINER_BLOCK_CHOICES`) stays a separate, curated list: a section a Box may hold is not always one the menu offers (owner 2026-09-07). Nothing stored or drawn changes.
+
+### Guards
+
+- `scripts/test-content-sections-in-a-box.tsx` (red first: the module did not exist, then §3 failed while `registry-context` still held its own list): §1 the list is Form and Stats; §2 the drop rule reads it; §3 a host type registered through the function is taken by a Grid cell and a Box; §4 the Box menu offers no content section its slot refuses; §5 every builder-owned splittable section that the Add menu puts in a Box stores `headPlacement: "own-box"` and draws none of its head words through the existing `omitHead` path (inline, the same words draw).
+
+### Removed (one phone key; three-views plan 2026-10-23)
+
+- **BREAKING: `lib/puck/phone-override` no longer exports `phoneKey`.** The key a view's value is stored under is spelled once, in efficient-easel's view tiers: import `phoneKey` (and `tabletKey`) from `efficient-easel/draw`. Same result (`paddingTop` → `paddingTopPhone`), so no stored key changes. A host that imported it from `efficient-web-builder/format/lib/puck/phone-override` (efficient-storefront `scripts/gen-media-manifest.ts`) moves to easel's in its bump.
+- `scripts/test-one-phone-key.ts` (red first: 5 of 1675 checks): src/ defines no `phoneKey` / `tabletKey` of its own, and nothing imports `phoneKey` from phone-override.
+
+### Fixed (phone rows in the Phone view only; issue list C12, three-views plan)
+
+- **A phone setting is drawn in the Phone view only, on a row named like any other** (harness UI-35; Lewis, again on 2026-10-26: the Box panel showed `Columns on phone` in the Desktop view). Box `phoneRow` and Grid `mobileColumns` are a `Columns` row in the Phone view; Grid's desktop `columns` row is drawn in Desktop and Tablet, so each view has ONE `Columns` row. Divider `hideOnMobile` is a `Hide` row in the Phone view. Only the paint is gated (`deviceField`): every key stays declared and stored values keep their keys, so no stored page changes.
+- `lib/editor-words-catalogue.ts` loses "Columns on phone" and "Hide on phone" and gains "Hide"; a host that translated the old two translates the new one.
+- `scripts/test-phone-rows-in-phone-view.tsx` (red first: 10 of 541 checks), with a ratchet: no general block row is named "on phone" or "(phone)".
+
+### Changed (Heading 2 default size)
+
+- **Heading 2 defaults to 64px on desktop; the phone default stays 36px** (Lewis, through GG, 2026-10-26; it was 56 / 36). The default is the level-2 row of `SIZE` in `components/Heading.tsx`, the one place it is written. The Heading block at level 2 and a Text block that follows Heading 2 both draw it. Only a site that states NO Heading 2 size of its own sees a change: a stated size still wins, and no stored value moves. The phone value is still set only in the phone view.
+- `scripts/test-heading2-default-size.tsx` (red first: the desktop default read 56px). `scripts/test-style-size-reaches-the-page.tsx` §2c now pins 64px.
+
+### Removed (dead code; duplicate re-check 2026-10-26, row X07)
+
+- **30 exports that nothing read are gone.** Each was named only where it was defined, in this repository, efficient-storefront-blocks, efficient-storefront, efficient-admin-portal and efficient-easel (`origin/main`, 2026-10-26): `WeightGlyph`, `CaseGlyph` (`components/PartGlyphs`); `isHeadingRole` (`lib/fonts`); `HERO_PHONE_GROUP_LABEL` (`lib/hero-phone-stack`); `SHARED_SECTION_PHRASES` (`lib/shared-sections-layer`); `normaliseCopyAlignment` (`lib/hero-group-placement`); `HERO_ARROWS_PLACEMENT_LABELS` (`lib/hero-arrows`); `NEUTRAL_TYPE_GROUP`, `SIZE_STEP_LABELS`, `TEXT_SIZE_STEP` (`lib/theme`); `REEL_PLACEMENT_LABELS` (`lib/reel`); `hasTextKinds` (`lib/sections/section-text-kinds`); `SPEC_REGION_PREFIX` (`lib/sections/spec-table-regions`); `hasOwnBorder` (`lib/content/borders`); `CART_DRAWER_PAGE_TITLE` (`lib/content/cart-drawer`); `DYNAMIC_PRODUCT_PROP` (`lib/content/product-page`); `parseCardImageBackground` (`lib/content/card-image-background`); `categoryIcon` (`lib/puck/add-palette`); `GRID_SPAN_FALLBACK`, `POSITION_CONTAINERS` (`lib/content/grid-span`); `SUBSCRIBE_POPUP_PAGE_TITLE` (`lib/content/subscribe`); `HERO_BLEED_MARGIN`, `HERO_BLEED_WIDTH`, `HERO_BLEED_MARGIN_CLASS`, `HERO_BLEED_WIDTH_CLASS` (`lib/content/page-width`; the two `_VAR` names stay, and the breakout's reasons now sit on them); `resetLocationsFocus` (`lib/puck/locations-focus`); `panelPartValue` (`lib/puck/part-text`); `DEFAULT_TRANSPARENT_TOP` (`lib/puck/header-ink`); `isDesignGroupHeader` (`lib/puck/controls`); `mediaFileName` (`lib/media`; the shell's `mediaFileName` is the one in use). Nothing on a page or in the editor changes.
+- **Two phrases leave the editor's words** (`lib/editor-words-catalogue.ts`, `pnpm run words`): "Overlay - CartDrawer" and "Pop up - SubscribePopup", which only the two page-title constants above said. A host's translation list may drop them.
+- `scripts/test-dead-exports-stay-gone.ts` (red first: 30 of 30).
+
+### Fixed (one box round words being typed)
+
+- **A run inside another prop's words is not a second part** (Lewis 2026-10-26: "why is there one more box, and why is it irregular"). Parts are found by exact text, and every exact hit is kept, so a Range grid title "The FusionForge® range" whose red run "FusionForge®" spells the eyebrow exactly got that run stamped as the EYEBROW: an overlay portal inside the title that drew a stepped 1px line while the title was typed, and opened the eyebrow on a click. `resolvePartStamps` now drops an exact hit that sits inside an element which is already an exact match of a different prop. A prop drawn inside another prop's element keeps its anchor when that element is only a "contains" match.
+- **No part line on words being typed, or inside them.** `PART_PICK_CSS` already took the selected-part hairline off `[data-es-typing]`; it now takes the overlay portal's hover and focus lines off the typed element and every anchor inside it, so easel's one box is the only box.
+- `scripts/test-part-run-inside-another-part.tsx` (red first: the run resolved to the eyebrow, and no rule removed the portal line while typing).
+
+### Changed (Order Table words)
+
+- **The Order Table's source row is "Order content", and its first answer is "Manual"** (were "Items from" and "Typed here"). This is the content-row ruling (Lewis, through GG, 2026-10-23; storefront doc/naming.md N10.1): a content-source row is "<thing> content" and its first answer is always "Manual". Labels only: the key `dataSource` and the stored `""` for Manual do not move, so no stored page changes. `blockSourceField` is unchanged: each caller still passes its own first answer. `lib/editor-words-catalogue.ts` loses "Items from" and "Typed here" and gains "Order content" and "Manual"; a host that translated the old two words translates the new two.
+- `scripts/test-block-sources.tsx` (red first): the drawn row says "Order content" and "Manual", not the old words; the key is still `dataSource` and the Manual answer still stores `""`.
+
+### Added (card template; plan 2026-10-23 B4)
+
+- **A data block draws every row from ONE card template** (Lewis 2026-10-23: no virtual parts, a Wix-style repeater). `lib/content/card-template` (format): the `template` slot (`cardTemplateSlot()`: Text, Image, Button, Box), the row fields each data block declares (`registerCardTemplates` for a host's blocks; the builder declares the Order Table's `label`, `meta`, `amount`), and the nearest template owner of a node (`cardTemplateOwner`). `components/CardRowContext` (render): `CardTemplateRows` draws the template once per row, each copy in `<div data-sf-repeat="<ownerId>:template" data-sf-repeat-index={i}>` inside `CardRowContext` (`{ row, index }`); `useCardRow` / `useCardRowField` read it. Child blocks keep their real ids in every copy. The two attribute names are `REPEAT_ATTRIBUTE` / `REPEAT_INDEX_ATTRIBUTE` from `efficient-easel/draw` (easel #349); the builder keeps no copy.
+- **An empty template draws what the block drew without one.** The block reads the slot's `blockCount` (efficient-easel 20 #352: `Template.blockCount ?? 0`), the same number on a published page and in the editor's canvas. The builder adds no editing bridge for it.
+- **The Order Table is the first data block.** It declares `template` in both halves (no `defaultProps` seed). With blocks in it, the item lines are replaced by one template copy per item: typed items, served rows (`dataRows`) and the editor's sample rows alike. Every stored node draws byte for byte what it drew on main c8ab0bcb (`scripts/fixtures/order-table-bytes.json`).
+- **Text, Image and Button get a "Shows" row** (`lib/puck/card-row-fields`): "Typed here" (the word "Items from" already uses for typed items) or one field of the nearest data block's row. Text shows it as its words, Image as its picture (and alt, when the field names one), Button as its words; a Button's "Link from" row picks its link. Text's row sits in its Text band; the Button's two sit in a Button band. The rows are drawn only inside a template (fact `outsideCardTemplate`, the shell's show-when rule). Outside a template a named field is ignored and the typed value draws.
+- **Canvas typing is off for words that show a row field** (`lib/puck/canvas-typing`).
+- **Layers draws the slot as a "Card template" rung** (`lib/puck/card-template-layers`, `WEBSITE_BLOCK_RULES.slotsOf`).
+
+### Guards
+
+- `scripts/test-card-template.tsx` (red first: the modules did not exist; then two mutations turned it red — the empty-template check removed fails §1 and §3b, the typing gate removed fails §6).
+
+## 40.1.1 - 2026-10-25
+
+**PATCH for hosts:** a published page draws less; no export or prop a host passes changes.
+
+### Fixed (a published page draws none of the builder's stand-in words)
+
+- **Locations: an emptied heading, kicker or hint publishes nothing.** A value the merchant cleared (stored `""`) published the section's defaults ("· Locations", "Gallery", "Hover to see in colour · click to jump"); only a value never stored still takes its default. A published section also leaves out the photo strip when no city has a photo, a city's map box when it has no coordinates (its "Get directions" link moves up into the card), and the OpenStreetMap credit when no city has a map. The editor keeps all three as its scaffold. "Get Directions" is now "Get directions".
+- **Image: no picture, nothing published.** The "Image — set a path" box is drawn in the editor only (it published on a venue website's home cover). The block takes `editing` from its render's `puck`.
+- **Cards: a card publishes its own words only.** A card with no title published "Card title", one with no body "A short line about this card."; both are now editor-only stand-ins, said through `say()`.
+- **PostCard: no cover, no cover box.** A post with no cover published an empty 16:10 well (a venue's day cards in the Events even grid); the editor's scaffold keeps it.
+- **The neutral site name is "Website"** (`NEUTRAL_SITE_NAME`, was "Storefront"): not every site sells.
+- Guards: `scripts/test-unfilled-publishes-nothing.tsx`. The neutral name moves the wordmark bytes recorded in `scripts/fixtures/logo-color-before.json` and `box-shapes-bytes.json`.
+
 ## 40.1.0 - 2026-10-25
 
 **MINOR for hosts:** three blocks gain an optional block source; nothing changes for a host that declares none.

package/README.md

@@ -22,7 +22,7 @@ What a host adds, it hands over on the editor's session
 
 | 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. |
+| block registry | `src/lib/document/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. |
@@ -85,7 +85,7 @@ Two checks hold the rule, both in CI and both without an allow-list:
 
 `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/`.
+Comments that name a file say `lib/document/controls`; read them from `src/`.
 
 ## How the storefront uses it
 
@@ -144,12 +144,12 @@ 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` |
+| `render` | what a published page draws from | `efficient-web-builder/render/lib/document/page-frame` |
+| `format` | pure data and rules, no React | `efficient-web-builder/format/lib/document/section-catalog` |
+| `editor` | the settings panel, the editor's registries and screen parts | `efficient-web-builder/editor/lib/document/controls` |
 
 ```ts
-import { PublishedPageFrame } from "efficient-web-builder/render/lib/puck/page-frame";
+import { PublishedPageFrame } from "efficient-web-builder/render/lib/document/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";
@@ -172,6 +172,27 @@ by the host's own Tailwind (its `@source` scans the shell's `dist/`). Then
 easel's sheets (`efficient-easel/screen.css`), then
 `components/storefront-editor.css`.
 
+### Deprecated names (until 42.0.0)
+
+The name "Puck" is being retired (41.0.0, phase 2 of 4). The new names are
+the ones to use; the old ones keep working until 42.0.0 removes them:
+
+| Old | New |
+|---|---|
+| `efficient-web-builder/<side>/lib/puck/<x>` (every file; a forwarder, a copy for JSON) | `efficient-web-builder/<side>/lib/document/<x>` |
+| `PUCK_MODE`, the inspector mode kind `"puck"` | `SELECTION_MODE` (`components/SectionEditor`), kind `"selection"`; read a mode with easel's `isSelectionMode` |
+| `PUCK_COMPONENT_ATTR` (`data-puck-component`) | `BLOCK_ATTR` (`data-easel-block`) |
+| `data-puck-overlay-portal` (still set beside the new one) | `data-easel-overlay-portal` |
+| `buildPuckCategories` | `buildBlockCategories` |
+| `puckDocumentSurfaces`, `PuckDocumentMount`, `PuckDocumentSurfacesOptions` | `documentSurfaces`, `DocumentMount`, `DocumentSurfacesOptions` (`lib/source-rules/document-surfaces`) |
+| `editorPuckDragOff`, `EditorPuckDragOffOptions` | `editorDragOff`, `EditorDragOffOptions` (`lib/source-rules/editor-drag-off`) |
+| a block's `props.puck` (easel still hands it) | `props.editor` |
+
+The media manifest is published at both `lib/puck/media-manifest.json` and
+`lib/document/media-manifest.json`, identical (the backend fetches the old path
+by release tag; the source holds both files and `scripts/test-document-names.ts`
+holds them equal).
+
 ### Releasing
 
 A merge is not a release. The pull request that wants hosts to see a change

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

@@ -1,4 +1,4 @@
-import { type ApplyCornersPlan } from "../lib/puck/apply-card-corners.js";
+import { type ApplyCornersPlan } from "../lib/document/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, }: {

package/dist/editor/components/ApplyCornersToSiblings.js

@@ -1 +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"efficient-easel/screen/lib/puck/use-section-ops";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};
+"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/document/apply-card-corners.js";import{useSectionOps as x}from"efficient-easel/screen/lib/document/use-section-ops";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

@@ -1 +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 n}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:o,onChange:l,showHint:s=!0}){const a=o===null;return t(c,{label:e(i),labelId:"sf-block-gap",icon:t(d,{}),value:a?e("Default"):`${o}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:n.min,max:n.max,step:n.step,value:a?_:o,readout:!1,ariaLabel:e(i),onChange:l})})}export{g as default};
+"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 n}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/document/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:o,onChange:l,showHint:s=!0}){const a=o===null;return t(c,{label:e(i),labelId:"sf-block-gap",icon:t(d,{}),value:a?e("Default"):`${o}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:n.min,max:n.max,step:n.step,value:a?_:o,readout:!1,ariaLabel:e(i),onChange:l})})}export{g as default};

package/dist/editor/components/CanvasPartsBridge.js

@@ -1 +1 @@
-"use client";import{jsx as a}from"react/jsx-runtime";import{useMemo as i,useRef as u}from"react";import{CanvasPartsContext as m}from"efficient-easel/easel";import{usePreviewParts as d}from"efficient-easel/draw/client";import{partOfBlockAt as l}from"../lib/puck/part-anchors.js";import{decodePartId as f,encodePartId as p}from"../../render/lib/puck/text-parts.js";function w({children:s}){const{selectedPartId:t,select:e}=d(),r=u(t);r.current=t;const c=i(()=>({partAt:l,selected:()=>r.current,select:o=>{if(o){e(o);return}const n=r.current?f(r.current)?.nodeId:null;n&&e(p(n,null))}}),[e]);return a(m.Provider,{value:c,children:s})}export{w as CanvasPartsBridge};
+"use client";import{jsx as a}from"react/jsx-runtime";import{useMemo as i,useRef as u}from"react";import{CanvasPartsContext as m}from"efficient-easel/easel";import{usePreviewParts as d}from"efficient-easel/draw/client";import{partOfBlockAt as l}from"../lib/document/part-anchors.js";import{decodePartId as f,encodePartId as p}from"../../render/lib/document/text-parts.js";function w({children:s}){const{selectedPartId:t,select:e}=d(),r=u(t);r.current=t;const c=i(()=>({partAt:l,selected:()=>r.current,select:o=>{if(o){e(o);return}const n=r.current?f(r.current)?.nodeId:null;n&&e(p(n,null))}}),[e]);return a(m.Provider,{value:c,children:s})}export{w as CanvasPartsBridge};

package/dist/editor/components/ChatSettingsPanel.js

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

package/dist/editor/components/CornersField.js

@@ -1 +1 @@
-"use client";import{jsx as e}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 t,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:o,onChange:r,showHint:a=!0}){const n=o===null;return e(d,{label:t(s),icon:e(u,{}),value:n?t("Default"):`${o}px`,changed:!n,action:e(l,{words:p()?.panel,label:t(s),changed:!n,detail:t("the built-in corners"),onReset:()=>r(null)}),hint:a?t(R):void 0,children:e(m,{min:i,max:c,step:1,value:o??i,readout:!1,ariaLabel:t(s),onChange:r})})}export{s as CORNERS_LABEL,f as default};
+"use client";import{jsx as e}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 t,editorEaselWords as p}from"../../format/lib/editor-words.js";import{Slider as m}from"../lib/document/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:o,onChange:r,showHint:a=!0}){const n=o===null;return e(d,{label:t(s),icon:e(u,{}),value:n?t("Default"):`${o}px`,changed:!n,action:e(l,{words:p()?.panel,label:t(s),changed:!n,detail:t("the built-in corners"),onReset:()=>r(null)}),hint:a?t(R):void 0,children:e(m,{min:i,max:c,step:1,value:o??i,readout:!1,ariaLabel:t(s),onChange:r})})}export{s as CORNERS_LABEL,f as default};

package/dist/editor/components/DuplicateToPageMenu.js

@@ -1 +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{useEaselSession as q}from"efficient-easel/screen/lib/session-context";import{say as n}from"../../format/lib/editor-words.js";import{cloneNodeWithFreshIds as G}from"efficient-easel/screen/lib/puck/section-doc";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(),[S,u]=s(!1),[d,b]=s(null),P=z(null),[p,j]=s(null),B=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]),F=()=>{if(c){r(!1);return}const e=P.current?.getBoundingClientRect();e&&j({top:e.bottom+6,right:Math.max(8,window.innerWidth-e.right)}),x(null),u(!1),B(),r(!0)},k=(y??[]).filter(e=>e.slug!==T),O=async e=>{if(d)return;b(e.slug);const w=G(N),R=o.documentHooks?.storedNode?.(w)??w,C=M(o).pages,E=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]:[],v=l.findIndex(_=>_?.type===J);l.splice(v===-1?l.length:v,0,R),await C.save(e.id,{layout:{root:{},zones:{},...f,content:l}},{version:m.version,clientId:""})});b(null),r(!1),I?.(E?n("Duplicated to “{name}”",{name:e.label}):n("Couldn’t duplicate the section — please retry"),E?"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:F,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")}),S?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:()=>{O(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};
+"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{useEaselSession as q}from"efficient-easel/screen/lib/session-context";import{say as n}from"../../format/lib/editor-words.js";import{cloneNodeWithFreshIds as G}from"efficient-easel/screen/lib/document/section-doc";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(),[S,u]=s(!1),[d,b]=s(null),P=z(null),[p,j]=s(null),B=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]),F=()=>{if(c){r(!1);return}const e=P.current?.getBoundingClientRect();e&&j({top:e.bottom+6,right:Math.max(8,window.innerWidth-e.right)}),x(null),u(!1),B(),r(!0)},k=(y??[]).filter(e=>e.slug!==T),O=async e=>{if(d)return;b(e.slug);const w=G(N),R=o.documentHooks?.storedNode?.(w)??w,C=M(o).pages,E=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]:[],v=l.findIndex(_=>_?.type===J);l.splice(v===-1?l.length:v,0,R),await C.save(e.id,{layout:{root:{},zones:{},...f,content:l}},{version:m.version,clientId:""})});b(null),r(!1),I?.(E?n("Duplicated to “{name}”",{name:e.label}):n("Couldn’t duplicate the section — please retry"),E?"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:F,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")}),S?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:()=>{O(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

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import { type FieldNoun } from "../../format/lib/puck/field-noun.js";
+import { type FieldNoun } from "../../format/lib/document/field-noun.js";
 export declare function FieldGlyph({ noun, size, strokeWidth, className, style, }: {
     noun: FieldNoun;
     size?: number;

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

@@ -1,4 +1,4 @@
-import { type HeroMediaPart } from "../../render/lib/puck/hero-media-parts.js";
+import { type HeroMediaPart } from "../../render/lib/document/hero-media-parts.js";
 export default function HeroPartPanel({ nodeId, part, sectionName, onUpToSection, }: {
     nodeId: string;
     part: HeroMediaPart;

package/dist/editor/components/HeroPartPanel.js

@@ -1 +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};
+"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/document/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/LocationsGroupedField.js

@@ -1 +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"efficient-easel/screen/lib/puck/use-section-ops";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};
+"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/document/controls.js";import{useLocationsFocus as ie,setLocationsFocus as v}from"../lib/document/locations-focus.js";import{groupKeyOf as k,groupLabelOf as re,NEW_CITY as W,writeGroupCities as le,writeGroupOrder as ae}from"../../format/lib/document/locations-tree.js";import{useSectionOps as se}from"efficient-easel/screen/lib/document/use-section-ops";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

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

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

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

package/dist/editor/components/PartGlyphs.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";function r({children:e,weight:n}){return t("span",{"aria-hidden":"true",style:{fontSize:13,lineHeight:1,fontWeight:n,letterSpacing:"-0.01em",userSelect:"none"},children:e})}function o({weight:e=400}){return t(r,{weight:e,children:"A"})}function h({letterCase:e="none"}){return t(r,{weight:600,children:e==="upper"?"AA":e==="lower"?"aa":"Aa"})}export{h as CaseGlyph,o as WeightGlyph};
+import{jsx as t}from"react/jsx-runtime";function r({children:e,weight:n}){return t("span",{"aria-hidden":"true",style:{fontSize:13,lineHeight:1,fontWeight:n,letterSpacing:"-0.01em",userSelect:"none"},children:e})}

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

@@ -1,4 +1,4 @@
-import type { PartInk } from "../../format/lib/puck/part-inks.js";
+import type { PartInk } from "../../format/lib/document/part-inks.js";
 export declare function PartInkControl({ value, label, colors, onChange, }: {
     value: string | null;
     label: string;

package/dist/editor/components/PartInkControl.js

@@ -1 +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};
+"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/document/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/PartSettingsPanel.d.ts

@@ -2,8 +2,8 @@ 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";
+import { type PartStyle, type PartStyleBase } from "../../render/lib/document/part-styles.js";
+import { type PartSource } from "../../format/lib/document/source-bound-parts.js";
 export type PartFace = {
     kind: "role";
     role: FontRole;

package/dist/editor/components/PartSettingsPanel.js

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

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

@@ -1,6 +1,6 @@
 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";
+import { type PartStyle, type PartStyleBase } from "../../render/lib/document/part-styles.js";
 export type PartStylePatch = {
     [K in keyof PartStyle]?: PartStyle[K] | null;
 };

package/dist/editor/components/PartTextBox.js

@@ -1 +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};
+"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/document/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/document/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/PreviewPartAnchors.d.ts

@@ -1,6 +1,6 @@
 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 PartNeedle } from "../../render/lib/document/text-parts.js";
+import { type PartStyleBase, type PartStyles } from "../../render/lib/document/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): {

package/dist/editor/components/PreviewPartAnchors.js

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

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

@@ -1,7 +1,7 @@
 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 { PartStyleBase } from "../../render/lib/document/part-styles.js";
 import type { TypeGroup } from "../../format/lib/theme.js";
 export type PartStyleReading = {
     partId: string;

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

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