domma-cms 0.75.0 → 0.77.0

package/admin/js/templates/dashboard.html

@@ -1,32 +1,194 @@
-<div class="view-header">
-    <h1><span data-icon="home"></span> Dashboard</h1>
-    <div class="view-header-actions">
-        <span class="dash-updated" id="dash-updated"></span>
-        <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
+<!-- The core Dashboard. Bound with M.applyBindings - see admin/views/dashboard.js, which also inserts the
+     row templates (the router renders a templateUrl through _.render, eating any {{…}}). No page heading:
+     the Tool banner above is the heading; Refresh and New page are banner actions. -->
+<div class="dbx">
+    <div class="dbx-top">
+        <small class="dbx-asof" data-bind-text="asOf.value"></small>
+        <span data-help-title="Dashboard" data-help="What the site is doing and what needs you, at a glance. Traffic comes from the site's own analytics (no cookies, no third party). The numbers refresh every 30 seconds while this screen is open; Refresh in the banner reloads everything."></span>
     </div>
-</div>
+    <p class="dbx-note is-warn" data-bind-hidden="!warning.value" data-bind-text="warning.value"></p>
 
-<div id="dash-warnings" class="dash-warnings" hidden></div>
+    <div class="dbx-kpis">
+        <div class="dbx-card dbx-kpi">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="trending-up" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value" data-bind-text="kpi.value.hits">—</strong>
+                <span class="dbx-kpi-label">Page views today
+                    <span data-help="Every page view recorded today (UTC), compared with the whole of yesterday."></span></span>
+                <small class="dbx-delta" data-bind-hidden="!kpi.value.hitsDelta" data-bind-text="kpi.value.hitsDelta" data-bind-class="kpi.value.hitsUp ? 'is-up' : 'is-down'"></small>
+            </div>
+        </div>
+        <div class="dbx-card dbx-kpi">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="users" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value" data-bind-text="kpi.value.active">—</strong>
+                <span class="dbx-kpi-label">On the site now
+                    <span data-help="Visitors seen in the last 5 minutes."></span></span>
+            </div>
+        </div>
+        <a class="dbx-card dbx-kpi is-link" href="#/pages">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="file-text" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value" data-bind-text="kpi.value.pages">—</strong>
+                <span class="dbx-kpi-label">Pages</span>
+                <small class="dbx-kpi-sub" data-bind-text="kpi.value.pagesSub"></small>
+            </div>
+        </a>
+        <a class="dbx-card dbx-kpi is-link" href="#/forms">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="inbox" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value" data-bind-text="kpi.value.submissions">—</strong>
+                <span class="dbx-kpi-label">Form submissions this week
+                    <span data-help="Submissions to the site's forms in the last 7 days, counted where each form's submissions are kept."></span></span>
+                <small class="dbx-kpi-sub" data-bind-text="kpi.value.submissionsSub"></small>
+            </div>
+        </a>
+        <div class="dbx-card dbx-kpi">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="activity" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value"><span class="dbx-chip" data-bind-class="'is-' + kpi.value.healthTone" data-bind-text="kpi.value.health">—</span></strong>
+                <span class="dbx-kpi-label">Site health
+                    <span data-help="The server's own checks - disk, storage, plugins, the database when one is used. Anything that is not OK is listed under Needs attention."></span></span>
+            </div>
+        </div>
+    </div>
 
-<div class="dashboard-grid">
-    <section id="dash-kpi-strip" class="dash-row dash-row-kpi"></section>
+    <div class="dbx-split">
+        <section class="dbx-card">
+            <div class="dbx-card-title">Needs attention
+                <span data-help-title="Needs attention" data-help="What the rest of the admin is flagging: the red and amber badges from the sidebar (a missing layout, an expired API token, a plugin that is not running, settings quietly wrong…), unread notifications, and any health check that is not OK. Click one to go there."></span>
+                <span class="dbx-count" data-bind-text="attention.value.length"></span></div>
+            <p class="dbx-note is-ok" data-bind-hidden="!loaded.value || attention.value.length">
+                <span data-icon="check-circle" data-icon-size="15"></span> Nothing needs you right now.</p>
+            <div class="dbx-list dbx-attention" data-each="attention.value key=id"></div>
+        </section>
+        <section class="dbx-card">
+            <div class="dbx-card-title">Recent activity
+                <span data-help="Pages edited or published, and new entries in the site's collections - newest first. Click one to open it."></span></div>
+            <p class="dbx-note" data-bind-hidden="!loaded.value || activity.value.length">Nothing yet.</p>
+            <div class="dbx-list dbx-activity" data-each="activity.value key=id"></div>
+        </section>
+    </div>
 
-    <section class="dash-row dash-row-traffic">
-        <div id="dash-traffic-chart" class="dash-card dash-card-wide"></div>
-        <div id="dash-spike-feed" class="dash-card"></div>
+    <section class="dbx-card">
+        <div class="dbx-card-title">Traffic - the last 30 days
+            <span data-help="Page views per day, across the whole site."></span></div>
+        <div class="dbx-chart" data-bind-hidden="!hasChart.value"><canvas class="dbx-canvas"></canvas></div>
+        <p class="dbx-note" data-bind-hidden="hasChart.value" data-bind-text="chartNote.value"></p>
     </section>
 
-    <section class="dash-row dash-row-content">
-        <div id="dash-top-pages" class="dash-card"></div>
-        <div id="dash-journeys" class="dash-card"></div>
-    </section>
+    <div class="dbx-split">
+        <section class="dbx-card">
+            <div class="dbx-card-title">Top pages - the last 7 days
+                <span data-help="The most-viewed addresses this week, with the change on the week before. Right-click (or ⋮) one to open it, copy its address or edit the page."></span></div>
+            <p class="dbx-note" data-bind-hidden="!loaded.value || topPages.value.length">No page views recorded yet.</p>
+            <div class="dbx-list dbx-top-pages" data-each="topPages.value key=id"></div>
+        </section>
+        <section class="dbx-card">
+            <div class="dbx-card-title">Spikes - the last hour
+                <span data-help="Addresses getting far more views than usual this hour - a link shared somewhere, or a bot. The number beside each is how many times its normal rate."></span></div>
+            <p class="dbx-note" data-bind-hidden="!loaded.value || spikes.value.length">Nothing unusual.</p>
+            <div class="dbx-list dbx-spikes" data-each="spikes.value key=id"></div>
+        </section>
+    </div>
 
-    <section class="dash-row dash-row-health">
-        <div id="dash-health-detail" class="dash-card"></div>
-        <div id="dash-activity-feed" class="dash-card"></div>
+    <section class="dbx-card">
+        <div class="dbx-card-title">Visits - the last 7 days
+            <span data-help-title="Visits" data-help="Where visits start and end, the commonest moves between pages, and the bounce rate - visits that viewed a single page."></span>
+            <span class="dbx-spacer"></span>
+            <small class="dbx-muted" data-bind-hidden="!bounce.value" data-bind-text="bounce.value"></small></div>
+        <p class="dbx-note" data-bind-hidden="!loaded.value || hasJourneys.value">No visits recorded yet.</p>
+        <div class="dbx-journeys" data-bind-hidden="!hasJourneys.value">
+            <div><h4>Arrived at</h4><div class="dbx-list dbx-entry" data-each="entry.value key=id"></div></div>
+            <div><h4>Left from</h4><div class="dbx-list dbx-exit" data-each="exit.value key=id"></div></div>
+            <div><h4>Moved between</h4><div class="dbx-list dbx-paths" data-each="paths.value key=id"></div></div>
+        </div>
     </section>
 
-    <section class="dash-row">
-        <div id="dash-cache" class="dash-card dash-card-wide"></div>
-    </section>
+    <div class="dbx-split">
+        <section class="dbx-card">
+            <div class="dbx-card-title">Health checks
+                <span data-help="Each check the server runs on itself, with what it found."></span></div>
+            <p class="dbx-note" data-bind-hidden="!loaded.value || checks.value.length">No checks reported.</p>
+            <div class="dbx-list dbx-checks" data-each="checks.value key=id"></div>
+        </section>
+        <section class="dbx-card" data-bind-hidden="!cache.value">
+            <div class="dbx-card-title">Response cache
+                <span data-help-title="Response cache" data-help="Pages are kept ready-rendered so repeat visits are fast; editing anything clears what it affects. Hit rate is how often a visit was served from it. Turning it off makes every visit render afresh."></span>
+                <span class="dbx-spacer"></span>
+                <label class="dbx-switch" title="Turn the cache on or off">
+                    <input type="checkbox" class="form-switch" data-bind-checked="cacheOn.value" data-on-change="toggleCache">
+                    <span data-bind-text="cacheOn.value ? 'On' : 'Off'"></span>
+                </label></div>
+            <div class="dbx-stats">
+                <div><small>Hit rate</small><strong data-bind-text="cacheView.value.hitRate"></strong><small data-bind-text="cacheView.value.hitsMisses"></small></div>
+                <div><small>Entries</small><strong data-bind-text="cacheView.value.size"></strong><small data-bind-text="cacheView.value.driver"></small></div>
+                <div><small>Writes</small><strong data-bind-text="cacheView.value.writes"></strong><small data-bind-text="cacheView.value.invalidations"></small></div>
+                <div><small>Last cleared</small><strong data-bind-text="cacheView.value.cleared"></strong></div>
+            </div>
+            <div class="dbx-actions">
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="clearCache"><span data-icon="trash" data-icon-size="13"></span> Clear the cache</button>
+            </div>
+        </section>
+    </div>
 </div>
+
+<style>
+.dbx { display: flex; flex-direction: column; gap: 1rem; }
+.dbx [hidden] { display: none !important; }
+.dbx-top { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
+.dbx-asof, .dbx-muted { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.dbx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); display: flex; align-items: center; gap: .35rem; }
+.dbx-note.is-warn { padding: .55rem .8rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); }
+.dbx-note.is-ok { color: var(--dm-success); }
+.dbx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .95rem; display: flex; flex-direction: column; gap: .6rem;
+    background: var(--dm-surface); min-width: 0; }
+.dbx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.dbx-card h4 { margin: 0 0 .35rem; font-size: var(--dm-text-sm); color: var(--dm-text-muted); font-weight: 600; }
+.dbx-count { font-size: var(--dm-text-xs); color: var(--dm-text-muted); font-weight: 500; }
+.dbx-spacer { flex: 1; }
+.dbx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
+.dbx-kpi { flex-direction: row; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
+.dbx-kpi.is-link:hover, .dbx-kpi.is-link:focus-visible { border-color: var(--dm-primary); outline: none; }
+.dbx-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.dbx-kpi-body { display: flex; flex-direction: column; min-width: 0; }
+.dbx-kpi-value { font-size: var(--dm-text-2xl, 1.5rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
+.dbx-kpi-label { display: flex; align-items: center; gap: .3rem; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.dbx-kpi-sub { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.dbx-delta { font-size: var(--dm-text-xs); font-weight: 600; }
+.dbx-delta.is-up { color: var(--dm-success); }
+.dbx-delta.is-down { color: var(--dm-danger); }
+.dbx-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
+.dbx-list { display: flex; flex-direction: column; }
+.dbx-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .3rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; min-width: 0; }
+.dbx-row:last-child { border-bottom: 0; }
+.dbx-row:hover, .dbx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.dbx-row.is-static { cursor: default; }
+.dbx-row.is-static:hover { background: none; }
+.dbx-row.is-danger { box-shadow: inset 3px 0 0 var(--dm-danger); }
+.dbx-row.is-warn { box-shadow: inset 3px 0 0 var(--dm-warning); }
+.dbx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.dbx-main strong, .dbx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dbx-main strong { font-weight: 500; }
+.dbx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.dbx-value { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }
+.dbx-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); }
+.dbx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.dbx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.dbx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.dbx-kpi-value .dbx-chip { font-size: var(--dm-text-sm); padding: .15rem .6rem; }
+.dbx-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; flex-shrink: 0; }
+.dbx-kebab:hover { color: var(--dm-primary); }
+.dbx-chart { height: 240px; position: relative; }
+.dbx-journeys { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
+.dbx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .8rem; }
+.dbx-stats > div { display: flex; flex-direction: column; }
+.dbx-stats small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.dbx-stats strong { font-size: var(--dm-text-lg); font-variant-numeric: tabular-nums; }
+.dbx-switch { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; font-size: var(--dm-text-sm); cursor: pointer; }
+.dbx-actions { display: flex; justify-content: flex-end; }
+.dbx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 640px) { .dbx-split { grid-template-columns: 1fr; } }
+</style>

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>