@charlescms/astro 0.1.0

package/src/editor-styles.js

@@ -0,0 +1,243 @@
+// All CSS for the editor's own UI (toolbar, panels, highlight ring, boundary hints).
+// It lives in one exported string so the runtime can inject it with a single
+// <style> tag, and so the markup logic in client.js stays readable. Class names
+// are all prefixed charlescms- and z-indexes sit at the top of the stacking
+// order, so these rules never collide with the site's own styles.
+export const EDITOR_CSS = `
+
+    /* ----- Design tokens ----- */
+    :root { --charlescms-ink: #172026; --charlescms-muted: #5b6970; --charlescms-line: #d8ded8; --charlescms-accent: #176b5c; --charlescms-gold: #f2c14e; --charlescms-danger: #a3342a; --charlescms-edit: #2563eb; --charlescms-edit-soft: rgba(37,99,235,.14); }
+
+    /* ----- Page adjustments while the editor is active ----- */
+    html.charlescms-active { scroll-behavior: auto !important; scroll-padding-bottom: var(--charlescms-toolbar-reserve, 120px); scroll-padding-top: 80px; }
+    html.charlescms-active body { padding-bottom: calc(var(--charlescms-page-padding-bottom, 0px) + var(--charlescms-toolbar-reserve, 120px)) !important; }
+    /* One uniform edit hint for EVERY editable element, shown only on hover so
+       the page looks like its original design — never a persistent border that
+       competes with the site's own. The "Show editable" toggle reveals them all. */
+
+    /* ----- Editable elements + "Show editable" rings ----- */
+    [data-charlescms-editable="true"] { border-radius: 3px; cursor: pointer !important; }
+    /* "Show editable" rings EVERY editable element identically. It uses OUTLINE
+       with a NEGATIVE offset (drawn just inside the element): an inset box-shadow
+       is INVISIBLE on replaced elements like <img>, so images would show no ring;
+       a negative-offset outline renders on images and text alike and, being
+       inside the element's own box, is never clipped by an ancestor's
+       overflow:hidden. The hover highlight itself is the JS overlay
+       (.charlescms-spot) — a real DIV, so its ring shows on covered images too. */
+    /* Passive "Show editable": a soft fill + a 1px hairline ring drawn INSIDE the
+       element's own box (inset box-shadow). Because it lives inside the box it
+       never clips the text and never overlaps a neighbour — unlike an outside
+       outline, which did both. */
+    /* Dual-tone ring: the blue line plus a faint white inner halo, so the mark
+       stays readable on ANY customer design — dark heroes and footers included.
+       Ring ONLY — never a background fill: a fill would REPLACE the element's
+       own background (a white button on a dark hero turned unreadable). */
+    html.charlescms-show-all [data-charlescms-editable="true"] { box-shadow: inset 0 0 0 1px rgba(37,99,235,.45), inset 0 0 0 2px rgba(255,255,255,.35) !important; }
+    /* Replaced elements (images, video, embeds) paint OVER any fill or inset
+       shadow, so they use a thin inset outline instead (also never clipped by
+       an overflow:hidden wrapper). */
+    /* Replaced elements paint over inset shadows, so: blue outline just inside
+       the box + a 1px white OUTER halo (outer shadows do render on them). */
+    html.charlescms-show-all :is(img, video, iframe, embed, object)[data-charlescms-editable="true"] { outline: 2px solid rgba(37,99,235,.6) !important; outline-offset: -2px !important; box-shadow: 0 0 0 1px rgba(255,255,255,.45) !important; }
+    /* SVG text (e.g. a logo monogram) can't show a CSS fill or box-shadow, so it
+       gets a thin outline instead — which SVG elements do render. */
+    html.charlescms-show-all text[data-charlescms-editable="true"] { box-shadow: none !important; outline: 1.5px solid rgba(37,99,235,.7) !important; outline-offset: 2px !important; }
+    .charlescms-toolbar [data-charlescms-highlight].charlescms-toggle-on { background: var(--charlescms-edit); border-color: var(--charlescms-edit); color: #fff; }
+
+    /* The one unified highlight: a ring at the element's exact bounds (pointer
+       through to the page) plus a clickable label tab that names the action. */
+    /* The one unified highlight: a ring at the element's exact bounds (clicks
+       pass through to the page) plus a clickable label tab that names the action.
+       The tab sits just ABOVE the element so it never covers the content. */
+
+    /* ----- Hover highlight (ring + label tab) ----- */
+    /* A quiet hover ring only (pointer-events:none) — it never covers content or
+       blocks a click; the element itself is clicked to edit. */
+    .charlescms-spot { position: fixed; z-index: 2147483640; pointer-events: none; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--charlescms-edit), 0 0 0 1px rgba(37,99,235,.22); background: rgba(37,99,235,.05); }
+
+    .charlescms-boundary-hint { position: fixed; z-index: 2147483646; max-width: 264px; display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; transform: translateY(4px) scale(.98); transform-origin: top left; background: rgba(20,26,32,.96); color: #dfe5e4; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; font: 500 12px/1.45 system-ui, sans-serif; box-shadow: 0 14px 38px rgba(6,10,14,.42); backdrop-filter: blur(16px); pointer-events: none; opacity: 0; transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1); }
+    .charlescms-boundary-hint-in { opacity: 1; transform: translateY(0) scale(1); }
+    .charlescms-boundary-hint-icon { flex: none; font-size: 14px; line-height: 1.4; opacity: .85; }
+    .charlescms-boundary-hint-body { display: flex; flex-direction: column; gap: 2px; }
+    .charlescms-boundary-hint-title { font-weight: 650; color: #fff; letter-spacing: .01em; }
+    .charlescms-boundary-hint--interactive { border-color: rgba(255,196,84,.38); }
+    .charlescms-boundary-hint--interactive .charlescms-boundary-hint-icon { color: #ffc454; opacity: 1; }
+    .charlescms-boundary-hint--interactive .charlescms-boundary-hint-title { color: #ffd98a; }
+
+    /* Outlines the whole hydrated island so the user sees the off-limits boundary. */
+    .charlescms-island-veil { position: fixed; z-index: 2147483645; pointer-events: none; border-radius: 12px; border: 1.5px dashed rgba(255,196,84,.5); background: rgba(255,196,84,.045); opacity: 0; transition: opacity .18s ease; }
+    .charlescms-island-veil-in { opacity: 1; }
+    .charlescms-island-badge { position: fixed; z-index: 2147483646; pointer-events: none; padding: 3px 9px; border-radius: 999px; background: #ffc454; color: #1a1205; font: 700 11px/1.4 system-ui, sans-serif; letter-spacing: .02em; box-shadow: 0 5px 16px rgba(8,12,18,.4); white-space: nowrap; opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
+    .charlescms-island-badge.charlescms-island-veil-in { opacity: 1; transform: translateY(0); }
+
+    /* ----- Disambiguation picker (overlapping / tightly-packed editables) ----- */
+    /* Appears AT the click point so it's always reachable; each row is a big target
+       that names the action and previews the content, and hovering a row highlights
+       the matching element. The user chooses — the editor never guesses wrong. */
+    .charlescms-picker-backdrop { position: fixed; inset: 0; z-index: 2147483644; background: transparent; }
+    .charlescms-picker { position: fixed; z-index: 2147483646; box-sizing: border-box; width: min(330px, calc(100vw - 16px)); padding: 6px; background: rgba(251,252,250,.99); border: 1px solid rgba(103,119,112,.28); border-radius: 12px; box-shadow: 0 22px 60px rgba(19,29,34,.28), 0 2px 8px rgba(19,29,34,.1); backdrop-filter: blur(16px); font: 13px system-ui, sans-serif; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
+    .charlescms-picker-head { padding: 7px 10px 5px; color: #6b7a76; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
+    .charlescms-picker-item { box-sizing: border-box; display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 44px; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--charlescms-ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
+    .charlescms-picker-item:hover, .charlescms-picker-item:focus-visible { background: var(--charlescms-edit-soft); outline: none; }
+    .charlescms-picker-label { flex: 0 0 auto; font-weight: 750; white-space: nowrap; }
+    .charlescms-picker-prev { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--charlescms-muted); }
+
+    /* ----- "Add section" controls ----- */
+    .charlescms-section-gap { position: fixed; z-index: 2147483645; display: flex; align-items: center; justify-content: center; gap: 7px; height: 28px; border: 0; border-top: 1px dashed rgba(23,107,92,.55); background: transparent; color: var(--charlescms-accent); transform: translateY(-50%); font: 800 11px/1 system-ui, sans-serif; cursor: pointer; opacity: .66; transition: opacity .15s ease, color .15s ease, border-color .15s ease; }
+    .charlescms-section-gap span { display: inline-flex; align-items: center; background: rgba(248,250,247,.96); padding: 4px 7px; border: 1px solid rgba(23,107,92,.24); border-radius: 999px; box-shadow: 0 4px 14px rgba(23,32,38,.08); }
+    .charlescms-section-gap span:first-child { width: 20px; height: 20px; justify-content: center; padding: 0; background: var(--charlescms-accent); color: white; border-color: var(--charlescms-accent); font-size: 16px; }
+    .charlescms-section-gap:hover, .charlescms-section-gap:focus-visible { opacity: 1; color: #0d5549; border-color: var(--charlescms-gold); outline: none; }
+    .charlescms-section-gap[hidden] { display: none !important; }
+    .charlescms-editing { outline: 2px solid var(--charlescms-edit) !important; outline-offset: 3px !important; cursor: text !important; background: var(--charlescms-edit-soft) !important; }
+    /* The Tiptap/ProseMirror editable mounted inside the element edits in place,
+       inheriting the element's own font/size/colour so the page stays the preview. */
+    .charlescms-pm { outline: none !important; white-space: pre-wrap; }
+    .charlescms-pm:focus, .charlescms-pm:focus-visible { outline: none !important; }
+    .charlescms-pm p { margin: 0; }
+    .charlescms-editing-plain { -webkit-text-fill-color: initial !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #f6f6fb !important; background-color: rgba(12,12,18,.92) !important; caret-color: #f6f6fb !important; border-radius: 8px !important; padding: 0 .15em !important; }
+
+    /* ----- Inline rich-text toolbar ----- */
+    .charlescms-rt-toolbar { position: fixed; z-index: 2147483647; display: flex; flex-direction: column; gap: 5px; align-items: stretch; padding: 6px; background: rgba(23,32,38,.96); color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; box-shadow: 0 18px 50px rgba(8,14,18,.34); font: 13px system-ui, sans-serif; backdrop-filter: blur(14px); }
+    .charlescms-rt-row { display: flex; gap: 5px; align-items: center; }
+    .charlescms-rt-hint { max-width: 320px; padding: 6px 8px 2px; color: var(--charlescms-gold); font-size: 12px; line-height: 1.35; }
+    .charlescms-rt-hint[hidden] { display: none; }
+    .charlescms-rt-toolbar button { min-width: 32px; height: 32px; padding: 0 9px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: white; font: inherit; cursor: pointer; }
+    .charlescms-rt-toolbar button:hover { background: rgba(255,255,255,.14); }
+    .charlescms-rt-toolbar [data-rt-save] { background: var(--charlescms-gold); color: var(--charlescms-ink); font-weight: 900; }
+    .charlescms-rt-sep { width: 1px; height: 20px; background: rgba(255,255,255,.2); margin: 0 4px; }
+    .charlescms-rt-error { position: absolute; top: calc(100% + 6px); left: 0; max-width: 320px; color: #fff; background: var(--charlescms-danger); border-radius: 7px; padding: 8px 10px; line-height: 1.35; font-size: 12px; }
+    /* Shrink-to-content (no forced width) so the bar is always exactly as wide as
+       what's in it — no dead space. Three tight groups: brand dot + name, status,
+       and a divided action cluster. Reads as one considered object in both the
+       clean and the "changes staged" state. */
+
+    /* ----- Main toolbar ----- */
+    .charlescms-toolbar { position: fixed; right: 16px; bottom: 16px; z-index: 2147483647; display: flex; gap: 0 12px; align-items: center; flex-wrap: wrap; max-width: min(920px, calc(100vw - 32px)); padding: 7px 10px 7px 15px; background: rgba(18,25,30,.92); color: #fff; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; font: 13px system-ui, sans-serif; box-shadow: 0 16px 44px rgba(8,14,18,.3); backdrop-filter: blur(20px); }
+    .charlescms-brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
+    .charlescms-brand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--charlescms-accent); box-shadow: 0 0 0 3px rgba(23,107,92,.22); }
+    .charlescms-brand strong { font-size: 12.5px; font-weight: 650; letter-spacing: .01em; opacity: .96; }
+    .charlescms-info { flex: 0 1 auto; min-width: 0; color: #8a9796; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .charlescms-info:empty { display: none; }
+    .charlescms-info-pending { color: var(--charlescms-gold); font-weight: 700; }
+    .charlescms-toolbar-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; flex-wrap: wrap; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.1); }
+    .charlescms-toolbar button { color: #dfe6e5; text-decoration: none; border: 0; padding: 7px 11px; background: transparent; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; }
+    .charlescms-toolbar button:hover { background: rgba(255,255,255,.08); color: #fff; }
+    .charlescms-toolbar [data-charlescms-publish] { background: var(--charlescms-gold); border-color: var(--charlescms-gold); color: var(--charlescms-ink); font-weight: 700; padding: 7px 14px; }
+    .charlescms-toolbar [data-charlescms-publish]:hover { background: #e7b43e; color: var(--charlescms-ink); }
+    .charlescms-toolbar [data-charlescms-discard] { color: #ffd7d1; border-color: rgba(255, 160, 145, .28); }
+    .charlescms-toolbar button:disabled { cursor: not-allowed; opacity: .55; }
+
+    /* ----- Panels (editor, content, versions) ----- */
+    /* ONE panel family: every panel (field editor, content browser, versions)
+       shares the same surface, width, radius and shadow, so moving between the
+       content list and an editor never "jumps" — only the inside changes. */
+    /* The panel never grows past the viewport (max-height) and is the SINGLE
+       scroll container; its header and action row stay pinned (sticky, below) so
+       Save is always one tap away no matter how long the form is. */
+    .charlescms-panel { position: fixed; right: 16px; top: 16px; z-index: 2147483647; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: grid; gap: 15px; overflow: auto; overscroll-behavior: contain; padding: 22px; background: rgba(251,252,250,.985); color: var(--charlescms-ink); border: 1px solid rgba(103,119,112,.24); border-radius: 16px; box-shadow: 0 32px 90px rgba(19,29,34,.2), 0 2px 8px rgba(19,29,34,.08); font: 14px system-ui, sans-serif; backdrop-filter: blur(16px); }
+    /* Pinned header: stays visible (with title + close) while the form scrolls.
+       The negative top/side margins + restored padding let it span the panel's
+       full width and cover the panel's own top padding as content scrolls under. */
+    .charlescms-panel-header { position: sticky; top: -22px; z-index: 3; margin: -22px -22px 0; padding: 22px 22px 13px; background: rgba(251,252,250,.97); backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e2e7e2; }
+    .charlescms-back { background: none; border: 0; margin: 0 0 5px; padding: 0; color: #6b7a76; font: 650 12px system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; }
+    .charlescms-back:hover { color: var(--charlescms-accent); }
+    .charlescms-kicker { color: #6b7a76; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; }
+    .charlescms-title { font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
+    .charlescms-icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #cfd8d2; background: #f8faf7; color: var(--charlescms-ink); border-radius: 7px; font: 22px/1 system-ui, sans-serif; cursor: pointer; }
+    .charlescms-icon-button:hover { background: #eef3ef; }
+    .charlescms-panel-copy { margin: -3px 0 0; color: var(--charlescms-muted); line-height: 1.5; }
+    .charlescms-panel-subtitle { max-width: 34ch; margin: 5px 0 0; color: #71807b; font-size: 12.5px; line-height: 1.45; }
+    .charlescms-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
+    .charlescms-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+    .charlescms-template-card { display: grid; gap: 7px; min-width: 0; padding: 0 0 11px; overflow: hidden; text-align: left; border: 1px solid #d8ded8; border-radius: 10px; background: white; color: var(--charlescms-ink); font: inherit; cursor: pointer; box-shadow: 0 8px 22px rgba(23,32,38,.05); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
+    .charlescms-template-card:hover { border-color: var(--charlescms-accent); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23,32,38,.1); }
+    .charlescms-template-card > strong, .charlescms-template-card > span:last-child { margin-inline: 11px; }
+    .charlescms-template-card > span:last-child { color: var(--charlescms-muted); font-size: 11px; }
+    .charlescms-template-preview { display: grid; place-items: center; min-height: 112px; max-height: 112px; overflow: hidden; padding: 12px; background: linear-gradient(145deg, #edf4ef, #f9f5e8); color: var(--charlescms-ink); pointer-events: none; }
+    .charlescms-template-preview > * { max-width: 100%; margin: 3px 0; transform: scale(.72); transform-origin: center; }
+    [data-charlescms-preview-block] { outline: 2px solid var(--charlescms-gold) !important; outline-offset: 5px; animation: charlescms-section-in .24s ease-out; }
+    @keyframes charlescms-section-in { from { opacity: .25; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+    .charlescms-error { color: var(--charlescms-danger); background: #fff1ee; border: 1px solid #f0b6ad; border-radius: 7px; padding: 10px 11px; line-height: 1.4; }
+    .charlescms-panel label { display: grid; gap: 7px; font-weight: 800; color: #26333d; }
+    .charlescms-panel textarea { min-height: 150px; resize: vertical; }
+    .charlescms-panel input, .charlescms-panel textarea { width: 100%; box-sizing: border-box; border: 1px solid #d6ded9; background: #fff; color: var(--charlescms-ink); border-radius: 11px; padding: 12px 13px; font: inherit; outline: none; box-shadow: 0 1px 2px rgba(22,34,39,.03); }
+    .charlescms-panel input:focus, .charlescms-panel textarea:focus { border-color: var(--charlescms-accent); background: white; box-shadow: 0 0 0 4px rgba(23,107,92,.13); }
+    .charlescms-media-tools { display: grid; gap: 10px; padding: 12px; border: 1px solid #e1e6df; border-radius: 7px; background: #f8faf7; }
+    .charlescms-media-tools div { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+    .charlescms-media-tools button { border: 1px solid #cfd8d2; background: white; color: var(--charlescms-ink); border-radius: 7px; padding: 9px 11px; font: inherit; font-weight: 800; cursor: pointer; }
+    .charlescms-media-tools [data-remove] { border-color: #edbbb2; color: var(--charlescms-danger); }
+    /* Pinned action row: Save/Cancel stay stuck to the bottom of the panel and are
+       always visible — never scrolled off, however long the form. The negative
+       margins bleed it to the panel edges; bottom:-22px cancels the panel's bottom
+       padding so it sits flush; the solid backdrop keeps it legible over content
+       scrolling beneath. safe-area padding clears the iOS home indicator. */
+    .charlescms-actions { position: sticky; bottom: -22px; z-index: 3; margin: 0 -22px -22px; padding: 13px 22px calc(13px + env(safe-area-inset-bottom, 0px)); background: rgba(251,252,250,.97); backdrop-filter: blur(8px); display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e2e7e2; box-shadow: 0 -8px 18px rgba(19,29,34,.06); }
+    .charlescms-actions button { border: 1px solid #cfd8d2; background: #f8faf7; color: var(--charlescms-ink); border-radius: 8px; padding: 11px 15px; min-height: 42px; font: inherit; font-weight: 850; cursor: pointer; touch-action: manipulation; }
+    .charlescms-actions [data-save], .charlescms-actions [data-save-section] { background: var(--charlescms-ink); color: white; border-color: var(--charlescms-ink); box-shadow: 0 10px 24px rgba(23,32,38,.16); }
+    .charlescms-actions .charlescms-danger-button { margin-right: auto; border-color: #edbbb2; color: var(--charlescms-danger); background: #fff4f1; }
+    .charlescms-actions button:disabled { cursor: not-allowed; opacity: .48; }
+    /* No inner scroll: the panel itself scrolls as one, between the pinned header
+       and the pinned action row — so there is never a tiny nested scrollbar to
+       fight, and Save is always reachable. */
+    .charlescms-frontmatter-fields { display: grid; gap: 12px; }
+    /* One quiet line under each Page-info field saying WHERE it shows up. */
+    .charlescms-field-hint { display: block; margin: 2px 0 4px; color: #93a09b; font-size: 11px; font-weight: 400; line-height: 1.4; }
+    /* Whisper-quiet provenance for developers (file · kind). Tucked at the very
+       bottom, tiny and faint, so a non-technical editor never registers it. */
+    .charlescms-panel-source { margin-top: -6px; color: #b3bdb8; text-align: right; font: 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; user-select: all; }
+    .charlescms-data-group { margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); font-weight: 600; font-size: 13px; color: #1f2a24; }
+    .charlescms-data-block:first-child .charlescms-data-group { margin-top: 2px; border-top: 0; padding-top: 0; }
+    .charlescms-data-block { display: grid; gap: 12px; scroll-margin: 16px; border-radius: 8px; }
+    .charlescms-data-block.charlescms-flash { animation: charlescms-flash 1.6s ease; }
+    @keyframes charlescms-flash { 0%, 100% { background: transparent; } 22% { background: var(--charlescms-edit-soft); } }
+    /* Bridge elements carry data-charlescms-editable, so they use the uniform
+       hover hint above — no separate style needed. */
+    .charlescms-panel-note { margin: 0; color: #5d6b63; font-size: 12px; line-height: 1.45; }
+    .charlescms-media-tools code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
+    .charlescms-versions-list { display: grid; gap: 10px; max-height: min(520px, calc(100vh - 160px)); overflow: auto; }
+    .charlescms-version { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #e2e7e2; }
+    .charlescms-version div { min-width: 0; display: grid; gap: 3px; }
+    .charlescms-version strong, .charlescms-version span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .charlescms-version span { color: var(--charlescms-muted); font-size: 12px; }
+    .charlescms-version button { border: 1px solid var(--charlescms-ink); background: var(--charlescms-ink); color: white; border-radius: 7px; padding: 9px 11px; font: inherit; font-weight: 850; cursor: pointer; white-space: nowrap; }
+    .charlescms-staged-tag { flex: 0 0 auto; color: var(--charlescms-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
+    .charlescms-staged-go { flex: 0 0 auto; border: 1px solid #cfd8d2; background: #f8faf7; color: var(--charlescms-ink); border-radius: 7px; padding: 8px 11px; font: inherit; font-weight: 800; text-decoration: none; white-space: nowrap; }
+    .charlescms-staged-go:hover { border-color: var(--charlescms-accent); color: var(--charlescms-accent); }
+
+    /* ----- Publishing lock (deployed sites rebuild after a commit) ----- */
+    .charlescms-publishing { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; background: rgba(18,25,30,.55); backdrop-filter: blur(3px); }
+    .charlescms-publishing-card { display: grid; justify-items: center; gap: 12px; max-width: min(420px, calc(100vw - 32px)); margin: 16px; padding: 28px 30px; text-align: center; background: rgba(251,252,250,.99); color: var(--charlescms-ink); border-radius: 16px; box-shadow: 0 32px 90px rgba(19,29,34,.32); font: 14px system-ui, sans-serif; }
+    .charlescms-publishing-card strong { font-size: 16px; font-weight: 700; }
+    .charlescms-publishing-card span { color: var(--charlescms-muted); line-height: 1.5; }
+    .charlescms-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(23,107,92,.2); border-top-color: var(--charlescms-accent); animation: charlescms-spin .8s linear infinite; }
+    @keyframes charlescms-spin { to { transform: rotate(360deg); } }
+    .charlescms-publishing-dismiss { margin-top: 4px; border: 1px solid #cfd8d2; background: #f8faf7; color: var(--charlescms-muted); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
+    .charlescms-publishing-dismiss:hover { border-color: var(--charlescms-accent); color: var(--charlescms-accent); }
+
+    /* ----- Touch devices (fat-finger targets) ----- */
+    /* Anything driven by a coarse pointer gets finger-sized hit areas: a bigger
+       edit label, ≥44px action buttons, a larger close button and roomier inputs.
+       Keyed on the pointer, not width, so a touch laptop benefits too. */
+    @media (pointer: coarse) {
+      .charlescms-actions button { min-height: 46px; padding: 13px 18px; }
+      .charlescms-icon-button { width: 42px; height: 42px; }
+      .charlescms-panel input, .charlescms-panel textarea { padding: 13px 14px; font-size: 16px; }
+      .charlescms-toolbar button { padding: 10px 13px; }
+      .charlescms-version button, .charlescms-media-tools button { min-height: 44px; }
+      .charlescms-picker-item { min-height: 50px; }
+    }
+
+    /* ----- Small screens ----- */
+    @media (max-width: 560px) {
+      .charlescms-panel { left: 12px; right: 12px; top: auto; width: auto; border-radius: 14px; }
+      .charlescms-toolbar { left: 12px; right: 12px; bottom: 12px; max-width: none; }
+      .charlescms-brand { order: -1; }
+      .charlescms-info { flex: 1 1 100%; order: -1; }
+      .charlescms-toolbar-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
+      .charlescms-toolbar-actions button { width: 100%; }
+      .charlescms-toolbar-actions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
+      .charlescms-template-grid { grid-template-columns: 1fr; }
+      .charlescms-template-preview { min-height: 88px; max-height: 88px; }
+      .charlescms-section-gap { font-size: 10px; }
+    }
+  `;

package/src/element-editor.js

@@ -0,0 +1,355 @@
+import { mediaPreviewFor, mediaSrcValue } from "./media-preview.js";
+
+// Builds the standard form editor for text, links, downloads, and media.
+//
+// This module translates a bound DOM element into a small editor model, renders
+// the appropriate controls, and stages ordinary field edits. Rich text and
+// sections use dedicated editors and are delegated through injected callbacks.
+export function createElementEditor({
+  state,
+  closeEditor,
+  mountPanel,
+  stageEdit,
+  openRichTextInline,
+  openSectionBuilder,
+  uploadActiveMedia,
+  replaceDownloadFile,
+  removeActiveMedia,
+  downloadRepoPath,
+  escapeHtml,
+  escapeAttribute
+}) {
+  function describeElement(element) {
+    const tag = element.tagName.toLowerCase();
+    const id = element.dataset.charlescmsId;
+    const fields = (element.dataset.charlescmsFields || "").split(",").filter(Boolean);
+    const entry = state.sourceMapById.get(id);
+    const operationKind = entry?.operations?.[0]?.kind;
+
+    if (operationKind === "block-html") {
+      return {
+        id,
+        element,
+        fields: ["body"],
+        type: "section",
+        value: { body: element.innerHTML },
+        label: element.querySelector("h2,h3,h4")?.textContent.trim().slice(0, 80) || "Section"
+      };
+    }
+    if (operationKind === "markdown-block") {
+      return {
+        id,
+        element,
+        fields: ["body"],
+        type: "richtext",
+        value: { text: element.innerHTML, body: element.innerHTML },
+        label: element.textContent.trim().slice(0, 80) || "Markdown"
+      };
+    }
+    if (operationKind === "markdown-text") {
+      const text = element.textContent.trim();
+      return { id, element, fields: ["text"], type: "text", value: { text }, label: text.slice(0, 80) };
+    }
+    // Static text interleaved with {expressions}: each static run is its own
+    // segment field. The value shown is the DECODED source text (so entities like
+    // © read naturally); the live expressions between segments stay locked.
+    if (fields.some((field) => /^seg\d+$/.test(field))) {
+      const segments = (entry?.operations || []).filter((operation) => /^seg\d+$/.test(operation.name));
+      const pending = state.pending.get(id)?.value || {};
+      const value = {};
+      for (const operation of segments) value[operation.name] = pending[operation.name] ?? decodeEntities(operation.oldValue);
+      return { id, element, fields: segments.map((operation) => operation.name), type: "segments", value, label: element.textContent.trim().slice(0, 80) || "Text" };
+    }
+    if (fields.includes("richtext")) {
+      return {
+        id,
+        element,
+        fields,
+        type: "richtext",
+        value: { text: element.innerHTML },
+        label: element.textContent.trim().slice(0, 80) || "Rich text"
+      };
+    }
+    if (tag === "img") {
+      return { id, element, fields, type: "image", value: readFields(element, fields), label: element.alt || "Image" };
+    }
+    if (["video", "audio", "iframe", "embed"].includes(tag)) {
+      return { id, element, fields, type: "asset", value: readFields(element, fields), label: tag };
+    }
+    if (tag === "object") {
+      return { id, element, fields, type: "asset", value: readFields(element, fields), label: "Object" };
+    }
+    if (tag === "a") {
+      const href = element.getAttribute("href") || "";
+      const isDownload = element.hasAttribute("download") || href.toLowerCase().endsWith(".pdf");
+      return {
+        id,
+        element,
+        fields,
+        type: isDownload ? "download" : "link",
+        value: readFields(element, fields),
+        label: element.textContent.trim() || href || "Link"
+      };
+    }
+    const text = element.textContent.trim();
+    if (!text) return null;
+    return { id, element, fields, type: "text", value: readFields(element, fields), label: text.slice(0, 80) };
+  }
+
+  function openEditor(item) {
+    closeEditor();
+    revealEditable(item.element);
+    if (item.type === "section") {
+      openSectionBuilder({ item });
+      return;
+    }
+    if (item.type === "richtext") {
+      openRichTextInline(item);
+      return;
+    }
+
+    const dialog = document.createElement("div");
+    dialog.dataset.charlescmsUi = "true";
+    dialog.className = "charlescms-panel";
+    dialog.innerHTML = renderEditor(item);
+    mountPanel(dialog, { item });
+
+    dialog.querySelector("[data-save]")?.addEventListener("click", saveActive);
+    for (const close of dialog.querySelectorAll("[data-close]")) {
+      close.addEventListener("click", closeEditor);
+    }
+    dialog.querySelector("[data-upload]")?.addEventListener("change", uploadActiveMedia);
+    dialog.querySelector("[data-replace-download]")?.addEventListener("change", replaceDownloadFile);
+    dialog.querySelector("[data-remove]")?.addEventListener("click", removeActiveMedia);
+  }
+
+  function renderEditor(item) {
+    const header = `
+      <div class="charlescms-panel-header">
+        <div>
+          <div class="charlescms-kicker">${escapeHtml(item.type === "segments" ? "text" : item.type)}</div>
+          <div class="charlescms-title">${escapeHtml(editorTitle(item))}</div>
+        </div>
+        <button class="charlescms-icon-button" data-close aria-label="Close">×</button>
+      </div>
+    `;
+    if (item.type === "text") {
+      return `
+        ${header}
+        <textarea data-field="text">${escapeHtml(item.value.text || "")}</textarea>
+        <div class="charlescms-actions"><button data-close>Cancel</button><button data-save>Save</button></div>
+      `;
+    }
+    if (item.type === "segments") {
+      const single = item.fields.length === 1;
+      const inputs = item.fields.map((field, index) => {
+        const hint = single ? "Text" : `Text part ${index + 1}`;
+        return `<label>${hint}<textarea data-field="${field}">${escapeHtml(item.value[field] || "")}</textarea></label>`;
+      }).join("");
+      return `
+        ${header}
+        ${single ? "" : `<p class="charlescms-panel-subtitle">This text wraps a dynamic value, so it is edited in parts; the value between stays as is.</p>`}
+        ${inputs}
+        <div class="charlescms-actions"><button data-close>Cancel</button><button data-save>Save</button></div>
+      `;
+    }
+    if (item.type === "link") {
+      return `
+        ${header}
+        ${renderFieldInputs(item)}
+        <div class="charlescms-actions"><button data-close>Cancel</button><button data-save>Save</button></div>
+      `;
+    }
+    if (item.type === "download") {
+      const hasText = item.fields.includes("text");
+      return `
+        ${header}
+        ${hasText ? renderFieldInputs(item) : ""}
+        ${renderDownloadTools(item)}
+        <div class="charlescms-actions"><button data-close>${hasText ? "Cancel" : "Close"}</button>${hasText ? "<button data-save>Save</button>" : ""}</div>
+      `;
+    }
+    return `
+      ${header}
+      ${renderFieldInputs(item)}
+      ${renderMediaTools(item)}
+      <div class="charlescms-actions"><button data-close>Cancel</button><button data-save>Save</button></div>
+    `;
+  }
+
+  async function saveActive() {
+    if (!state.active) return;
+    const { dialog, item } = state.active;
+    const value = Object.fromEntries(
+      [...dialog.querySelectorAll("[data-field]")].map((field) => [field.dataset.field, field.value])
+    );
+    const payload = {
+      id: item.id,
+      type: item.type,
+      route: location.pathname,
+      value,
+      label: item.label,
+      original: typeof item.value === "string" ? item.value : JSON.stringify(item.value)
+    };
+    stageEdit(item, value, payload);
+    applyValue(item.element, { ...payload, value });
+    closeEditor();
+  }
+
+  function revealEditable(element) {
+    const rect = element.getBoundingClientRect();
+    const toolbarTop = state.toolbar?.getBoundingClientRect().top || window.innerHeight;
+    const margin = 32;
+    if (rect.top < margin || rect.bottom > toolbarTop - margin) {
+      element.scrollIntoView({ block: "center", behavior: "smooth" });
+    }
+  }
+
+  function renderFieldInputs(item) {
+    const labels = {
+      alt: "Alt Text",
+      data: "File",
+      href: "URL",
+      poster: "Poster",
+      src: "File",
+      text: "Text",
+      title: "Title"
+    };
+    const hidePath = isMediaItem(item);
+    return item.fields.map((field) => {
+      const value = item.value[field] || "";
+      // Media paths are controlled by uploads. Keeping them hidden prevents a
+      // typo from turning a valid source edit into a broken public asset URL.
+      if (hidePath && mediaPathFields.has(field)) {
+        return `<input type="hidden" data-field="${field}" value="${escapeAttribute(value)}">`;
+      }
+      if (field === "text") {
+        return `<label>${labels[field]}<textarea data-field="${field}">${escapeHtml(value)}</textarea></label>`;
+      }
+      return `<label>${labels[field] || field}<input data-field="${field}" value="${escapeAttribute(value)}"></label>`;
+    }).join("");
+  }
+
+  function renderMediaTools(item) {
+    if (!isMediaItem(item)) return "";
+    if (state.previewOnly) {
+      return `
+        <div class="charlescms-media-tools">
+          <p>Uploads are disabled in this public demo. The real installed version can upload through your connector.</p>
+          <div>
+            <button type="button" data-upload-disabled disabled title="Uploads are disabled in this public demo">Upload replacement</button>
+            <button type="button" data-remove>Remove</button>
+          </div>
+        </div>
+      `;
+    }
+    return `
+      <div class="charlescms-media-tools">
+        <label>Upload replacement<input type="file" data-upload></label>
+        <div><button type="button" data-remove>Remove</button></div>
+      </div>
+    `;
+  }
+
+  function renderDownloadTools(item) {
+    const repoPath = downloadRepoPath(item.element?.getAttribute("href") || item.element?.getAttribute("src") || "");
+    if (!repoPath) {
+      return '<div class="charlescms-media-tools"><p>This link points to an external or dynamic file, so it can\'t be replaced here.</p></div>';
+    }
+    if (state.previewOnly) {
+      return `
+        <div class="charlescms-media-tools">
+          <p>Uploads are disabled in this public demo. The real installed version can replace files through your connector.</p>
+          <div><button type="button" disabled title="Uploads are disabled in this public demo">Replace file</button></div>
+        </div>
+      `;
+    }
+    return `
+      <div class="charlescms-media-tools">
+        <label>Replace file<input type="file" data-replace-download></label>
+        <p>Uploads a new file in place of <code>${escapeHtml(repoPath)}</code>. The link keeps pointing here.</p>
+      </div>
+    `;
+  }
+
+  return { describeElement, openEditor, applyValue, readFields };
+}
+
+const mediaPathFields = new Set(["src", "data", "poster", "href"]);
+
+function editorTitle(item) {
+  if (item.type === "text" || item.type === "segments") return "Edit text";
+  if (item.type === "download") return item.element?.tagName === "IMG" ? "Replace image" : "Edit download";
+  if (item.type === "link") return "Edit link";
+  if (item.type === "image") return "Edit image";
+  if (item.type === "section") return "Edit section";
+  return "Edit asset";
+}
+
+function applyValue(element, edit) {
+  if (edit.type === "segments") {
+    // Update the live preview by replacing only each segment's old text inside
+    // the element — the rendered expression value between segments is left in
+    // place. Best-effort: if a segment's text isn't found verbatim (an entity
+    // that rendered differently), the preview just waits for the next reload.
+    let previous = {};
+    try { previous = JSON.parse(edit.original || "{}"); } catch { previous = {}; }
+    for (const [name, value] of Object.entries(edit.value)) replaceTextSegment(element, previous[name], value);
+    return;
+  }
+  if (Object.hasOwn(edit.value, "text")) {
+    if (edit.type === "richtext") {
+      element.innerHTML = edit.value.text;
+      return;
+    }
+    element.textContent = edit.value.text;
+  }
+  for (const [name, value] of Object.entries(edit.value)) {
+    if (name === "text") continue;
+    if (name === "data" && element.tagName.toLowerCase() === "object") element.data = value;
+    else if (name === "src" && mediaPreviewFor(value)) {
+      // Show the locally-chosen file immediately; the committed path is remembered
+      // so reads and source writes still use it, not the display-only blob URL.
+      element.dataset.charlescmsMediaPath = value;
+      element.setAttribute("src", mediaPreviewFor(value));
+    } else element.setAttribute(name, value);
+  }
+}
+
+function readFields(element, fields) {
+  const value = {};
+  for (const field of fields) {
+    if (field === "text") value.text = element.textContent.trim();
+    else if (field === "data" && element.tagName.toLowerCase() === "object") value.data = element.data || "";
+    else if (field === "src") value.src = mediaSrcValue(element);
+    else value[field] = element.getAttribute(field) || "";
+  }
+  return value;
+}
+
+function isMediaItem(item) {
+  return item?.type === "image" || item?.type === "asset";
+}
+
+// Decode HTML entities in a source text run so the editor shows what the reader
+// sees (`&copy;` → `©`). On save the value is re-encoded by the source writer.
+function decodeEntities(value) {
+  const element = document.createElement("textarea");
+  element.innerHTML = String(value ?? "");
+  return element.value;
+}
+
+// Replace the first occurrence of `oldText` inside the element's text with
+// `newText`, touching only that one text node — so a sibling expression's
+// rendered value is never disturbed.
+function replaceTextSegment(element, oldText, newText) {
+  if (!oldText) return;
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const index = node.nodeValue.indexOf(oldText);
+    if (index !== -1) {
+      node.nodeValue = node.nodeValue.slice(0, index) + newText + node.nodeValue.slice(index + oldText.length);
+      return;
+    }
+  }
+}

package/src/fields.js

@@ -0,0 +1,6 @@
+// Field labels are derived from analyzer operations so the browser editor knows
+// which controls to show for each statically bundled source-map entry.
+export function fieldName(operation) {
+  if (operation.kind === "rich-text") return "richtext";
+  return operation.name || operation.kind;
+}