domma-cms 0.54.2 → 0.66.0

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

@@ -0,0 +1,212 @@
+<div class="page-header">
+    <h2><span data-icon="menu"></span> <span id="ctx-title">New context menu</span></h2>
+    <div class="header-actions">
+        <a class="btn btn-secondary" href="#/context-menus"><span data-icon="arrow-left"></span> Back</a>
+        <button class="btn btn-primary" id="ctx-save"><span data-icon="check"></span> Save</button>
+    </div>
+</div>
+
+<div id="ctx-errors" class="alert alert-danger mb-4" style="display:none;"></div>
+
+<p class="text-muted ctx-intro">
+    A context menu is not placed on a page the way a nav menu is. It attaches to a <strong>region</strong>
+    and opens when someone right-clicks inside it. So there are two questions to answer: which region, and
+    what the menu offers. Everything else has a sensible default.
+</p>
+
+<div class="row ctx-workspace">
+  <div class="col-8">
+<div class="tabs" id="ctx-tabs">
+    <div class="tab-list">
+        <button class="tab-item active">Binding</button>
+        <button class="tab-item">Items</button>
+        <button class="tab-item">Appearance</button>
+        <button class="tab-item">Scope</button>
+    </div>
+
+    <!-- Binding ------------------------------------------------------- -->
+    <div class="tab-panel active">
+        <div class="row">
+            <div class="col-12">
+                <div class="card mb-4">
+                    <div class="card-header"><h3 class="m-0">Where it binds</h3></div>
+                    <div class="card-body">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-name">Name<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Your label for this menu in the admin list. Visitors never see it.">?</button></label>
+                            <input class="form-input" id="ctx-name" type="text" placeholder="Entry actions">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-slug">Slug<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The filename this menu is saved as. Fixed once created, because the file is the record.">?</button></label>
+                            <input class="form-input" id="ctx-slug" type="text" placeholder="entry-actions">
+                            <small class="text-muted">Lowercase letters, numbers and hyphens. Cannot be changed later.</small>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-selector">Container selector<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="A CSS selector for the region, e.g. #product-grid, .entry-card or main. Right-clicks anywhere inside it are offered to this menu. body, html, * and :root are refused, because they would swallow every other menu on the page.">?</button></label>
+                            <input class="form-input" id="ctx-selector" type="text" placeholder="#product-grid">
+                            <small class="text-muted">The region this menu covers. Right-clicks inside it are offered to this menu.</small>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-match">Match (optional)<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Narrows it: only claim the click when it landed on something matching this, e.g. [data-entry-id] to answer on rows but not the space between them. Blank means the whole container.">?</button></label>
+                            <input class="form-input" id="ctx-match" type="text" placeholder="[data-entry-id]">
+                            <small class="text-muted">Only claim right-clicks on descendants matching this. Leave empty to cover the whole container.</small>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-exclude">Exclude (optional)<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Holes in the region. A right-click on one of these falls through to whatever encloses it, which is useful for links and inputs where the browser's own menu is more use.">?</button></label>
+                            <input class="form-input" id="ctx-exclude" type="text" placeholder="a, button, input">
+                            <small class="text-muted">Regions that decline, so the click falls through to whatever encloses them.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-12">
+                <div class="card mb-4">
+                    <div class="card-header"><h3 class="m-0">Behaviour<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Menus can sit inside one another. A right-click picks the INNERMOST menu covering the spot clicked, never the one that happened to load first.">?</button></h3></div>
+                    <div class="card-body">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-inherit">When nested inside another menu<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Append puts the outer menu's items after yours, Prepend before, and Stand alone shows only yours.">?</button></label>
+                            <select class="form-select" id="ctx-inherit">
+                                <option value="append">Show my items, then theirs (default)</option>
+                                <option value="prepend">Show their items, then mine</option>
+                                <option value="false">Show only my items</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-check">
+                                <input type="checkbox" id="ctx-enabled" checked> Enabled
+                            </label>
+                            <small class="text-muted">Turn this off to park a menu without deleting it. A disabled menu is never sent to the browser.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Items --------------------------------------------------------- -->
+    <div class="tab-panel">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="m-0">Items<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="What the menu offers when it opens, top to bottom. An Item does something when clicked, a Divider draws a line, a Heading labels a group. A menu whose items are all dividers and headings is refused on save, because there would be nothing to click.">?</button></h3>
+                <button class="btn btn-sm btn-secondary" id="ctx-add-item"><span data-icon="plus"></span> Add item</button>
+            </div>
+            <div class="card-body">
+                <div id="ctx-items"></div>
+                <p class="text-muted mb-0" id="ctx-items-empty">No items yet. Every menu needs at least one.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Appearance ---------------------------------------------------- -->
+    <div class="tab-panel">
+        <div class="card">
+            <div class="card-header"><h3 class="m-0">Appearance<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="How the panel looks when it opens. Leave anything blank to inherit the site theme, which is usually what you want so the menu matches everything around it.">?</button></h3></div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-accent">Accent<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The colour used for hover and the active item.">?</button></label>
+                            <select class="form-select" id="ctx-accent">
+                                <option value="">Theme default</option>
+                                <option value="primary">Primary</option>
+                                <option value="success">Success</option>
+                                <option value="danger">Danger</option>
+                                <option value="warning">Warning</option>
+                                <option value="info">Info</option>
+                            </select>
+                            <small class="text-muted">Tints the border and hover wash. Labels keep the theme's text colour so they stay readable.</small>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-transition">Transition</label>
+                            <select class="form-select" id="ctx-transition">
+                                <option value="">Default (scale)</option>
+                                <option value="fade">Fade</option>
+                                <option value="slide">Slide</option>
+                                <option value="none">None</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-density">Density</label>
+                            <select class="form-select" id="ctx-density">
+                                <option value="">Comfortable</option>
+                                <option value="compact">Compact</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-radius">Corner radius</label>
+                            <select class="form-select" id="ctx-radius">
+                                <option value="">Default</option>
+                                <option value="none">Square</option>
+                                <option value="sm">Small</option>
+                                <option value="md">Medium</option>
+                                <option value="lg">Large</option>
+                                <option value="xl">Extra large</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-shadow">Shadow</label>
+                            <select class="form-select" id="ctx-shadow">
+                                <option value="">Default</option>
+                                <option value="none">None</option>
+                                <option value="sm">Small</option>
+                                <option value="md">Medium</option>
+                                <option value="lg">Large</option>
+                                <option value="xl">Extra large</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-opacity">Opacity<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Below 100 the panel lets the page show through. Anything under about 80 gets hard to read over busy content.">?</button></label>
+                            <input class="form-input" id="ctx-opacity" type="number" min="20" max="100" placeholder="100">
+                            <small class="text-muted">Below 100 gives a translucent panel with a blurred backdrop. Text stays fully opaque.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scope --------------------------------------------------------- -->
+    <div class="tab-panel">
+        <div class="card">
+            <div class="card-header"><h3 class="m-0">Scope<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Which pages carry this menu. Leave BOTH blank and it applies site-wide. A menu that does not apply to a page is not sent to that page at all.">?</button></h3></div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-pages">Pages<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Comma separated URL paths. Supports * as a wildcard, so /shop/* covers everything under /shop. Blank means every page.">?</button></label>
+                            <input class="form-input" id="ctx-pages" type="text" placeholder="/shop/*, /about">
+                            <small class="text-muted">Comma separated. Supports a trailing <code>/*</code>. Leave empty for site-wide.</small>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-projects">Projects<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Comma separated project slugs. The menu then applies only to pages belonging to those projects.">?</button></label>
+                            <input class="form-input" id="ctx-projects" type="text" placeholder="core, shop">
+                            <small class="text-muted">Comma separated project slugs.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+  </div><!-- /col-8 -->
+
+  <!-- One preview, beside the tabs rather than inside them: four copies would
+       be four elements sharing #ctx-preview, and the menu binds by selector.
+       Sticky, so it stays put while a long Items tab scrolls past it. -->
+  <div class="col-4">
+    <div class="card ctx-preview-card">
+      <div class="card-header"><h3 class="m-0">Try it<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The real menu, built from what you have entered, updating as you type. This is the component itself rather than a drawing of it.">?</button></h3></div>
+      <div class="card-body">
+        <p class="text-muted">Right-click the panel below to see this menu as configured.</p>
+        <div id="ctx-preview" class="p-4 text-center" style="border:1px dashed var(--dm-border); border-radius:var(--dm-radius-md);">
+          Right-click to preview
+        </div>
+      </div>
+    </div>
+  </div>
+</div><!-- /ctx-workspace -->

package/admin/js/templates/context-menus.html

@@ -0,0 +1,16 @@
+<div class="page-header">
+    <h2><span data-icon="menu"></span> Context Menus</h2>
+    <div class="header-actions">
+        <a class="btn btn-primary" href="#/context-menus/new"><span data-icon="plus"></span> New context menu</a>
+    </div>
+</div>
+<p class="text-muted mb-4">
+    Right-click menus bound to a region of a page. Unlike navigation menus these have no slot -
+    they bind to a CSS selector and are resolved in the browser by whichever menu is nearest the click.
+</p>
+
+<div class="card">
+    <div class="card-body">
+        <div id="context-menus-table"></div>
+    </div>
+</div>

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

@@ -59,6 +59,17 @@
                             </select>
                             <small class="form-hint">Vertical stacks the items into a column - a docked side rail in the navbar slot, an indented list for <code>[menu]</code> and floating panels. Below 993px the navbar always falls back to the mobile drawer.</small>
                         </div>
+                        <div class="form-group">
+                            <label for="me-align">Alignment</label>
+                            <select id="me-align" name="align" class="form-input">
+                                <option value="">- default -</option>
+                                <option value="left">Left</option>
+                                <option value="centre">Centre</option>
+                                <option value="right">Right</option>
+                                <option value="spread">Spread evenly</option>
+                            </select>
+                            <small class="form-hint">Where the items sit along a horizontal menu. On the public navbar the default is <strong>centre</strong>, measured on the bar itself rather than on the room left beside the brand. A <code>[menu]</code> in the page body packs left unless you choose otherwise. Vertical menus and the mobile drawer ignore this.</small>
+                        </div>
                         <div class="form-group dm-vertical-field" style="display:none">
                             <label for="me-side">Rail side</label>
                             <select id="me-side" name="side" class="form-input">
@@ -161,33 +172,16 @@
                         </div>
                         <div class="form-group">
                             <label for="me-highlight-hover">Hover effect</label>
-                            <select id="me-highlight-hover" name="highlightHover" class="form-input">
-                                <option value="">- theme default -</option>
-                                <option value="none">None - no change on hover</option>
-                                <option value="colour">Colour change</option>
-                                <option value="underline">Underline</option>
-                                <option value="overline">Overline</option>
-                                <option value="background">Background tint</option>
-                                <option value="uppercase">Uppercase</option>
-                                <option value="grow">Grow</option>
-                                <option value="breathe">Breathe</option>
-                                <option value="glow">Glow</option>
-                            </select>
-                            <small class="form-hint">What an item does under the pointer. Applies wherever this menu is drawn - navbar, footer, <code>[menu]</code> and the admin sidebar.</small>
+                            <!-- 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>
+                            <small class="form-hint">What an item does under the pointer. Applies wherever this menu is drawn - navbar, footer, <code>[menu]</code> and the admin sidebar. Any single item can override this in its own editor, under Highlighting.</small>
                         </div>
                         <div class="form-group">
-                            <label for="me-highlight-active">Current page</label>
-                            <select id="me-highlight-active" name="highlightActive" class="form-input">
-                                <option value="">- theme default -</option>
-                                <option value="none">None - not marked at all</option>
-                                <option value="bold">Bold</option>
-                                <option value="underline">Underline</option>
-                                <option value="overline">Overline</option>
-                                <option value="background">Background tint</option>
-                                <option value="darken">Darkened</option>
-                                <option value="pill">Filled pill</option>
-                            </select>
-                            <small class="form-hint">How the item pointing at the page you are on is marked out.</small>
+                            <label for="me-highlight-active">When selected</label>
+                            <!-- Filled from HIGHLIGHT_ACTIVE in menu-decor.mjs on mount. -->
+                            <select id="me-highlight-active" name="highlightActive" class="form-input"></select>
+                            <small class="form-hint">How the item pointing at the page you are on is marked out. Any single item can override this in its own editor, under Highlighting.</small>
                         </div>
                         <div class="form-group">
                             <label for="me-highlight-accent">Highlight colour</label>

package/admin/js/templates/plugin-code.html

@@ -68,7 +68,7 @@
                 <span class="pcode-current" id="pcode-current">Select a file</span>
                 <span style="flex:1"></span>
                 <button id="pcode-rename" class="btn btn-sm btn-ghost" title="Rename file" disabled><span data-icon="edit-3"></span></button>
-                <button id="pcode-delete" class="btn btn-sm btn-ghost" title="Delete file" disabled><span data-icon="trash-2"></span></button>
+                <button id="pcode-delete" class="btn btn-sm btn-ghost" title="Delete file" disabled><span data-icon="trash"></span></button>
                 <button id="pcode-saveall" class="btn btn-sm btn-ghost" disabled>Save All</button>
                 <button id="pcode-save" class="btn btn-sm btn-primary" disabled><span data-icon="save"></span> Save</button>
             </div>

package/{plugins/site-search/admin/templates/site-search.html → admin/js/templates/search.html}

@@ -1,5 +1,5 @@
 <div class="view-header">
-    <h1><span data-icon="search"></span> Site Search</h1>
+    <h1><span data-icon="search"></span> Search</h1>
     <div>
         <button id="save-settings-btn" class="btn btn-primary">
             <span data-icon="save"></span> Save
@@ -20,6 +20,16 @@
             <div class="card mb-4" style="margin-top:1rem;">
                 <div class="card-body">
 
+                    <div class="row mb-3">
+                        <div class="col">
+                            <label class="form-check-label">
+                                <input id="field-enabled" type="checkbox">
+                                Enable search on the public site
+                            </label>
+                            <span class="form-hint">When off, no search trigger, stylesheet or script is added to public pages.</span>
+                        </div>
+                    </div>
+
                     <div class="row mb-3">
                         <div class="col">
                             <label class="form-label">Search placeholder text</label>
@@ -100,6 +110,41 @@
                             </div>
                         </div>
 
+                        <div class="row mb-3" id="ss-size-row">
+                            <div class="col">
+                                <label class="form-label" for="field-icon-size">Icon size</label>
+                                <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
+                                    <input id="field-icon-size" type="range" min="32" max="96" step="2" value="52"
+                                           style="flex:1 1 200px;max-width:260px;">
+                                    <span id="ss-size-value" class="text-sm font-mono" style="min-width:3.5rem;">52px</span>
+                                </div>
+                                <span class="form-hint">How big the floating button is, in pixels (32-96). The search glyph inside
+                                    scales with it. 44px and up is the comfortable range for tapping on a phone.</span>
+                            </div>
+                        </div>
+
+                        <div class="row mb-3" id="ss-radius-row">
+                            <div class="col">
+                                <label class="form-label" for="field-icon-radius">Icon corner radius</label>
+                                <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
+                                    <input id="field-icon-radius" type="range" min="0" max="26" step="1" value="26"
+                                           style="flex:1 1 200px;max-width:260px;">
+                                    <span id="ss-radius-value" class="text-sm font-mono" style="min-width:3.5rem;">26px</span>
+                                    <span id="ss-radius-preview" aria-hidden="true"
+                                          style="width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
+                                                 background:var(--dm-surface);color:var(--dm-text);
+                                                 border:1px solid var(--dm-border);border-radius:26px;
+                                                 box-shadow:0 4px 16px rgba(0,0,0,.14);flex:0 0 auto;transition:border-radius .12s;">
+                                        <span data-icon="search" style="width:20px;height:20px;"></span>
+                                    </span>
+                                </div>
+                                <span class="form-hint">0 is a square, <span id="ss-radius-max-hint">26</span> a circle - the top of the
+                                    range is always half the icon size, so it moves when you change the size above. The preview is the real
+                                    button at its real size. Applies to the floating button in icon mode only - the navbar icon has no
+                                    surface to round, and the labelled variant is a pill by definition.</span>
+                            </div>
+                        </div>
+
                         <div class="row" style="align-items:flex-start;gap:0;">
 
                             <div class="col-auto" style="margin-right:1.5rem;margin-bottom:1rem;">
@@ -175,14 +220,15 @@
         <div class="tab-panel" id="tab-how-it-works">
             <div class="card mb-4" style="margin-top:1rem;">
                 <div class="card-body">
-                    <p class="text-muted mb-2">Site Search adds a search icon to the public navbar. Visitors can click
-                        it or use
-                        the keyboard shortcut to open a full-screen overlay with live results.</p>
+                    <p class="text-muted mb-2">Search adds a search icon to the public navbar, or a floating button
+                        if you prefer. Visitors can click it or use the keyboard shortcut to open a full-screen overlay
+                        with live results.</p>
                     <ul class="text-muted" style="padding-left:1.25rem;line-height:1.8;">
                         <li>Results are weighted: title matches score highest, followed by tags, description, and page
                             content.
                         </li>
                         <li>Draft pages and private pages are excluded from results.</li>
+                        <li>An authored context menu can offer "Site search" as an action, which opens the same overlay.</li>
                         <li>Use <kbd>↑</kbd> <kbd>↓</kbd> to navigate results, <kbd>↵</kbd> to open, <kbd>Esc</kbd> to
                             close.
                         </li>

package/admin/js/templates/settings.html

@@ -30,101 +30,20 @@
         </div>
       </div>
       <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">Font Family</label>
-          <select id="field-font-family" class="form-select">
-            <optgroup label="Sans-serif">
-              <option value="Roboto">Roboto (default)</option>
-              <option value="Inter">Inter</option>
-              <option value="Open Sans">Open Sans</option>
-              <option value="Lato">Lato</option>
-              <option value="Nunito">Nunito</option>
-              <option value="Poppins">Poppins</option>
-              <option value="Source Sans 3">Source Sans 3</option>
-              <option value="Montserrat">Montserrat</option>
-              <option value="Raleway">Raleway</option>
-              <option value="DM Sans">DM Sans</option>
-              <option value="Work Sans">Work Sans</option>
-            </optgroup>
-            <optgroup label="Serif">
-              <option value="Merriweather">Merriweather</option>
-              <option value="Playfair Display">Playfair Display</option>
-              <option value="Lora">Lora</option>
-              <option value="Roboto Slab">Roboto Slab</option>
-            </optgroup>
-            <optgroup label="Dyslexia-friendly">
-              <option value="Lexend">Lexend</option>
-              <option value="Atkinson Hyperlegible">Atkinson Hyperlegible</option>
-              <option value="Andika">Andika</option>
-            </optgroup>
-            <optgroup label="System">
-              <option value="system-ui">System UI (no web font)</option>
-            </optgroup>
-          </select>
-          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the public-facing
-            website body text. The dyslexia-friendly group uses wider letterforms and spacing to reduce character
-            confusion.</p>
-        </div>
-        <div class="col-3">
-          <label class="form-label">Font Size</label>
-          <select id="field-font-size" class="form-select">
-            <option value="13">13px - Compact</option>
-            <option value="14">14px - Small</option>
-            <option value="15">15px - Slightly small</option>
-            <option value="16">16px - Default</option>
-            <option value="17">17px - Slightly large</option>
-            <option value="18">18px - Large</option>
-            <option value="20">20px - Extra large</option>
-          </select>
-          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Root font size. All rem/em values
-            scale with this.</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-6">
-          <label class="form-label">Public Site Theme</label>
-            <select id="field-theme" class="form-select"></select>
-          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the public-facing
-            website.</p>
-        </div>
-        <div class="col-6">
-          <label class="form-label">Admin Theme</label>
-            <select id="field-admin-theme" class="form-select"></select>
-          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the admin panel.</p>
-        </div>
-      </div>
-        <!-- Auto day/night theme -->
-        <div class="row mt-3">
-            <div class="col">
-                <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                    <input id="field-auto-theme-enabled" type="checkbox" class="form-check"> Enable automatic day/night
-                    theme switching
-                </label>
-                <p id="auto-theme-roller-hint" class="form-hint text-muted"
-                   style="display:none;margin-top:.35rem;font-size:.8rem;">Custom themes (Theme Roller) do not support
-                    auto-switching.</p>
-            </div>
-        </div>
-        <div id="auto-theme-fields" class="row mt-3" style="display:none;">
-            <div class="col-6">
-                <label class="form-label">Day Theme</label>
-                <select id="field-day-theme" class="form-select"></select>
-            </div>
-            <div class="col-6">
-                <label class="form-label">Night Theme</label>
-                <select id="field-night-theme" class="form-select"></select>
-            </div>
-            <div class="col-3 mt-3">
-                <label class="form-label">Day Starts At</label>
-                <input id="field-day-start" type="time" class="form-input" value="07:00">
-            </div>
-            <div class="col-3 mt-3">
-                <label class="form-label">Night Starts At</label>
-                <input id="field-night-start" type="time" class="form-input" value="19:00">
+        <div class="col">
+          <div class="card" style="background:var(--dm-surface-raised);">
+            <div class="card-body" style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
+              <span data-icon="droplet"></span>
+              <div style="flex:1 1 240px;">
+                <strong>Themes, fonts and element overrides moved.</strong>
+                <p class="text-muted" style="margin:.25rem 0 0;font-size:.85rem;">
+                  The site theme, admin theme, automatic day/night pair and typography now live in
+                  Content &rsaquo; Theme, alongside per-element theme overrides.
+                </p>
+              </div>
+              <a href="#/theme" class="btn btn-ghost btn-sm">Open Theme</a>
             </div>
-            <div class="col-12 mt-2">
-                <p class="form-hint text-muted" style="font-size:.8rem;">Themes switch based on each visitor's local
-                    time. Any theme can be used - they need not be light/dark pairs.</p>
+          </div>
         </div>
       </div>
       <div class="row mt-3">
@@ -214,6 +133,17 @@
 
     <!-- Email / SMTP -->
     <div class="tab-panel">
+      <!-- Shown by settings.js when smtp.host is empty. Without a host the CMS
+           falls back to an Ethereal test inbox, which ACCEPTS the mail and
+           reports success - so nothing anywhere else looks wrong. -->
+      <div id="smtp-unconfigured-notice" class="card mb-3" style="display:none;">
+        <div class="card-body" style="color:var(--dm-warning,#f59e0b);display:flex;align-items:flex-start;gap:.6rem;">
+          <span data-icon="warning"></span>
+          <span><strong>No SMTP host configured.</strong> Mail is going to a throwaway test inbox and will
+            <strong>not</strong> reach anyone - password resets and form notifications will look like they
+            sent. Set a host below and save.</span>
+        </div>
+      </div>
       <div class="row mb-3">
         <div class="col-8">
           <label class="form-label">SMTP Host</label>
@@ -437,7 +367,7 @@
               </div>
 
               <div class="row mb-4" style="align-items:flex-end;gap:0;">
-                <div class="col-sm-4">
+                <div class="col-4">
                   <label class="form-label">Home label</label>
                   <input id="field-breadcrumbs-home-label" type="text" class="form-input" placeholder="Home">
                 </div>
@@ -479,7 +409,7 @@
                 </div>
 
                 <!-- Offsets -->
-                <div class="col-sm-3" style="margin-right:1rem;">
+                <div class="col-3" style="margin-right:1rem;">
                   <label class="form-label" for="field-bc-offset-x">Horizontal offset</label>
                   <div style="display:flex;align-items:center;gap:.4rem;">
                     <input id="field-bc-offset-x" type="number" class="form-input" min="0" max="500" placeholder="8"
@@ -490,7 +420,7 @@
                     right edge.</p>
                 </div>
 
-                <div class="col-sm-3">
+                <div class="col-3">
                   <label class="form-label" for="field-bc-offset-y">Vertical offset</label>
                   <div style="display:flex;align-items:center;gap:.4rem;">
                     <input id="field-bc-offset-y" type="number" class="form-input" min="0" max="500" placeholder="60"