domma-cms 0.75.0 → 0.77.0

package/admin/js/templates/menu-locations.html

@@ -1,14 +1,57 @@
-<div class="page-header">
-    <h2><span data-icon="map"></span> Menu locations</h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" href="#/menus"><span data-icon="arrow-left"></span> Back to menus</a>
-        <button class="btn btn-primary" id="ml-save"><span data-icon="check"></span> Save</button>
-    </div>
-</div>
-<p class="text-muted mb-4">Map each registered slot to a menu. Plugins can register additional slots via <code>hooks.registerMenuLocation()</code>.</p>
+<!-- Menus › Locations. Bound with M.applyBindings - see admin/js/views/menu-locations.js, which also inserts
+     the row template (the router renders a templateUrl through _.render, eating any {{…}}). No page heading:
+     the Tool banner above is the heading; All menus and Save are its actions. -->
+<div class="mlx">
+    <p class="mlx-alert is-dirty" data-bind-hidden="!dirty.value">
+        <span data-icon="edit-3" data-icon-size="16"></span>
+        <span>Unsaved changes - Save (Ctrl+S) to apply them. Leave and they are kept as a draft for next time.</span>
+        <span class="mlx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">Save</button></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="ml-table"></div>
+    <div class="mlx-card">
+        <div class="mlx-card-title">Where each menu shows
+            <span data-help-title="Menu locations" data-help="A slot is a place on the site a menu can fill - the navbar, the footers, the admin sidebar, the overlay (for floating panels), and any a plugin adds. Pick a menu for each. A menu's own Binding tab can take a slot over on some pages only; this is what shows everywhere else. The [menu location] shortcode draws whatever fills a slot."></span>
+            <span class="mlx-spacer"></span>
+            <small class="mlx-note" data-bind-text="summary.value"></small>
+        </div>
+        <p class="mlx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="mlx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="mlx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length">No menu slots registered.</p>
+        <div class="mlx-list" data-each="rows.value key=slot"></div>
+        <p class="mlx-note">Click a slot to edit the menu in it; right-click (or ⋮, or Shift+F10) to clear it or copy its shortcode.
+            <span data-help="Nested deeper than the slot draws: that slot only shows so many levels, and the deeper items are simply left out there. Menu not found: the mapped menu was deleted or renamed outside the editor - pick another."></span></p>
     </div>
 </div>
+
+<style>
+/* Menus › Locations - see admin/js/views/menu-locations.js. Only --dm-* tokens. */
+.mlx { display: flex; flex-direction: column; gap: .75rem; }
+.mlx [hidden] { display: none !important; }
+.mlx-alert { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-primary) 12%, transparent); color: var(--dm-text); }
+.mlx-spacer { flex: 1; }
+.mlx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mlx-note.is-bad { color: var(--dm-danger); }
+.mlx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.mlx-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
+.mlx-list { display: flex; flex-direction: column; }
+.mlx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(10rem, 16rem) auto; gap: .75rem; align-items: center;
+    padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.mlx-row:last-child { border-bottom: 0; }
+.mlx-row:hover, .mlx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.mlx-row.is-changed { box-shadow: inset 3px 0 0 var(--dm-primary); }
+.mlx-row.is-bad { box-shadow: inset 3px 0 0 var(--dm-warning); }
+.mlx-main { min-width: 0; display: flex; flex-direction: column; }
+.mlx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mlx-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
+.mlx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.mlx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.mlx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.mlx-chip.is-changed { background: color-mix(in srgb, var(--dm-primary) 16%, transparent); color: var(--dm-primary); }
+.mlx-select { margin: 0; }
+.mlx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.mlx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 720px) { .mlx-row { grid-template-columns: minmax(0, 1fr) auto; } .mlx-chips { grid-column: 1 / -1; justify-content: flex-start; } }
+</style>

package/admin/js/templates/my-profile.html

@@ -1,17 +1,105 @@
-<div class="view-header">
-    <h1><span data-icon="user"></span> My Profile</h1>
-</div>
+<!-- My Profile. Bound with M.applyBindings - see admin/views/my-profile.js, which also draws the profile
+     fields from the user-profiles schema. No page heading: the Tool banner above is the heading, and Save is
+     a banner action (and Ctrl+S). -->
+<div class="mpx">
+    <p class="mpx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+    <p class="mpx-note" data-bind-hidden="!loading.value">Loading…</p>
 
-<div class="card">
-    <div class="card-header"><h2>Account</h2></div>
-    <div class="card-body">
-        <div id="account-form-container"></div>
+    <div class="mpx-dirty" data-bind-hidden="!dirty.value">
+        <span data-icon="edit" data-icon-size="14"></span>
+        <span>You have unsaved changes.</span>
+        <span class="mpx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannotSave.value">
+            <span data-icon="check" data-icon-size="13"></span> Save</button>
     </div>
-</div>
 
-<div class="card mt-4" id="profile-card" style="display:none;">
-    <div class="card-header"><h2>Profile</h2></div>
-    <div class="card-body">
-        <div id="profile-form-container"></div>
+    <div class="mpx-card mpx-you" data-bind-hidden="loading.value || loadError.value">
+        <span class="mpx-avatar" aria-hidden="true" data-bind-text="avatar.value"></span>
+        <span class="mpx-you-main">
+            <strong data-bind-text="shownName.value"></strong>
+            <small data-bind-text="shownEmail.value"></small>
+            <small class="mpx-facts" data-bind-text="factsText.value"></small>
+        </span>
+        <span class="mpx-chips">
+            <span class="mpx-chip is-ok" data-bind-text="rolesText.value" title="Your role - an administrator sets it"></span>
+            <span class="mpx-chip" data-bind-text="accessText.value" title="What you can see in the admin"></span>
+        </span>
+        <span data-help-title="Your account" data-help="Your role and which projects you can see are set by an administrator, under System › Users - they cannot be changed here. Everything below is yours to change."></span>
+    </div>
+
+    <div class="mpx-card" data-bind-hidden="loading.value || loadError.value">
+        <div class="mpx-card-title">Account
+            <span data-help="Your name is how you appear in the admin and on anything you author. Your email is what you sign in with, and where password resets are sent."></span></div>
+        <div class="mpx-grid">
+            <div>
+                <label class="form-label" for="mpx-name">Full name <span class="text-danger">*</span></label>
+                <input id="mpx-name" type="text" class="form-input" maxlength="100" autocomplete="name" placeholder="Jane Smith" data-model="name.value">
+                <small class="mpx-err" data-bind-hidden="!err.value.name" data-bind-text="err.value.name"></small>
+            </div>
+            <div>
+                <label class="form-label" for="mpx-email">Email <span class="text-danger">*</span></label>
+                <input id="mpx-email" type="email" class="form-input" maxlength="200" autocomplete="email" placeholder="jane@example.com" data-model="email.value">
+                <small class="mpx-err" data-bind-hidden="!err.value.email" data-bind-text="err.value.email"></small>
+                <small class="mpx-hint" data-bind-hidden="!emailChanged.value">You will sign in with the new address from now on.</small>
+            </div>
+        </div>
+    </div>
+
+    <div class="mpx-card" data-bind-hidden="loading.value || loadError.value">
+        <div class="mpx-card-title">Password
+            <span data-help-title="Changing your password" data-help="Leave both boxes empty to keep your current password. A new one needs at least 8 characters, typed twice. It is never kept as a draft - if you leave the screen, you type it again."></span></div>
+        <div class="mpx-grid">
+            <div>
+                <label class="form-label" for="mpx-pw">New password</label>
+                <input id="mpx-pw" type="password" data-bind-type="showPw.value ? 'text' : 'password'" class="form-input" autocomplete="new-password" placeholder="Leave empty to keep it" data-model="password.value">
+                <small class="mpx-err" data-bind-hidden="!err.value.password" data-bind-text="err.value.password"></small>
+            </div>
+            <div>
+                <label class="form-label" for="mpx-pw2">Type it again</label>
+                <input id="mpx-pw2" type="password" data-bind-type="showPw.value ? 'text' : 'password'" class="form-input" autocomplete="new-password" data-model="confirm.value">
+                <small class="mpx-err" data-bind-hidden="!err.value.confirm" data-bind-text="err.value.confirm"></small>
+                <small class="mpx-hint is-ok" data-bind-hidden="!pwMatch.value">✓ They match.</small>
+            </div>
+        </div>
+        <label class="mpx-show"><input type="checkbox" data-model="showPw.value"> Show what I type</label>
+    </div>
+
+    <div class="mpx-card" data-bind-hidden="loading.value || loadError.value || !hasProfile.value">
+        <div class="mpx-card-title">Profile
+            <span data-help="Extra details about you. Which ones are asked for is set by an administrator (the User Profiles collection)."></span></div>
+        <div class="mpx-grid mpx-profile"></div>
     </div>
 </div>
+
+<style>
+.mpx { display: flex; flex-direction: column; gap: .75rem; max-width: 60rem; }
+.mpx [hidden] { display: none !important; }
+.mpx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mpx-note.is-bad { color: var(--dm-danger); }
+.mpx-dirty { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); position: sticky; top: 0; z-index: 2; }
+.mpx-dirty .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.mpx-spacer { flex: 1; }
+.mpx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .7rem; }
+.mpx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.mpx-you { flex-direction: row; align-items: center; gap: .9rem; flex-wrap: wrap; }
+.mpx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0;
+    font-weight: 700; color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 14%, transparent); }
+.mpx-you-main { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
+.mpx-you-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.mpx-facts { margin-top: .15rem; }
+.mpx-chips { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
+.mpx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.mpx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.mpx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
+.mpx-wide { grid-column: 1 / -1; }
+.mpx .form-label { display: flex; align-items: center; gap: .3rem; }
+.mpx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.mpx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.mpx-hint.is-ok { color: var(--dm-success); }
+.mpx-show { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--dm-text-sm); color: var(--dm-text-muted); cursor: pointer; width: fit-content; }
+.mpx-check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin-right: .8rem; }
+@media (max-width: 640px) { .mpx-grid { grid-template-columns: 1fr; } }
+</style>

package/admin/js/templates/notifications.html

@@ -1,14 +1,74 @@
-<div class="view-container">
-    <div class="view-header">
-        <h1><span data-icon="bell"></span> Notifications</h1>
-    </div>
-
-    <div id="notif-list"></div>
+<!-- Notifications. Bound with M.applyBindings - see admin/views/notifications.js, which also inserts the row
+     template (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the
+     Tool banner above is the heading, and Dismiss all / Refresh are banner actions. -->
+<div class="ntx">
+    <p class="ntx-note">Messages for this site's administrators - maintenance, updates and warnings, mostly from the
+        manager that hosts it.
+        <span data-help-title="Notifications" data-help="Opening this screen marks everything in it as read - the ones that were unread stay marked New until you leave. Click a notification to read all of it; right-click it (or ⋮, or Shift+F10) to open its link, copy it, mark it unread again, dismiss it or delete it. Dismissing hides it for you only; deleting removes it for everyone and needs the delete permission. A notification with an end date disappears by itself once it passes."></span></p>
 
-    <div id="notif-empty" hidden class="card">
-        <div class="card-body" style="text-align:center;padding:3rem;color:var(--dm-text-muted)">
-            <span data-icon="check-circle" style="font-size:2rem;display:block;margin-bottom:.5rem"></span>
-            <p>No notifications - you're all caught up.</p>
+    <div class="ntx-card">
+        <div class="ntx-bar">
+            <div class="ntx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showAll" data-bind-class="filter.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="showNew" data-bind-class="filter.value === 'new' && 'is-on'" data-bind-hidden="!counts.value.new">New <b data-bind-text="counts.value.new"></b></button>
+                <button type="button" data-on-click="showCritical" data-bind-class="filter.value === 'critical' && 'is-on'" data-bind-hidden="!counts.value.critical">Critical <b data-bind-text="counts.value.critical"></b></button>
+                <button type="button" data-on-click="showWarning" data-bind-class="filter.value === 'warning' && 'is-on'" data-bind-hidden="!counts.value.warning">Warnings <b data-bind-text="counts.value.warning"></b></button>
+                <button type="button" data-on-click="showInfo" data-bind-class="filter.value === 'info' && 'is-on'" data-bind-hidden="!counts.value.info">Info <b data-bind-text="counts.value.info"></b></button>
+                <button type="button" data-on-click="showSuccess" data-bind-class="filter.value === 'success' && 'is-on'" data-bind-hidden="!counts.value.success">Success <b data-bind-text="counts.value.success"></b></button>
+            </div>
+            <input type="search" class="form-input ntx-search" placeholder="Search notifications…" aria-label="Search notifications" data-model="query.value">
         </div>
+        <p class="ntx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="ntx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <div class="ntx-empty" data-bind-hidden="loading.value || loadError.value || rows.value.length">
+            <span data-icon="check-circle" data-icon-size="28"></span>
+            <span data-bind-text="emptyText.value"></span>
+        </div>
+        <div class="ntx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
+
+<style>
+.ntx { display: flex; flex-direction: column; gap: .75rem; }
+.ntx [hidden] { display: none !important; }
+.ntx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.ntx-note.is-bad { color: var(--dm-danger); }
+.ntx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.ntx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.ntx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.ntx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.ntx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.ntx-seg button + button { border-left: 1px solid var(--dm-border); }
+.ntx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.ntx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.ntx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.ntx-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1rem; color: var(--dm-text-muted); }
+.ntx-empty [data-icon], .ntx-empty svg { color: var(--dm-success); }
+.ntx-list { display: flex; flex-direction: column; }
+.ntx-row { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.ntx-row:last-child { border-bottom: 0; }
+.ntx-row:hover, .ntx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.ntx-dot { width: .55rem; height: .55rem; border-radius: 50%; margin-top: .45rem; flex-shrink: 0; background: var(--dm-info, var(--dm-primary)); }
+.ntx-row.is-critical .ntx-dot { background: var(--dm-danger); }
+.ntx-row.is-warning .ntx-dot { background: var(--dm-warning); }
+.ntx-row.is-success .ntx-dot { background: var(--dm-success); }
+.ntx-row:not(.is-unread) .ntx-main strong { font-weight: 500; }
+.ntx-row.is-critical { box-shadow: inset 3px 0 0 var(--dm-danger); }
+.ntx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
+.ntx-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
+.ntx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.ntx-preview { color: var(--dm-text-muted); font-size: var(--dm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ntx-body { white-space: pre-wrap; font-size: var(--dm-text-sm); color: var(--dm-text); margin-top: .25rem; overflow-wrap: anywhere; }
+.ntx-actions { display: flex; gap: .4rem; margin-top: .4rem; }
+.ntx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.ntx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .05rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.ntx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.ntx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.ntx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.ntx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.ntx-chip.is-new { background: var(--dm-primary); color: var(--dm-primary-text); }
+.ntx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.ntx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 640px) { .ntx-preview { white-space: normal; } }
+</style>

package/admin/js/templates/page-editor.html

@@ -1,15 +1,20 @@
-<div class="view-header">
-    <h1 id="editor-title"><span data-icon="edit"></span> Page Editor</h1>
-    <div class="view-header-actions">
-      <select id="quick-switch" class="form-select form-select-sm" style="display:none; width:auto;">
-        <option value="">Switch page...</option>
-      </select>
-      <a id="view-page-btn" class="btn btn-ghost" target="_blank" rel="noopener" style="display:none;">
-        <span data-icon="external-link"></span> View Page
-      </a>
-        <button id="cancel-btn" class="btn btn-ghost">Cancel</button>
-        <button id="save-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
-    </div>
+<!-- Page editor. No page heading: the Tool banner above is the heading ("Pages › Edit …", set by
+     admin/js/views/page-editor.js), with Back, Editor reference, View on the site and Save in it. This bar
+     carries the page switcher and the unsaved state; Ctrl+S saves; leaving with unsaved changes asks and
+     keeps a draft. -->
+<div class="pex-bar">
+  <select id="quick-switch" class="form-select form-select-sm" style="display:none; width:auto;" aria-label="Switch to another page">
+    <option value="">Switch page...</option>
+  </select>
+  <span data-help-title="Switching pages" data-help="Opens another page in the editor. It is locked while this page has unsaved changes - save or discard them first."></span>
+  <span id="pe-unsaved" class="pex-chip" hidden title="Changes not saved yet">Unsaved</span>
+  <small id="pe-problem" class="pex-problem" hidden></small>
+  <span class="pex-spacer"></span>
+  <a id="view-page-btn" class="btn btn-ghost btn-sm" target="_blank" rel="noopener" style="display:none;">
+    <span data-icon="external-link"></span> View page
+  </a>
+  <button type="button" id="discard-btn" class="btn btn-ghost btn-sm" hidden>Discard</button>
+  <button type="button" id="save-btn" class="btn btn-primary btn-sm"><span data-icon="save"></span> Save</button>
 </div>
 
 <div class="tabs" id="editor-meta-tabs">
@@ -55,7 +60,7 @@
     <div class="tab-panel">
       <div class="row mb-3">
         <div class="col">
-          <label class="form-label">URL Path</label>
+          <label class="form-label">URL Path <span data-help-title="URL path" data-help="Where the page lives on the site, starting with /. Changing it moves the page; menu links to the old address are updated. A project whose root URL is a prefix of this address files the page under it."></span></label>
           <input id="page-url-path" type="text" class="form-input" placeholder="/about or /services/web-dev">
           <small class="form-hint">The URL where this page will live. Changing this will update any navigation links
             pointing to the old URL.</small>
@@ -67,11 +72,11 @@
           <input id="field-title" type="text" class="form-input" placeholder="Page title">
         </div>
         <div class="col-3">
-          <label class="form-label">Layout</label>
+          <label class="form-label">Layout <span data-help="The page shell: navbar, width, sidebar, footer. Layouts are managed under System › Layouts."></span></label>
           <select id="field-layout" class="form-select"></select>
         </div>
         <div class="col-3">
-          <label class="form-label">Status</label>
+          <label class="form-label">Status <span data-help-title="Draft or published" data-help="A draft is hidden from visitors (404) - but anyone who can read pages sees it with a banner, and Live Preview and share links show it before it is published."></span></label>
           <select id="field-status" class="form-select">
             <option value="draft">Draft</option>
             <option value="published">Published</option>
@@ -84,24 +89,24 @@
           <input id="field-description" type="text" class="form-input" placeholder="Short description">
         </div>
         <div class="col-4">
-          <label class="form-label">Sort Order</label>
+          <label class="form-label">Sort Order <span data-help="Lower numbers come first in navigation and in page lists sorted by navigation order."></span></label>
           <input id="field-sort-order" type="number" class="form-input" value="99" min="0">
         </div>
       </div>
       <div class="row mb-3">
         <div class="col-4">
-          <label class="form-label">Category</label>
+          <label class="form-label">Category <span data-help="A free label for grouping pages - collection displays and search can filter by it."></span></label>
           <input id="field-category" type="text" class="form-input" placeholder="e.g. news, docs, products">
         </div>
         <div class="col-4">
-          <label class="form-label">Visibility</label>
+          <label class="form-label">Visibility <span data-help-title="Who can see the page" data-help="Public: everyone. A role &quot;and above&quot;: that role and every more senior one. A role &quot;only&quot;: holders of that role (and the super-admin). Private: the super-admin alone. Signed-out visitors are sent to sign in."></span></label>
           <select id="field-visibility" class="form-select">
             <option value="public">Public - everyone</option>
             <option value="private">Private - super-admin only</option>
           </select>
         </div>
         <div class="col-4">
-          <label class="form-label">Project</label>
+          <label class="form-label">Project <span data-help="Which project the page belongs to. Inherit from URL files it under the project whose root URL matches its address, else Core."></span></label>
           <select id="field-project" class="form-select">
             <option value="">Inherit from URL</option>
           </select>
@@ -110,14 +115,14 @@
       </div>
       <div class="row mb-3">
         <div class="col-6">
-          <label class="form-label">Theme Override</label>
+          <label class="form-label">Theme Override <span data-help="Shows this page in a different theme from the rest of the site - built-in or custom."></span></label>
             <select id="field-theme" class="form-select"></select>
           <small class="form-hint">Overrides the site-wide theme for this page only.</small>
         </div>
       </div>
       <div class="row mb-3">
         <div class="col">
-          <label class="form-label">Tags</label>
+          <label class="form-label">Tags <span data-help="Keywords for filtering and search. Type and press Enter; existing tags are suggested."></span></label>
           <input id="field-tags" type="text" class="form-input" />
           <small class="form-hint">Comma-separated keywords for filtering and search.</small>
         </div>
@@ -142,6 +147,7 @@
           <label class="form-check-label" title="Included in fresh installs via the seed script">
             <input id="field-bundled" type="checkbox" class="form-check"> Bundled
           </label>
+          <span data-help="Included when a fresh site is seeded. Leave off for pages that belong to this site only."></span>
         </div>
       </div>
     </div>
@@ -150,13 +156,13 @@
     <div class="tab-panel">
       <div class="row mb-3">
         <div class="col">
-          <label class="form-label">SEO Title</label>
+          <label class="form-label">SEO Title <span data-help="The title search engines and browser tabs show. Blank uses the page title."></span></label>
           <input id="field-seo-title" type="text" class="form-input" placeholder="Overrides default title">
         </div>
       </div>
       <div class="row">
         <div class="col">
-          <label class="form-label">SEO Description</label>
+          <label class="form-label">SEO Description <span data-help="The summary search engines show under the title. Blank uses the page description."></span></label>
           <input id="field-seo-desc" type="text" class="form-input" placeholder="Overrides default description">
         </div>
       </div>
@@ -164,7 +170,7 @@
 
     <!-- DConfig -->
     <div class="tab-panel">
-      <label class="form-label">Config JSON</label>
+      <label class="form-label">Config JSON <span data-help-title="DConfig" data-help="Declarative behaviour for elements on this page - click handlers, class toggles - as a JSON object keyed by CSS selector. Must be valid JSON before the page can be saved."></span></label>
       <textarea id="field-dconfig" class="form-input dconfig-textarea"
                 placeholder='{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }'></textarea>
       <small class="form-hint">Declarative click handlers and class toggles applied on page load. Merged with any <code>[dconfig]</code>
@@ -186,6 +192,7 @@
           </button>
         </div>
         <span class="live-preview-status" id="live-preview-status">Showing unsaved changes</span>
+        <span data-help-title="Live Preview" data-help="The whole page - navbar, footer, theme - rendered by the server from what is in the editor now, before saving. Share link makes a private, revocable address for someone without an account."></span>
         <div class="live-preview-actions">
           <button type="button" class="btn btn-ghost btn-sm" id="live-preview-refresh">
             <span data-icon="refresh-cw"></span> Refresh
@@ -204,10 +211,10 @@
       <!-- History -->
       <div class="tab-panel" id="history-panel">
           <div class="mb-3" style="display:flex;align-items:center;justify-content:space-between;">
-              <h3 style="margin:0;font-size:1rem;">Version History</h3>
+              <h3 style="margin:0;font-size:1rem;">Version History <span data-help="A version is kept on every save. Click one to compare it with the editor; right-click it (or ⋮, or Shift+F10) to restore or delete it. Restoring keeps a snapshot of the current page first."></span></h3>
               <div style="display:flex;gap:.5rem;align-items:center;">
                   <button class="btn btn-ghost btn-sm" id="history-delete-selected-btn"
-                          style="display:none;color:var(--dm-danger,#e55);">
+                          style="display:none;color:var(--dm-danger);">
                       <span data-icon="trash"></span> Delete Selected
                   </button>
                   <button class="btn btn-ghost btn-sm" id="history-save-named-btn">
@@ -247,3 +254,17 @@
 </div>
 
 <div id="media-picker-modal"></div>
+
+<style>
+.pex-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
+.pex-bar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.pex-spacer { flex: 1; }
+.pex-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.pex-problem { color: var(--dm-danger); font-size: var(--dm-text-sm); }
+.pex-bar [hidden] { display: none !important; }
+#history-panel .pe-version-row { cursor: pointer; }
+#history-panel .pe-version-row:hover, #history-panel .pe-version-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.pe-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.pe-kebab:hover { color: var(--dm-primary); }
+</style>