@kywi-software/core 0.6.2 → 0.6.4

package/dist/admin/layout-editor/editor.css

@@ -118,8 +118,12 @@
   overflow: hidden;
 }
 
+/* Scoped to the CHROME, never the shell: in the front-of-site editor the shell
+   wraps the real page, and a blanket `box-sizing: border-box` there would
+   silently re-lay-out the site the moment editing started (kywi-cms#94). */
 .kywi-editor-root *,
-.kywi-overlay-shell * {
+.kywi-overlay-chrome,
+.kywi-overlay-chrome * {
   box-sizing: border-box;
 }
 
@@ -127,8 +131,7 @@
 .kywi-editor-palette-list,
 .kywi-editor-props-panel-scroll,
 .kywi-editor-props-body,
-.kywi-overlay-left-panel,
-.kywi-overlay-right-panel {
+.kywi-overlay-rail {
   scrollbar-width: thin;
   scrollbar-color: var(--kywi-editor-border-strong) transparent;
 }
@@ -241,11 +244,11 @@
   background: var(--kywi-editor-panel-raised);
 }
 
-:where(.kywi-editor-root, .kywi-overlay-shell) button:focus-visible,
-:where(.kywi-editor-root, .kywi-overlay-shell) input:focus-visible,
-:where(.kywi-editor-root, .kywi-overlay-shell) select:focus-visible,
-:where(.kywi-editor-root, .kywi-overlay-shell) textarea:focus-visible,
-:where(.kywi-editor-root, .kywi-overlay-shell) [tabindex]:focus-visible {
+:where(.kywi-editor-root, .kywi-overlay-chrome) button:focus-visible,
+:where(.kywi-editor-root, .kywi-overlay-chrome) input:focus-visible,
+:where(.kywi-editor-root, .kywi-overlay-chrome) select:focus-visible,
+:where(.kywi-editor-root, .kywi-overlay-chrome) textarea:focus-visible,
+:where(.kywi-editor-root, .kywi-overlay-chrome) [tabindex]:focus-visible {
   outline: none;
   box-shadow: var(--kywi-editor-focus);
 }
@@ -671,6 +674,133 @@
 }
 .kywi-editor-section-toolbar-btn svg { flex-shrink: 0; }
 
+/* ── Section-level variant container (kywi-cms#92) ─────────────────────────── */
+/* A personalized / A-B'd band renders as its own block in document order, with
+   an arm switcher; the open arm's sections use the ordinary section chrome. */
+.kywi-editor-vc {
+  position: relative;
+  border: 1px solid var(--kywi-editor-region-border);
+  border-radius: var(--kywi-editor-radius-lg);
+  margin-bottom: var(--kywi-editor-sp-3);
+  background: var(--kywi-editor-accent-light);
+  box-shadow: var(--kywi-editor-card-shadow);
+  transition: border-color var(--kywi-editor-ease), box-shadow var(--kywi-editor-ease);
+}
+.kywi-editor-vc--selected {
+  border-color: var(--kywi-editor-selected-border);
+  box-shadow: 0 0 0 2px var(--kywi-editor-accent-ring);
+}
+
+.kywi-editor-vc-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--kywi-editor-sp-2);
+  min-height: 34px;
+  padding: 0 var(--kywi-editor-sp-2) 0 var(--kywi-editor-sp-3);
+  border-bottom: 1px solid var(--kywi-editor-region-border);
+  border-radius: var(--kywi-editor-radius-lg) var(--kywi-editor-radius-lg) 0 0;
+  cursor: pointer;
+}
+.kywi-editor-vc-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: var(--kywi-editor-radius-pill);
+  background: var(--kywi-editor-accent);
+  color: var(--kywi-editor-on-accent);
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.kywi-editor-vc-title {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--kywi-editor-card-ink);
+  user-select: none;
+}
+.kywi-editor-vc-arm-count {
+  font-size: 11px;
+  color: var(--kywi-editor-card-muted);
+  user-select: none;
+}
+.kywi-editor-vc-toolbar-actions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.kywi-editor-vc-arms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: var(--kywi-editor-sp-2) var(--kywi-editor-sp-3) 0;
+}
+.kywi-editor-vc-arm-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: var(--kywi-editor-radius-pill);
+  border: 1px solid var(--kywi-editor-card-border);
+  background: var(--kywi-editor-surface);
+  color: var(--kywi-editor-card-ink);
+  font-size: 11.5px;
+  font-weight: 600;
+  font-family: var(--kywi-editor-font);
+  cursor: pointer;
+  transition: background var(--kywi-editor-ease), color var(--kywi-editor-ease), border-color var(--kywi-editor-ease);
+}
+.kywi-editor-vc-arm-btn:hover {
+  border-color: var(--kywi-editor-region-border);
+  color: var(--kywi-editor-accent-press);
+}
+.kywi-editor-vc-arm-btn--active {
+  background: var(--kywi-editor-accent);
+  border-color: var(--kywi-editor-accent);
+  color: var(--kywi-editor-on-accent);
+}
+.kywi-editor-vc-arm-weight {
+  font-size: 10px;
+  font-weight: 700;
+  opacity: 0.75;
+}
+
+.kywi-editor-vc-arm-body {
+  padding: var(--kywi-editor-sp-2) var(--kywi-editor-sp-3) var(--kywi-editor-sp-3);
+}
+.kywi-editor-vc-arm-empty {
+  margin: 0 0 var(--kywi-editor-sp-2);
+  padding: var(--kywi-editor-sp-3);
+  border: 1.5px dashed var(--kywi-editor-region-border);
+  border-radius: var(--kywi-editor-radius);
+  font-size: 12px;
+  color: var(--kywi-editor-card-muted);
+  text-align: center;
+}
+.kywi-editor-vc-add-section {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: var(--kywi-editor-radius-sm);
+  border: 1px dashed var(--kywi-editor-region-border);
+  background: transparent;
+  color: var(--kywi-editor-accent-press);
+  font-size: 11.5px;
+  font-weight: 600;
+  font-family: var(--kywi-editor-font);
+  cursor: pointer;
+  transition: background var(--kywi-editor-ease);
+}
+.kywi-editor-vc-add-section:hover { background: var(--kywi-editor-accent-light); }
+
 /* ── Section insert line ───────────────────────────────────────────────────── */
 .kywi-editor-section-insert {
   position: relative;
@@ -1489,6 +1619,14 @@ input[type="color"].kywi-token-raw-input { height: 34px; padding: 3px; cursor: p
   font-size: 13px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
 }
+.kywi-edit-toolbar-mark {
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: var(--kywi-editor-text-strong);
+  padding-right: 4px;
+  border-right: 1px solid var(--kywi-editor-border-strong);
+  margin-right: 2px;
+}
 .kywi-edit-toolbar-status {
   display: inline-flex;
   align-items: center;
@@ -1504,6 +1642,12 @@ input[type="color"].kywi-token-raw-input { height: 34px; padding: 3px; cursor: p
   box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
   display: inline-block;
 }
+/* Draft (and any non-published status) reads as amber, not the "all good"
+   published green — the dot is the at-a-glance signal before the label loads. */
+.kywi-edit-toolbar-status-dot--draft {
+  background: var(--kywi-editor-warning);
+  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
+}
 .kywi-edit-toolbar-title { font-weight: 650; color: var(--kywi-editor-text-strong); }
 .kywi-edit-toolbar-spacer { flex: 1; }
 .kywi-edit-toolbar-edit,
@@ -1533,31 +1677,85 @@ input[type="color"].kywi-token-raw-input { height: 34px; padding: 3px; cursor: p
 .kywi-edit-toolbar-link:hover { filter: brightness(1.08); border-color: var(--kywi-editor-accent); }
 .kywi-frontend-edit--browsing { padding-top: 44px; }
 
-/* ── Overlay shell ─────────────────────────────────────────────────────────── */
-.kywi-overlay-shell {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  background: var(--kywi-editor-bg);
+/* ============================================================================
+   In-place front-of-site editor (kywi-cms#94).
+
+   The editor is NOT a modal over the page. `.kywi-overlay-shell` contributes no
+   box at all (`display: contents`), so the page below keeps its own document
+   flow, real width and own stylesheet — the canvas emits the public renderer's
+   markup (`.kywi-region` / `.kywi-section` / `.kywi-column` /
+   `.kywi-module-wrapper`) and the site styles it exactly as it does when nobody
+   is editing. Everything the editor adds is either a fixed rail docked to a
+   viewport edge (`.kywi-overlay-chrome`) or an absolutely-positioned affordance
+   that paints over the page without displacing it (`.kywi-ip-*`).
+   ========================================================================== */
+
+:root {
+  --kywi-overlay-bar-height: 46px;
+  --kywi-overlay-rail-left: var(--kywi-editor-panel-width-left);
+  --kywi-overlay-rail-right: var(--kywi-editor-panel-width-right);
+}
+
+/* The fixed edit bar would otherwise cover the site's own header — offset the
+   document for exactly as long as the editor is mounted, the same way the
+   browse-mode toolbar does it (kywi-cms#93). */
+.kywi-frontend-edit--editing { padding-top: var(--kywi-overlay-bar-height); }
+
+.kywi-overlay-shell { display: contents; }
+
+/* Admin-shell guard. admin.css used to group `.kywi-overlay-shell` with its
+   pickers (`position: fixed; inset: 0` + scrim + blur) — that grouping is what
+   made this editor modal. It is removed there; this re-asserts the in-place
+   behaviour at higher specificity so a stale admin.css can never box the page
+   again, and so a host that still wraps the editor in `.kywi-admin-shell`
+   (which is a full-viewport flex surface) gets no surprise chrome. */
+.kywi-admin-shell .kywi-overlay-shell {
+  position: static;
+  inset: auto;
+  display: contents;
+  padding: 0;
+  background: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  animation: none;
+}
+
+/* Modals still want the admin design system's selectors to match, but not its
+   full-viewport box — hosting them under a `display: contents` shell gives the
+   styling without the surface. */
+.kywi-admin-shell.kywi-overlay-dialog-host { display: contents; }
+
+/* ── Chrome baseline ────────────────────────────────────────────────────────
+   Typography and box-sizing live on the CHROME, never on the shell: anything
+   set on the shell would inherit straight into the page and change how the
+   site renders. */
+.kywi-overlay-chrome {
   font-family: var(--kywi-editor-font);
   font-size: 13px;
+  line-height: 1.45;
   color: var(--kywi-editor-panel-text);
   -webkit-font-smoothing: antialiased;
 }
+
+/* ── Edit bar (fixed, top) ─────────────────────────────────────────────────── */
 .kywi-overlay-toolbar {
-  height: var(--kywi-editor-toolbar-height);
-  flex-shrink: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--kywi-overlay-bar-height);
+  z-index: var(--kywi-z-overlay, 1000);
   display: flex;
   align-items: center;
   gap: var(--kywi-editor-sp-2);
   padding: 0 var(--kywi-editor-sp-3);
   background: linear-gradient(180deg, #191922, var(--kywi-editor-panel-chrome));
   border-bottom: 1px solid var(--kywi-editor-border);
-  color: var(--kywi-editor-panel-text);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
   font-size: 12.5px;
+  overflow-x: auto;
 }
+.kywi-overlay-toolbar > * { flex-shrink: 0; }
 .kywi-overlay-page-title {
   display: inline-flex;
   align-items: center;
@@ -1578,7 +1776,26 @@ input[type="color"].kywi-token-raw-input { height: 34px; padding: 3px; cursor: p
   box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
   flex-shrink: 0;
 }
-.kywi-overlay-toolbar-spacer { flex: 1; }
+.kywi-overlay-toolbar-spacer { flex: 1 1 auto; min-width: var(--kywi-editor-sp-3); }
+
+/* The way out. Deliberately the last control and visually distinct — the #94
+   complaint was that there was no obvious way to leave. */
+.kywi-overlay-toolbar-done {
+  border-color: var(--kywi-editor-panel-faint);
+  color: var(--kywi-editor-text-strong);
+  font-weight: 650;
+}
+.kywi-overlay-toolbar-done:hover {
+  background: var(--kywi-editor-accent);
+  border-color: transparent;
+  color: #fff;
+}
+
+.kywi-editor-iconbtn--on {
+  border-color: var(--kywi-editor-accent);
+  color: var(--kywi-editor-text-strong);
+  background: var(--kywi-editor-accent-light);
+}
 
 .kywi-overlay-preview-toggle {
   display: inline-flex;
@@ -1604,36 +1821,262 @@ input[type="color"].kywi-token-raw-input { height: 34px; padding: 3px; cursor: p
 .kywi-overlay-preview-btn:hover { color: var(--kywi-editor-text-strong); }
 .kywi-overlay-preview-btn--active { background: var(--kywi-editor-accent); color: #fff; }
 
-.kywi-overlay-body {
-  flex: 1;
+/* ── Rails (fixed, over the viewport margins) ───────────────────────────────
+   Rails float ABOVE the page; they never reserve layout width, so the page
+   underneath keeps the width it really has. */
+.kywi-overlay-rail {
+  position: fixed;
+  top: var(--kywi-overlay-bar-height);
+  bottom: 0;
+  z-index: calc(var(--kywi-z-overlay, 1000) - 1);
   display: flex;
-  min-height: 0;
+  flex-direction: column;
   overflow: hidden;
-}
-.kywi-overlay-left-panel {
-  width: var(--kywi-editor-panel-width-left);
-  flex-shrink: 0;
-  overflow-y: auto;
   background: var(--kywi-editor-panel-bg);
-  border-right: 1px solid var(--kywi-editor-border);
+  box-shadow: var(--kywi-editor-shadow-2);
+  transition: width var(--kywi-editor-ease), transform var(--kywi-editor-ease),
+    opacity var(--kywi-editor-ease);
 }
-.kywi-overlay-left-panel .kywi-editor-palette { width: 100%; border-right: none; }
-.kywi-overlay-canvas {
-  flex: 1;
-  min-width: 0;
-  overflow-y: auto;
-  margin: 0 auto;
-  background: var(--kywi-editor-bg);
+.kywi-overlay-rail--left {
+  left: 0;
+  width: var(--kywi-overlay-rail-left);
+  border-right: 1px solid var(--kywi-editor-border);
 }
-.kywi-overlay-canvas .kywi-editor-canvas-content { height: 100%; }
-.kywi-overlay-right-panel {
-  width: var(--kywi-editor-panel-width-right);
-  flex-shrink: 0;
-  overflow-y: auto;
-  background: var(--kywi-editor-panel-bg);
+.kywi-overlay-rail--right {
+  right: 0;
+  width: var(--kywi-overlay-rail-right);
   border-left: 1px solid var(--kywi-editor-border);
 }
-.kywi-overlay-right-panel .kywi-editor-props-panel { width: 100%; border-left: none; height: 100%; }
+/* Same width-collapse precedent as `.kywi-editor-props-panel--hidden`.
+   `visibility: hidden` (not just opacity) also takes the rail's controls out of
+   the tab order, so a collapsed rail can't be reached by keyboard. */
+.kywi-overlay-rail--collapsed {
+  width: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.kywi-overlay-rail--left.kywi-overlay-rail--collapsed { transform: translateX(-100%); }
+.kywi-overlay-rail--right.kywi-overlay-rail--collapsed { transform: translateX(100%); }
+.kywi-overlay-rail > * { flex: 1; min-height: 0; }
+.kywi-overlay-rail .kywi-editor-palette { width: 100%; border-right: none; }
+.kywi-overlay-rail .kywi-editor-props-panel { width: 100%; border-left: none; height: 100%; }
+/* The rail owns the collapse; the panel inside must not also zero its width. */
+.kywi-overlay-rail .kywi-editor-props-panel--hidden { width: 100%; }
+
+/* ── The page ──────────────────────────────────────────────────────────────── */
+.kywi-ip-page { position: relative; }
+/* Tablet / mobile preview constrains the page — it stays THE PAGE, centred, not
+   a letterbox floating in editor chrome. */
+.kywi-ip-page--constrained {
+  margin-left: auto;
+  margin-right: auto;
+  box-shadow: 0 0 0 1px var(--kywi-editor-border-strong);
+}
+.kywi-ip-canvas { position: relative; }
+
+/* ── Selection + hover affordances ─────────────────────────────────────────
+   `outline` (never `border`) so an affordance can never move the page by a
+   pixel. Section → container → module reads as progressively stronger. */
+.kywi-ip-section,
+.kywi-ip-vc,
+.kywi-ip-module { position: relative; }
+
+.kywi-ip-section:hover {
+  outline: 1px dashed var(--kywi-editor-region-border);
+  outline-offset: -1px;
+}
+.kywi-ip-section--selected,
+.kywi-ip-section--selected:hover {
+  outline: 2px solid var(--kywi-editor-accent);
+  outline-offset: -2px;
+}
+
+.kywi-ip-vc:hover {
+  outline: 1px dashed var(--kywi-editor-accent);
+  outline-offset: 2px;
+}
+.kywi-ip-vc--selected,
+.kywi-ip-vc--selected:hover {
+  outline: 2px solid var(--kywi-editor-accent);
+  outline-offset: 2px;
+}
+
+.kywi-ip-module:hover {
+  outline: 1.5px solid var(--kywi-editor-region-border);
+  outline-offset: 2px;
+}
+.kywi-ip-module--selected,
+.kywi-ip-module--selected:hover {
+  outline: 2px solid var(--kywi-editor-accent);
+  outline-offset: 2px;
+}
+.kywi-ip-module--editing,
+.kywi-ip-module--editing:hover,
+.kywi-ip-module--editing:focus {
+  outline: 2px solid var(--kywi-editor-accent);
+  outline-offset: 3px;
+  cursor: text;
+  box-shadow: 0 0 0 6px var(--kywi-editor-accent-ring);
+}
+
+/* ── Floating chrome (chips, section/container bars, handles) ───────────────
+   Invisible AND click-through until its owner is hovered or selected, so the
+   page never collects stray editor hit-targets. */
+.kywi-ip-chrome,
+.kywi-ip-chip {
+  position: absolute;
+  z-index: 6;
+  font-family: var(--kywi-editor-font);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--kywi-editor-ease);
+}
+.kywi-ip-section:hover > .kywi-ip-section-chrome,
+.kywi-ip-section--selected > .kywi-ip-section-chrome,
+.kywi-ip-vc:hover > .kywi-ip-vc-chrome,
+.kywi-ip-vc--selected > .kywi-ip-vc-chrome,
+.kywi-ip-module:hover > .kywi-ip-chip,
+.kywi-ip-module--selected > .kywi-ip-chip,
+.kywi-ip-module:hover > .kywi-ip-module-actions,
+.kywi-ip-module--selected > .kywi-ip-module-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.kywi-ip-section-chrome,
+.kywi-ip-vc-chrome {
+  top: 0;
+  left: 0;
+  transform: translateY(-100%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 26px;
+  padding: 3px 8px;
+  border-radius: var(--kywi-editor-radius-sm) var(--kywi-editor-radius-sm) 0 0;
+  background: var(--kywi-editor-panel-chrome);
+  color: var(--kywi-editor-panel-text);
+  font-size: 11px;
+  line-height: 1.3;
+  white-space: nowrap;
+  box-shadow: var(--kywi-editor-shadow-1);
+}
+.kywi-ip-vc-chrome { flex-wrap: wrap; max-width: 100%; white-space: normal; }
+/* Chrome controls are always live once the bar itself is visible. */
+.kywi-ip-chrome .kywi-editor-section-toolbar-actions { opacity: 1; }
+.kywi-ip-chrome .kywi-editor-section-title,
+.kywi-ip-chrome .kywi-editor-vc-title,
+.kywi-ip-chrome .kywi-editor-vc-arm-count { color: var(--kywi-editor-panel-text); }
+.kywi-ip-chrome .kywi-editor-section-handle { color: var(--kywi-editor-panel-muted); }
+/* The shared toolbar button is inked for the light artboard card; on the dark
+   floating bar it has to be re-inked or it reads as dark-on-dark. */
+.kywi-ip-chrome .kywi-editor-section-toolbar-btn { color: var(--kywi-editor-panel-text); }
+.kywi-ip-chrome .kywi-editor-section-toolbar-btn:hover {
+  background: var(--kywi-editor-accent);
+  border-color: transparent;
+  color: #fff;
+}
+/* …but delete stays destructive-red on hover, as it is in the artboard. */
+.kywi-ip-chrome .kywi-editor-section-toolbar-btn:last-child:hover {
+  background: var(--kywi-editor-danger-strong);
+  border-color: transparent;
+  color: #fff;
+}
+.kywi-ip-chrome .kywi-editor-vc-arms { border: none; padding: 0; margin: 0; background: none; }
+
+.kywi-ip-chip {
+  top: 0;
+  left: 0;
+  transform: translateY(-100%);
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: var(--kywi-editor-radius-pill);
+  background: var(--kywi-editor-accent);
+  color: #fff;
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: capitalize;
+  box-shadow: var(--kywi-editor-shadow-1);
+}
+
+.kywi-ip-module-actions {
+  top: 0;
+  right: 0;
+  display: flex;
+  gap: 4px;
+  padding: 3px;
+  border-radius: var(--kywi-editor-radius-sm);
+  background: rgba(20, 20, 29, 0.92);
+  box-shadow: var(--kywi-editor-shadow-1);
+}
+
+/* ── Empty column + section insert ─────────────────────────────────────────── */
+.kywi-ip-empty-column {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 56px;
+  border: 1.5px dashed var(--kywi-editor-region-border);
+  border-radius: var(--kywi-editor-radius);
+  color: var(--kywi-editor-accent);
+  font-family: var(--kywi-editor-font);
+  font-size: 11.5px;
+  font-weight: 500;
+}
+
+/* Zero-height: the insert affordance floats in the gap after the last node so
+   it can never add a band of editor whitespace to the real page. */
+.kywi-ip-insert { position: relative; height: 0; }
+.kywi-ip-insert-btn {
+  position: absolute;
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 7;
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid var(--kywi-editor-border-strong);
+  background: var(--kywi-editor-panel-chrome);
+  color: #fff;
+  font-family: var(--kywi-editor-font);
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  /* Faint rather than invisible: an opacity-0 button would still swallow the
+     clicks under it, which on a real page is worse than a quiet affordance. */
+  opacity: 0;
+  transition: opacity var(--kywi-editor-ease), background var(--kywi-editor-ease);
+}
+.kywi-ip-region:hover .kywi-ip-insert-btn { opacity: 0.45; }
+.kywi-ip-insert-btn:hover,
+.kywi-ip-insert-btn:focus-visible { opacity: 1; background: var(--kywi-editor-accent); }
+
+.kywi-ip-add-arm-section {
+  display: block;
+  width: 100%;
+  margin-top: var(--kywi-editor-sp-2);
+  padding: 6px 10px;
+  border: 1px dashed var(--kywi-editor-region-border);
+  border-radius: var(--kywi-editor-radius-sm);
+  background: transparent;
+  color: var(--kywi-editor-accent);
+  font-family: var(--kywi-editor-font);
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--kywi-editor-ease);
+}
+.kywi-ip-vc:hover .kywi-ip-add-arm-section,
+.kywi-ip-vc--selected .kywi-ip-add-arm-section { opacity: 1; }
 
 /* ============================================================================
    Admin-shell override guard.
@@ -1714,5 +2157,5 @@ input[type="color"].kywi-token-raw-input { height: 34px; padding: 3px; cursor: p
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .kywi-editor-root *, .kywi-overlay-shell * { transition-duration: 0.01ms !important; }
+  .kywi-editor-root *, .kywi-overlay-chrome * { transition-duration: 0.01ms !important; }
 }

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

@@ -1,5 +1,5 @@
 export { LayoutEditor } from './layout-editor.js';
-export type { EditorState, EditorAction } from './editor-state.js';
+export type { EditorState, EditorAction, VariantArmPatch, VariantContainerPatch, } from './editor-state.js';
 export { ModeToggle } from './mode-toggle.js';
 export { PagePropertiesPanel } from './page-properties.js';
 export { buildConnectedModuleNode, buildConnectedSectionNode, detachModuleFromComponent, detachSectionFromComponent, resolveSectionComponentDefinition, saveAsComponent, saveAsTemplate, cloneSection, cloneModule, copyToClipboard, pasteFromClipboard, type ComponentDefinitionInput, type SectionTemplateInput, type ClipboardPayload, } from './component-actions.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,iCAAiC,EACjC,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC1F,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,YAAY,EACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,qBAAqB,GACtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,iCAAiC,EACjC,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC1F,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/admin/layout-editor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/admin/layout-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,iCAAiC,EACjC,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,GAInB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/admin/layout-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAOjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,iCAAiC,EACjC,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,GAInB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/admin/layout-editor/inline-text.d.ts

@@ -0,0 +1,44 @@
+/**
+ * inline-text.ts
+ * Which modules can be text-edited directly on the page, and how to read the
+ * edited value back out of the DOM (kywi-cms#94).
+ *
+ * The front-of-site editor makes a text-bearing module's own rendered element
+ * `contenteditable` — the real `<h2>`, `<p>` or rich-text `<div>` the visitor
+ * sees, with the site's real styling — instead of swapping it for an input.
+ * Committing writes the SAME prop the props panel writes, through the SAME
+ * `UPDATE_PROPS` action, so there is one save path and undo/redo just work.
+ */
+import type { ModuleConfig } from '../../config/types.js';
+/** The prop a module's inline text edit writes. */
+export interface InlineTextProp {
+    /** Prop name on the module node (e.g. `text` for heading, `content` for richText). */
+    name: string;
+    /** True when the prop holds HTML (rich text) rather than a plain string. */
+    html: boolean;
+}
+/**
+ * The module's *primary* text prop, or null when it has none.
+ *
+ * Deliberately only the FIRST declared prop: that is the module's headline
+ * content by convention across the registry (heading → `text`, richText →
+ * `content`, button → `label`), and it keeps a module like `image` — whose
+ * first prop is the image itself and whose `alt` is a text prop further down —
+ * out of inline editing, where typing over the picture would be nonsense.
+ */
+export declare function resolveInlineTextProp(config: ModuleConfig | null | undefined): InlineTextProp | null;
+/**
+ * Read the edited value back out of an editing host.
+ *
+ * The host is the module's wrapper element, which also carries the editor's own
+ * floating chrome (type chip, action cluster). Chrome is marked with
+ * `data-kywi-editor-chrome` and skipped, so the value comes from the module's
+ * own rendered element — `innerHTML` for a rich-text prop, `textContent` for a
+ * plain one.
+ *
+ * HTML values are put through the same `sanitizeHtml` the renderer applies, so
+ * what is stored is exactly what will render — contenteditable cannot smuggle a
+ * shape the public page would strip anyway.
+ */
+export declare function readInlineTextValue(host: HTMLElement, html: boolean): string;
+//# sourceMappingURL=inline-text.d.ts.map

package/dist/admin/layout-editor/inline-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-text.d.ts","sourceRoot":"","sources":["../../../src/admin/layout-editor/inline-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAwB,MAAM,uBAAuB,CAAA;AAG/E,mDAAmD;AACnD,MAAM,WAAW,cAAc;IAC7B,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,IAAI,EAAE,OAAO,CAAA;CACd;AAaD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,cAAc,GAAG,IAAI,CASpG;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,CAS5E"}