domma-cms 0.75.0 → 0.76.0

package/admin/js/templates/effects.html

@@ -1,81 +1,104 @@
-<div class="view-header">
-    <h1><span data-icon="sparkles"></span> Domma Effects</h1>
-    <div>
-        <button id="save-settings-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save
-        </button>
+<!-- System › Effects. Bound with M.applyBindings - see admin/js/views/effects.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 Save is a banner action. -->
+<div class="fxx">
+    <div class="fxx-card fxx-live">
+        <div class="fxx-card-title">Live now
+            <span data-help-title="Live now" data-help="What the published site uses at the moment - the saved settings, not what is typed below until you Save. Every [reveal] and row reveal without its own duration, animation or threshold uses these."></span></div>
+        <div class="fxx-chips">
+            <span class="fxx-chip" data-bind-class="saved.value.respectMotion ? 'is-ok' : 'is-warn'" data-bind-text="motionText.value"></span>
+            <span class="fxx-chip" data-bind-text="'Reveal: ' + saved.value.defaultAnimation"></span>
+            <span class="fxx-chip" data-bind-text="saved.value.defaultDuration + ' ms'"></span>
+            <span class="fxx-chip" data-bind-text="'Threshold ' + saved.value.defaultThreshold"></span>
+            <span class="fxx-chip is-muted" data-bind-hidden="!defaultsText.value" data-bind-text="defaultsText.value"></span>
+        </div>
     </div>
-</div>
 
-<!-- Top-level tabs -->
-<div id="effects-tabs" class="tabs">
-    <div class="tab-list">
-        <button class="tab-item active">Settings</button>
-        <button class="tab-item">Shortcode Reference</button>
-    </div>
-    <div class="tab-content">
+    <p class="fxx-unsaved" data-bind-hidden="!dirty.value">
+        <span data-icon="alert-circle" data-icon-size="15"></span> Unsaved changes
+        <span class="fxx-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">Save</button>
+    </p>
+
+    <div class="tabs fxx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Settings <span class="fxx-dot" data-bind-hidden="!dirty.value" title="Unsaved changes">•</span></button>
+            <button type="button" class="tab-item">Effects <span class="fxx-count" data-bind-text="effectCount"></span></button>
+            <button type="button" class="tab-item">Guide</button>
+        </div>
 
-        <!-- Settings tab panel -->
+        <!-- Settings -->
         <div class="tab-panel active">
-            <div class="card mb-4">
-                <div class="card-body">
-                    <div class="row mb-3">
-                        <div class="col">
-                            <label class="form-check-label">
-                                <input id="field-respect-motion" type="checkbox">
-                                Respect <code>prefers-reduced-motion</code>
-                            </label>
-                            <span class="form-hint">When enabled, JS effects are skipped for users who prefer reduced motion. Content remains visible.</span>
-                        </div>
+            <div class="fxx-card">
+                <div class="fxx-card-title">Scroll reveal defaults
+                    <span data-help-title="Defaults" data-help="Used by [reveal] and [row reveal] when the shortcode does not set its own. A shortcode's own attribute always wins. Ctrl+S saves."></span></div>
+                <div class="fxx-grid">
+                    <div class="fxx-wide fxx-setting">
+                        <label class="form-label" for="fx-motion">Respect reduced motion
+                            <span data-help-title="prefers-reduced-motion" data-help="Visitors can ask their device for less motion. With this on, the JavaScript effects are skipped for them and the content simply shows - nothing is hidden. Turn it off only if an effect carries meaning that would otherwise be lost."></span></label>
+                        <input id="fx-motion" type="checkbox" class="form-switch" data-model="respectMotion.value">
                     </div>
-                    <div class="row mb-3">
-                        <div class="col-6">
-                            <label class="form-label">Default animation duration (ms)</label>
-                            <input id="field-default-duration" type="number" class="form-input" min="0" max="10000"
-                                   placeholder="600">
-                            <span class="form-hint">Used by reveal when no <code>duration</code> attribute is specified.</span>
-                        </div>
-                        <div class="col-6">
-                            <label class="form-label">Default reveal animation</label>
-                            <select id="field-default-animation" class="form-select">
-                                <option value="fade">Fade</option>
-                                <option value="slide-up">Slide up</option>
-                                <option value="slide-down">Slide down</option>
-                                <option value="zoom">Zoom</option>
-                                <option value="flip">Flip</option>
-                            </select>
-                        </div>
+                    <div>
+                        <label class="form-label" for="fx-anim">Reveal animation</label>
+                        <select id="fx-anim" class="form-input" data-model="defaultAnimation.value">
+                            <option value="fade">Fade</option>
+                            <option value="slide-up">Slide up</option>
+                            <option value="slide-down">Slide down</option>
+                            <option value="zoom">Zoom</option>
+                            <option value="flip">Flip</option>
+                        </select>
+                        <small class="fxx-err" data-bind-hidden="!animErr.value" data-bind-text="animErr.value"></small>
                     </div>
-                    <div class="row">
-                        <div class="col-6">
-                            <label class="form-label">Default scroll threshold</label>
-                            <input id="field-default-threshold" type="number" class="form-input" min="0" max="1"
-                                   step="0.05"
-                                   placeholder="0.1">
-                            <span class="form-hint">Fraction of element visible before reveal fires (0.0-1.0).</span>
-                        </div>
+                    <div>
+                        <label class="form-label" for="fx-duration">Duration (ms)
+                            <span data-help="How long a reveal takes. 600 ms is a comfortable default; above about 1000 it starts to feel slow."></span></label>
+                        <input id="fx-duration" type="number" class="form-input" min="1" max="10000" step="50" placeholder="600" data-model="defaultDuration.value">
+                        <small class="fxx-err" data-bind-hidden="!durErr.value" data-bind-text="durErr.value"></small>
                     </div>
+                    <div>
+                        <label class="form-label" for="fx-threshold">Threshold
+                            <span data-help-title="Threshold" data-help="How much of an element must be on screen before it reveals: 0 = as soon as any of it shows, 1 = only once all of it shows. 0.1 suits most pages; tall blocks need a low value or they may never reveal on a small screen."></span></label>
+                        <input id="fx-threshold" type="number" class="form-input" min="0" max="1" step="0.05" placeholder="0.1" data-model="defaultThreshold.value">
+                        <small class="fxx-err" data-bind-hidden="!thrErr.value" data-bind-text="thrErr.value"></small>
+                    </div>
+                </div>
+                <div class="fxx-actions">
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="resetDefaults" title="Put back Domma's defaults (then Save)">Domma's defaults</button>
+                    <span class="fxx-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannotSave.value">
+                        <span data-icon="save" data-icon-size="14"></span> Save</button>
                 </div>
             </div>
         </div>
 
-        <!-- Shortcode Reference tab panel -->
+        <!-- Effects: the catalogue the page editor inserts from -->
         <div class="tab-panel">
-        <p class="text-muted mb-3">Use these shortcodes in any page's Markdown content. The <strong>Effects</strong>
-            toolbar button in the editor inserts them automatically.</p>
-
-            <!-- Sub-tabs -->
-        <div class="mb-3" style="display:flex;gap:6px;flex-wrap:wrap;">
-            <button class="btn btn-sm effects-tab-btn active" data-fx-tab="entrance">Entrance</button>
-            <button class="btn btn-sm effects-tab-btn" data-fx-tab="animation">Animation</button>
-            <button class="btn btn-sm effects-tab-btn" data-fx-tab="text">Text</button>
-            <button class="btn btn-sm effects-tab-btn" data-fx-tab="visual">Visual</button>
-            <button class="btn btn-sm effects-tab-btn" data-fx-tab="examples">Examples</button>
-            <button class="btn btn-sm effects-tab-btn" data-fx-tab="celebrations">Celebrations</button>
+            <div class="fxx-card">
+                <div class="fxx-bar">
+                    <div class="fxx-seg fxx-cats" role="group" aria-label="Category" data-each="cats.value key=key"></div>
+                    <input type="search" class="form-input fxx-search" placeholder="Search effects or settings…" aria-label="Search effects" data-model="query.value">
+                    <span data-help-title="Effects" data-help="Every effect the page editor's Effects button can insert. Click one for its settings and an example; right-click it (or ⋮, or Shift+F10) to copy its shortcode. An effect that works inside [card], [hero] and friends can also be switched on as an attribute of that shortcode."></span>
+                </div>
+                <p class="fxx-note" data-bind-hidden="rows.value.length">No effects match.</p>
+                <div class="fxx-list" data-each="rows.value key=name"></div>
+            </div>
         </div>
 
-        <!-- Entrance tab -->
-        <div id="tab-entrance" class="effects-tab-panel">
+        <!-- Guide: the long-form reference -->
+        <div class="tab-panel">
+            <div class="fxx-card">
+            <p class="fxx-note">Use these shortcodes in any page's Markdown. The <strong>Effects</strong> toolbar button in
+                the editor inserts them for you.</p>
+            <div class="fxx-seg fxx-guide-tabs" role="group" aria-label="Guide section">
+                <button type="button" data-on-click="showGuide('entrance')" data-bind-class="guide.value === 'entrance' && 'is-on'">Entrance</button>
+                <button type="button" data-on-click="showGuide('animation')" data-bind-class="guide.value === 'animation' && 'is-on'">Animation</button>
+                <button type="button" data-on-click="showGuide('text')" data-bind-class="guide.value === 'text' && 'is-on'">Text</button>
+                <button type="button" data-on-click="showGuide('visual')" data-bind-class="guide.value === 'visual' && 'is-on'">Visual</button>
+                <button type="button" data-on-click="showGuide('examples')" data-bind-class="guide.value === 'examples' && 'is-on'">Examples</button>
+                <button type="button" data-on-click="showGuide('celebrations')" data-bind-class="guide.value === 'celebrations' && 'is-on'">Celebrations</button>
+            </div>
+        <div id="tab-entrance" class="fxx-guide-panel" data-bind-hidden="guide.value !== 'entrance'">
             <h3 class="mb-2">Reveal</h3>
             <p class="text-muted mb-2">Triggers a scroll-activated entrance animation when the element enters the
                 viewport.
@@ -198,7 +221,7 @@ Markdown **works** inside.
         </div>
 
         <!-- Animation tab -->
-        <div id="tab-animation" class="effects-tab-panel">
+        <div id="tab-animation" class="fxx-guide-panel" data-bind-hidden="guide.value !== 'animation'">
             <h3 class="mb-2">Breathe</h3>
             <p class="text-muted mb-2">Continuous gentle scaling - makes elements feel alive. Ideal for hero images or
                 call-to-action buttons.</p>
@@ -256,7 +279,7 @@ Content here.
         </div>
 
         <!-- Text tab -->
-        <div id="tab-text" class="effects-tab-panel">
+        <div id="tab-text" class="fxx-guide-panel" data-bind-hidden="guide.value !== 'text'">
             <h3 class="mb-2">Typewriter (Scribe)</h3>
             <p class="text-muted mb-2">Types text character by character. Supports a simple one-shot mode or a full
                 action script for sequenced multi-step animations.</p>
@@ -418,7 +441,7 @@ Scrambled reveal text.
         </div>
 
         <!-- Visual tab -->
-        <div id="tab-visual" class="effects-tab-panel">
+        <div id="tab-visual" class="fxx-guide-panel" data-bind-hidden="guide.value !== 'visual'">
             <h3 class="mb-2">Ripple</h3>
             <p class="text-muted mb-2">Click-triggered ripple effect on the element. Good for interactive content
                 blocks.</p>
@@ -466,7 +489,7 @@ Content on animated background.
         </div>
 
         <!-- Examples tab -->
-        <div id="tab-examples" class="effects-tab-panel">
+        <div id="tab-examples" class="fxx-guide-panel" data-bind-hidden="guide.value !== 'examples'">
             <h3 class="mb-2">Hero section with typewriter</h3>
             <pre class="code-block mb-3">[reveal animation="fade"]
 # Welcome to our site
@@ -530,7 +553,7 @@ A compelling subheading that draws users in.
         </div>
 
         <!-- Celebrations tab -->
-        <div id="tab-celebrations" class="effects-tab-panel">
+        <div id="tab-celebrations" class="fxx-guide-panel" data-bind-hidden="guide.value !== 'celebrations'">
             <h3 class="mb-2">Firework <span class="badge badge-info">CSS only</span></h3>
             <p class="text-muted mb-2">Pure CSS particle effect - no JavaScript required. Works even without the plugin
                 enabled. Use self-closing for standalone particles, or wrapping to apply the firework classes to
@@ -747,6 +770,66 @@ The strips rain down inside this block only.
                 full-page overlay (<code>position:fixed</code>); the wrapping form attaches the canvas to the
                 wrapping div so the parade is constrained to that block.</p>
         </div>
-        </div><!-- /tab-panel shortcodes -->
-    </div><!-- /tab-content -->
-</div><!-- /effects-tabs -->
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.fxx { display: flex; flex-direction: column; gap: .75rem; }
+.fxx [hidden], .fxx-form [hidden] { display: none !important; }
+.fxx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .7rem; margin-top: .75rem; }
+.fxx-live { margin-top: 0; }
+.fxx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.fxx-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
+.fxx-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); }
+.fxx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.fxx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.fxx-chip.is-info { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }
+.fxx-chip.is-muted { background: none; font-weight: 400; }
+.fxx-unsaved { margin: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.fxx-dot { color: var(--dm-warning); margin-left: .2rem; }
+.fxx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.fxx-spacer { flex: 1; }
+.fxx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
+.fxx-wide { grid-column: 1 / -1; }
+.fxx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.fxx-setting .form-label { margin: 0; }
+.fxx .form-label { display: flex; align-items: center; gap: .3rem; }
+.fxx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.fxx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.fxx-actions .btn, .fxx-unsaved .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.fxx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fxx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.fxx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.fxx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.fxx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .65rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.fxx-seg button + button { border-left: 1px solid var(--dm-border); }
+.fxx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.fxx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.fxx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.fxx-list { display: flex; flex-direction: column; }
+.fxx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.fxx-row:last-child { border-bottom: 0; }
+.fxx-row:hover, .fxx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.fxx-tag { flex-shrink: 0; min-width: 7.5rem; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); color: var(--dm-primary); }
+.fxx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.fxx-main strong, .fxx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fxx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.fxx-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; }
+.fxx-kebab:hover { color: var(--dm-primary); }
+.fxx-guide-tabs { align-self: flex-start; }
+/* The details slideover */
+.fxx-form { display: flex; flex-direction: column; gap: .85rem; }
+.fxx-form pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm);
+    padding: .6rem .75rem; border-radius: var(--dm-radius-md); border: 1px solid var(--dm-border); background: var(--dm-surface-raised, color-mix(in srgb, var(--dm-text) 5%, transparent)); color: var(--dm-text); }
+.fxx-sub { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
+.fxx-attrs { width: 100%; border-collapse: collapse; font-size: var(--dm-text-sm); }
+.fxx-attrs th, .fxx-attrs td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--dm-border); vertical-align: top; }
+.fxx-attrs th { color: var(--dm-text-muted); font-weight: 500; font-size: var(--dm-text-xs); }
+.fxx-attrs code { color: var(--dm-primary); }
+.fxx-attrs small { display: block; color: var(--dm-text-muted); }
+@media (max-width: 720px) { .fxx-grid { grid-template-columns: 1fr; } .fxx-tag { min-width: 0; } }
+</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/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>