@kywi-software/core 0.9.0 → 0.11.0

package/AGENT-PATTERNS.md

@@ -441,20 +441,22 @@ interchangeable.
   page is complete with JavaScript off. This is the default for anything the
   server can know — rule-based audiences (UTM, referrer, the `kywi_audience`
   pin) and A/B experiments. Since 0.6.3 it also renders in the layout editor as
-  a badged block with an **arm switcher**, each arm editable with the ordinary
-  section/column/module tools, so server-resolution no longer costs the owner
-  their editing surface. Since kywi-cms#119, the owner doesn't need an agent to
-  hand-author this shape at all: the section chrome — in the admin layout
-  editor and in the in-place front-of-site overlay alike — offers
-  **Personalize this section** / **A/B test** actions that wrap an ordinary
-  section into a section-level variant container on the spot, seeding the
-  default arm from the section's current content and opening straight into its
-  config (audience/experiment picker included). An agent only needs to reach
-  for `update_layout` when scripting bulk changes or building a container the
-  UI can't reach.
+  a badged block with a **variant switcher** (internal editor code —
+  `activeArms`, the `VariantArm` type, `data-arm-id` — still says "arm"; the
+  persisted layout field is `variants`), each variant editable with the
+  ordinary section/column/module tools, so server-resolution no longer costs
+  the owner their editing surface. Since kywi-cms#119, the owner doesn't need
+  an agent to hand-author this shape at all: the section chrome — in the
+  admin layout editor and in the in-place front-of-site overlay alike —
+  offers **Personalize this section** / **A/B test** actions that wrap an
+  ordinary section into a section-level variant container on the spot,
+  seeding the default variant from the section's current content and
+  opening straight into its config (audience/experiment picker included).
+  An agent only needs to reach for `update_layout` when scripting bulk
+  changes or building a container the UI can't reach.
 - **Module-level** — the `variantContainer` *module*, placed in a column; its
-  arms are HTML strings (`defaultContent`, `variants: [{audienceId, label,
-  content}]`). Every arm ships in the HTML (default visible, the rest
+  variants are HTML strings (`defaultContent`, `variants: [{audienceId, label,
+  content}]`). Every variant ships in the HTML (default visible, the rest
   `display:none`) and the browser runtime reveals the matching one. Use it
   **only for signals the server cannot read at first paint** — in practice, a
   self-ID answer held in `localStorage`.

package/README.md

@@ -166,6 +166,73 @@ text, button …) types straight on the page (committed on blur through the same
 deselects, and a persistent **Done** leaves — confirming first if there are
 unsaved changes.
 
+### Sticky site headers and the editor's bars
+
+Two fixed bars can appear at the top of a public page for a signed-in editor:
+the **browse-mode toolbar** (`.kywi-edit-toolbar`, 44px) and the **edit-mode
+bar** (`.kywi-overlay-toolbar`, 46px). Each publishes its height as a token on
+`:root`, so a theme never has to hard-code either number:
+
+| Token | Bar | Default |
+| --- | --- | --- |
+| `--kywi-browse-bar-height` | browse-mode toolbar | `44px` |
+| `--kywi-overlay-bar-height` | edit-mode bar | `46px` |
+
+Both are declared on `:root` by **`./site/styles.css`**, which every public page
+loads — and again, identically, by the layout editor's `editor.css`. The second
+sheet alone is not enough to rely on: a generated app pulls the admin design
+system in behind `next/dynamic`, so `editor.css` is absent from the page until
+someone opens the overlay editor, and browse mode would resolve neither token.
+Give every `var()` on these tokens the matching px fallback anyway (`44px` /
+`46px`) — a `var()` whose token is undefined falls back to the property's
+*initial* value, and `top: auto` un-sticks an element outright rather than
+merely mis-offsetting it.
+
+While a bar is up, the document is offset by its height, which is enough for a
+header in normal flow. It is **not** enough for `position: sticky; top: 0` (or
+`position: fixed; top: 0`): document padding moves an element's flow position,
+not the line it pins to once it sticks — so a sticky nav would pin to viewport
+y=0 underneath the bar as soon as the reader scrolled. The editor therefore
+detects top-anchored elements when a bar mounts and patches each one's inline
+`top` to the bar's token for the session, restoring the original exactly on the
+way out (`packages/core/src/scope/sticky-offset.ts`). Nothing is required of a
+theme for this to work.
+
+Two things are worth knowing if you are writing one:
+
+- **A sticky element that mounts after the editor opens is not offset.** The
+  scan runs once, when the bar mounts; a cookie bar on a timer or a menu that is
+  `display: none` at that moment keeps its own `top`. Anchor those yourself off
+  the class the bar puts on `<html>` — `kywi-frontend-edit--browsing` or
+  `kywi-frontend-edit--editing`, which are also how you special-case anything
+  else for an editing session:
+
+  ```css
+  .my-late-sticky { top: 0; }
+  .kywi-frontend-edit--browsing .my-late-sticky { top: var(--kywi-browse-bar-height, 44px); }
+  .kywi-frontend-edit--editing  .my-late-sticky { top: var(--kywi-overlay-bar-height, 46px); }
+  ```
+
+  A second tier keeps its own offset on top of the bar:
+
+  ```css
+  .my-late-subnav { top: 64px; }
+  .kywi-frontend-edit--browsing .my-late-subnav { top: calc(var(--kywi-browse-bar-height, 44px) + 64px); }
+  .kywi-frontend-edit--editing  .my-late-subnav { top: calc(var(--kywi-overlay-bar-height, 46px) + 64px); }
+  ```
+- **A whole sticky STACK moves, not just its first tier.** Anything with a
+  computed `top` within 4px of zero is offset by one bar height; anything
+  between there and 200px — a sub-nav parked under the header at `top: 64px`,
+  the docs-site pattern — is offset by the bar *plus its own original value*, so
+  the gaps a theme built survive the session. Moving only the first tier would
+  make the header cover the sub-nav, an overlap the offset itself would have
+  created.
+- **Further down than that, and inside a scroll pane, is left alone.** A sticky
+  filter panel at `top: 320px` is anchored to page content rather than to the
+  top of the viewport, and a sticky table head inside an `overflow: auto` pane
+  pins to that pane, not to the window — the bar never covers either, so neither
+  moves.
+
 A host must therefore NOT wrap the editor in `.kywi-admin-shell`: that class is
 the admin design system's base + reset and would re-typeset the page being
 edited. Pass the page's own body-wrapper class as `pageClassName` instead, so

package/dist/admin/layout-editor/column-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-overlay.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/column-overlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAyBhH"}
+{"version":3,"file":"column-overlay.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/column-overlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CA+BhH"}

package/dist/admin/layout-editor/column-overlay.js

@@ -2,7 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ColumnOverlay({ columnId, width, inPlace = false, rootRef, dropId, children }) {
     if (inPlace) {
-        return (_jsx("div", { ref: rootRef, className: `kywi-column kywi-col-${width} kywi-ip-column`, "data-kywi-column": "", "data-kywi-col-width": width, "data-column-id": columnId, ...(dropId ? { 'data-kywi-column-drop': dropId } : {}), children: children }));
+        return (_jsx("div", { ref: rootRef, className: `kywi-column kywi-col-${width} kywi-ip-column`, 
+            // kywi-cms#138: the drop indicator is an absolutely-positioned overlay
+            // inside this column, so the column has to be its containing block —
+            // the site's own `.kywi-column` carries no positioning. Inline and
+            // editor-only: this component never renders outside the editor, so it
+            // cannot leak into the published page.
+            style: { position: 'relative' }, "data-kywi-column": "", "data-kywi-col-width": width, "data-column-id": columnId, ...(dropId ? { 'data-kywi-column-drop': dropId } : {}), children: children }));
     }
     return (_jsxs("div", { className: "kywi-editor-column", style: { flex: width }, "data-column-id": columnId, children: [_jsxs("div", { className: "kywi-editor-column-label", children: ["col-", width] }), children] }));
 }

package/dist/admin/layout-editor/column-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-overlay.js","sourceRoot":"","sources":["../../../src/admin/layout-editor/column-overlay.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AA+BZ,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAsB;IAC/G,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,cACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,wBAAwB,KAAK,iBAAiB,sBACxC,EAAE,yBACE,KAAK,oBACV,QAAQ,KACpB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAEtD,QAAQ,GACL,CACP,CAAA;IACH,CAAC;IACD,OAAO,CACL,eACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,oBACN,QAAQ,aAExB,eAAK,SAAS,EAAC,0BAA0B,qBAAM,KAAK,IAAO,EAC1D,QAAQ,IACL,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"column-overlay.js","sourceRoot":"","sources":["../../../src/admin/layout-editor/column-overlay.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AA+BZ,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAsB;IAC/G,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,cACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,wBAAwB,KAAK,iBAAiB;YACzD,uEAAuE;YACvE,qEAAqE;YACrE,mEAAmE;YACnE,sEAAsE;YACtE,uCAAuC;YACvC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,sBACd,EAAE,yBACE,KAAK,oBACV,QAAQ,KACpB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAEtD,QAAQ,GACL,CACP,CAAA;IACH,CAAC;IACD,OAAO,CACL,eACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,oBACN,QAAQ,aAExB,eAAK,SAAS,EAAC,0BAA0B,qBAAM,KAAK,IAAO,EAC1D,QAAQ,IACL,CACP,CAAA;AACH,CAAC"}

package/dist/admin/layout-editor/drop-indicator.d.ts

@@ -2,7 +2,24 @@ import type { DropFeedbackState } from './drag-utils.js';
 interface DropIndicatorProps {
     state: DropFeedbackState;
     moduleType?: string;
+    /**
+     * Y of the slot boundary this marks, in the column's own coordinate space
+     * (kywi-cms#138).
+     *
+     * The indicator is OVERLAY chrome: absolutely positioned inside the column,
+     * because drawn in the flow it pushed every module below the boundary down by
+     * its own height — measured at +19px as a line and +78px as the placeholder —
+     * the instant the drag projected a slot. The module the owner was aiming at
+     * slid out from under the cursor mid-drag, so aiming at the bottom of a
+     * module landed the drop one slot early. Positioned, it costs the column
+     * nothing.
+     *
+     * `null` while the boundary has not been measured yet (the first render of a
+     * new projection, before the layout effect that reads the slots runs) — that
+     * frame draws at the top of the column and is corrected before paint.
+     */
+    top: number | null;
 }
-export declare function DropIndicator({ state, moduleType }: DropIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DropIndicator({ state, moduleType, top }: DropIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=drop-indicator.d.ts.map

package/dist/admin/layout-editor/drop-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drop-indicator.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/drop-indicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAExD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,iBAAiB,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,kBAAkB,kDAetE"}
+{"version":3,"file":"drop-indicator.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/drop-indicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AASxD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,iBAAiB,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;;;;;;;;OAeG;IACH,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CACnB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,kBAAkB,kDAgC3E"}

package/dist/admin/layout-editor/drop-indicator.js

@@ -1,11 +1,31 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function DropIndicator({ state, moduleType }) {
+/**
+ * Line thickness, mirrored from `.kywi-editor-drop-line`'s `height` in
+ * editor.css so the line can be CENTRED on the boundary it marks. The two must
+ * agree; a line drawn half a pixel off is not worth a measurement per frame.
+ */
+const LINE_HEIGHT = 3;
+export function DropIndicator({ state, moduleType, top }) {
     if (state === 'idle')
         return null;
+    const boundary = top ?? 0;
+    const overlay = {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        pointerEvents: 'none',
+        // Above the modules and their own chrome (type chip / action row, z-index 3
+        // in editor.css) and below the column resize handle (6) — this is canvas
+        // chrome, not part of the floating-chrome tiers that start at 998.
+        zIndex: 5,
+    };
     if (state === 'line') {
-        return _jsx("div", { className: "kywi-editor-drop-line" });
+        return (_jsx("div", { className: "kywi-editor-drop-line", style: { ...overlay, top: boundary - LINE_HEIGHT / 2 } }));
     }
-    return (_jsxs("div", { className: "kywi-editor-drop-placeholder", children: [moduleType && _jsxs("span", { children: [moduleType, " will be placed here"] }), _jsx("div", { style: { fontSize: '10px', opacity: 0.7, marginTop: 2, textTransform: 'none', fontWeight: 500 }, children: "Release to drop" })] }));
+    // Top edge ON the boundary, extending downwards: it overlaps the module that
+    // would be displaced, which is the honest picture — that is the room the
+    // dropped module takes and where the displaced one goes.
+    return (_jsxs("div", { className: "kywi-editor-drop-placeholder", style: { ...overlay, top: boundary }, children: [moduleType && _jsxs("span", { children: [moduleType, " will be placed here"] }), _jsx("div", { style: { fontSize: '10px', opacity: 0.7, marginTop: 2, textTransform: 'none', fontWeight: 500 }, children: "Release to drop" })] }));
 }
 //# sourceMappingURL=drop-indicator.js.map

package/dist/admin/layout-editor/drop-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"drop-indicator.js","sourceRoot":"","sources":["../../../src/admin/layout-editor/drop-indicator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AASZ,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAsB;IACrE,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,IAAI,CAAA;IAEjC,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;QACrB,OAAO,cAAK,SAAS,EAAC,uBAAuB,GAAG,CAAA;IAClD,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC1C,UAAU,IAAI,2BAAO,UAAU,4BAA4B,EAC5D,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,gCAE9F,IACF,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"drop-indicator.js","sourceRoot":"","sources":["../../../src/admin/layout-editor/drop-indicator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ;;;;GAIG;AACH,MAAM,WAAW,GAAG,CAAC,CAAA;AAwBrB,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAsB;IAC1E,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,IAAI,CAAA;IAEjC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,CAAA;IACzB,MAAM,OAAO,GAAwB;QACnC,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,aAAa,EAAE,MAAM;QACrB,4EAA4E;QAC5E,yEAAyE;QACzE,mEAAmE;QACnE,MAAM,EAAE,CAAC;KACV,CAAA;IAED,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;QACrB,OAAO,CACL,cAAK,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAG,WAAW,GAAG,CAAC,EAAE,GAAI,CAClG,CAAA;IACH,CAAC;IAED,6EAA6E;IAC7E,yEAAyE;IACzE,yDAAyD;IACzD,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,aAC/E,UAAU,IAAI,2BAAO,UAAU,4BAA4B,EAC5D,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,gCAE9F,IACF,CACP,CAAA;AACH,CAAC"}

package/dist/admin/layout-editor/editor-canvas.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { EditorState, EditorAction } from './editor-state.js';
-import type { InlineTextProp } from './inline-text.js';
+import type { InlineTextProp, InlineTextBindingTarget } from './inline-text.js';
 /** Resolve a connected component node to its live definition for canvas preview. */
 type ComponentPreviewResolver = (componentId: string) => {
     props: Record<string, unknown>;
@@ -23,15 +23,19 @@ export interface InlineEditController {
     resetId: string | null;
     /** Bumped each time an edit session ends. */
     nonce: number;
-    /** The module type's primary text prop, or null when it has none. */
-    resolveTextProp: (moduleType: string) => InlineTextProp | null;
+    /**
+     * The element + prop a gesture inside one module's wrapper binds, or null when
+     * there is nothing safe to bind (kywi-cms#145 — see `resolveInlineBinding`).
+     */
+    resolveBinding: (moduleType: string, wrapper: HTMLElement, target: Element | null) => InlineTextBindingTarget | null;
     onActivate: (moduleId: string) => void;
-    onCommit: (moduleId: string, host: HTMLElement) => void;
+    onCommit: (moduleId: string, host: HTMLElement, prop: InlineTextProp) => void;
     onCancel: () => void;
     /**
-     * Double-click fallback for a module with no primary text prop (kywi-cms#118).
-     * Selecting is the caller's job (via the module's own `onSelect`); this only
-     * moves focus into the already-open props rail once that selection commits.
+     * Double-click fallback for a gesture with nothing safe to bind
+     * (kywi-cms#118, kywi-cms#145). Selecting is the caller's job (via the
+     * module's own `onSelect`); this only moves focus into the already-open props
+     * rail once that selection commits.
      */
     focusPropsRail: () => void;
 }
@@ -55,9 +59,28 @@ interface EditorCanvasProps {
      * chips, handles) float above it instead of boxing it into an artboard.
      */
     inPlace?: boolean;
+    /**
+     * Whether the front editor's left module-palette rail is expanded
+     * (kywi-cms#132). The rail is fixed to the viewport edge and floats over the
+     * page's left margin, so a full-width section's floating chrome renders
+     * underneath it and cannot be clicked — the chrome moves out of its way, and
+     * this is the only channel that tells it to. Meaningful in in-place mode
+     * only: the admin artboard's palette is an in-flow column.
+     */
+    paletteOpen?: boolean;
     /** Inline text editing controller, only meaningful in in-place mode. */
     inlineEdit?: InlineEditController | null;
 }
-export declare function EditorCanvas({ state, dispatch, moduleComponents, onInsertSection, resolveComponent, overlayHandles, inPlace, inlineEdit, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Memoized (kywi-cms#142): the canvas re-renders on every editor-state
+ * change, including drag feedback published elsewhere in the tree
+ * (DropTargetContext, consumed by DroppableColumn below `EditorCanvas`'s own
+ * props) that doesn't change any of ITS props. `React.memo`'s default
+ * shallow-equal prop comparison skips re-rendering the whole canvas subtree
+ * for those, since `state`/`dispatch`/`moduleComponents` etc. are stable
+ * references from the shells (LayoutEditor / OverlayShell) across a
+ * drop-target update.
+ */
+export declare const EditorCanvas: React.NamedExoticComponent<EditorCanvasProps>;
 export {};
 //# sourceMappingURL=editor-canvas.d.ts.map

package/dist/admin/layout-editor/editor-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-canvas.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/editor-canvas.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAkBlE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAKtD,oFAAoF;AACpF,KAAK,wBAAwB,GAAG,CAC9B,WAAW,EAAE,MAAM,KAChB;IAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAEjG;;;;;;;;GAQG;AACH,MAAM,WAAW,oBAAoB;IACnC,kDAAkD;IAClD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,8EAA8E;IAC9E,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,qEAAqE;IACrE,eAAe,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAA;IAC9D,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACvD,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,cAAc,EAAE,MAAM,IAAI,CAAA;CAC3B;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC,CAAC,CAAA;IACzH,eAAe,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,wBAAwB,CAAA;IAC3C,sFAAsF;IACtF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wEAAwE;IACxE,UAAU,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;CACzC;AAykBD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,cAAsB,EACtB,OAAe,EACf,UAAU,GACX,EAAE,iBAAiB,2CAyFnB"}
+{"version":3,"file":"editor-canvas.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/editor-canvas.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAkBlE,OAAO,KAAK,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAK/E,oFAAoF;AACpF,KAAK,wBAAwB,GAAG,CAC9B,WAAW,EAAE,MAAM,KAChB;IAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAEjG;;;;;;;;GAQG;AACH,MAAM,WAAW,oBAAoB;IACnC,kDAAkD;IAClD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,8EAA8E;IAC9E,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,cAAc,EAAE,CACd,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,OAAO,GAAG,IAAI,KACnB,uBAAuB,GAAG,IAAI,CAAA;IACnC,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAC7E,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;OAKG;IACH,cAAc,EAAE,MAAM,IAAI,CAAA;CAC3B;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC,CAAC,CAAA;IACzH,eAAe,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,wBAAwB,CAAA;IAC3C,sFAAsF;IACtF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,wEAAwE;IACxE,UAAU,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;CACzC;AA8pBD;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,+CAqGvB,CAAA"}

package/dist/admin/layout-editor/editor-canvas.js

@@ -15,7 +15,7 @@ import { ColumnResizeHandle } from './column-resize-handle.js';
 import { ModuleOverlay } from './module-overlay.js';
 import { DropIndicator } from './drop-indicator.js';
 import { DropTargetContext } from './drag-feedback.js';
-import { useChromeFlip } from './use-chrome-flip.js';
+import { useChromeFlip, chromeOffsetClasses, chromeOffsetStyle } from './use-chrome-flip.js';
 import { ModuleEditorContext } from '../../layout/module-render-context.js';
 /**
  * Render a node's live preview in the canvas. A connected component node
@@ -63,23 +63,68 @@ function getRegions(state) {
     return state.layout.regions;
 }
 /**
- * Build the inline-editing binding for one module, or null when the module has
- * no primary text prop (or the canvas isn't in in-place mode).
+ * Build the inline-editing binding for one module, or null when the canvas
+ * isn't in in-place mode.
+ *
+ * Deliberately NOT gated on the module having an editable prop any more
+ * (kywi-cms#145): what a gesture can edit depends on where in the module it
+ * landed, so the decision moved to `resolve`, per gesture. A module with nothing
+ * bindable resolves to null every time and its double-click falls through to
+ * `onInlineFallback`.
  */
 function inlineTextBindingFor(nodeId, nodeType, inPlace, inlineEdit) {
     if (!inPlace || !inlineEdit)
         return null;
-    const prop = inlineEdit.resolveTextProp(nodeType);
-    if (!prop)
-        return null;
     return {
         active: inlineEdit.editingId === nodeId,
-        html: prop.html,
+        resolve: (wrapper, target) => inlineEdit.resolveBinding(nodeType, wrapper, target),
         onActivate: () => inlineEdit.onActivate(nodeId),
-        onCommit: (host) => inlineEdit.onCommit(nodeId, host),
+        onCommit: (host, prop) => inlineEdit.onCommit(nodeId, host, prop),
         onCancel: () => inlineEdit.onCancel(),
     };
 }
+/**
+ * Y of the slot boundary `index` marks, in the column's own coordinate space —
+ * or null when there is nothing to measure against (kywi-cms#138).
+ *
+ * `offsetTop`/`offsetHeight` rather than `getBoundingClientRect()`: the column
+ * is the slots' offset parent (both shells position it, see `DroppableColumn`
+ * below), so these are already expressed in exactly the space an absolutely
+ * positioned child of that column is placed in — no scroll or viewport maths in
+ * between, and nothing to re-derive when the page scrolls mid-drag.
+ *
+ * Direct children only — deliberately narrower than `resolveColumnDropIndex`,
+ * which reads `querySelectorAll('[data-kywi-module-slot]')` and so counts
+ * descendants at any depth. The two agree today because only `ModuleOverlay`
+ * emits `data-kywi-module-slot` and a column never nests another column, so
+ * every slot inside a column IS a direct child. If a module ever renders its
+ * own column (or anything else emits that attribute), the two would diverge —
+ * the indicator would measure against one set of slots while the drop resolves
+ * against another — and this is the place that has to change with it.
+ *
+ * Only ever called for a PALETTE drag (`useEditorDnd` projects a drop target
+ * for nothing else), which is what makes the measurement trustworthy: during a
+ * canvas reorder the dragged slot carries a live dnd-kit transform and reports
+ * where it has been dragged to rather than where it sits.
+ */
+function slotBoundaryOffset(columnEl, index) {
+    if (!columnEl)
+        return null;
+    const slots = [];
+    // `Array.from`, not `for…of` over the collection: the package's `lib` is
+    // ["ES2022", "DOM"] without "DOM.Iterable".
+    for (const child of Array.from(columnEl.children)) {
+        if (child.hasAttribute('data-kywi-module-slot'))
+            slots.push(child);
+    }
+    // An empty column has one slot boundary and it is the top of the column.
+    const last = slots[slots.length - 1];
+    if (!last)
+        return 0;
+    if (index >= slots.length)
+        return last.offsetTop + last.offsetHeight;
+    return slots[index].offsetTop;
+}
 // ── DroppableColumn ───────────────────────────────────────────────────────────
 function DroppableColumn({ column, state, dispatch, moduleComponents, resolveComponent, inPlace = false, inlineEdit, }) {
     // kywi-cms#20: this droppable represents the column's own (empty) space —
@@ -104,31 +149,57 @@ function DroppableColumn({ column, state, dispatch, moduleComponents, resolveCom
     // draws nothing — which is the point: the owner sees a single destination.
     const dropTarget = React.useContext(DropTargetContext);
     const target = dropTarget?.columnId === column.id ? dropTarget : null;
+    // kywi-cms#138: the drop element doubles as the indicator's positioning
+    // context, so the indicator has to be measured against the same element it is
+    // placed inside. `setNodeRef` is stable (dnd-kit builds it once per hook), so
+    // this callback is too — a changing ref callback would hand dnd-kit a `null`
+    // node on every render, mid-drag included.
+    const columnElRef = React.useRef(null);
+    const attachColumnRef = React.useCallback((el) => {
+        columnElRef.current = el;
+        setNodeRef(el);
+    }, [setNodeRef]);
+    // Measured, not guessed: the boundary's y in the column's own coordinates.
+    // `useLayoutEffect` so the correction lands before the browser paints — the
+    // first frame of a new projection renders at the top of the column and is
+    // never seen there.
+    const [indicatorTop, setIndicatorTop] = React.useState(null);
+    const targetIndex = target ? target.index : null;
+    React.useLayoutEffect(() => {
+        setIndicatorTop(targetIndex === null ? null : slotBoundaryOffset(columnElRef.current, targetIndex));
+    }, [targetIndex, column.nodes.length]);
     /**
-     * The indicator for one slot boundary: before the module at `index`, or after
-     * the last module when `index === column.nodes.length`. Rendering it in the
-     * flow (rather than as an absolute overlay) is what makes it honest — the
-     * modules below really do move down, so the placeholder shows the room the
-     * dropped module will take.
+     * The projected drop boundary, drawn as ONE absolutely-positioned element at
+     * the end of the column rather than spliced into the module flow.
+     *
+     * In the flow it was self-defeating: the indicator's own height pushed
+     * everything below the boundary down the moment the drag projected it —
+     * measured on the e2e fixture, +19px for the line and +78px once it escalated
+     * to the placeholder — so the module the owner was aiming at moved out from
+     * under the cursor and the projection re-resolved one slot early. As an
+     * overlay it promises the same slot without touching the layout it describes.
      */
-    const indicatorAt = (index) => target && target.index === index ? (_jsx(DropIndicator, { state: target.feedback, ...(target.label ? { moduleType: target.label } : {}) })) : null;
-    const content = (_jsxs(_Fragment, { children: [column.nodes.length === 0 && (_jsx("div", { className: inPlace ? 'kywi-ip-empty-column' : 'kywi-editor-column-empty', children: "Drag a module here" })), _jsxs(SortableContext, { items: moduleIds, strategy: verticalListSortingStrategy, children: [column.nodes.map((node, index) => {
-                        const inlineText = inlineTextBindingFor(node.id, node.type, inPlace, inlineEdit);
-                        const select = () => dispatch({ type: 'SELECT', id: node.id, selectionType: 'module' });
-                        // No primary text prop to bind (kywi-cms#118): double-click would
-                        // otherwise be a silent no-op, so route it to the props rail instead
-                        // — select the module, then focus its first field once that lands.
-                        const onInlineFallback = inPlace && !inlineText && inlineEdit
-                            ? () => {
-                                select();
-                                inlineEdit.focusPropsRail();
-                            }
-                            : undefined;
-                        // Re-key the preview after an edit session so contenteditable's DOM
-                        // leftovers are replaced by a clean render from the stored props.
-                        const previewKey = inlineEdit && inlineEdit.resetId === node.id ? `${node.id}:${inlineEdit.nonce}` : node.id;
-                        return (_jsxs(React.Fragment, { children: [indicatorAt(index), _jsx(ModuleOverlay, { moduleId: node.id, instanceId: node.instanceId, columnId: column.id, index: index, isSelected: state.selectedId === node.id, typeLabel: node.type, inPlace: inPlace, moduleType: node.type, inlineText: inlineText, ...(onInlineFallback ? { onInlineFallback } : {}), onSelect: select, children: _jsx(ModulePreview, { node: node, moduleComponents: moduleComponents, ...(resolveComponent ? { resolveComponent } : {}) }, previewKey) })] }, node.id));
-                    }), indicatorAt(column.nodes.length)] })] }));
+    const indicator = target ? (_jsx(DropIndicator, { state: target.feedback, top: indicatorTop, ...(target.label ? { moduleType: target.label } : {}) })) : null;
+    const content = (_jsxs(_Fragment, { children: [column.nodes.length === 0 && (_jsx("div", { className: inPlace ? 'kywi-ip-empty-column' : 'kywi-editor-column-empty', children: "Drag a module here" })), _jsx(SortableContext, { items: moduleIds, strategy: verticalListSortingStrategy, children: column.nodes.map((node, index) => {
+                    const inlineText = inlineTextBindingFor(node.id, node.type, inPlace, inlineEdit);
+                    const select = () => dispatch({ type: 'SELECT', id: node.id, selectionType: 'module' });
+                    // Nothing safe to bind (kywi-cms#118): double-click would otherwise be
+                    // a silent no-op, so route it to the props rail instead — select the
+                    // module, then focus its first field once that lands. Now always
+                    // supplied, because whether a gesture binds is only known when it
+                    // happens (kywi-cms#145): the overlay calls this when its own
+                    // resolution comes back empty.
+                    const onInlineFallback = inPlace && inlineEdit
+                        ? () => {
+                            select();
+                            inlineEdit.focusPropsRail();
+                        }
+                        : undefined;
+                    // Re-key the preview after an edit session so contenteditable's DOM
+                    // leftovers are replaced by a clean render from the stored props.
+                    const previewKey = inlineEdit && inlineEdit.resetId === node.id ? `${node.id}:${inlineEdit.nonce}` : node.id;
+                    return (_jsx(React.Fragment, { children: _jsx(ModuleOverlay, { moduleId: node.id, instanceId: node.instanceId, columnId: column.id, index: index, isSelected: state.selectedId === node.id, typeLabel: node.type, inPlace: inPlace, moduleType: node.type, inlineText: inlineText, ...(onInlineFallback ? { onInlineFallback } : {}), onSelect: select, children: _jsx(ModulePreview, { node: node, moduleComponents: moduleComponents, ...(resolveComponent ? { resolveComponent } : {}) }, previewKey) }) }, node.id));
+                }) }), indicator] }));
     // In place the column element IS the drop zone: an extra wrapper div would
     // sit between `.kywi-column` and the module wrappers and break the site's own
     // child selectors. In the artboard the wrapper also carries a minimum height
@@ -136,8 +207,11 @@ function DroppableColumn({ column, state, dispatch, moduleComponents, resolveCom
     //
     // Either way the element carrying `setNodeRef` also carries
     // `data-kywi-column-drop` (kywi-cms#134) — in place that's the column element
-    // itself, so the id goes through `ColumnOverlay`'s `dropId`.
-    return inPlace ? (_jsx(ColumnOverlay, { columnId: column.id, width: column.width, inPlace: true, rootRef: setNodeRef, dropId: column.id, children: content })) : (_jsx(ColumnOverlay, { columnId: column.id, width: column.width, children: _jsx("div", { ref: setNodeRef, "data-kywi-column-drop": column.id, style: { minHeight: 40 }, children: content }) }));
+    // itself, so the id goes through `ColumnOverlay`'s `dropId` — and is the drop
+    // indicator's positioning context (kywi-cms#138), which is why the artboard
+    // wrapper is `position: relative` here and the in-place column is inside
+    // `ColumnOverlay`.
+    return inPlace ? (_jsx(ColumnOverlay, { columnId: column.id, width: column.width, inPlace: true, rootRef: attachColumnRef, dropId: column.id, children: content })) : (_jsx(ColumnOverlay, { columnId: column.id, width: column.width, children: _jsx("div", { ref: attachColumnRef, "data-kywi-column-drop": column.id, style: { position: 'relative', minHeight: 40 }, children: content }) }));
 }
 // ── SectionBlock ──────────────────────────────────────────────────────────────
 /**
@@ -146,7 +220,7 @@ function DroppableColumn({ column, state, dispatch, moduleComponents, resolveCom
  * container arm (kywi-cms#92) — arm content is edited with exactly the same
  * machinery, because the reducer's lookups are arm-aware.
  */
-function SectionBlock({ section, state, dispatch, moduleComponents, resolveComponent, inPlace = false, inArm = false, inlineEdit, }) {
+function SectionBlock({ section, state, dispatch, moduleComponents, resolveComponent, inPlace = false, paletteOpen = false, inArm = false, inlineEdit, }) {
     // In place, the section carries its OWN resolved style exactly as the public
     // SectionRenderer applies it (kywi-cms#94) — otherwise a section's background
     // or padding would vanish the moment the owner started editing, which is the
@@ -172,7 +246,7 @@ function SectionBlock({ section, state, dispatch, moduleComponents, resolveCompo
         { icon: 'personalize', label: 'Personalize', onClick: wrapInContainer('personalization') },
         { icon: 'variant', label: 'A/B test', onClick: wrapInContainer('ab_test') },
     ];
-    return (_jsx(SectionOverlay, { sectionId: section.id, isSelected: state.selectedId === section.id, inPlace: inPlace, ...(inArm ? {} : { actions: wrapActions }), ...(resolved ? { inPlaceStyle: resolved.base, responsiveCss: resolved.responsiveCss } : {}), onSelect: () => dispatch({ type: 'SELECT', id: section.id, selectionType: 'section' }), onAddColumn: () => dispatch({ type: 'ADD_COLUMN', sectionId: section.id }), onDelete: () => dispatch({ type: 'REMOVE_SECTION', sectionId: section.id }), children: section.columns.map((column, ci) => (_jsxs(React.Fragment, { children: [_jsx(DroppableColumn, { column: column, state: state, dispatch: dispatch, moduleComponents: moduleComponents, inPlace: inPlace, ...(inlineEdit ? { inlineEdit } : {}), ...(resolveComponent ? { resolveComponent } : {}) }), !inPlace && ci < section.columns.length - 1 && (_jsx(ColumnResizeHandle, { leftWidth: column.width, rightWidth: section.columns[ci + 1].width, onResize: (lw, rw) => {
+    return (_jsx(SectionOverlay, { sectionId: section.id, isSelected: state.selectedId === section.id, inPlace: inPlace, paletteOpen: paletteOpen, ...(inArm ? {} : { actions: wrapActions }), ...(resolved ? { inPlaceStyle: resolved.base, responsiveCss: resolved.responsiveCss } : {}), onSelect: () => dispatch({ type: 'SELECT', id: section.id, selectionType: 'section' }), onAddColumn: () => dispatch({ type: 'ADD_COLUMN', sectionId: section.id }), onDelete: () => dispatch({ type: 'REMOVE_SECTION', sectionId: section.id }), children: section.columns.map((column, ci) => (_jsxs(React.Fragment, { children: [_jsx(DroppableColumn, { column: column, state: state, dispatch: dispatch, moduleComponents: moduleComponents, inPlace: inPlace, ...(inlineEdit ? { inlineEdit } : {}), ...(resolveComponent ? { resolveComponent } : {}) }), !inPlace && ci < section.columns.length - 1 && (_jsx(ColumnResizeHandle, { leftWidth: column.width, rightWidth: section.columns[ci + 1].width, onResize: (lw, rw) => {
                         const widths = section.columns.map((c, i) => i === ci ? lw : i === ci + 1 ? rw : c.width);
                         dispatch({ type: 'RESIZE_COLUMNS', sectionId: section.id, widths });
                     } }))] }, column.id))) }));
@@ -192,7 +266,7 @@ function formatWeight(weight) {
  * way — the canvas is showing whichever arm is selected here.
  */
 function ArmTabs({ arms, activeArm, isAbTest, onSelect, }) {
-    return (_jsx("div", { className: "kywi-editor-vc-arms", role: "tablist", "aria-label": "Variant arms", children: arms.map(arm => (_jsxs("button", { type: "button", role: "tab", "aria-selected": arm.id === activeArm, "data-arm-id": arm.id, className: `kywi-editor-vc-arm-btn${arm.id === activeArm ? ' kywi-editor-vc-arm-btn--active' : ''}`, onClick: (e) => {
+    return (_jsx("div", { className: "kywi-editor-vc-arms", role: "tablist", "aria-label": "Variants", children: arms.map(arm => (_jsxs("button", { type: "button", role: "tab", "aria-selected": arm.id === activeArm, "data-arm-id": arm.id, className: `kywi-editor-vc-arm-btn${arm.id === activeArm ? ' kywi-editor-vc-arm-btn--active' : ''}`, onClick: (e) => {
                 e.stopPropagation();
                 onSelect(arm.id);
             }, children: [arm.label, isAbTest && arm.weight !== null && (_jsx("span", { className: "kywi-editor-vc-arm-weight", children: formatWeight(arm.weight) }))] }, arm.id))) }));
@@ -222,7 +296,7 @@ function ArmBody({ inPlace, activeArm, children, }) {
  * `.kywi-variant-container` and its badge/arm switcher floats above the band,
  * so a personalized hero looks exactly like the hero while staying switchable.
  */
-function VariantContainerBlock({ container, state, dispatch, moduleComponents, resolveComponent, inPlace = false, inlineEdit, }) {
+function VariantContainerBlock({ container, state, dispatch, moduleComponents, resolveComponent, inPlace = false, paletteOpen = false, inlineEdit, }) {
     // Collapsed/expanded is presentation-only and per-block, so it stays local.
     // Expanded by default: hiding arm content behind a disclosure would re-create
     // the very "invisible in the editor" problem this block exists to fix.
@@ -244,18 +318,17 @@ function VariantContainerBlock({ container, state, dispatch, moduleComponents, r
     // In place the badge/arm switcher floats above this band; for a personalized
     // hero — a band at the very top of the page, the common case — that lands
     // under the editor's fixed top bar, so it is pinned down inside the band
-    // instead (kywi-cms#122).
+    // instead (kywi-cms#122), and for a full-width band it also lands behind the
+    // open module palette, so it is pushed right out of that rail (kywi-cms#132).
     const containerRef = React.useRef(null);
-    const chromeClampPx = useChromeFlip(containerRef, inPlace);
+    const chromeOffsets = useChromeFlip(containerRef, inPlace, paletteOpen);
     return (_jsxs("div", { ref: containerRef, className: rootClassName, "data-variant-container-id": container.id, "data-vc-mode": container.mode, ...(inPlace ? { 'data-variant': activeArm } : {}), "data-testid": "editor-variant-container", children: [_jsxs("div", { className: inPlace
-                    ? `kywi-ip-chrome kywi-ip-vc-chrome${chromeClampPx !== null ? ' kywi-ip-chrome--clamped' : ''}`
-                    : 'kywi-editor-vc-toolbar', style: inPlace && chromeClampPx !== null
-                    ? { '--kywi-ip-chrome-clamp': `${chromeClampPx}px` }
-                    : undefined, ...(inPlace ? { 'data-kywi-editor-chrome': '', contentEditable: false } : {}), onClick: (e) => {
+                    ? ['kywi-ip-chrome', 'kywi-ip-vc-chrome', ...chromeOffsetClasses(chromeOffsets)].join(' ')
+                    : 'kywi-editor-vc-toolbar', style: inPlace ? chromeOffsetStyle(chromeOffsets) : undefined, ...(inPlace ? { 'data-kywi-editor-chrome': '', contentEditable: false } : {}), onClick: (e) => {
                     // Stop here so the canvas root doesn't immediately deselect.
                     e.stopPropagation();
                     dispatch({ type: 'SELECT', id: container.id, selectionType: 'variantContainer' });
-                }, children: [_jsx("span", { className: "kywi-editor-vc-badge", children: isAbTest ? 'A/B test' : 'Personalized' }), _jsx("span", { className: "kywi-editor-vc-title", children: isAbTest ? 'A/B tested section' : 'Personalized section' }), _jsxs("span", { className: "kywi-editor-vc-arm-count", children: [arms.length, " arm", arms.length === 1 ? '' : 's'] }), inPlace && expanded && (_jsx(ArmTabs, { arms: arms, activeArm: activeArm, isAbTest: isAbTest, onSelect: selectArm })), _jsx("div", { className: "kywi-editor-vc-toolbar-actions", children: _jsx("button", { type: "button", className: "kywi-editor-section-toolbar-btn", "data-action": "toggle-variant-container", "aria-expanded": expanded, onClick: (e) => { e.stopPropagation(); setExpanded(v => !v); }, children: expanded ? 'Collapse' : 'Expand' }) })] }), expanded && (_jsxs(_Fragment, { children: [!inPlace && (_jsx(ArmTabs, { arms: arms, activeArm: activeArm, isAbTest: isAbTest, onSelect: selectArm })), _jsxs(ArmBody, { inPlace: inPlace, activeArm: activeArm, children: [sections.length === 0 && (_jsx("p", { className: "kywi-editor-vc-arm-empty", children: "This arm renders nothing. Add a section so visitors in it see content." })), sections.map(section => (_jsx(SectionBlock, { section: section, state: state, dispatch: dispatch, moduleComponents: moduleComponents, inPlace: inPlace, inArm: true, ...(inlineEdit ? { inlineEdit } : {}), ...(resolveComponent ? { resolveComponent } : {}) }, section.id))), _jsx("button", { type: "button", className: inPlace ? 'kywi-ip-add-arm-section' : 'kywi-editor-vc-add-section', "data-action": "add-arm-section", ...(inPlace ? { 'data-kywi-editor-chrome': '' } : {}), onClick: (e) => {
+                }, children: [_jsx("span", { className: "kywi-editor-vc-badge", children: isAbTest ? 'A/B test' : 'Personalized' }), _jsx("span", { className: "kywi-editor-vc-title", children: isAbTest ? 'A/B tested section' : 'Personalized section' }), _jsxs("span", { className: "kywi-editor-vc-arm-count", children: [arms.length, " variant", arms.length === 1 ? '' : 's'] }), inPlace && expanded && (_jsx(ArmTabs, { arms: arms, activeArm: activeArm, isAbTest: isAbTest, onSelect: selectArm })), _jsx("div", { className: "kywi-editor-vc-toolbar-actions", children: _jsx("button", { type: "button", className: "kywi-editor-section-toolbar-btn", "data-action": "toggle-variant-container", "aria-expanded": expanded, onClick: (e) => { e.stopPropagation(); setExpanded(v => !v); }, children: expanded ? 'Collapse' : 'Expand' }) })] }), expanded && (_jsxs(_Fragment, { children: [!inPlace && (_jsx(ArmTabs, { arms: arms, activeArm: activeArm, isAbTest: isAbTest, onSelect: selectArm })), _jsxs(ArmBody, { inPlace: inPlace, activeArm: activeArm, children: [sections.length === 0 && (_jsx("p", { className: "kywi-editor-vc-arm-empty", children: "This variant renders nothing. Add a section so visitors in it see content." })), sections.map(section => (_jsx(SectionBlock, { section: section, state: state, dispatch: dispatch, moduleComponents: moduleComponents, inPlace: inPlace, paletteOpen: paletteOpen, inArm: true, ...(inlineEdit ? { inlineEdit } : {}), ...(resolveComponent ? { resolveComponent } : {}) }, section.id))), _jsx("button", { type: "button", className: inPlace ? 'kywi-ip-add-arm-section' : 'kywi-editor-vc-add-section', "data-action": "add-arm-section", ...(inPlace ? { 'data-kywi-editor-chrome': '' } : {}), onClick: (e) => {
                                     e.stopPropagation();
                                     dispatch({
                                         type: 'ADD_ARM_SECTION',
@@ -263,10 +336,20 @@ function VariantContainerBlock({ container, state, dispatch, moduleComponents, r
                                         armId: activeArm,
                                         columns: [12],
                                     });
-                                }, children: "+ Add section to this arm" })] })] }))] }));
+                                }, children: "+ Add section to this variant" })] })] }))] }));
 }
 // ── EditorCanvas ──────────────────────────────────────────────────────────────
-export function EditorCanvas({ state, dispatch, moduleComponents, onInsertSection, resolveComponent, overlayHandles = false, inPlace = false, inlineEdit, }) {
+/**
+ * Memoized (kywi-cms#142): the canvas re-renders on every editor-state
+ * change, including drag feedback published elsewhere in the tree
+ * (DropTargetContext, consumed by DroppableColumn below `EditorCanvas`'s own
+ * props) that doesn't change any of ITS props. `React.memo`'s default
+ * shallow-equal prop comparison skips re-rendering the whole canvas subtree
+ * for those, since `state`/`dispatch`/`moduleComponents` etc. are stable
+ * references from the shells (LayoutEditor / OverlayShell) across a
+ * drop-target update.
+ */
+export const EditorCanvas = React.memo(function EditorCanvas({ state, dispatch, moduleComponents, onInsertSection, resolveComponent, overlayHandles = false, inPlace = false, paletteOpen = false, inlineEdit, }) {
     const regions = getRegions(state);
     // In place the canvas is NOT an artboard: it carries no background, padding
     // or max-width of its own, so the page renders at its real width with its own
@@ -285,6 +368,6 @@ export function EditorCanvas({ state, dispatch, moduleComponents, onInsertSectio
     return (_jsx(ModuleEditorContext.Provider, { value: true, children: _jsxs("div", { className: canvasClassName, onClick: () => dispatch({ type: 'DESELECT' }), children: [totalNodes === 0 && (_jsxs("div", { className: "kywi-editor-canvas-empty", "data-testid": "editor-canvas-empty", children: [_jsx("p", { className: "kywi-editor-canvas-empty-title", children: "This page currently renders its body content." }), _jsx("p", { className: "kywi-editor-canvas-empty-copy", children: "Add a section to design it with the layout engine." }), _jsx("button", { type: "button", className: "kywi-editor-canvas-empty-cta", onClick: (event) => {
                                 event.stopPropagation();
                                 onInsertSection(Object.keys(regions)[0] ?? 'main');
-                            }, children: "+ Add Section" })] })), Object.entries(regions).map(([regionName, nodes]) => (_jsxs(RegionOverlay, { name: regionName, inPlace: inPlace, children: [nodes.filter(isRenderableNode).map((node) => (_jsxs(React.Fragment, { children: [!inPlace && _jsx(SectionInsertLine, { onInsert: () => onInsertSection(regionName) }), isLayoutSection(node) ? (_jsx(SectionBlock, { section: node, state: state, dispatch: dispatch, moduleComponents: moduleComponents, inPlace: inPlace, ...(inlineEdit ? { inlineEdit } : {}), ...(resolveComponent ? { resolveComponent } : {}) })) : (_jsx(VariantContainerBlock, { container: node, state: state, dispatch: dispatch, moduleComponents: moduleComponents, inPlace: inPlace, ...(inlineEdit ? { inlineEdit } : {}), ...(resolveComponent ? { resolveComponent } : {}) }))] }, node.id))), _jsx(SectionInsertLine, { onInsert: () => onInsertSection(regionName), inPlace: inPlace })] }, regionName)))] }) }));
-}
+                            }, children: "+ Add Section" })] })), Object.entries(regions).map(([regionName, nodes]) => (_jsxs(RegionOverlay, { name: regionName, inPlace: inPlace, children: [nodes.filter(isRenderableNode).map((node) => (_jsxs(React.Fragment, { children: [!inPlace && _jsx(SectionInsertLine, { onInsert: () => onInsertSection(regionName) }), isLayoutSection(node) ? (_jsx(SectionBlock, { section: node, state: state, dispatch: dispatch, moduleComponents: moduleComponents, inPlace: inPlace, paletteOpen: paletteOpen, ...(inlineEdit ? { inlineEdit } : {}), ...(resolveComponent ? { resolveComponent } : {}) })) : (_jsx(VariantContainerBlock, { container: node, state: state, dispatch: dispatch, moduleComponents: moduleComponents, inPlace: inPlace, paletteOpen: paletteOpen, ...(inlineEdit ? { inlineEdit } : {}), ...(resolveComponent ? { resolveComponent } : {}) }))] }, node.id))), _jsx(SectionInsertLine, { onInsert: () => onInsertSection(regionName), inPlace: inPlace })] }, regionName)))] }) }));
+});
 //# sourceMappingURL=editor-canvas.js.map