domma-cms 0.76.0 → 0.77.0

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

@@ -1,213 +1,236 @@
-<div class="view-header">
-    <h1><span data-icon="eye"></span> <span id="view-editor-title">New View</span></h1>
-    <div style="display:flex;gap:.5rem;">
-        <a href="#/views" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Views
-        </a>
-        <button id="save-view-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save View
-        </button>
+<!-- View editor. Bound with M.applyBindings - see admin/js/views/view-editor.js. No page heading: the Tool
+     banner ("Views › <title>") is the heading; Save, Results, Delete and All views are banner actions. -->
+<div class="vex">
+    <div class="vex-unsaved" data-bind-hidden="!dirty.value">
+        <span class="vex-dot" aria-hidden="true"></span>
+        <strong>Unsaved changes</strong>
+        <small data-bind-text="errorSummary.value"></small>
+        <span class="vex-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="view-editor-tabs">
-    <div class="tab-list">
-        <button class="tab-item active">Source</button>
-        <button class="tab-item">Pipeline</button>
-        <button class="tab-item">Display</button>
-        <button class="tab-item">Access</button>
-    </div>
-    <div class="tab-content">
 
-        <!-- Source tab -->
-        <div class="tab-panel active">
-            <div class="card">
-                <div class="card-body" style="display:flex;flex-direction:column;gap:1rem;max-width:600px;">
-                    <div>
-                        <label class="form-label">Title <span style="color:var(--dm-danger,#f87171);">*</span></label>
-                        <input id="view-title" type="text" class="form-input" placeholder="e.g. Active Premium Users">
-                    </div>
-                    <div>
-                        <label class="form-label">Slug</label>
-                        <input id="view-slug" type="text" class="form-input" placeholder="Auto-generated from title">
-                        <small class="text-muted">URL-safe identifier. Leave blank to auto-generate.</small>
-                    </div>
-                    <div>
-                        <label class="form-label">Description</label>
-                        <textarea id="view-description" class="form-input" rows="2" placeholder="Describe what this view shows…"></textarea>
-                    </div>
-                    <div>
-                        <label class="form-label">Source Collection <span style="color:var(--dm-danger,#f87171);">*</span></label>
-                        <select id="view-source" class="form-input">
-                            <option value="">- select collection -</option>
-                        </select>
-                        <small class="text-muted">Changing the collection will refresh field lists in Pipeline and
-                            Display tabs.</small>
-                    </div>
-                    <div>
-                        <label class="form-label">Project</label>
-                        <select id="view-project" class="form-input">
-                            <option value="">- none -</option>
-                        </select>
-                        <small class="text-muted">Tag this view to a project for grouping.</small>
-                    </div>
-                    <div>
-                        <label class="form-check-label" title="Included in fresh installs via the seed script">
-                            <input id="view-bundled" type="checkbox" class="form-check"> Bundled
-                        </label>
-                    </div>
-                    <div>
-                        <label class="form-label">Connection</label>
-                        <select id="view-connection" class="form-input">
-                            <option value="default">default</option>
-                        </select>
-                        <small class="text-muted">MongoDB connection to use for execution.</small>
-                    </div>
-                </div>
-            </div>
+    <div class="tabs vex-tabs" id="view-editor-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Source <span class="vex-tabdot" data-bind-hidden="!errs.value.source.length" title="Something here needs fixing"></span></button>
+            <button type="button" class="tab-item">Pipeline <b class="vex-count" data-bind-text="stageCount.value"></b> <span class="vex-tabdot" data-bind-hidden="!errs.value.pipeline.length" title="Something here needs fixing"></span></button>
+            <button type="button" class="tab-item">Display <span class="vex-tabdot" data-bind-hidden="!errs.value.display.length" title="Something here needs fixing"></span></button>
+            <button type="button" class="tab-item">Access <span class="vex-tabdot" data-bind-hidden="!errs.value.access.length" title="Something here needs fixing"></span></button>
+            <button type="button" class="tab-item">Results</button>
         </div>
+        <div class="tab-content">
 
-        <!-- Pipeline tab -->
-        <div class="tab-panel">
-            <div class="card mb-3">
-                <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-                    <h2>Aggregation Stages</h2>
-                    <div style="display:flex;gap:.5rem;">
-                        <select id="add-stage-type" class="form-input form-input--sm">
-                            <option value="$match">$match - filter rows</option>
-                            <option value="$sort">$sort - order rows</option>
-                            <option value="$lookup">$lookup - join collection</option>
-                            <option value="$project">$project - reshape fields</option>
-                            <option value="$unwind">$unwind - flatten array</option>
-                            <option value="$addFields">$addFields - compute fields</option>
-                            <option value="$group">$group - aggregate</option>
-                        </select>
-                        <button id="add-stage-btn" class="btn btn-ghost btn-sm">
-                            <span data-icon="plus"></span> Add Stage
-                        </button>
-                    </div>
-                </div>
-                <div class="card-body">
-                    <div id="pipeline-stages-list">
-                        <p class="text-muted stage-empty-placeholder" style="text-align:center;padding:2rem 0;">
-                            No stages yet. Add a stage to filter, join, or transform your data.
-                        </p>
+            <!-- Source -->
+            <div class="tab-panel active">
+                <div class="vex-card">
+                    <div class="vex-card-title">What it is, and what it reads</div>
+                    <div class="vex-grid">
+                        <div class="vex-wide">
+                            <label class="form-label" for="view-title">Title <span class="vex-req">*</span></label>
+                            <input id="view-title" type="text" class="form-input" maxlength="120" placeholder="e.g. Active premium users">
+                        </div>
+                        <div>
+                            <label class="form-label" for="view-slug">Slug
+                                <span data-help-title="Slug" data-help="The view's id - in [view slug=&quot;…&quot;] and its API addresses. Made from the title when left blank. It cannot change once the view exists; duplicate the view to get another."></span></label>
+                            <input id="view-slug" type="text" class="form-input font-mono" placeholder="made from the title">
+                            <small class="vex-hint" data-bind-text="slugHint.value"></small>
+                        </div>
+                        <div>
+                            <label class="form-label" for="view-source">Source collection <span class="vex-req">*</span>
+                                <span data-help-title="Source" data-help="The collection whose entries the pipeline starts from. Changing it refreshes the field lists in Pipeline and Display. A MongoDB collection runs as a native aggregation; any other as the built-in pipeline evaluator - same stages, same results."></span></label>
+                            <select id="view-source" class="form-input"><option value="">- choose -</option></select>
+                        </div>
+                        <div class="vex-wide">
+                            <label class="form-label" for="view-description">Description</label>
+                            <textarea id="view-description" class="form-input" rows="2" placeholder="What this view shows, and for whom…"></textarea>
+                        </div>
+                        <div>
+                            <label class="form-label" for="view-project">Project
+                                <span data-help="Files the view under a project - for the sidebar and for users limited to that project. Left empty, it belongs to Core."></span></label>
+                            <select id="view-project" class="form-input"><option value="">- Core -</option></select>
+                        </div>
+                        <div>
+                            <label class="form-label" for="view-connection">Connection
+                                <span data-help="The MongoDB connection a MongoDB-backed source runs on. Ignored for file collections."></span></label>
+                            <select id="view-connection" class="form-input"><option value="default">default</option></select>
+                        </div>
+                        <div class="vex-setting vex-wide">
+                            <label class="form-label" for="view-bundled">Bundled
+                                <span data-help="Included in fresh installs by the seed script. Leave off for a site's own views."></span></label>
+                            <input id="view-bundled" type="checkbox" class="form-switch">
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="card">
-                <div class="card-body" style="font-size:.8rem;color:var(--dm-text-muted,#888);">
-                    <strong>Guided stages</strong> ($match, $sort) show a visual condition builder.
-                    Other stages use a raw JSON textarea - enter only the <em>inner</em> config (e.g. for $lookup, enter
-                    <code>{ from, localField, foreignField, as }</code> - do not wrap in <code>{ "$lookup": ... }</code>).
-                    Field dropdowns are populated from the source collection - select a collection on the Source tab
-                    first.
+
+            <!-- Pipeline -->
+            <div class="tab-panel">
+                <div class="vex-card">
+                    <div class="vex-card-title">Stages <small class="vex-muted">run top to bottom</small>
+                        <span data-help-title="Pipeline" data-help="Each stage takes the rows from the one above and passes on its result: filter them ($match), order them ($sort), join another collection ($lookup), reshape or compute fields, group and total, keep or skip some, or count them. $match and $sort have a builder; the rest take their settings as JSON - only the inside, e.g. { &quot;from&quot;: …, &quot;as&quot;: … } for $lookup. Right-click a stage (or ⋮, or Shift+F10) to move, duplicate or delete it, or to see the results up to that stage."></span>
+                        <span class="vex-spacer"></span>
+                        <select id="add-stage-type" class="form-input vex-add-type" aria-label="Stage to add"></select>
+                        <button type="button" id="add-stage-btn" class="btn btn-sm btn-ghost"><span data-icon="plus" data-icon-size="13"></span> Add stage</button>
+                    </div>
+                    <div id="pipeline-stages-list" class="vex-stages"></div>
+                    <p class="vex-note" data-bind-hidden="stageCount.value">No stages yet - every entry of the source is shown as it is. Add one to filter, join or reshape.</p>
                 </div>
             </div>
-        </div>
 
-        <!-- Display tab -->
-        <div class="tab-panel">
-            <div class="card">
-                <div class="card-body" style="display:flex;flex-direction:column;gap:1.25rem;max-width:640px;">
-                    <div>
-                        <label class="form-label">Display Mode</label>
-                        <select id="view-display-mode" class="form-input">
-                            <option value="table">Table</option>
-                            <option value="list">List</option>
-                            <option value="block">Block</option>
-                        </select>
-                    </div>
-                    <div id="view-block-section" style="display:none;">
-                        <label class="form-label">Block Template</label>
-                        <select id="view-block-name" class="form-input">
-                            <option value="">- select block -</option>
-                        </select>
-                        <small class="text-muted">
-                            Choose a reusable HTML block template.
-                            <a href="#/blocks" style="margin-left:.35rem;">Manage blocks</a>
-                        </small>
-                    </div>
-                    <div>
-                        <label class="form-label">Page Size</label>
-                        <input id="view-page-size" type="number" class="form-input" value="25" min="1" max="200">
-                    </div>
-                    <div id="view-columns-section">
-                        <label class="form-label">Columns</label>
-                        <small class="text-muted" style="display:block;margin-bottom:.75rem;">
-                            Choose which fields to display and their labels.
-                            Field dropdowns are auto-populated from the source collection.
-                        </small>
-                        <div id="view-columns-builder" style="min-height:2rem;"></div>
+            <!-- Display -->
+            <div class="tab-panel">
+                <div class="vex-card">
+                    <div class="vex-card-title">How it is shown</div>
+                    <div class="vex-grid">
+                        <div>
+                            <label class="form-label" for="view-display-mode">Display mode
+                                <span data-help="Table: a row per result with the columns below. List: each result's first fields, one under another. Block: each result rendered through a block template of yours."></span></label>
+                            <select id="view-display-mode" class="form-input">
+                                <option value="table">Table</option>
+                                <option value="list">List</option>
+                                <option value="block">Block</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="form-label" for="view-page-size">Page size
+                                <span data-help="Results per page, 1 to 200."></span></label>
+                            <input id="view-page-size" type="number" class="form-input" value="25" min="1" max="200">
+                        </div>
+                        <div id="view-block-section" class="vex-wide" hidden>
+                            <label class="form-label" for="view-block-name">Block template</label>
+                            <select id="view-block-name" class="form-input"><option value="">- choose a block -</option></select>
+                            <small class="vex-hint"><a href="#/blocks">Manage blocks</a></small>
+                        </div>
                     </div>
                 </div>
+                <div class="vex-card" id="view-columns-section">
+                    <div class="vex-card-title">Columns
+                        <span data-help-title="Columns" data-help="Which fields the table shows, in order, and what each heading says. The field lists come from the source collection. With none, the first six fields of the first result are shown. Right-click a column (or ⋮) to move or remove it."></span></div>
+                    <div id="view-columns-builder" class="vex-cols"></div>
+                </div>
             </div>
-        </div>
 
-        <!-- Access tab -->
-        <div class="tab-panel">
-            <div class="card mb-3">
-                <div class="card-body" style="max-width:500px;">
-                    <div style="margin-bottom:1.25rem;">
-                        <label class="form-label">Allowed Roles</label>
-                        <small class="text-muted" style="display:block;margin-bottom:.75rem;">
-                            Select which roles can access this view.
-                        </small>
-                        <div id="view-roles-checkboxes" style="display:flex;flex-direction:column;gap:.5rem;"></div>
-                    </div>
-                    <div>
-                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                            <input type="checkbox" id="view-public">
-                            <span>Public (no authentication required)</span>
-                        </label>
-                        <small class="text-muted" style="display:block;margin-top:.4rem;">
-                            When enabled, the <code>/views/:slug/public</code> endpoint requires no login.
-                        </small>
+            <!-- Access -->
+            <div class="tab-panel">
+                <div class="vex-card">
+                    <div class="vex-card-title">Who can see it
+                        <span data-help-title="Access" data-help="Signed-in users holding one of these roles can see the view's results - on pages ([view]) and at /api/views/&lt;slug&gt;/public. Public lets anyone, signed in or not. Admins always can."></span></div>
+                    <div id="view-roles-checkboxes" class="vex-roles"></div>
+                    <div class="vex-setting">
+                        <label class="form-label" for="view-public">Public - no sign-in needed</label>
+                        <input type="checkbox" id="view-public" class="form-switch">
                     </div>
                 </div>
-            </div>
-            <div class="card">
-                <div class="card-header"><h2>Row-Level Access</h2></div>
-                <div class="card-body" style="max-width:500px;display:flex;flex-direction:column;gap:1rem;">
-                    <div>
-                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                            <input type="checkbox" id="view-rowlevel-enabled">
-                            <span>Filter results to current user's entries</span>
-                        </label>
-                        <small class="text-muted" style="display:block;margin-top:.4rem;">
-                            When enabled, each user sees only their own matching entries.
-                            Admins always see all results.
-                        </small>
-                    </div>
-                    <div id="view-rowlevel-config" style="display:none;flex-direction:column;gap:1rem;">
+                <div class="vex-card">
+                    <div class="vex-card-title">Row-level access
+                        <span data-help-title="Row-level access" data-help="Each user sees only the results that are theirs. Owner: entries they created. Field Match: entries whose chosen field equals something about them (their id, email, name or role). Admins always see every result."></span></div>
+                    <div class="vex-setting">
+                        <label class="form-label" for="view-rowlevel-enabled">Show each user only their own results</label>
+                        <input type="checkbox" id="view-rowlevel-enabled" class="form-switch">
+                    </div>
+                    <div id="view-rowlevel-config" class="vex-grid" hidden>
                         <div>
-                            <label class="form-label">Mode</label>
+                            <label class="form-label" for="view-rowlevel-mode">Mode</label>
                             <select id="view-rowlevel-mode" class="form-input">
-                                <option value="owner">Owner - entry was created by the current user</option>
-                                <option value="field">Field Match - a field on the entry matches the user</option>
+                                <option value="owner">Owner - they created the entry</option>
+                                <option value="field">Field Match - a field equals them</option>
                             </select>
                         </div>
-                        <div id="view-rowlevel-field-group" style="display:none;">
-                            <label class="form-label">Field Name</label>
-                            <input id="view-rowlevel-field" type="text" class="form-input"
-                                   placeholder="e.g. assigned_to">
-                            <small class="text-muted">The entry field whose value must match the user property
-                                below.</small>
-                        </div>
                         <div>
-                            <label class="form-label">User Property</label>
+                            <label class="form-label" for="view-rowlevel-userkey">Compared with their</label>
                             <select id="view-rowlevel-userkey" class="form-input">
-                                <option value="id">id (UUID)</option>
+                                <option value="id">id</option>
                                 <option value="email">email</option>
                                 <option value="name">name</option>
                                 <option value="role">role</option>
                             </select>
-                            <small class="text-muted">Which property of the logged-in user to compare against.</small>
+                        </div>
+                        <div id="view-rowlevel-field-group" class="vex-wide" hidden>
+                            <label class="form-label" for="view-rowlevel-field">Entry field</label>
+                            <input id="view-rowlevel-field" type="text" class="form-input font-mono" placeholder="e.g. assigned_to">
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
 
+            <!-- Results -->
+            <div class="tab-panel">
+                <div class="vex-card">
+                    <div class="vex-card-title">Results <small class="vex-muted" data-bind-text="previewMeta.value"></small>
+                        <span data-help-title="Results" data-help="The pipeline as it stands now - saved or not - run against the source, first rows only. It follows your edits. Row-level access is not applied here: this is the admin's view."></span>
+                        <span class="vex-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-bind-hidden="!upTo.value" data-on-click="allStages">Run every stage</button>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="runPreview"><span data-icon="refresh-cw" data-icon-size="13"></span> Run</button>
+                    </div>
+                    <p class="vex-note" data-bind-hidden="!previewNote.value" data-bind-text="previewNote.value"></p>
+                    <p class="vex-note is-bad" data-bind-hidden="!previewError.value" data-bind-text="previewError.value"></p>
+                    <div class="vex-results"></div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
+
+<style>
+.vex { display: flex; flex-direction: column; gap: .75rem; }
+.vex [hidden] { display: none !important; }
+.vex-unsaved { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: var(--dm-surface-raised, var(--dm-surface));
+    box-shadow: 0 2px 8px color-mix(in srgb, var(--dm-text) 10%, transparent); }
+.vex-unsaved small { color: var(--dm-danger); }
+.vex-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--dm-warning); flex-shrink: 0; }
+.vex-spacer { flex: 1; }
+.vex-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; }
+.vex-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; flex-wrap: wrap; }
+.vex-card-title .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.vex-muted, .vex-hint { color: var(--dm-text-muted); font-weight: 400; font-size: var(--dm-text-sm); }
+.vex-hint { display: block; font-size: var(--dm-text-xs); margin-top: .25rem; }
+.vex-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.vex-note.is-bad { color: var(--dm-danger); }
+.vex-req { color: var(--dm-danger); }
+.vex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
+.vex-wide { grid-column: 1 / -1; }
+.vex-grid .form-label, .vex-card .form-label { display: flex; align-items: center; gap: .3rem; }
+.vex-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.vex-setting .form-label { margin: 0; }
+.vex-count { font-weight: 500; opacity: .65; font-size: var(--dm-text-xs); margin-left: .15rem; }
+.vex-tabdot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dm-danger); margin-left: .25rem; vertical-align: middle; }
+.vex-add-type { width: auto; min-width: 12rem; }
+.vex-stages { display: flex; flex-direction: column; gap: .5rem; }
+.vex-stage { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
+.vex-stage.has-error { border-color: var(--dm-danger); }
+.vex-stage-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-bottom: 1px solid var(--dm-border);
+    background: color-mix(in srgb, var(--dm-text) 3%, transparent); border-radius: var(--dm-radius-md) var(--dm-radius-md) 0 0; }
+.vex-stage-head:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: -2px; }
+.vex-stage-no { font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: var(--dm-text-xs); min-width: 1.2rem; }
+.vex-stage-type { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); color: var(--dm-primary); }
+.vex-stage-sum { flex: 1; min-width: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vex-stage-body { padding: .6rem; display: flex; flex-direction: column; gap: .4rem; }
+.vex-stage-body textarea { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); resize: vertical; }
+.vex-stage-err { color: var(--dm-danger); font-size: var(--dm-text-xs); }
+.vex-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; line-height: 1; }
+.vex-kebab:hover { color: var(--dm-primary); }
+.vex-cond, .vex-sort-row, .vex-col { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
+/* One line per condition: the admin's .form-input is width:100%, which stacked them. */
+.vex-cond > select, .vex-sort-row > select { width: auto; flex: 0 1 13rem; min-width: 9rem; }
+.vex-cond .vex-val { flex: 1 1 10rem; min-width: 8rem; display: flex; }
+.vex-cond .vex-val > * { flex: 1; }
+.vex-logic { display: flex; align-items: center; gap: .5rem; }
+.vex-logic select { width: auto; }
+.vex-x { border: 0; background: none; cursor: pointer; color: var(--dm-text-muted); padding: 0 .3rem; font-size: var(--dm-text-lg); line-height: 1; }
+.vex-x:hover { color: var(--dm-danger); }
+.vex-cols { display: flex; flex-direction: column; gap: .4rem; }
+.vex-col { padding: .2rem .25rem; border-radius: var(--dm-radius-sm); }
+.vex-col:focus-within, .vex-col:hover { background: color-mix(in srgb, var(--dm-text) 4%, transparent); }
+.vex-col .col-key { width: auto; flex: 0 1 16rem; min-width: 12rem; }
+.vex-col .col-label { width: auto; flex: 1; }
+.vex-roles { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
+.vex-roles label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
+.vex-results { overflow-x: auto; }
+.vex-results table { width: 100%; border-collapse: collapse; font-size: var(--dm-text-sm); }
+.vex-results th, .vex-results td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--dm-border); white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
+.vex-results th { color: var(--dm-text-muted); font-weight: 600; }
+.vex-results tr[tabindex]:hover, .vex-results tr[tabindex]:focus-visible { background: color-mix(in srgb, var(--dm-text) 5%, transparent); outline: none; }
+@media (max-width: 640px) { .vex-grid { grid-template-columns: 1fr; } }
+</style>

package/admin/js/templates/view-preview.html

@@ -1,51 +1,51 @@
-<div class="view-header">
-    <h1><span data-icon="eye"></span> <span id="preview-title">View Preview</span></h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a id="preview-edit-btn" href="#/views" class="btn btn-ghost btn-sm">
-            <span data-icon="edit-3"></span> Edit View
-        </a>
-        <a href="#/views" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Views
-        </a>
-        <button id="preview-run-btn" class="btn btn-primary">
-            <span data-icon="play"></span> Run
-        </button>
+<!-- View preview. Bound with M.applyBindings - see admin/js/views/view-preview.js. No page heading: the Tool
+     banner ("Views › <title>") is the heading; Run, Edit and All views are banner actions. -->
+<div class="vpx">
+    <div class="vpx-card">
+        <div class="vpx-card-title">What runs
+            <span data-help-title="Preview" data-help="The saved view, run as you (an admin) would see it: every row the pipeline gives, a page at a time. Row-level access narrows the results for other users, not here. To change what it shows, Edit it - the editor's Results tab runs unsaved changes too."></span></div>
+        <div class="vpx-chips" data-each="chips.value key=text"></div>
+        <p class="vpx-note" data-bind-hidden="!description.value" data-bind-text="description.value"></p>
     </div>
-</div>
-
-<div class="card mb-3" id="preview-meta-card" style="display:none;">
-    <div class="card-body" style="display:flex;gap:2rem;flex-wrap:wrap;font-size:.875rem;color:var(--dm-text-muted,#888);">
-        <span>Source: <strong id="preview-source"></strong></span>
-        <span>Connection: <strong id="preview-connection"></strong></span>
-        <span>Mode: <strong id="preview-mode"></strong></span>
-    </div>
-</div>
 
-<div class="card mb-3" id="preview-pagination" style="display:none;">
-    <div class="card-body" style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
-        <span id="preview-count" class="text-muted" style="font-size:.875rem;"></span>
-        <div style="display:flex;gap:.4rem;margin-left:auto;">
-            <button id="preview-prev" class="btn btn-ghost btn-sm" disabled>
-                <span data-icon="chevron-left"></span> Prev
-            </button>
-            <span id="preview-page-label" style="padding:.25rem .5rem;font-size:.875rem;align-self:center;"></span>
-            <button id="preview-next" class="btn btn-ghost btn-sm" disabled>
-                Next <span data-icon="chevron-right"></span>
-            </button>
+    <div class="vpx-card">
+        <div class="vpx-bar">
+            <strong data-bind-text="countText.value"></strong>
+            <span class="vpx-spacer"></span>
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="prev" data-bind-disabled="!canPrev.value" aria-label="Previous page">‹ Prev</button>
+            <span class="vpx-muted" data-bind-text="pageText.value"></span>
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="next" data-bind-disabled="!canNext.value" aria-label="Next page">Next ›</button>
         </div>
+        <p class="vpx-note" data-bind-hidden="!loading.value">Running…</p>
+        <p class="vpx-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+        <p class="vpx-note" data-bind-hidden="loading.value || error.value || total.value">No rows come out of this view.</p>
+        <div class="vpx-results"></div>
     </div>
 </div>
 
-<div class="card">
-    <div class="card-body">
-        <div id="preview-placeholder" style="text-align:center;padding:3rem;color:var(--dm-text-muted,#888);">
-            <span data-icon="play" data-icon-size="48" style="opacity:.3;display:block;margin-bottom:1rem;"></span>
-            Click <strong>Run</strong> to execute this view and see results.
-        </div>
-        <div id="preview-table" style="display:none;"></div>
-        <div id="preview-list" style="display:none;"></div>
-        <div id="preview-empty" style="display:none;text-align:center;padding:2rem;color:var(--dm-text-muted,#888);">
-            No results returned.
-        </div>
-    </div>
-</div>
+<style>
+.vpx { display: flex; flex-direction: column; gap: .75rem; }
+.vpx [hidden] { display: none !important; }
+.vpx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.vpx-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
+.vpx-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
+.vpx-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); }
+.vpx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.vpx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.vpx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.vpx-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.vpx-spacer { flex: 1; }
+.vpx-muted { color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.vpx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.vpx-note.is-bad { color: var(--dm-danger); }
+.vpx-results { overflow-x: auto; }
+.vpx-results table { width: 100%; border-collapse: collapse; font-size: var(--dm-text-sm); }
+.vpx-results th, .vpx-results td { text-align: left; padding: .4rem .55rem; border-bottom: 1px solid var(--dm-border); white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
+.vpx-results th { color: var(--dm-text-muted); font-weight: 600; }
+.vpx-results tr[tabindex] { cursor: default; }
+.vpx-results tr[tabindex]:hover, .vpx-results tr[tabindex]:focus-visible { background: color-mix(in srgb, var(--dm-text) 5%, transparent); outline: none; }
+.vpx-list-item { padding: .55rem .25rem; border-bottom: 1px solid var(--dm-border); display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .15rem .75rem; font-size: var(--dm-text-sm); }
+.vpx-list-item dt { color: var(--dm-text-muted); }
+.vpx-list-item dd { margin: 0; overflow: hidden; text-overflow: ellipsis; }
+</style>