domma-cms 0.76.0 → 0.77.1

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

@@ -1,143 +1,221 @@
-<div class="view-header">
-    <h1 id="editor-title"><span data-icon="database"></span> <span id="editor-title-text">New Collection</span></h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a href="#/collections" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Collections
-        </a>
-        <button id="save-collection-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save
-        </button>
+<!-- Collection editor. Bound with M.applyBindings - see admin/js/views/collection-editor.js, which also inserts
+     the field row template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner above is the heading ("Collections › <title>"); Save, All collections and
+     Open entries are banner actions. -->
+<div class="cex">
+    <div class="cex-unsaved" data-bind-hidden="!dirty.value">
+        <span data-icon="alert-circle" data-icon-size="15"></span>
+        <strong>Unsaved changes</strong>
+        <small data-bind-hidden="!problemCount.value" data-bind-text="problemText.value"></small>
+        <span class="cex-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="saving.value">
+            <span data-icon="save" data-icon-size="13"></span> Save</button>
     </div>
-</div>
 
-<div class="tabs" id="collection-tabs">
-    <div class="tab-list">
-        <button class="tab-item active">Settings</button>
-        <button class="tab-item">Fields</button>
-        <button class="tab-item">API &amp; Export</button>
-      <button class="tab-item" id="storage-tab-btn" style="display:none;">Storage</button>
-    </div>
-    <div class="tab-content">
+    <div class="tabs cex-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Settings <i class="cex-dot" data-bind-hidden="!settingsBad.value" title="Something here needs fixing"></i></button>
+            <button type="button" class="tab-item">Fields <b class="cex-count" data-bind-text="fieldCount.value"></b> <i class="cex-dot" data-bind-hidden="!fieldsBad.value" title="A field needs fixing"></i></button>
+            <button type="button" class="tab-item">API &amp; Export <i class="cex-dot" data-bind-hidden="!exportBad.value" title="Something here needs fixing"></i></button>
+            <button type="button" class="tab-item cex-storage-tab" data-bind-hidden="!showStorage.value">Storage</button>
+        </div>
 
-        <!-- Settings tab -->
+        <!-- Settings -->
         <div class="tab-panel active">
-            <div class="card mb-4">
-                <div class="card-body">
-                    <div class="row mb-3">
-                        <div class="col-7">
-                            <label class="form-label">Title</label>
-                            <input id="field-title" type="text" class="form-input" placeholder="e.g. Products">
-                        </div>
-                        <div class="col-5">
-                            <label class="form-label">Slug</label>
-                            <input id="field-slug" type="text" class="form-input" placeholder="products">
-                            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;" id="slug-hint">Auto-generated from title. Cannot be changed after creation.</p>
-                        </div>
+            <div class="cex-card">
+                <div class="cex-card-title">Collection
+                    <span data-help-title="Collections" data-help="A collection is a set of entries that share the same fields - products, bookings, team members. Its entries are edited under Data › Collections, shown on pages with the [collection] shortcode, and can be read by the public API if you allow it on the API &amp; Export tab."></span></div>
+                <div class="cex-grid">
+                    <div class="cex-wide">
+                        <label class="form-label" for="field-title">Title <span class="text-danger">*</span></label>
+                        <input id="field-title" type="text" class="form-input" maxlength="120" placeholder="e.g. Products" data-model="title.value">
+                        <small class="cex-err" data-bind-hidden="!errTitle.value" data-bind-text="errTitle.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="field-slug">Slug
+                            <span data-help-title="Slug" data-help="The collection's id - in its admin address, its API address (/api/collections/&lt;slug&gt;/public) and the [collection] shortcode. Made from the title as you type; it cannot be changed once the collection exists."></span></label>
+                        <input id="field-slug" type="text" class="form-input font-mono" maxlength="80" placeholder="products" data-model="slug.value" data-bind-disabled="!isNew.value">
+                        <small class="cex-err" data-bind-hidden="!errSlug.value" data-bind-text="errSlug.value"></small>
+                        <small class="cex-hint" data-bind-hidden="errSlug.value" data-bind-text="slugHint.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="collection-project">Project
+                            <span data-help-title="Project" data-help="Files the collection under a project, for the sidebar and for users limited to certain projects. Left empty it belongs to Core, which everyone can see."></span></label>
+                        <select id="collection-project" class="form-input" data-model="project.value">
+                            <option value="">- none (Core) -</option>
+                        </select>
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <label class="form-label">Description</label>
-                            <textarea id="field-description" class="form-input" rows="2" placeholder="Optional description…"></textarea>
-                        </div>
+                    <div class="cex-wide">
+                        <label class="form-label" for="field-description">Description</label>
+                        <textarea id="field-description" class="form-input" rows="2" maxlength="500" placeholder="Optional - what the entries are for" data-model="description.value"></textarea>
                     </div>
-                    <div class="row mt-3">
-                        <div class="col-6">
-                            <label class="form-label">Entry Form Layout</label>
-                            <select id="collection-layout" class="form-input">
-                                <option value="stacked">Stacked</option>
-                                <option value="grid">Grid</option>
-                            </select>
-                        </div>
-                        <div class="col-6" id="collection-columns-group" style="display:none;">
-                            <label class="form-label">Columns</label>
-                            <input id="collection-columns" type="number" class="form-input" min="1" max="6" value="2">
-                        </div>
+                </div>
+            </div>
+
+            <div class="cex-card">
+                <div class="cex-card-title">Entry form
+                    <span data-help-title="Entry form" data-help="How the form for adding and editing an entry is laid out. Stacked puts one field per row; Grid places them in columns, and each field can span several columns or the full width (set on the field)."></span></div>
+                <div class="cex-grid">
+                    <div>
+                        <label class="form-label" for="collection-layout">Layout</label>
+                        <select id="collection-layout" class="form-input" data-model="layout.value">
+                            <option value="stacked">Stacked - one field per row</option>
+                            <option value="grid">Grid - fields in columns</option>
+                        </select>
                     </div>
-                    <div class="row mt-3">
-                        <div class="col-6">
-                            <label class="form-label">Project</label>
-                            <select id="collection-project" class="form-input">
-                                <option value="">- none -</option>
-                            </select>
-                            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Tag this collection to a project for grouping.</p>
-                        </div>
+                    <div data-bind-hidden="layout.value !== 'grid'">
+                        <label class="form-label" for="collection-columns">Columns</label>
+                        <input id="collection-columns" type="number" class="form-input" min="1" max="6" data-model="columns.value">
+                        <small class="cex-err" data-bind-hidden="!errColumns.value" data-bind-text="errColumns.value"></small>
                     </div>
-                    <div class="row mt-3">
-                        <div class="col-auto">
-                            <label class="form-check-label" title="Included in fresh installs via the seed script">
-                                <input id="collection-bundled" type="checkbox" class="form-check"> Bundled
-                            </label>
-                        </div>
+                    <div class="cex-setting cex-wide">
+                        <label class="form-label" for="collection-bundled">Bundled
+                            <span data-help-title="Bundled" data-help="Ships with the site: the seed script includes it in a fresh install. Leave it off for a collection that only this site needs."></span></label>
+                        <input id="collection-bundled" type="checkbox" class="form-switch" data-model="bundled.value">
                     </div>
                 </div>
             </div>
         </div>
 
-        <!-- Fields tab -->
+        <!-- Fields -->
         <div class="tab-panel">
-            <div class="card mb-4">
-                <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-                    <h2>Fields</h2>
-                    <button id="add-field-btn" class="btn btn-ghost btn-sm" type="button">
-                        <span data-icon="plus"></span> Add Field
-                    </button>
-                </div>
-                <div class="card-body" style="padding:0;">
-                    <div id="fields-list" style="padding:1rem;">
-                        <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet. Click "Add Field" to get started.</p>
-                    </div>
+            <div class="cex-card">
+                <div class="cex-card-title">Fields
+                    <span data-help-title="Fields" data-help="What every entry holds. Click a field to edit it; drag it by its grip, or right-click it (or ⋮, or Shift+F10) to move it up or down, duplicate it or remove it. Alt+↑ / Alt+↓ move the focused field. Changes are kept here until you Save."></span>
+                    <span class="cex-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="addField"><span data-icon="plus" data-icon-size="13"></span> Add field</button>
                 </div>
+                <p class="cex-note" data-bind-hidden="fieldCount.value">No fields yet - Add field to give entries something to hold.</p>
+                <div class="cex-list" data-each="rows.value key=key"></div>
             </div>
         </div>
 
-        <!-- API Access tab -->
+        <!-- API & Export -->
         <div class="tab-panel">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h2>Public API Access</h2>
+            <div class="cex-card">
+                <div class="cex-card-title">Public API
+                    <span data-help-title="Public API" data-help="What the public API may do with this collection, and who may do it: Public is anyone; Token needs an API token (System › API Tokens); the others need a signed-in user with at least that role. The admin itself is always governed by roles and permissions, not by these switches."></span></div>
+                <p class="cex-note">At <code data-bind-text="apiPath.value"></code></p>
+                <div class="cex-ops">
+                    <div class="cex-op"><strong>Create</strong>
+                        <label class="cex-check"><input type="checkbox" data-model="createEnabled.value"> Allowed</label>
+                        <select class="form-input" aria-label="Who may create" data-model="createAccess.value" data-bind-disabled="!createEnabled.value"></select></div>
+                    <div class="cex-op"><strong>Read</strong>
+                        <label class="cex-check"><input type="checkbox" data-model="readEnabled.value"> Allowed</label>
+                        <select class="form-input" aria-label="Who may read" data-model="readAccess.value" data-bind-disabled="!readEnabled.value"></select></div>
+                    <div class="cex-op cex-op-sub">
+                        <label for="api-read-fields">Read fields
+                            <span data-help-title="Read fields" data-help="Only these fields are returned by the public and external read endpoints - a comma-separated list of field names. Empty returns every field."></span></label>
+                        <input id="api-read-fields" type="text" class="form-input" placeholder="Empty = every field" data-model="readFields.value">
+                        <small class="cex-hint cex-wide" data-bind-hidden="!unknownReadFields.value" data-bind-text="unknownReadFields.value"></small>
+                    </div>
+                    <div class="cex-op"><strong>Update</strong>
+                        <label class="cex-check"><input type="checkbox" data-model="updateEnabled.value"> Allowed</label>
+                        <select class="form-input" aria-label="Who may update" data-model="updateAccess.value" data-bind-disabled="!updateEnabled.value"></select></div>
+                    <div class="cex-op"><strong>Delete</strong>
+                        <label class="cex-check"><input type="checkbox" data-model="deleteEnabled.value"> Allowed</label>
+                        <select class="form-input" aria-label="Who may delete" data-model="deleteAccess.value" data-bind-disabled="!deleteEnabled.value"></select></div>
                 </div>
-                <div class="card-body">
-                    <p class="text-muted mb-4" style="font-size:.875rem;">Control which operations are available via the public API (<code>/api/collections/{slug}/public</code>). Admin endpoints are always protected by role.</p>
+            </div>
 
-                    <div id="api-access-rows">
-                        <!-- Rows built by JS -->
+            <div class="cex-card">
+                <div class="cex-card-title">Export
+                    <span data-help-title="Export" data-help="Lets visitors download the entries a [collection] display shows, from its right-click menu - as CSV and/or JSON. Who may export is a role: Public is anyone."></span></div>
+                <div class="cex-ops">
+                    <div class="cex-op"><strong>Export</strong>
+                        <label class="cex-check"><input id="export-enabled" type="checkbox" data-model="exportEnabled.value"> Allowed</label>
+                        <select id="export-access" class="form-input" aria-label="Who may export" data-model="exportAccess.value" data-bind-disabled="!exportEnabled.value"></select></div>
+                    <div class="cex-op cex-op-sub"><span>Formats</span>
+                        <span class="cex-formats">
+                            <label class="cex-check"><input id="export-format-csv" type="checkbox" data-model="exportCsv.value" data-bind-disabled="!exportEnabled.value"> CSV</label>
+                            <label class="cex-check"><input id="export-format-json" type="checkbox" data-model="exportJson.value" data-bind-disabled="!exportEnabled.value"> JSON</label>
+                        </span>
+                        <small class="cex-err cex-wide" data-bind-hidden="!errExport.value" data-bind-text="errExport.value"></small>
                     </div>
                 </div>
             </div>
         </div>
 
-      <!-- Storage tab (Pro) -->
-      <div class="tab-panel" id="storage-panel">
-        <div class="card">
-          <div class="card-header"><h2>Storage Adapter</h2></div>
-          <div class="card-body">
-            <p class="text-muted mb-4">Choose where this collection's entries are stored. File-based storage is the
-              default. MongoDB requires Pro mode to be enabled.</p>
-            <div class="form-group mb-3">
-              <label class="form-label">Adapter</label>
-              <button id="storage-adapter-trigger" class="form-input" type="button"
-                      style="text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;">
-                <span id="storage-adapter-label">File (default)</span>
-                <span data-icon="chevron-down" style="opacity:.5;"></span>
-              </button>
-              <input type="hidden" id="storage-adapter" value="file">
-            </div>
-            <div id="storage-connection-group" class="form-group mb-3" style="display:none;">
-              <label class="form-label">Connection</label>
-              <button id="storage-connection-trigger" class="form-input" type="button"
-                      style="text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;">
-                <span id="storage-connection-label">default</span>
-                <span data-icon="chevron-down" style="opacity:.5;"></span>
-              </button>
-              <input type="hidden" id="storage-connection" value="default">
-              <p class="form-text text-muted mt-1">Named connection from config/connections.json</p>
-            </div>
-            <div id="storage-migration-warning" class="alert alert-warning mt-3" style="display:none;">
-              Changing the storage adapter does not migrate existing entries. Export your data before switching.
+        <!-- Storage (Pro) -->
+        <div class="tab-panel">
+            <div class="cex-card">
+                <div class="cex-card-title">Storage
+                    <span data-help-title="Storage" data-help="Where this collection's entries live: in a file on this server (the default), or in MongoDB (Pro). Switching an existing collection asks whether to move its entries across when you Save - moving copies each entry to the new store. Export the entries first if they matter."></span></div>
+                <div class="cex-grid">
+                    <div>
+                        <label class="form-label" for="storage-adapter">Adapter</label>
+                        <select id="storage-adapter" class="form-input" data-model="storageAdapter.value">
+                            <option value="file">File (default)</option>
+                            <option value="mongodb">MongoDB</option>
+                        </select>
+                    </div>
+                    <div data-bind-hidden="storageAdapter.value !== 'mongodb'">
+                        <label class="form-label" for="storage-connection">Connection
+                            <span data-help="A named connection from config/connections.json."></span></label>
+                        <select id="storage-connection" class="form-input" data-model="storageConnection.value"></select>
+                    </div>
+                </div>
+                <p class="cex-warn" data-bind-hidden="!storageNote.value">
+                    <span data-icon="alert-triangle" data-icon-size="15"></span> <span data-bind-text="storageNote.value"></span>
+                </p>
             </div>
-          </div>
         </div>
-      </div>
-
     </div>
 </div>
+
+<style>
+.cex { display: flex; flex-direction: column; gap: .75rem; }
+.cex [hidden], .cex-panel [hidden] { display: none !important; }
+.cex-unsaved { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
+    border: 1px solid color-mix(in srgb, var(--dm-warning) 45%, var(--dm-border)); border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 12%, var(--dm-surface)); color: var(--dm-text); }
+.cex-unsaved small { color: var(--dm-danger); }
+.cex-unsaved .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.cex-spacer { flex: 1; }
+.cex-tabs .tab-item { display: inline-flex; align-items: center; gap: .3rem; }
+.cex-count { font-weight: 500; opacity: .65; font-size: var(--dm-text-xs); }
+.cex-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--dm-danger); display: inline-block; }
+.cex-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; }
+.cex-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.cex-card-title .btn { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; }
+.cex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
+.cex-wide { grid-column: 1 / -1; }
+.cex .form-label, .cex-panel .form-label { display: flex; align-items: center; gap: .3rem; }
+.cex-err { display: block; margin-top: .25rem; color: var(--dm-danger); font-size: var(--dm-text-xs); }
+.cex-hint { display: block; margin-top: .25rem; color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.cex-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.cex-warn { margin: 0; display: flex; gap: .45rem; align-items: flex-start; padding: .55rem .7rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); font-size: var(--dm-text-sm); }
+.cex-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.cex-setting .form-label { margin: 0; }
+.cex-list { display: flex; flex-direction: column; }
+.cex-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.cex-row:last-child { border-bottom: 0; }
+.cex-row:hover, .cex-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.cex-row.is-bad { box-shadow: inset 3px 0 0 var(--dm-danger); }
+.cex-row.is-drag-over { box-shadow: inset 0 2px 0 var(--dm-primary); }
+.cex-row.is-dragging { opacity: .45; }
+.cex-grip { cursor: grab; color: var(--dm-text-muted); user-select: none; padding: 0 .15rem; }
+.cex-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.cex-main strong, .cex-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cex-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.cex-main small.cex-problem { color: var(--dm-danger); }
+.cex-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); }
+.cex-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.cex-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; }
+.cex-kebab:hover { color: var(--dm-primary); }
+.cex-ops { display: flex; flex-direction: column; }
+.cex-op { display: grid; grid-template-columns: 7.5rem 1fr 11rem; gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--dm-border); }
+.cex-op:last-child { border-bottom: 0; }
+.cex-op-sub { grid-template-columns: 7.5rem 1fr; padding-left: 1rem; }
+.cex-op-sub > label, .cex-op-sub > span:first-child { color: var(--dm-text-muted); font-size: var(--dm-text-sm); display: flex; align-items: center; gap: .3rem; }
+.cex-check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: var(--dm-text-sm); }
+.cex-formats { display: flex; gap: 1rem; }
+/* The field panel (slideover) */
+.cex-panel { display: flex; flex-direction: column; gap: .85rem; }
+.cex-panel-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.cex-panel-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 720px) { .cex-grid { grid-template-columns: 1fr; } .cex-op { grid-template-columns: 1fr; } }
+</style>

package/admin/js/templates/collection-entries.html

@@ -1,40 +1,103 @@
-<div class="view-header">
-    <h1><span data-icon="database"></span> <span id="entries-title">Entries</span></h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a href="#/collections" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> Collections
-        </a>
-        <a id="edit-schema-btn" href="#/collections" class="btn btn-ghost btn-sm">
-            <span data-icon="edit-3"></span> Edit Schema
-        </a>
-        <a id="form-btn" href="#/forms" class="btn btn-ghost btn-sm">
-            <span data-icon="layout"></span> Form
-        </a>
-        <button id="import-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="upload"></span> Import
-        </button>
-        <button id="export-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="download"></span> Export
-        </button>
-        <button id="clear-all-btn" class="btn btn-danger btn-sm">
-            <span data-icon="trash"></span> Clear All
-        </button>
-        <button id="add-entry-btn" class="btn btn-primary">
-            <span data-icon="plus"></span> Add Entry
-        </button>
-    </div>
-</div>
+<!-- A collection's entries. Bound with M.applyBindings - see admin/views/collection-entries.js, which also
+     builds the table's head and row template from the collection's fields (the router renders a templateUrl
+     through _.render, eating any {{…}}). No page heading: the Tool banner is the heading (its section is the
+     collection's title), and Add / Import / Export / Edit fields / Form are banner actions. -->
+<div class="cex">
+    <p class="cex-note" data-bind-hidden="!ready.value">
+        <span data-bind-text="introText.value"></span>
+        <span data-help-title="Entries" data-help="Click an entry to edit it. Right-click it (or ⋮, or Shift+F10) to see all of it, duplicate it, copy its id, run one of the collection's actions or delete it - and right-click a value to filter by it. Tick entries to delete several at once. Filters and the search box work on the entries loaded; a big collection loads 500 at a time."></span>
+    </p>
+    <p class="cex-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
 
-<div class="card mb-3">
-    <div class="card-body" style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;">
-        <input id="entry-search" type="text" class="form-input" placeholder="Search entries…" style="flex:1;min-width:200px;">
-        <span id="entry-count" class="text-muted" style="white-space:nowrap;font-size:.85rem;"></span>
-        <div id="entry-filter-chips" style="display:none;flex-basis:100%;gap:.4rem;flex-wrap:wrap;align-items:center;"></div>
-    </div>
-</div>
+    <div class="cex-card" data-bind-hidden="!ready.value">
+        <div class="cex-bar">
+            <input type="search" class="form-input cex-search" placeholder="Search entries…" aria-label="Search entries" data-model="query.value">
+            <span class="cex-count" data-bind-text="countLine.value"></span>
+            <span class="cex-spacer"></span>
+            <span class="cex-bulk" data-bind-hidden="!selectedCount.value">
+                <strong data-bind-text="selectedText.value"></strong>
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="clearSelection">Clear</button>
+                <button type="button" class="btn btn-sm btn-danger" data-on-click="deleteSelected" data-bind-disabled="busy.value">
+                    <span data-icon="trash" data-icon-size="13"></span> Delete</button>
+            </span>
+            <button type="button" class="btn btn-sm btn-ghost text-danger" data-on-click="clearAll" data-bind-hidden="!canClear.value || !loaded.value.length || selectedCount.value" data-bind-disabled="busy.value">
+                Delete all…</button>
+        </div>
+        <div class="cex-chips" data-bind-hidden="!chips.value.length">
+            <span class="cex-chips-list" data-each="chips.value key=key"></span>
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="clearFilters">Clear filters</button>
+        </div>
+
+        <p class="cex-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="cex-note" data-bind-hidden="loading.value || rows.value.length" data-bind-text="emptyText.value"></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="entries-table"></div>
+        <div class="cex-scroll" data-bind-hidden="!rows.value.length">
+            <table class="cex-table">
+                <thead><tr class="cex-head"></tr></thead>
+                <tbody class="cex-rows" data-each="rows.value key=id"></tbody>
+            </table>
+        </div>
+        <div class="cex-more" data-bind-hidden="!moreText.value">
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="showMore" data-bind-disabled="loading.value">
+                <span data-bind-text="moreText.value"></span></button>
+            <span data-help="Shown 100 at a time. When a collection has more entries than are loaded, the next 500 come from the server - filters and search only see what is loaded."></span>
+        </div>
     </div>
 </div>
+
+<style>
+.cex { display: flex; flex-direction: column; gap: .75rem; }
+.cex [hidden], .cex-form [hidden] { display: none !important; }
+.cex-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.cex-note.is-bad { color: var(--dm-danger); }
+.cex-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.cex-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.cex-bar .btn, .cex-more .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.cex-search { flex: 1; min-width: 10rem; max-width: 24rem; }
+.cex-count { color: var(--dm-text-muted); font-size: var(--dm-text-sm); white-space: nowrap; }
+.cex-spacer { flex: 1; }
+.cex-bulk { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--dm-text-sm); }
+.cex-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
+.cex-chips-list { display: contents; }
+.cex-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--dm-text-xs); font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }
+.cex-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: var(--dm-text-sm); line-height: 1; padding: 0; }
+.cex-scroll { overflow-x: auto; }
+.cex-table { width: 100%; border-collapse: collapse; font-size: var(--dm-text-sm); }
+.cex-table th { text-align: left; font-weight: 600; color: var(--dm-text-muted); font-size: var(--dm-text-xs); padding: .35rem .5rem;
+    border-bottom: 1px solid var(--dm-border); white-space: nowrap; }
+.cex-table th button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; display: inline-flex; gap: .25rem; align-items: center; }
+.cex-table th button:hover { color: var(--dm-text); }
+.cex-table th .cex-sort { opacity: .7; }
+.cex-row { border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.cex-row:last-child { border-bottom: 0; }
+.cex-row:hover, .cex-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.cex-row.is-selected { background: color-mix(in srgb, var(--dm-primary) 8%, transparent); }
+.cex-row td { padding: .45rem .5rem; vertical-align: middle; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cex-row td.cex-when { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.cex-check { width: 1.75rem; }
+.cex-tools { text-align: right; width: 1%; white-space: nowrap; }
+.cex-run { border: 1px solid var(--dm-border); background: none; color: var(--dm-text-muted); border-radius: 999px; font-size: var(--dm-text-xs);
+    padding: .05rem .5rem; cursor: pointer; margin-right: .25rem; }
+.cex-run:hover { color: var(--dm-primary); border-color: var(--dm-primary); }
+.cex-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; }
+.cex-kebab:hover { color: var(--dm-primary); }
+.cex-more { display: flex; align-items: center; gap: .4rem; justify-content: center; }
+/* Slideovers */
+.cex-form { display: flex; flex-direction: column; gap: .85rem; }
+.cex-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.cex-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); }
+.cex-ok { display: block; color: var(--dm-success); font-size: var(--dm-text-xs); }
+.cex-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.cex-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.cex-dirty { font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.cex-detail { display: flex; flex-direction: column; gap: .6rem; }
+.cex-detail dt { font-size: var(--dm-text-xs); color: var(--dm-text-muted); font-weight: 600; }
+.cex-detail dd { margin: 0 0 .5rem; word-break: break-word; white-space: pre-wrap; padding-bottom: .5rem; border-bottom: 1px solid var(--dm-border); }
+.cex-meta { font-size: var(--dm-text-xs); color: var(--dm-text-muted); display: flex; flex-direction: column; gap: .2rem; }
+.cex-import { width: 100%; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); min-height: 12rem; resize: vertical; }
+.cex-export { display: flex; flex-direction: column; gap: .5rem; }
+.cex-export .btn { justify-content: flex-start; display: inline-flex; gap: .4rem; align-items: center; }
+@media (max-width: 640px) { .cex-row td.cex-when { display: none; } .cex-table th.cex-when { display: none; } }
+</style>