domma-cms 0.75.0 → 0.77.0

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

@@ -1,13 +1,12 @@
-<div class="view-header">
-    <h1 id="editor-title"><span data-icon="edit-3"></span> Form Editor</h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a href="#/forms" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Forms
-        </a>
-        <button id="save-form-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save
-        </button>
-    </div>
+<!-- Form editor. No page heading: the Tool banner ("Forms › <title>") is the heading, and Save / All forms /
+     Submissions are banner actions. The bar below is bound with M.applyBindings (admin/js/views/form-editor.js). -->
+<div class="fex-bar" data-bind-hidden="!dirty.value">
+    <span class="fex-chip">Unsaved changes</span>
+    <small class="fex-note">Ctrl+S saves. Leaving asks first and keeps a draft of this form.</small>
+    <span class="fex-spacer"></span>
+    <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+    <button type="button" id="save-form-btn" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">
+        <span data-icon="save" data-icon-size="13"></span> Save</button>
 </div>
 
 <div class="tabs" id="editor-tabs">
@@ -24,20 +23,20 @@
       <div class="fb-fields-layout">
       <div class="card mb-4">
         <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-          <h2>Fields</h2>
+          <h2>Fields <span data-help-title="Fields" data-help="Click a field to open it; drag its header to reorder. Right-click a field (or ⋮, or Shift+F10 on it) to edit it, open its logic and triggers, duplicate it, move it up or down, copy its name or delete it. A Page Break splits the form into wizard steps; a Spacer adds room between fields."></span></h2>
           <div id="add-element-dropdown" style="position:relative;">
             <button id="add-element-btn" class="btn btn-ghost btn-sm" type="button">
               <span data-icon="plus"></span> Add <span data-icon="chevron-down" data-icon-size="12"
                 style="opacity:.6;margin-left:.1rem;display:inline-flex;align-items:center;vertical-align:middle;"></span>
             </button>
             <div id="add-element-menu"
-                 style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--dm-card-bg,#1e1e2e);border:1px solid var(--dm-border,#333);border-radius:6px;min-width:140px;z-index:100;box-shadow:var(--dm-shadow-lg);overflow:hidden;">
+                 style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--dm-card-bg);border:1px solid var(--dm-border);border-radius:6px;min-width:140px;z-index:100;box-shadow:var(--dm-shadow-lg);overflow:hidden;">
               <button id="add-field-btn" type="button"
-                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border,#333);">
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border);">
                 Field
               </button>
               <button id="add-spacer-btn" type="button"
-                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border,#333);">
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border);">
                 Spacer
               </button>
               <button id="add-page-break-btn" type="button"
@@ -49,8 +48,8 @@
         </div>
         <div class="card-body" style="padding:0;">
           <div id="fields-list" style="padding:1rem;">
-            <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet. Click
-              "Add Field" to get started.</p>
+            <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet - use
+              Add to put the first one in.</p>
           </div>
         </div>
       </div>
@@ -58,9 +57,9 @@
       <aside class="fb-preview-pane">
         <div class="card mb-4" id="preview-card">
           <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-            <h2><span data-icon="eye"></span> Preview</h2>
+            <h2><span data-icon="eye"></span> Preview <span data-help-title="Preview" data-help="The form as visitors will see it, updated as you edit - conditional logic and triggers included. Once the form is saved, a test submission here is stored like a real one."></span></h2>
             <span id="preview-test-badge"
-                  style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:color-mix(in srgb, var(--dm-primary) 15%, transparent);color:var(--dm-primary,#6366f1);">Test Mode - submissions are stored</span>
+                  style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:color-mix(in srgb, var(--dm-primary) 15%, transparent);color:var(--dm-primary);">Test Mode - submissions are stored</span>
           </div>
           <div class="card-body">
             <div id="preview-container"></div>
@@ -83,7 +82,7 @@
               <input id="field-title" type="text" class="form-input" placeholder="My Form">
             </div>
             <div class="col-5">
-              <label class="form-label">Slug</label>
+              <label class="form-label">Slug <span data-help="The form's id - how pages embed it ([form name=&quot;slug&quot;]) and where its submissions are filed. Made from the title for a new form; changing it later breaks existing embeds."></span></label>
               <input id="field-slug" type="text" class="form-input" placeholder="my-form">
               <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Used in embed: <code>data-form="slug"</code>
               </p>
@@ -98,7 +97,7 @@
           </div>
             <div class="row mt-3">
                 <div class="col-6">
-                    <label class="form-label">Project</label>
+                    <label class="form-label">Project <span data-help="Files the form under a project: it shows in that project's lists, and users limited to other projects cannot see it."></span></label>
                     <select id="field-project" class="form-input">
                         <option value="">- none -</option>
                     </select>
@@ -131,7 +130,7 @@
                       placeholder="Thank you for your submission."></textarea>
           </div>
           <div class="mb-3">
-            <label class="form-label">Success Redirect URL</label>
+            <label class="form-label">Success Redirect URL <span data-help="Where the visitor goes after a successful submission - a page on this site (/thank-you) or a full address. Leave empty to show the success message in place."></span></label>
             <input id="setting-success-redirect" type="text" class="form-input"
                    placeholder="/thank-you">
             <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">
@@ -139,7 +138,7 @@
             </p>
           </div>
             <div class="mb-3">
-            <label class="form-label">Layout</label>
+            <label class="form-label">Layout <span data-help="Grid lays fields out in columns (each field can span several); Stacked puts one field per row; Inline puts short fields side by side."></span></label>
             <select id="setting-layout" class="form-select">
                 <option value="grid">Grid</option>
               <option value="stacked">Stacked</option>
@@ -181,7 +180,7 @@
                 </label>
               </div>
               <div class="mb-3">
-                <label class="form-label">Recipients</label>
+                <label class="form-label">Recipients <span data-help="Who is emailed each submission - one or more addresses, comma-separated. Sent through the site's SMTP settings (System › Site Settings › Email); without them nothing is delivered."></span></label>
                 <input id="action-email-recipients" type="text" class="form-input" placeholder="admin@example.com">
                 <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Comma-separated. Uses global
                   SMTP settings.</p>
@@ -203,7 +202,7 @@
                 </label>
               </div>
               <div class="mb-3">
-                <label class="form-label">URL</label>
+                <label class="form-label">URL <span data-help="Each submission is sent here as JSON. The address is not kept in the editor's draft, in case it carries a secret token."></span></label>
                 <input id="action-webhook-url" type="url" class="form-input"
                        placeholder="https://hooks.example.com/form">
               </div>
@@ -222,7 +221,7 @@
             <div class="card-header"><h2>CMS Action</h2></div>
             <div class="card-body">
               <div class="mb-3">
-                <label class="form-label">Action on Submit</label>
+                <label class="form-label">Action on Submit <span data-help="A CMS Action (Data › Actions) run after the submission is stored - for example to create an entry elsewhere or move one on a step. It needs MongoDB; a failure never loses the submission."></span></label>
                 <select id="action-cms-slug" class="form-select">
                   <option value="">- None -</option>
                 </select>
@@ -247,7 +246,7 @@
               that fill a hidden field.</p>
           </div>
           <div>
-            <label class="form-label">Rate Limit (per minute)</label>
+            <label class="form-label">Rate Limit (per minute) <span data-help="How many submissions one visitor's address may make in a minute; more are refused. Keeps a form from being flooded."></span></label>
             <input id="setting-rate-limit" type="number" class="form-input" min="1" max="60" value="3">
             <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Max submissions per IP per
               minute.</p>
@@ -258,3 +257,19 @@
 
   </div>
 </div>
+
+<style>
+.fex-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .75rem; margin-bottom: .75rem;
+    border: 1px solid color-mix(in srgb, var(--dm-warning) 45%, var(--dm-border)); border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 10%, transparent); position: sticky; top: 0; z-index: 5; }
+.fex-bar[hidden] { display: none !important; }
+.fex-chip { font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .55rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-warning) 22%, transparent); color: var(--dm-warning); white-space: nowrap; }
+.fex-note { color: var(--dm-text-muted); }
+.fex-spacer { flex: 1; }
+.fex-bar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.fex-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text-muted);
+    border-radius: var(--dm-radius-sm); padding: 0 .35rem; flex-shrink: 0; }
+.fex-kebab:hover { color: var(--dm-primary); }
+#fields-list .fb-field-card:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
+</style>

package/admin/js/templates/form-submissions.html

@@ -1,30 +1,82 @@
-<div class="view-header">
-    <h1><span data-icon="inbox"></span> <span id="submissions-title">Submissions</span></h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a href="#/forms" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Forms
-        </a>
-        <button id="export-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="download"></span> Export
-        </button>
-        <button id="clear-all-btn" class="btn btn-danger btn-sm">
-            <span data-icon="trash"></span> Clear All
-        </button>
-    </div>
-</div>
+<!-- Form submissions. Bound with M.applyBindings - see admin/views/form-submissions.js, which also inserts the
+     row template (the router renders a templateUrl through _.render, eating any {{…}}). No page heading:
+     the Tool banner ("Forms › <form> submissions") is the heading; All forms, Export and Clear all are banner
+     actions. -->
+<div class="fsx">
+    <p class="fsx-note"><span data-bind-text="intro.value">What people sent through this form.</span>
+        <span data-help-title="Submissions" data-help="Every answer sent through this form, newest first, read from the collection the form saves to (its collection action, or one named after the form). Click one for everything that was sent; right-click it (or ⋮, or Shift+F10) to copy it, copy the sender's email, mark it as spam or delete it. Spam is kept out of the inbox but not deleted - you can put it back."></span></p>
 
-<div class="card mb-3">
-    <div class="card-body" style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;">
-        <input id="sub-search" type="text" class="form-input" placeholder="Search submissions…" style="flex:1;min-width:200px;">
-        <input id="sub-date-from" type="date" class="form-input" style="width:auto;">
-        <span style="color:var(--dm-text-muted,#888);">to</span>
-        <input id="sub-date-to" type="date" class="form-input" style="width:auto;">
-        <span id="sub-count" class="text-muted" style="white-space:nowrap;font-size:.85rem;"></span>
+    <div class="fsx-card">
+        <div class="fsx-bar">
+            <div class="fsx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showInbox" data-bind-class="filter.value === 'inbox' && 'is-on'">Inbox <b data-bind-text="counts.value.inbox"></b></button>
+                <button type="button" data-on-click="showNew" data-bind-class="filter.value === 'new' && 'is-on'">New this week <b data-bind-text="counts.value.new"></b></button>
+                <button type="button" data-on-click="showSpam" data-bind-class="filter.value === 'spam' && 'is-on'">Spam <b data-bind-text="counts.value.spam"></b></button>
+            </div>
+            <input type="search" class="form-input fsx-search" placeholder="Search answers…" aria-label="Search answers" data-model="query.value">
+            <span class="fsx-dates">
+                <input type="date" class="form-input" aria-label="From" data-model="from.value">
+                <span class="fsx-muted">to</span>
+                <input type="date" class="form-input" aria-label="To" data-model="to.value">
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="clearDates" data-bind-hidden="!from.value && !to.value" title="Clear the dates">×</button>
+            </span>
+            <span data-help-title="Finding one" data-help="Search looks through every answer. The dates are the day it was sent, both ends included. New this week is the last 7 days - the same count as the badge on Forms in the sidebar."></span>
+            <span class="fsx-spacer"></span>
+            <small class="fsx-muted" data-bind-text="summary.value"></small>
+        </div>
+        <p class="fsx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="fsx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="fsx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="fsx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
 
-<div class="card">
-    <div class="card-body">
-        <div id="submissions-table"></div>
-    </div>
-</div>
+<style>
+.fsx { display: flex; flex-direction: column; gap: .75rem; }
+.fsx [hidden], .fsx-detail [hidden] { display: none !important; }
+.fsx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fsx-note.is-bad { color: var(--dm-danger); }
+.fsx-muted { color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fsx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.fsx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.fsx-spacer { flex: 1; }
+.fsx-search { flex: 1; min-width: 10rem; max-width: 18rem; }
+.fsx-dates { display: inline-flex; align-items: center; gap: .35rem; }
+.fsx-dates .form-input { width: auto; }
+.fsx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.fsx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.fsx-seg button + button { border-left: 1px solid var(--dm-border); }
+.fsx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.fsx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.fsx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.fsx-list { display: flex; flex-direction: column; }
+.fsx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.fsx-row:last-child { border-bottom: 0; }
+.fsx-row:hover, .fsx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.fsx-dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; background: transparent; }
+.fsx-row.is-new .fsx-dot { background: var(--dm-success); }
+.fsx-row.is-spam .fsx-main strong { color: var(--dm-text-muted); text-decoration: line-through; }
+.fsx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.fsx-main strong, .fsx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fsx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.fsx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.fsx-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); }
+.fsx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.fsx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.fsx-when { min-width: 7.5rem; text-align: right; color: var(--dm-text-muted); font-size: var(--dm-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.fsx-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; }
+.fsx-kebab:hover { color: var(--dm-primary); }
+/* The details slideover */
+.fsx-detail { display: flex; flex-direction: column; gap: .85rem; }
+.fsx-answers { display: flex; flex-direction: column; margin: 0; }
+.fsx-answer { padding: .55rem 0; border-bottom: 1px solid var(--dm-border); }
+.fsx-answer dt { font-size: var(--dm-text-xs); font-weight: 600; color: var(--dm-text-muted); margin-bottom: .15rem; }
+.fsx-answer dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
+.fsx-facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.fsx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.fsx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.fsx-export { display: flex; flex-direction: column; gap: .6rem; }
+.fsx-export .btn { justify-content: flex-start; display: inline-flex; align-items: center; gap: .4rem; }
+@media (max-width: 720px) { .fsx-when { display: none; } .fsx-dates { flex-basis: 100%; } }
+</style>

package/admin/js/templates/layouts.html

@@ -1,49 +1,132 @@
-<div class="view-header">
-  <h1><span data-icon="layout"></span> Layouts</h1>
-</div>
+<!-- Layouts. Bound with M.applyBindings - see admin/views/layouts.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 New layout is a banner action. -->
+<div class="lyx">
+    <div class="tabs lyx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Layouts <span class="lyx-count" data-bind-text="counts.value.all"></span></button>
+            <button type="button" class="tab-item">Options <span class="lyx-dot" data-bind-hidden="!optDirty.value" title="Unsaved changes">●</span></button>
+        </div>
 
-<div class="tabs" id="layouts-tabs">
-  <div class="tab-list">
-    <button class="tab-item active" data-tab="panel-presets">Layout Presets</button>
-    <button class="tab-item" data-tab="panel-options">Layout Options</button>
-  </div>
-  <div class="tab-content">
+        <!-- Layouts -->
+        <div class="tab-panel active">
+            <p class="lyx-note">A layout sets a page's width, background, and whether it has the navbar, footer and sidebar.
+                Pages choose one in the page editor; a page that names none uses Default.
+                <span data-help-title="Layouts" data-help="The built-in layouts can be edited but not deleted. A layout you make gets a key from its name (Dark Landing becomes dark-landing) - that key is what a page's layout: line names, and it does not change if you rename the layout later. Deleting a layout that pages use leaves those pages on Default."></span></p>
 
-    <div class="tab-panel active" id="panel-presets">
-        <div class="view-actions mb-4"
-             style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
-            <p class="text-muted" style="margin:0;">Layout presets define the structure, width, and background of pages.
-                Assign a layout to each page via the page editor.</p>
-            <button id="create-layout-btn" class="btn btn-primary"><span data-icon="plus"></span> New Layout</button>
-      </div>
-      <div id="presets-grid" class="presets-grid"></div>
-    </div>
+            <div class="lyx-alert" data-bind-hidden="!missing.value.length">
+                <span data-icon="alert-triangle" data-icon-size="16"></span>
+                <span data-bind-text="missingText.value"></span>
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="showMissing">Show them</button>
+            </div>
 
-    <div class="tab-panel" id="panel-options">
-      <div class="card mb-4">
-        <div class="card-header"><h3>Spacer Shortcode</h3></div>
-        <div class="card-body">
-          <p class="text-muted mb-3">
-            The <code>[spacer /]</code> shortcode inserts a vertical gap. Set the default height here;
-            individual spacers can override it with <code>size="N"</code>.
-          </p>
-          <div class="form-group">
-            <label class="form-label" for="spacer-size-input">Default spacer height (px)</label>
-            <input id="spacer-size-input" type="number" class="form-input" style="max-width:120px" min="0" max="500"
-                   step="1" value="8">
-          </div>
-          <div class="form-group mt-3">
-            <label class="form-label" for="spacer-class-input">Default spacer CSS class</label>
-            <input id="spacer-class-input" type="text" class="form-input" style="max-width:240px"
-                   placeholder="e.g. my-gap">
-            <small class="text-muted">Applied to every <code>[spacer /]</code> unless overridden per-instance with
-              <code>class="…"</code>.</small>
-          </div>
-          <button id="save-options-btn" class="btn btn-primary mt-3"><span data-icon="save"></span> Save Options
-          </button>
+            <div class="lyx-card">
+                <div class="lyx-bar">
+                    <div class="lyx-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="showBuiltin" data-bind-class="filter.value === 'builtin' && 'is-on'">Built in <b data-bind-text="counts.value.builtin"></b></button>
+                        <button type="button" data-on-click="showCustom" data-bind-class="filter.value === 'custom' && 'is-on'">Yours <b data-bind-text="counts.value.custom"></b></button>
+                    </div>
+                    <input type="search" class="form-input lyx-search" placeholder="Search layouts…" aria-label="Search layouts" data-model="query.value">
+                    <span data-help-title="The list" data-help="Click a layout to edit it. Right-click it (or ⋮, or Shift+F10) to see the pages that use it, duplicate it, copy the line a page's frontmatter needs, or delete it. The little drawing shows its shape: the navbar and footer bars, how wide the content is, and its background colour."></span>
+                </div>
+                <p class="lyx-note" data-bind-hidden="!loading.value">Loading…</p>
+                <p class="lyx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+                <p class="lyx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length">No layouts match.</p>
+                <div class="lyx-list" data-each="rows.value key=key"></div>
+            </div>
         </div>
-      </div>
-    </div>
 
-  </div>
+        <!-- Options -->
+        <div class="tab-panel">
+            <div class="lyx-card">
+                <div class="lyx-card-title">Spacer shortcode
+                    <span data-help-title="[spacer /]" data-help="The [spacer /] shortcode puts a vertical gap in a page. These are its defaults; a single spacer can still say size=&quot;40&quot; or class=&quot;…&quot; for itself."></span></div>
+                <div class="lyx-grid">
+                    <div>
+                        <label class="form-label" for="lyx-o-size">Default height (px)</label>
+                        <input id="lyx-o-size" type="number" min="0" max="500" step="1" class="form-input" data-model="spacerSize.value">
+                        <small class="lyx-err" data-bind-hidden="!optErrSize.value" data-bind-text="optErrSize.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="lyx-o-class">Default CSS class</label>
+                        <input id="lyx-o-class" type="text" class="form-input" placeholder="e.g. my-gap" data-model="spacerClass.value">
+                        <small class="lyx-err" data-bind-hidden="!optErrClass.value" data-bind-text="optErrClass.value"></small>
+                    </div>
+                </div>
+                <div class="lyx-actions">
+                    <small class="lyx-hint" data-bind-text="optStatus.value"></small>
+                    <span class="lyx-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="resetOptions" data-bind-hidden="!optDirty.value">Discard</button>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="saveOptions" data-bind-disabled="optCannot.value">
+                        <span data-icon="save" data-icon-size="13"></span> Save options</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
+
+<style>
+.lyx { display: flex; flex-direction: column; gap: .75rem; }
+.lyx [hidden], .lyx-form [hidden] { display: none !important; }
+.lyx-note { margin: 0 0 .6rem; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.lyx-note.is-bad { color: var(--dm-danger); }
+.lyx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.lyx-dot { color: var(--dm-warning); font-size: var(--dm-text-xs); margin-left: .25rem; }
+.lyx-alert { display: flex; gap: .5rem; align-items: center; margin: 0 0 .6rem; padding: .5rem .75rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); font-size: var(--dm-text-sm); }
+.lyx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.lyx-card-title { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
+.lyx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.lyx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.lyx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.lyx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.lyx-seg button + button { border-left: 1px solid var(--dm-border); }
+.lyx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.lyx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.lyx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.lyx-list { display: flex; flex-direction: column; }
+.lyx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.lyx-row:last-child { border-bottom: 0; }
+.lyx-row:hover, .lyx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+/* The little drawing of a layout: navbar, content column, footer, background. */
+.lyx-shape { flex-shrink: 0; width: 3rem; height: 2.2rem; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm);
+    background: var(--dm-surface); display: flex; flex-direction: column; overflow: hidden; }
+.lyx-shape-nav, .lyx-shape-foot { height: 5px; background: color-mix(in srgb, var(--dm-text-muted) 55%, transparent); }
+.lyx-shape-body { flex: 1; display: flex; justify-content: center; padding: 3px 0; gap: 2px; }
+.lyx-shape-col { background: color-mix(in srgb, var(--dm-primary) 45%, transparent); border-radius: 1px; }
+.lyx-shape-side { width: 18%; background: color-mix(in srgb, var(--dm-text-muted) 35%, transparent); border-radius: 1px; }
+.lyx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.lyx-main strong, .lyx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lyx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.lyx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.lyx-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); }
+.lyx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.lyx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.lyx-chip.is-muted { opacity: .7; }
+.lyx-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; }
+.lyx-kebab:hover { color: var(--dm-primary); }
+.lyx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
+.lyx-wide { grid-column: 1 / -1; }
+.lyx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.lyx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.lyx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.lyx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.lyx-spacer { flex: 1; }
+/* The editor slideover */
+.lyx-form { display: flex; flex-direction: column; gap: .85rem; }
+.lyx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.lyx-switches { display: flex; flex-wrap: wrap; gap: 1.25rem; }
+.lyx-switches label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
+.lyx-colour { display: flex; align-items: center; gap: .5rem; }
+.lyx-colour input[type="color"] { width: 2.4rem; height: 2rem; padding: 2px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: transparent; cursor: pointer; }
+.lyx-preview { display: flex; align-items: center; gap: .75rem; padding: .6rem; border: 1px dashed var(--dm-border); border-radius: var(--dm-radius-md); }
+.lyx-preview .lyx-shape { width: 5rem; height: 3.6rem; }
+.lyx-pages { display: flex; flex-direction: column; }
+.lyx-pages a { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem .25rem; border-bottom: 1px solid var(--dm-border); color: var(--dm-text); text-decoration: none; }
+.lyx-pages a:last-child { border-bottom: 0; }
+.lyx-pages a:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.lyx-pages small { color: var(--dm-text-muted); }
+@media (max-width: 640px) { .lyx-grid { grid-template-columns: 1fr; } .lyx-chips .lyx-chip:not(.is-info) { display: none; } }
+</style>

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

@@ -1,10 +1,15 @@
-<div class="page-header">
-    <h2><span data-icon="menu"></span> <span id="me-title">Edit menu</span></h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" href="#/menus"><span data-icon="arrow-left"></span> Back</a>
-        <button class="btn btn-primary" id="me-save"><span data-icon="check"></span> Save</button>
-    </div>
-</div>
+<!-- Menus › Edit. See admin/js/views/menu-editor.js. No page heading: the Tool banner above is the
+     heading ("Menus › <name>"), with All menus, Menu locations and Save as its actions. -->
+<div class="mex">
+<p class="mex-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 keep them. Leave and they are kept as a draft for next time.</span>
+    <span class="mex-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>
+<p class="mex-alert is-bad" data-bind-hidden="!problems.value">
+    <span data-icon="alert-triangle" data-icon-size="16"></span>
+    <span data-bind-text="problems.value"></span></p>
 
 <div class="card">
     <div class="card-body" style="padding-top:0;">
@@ -17,10 +22,13 @@
             </div>
             <div class="tab-content">
                 <div class="tab-panel active" id="me-items" data-panel="me-items">
-                    <div class="toolbar">
-                        <button class="btn btn-sm btn-secondary" id="me-add-item"><span data-icon="plus"></span> Add item</button>
-                        <button class="btn btn-sm btn-ghost" id="me-add-separator"><span data-icon="minus"></span> Add separator</button>
-                        <button class="btn btn-sm btn-ghost" id="me-add-spacer"><span data-icon="move"></span> Add spacer</button>
+                    <div class="toolbar mex-toolbar">
+                        <button type="button" class="btn btn-sm btn-secondary" id="me-add-item" data-on-click="addItem"><span data-icon="plus"></span> Add item</button>
+                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-separator" data-on-click="addSeparator"><span data-icon="minus"></span> Add separator</button>
+                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-spacer" data-on-click="addSpacer"><span data-icon="move"></span> Add spacer</button>
+                        <span class="mex-spacer"></span>
+                        <small class="mex-note"><span data-bind-text="itemCount.value"></span> items</small>
+                        <span data-help-title="Items" data-help="Click an item to edit its label, link, icon, who sees it, badge and look. Right-click it (or ⋮, or Shift+F10) to add an item or a sub-item below it, move, indent, duplicate, hide or remove it. Drag the grip to move it, or drop it onto another item to nest it. With an item focused: Enter edits, Alt+Up / Down moves, Alt+Right / Left indents, Delete removes. Changes are kept only when you Save."></span>
                     </div>
                     <div id="me-items-list" class="menu-tree"></div>
                 </div>
@@ -31,7 +39,8 @@
                     </p>
                     <div class="grid grid-cols-2 dm-pe-grid">
                         <div class="form-group">
-                            <label for="me-variant">Variant</label>
+                            <label for="me-variant">Variant
+                                <span data-help="The colour scheme of the bar - transparent over the page, dark, light, or the theme's own default."></span></label>
                             <select id="me-variant" name="variant" class="form-input">
                                 <option value="">- default -</option>
                                 <option value="transparent">Transparent</option>
@@ -41,7 +50,8 @@
                             </select>
                         </div>
                         <div class="form-group">
-                            <label for="me-position">Position</label>
+                            <label for="me-position">Position
+                                <span data-help-title="Position" data-help="Sticky stays at the top as the page scrolls; fixed never moves; static scrolls away with the page. Floating lifts the menu off the page into a panel pinned to a corner or edge - its own options appear below."></span></label>
                             <select id="me-position" name="position" class="form-input">
                                 <option value="">- default -</option>
                                 <option value="sticky">Sticky</option>
@@ -51,7 +61,8 @@
                             </select>
                         </div>
                         <div class="form-group">
-                            <label for="me-orientation">Orientation</label>
+                            <label for="me-orientation">Orientation
+                                <span data-help="Horizontal lays the items in a row; vertical stacks them in a column - a side rail when this menu is the navbar."></span></label>
                             <select id="me-orientation" name="orientation" class="form-input">
                                 <option value="">- default (horizontal) -</option>
                                 <option value="horizontal">Horizontal</option>
@@ -171,7 +182,8 @@
                             </label>
                         </div>
                         <div class="form-group">
-                            <label for="me-highlight-hover">Hover effect</label>
+                            <label for="me-highlight-hover">Hover effect
+                                <span data-help-title="Highlighting" data-help="How items react under the pointer, and how the item for the page being viewed is marked. Set here for the whole menu; any single item can override both in its own editor."></span></label>
                             <!-- Options are filled from HIGHLIGHT_HOVER in menu-decor.mjs on mount,
                                  so this list and the per-item editor's always match. -->
                             <select id="me-highlight-hover" name="highlightHover" class="form-input"></select>
@@ -234,7 +246,8 @@
                     </p>
                     <div class="grid grid-cols-2 dm-pe-grid">
                         <div class="form-group">
-                            <label for="me-bind-slot">Slot</label>
+                            <label for="me-bind-slot">Slot
+                                <span data-help-title="Binding" data-help="Makes this menu take over a slot (the navbar, a footer, an overlay…) on some pages only - a project's pages, or pages matching a pattern - while the menu mapped under Menu locations stays everywhere else. The most specific match wins."></span></label>
                             <select id="me-bind-slot" name="bindSlot" class="form-input"></select>
                             <small class="form-hint">Leave unset for no binding - this menu then only renders where it is mapped or where a <code>[menu]</code> shortcode places it.</small>
                         </div>
@@ -261,7 +274,8 @@
                 <div class="tab-panel" id="me-meta" data-panel="me-meta">
                     <div class="grid grid-cols-2 dm-pe-grid">
                         <div class="form-group">
-                            <label for="me-slug">Slug <span class="required">*</span></label>
+                            <label for="me-slug">Slug <span class="required">*</span>
+                                <span data-help="The menu's id - its file name and what [menu slug=&quot;…&quot;] names. Renaming it moves the menu and any location mapped to it."></span></label>
                             <input type="text" id="me-slug" name="slug" class="form-input" required>
                             <small class="form-hint">Lowercase alphanumeric + hyphen - affects file name</small>
                         </div>
@@ -284,3 +298,29 @@
         </div>
     </div>
 </div>
+</div>
+
+<style>
+/* Menus › Edit - see admin/js/views/menu-editor.js. Only --dm-* tokens. */
+.mex { display: flex; flex-direction: column; gap: .75rem; }
+.mex [hidden] { display: none !important; }
+.mex-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-warning) 16%, transparent); color: var(--dm-text); }
+.mex-alert.is-dirty { background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.mex-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.mex-spacer { flex: 1; }
+.mex-note { color: var(--dm-text-muted); font-size: var(--dm-text-sm); margin: 0; }
+.mex-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
+.mex-toolbar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+/* Rows: grip, label, url, hide, edit, ⋮ - everything else is in the row's context menu. */
+.mex .menu-tree-row--slim { grid-template-columns: 16px minmax(0, 1fr) auto repeat(3, auto); padding: 3px 4px; border-radius: var(--dm-radius-sm); cursor: pointer; }
+.mex .menu-tree-row--separator, .mex .menu-tree-row--spacer { grid-template-columns: 16px minmax(80px, 1fr) auto; padding: 2px 4px; }
+.mex .menu-tree-row:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 5%, transparent)); }
+.mex .menu-tree-row:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 1px; }
+.mex .menu-tree-row .me-row-label, .mex .menu-tree-row .me-row-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.mex .me-hidden.active { color: var(--dm-warning); }
+.mex .mex-untitled { color: var(--dm-danger); font-style: italic; font-weight: 500; }
+.mex-kebab { font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text-muted); padding: 0 .4rem; }
+.mex-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 640px) { .mex .menu-tree-row--slim .me-row-url { display: none; } .mex .menu-tree-row--slim { grid-template-columns: 16px minmax(0, 1fr) repeat(3, auto); } }
+</style>