domma-cms 0.74.0 → 0.75.0

package/admin/js/templates/blocks.html

@@ -1,18 +1,79 @@
-<div class="view-header">
-    <h1><span data-icon="box"></span> Blocks</h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <button id="import-block-btn" class="btn btn-ghost"
-                title="Import a .dmblock.json bundle">
-            <span data-icon="upload"></span> Import
-        </button>
-        <a href="#/blocks/new" class="btn btn-primary">
-            <span data-icon="plus"></span> New Block
-        </a>
+<!-- Blocks. Bound with M.applyBindings - see admin/views/blocks.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 block and Import are banner actions. -->
+<div class="blx">
+    <p class="blx-note">Reusable HTML templates - one look for a collection's entries, a card, a call to action - placed on a
+        page with a shortcode.
+        <span data-help-title="Blocks" data-help="A block is an HTML template with a placeholder for each field (the field name in double curly braces), and optionally its own CSS. Use it to show collection entries ([collection … display=&quot;block&quot; block=&quot;name&quot;]), on its own ([block template=&quot;name&quot; …]), or by its name as a short tag ([name … /]). Each block's comment at the top says what it expects; right-click a block to copy its shortcode."></span></p>
+
+    <!-- Hidden file picker driven by the Import banner action -->
+    <input class="blx-import-file" type="file" accept=".dmblock.json,application/json" hidden>
+
+    <div class="blx-card">
+        <div class="blx-bar">
+            <div class="blx-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="showUsed" data-bind-class="filter.value === 'used' && 'is-on'">In use <b data-bind-text="counts.value.used"></b></button>
+                <button type="button" data-on-click="showUnused" data-bind-class="filter.value === 'unused' && 'is-on'">Unused <b data-bind-text="counts.value.unused"></b></button>
+            </div>
+            <input type="search" class="form-input blx-search" placeholder="Search blocks…" aria-label="Search blocks" data-model="query.value">
+            <span data-help-title="The list" data-help="Click a block to edit it. Right-click it (or ⋮, or Shift+F10) to copy its shortcode, see where it is used, duplicate, export or delete it. In use counts pages and views that place it; a block a plugin uses from its own code does not count, so check before deleting one marked unused."></span>
+        </div>
+        <p class="blx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="blx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="blx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="blx-list" data-each="rows.value key=name"></div>
     </div>
 </div>
 
-<!-- Hidden file picker driven by the Import button -->
-<input id="import-block-file" type="file" accept=".dmblock.json,application/json"
-       style="display:none;">
-
-<div id="blocks-table-container"></div>
+<style>
+.blx { display: flex; flex-direction: column; gap: .75rem; }
+.blx [hidden], .blx-form [hidden] { display: none !important; }
+.blx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.blx-note.is-bad { color: var(--dm-danger); }
+.blx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.blx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.blx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.blx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.blx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.blx-seg button + button { border-left: 1px solid var(--dm-border); }
+.blx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.blx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.blx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.blx-list { display: flex; flex-direction: column; }
+.blx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.blx-row:last-child { border-bottom: 0; }
+.blx-row:hover, .blx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.blx-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); }
+.blx-row.is-unused .blx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.blx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.blx-main strong, .blx-main small, .blx-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.blx-main span { color: var(--dm-text); font-size: var(--dm-text-sm); }
+.blx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.blx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.blx-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); }
+.blx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.blx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.blx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.blx-uses { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.blx-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; }
+.blx-kebab:hover { color: var(--dm-primary); }
+/* Slideovers */
+.blx-form { display: flex; flex-direction: column; gap: .85rem; }
+.blx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.blx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.blx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.blx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.blx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.blx-spacer { flex: 1; }
+.blx-where { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
+.blx-where li { padding: .4rem .2rem; border-bottom: 1px solid var(--dm-border); }
+.blx-where li:last-child { border-bottom: 0; }
+.blx-where a { color: var(--dm-primary); text-decoration: none; }
+.blx-where small { color: var(--dm-text-muted); margin-left: .4rem; }
+.blx-code { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs); background: var(--dm-surface-raised, color-mix(in srgb, var(--dm-text) 6%, transparent));
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); padding: .4rem .5rem; word-break: break-all; }
+@media (max-width: 640px) { .blx-uses, .blx-chips { display: none; } }
+</style>

package/admin/js/templates/collections.html

@@ -1,59 +1,115 @@
-<div class="view-header">
-    <h1><span data-icon="database"></span> Collections</h1>
-  <div id="collections-header-actions">
-    <button id="create-collection-btn" class="btn btn-primary">
-      <span data-icon="plus"></span> New Collection
-    </button>
-  </div>
-</div>
-
-<div class="tabs" id="collections-tabs">
-  <div class="tab-list">
-    <button class="tab-item active">Collections</button>
-    <button class="tab-item">Options</button>
-  </div>
-  <div class="tab-content">
+<!-- Collections. Bound with M.applyBindings - see admin/js/views/collections.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, and New collection is a banner action. -->
+<div class="clx">
+    <p class="clx-note clx-scope" data-bind-hidden="!project.value">
+        <span data-bind-text="scopeText.value"></span>
+        <a href="#/collections">Show all collections</a>
+    </p>
 
-    <!-- Collections tab -->
-    <div class="tab-panel active">
-      <div class="card">
-        <div class="card-body">
-          <div id="collections-table"></div>
+    <div class="tabs clx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Collections <span class="clx-count" data-bind-text="kinds.value.all"></span></button>
+            <button type="button" class="tab-item" data-bind-hidden="!canConnect.value">Database connections <span class="clx-dirty" data-bind-hidden="!connDirty.value" title="Changes not saved yet">●</span></button>
         </div>
-      </div>
-    </div>
 
-    <!-- Options tab -->
-    <div class="tab-panel">
-      <div class="card">
-        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-          <h2>Database Connections</h2>
-          <div style="display:flex;align-items:center;gap:.75rem;">
-            <label style="display:flex;align-items:center;gap:.4rem;font-size:.875rem;cursor:pointer;">
-              <input type="checkbox" id="connections-raw-toggle"> Raw JSON
-            </label>
-            <button id="add-connection-btn" class="btn btn-ghost btn-sm" type="button">
-              <span data-icon="plus"></span> Add Connection
-            </button>
-            <button id="save-connections-btn" class="btn btn-primary btn-sm" type="button">
-              <span data-icon="save"></span> Save
-            </button>
-          </div>
+        <!-- Collections -->
+        <div class="tab-panel active">
+            <div class="clx-card">
+                <div class="clx-bar">
+                    <div class="clx-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="kinds.value.all"></b></button>
+                        <button type="button" data-on-click="showOwn" data-bind-class="filter.value === 'own' && 'is-on'">Yours <b data-bind-text="kinds.value.own"></b></button>
+                        <button type="button" data-on-click="showBuiltin" data-bind-class="filter.value === 'builtin' && 'is-on'">Built in <b data-bind-text="kinds.value.builtin"></b></button>
+                        <button type="button" data-on-click="showPlugin" data-bind-class="filter.value === 'plugin' && 'is-on'">Plugins <b data-bind-text="kinds.value.plugin"></b></button>
+                    </div>
+                    <input type="search" class="form-input clx-search" placeholder="Search collections…" aria-label="Search collections" data-model="query.value">
+                    <span data-help-title="Collections" data-help="A collection is a set of entries with the fields you define - products, events, testimonials. Click one to see its entries. Right-click it (or ⋮, or Shift+F10) to edit its fields and settings, open its form, copy its slug, or delete it. Built-in collections are the CMS's own and cannot be deleted; a plugin's can, but the plugin may stop working."></span>
+                    <span class="clx-spacer"></span>
+                    <span class="clx-note" data-bind-text="totalText.value"></span>
+                </div>
+                <p class="clx-note" data-bind-hidden="!loading.value">Loading…</p>
+                <p class="clx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+                <p class="clx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+                <div class="clx-list" data-each="rows.value key=slug"></div>
+            </div>
         </div>
-        <div class="card-body">
-          <div id="connections-form-view">
-            <div id="connections-list"></div>
-            <p id="connections-empty" class="text-muted" style="text-align:center;padding:2rem 0;">
-              No connections configured. Add a connection to enable MongoDB storage.
-            </p>
-          </div>
-          <div id="connections-raw-view" style="display:none;">
-                        <textarea id="connections-raw-json" class="form-input" rows="12"
-                                  style="font-family:monospace;font-size:.8rem;resize:vertical;width:100%;"></textarea>
-          </div>
+
+        <!-- Database connections (admins only) -->
+        <div class="tab-panel">
+            <div class="clx-card">
+                <div class="clx-bar">
+                    <strong>MongoDB connections</strong>
+                    <span data-help-title="Database connections" data-help="Collections are stored as files unless their storage is set to MongoDB, which needs a connection here - usually one called default. Each needs a URI (mongodb://…) and a database name. Kept in config/connections.json; with none, every collection stays on files. Ctrl+S saves."></span>
+                    <span class="clx-spacer"></span>
+                    <label class="clx-toggle"><input type="checkbox" data-model="raw.value"> Raw JSON</label>
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="addConnection" data-bind-hidden="raw.value">
+                        <span data-icon="plus" data-icon-size="14"></span> Add connection</button>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="saveConnections" data-bind-disabled="savingConn.value || !connDirty.value">
+                        <span data-icon="save" data-icon-size="14"></span> Save</button>
+                </div>
+                <p class="clx-note" data-bind-hidden="!connLoading.value">Loading…</p>
+                <div data-bind-hidden="raw.value || connLoading.value">
+                    <p class="clx-note" data-bind-hidden="connRows.value.length">No connections - every collection is stored as files. Add one to use MongoDB.</p>
+                    <div class="clx-conns" data-each="connRows.value key=id"></div>
+                </div>
+                <div data-bind-hidden="!raw.value">
+                    <textarea class="form-input clx-raw" rows="12" spellcheck="false" aria-label="Connections as JSON" data-model="rawText.value"></textarea>
+                </div>
+                <p class="clx-note is-bad" data-bind-hidden="!connError.value" data-bind-text="connError.value"></p>
+            </div>
         </div>
-      </div>
     </div>
-
-  </div>
 </div>
+
+<style>
+.clx { display: flex; flex-direction: column; gap: .75rem; }
+.clx [hidden], .clx-form [hidden] { display: none !important; }
+.clx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.clx-note.is-bad { color: var(--dm-danger); }
+.clx-scope { padding: .5rem .75rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 10%, transparent); color: var(--dm-text); }
+.clx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.clx-dirty { color: var(--dm-warning); margin-left: .2rem; }
+.clx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
+.clx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.clx-bar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.clx-spacer { flex: 1; }
+.clx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.clx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.clx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.clx-seg button + button { border-left: 1px solid var(--dm-border); }
+.clx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.clx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.clx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.clx-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--dm-text-sm); cursor: pointer; }
+.clx-list { display: flex; flex-direction: column; }
+.clx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.clx-row:last-child { border-bottom: 0; }
+.clx-row:hover, .clx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.clx-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); }
+.clx-row.is-builtin .clx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.clx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.clx-main strong, .clx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.clx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.clx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.clx-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); }
+.clx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.clx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.clx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.clx-num { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.clx-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; }
+.clx-kebab:hover { color: var(--dm-primary); }
+.clx-conns { display: flex; flex-direction: column; gap: .5rem; }
+.clx-conn { display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: .5rem; align-items: end; padding: .6rem; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
+.clx-conn label { display: flex; flex-direction: column; gap: .2rem; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.clx-raw { width: 100%; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); resize: vertical; }
+.clx-form { display: flex; flex-direction: column; gap: .85rem; }
+.clx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.clx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.clx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.clx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.clx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 720px) { .clx-conn { grid-template-columns: 1fr; } .clx-num { display: none; } }
+</style>

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/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>