domma-cms 0.55.1 → 0.69.3

package/admin/js/templates/analytics.html

@@ -0,0 +1,138 @@
+<!-- No heading: the banner above (admin/js/lib/plugin-chrome.js) is the title.
+     Everything that changes is bound (M.applyBindings) - see admin/js/views/analytics.js, which also
+     inserts the list-row templates: the router renders this file through _.render, eating any {{…}}. -->
+<div class="an-tool">
+
+    <div class="an-bar">
+        <select class="form-input an-range" aria-label="Range" data-model="range.value">
+            <option value="today">Today</option>
+            <option value="7d">Last 7 days</option>
+            <option value="30d">Last 30 days</option>
+            <option value="90d">Last 90 days</option>
+            <option value="all">All time</option>
+        </select>
+        <span class="an-live" data-bind-class="liveClass.value" data-bind-title="liveTitle.value">
+            <span class="an-live-dot"></span><span data-bind-text="liveText.value"></span>
+        </span>
+        <span data-help-title="Active now"
+              data-help="Visitors with a page view in the last five minutes, counted by browser session. It refreshes itself every 30 seconds while this screen is open (switch that off in settings)."></span>
+        <div class="an-bar-end">
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="refresh" title="Refresh">
+                <span data-icon="refresh-cw" data-icon-size="14"></span>
+            </button>
+            <button type="button" class="btn btn-sm btn-ghost an-more" aria-label="More actions" title="Export, reset">⋮</button>
+        </div>
+    </div>
+
+    <div class="an-kpis">
+        <div class="an-kpi"><span class="an-kpi-value" data-bind-text="kpi.value.hits">-</span>
+            <span class="an-kpi-label">Page views <span data-help="Every page view in the chosen range. Admin pages, the API, and visitors whose browser asks not to be tracked are never counted."></span></span></div>
+        <div class="an-kpi"><span class="an-kpi-value" data-bind-text="kpi.value.pages">-</span>
+            <span class="an-kpi-label">Pages viewed</span></div>
+        <div class="an-kpi"><span class="an-kpi-value" data-bind-text="kpi.value.sessions">-</span>
+            <span class="an-kpi-label">Sessions <span data-help="Browser sessions seen in the range (up to 30 days back). One visitor in one browser tab session counts once, however many pages they read."></span></span></div>
+        <div class="an-kpi"><span class="an-kpi-value" data-bind-text="kpi.value.bounce">-</span>
+            <span class="an-kpi-label">Bounce rate <span data-help="The share of sessions that viewed a single page and left."></span></span></div>
+        <div class="an-kpi"><span class="an-kpi-value" data-bind-text="kpi.value.lifetime">-</span>
+            <span class="an-kpi-label">All-time views</span></div>
+    </div>
+
+    <div class="an-chart-wrap">
+        <canvas class="an-chart" aria-label="Page views over time"></canvas>
+        <p class="an-note" data-if="isAllTime.value">The chart shows the last 30 days; the figures above are all time.</p>
+    </div>
+
+    <div class="an-tabs" role="tablist">
+        <button type="button" role="tab" data-on-click="showPages" data-bind-class="section.value === 'pages' && 'is-active'">Top pages</button>
+        <button type="button" role="tab" data-on-click="showJourneys" data-bind-class="section.value === 'journeys' && 'is-active'">Journeys</button>
+        <button type="button" role="tab" data-on-click="showSpikes" data-bind-class="section.value === 'spikes' && 'is-active'">
+            Spikes <span class="an-count" data-if="spikes.value.length" data-bind-text="spikes.value.length"></span></button>
+        <span data-help-title="Right-click a page"
+              data-help="Every page in these lists has a menu - right-click it, or use its ⋮ - to open it on the site, copy its address, or narrow the list to it."></span>
+        <label class="an-filter" data-if="section.value === 'pages'">
+            <span data-icon="search" data-icon-size="13"></span>
+            <input type="search" class="form-input" placeholder="Filter pages…" aria-label="Filter pages" data-model="filter.value">
+        </label>
+    </div>
+
+    <section class="an-panel" data-if="section.value === 'pages'">
+        <div class="an-list" data-each="pageRows.value key=key"></div>
+        <p class="an-note" data-bind-text="pagesNote.value"></p>
+    </section>
+
+    <section class="an-panel an-journeys" data-if="section.value === 'journeys'">
+        <div><h3>Entry pages <span data-help="Where sessions started."></span></h3>
+            <div class="an-list" data-each="entryRows.value key=key"></div></div>
+        <div><h3>Exit pages <span data-help="The last page a session viewed."></span></h3>
+            <div class="an-list" data-each="exitRows.value key=key"></div></div>
+        <div class="an-wide"><h3>Common paths <span data-help="The most frequent step from one page straight to another."></span></h3>
+            <div class="an-list" data-each="pathRows.value key=key"></div></div>
+        <p class="an-note" data-if="!sessionsCount.value">No sessions recorded in this range yet.</p>
+    </section>
+
+    <section class="an-panel" data-if="section.value === 'spikes'">
+        <div class="an-list" data-each="spikes.value key=key"></div>
+        <p class="an-note" data-if="!spikes.value.length">Nothing unusual today. A spike is a page running well above its last seven days at this hour.</p>
+    </section>
+</div>
+
+<style>
+.an-tool { display: flex; flex-direction: column; gap: .9rem; }
+.an-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
+.an-range { width: auto; height: 2rem; padding-top: 0; padding-bottom: 0; }
+.an-live { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--dm-text-xs); color: var(--dm-text-muted);
+    padding: .15rem .6rem; border-radius: 999px; background: var(--dm-surface-hover, rgba(127,127,127,.12)); }
+.an-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--dm-text-muted); }
+.an-live.is-on .an-live-dot { background: var(--dm-success, #16a34a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-success, #16a34a) 25%, transparent); }
+.an-bar-end { display: flex; gap: .3rem; margin-left: auto; }
+.an-more { font-size: var(--dm-text-lg); line-height: 1; padding: .2rem .5rem; }
+
+.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
+.an-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem;
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
+.an-kpi-value { font-size: var(--dm-text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
+.an-kpi-label { font-size: var(--dm-text-xs); color: var(--dm-text-muted); display: inline-flex; align-items: center; }
+
+.an-chart-wrap { position: relative; height: 220px; padding-bottom: 1.2rem; }
+.an-chart-wrap .an-note { position: absolute; bottom: 0; left: 0; margin: 0; }
+
+.an-tabs { display: flex; align-items: center; gap: .25rem; border-bottom: 1px solid var(--dm-border); flex-wrap: wrap; }
+.an-tabs [role="tab"] { border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--dm-text-sm);
+    padding: .45rem .7rem; color: var(--dm-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
+.an-tabs [role="tab"].is-active { color: var(--dm-text); border-bottom-color: var(--dm-primary); }
+.an-count { font-size: var(--dm-text-xs); padding: 0 .4rem; border-radius: 999px; background: var(--dm-warning, #d97706); color: #fff; }
+.an-filter { position: relative; margin: 0 0 .3rem auto; }
+.an-filter > svg, .an-filter > [data-icon] { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: var(--dm-text-muted); pointer-events: none; }
+.an-filter .form-input { height: 1.85rem; padding-left: 1.75rem; width: 14rem; }
+
+.an-panel { display: flex; flex-direction: column; gap: .5rem; }
+.an-journeys { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.an-journeys .an-wide, .an-journeys .an-note { grid-column: 1 / -1; }
+.an-journeys h3 { margin: 0 0 .35rem; font-size: var(--dm-text-xs); font-weight: 600; color: var(--dm-text-muted);
+    text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; }
+@media (max-width: 760px) { .an-journeys { grid-template-columns: 1fr; } }
+
+.an-list { display: flex; flex-direction: column; }
+.an-row { position: relative; display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem .3rem .6rem;
+    font-size: var(--dm-text-sm); border-radius: var(--dm-radius-sm); isolation: isolate; }
+.an-row:hover { background: var(--dm-surface-hover, rgba(127,127,127,.08)); }
+.an-bar-fill { position: absolute; inset: 2px auto 2px 0; z-index: -1; border-radius: var(--dm-radius-sm);
+    background: color-mix(in srgb, var(--dm-primary) 14%, transparent); }
+.an-rank { flex: 0 0 1.6rem; color: var(--dm-text-muted); font-size: var(--dm-text-xs); text-align: right; }
+.an-url { flex: 1; min-width: 0; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.an-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
+.an-share { flex: 0 0 3.2rem; text-align: right; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.an-kebab { flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: var(--dm-text-muted);
+    font-size: var(--dm-text-lg); line-height: 1; padding: 0 .3rem; border-radius: var(--dm-radius-sm); }
+.an-kebab:hover { color: var(--dm-primary); }
+.an-note { margin: .25rem 0; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.an-note:empty { display: none; }
+
+.an-panel-form { display: flex; flex-direction: column; gap: 1rem; padding: .25rem 0 .5rem; }
+.an-panel-form .form-label { display: flex; align-items: center; font-weight: 500; margin-bottom: .3rem; }
+.an-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+.an-panel-meta { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.an-panel-actions { display: flex; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--dm-border); }
+.an-panel-actions .spacer { flex: 1; }
+</style>

package/admin/js/templates/contacts.html

@@ -0,0 +1,156 @@
+<!-- No heading: the banner above (admin/js/lib/plugin-chrome.js) is the title.
+     Everything that changes is bound (M.applyBindings) - see admin/js/views/contacts.js, which also
+     inserts the row and chip templates: the router renders this file through _.render, eating any {{…}}.
+     The editor, settings and groups panels are slideovers built in the view. -->
+<div class="ct-tool">
+
+    <div class="ct-bar">
+        <label class="ct-search">
+            <span data-icon="search" data-icon-size="14"></span>
+            <input type="search" class="form-input" placeholder="Search contacts…" aria-label="Search contacts"
+                   data-model="query.value" data-focus="searchFocus.value">
+        </label>
+        <span class="ct-count" data-bind-text="countText.value"></span>
+        <span data-help-title="Working with contacts"
+              data-help="Search matches names, emails, phones, companies, notes and groups. Right-click a contact (or its ⋮) to edit, email, call, copy, star, file it in a group, duplicate or delete it. Click a row to edit. Press / to search, N for a new contact."></span>
+        <span class="ct-spacer"></span>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="create">
+            <span data-icon="plus" data-icon-size="14"></span> New contact
+        </button>
+        <button type="button" class="btn btn-sm btn-ghost ct-more" aria-label="More actions" title="Export, import, groups">⋮</button>
+    </div>
+
+    <!-- Everyone / starred / each group, with counts: the filter and the stats in one row. -->
+    <div class="ct-chips-row">
+        <div class="ct-chips" data-each="chips.value key=key"></div>
+        <span data-help-title="Filter by group"
+              data-help="The numbers are how many contacts are in each. Click one to show only those; click All to show everyone. ⋮ > Manage groups renames or deletes a group."></span>
+    </div>
+
+    <div class="ct-bulk" data-if="hasSelection.value">
+        <strong data-bind-text="selectionText.value"></strong>
+        <button type="button" class="btn btn-sm btn-ghost ct-bulk-group">
+            <span data-icon="folder-plus" data-icon-size="13"></span> Add to group ▾
+        </button>
+        <button type="button" class="btn btn-sm btn-ghost text-danger" data-on-click="bulkDelete">
+            <span data-icon="trash" data-icon-size="13"></span> Delete
+        </button>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="clearSelection">Clear</button>
+    </div>
+
+    <p class="ct-state" data-if="loading.value">Loading contacts…</p>
+    <p class="ct-state" data-if="isEmpty.value" data-bind-text="emptyText.value"></p>
+
+    <div class="ct-list">
+        <div class="ct-head" data-if="hasRows.value">
+            <input type="checkbox" class="ct-select-all" aria-label="Select every contact shown" title="Select all shown"
+                   data-bind-checked="allSelected.value">
+            <span></span>
+            <span class="ct-h-name">Name</span>
+            <span class="ct-col ct-company">Company</span>
+            <span class="ct-col ct-email">Email</span>
+            <span class="ct-col ct-phone">Phone</span>
+            <span class="ct-col ct-groups">Groups
+                <span data-help="Groups this contact is filed in. Change them from the contact's menu (Groups) or in the editor."></span></span>
+            <span></span>
+        </div>
+        <div class="ct-rows" data-each="rows.value key=id"></div>
+    </div>
+
+    <input type="file" class="ct-import-file" accept=".json,application/json" hidden>
+</div>
+
+<style>
+.ct-tool { display: flex; flex-direction: column; gap: .75rem; }
+.ct-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.ct-search { position: relative; flex: 1 1 200px; max-width: 320px; margin: 0; }
+.ct-search > svg, .ct-search > [data-icon] { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
+    color: var(--dm-text-muted); pointer-events: none; }
+.ct-search .form-input { height: 2rem; padding-left: 1.9rem; }
+.ct-count { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.ct-spacer { flex: 1; }
+.ct-more { font-size: var(--dm-text-lg); line-height: 1; padding: .2rem .5rem; }
+
+.ct-chips-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
+.ct-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
+.ct-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border-radius: 999px; cursor: pointer;
+    border: 1px solid var(--dm-border); background: none; color: var(--dm-text-muted); font: inherit; font-size: var(--dm-text-xs); }
+.ct-chip:hover { border-color: var(--dm-primary); color: var(--dm-text); }
+.ct-chip.is-active { background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-primary-text, #fff); }
+.ct-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
+
+.ct-bulk { display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem; font-size: var(--dm-text-sm);
+    border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-primary) 10%, transparent); }
+.ct-state { margin: 1.5rem 0; color: var(--dm-text-muted); text-align: center; }
+
+.ct-list { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.ct-list:has(.ct-rows:empty) { border: 0; }
+.ct-head, .ct-row {
+    display: grid; align-items: center; gap: .75rem; padding: .5rem .75rem;
+    /* Set by the view from the column settings. */
+    grid-template-columns: var(--ct-cols, 1.1rem 1.5rem minmax(10rem, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr) 1.75rem);
+}
+.ct-head { font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--dm-text-muted);
+    border-bottom: 1px solid var(--dm-border); padding-top: .4rem; padding-bottom: .4rem; }
+.ct-head > span { display: inline-flex; align-items: center; min-width: 0; }
+.ct-row { border-bottom: 1px solid var(--dm-border); font-size: var(--dm-text-sm); cursor: pointer; }
+.ct-row:last-child { border-bottom: 0; }
+.ct-row:hover, .ct-row:focus-visible { background: var(--dm-surface-hover, rgba(127,127,127,.08)); outline: none; }
+.ct-row.is-selected { background: color-mix(in srgb, var(--dm-primary) 8%, transparent); }
+.ct-fav { border: 0; background: none; cursor: pointer; padding: 0; font-size: var(--dm-text-base); line-height: 1; color: var(--dm-text-muted); opacity: .35; }
+.ct-fav:hover { opacity: .8; }
+.ct-fav.is-on { color: var(--dm-warning, #d97706); opacity: 1; }
+.ct-name { display: flex; align-items: center; gap: .6rem; min-width: 0; }
+.ct-avatar { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
+    font-size: var(--dm-text-xs); font-weight: 600; background: color-mix(in srgb, var(--dm-primary) 18%, transparent); color: var(--dm-primary); }
+.ct-name-text { display: flex; flex-direction: column; min-width: 0; }
+.ct-name-text strong, .ct-name-text small, .ct-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ct-name-text small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.ct-name-text small:empty { display: none; }
+.ct-col { min-width: 0; color: var(--dm-text-muted); }
+.ct-row .ct-email, .ct-row .ct-phone { color: var(--dm-text); }
+.ct-groups-text { font-size: var(--dm-text-xs); }
+.ct-kebab { border: 0; background: none; cursor: pointer; color: var(--dm-text-muted); font-size: var(--dm-text-base); line-height: 1;
+    padding: 0 .3rem; border-radius: var(--dm-radius-sm); }
+.ct-kebab:hover { color: var(--dm-primary); background: var(--dm-surface-hover, rgba(127,127,127,.15)); }
+
+/* Density and hidden columns, from settings - classes on the list, so rows never re-render for them. */
+.ct-list.is-compact .ct-row { padding-top: .25rem; padding-bottom: .25rem; }
+.ct-list.is-compact .ct-avatar { width: 1.4rem; height: 1.4rem; font-size: var(--dm-text-xs); }
+.ct-list.is-compact .ct-name-text small { display: none; }
+.ct-list.hide-company .ct-company, .ct-list.hide-email .ct-email,
+.ct-list.hide-phone .ct-phone, .ct-list.hide-groups .ct-groups { display: none; }
+@media (max-width: 820px) {
+    .ct-head { display: none; }
+    .ct-row { grid-template-columns: 1.1rem 1.5rem 1fr 1.75rem; }
+    .ct-row .ct-col { display: none; }
+}
+
+/* Slideover panels: editor, settings, groups. */
+.ct-panel { display: flex; flex-direction: column; gap: 1rem; padding: .25rem 0 .5rem; }
+.ct-panel .form-label { display: flex; align-items: center; font-weight: 500; margin-bottom: .3rem; }
+.ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem 1rem; }
+.ct-grid .ct-wide { grid-column: 1 / -1; }
+.ct-section { border-top: 1px solid var(--dm-border); padding-top: .75rem; }
+.ct-section > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; font-weight: 600; list-style: none; }
+.ct-section > summary::-webkit-details-marker { display: none; }
+.ct-section > summary::before { content: '▸'; color: var(--dm-text-muted); transition: transform .15s ease; }
+.ct-section[open] > summary::before { transform: rotate(90deg); }
+.ct-section-sum { font-weight: 400; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.ct-section-body { display: flex; flex-direction: column; gap: 1rem; padding-top: .75rem; }
+.ct-subhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
+.ct-subhead strong { display: inline-flex; align-items: center; }
+.ct-pick { display: flex; flex-wrap: wrap; gap: .35rem; }
+.ct-pick .ct-chip { font-size: var(--dm-text-xs); }
+.ct-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+.ct-panel-meta { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.ct-panel-actions { display: flex; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--dm-border); }
+.ct-panel-actions .spacer { flex: 1; }
+.ct-group-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-bottom: 1px solid var(--dm-border); font-size: var(--dm-text-sm); }
+.ct-group-row:last-child { border-bottom: 0; }
+.ct-group-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.ct-group-row small { color: var(--dm-text-muted); }
+.ct-groups-list { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
+.ct-add-group { display: flex; gap: .5rem; }
+.ct-add-group .form-input { flex: 1; }
+</style>

package/admin/js/templates/context-menu-editor.html

@@ -0,0 +1,212 @@
+<div class="page-header">
+    <h2><span data-icon="menu"></span> <span id="ctx-title">New context menu</span></h2>
+    <div class="header-actions">
+        <a class="btn btn-secondary" href="#/context-menus"><span data-icon="arrow-left"></span> Back</a>
+        <button class="btn btn-primary" id="ctx-save"><span data-icon="check"></span> Save</button>
+    </div>
+</div>
+
+<div id="ctx-errors" class="alert alert-danger mb-4" style="display:none;"></div>
+
+<p class="text-muted ctx-intro">
+    A context menu is not placed on a page the way a nav menu is. It attaches to a <strong>region</strong>
+    and opens when someone right-clicks inside it. So there are two questions to answer: which region, and
+    what the menu offers. Everything else has a sensible default.
+</p>
+
+<div class="row ctx-workspace">
+  <div class="col-8">
+<div class="tabs" id="ctx-tabs">
+    <div class="tab-list">
+        <button class="tab-item active">Binding</button>
+        <button class="tab-item">Items</button>
+        <button class="tab-item">Appearance</button>
+        <button class="tab-item">Scope</button>
+    </div>
+
+    <!-- Binding ------------------------------------------------------- -->
+    <div class="tab-panel active">
+        <div class="row">
+            <div class="col-12">
+                <div class="card mb-4">
+                    <div class="card-header"><h3 class="m-0">Where it binds</h3></div>
+                    <div class="card-body">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-name">Name<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Your label for this menu in the admin list. Visitors never see it.">?</button></label>
+                            <input class="form-input" id="ctx-name" type="text" placeholder="Entry actions">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-slug">Slug<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The filename this menu is saved as. Fixed once created, because the file is the record.">?</button></label>
+                            <input class="form-input" id="ctx-slug" type="text" placeholder="entry-actions">
+                            <small class="text-muted">Lowercase letters, numbers and hyphens. Cannot be changed later.</small>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-selector">Container selector<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="A CSS selector for the region, e.g. #product-grid, .entry-card or main. Right-clicks anywhere inside it are offered to this menu. body, html, * and :root are refused, because they would swallow every other menu on the page.">?</button></label>
+                            <input class="form-input" id="ctx-selector" type="text" placeholder="#product-grid">
+                            <small class="text-muted">The region this menu covers. Right-clicks inside it are offered to this menu.</small>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-match">Match (optional)<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Narrows it: only claim the click when it landed on something matching this, e.g. [data-entry-id] to answer on rows but not the space between them. Blank means the whole container.">?</button></label>
+                            <input class="form-input" id="ctx-match" type="text" placeholder="[data-entry-id]">
+                            <small class="text-muted">Only claim right-clicks on descendants matching this. Leave empty to cover the whole container.</small>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-exclude">Exclude (optional)<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Holes in the region. A right-click on one of these falls through to whatever encloses it, which is useful for links and inputs where the browser's own menu is more use.">?</button></label>
+                            <input class="form-input" id="ctx-exclude" type="text" placeholder="a, button, input">
+                            <small class="text-muted">Regions that decline, so the click falls through to whatever encloses them.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-12">
+                <div class="card mb-4">
+                    <div class="card-header"><h3 class="m-0">Behaviour<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Menus can sit inside one another. A right-click picks the INNERMOST menu covering the spot clicked, never the one that happened to load first.">?</button></h3></div>
+                    <div class="card-body">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-inherit">When nested inside another menu<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Append puts the outer menu's items after yours, Prepend before, and Stand alone shows only yours.">?</button></label>
+                            <select class="form-select" id="ctx-inherit">
+                                <option value="append">Show my items, then theirs (default)</option>
+                                <option value="prepend">Show their items, then mine</option>
+                                <option value="false">Show only my items</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-check">
+                                <input type="checkbox" id="ctx-enabled" checked> Enabled
+                            </label>
+                            <small class="text-muted">Turn this off to park a menu without deleting it. A disabled menu is never sent to the browser.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Items --------------------------------------------------------- -->
+    <div class="tab-panel">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="m-0">Items<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="What the menu offers when it opens, top to bottom. An Item does something when clicked, a Divider draws a line, a Heading labels a group. A menu whose items are all dividers and headings is refused on save, because there would be nothing to click.">?</button></h3>
+                <button class="btn btn-sm btn-secondary" id="ctx-add-item"><span data-icon="plus"></span> Add item</button>
+            </div>
+            <div class="card-body">
+                <div id="ctx-items"></div>
+                <p class="text-muted mb-0" id="ctx-items-empty">No items yet. Every menu needs at least one.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Appearance ---------------------------------------------------- -->
+    <div class="tab-panel">
+        <div class="card">
+            <div class="card-header"><h3 class="m-0">Appearance<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="How the panel looks when it opens. Leave anything blank to inherit the site theme, which is usually what you want so the menu matches everything around it.">?</button></h3></div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-accent">Accent<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The colour used for hover and the active item.">?</button></label>
+                            <select class="form-select" id="ctx-accent">
+                                <option value="">Theme default</option>
+                                <option value="primary">Primary</option>
+                                <option value="success">Success</option>
+                                <option value="danger">Danger</option>
+                                <option value="warning">Warning</option>
+                                <option value="info">Info</option>
+                            </select>
+                            <small class="text-muted">Tints the border and hover wash. Labels keep the theme's text colour so they stay readable.</small>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-transition">Transition</label>
+                            <select class="form-select" id="ctx-transition">
+                                <option value="">Default (scale)</option>
+                                <option value="fade">Fade</option>
+                                <option value="slide">Slide</option>
+                                <option value="none">None</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-density">Density</label>
+                            <select class="form-select" id="ctx-density">
+                                <option value="">Comfortable</option>
+                                <option value="compact">Compact</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-radius">Corner radius</label>
+                            <select class="form-select" id="ctx-radius">
+                                <option value="">Default</option>
+                                <option value="none">Square</option>
+                                <option value="sm">Small</option>
+                                <option value="md">Medium</option>
+                                <option value="lg">Large</option>
+                                <option value="xl">Extra large</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-shadow">Shadow</label>
+                            <select class="form-select" id="ctx-shadow">
+                                <option value="">Default</option>
+                                <option value="none">None</option>
+                                <option value="sm">Small</option>
+                                <option value="md">Medium</option>
+                                <option value="lg">Large</option>
+                                <option value="xl">Extra large</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-opacity">Opacity<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Below 100 the panel lets the page show through. Anything under about 80 gets hard to read over busy content.">?</button></label>
+                            <input class="form-input" id="ctx-opacity" type="number" min="20" max="100" placeholder="100">
+                            <small class="text-muted">Below 100 gives a translucent panel with a blurred backdrop. Text stays fully opaque.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scope --------------------------------------------------------- -->
+    <div class="tab-panel">
+        <div class="card">
+            <div class="card-header"><h3 class="m-0">Scope<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Which pages carry this menu. Leave BOTH blank and it applies site-wide. A menu that does not apply to a page is not sent to that page at all.">?</button></h3></div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-pages">Pages<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Comma separated URL paths. Supports * as a wildcard, so /shop/* covers everything under /shop. Blank means every page.">?</button></label>
+                            <input class="form-input" id="ctx-pages" type="text" placeholder="/shop/*, /about">
+                            <small class="text-muted">Comma separated. Supports a trailing <code>/*</code>. Leave empty for site-wide.</small>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label class="form-label" for="ctx-projects">Projects<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Comma separated project slugs. The menu then applies only to pages belonging to those projects.">?</button></label>
+                            <input class="form-input" id="ctx-projects" type="text" placeholder="core, shop">
+                            <small class="text-muted">Comma separated project slugs.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+  </div><!-- /col-8 -->
+
+  <!-- One preview, beside the tabs rather than inside them: four copies would
+       be four elements sharing #ctx-preview, and the menu binds by selector.
+       Sticky, so it stays put while a long Items tab scrolls past it. -->
+  <div class="col-4">
+    <div class="card ctx-preview-card">
+      <div class="card-header"><h3 class="m-0">Try it<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The real menu, built from what you have entered, updating as you type. This is the component itself rather than a drawing of it.">?</button></h3></div>
+      <div class="card-body">
+        <p class="text-muted">Right-click the panel below to see this menu as configured.</p>
+        <div id="ctx-preview" class="p-4 text-center" style="border:1px dashed var(--dm-border); border-radius:var(--dm-radius-md);">
+          Right-click to preview
+        </div>
+      </div>
+    </div>
+  </div>
+</div><!-- /ctx-workspace -->

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

@@ -0,0 +1,16 @@
+<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>
+
+<div class="card">
+    <div class="card-body">
+        <div id="context-menus-table"></div>
+    </div>
+</div>