domma-cms 0.74.0 → 0.76.0

package/admin/js/templates/components.html

@@ -1,18 +1,85 @@
-<div class="view-header">
-    <h1><span data-icon="component"></span> Components</h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <button id="import-component-btn" class="btn btn-ghost"
-                title="Import a .dmcomponent.json bundle">
-            <span data-icon="upload"></span> Import
-        </button>
-        <a href="#/components/new" class="btn btn-primary">
-            <span data-icon="plus"></span> New Component
-        </a>
+<!-- Components. Bound with M.applyBindings - see admin/views/components.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; New component and Import are banner actions. -->
+<div class="cpx">
+    <p class="cpx-note">Your own custom elements - markup, style and behaviour in one <code>.dmc</code> file - placed on any
+        page as a tag.
+        <span data-help-title="Components" data-help="A component named counter is placed on a page as <dm-counter></dm-counter>, with its props as attributes. Yours can be edited, duplicated, exported and deleted. Built-in ones came with the CMS and are yours to change. Plugin ones are read-only - they belong to the plugin that provides them."></span></p>
+
+    <p class="cpx-filter-note" data-bind-hidden="!projectNote.value">
+        <span data-bind-text="projectNote.value"></span>
+        <a href="#/components">Show all components</a></p>
+
+    <div class="cpx-card">
+        <div class="cpx-bar">
+            <div class="cpx-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="showMine" data-bind-class="filter.value === 'mine' && 'is-on'">Yours <b data-bind-text="counts.value.mine"></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="showPlugin" data-bind-class="filter.value === 'plugin' && 'is-on'" data-bind-hidden="!counts.value.plugin">Plugins <b data-bind-text="counts.value.plugin"></b></button>
+            </div>
+            <input type="search" class="form-input cpx-search" placeholder="Search by name or prop…" aria-label="Search components" data-model="query.value">
+            <select class="form-input cpx-sort" aria-label="Sort" data-model="sort.value">
+                <option value="name">Name</option>
+                <option value="updated">Recently changed</option>
+            </select>
+            <span data-help-title="The list" data-help="Click a component to edit it. Right-click it (or ⋮, or Shift+F10) to copy its tag, duplicate it, export it as a .dmcomponent.json file, or delete it. Import (in the banner) brings a .dmcomponent.json back - from a backup or another site."></span>
+        </div>
+        <p class="cpx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="cpx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="cpx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="cpx-list" data-each="rows.value key=name"></div>
     </div>
-</div>
 
-<!-- Hidden file picker driven by the Import button -->
-<input id="import-component-file" type="file" accept=".dmcomponent.json,application/json"
-       style="display:none;">
+    <!-- The file picker behind the banner's Import action -->
+    <input class="cpx-import-file" type="file" accept=".dmcomponent.json,application/json" hidden>
+</div>
 
-<div id="components-table-container"></div>
+<style>
+.cpx { display: flex; flex-direction: column; gap: .75rem; }
+.cpx [hidden], .cpx-form [hidden] { display: none !important; }
+.cpx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.cpx-note.is-bad { color: var(--dm-danger); }
+.cpx-note code, .cpx-main code { font-size: .92em; }
+.cpx-filter-note { margin: 0; padding: .5rem .75rem; border-radius: var(--dm-radius-md); font-size: var(--dm-text-sm);
+    background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 12%, transparent); color: var(--dm-text); }
+.cpx-filter-note a { margin-left: .35rem; }
+.cpx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.cpx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.cpx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.cpx-sort { width: auto; flex: 0 0 auto; }
+.cpx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.cpx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.cpx-seg button + button { border-left: 1px solid var(--dm-border); }
+.cpx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.cpx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.cpx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.cpx-list { display: flex; flex-direction: column; }
+.cpx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.cpx-row:last-child { border-bottom: 0; }
+.cpx-row:hover, .cpx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.cpx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.cpx-row.is-plugin .cpx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.cpx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.cpx-main strong, .cpx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cpx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.cpx-tag { color: var(--dm-text-muted); font-weight: 400; margin-left: .4rem; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs); }
+.cpx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.cpx-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); }
+.cpx-chip.is-builtin { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.cpx-chip.is-plugin { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.cpx-chip.is-project { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }
+.cpx-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; }
+.cpx-kebab:hover { color: var(--dm-primary); }
+/* The Duplicate slideover */
+.cpx-form { display: flex; flex-direction: column; gap: .85rem; }
+.cpx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.cpx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.cpx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.cpx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.cpx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.cpx-spacer { flex: 1; }
+@media (max-width: 640px) { .cpx-chips { display: none; } .cpx-tag { display: none; } }
+</style>

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

@@ -1,16 +1,58 @@
-<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>
+<!-- Context Menus. Bound with M.applyBindings - see admin/views/context-menus.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 context menu is a banner action. -->
+<div class="cmx">
+    <p class="cmx-note">Right-click menus bound to a region of a page. Unlike navigation menus these have no slot -
+        they bind to a CSS selector, and the menu nearest the click answers.
+        <span data-help-title="Context menus" data-help="Each menu binds to a region (a CSS selector) and, optionally, to the rows inside it that answer. When someone right-clicks, the menu bound nearest the click wins - so a menu on a card beats one on the whole page. A menu with no binding applies on every page; a binding narrows it to some projects or pages. One that binds to nothing never appears, and is marked so."></span></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="context-menus-table"></div>
+    <div class="cmx-card">
+        <div class="cmx-bar">
+            <div class="cmx-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="showOn" data-bind-class="filter.value === 'on' && 'is-on'">On <b data-bind-text="counts.value.on"></b></button>
+                <button type="button" data-on-click="showOff" data-bind-class="filter.value === 'off' && 'is-on'">Off <b data-bind-text="counts.value.off"></b></button>
+            </div>
+            <input type="search" class="form-input cmx-search" placeholder="Search menus…" aria-label="Search context menus" data-model="query.value">
+            <span data-help-title="The list" data-help="Click a menu to edit it. Right-click it (or ⋮, or Shift+F10) to switch it on or off, duplicate it, copy its slug or delete it. The chip says where it applies: Site-wide, a number of binding rules (hover for them), or Never matches."></span>
+        </div>
+        <p class="cmx-note" data-bind-hidden="!projectNote.value" data-bind-text="projectNote.value"></p>
+        <p class="cmx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="cmx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="cmx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="cmx-list" data-each="rows.value key=slug"></div>
     </div>
 </div>
+
+<style>
+.cmx { display: flex; flex-direction: column; gap: .75rem; }
+.cmx [hidden] { display: none !important; }
+.cmx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.cmx-note.is-bad { color: var(--dm-danger); }
+.cmx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.cmx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.cmx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.cmx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.cmx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.cmx-seg button + button { border-left: 1px solid var(--dm-border); }
+.cmx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.cmx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.cmx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.cmx-list { display: flex; flex-direction: column; }
+.cmx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.cmx-row:last-child { border-bottom: 0; }
+.cmx-row:hover, .cmx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.cmx-row.is-off .cmx-main strong { color: var(--dm-text-muted); }
+.cmx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.cmx-main strong, .cmx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); font-family: var(--dm-font-mono, monospace); }
+.cmx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.cmx-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); }
+.cmx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.cmx-chip.is-info { background: color-mix(in srgb, var(--dm-info) 16%, transparent); color: var(--dm-info); }
+.cmx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.cmx-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; }
+.cmx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 640px) { .cmx-main small { white-space: normal; } }
+</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>

package/admin/js/templates/forms.html

@@ -1,17 +1,70 @@
-<div class="view-header">
-    <h1><span data-icon="layout"></span> Forms</h1>
-    <div style="display:flex;gap:.5rem;">
-        <button id="test-email-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="mail"></span> Test Email
-        </button>
-        <button id="create-form-btn" class="btn btn-primary">
-            <span data-icon="plus"></span> Create Form
-        </button>
-    </div>
-</div>
+<!-- Forms. Bound with M.applyBindings - see admin/views/forms.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; New form and Test email are banner actions. -->
+<div class="fmx">
+    <p class="fmx-note">Forms collect answers on the site - contact, sign-up, feedback - and store, email or pass on what
+        is sent.
+        <span data-help-title="Forms" data-help="Build a form, then put it on any page with its shortcode (⋮ → Copy shortcode). Each submission is saved to the form's collection, and can also be emailed, sent to a webhook or run an Action - set in the form's Actions. Click a form to edit it; its submissions are one right-click away."></span></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="forms-table"></div>
+    <div class="fmx-card">
+        <div class="fmx-bar">
+            <div class="fmx-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="showRecent" data-bind-class="filter.value === 'recent' && 'is-on'">New this week <b data-bind-text="counts.value.recent"></b></button>
+                <button type="button" data-on-click="showEmpty" data-bind-class="filter.value === 'empty' && 'is-on'">No submissions <b data-bind-text="counts.value.empty"></b></button>
+            </div>
+            <input type="search" class="form-input fmx-search" placeholder="Search forms…" aria-label="Search forms" data-model="query.value">
+            <span data-help-title="The list" data-help="Forms with the newest submissions come first. New this week counts submissions in the last 7 days - the same number as the badge on Forms in the sidebar. Right-click a form (or ⋮, or Shift+F10) to see its submissions, copy its shortcode, duplicate it or delete it."></span>
+            <span class="fmx-spacer"></span>
+            <small class="fmx-muted" data-bind-text="summary.value"></small>
+        </div>
+        <p class="fmx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="fmx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="fmx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="fmx-list" data-each="rows.value key=slug"></div>
     </div>
 </div>
+
+<style>
+.fmx { display: flex; flex-direction: column; gap: .75rem; }
+.fmx [hidden], .fmx-form [hidden] { display: none !important; }
+.fmx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fmx-note.is-bad { color: var(--dm-danger); }
+.fmx-muted { color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fmx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.fmx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.fmx-spacer { flex: 1; }
+.fmx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.fmx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.fmx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.fmx-seg button + button { border-left: 1px solid var(--dm-border); }
+.fmx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.fmx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.fmx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.fmx-list { display: flex; flex-direction: column; }
+.fmx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.fmx-row:last-child { border-bottom: 0; }
+.fmx-row:hover, .fmx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.fmx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.fmx-row.is-recent .fmx-icon { color: var(--dm-success); background: color-mix(in srgb, var(--dm-success) 14%, transparent); }
+.fmx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.fmx-main strong, .fmx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fmx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.fmx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.fmx-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); }
+.fmx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.fmx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.fmx-count { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fmx-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; }
+.fmx-kebab:hover { color: var(--dm-primary); }
+/* Slideover forms */
+.fmx-form { display: flex; flex-direction: column; gap: .85rem; }
+.fmx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.fmx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.fmx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.fmx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.fmx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 640px) { .fmx-count { display: none; } .fmx-chips { display: none; } }
+</style>